secstate/Iris
Public Access
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

Language as window.language for access in pure function

Browse Source
This commit is contained in:
James Barnsley
2020-07-05 20:58:39 +12:00
parent 78ec0eff26
commit 1158fb7c2f
14 changed files with 17353 additions and 136 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/js/App.js
View File

@ -88,6 +88,7 @@ export class App extends React.Component {
this.handleInstallPrompt = this.handleInstallPrompt.bind(this);
this.handleFocusAndBlur = this.handleFocusAndBlur.bind(this);
window.language = props.language;
}
componentWillUnmount() {
@ -366,6 +367,7 @@ export class App extends React.Component {
}
const mapStateToProps = (state, ownProps) => ({
language: state.ui.language,
theme: state.ui.theme,
wide_scrollbar_enabled: state.ui.wide_scrollbar_enabled,
smooth_scrolling_enabled: state.ui.smooth_scrolling_enabled,

30
src/js/components/Sidebar.js
View File

@ -11,6 +11,8 @@ import * as mopidyActions from '../services/mopidy/actions';
import { content, Content } from '../locale';
class Sidebar extends React.Component {
closeSidebar = () => uiActions.toggleSidebar(false);
renderStatusIcon() {
const {
update_available,
@ -93,57 +95,57 @@ class Sidebar extends React.Component {
{spotify_available && (
<section className="sidebar__menu__section">
<title className="sidebar__menu__section__title">
{content('sidebar.discover')}
<Content path="sidebar.discover" />
</title>
<Link to="/discover/recommendations" history={history} className="sidebar__menu__item" activeClassName="sidebar__menu__item--active">
<Icon name="explore" type="material" />
{content('sidebar.discover')}
<Content path="sidebar.discover" />
</Link>
<Link to="/discover/categories" history={history} className="sidebar__menu__item" activeClassName="sidebar__menu__item--active">
<Icon name="mood" type="material" />
{content('sidebar.genre')}
<Content path="sidebar.genre" />
</Link>
<Link to="/discover/featured" history={history} className="sidebar__menu__item" activeClassName="sidebar__menu__item--active">
<Icon name="star" type="material" />
{content('sidebar.featured_playlists')}
<Content path="sidebar.featured_playlists" />
</Link>
<Link to="/discover/new-releases" history={history} className="sidebar__menu__item" activeClassName="sidebar__menu__item--active">
<Icon name="new_releases" type="material" />
{content('sidebar.new_releases')}
<Content path="sidebar.new_releases" />
</Link>
</section>
)}
<section className="sidebar__menu__section">
<title className="sidebar__menu__section__title">
{content('sidebar.my_music')}
<Content path="sidebar.my_music" />
</title>
<Link to="/library/playlists" history={history} className="sidebar__menu__item" activeClassName="sidebar__menu__item--active">
<Icon name="queue_music" type="material" />
{content('sidebar.playlists')}
<Content path="sidebar.playlists" />
</Link>
<Link to="/library/artists" history={history} className="sidebar__menu__item" activeClassName="sidebar__menu__item--active">
<Icon name="recent_actors" type="material" />
{content('sidebar.artists')}
<Content path="sidebar.artists" />
</Link>
<Link to="/library/albums" history={history} className="sidebar__menu__item" activeClassName="sidebar__menu__item--active">
<Icon name="album" type="material" />
{content('sidebar.albums')}
<Content path="sidebar.albums" />
</Link>
<Link to="/library/tracks" history={history} className="sidebar__menu__item" activeClassName="sidebar__menu__item--active">
<Icon name="music_note" type="material" />
{content('sidebar.tracks')}
<Content path="sidebar.tracks" />
</Link>
<Link to="/library/browse" history={history} className="sidebar__menu__item" activeClassName="sidebar__menu__item--active">
<Icon name="folder" type="material" />
{content('sidebar.browse')}
<Content path="sidebar.browse" />
</Link>
</section>
<section className="sidebar__menu__section">
<Link to="/settings" history={history} className="sidebar__menu__item" activeClassName="sidebar__menu__item--active">
<Icon name="settings" type="material" />
{content('sidebar.settings')}
<Content path="sidebar.settings" />
{this.renderStatusIcon()}
</Link>
</section>
@ -153,7 +155,7 @@ class Sidebar extends React.Component {
<Dropzones />
<div className="close" onClick={(e) => uiActions.toggleSidebar(false)}>
<div className="close" onClick={this.closeSidebar}>
<Icon name="close" />
</div>
@ -162,7 +164,7 @@ class Sidebar extends React.Component {
}
}
const mapStateToProps = (state, ownProps) => ({
const mapStateToProps = (state) => ({
mopidy_connected: state.mopidy.connected,
pusher_connected: state.pusher.connected,
spotify_available: state.spotify.access_token,

8
src/js/locale/de.yaml
View File

@ -1,3 +1,7 @@
sidebar:
now_playing: GERMAN
search: GERMAN
now_playing: Läuft gerade
settings: Einstellungen
now_playing:
title: Läuft gerade
settings:
title: Einstellungen

6
src/js/locale/dictionaries.js
View File

@ -1,5 +1,9 @@
import { merge } from 'lodash';
import en from './en.yaml';
import de from './de.yaml';
import _de from './de.yaml';
const de = {};
merge(de, en, _de);
export default {
en,

21
src/js/locale/en.yaml
View File

@ -22,4 +22,23 @@ now_playing:
current_track:
playing_from: Playling from
shuffle: Shuffle
clear: Clear
clear: Clear
search:
title: 'Search: %{term}'
context_actions:
sort: Sort
source: Sources (%{count})
placeholder: Search
artists:
title: Artists
more: All artists (%{count})
albums:
title: Albums
more: All albums (%{count})
playlists:
title: Playlists
more: All playlists (%{count})
tracks:
title: Tracks
settings:
title: Settings

22
src/js/locale/index.js
View File

@ -7,9 +7,11 @@ import { titleCase } from '../util/helpers';
const PARAMS_REG_EXP = '%{(.*?)}';
const paramsRegExp = new RegExp(PARAMS_REG_EXP, 'g');
const content = (path, params = {}, transform, dictionary) => {
const content = (path, params = {}, transform) => {
console.log(window.language);
const dictionary = dictionaries[window.language || 'en'] || dictionaries.en;
let value = get((dictionary || dictionaries.en), path, '');
let value = get((dictionary), path, '');
value = value.replace(
paramsRegExp,
(replaceText, key) => params.hasOwnProperty(key) ? params[key] : '',
@ -32,16 +34,12 @@ const content = (path, params = {}, transform, dictionary) => {
return value;
};
const Content = ({ path, params = {}, transform, children }) => {
const language = useSelector((state) => state.ui.language);
const dictionary = dictionaries[language];
return (
<Fragment>
{content(path, params, transform, dictionary)}
{children}
</Fragment>
);
}
const Content = ({ path, params = {}, transform, children }) => (
<Fragment>
{content(path, params, transform)}
{children}
</Fragment>
);
export default {
Content,

56
src/js/services/localstorage/middleware.js
View File

@ -2,9 +2,6 @@
import storage from '../../util/storage';
const localstorageMiddleware = (function () {
/**
* The actual middleware inteceptor
* */
return (store) => (next) => (action) => {
// proceed as normal first
// this way, any reducers and middleware do their thing BEFORE we store our new state
@ -279,32 +276,35 @@ const localstorageMiddleware = (function () {
);
break;
/**
* Experimental saving of stores to localStorage
* This uses way too much storage space (ie 10MB+) so won't work. We need
* to use the IndexedDB engine instead for storing this quantity of data
/**
* Experimental saving of stores to localStorage
* This uses way too much storage space (ie 10MB+) so won't work. We need
* to use the IndexedDB engine instead for storing this quantity of data
case 'UPDATE_TRACKS_INDEX':
storage.set('core', {tracks: action.tracks});
next(action);
break;
case 'UPDATE_ALBUMS_INDEX':
storage.set('core', {albums: action.albums});
next(action);
break;
case 'UPDATE_ARTISTS_INDEX':
storage.set('core', {artists: action.artists});
next(action);
break;
case 'UPDATE_PLAYLISTS_INDEX':
storage.set('core', {playlists: action.playlists});
next(action);
break;
case 'UPDATE_USERS_INDEX':
storage.set('core', {users: action.users});
next(action);
break;
*/
case 'UPDATE_TRACKS_INDEX':
storage.set('core', {tracks: action.tracks});
next(action);
break;
case 'UPDATE_ALBUMS_INDEX':
storage.set('core', {albums: action.albums});
next(action);
break;
case 'UPDATE_ARTISTS_INDEX':
storage.set('core', {artists: action.artists});
next(action);
break;
case 'UPDATE_PLAYLISTS_INDEX':
storage.set('core', {playlists: action.playlists});
next(action);
break;
case 'UPDATE_USERS_INDEX':
storage.set('core', {users: action.users});
next(action);
break;
*/
default:
break;
}
};
}());

7
src/js/services/ui/actions.js
View File

@ -69,6 +69,13 @@ export function setWindowFocus(window_focus) {
};
}
export function setLanguage(language) {
return {
type: 'SET_LANGUAGE',
language,
};
}
export function hideContextMenu() {
return {
type: 'HIDE_CONTEXT_MENU',

9
src/js/services/ui/middleware.js
View File

@ -3,9 +3,6 @@ import ReactGA from 'react-ga';
const uiActions = require('./actions.js');
const UIMiddleware = (function () {
/**
* The actual middleware inteceptor
* */
return (store) => (next) => (action) => {
switch (action.type) {
case 'MOPIDY_STATE':
@ -252,6 +249,12 @@ const UIMiddleware = (function () {
next(action);
break;
case 'SET_LANGUAGE':
const { language } = action;
window.language = language;
store.dispatch(uiActions.set({ language }));
break;
// This action is irrelevant to us, pass it on to the next middleware
default:
return next(action);

17
src/js/views/Queue.js
View File

@ -20,7 +20,7 @@ import {
getFromUri,
uriType,
} from '../util/helpers';
import { content } from '../locale';
import { content, Content } from '../locale';
class Queue extends React.Component {
constructor(props) {
@ -33,15 +33,14 @@ class Queue extends React.Component {
}
componentDidMount() {
// Restore any limit defined in our location state
const state = this.props.location.state ? this.props.location.state : {};
if (state.limit) {
this.setState({
limit: state.limit,
});
const {
uiActions: { setWindowTitle },
location: { limit } = {},
} = this.props;
if (limit) {
this.setState({ limit });
}
this.props.uiActions.setWindowTitle('Now playing');
setWindowTitle(content('now_playing.title'));
}
shouldComponentUpdate(nextProps) {

8
src/js/views/Settings.js
View File

@ -20,6 +20,7 @@ import * as mopidyActions from '../services/mopidy/actions';
import * as lastfmActions from '../services/lastfm/actions';
import * as spotifyActions from '../services/spotify/actions';
import { isHosted } from '../util/helpers';
import { content } from '../locale';
class Settings extends React.Component {
constructor(props) {
@ -35,7 +36,8 @@ class Settings extends React.Component {
}
componentDidMount() {
this.props.uiActions.setWindowTitle('Settings');
const { uiActions: { setWindowTitle } } = this.props;
setWindowTitle(content('settings.title'));
}
componentDidUpdate = () => {
@ -51,8 +53,8 @@ class Settings extends React.Component {
}
onLanguageChange = (language) => {
const { uiActions: { set } } = this.props;
set({ language });
const { uiActions: { setLanguage } } = this.props;
setLanguage(language);
}
resetAllSettings() {