Halfway through modals mapping

src/js/locale/en.yaml

@@ -26,9 +26,11 @@ actions:
   enable: Enable
   disable: Disable
   send: Send
+  save: Save
   edit: Edit
   add: Add
   confirm: Are you sure?
+  delete: Delete
 common:
   popularity: Popularity
   name: Name
@@ -319,3 +321,31 @@ modal:
       label: Position
       end: End
       next: After current track
+  edit_playlist:
+    title: Edit playlist
+    title_create: Create playlist
+    name_required: Name is required
+    name: Name
+    description: Description
+    provider: Provider
+    image:
+      label: Cover image
+      description: JPEG only, 256kB max. Leave empty to keep cover image unchanged.
+    options:
+      label: Options
+      public: Public
+      collaborative: Collaborative
+    create_playlist: Create playlist
+  edit_command:
+    title: Edit command
+    title_create: Create command
+    name: Name
+    colour: Colour
+    icon: Icon
+    url: URL
+    method:
+      label: Method
+      get: GET
+      post: POST
+    data: Data
+    headers: Additional headers

src/js/views/library/LibraryPlaylists.js

@@ -274,7 +274,7 @@ class LibraryPlaylists extends React.Component {
         />
         <Link className="button button--no-hover" to="/playlist/create">
           <Icon name="add_box" />
-          <I18n path="actions.new" />
+          <I18n path="actions.add" />
         </Link>
       </span>
     );

src/js/views/modals/AddToPlaylist.js

@@ -12,7 +12,7 @@ import * as mopidyActions from '../../services/mopidy/actions';
 import * as spotifyActions from '../../services/spotify/actions';
 import { sourceIcon, decodeMopidyUri } from '../../util/helpers';
 import { sortItems } from '../../util/arrays';
-import { I18n } from '../../locale';
+import { I18n, i18n } from '../../locale';
 
 class AddToPlaylist extends React.Component {
   componentDidMount = () => {
@@ -23,6 +23,9 @@ class AddToPlaylist extends React.Component {
       spotify_available,
       spotifyActions,
       mopidyActions,
+      uiActions: {
+        setWindowTitle,
+      },
     } = this.props;
 
     if ((!spotify_library_playlists_status || spotify_library_playlists_status !== 'finished') && spotify_available) {
@@ -32,6 +35,8 @@ class AddToPlaylist extends React.Component {
     if ((!mopidy_library_playlists_status || mopidy_library_playlists_status !== 'finished') && mopidy_connected) {
       mopidyActions.getLibraryPlaylists();
     }
+
+    setWindowTitle(i18n('modal.add_to_playlist.title'));
   }
 
   playlistSelected = (playlist_uri) => {

src/js/views/modals/CreatePlaylist.js

@@ -5,6 +5,7 @@ import { bindActionCreators } from 'redux';
 import Modal from './Modal';
 import * as coreActions from '../../services/core/actions';
 import * as uiActions from '../../services/ui/actions';
+import { i18n, I18n } from '../../locale';
 
 class CreatePlaylist extends React.Component {
   constructor(props) {
@@ -19,14 +20,14 @@ class CreatePlaylist extends React.Component {
   }
 
   componentDidMount() {
-    this.props.uiActions.setWindowTitle('Create playlist');
+    this.props.uiActions.setWindowTitle(i18n('modal.edit_playlist.title_create'));
   }
 
   createPlaylist(e) {
     e.preventDefault();
 
     if (!this.state.name || this.state.name == '') {
-      this.setState({ error: 'Name is required' });
+      this.setState({ error: i18n('modal.edit_playlist.name_required') });
       return false;
     }
     this.props.coreActions.createPlaylist(
@@ -48,7 +49,9 @@ class CreatePlaylist extends React.Component {
         return (
           <div>
             <div className="field text">
-              <div className="name">Name</div>
+              <div className="name">
+                <I18n path="modal.edit_playlist.name" />
+              </div>
               <div className="input">
                 <input
                   type="text"
@@ -59,7 +62,9 @@ class CreatePlaylist extends React.Component {
             </div>
 
             <div className="field text">
-              <div className="name">Description</div>
+              <div className="name">
+                <I18n path="modal.edit_playlist.description" />
+              </div>
               <div className="input">
                 <input
                   type="text"
@@ -72,7 +77,7 @@ class CreatePlaylist extends React.Component {
 
             <div className="field checkbox white">
               <div className="name">
-								Options
+								<I18n path="modal.edit_playlist.options.label" />
               </div>
               <div className="input">
                 <label>
@@ -82,7 +87,9 @@ class CreatePlaylist extends React.Component {
                     checked={this.state.is_public}
                     onChange={(e) => this.setState({ is_public: !this.state.is_public })}
                   />
-                  <span className="label">Public</span>
+                  <span className="label">
+                    <I18n path="modal.edit_playlist.options.public" />
+                  </span>
                 </label>
                 <label>
                   <input
@@ -91,7 +98,9 @@ class CreatePlaylist extends React.Component {
                     checked={this.state.is_collaborative}
                     onChange={(e) => this.setState({ is_collaborative: !this.state.is_collaborative })}
                   />
-                  <span className="label">Collaborative</span>
+                  <span className="label">
+                    <I18n path="modal.edit_playlist.options.collaborative" />
+                  </span>
                 </label>
               </div>
             </div>
@@ -102,7 +111,9 @@ class CreatePlaylist extends React.Component {
         return (
           <div>
             <div className="field text">
-              <div className="name">Name</div>
+              <div className="name">
+                <I18n path="modal.edit_playlist.name" />
+              </div>
               <div className="input">
                 <input
                   type="text"
@@ -121,12 +132,14 @@ class CreatePlaylist extends React.Component {
 
     return (
       <Modal className="modal--create-playlist">
-        <h1>Create playlist</h1>
+        <h1>
+          <I18n path="modal.edit_playlist.title_create" />
+        </h1>
         <form onSubmit={(e) => this.createPlaylist(e)}>
 
           <div className="field radio white">
             <div className="name">
-							Provider
+							<I18n path="modal.edit_playlist.provider" />
             </div>
             <div className="input">
               <label>
@@ -137,7 +150,9 @@ class CreatePlaylist extends React.Component {
                   checked={this.state.scheme === 'm3u'}
                   onChange={(e) => this.setState({ scheme: e.target.value })}
                 />
-                <span className="label">Mopidy</span>
+                <span className="label">
+                  <I18n path="services.mopidy.title" />
+                </span>
               </label>
               <label>
                 <input
@@ -148,7 +163,9 @@ class CreatePlaylist extends React.Component {
                   checked={this.state.scheme === 'spotify'}
                   onChange={(e) => this.setState({ scheme: e.target.value })}
                 />
-                <span className="label">Spotify</span>
+                <span className="label">
+                  <I18n path="services.spotify.title" />
+                </span>
               </label>
             </div>
           </div>
@@ -156,7 +173,9 @@ class CreatePlaylist extends React.Component {
           {this.renderFields()}
 
           <div className="actions centered-text">
-            <button type="submit" className="button button--primary button--large">Create playlist</button>
+            <button type="submit" className="button button--primary button--large">
+              <I18n path="modal.edit_playlist.create_playlist" />
+            </button>
           </div>
 
         </form>

src/js/views/modals/EditCommand.js

@@ -9,6 +9,7 @@ import TextField from '../../components/Fields/TextField';
 import * as pusherActions from '../../services/pusher/actions';
 import * as uiActions from '../../services/ui/actions';
 import { scrollTo, generateGuid } from '../../util/helpers';
+import { i18n, I18n } from '../../locale';
 
 class EditCommand extends React.Component {
   constructor(props) {
@@ -27,10 +28,10 @@ class EditCommand extends React.Component {
 
   componentDidMount() {
     if (this.props.command) {
-      this.props.uiActions.setWindowTitle('Edit command');
+      this.props.uiActions.setWindowTitle(i18n('modal.edit_command.title'));
       this.setState(this.props.command);
     } else {
-      this.props.uiActions.setWindowTitle('Create command');
+      this.props.uiActions.setWindowTitle(i18n('modal.edit_command.title_create'));
     }
   }
 
@@ -120,13 +121,13 @@ class EditCommand extends React.Component {
     return (
       <Modal className="modal--create-command">
         <h1>
-          {`${command ? 'Edit' : 'Create'} command`}
+          <I18n path={`modal.edit_command.title${command ? '' : '_create'}`} />
         </h1>
         <form onSubmit={(e) => this.handleSubmit(e)}>
 
           <div className="field textarea white">
             <div className="name">
-							Name
+							<I18n path="modal.edit_command.name" />
             </div>
             <div className="input">
               <TextField
@@ -139,7 +140,7 @@ class EditCommand extends React.Component {
 
           <div className="field radio white">
             <div className="name">
-							Colour
+							<I18n path="modal.edit_command.colour" />
             </div>
             <div className="input">
               <ColourField
@@ -151,7 +152,7 @@ class EditCommand extends React.Component {
 
           <div className="field radio white">
             <div className="name">
-							Icon
+							<I18n path="modal.edit_command.icon" />
             </div>
             <div className="input">
               <IconField
@@ -164,7 +165,7 @@ class EditCommand extends React.Component {
 
           <div className="field textarea white">
             <div className="name">
-							URL
+							<I18n path="modal.edit_command.url" />
             </div>
             <div className="input">
               <TextField
@@ -177,7 +178,7 @@ class EditCommand extends React.Component {
 
           <div className="field radio white">
             <div className="name">
-							Method
+							<I18n path="modal.edit_command.method.label" />
             </div>
             <div className="input">
               <label>
@@ -188,7 +189,9 @@ class EditCommand extends React.Component {
                   checked={method === 'GET'}
                   onChange={(e) => this.setState({ method: e.target.value })}
                 />
-                <span className="label">GET</span>
+                <span className="label">
+                  <I18n path="modal.edit_command.method.get" />
+                </span>
               </label>
               <label>
                 <input
@@ -198,7 +201,9 @@ class EditCommand extends React.Component {
                   checked={method === 'POST'}
                   onChange={(e) => this.setState({ method: e.target.value })}
                 />
-                <span className="label">POST</span>
+                <span className="label">
+                  <I18n path="modal.edit_command.method.post" />
+                </span>
               </label>
             </div>
           </div>
@@ -206,7 +211,7 @@ class EditCommand extends React.Component {
           {method === 'POST' && (
           <div className="field textarea white">
             <div className="name">
-							Data
+							<I18n path="modal.edit_command.data" />
             </div>
             <div className="input">
               <textarea
@@ -220,7 +225,7 @@ class EditCommand extends React.Component {
 
           <div className="field textarea white">
             <div className="name">
-							Additional Headers
+							<I18n path="modal.edit_command.headers" />
             </div>
             <div className="input">
               <textarea
@@ -239,10 +244,12 @@ class EditCommand extends React.Component {
                 className="button button--destructive button--large"
                 onClick={(e) => this.handleDelete(e)}
               >
-                Delete
+                <I18n path="actions.delete" />
               </button>
             )}
-            <button type="submit" className="button button--primary button--large">Save</button>
+            <button type="submit" className="button button--primary button--large">
+              <I18n path="actions.save" />
+            </button>
           </div>
 
         </form>

src/js/views/modals/EditPlaylist.js

@@ -8,6 +8,7 @@ import * as uiActions from '../../services/ui/actions';
 import * as mopidyActions from '../../services/mopidy/actions';
 import * as spotifyActions from '../../services/spotify/actions';
 import { uriSource } from '../../util/helpers';
+import { i18n, I18n } from '../../locale';
 
 class EditPlaylist extends React.Component {
   constructor(props) {
@@ -24,7 +25,7 @@ class EditPlaylist extends React.Component {
   }
 
   componentDidMount() {
-    this.props.uiActions.setWindowTitle('Edit playlist');
+    this.props.uiActions.setWindowTitle(i18n('modal.edit_playlist.title'));
 
     if (this.props.playlist) {
       this.setState({
@@ -84,7 +85,7 @@ class EditPlaylist extends React.Component {
     e.preventDefault();
 
     if (!this.state.name || this.state.name == '') {
-      this.setState({ error: 'Name is required' });
+      this.setState({ error: i18n('modal.edit_playlist.name_required') });
       return false;
     }
     this.props.coreActions.savePlaylist(
@@ -121,7 +122,9 @@ class EditPlaylist extends React.Component {
         return (
           <div>
             <div className="field text">
-              <div className="name">Name</div>
+              <div className="name">
+                <I18n path="modal.edit_playlist.name" />
+              </div>
               <div className="input">
                 <input
                   type="text"
@@ -131,7 +134,9 @@ class EditPlaylist extends React.Component {
               </div>
             </div>
             <div className="field text">
-              <div className="name">Description</div>
+              <div className="name">
+                <I18n path="modal.edit_playlist.description" />
+              </div>
               <div className="input">
                 <input
                   type="text"
@@ -141,7 +146,9 @@ class EditPlaylist extends React.Component {
               </div>
             </div>
             <div className="field file">
-              <div className="name">Cover image</div>
+              <div className="name">
+                <I18n path="modal.edit_playlist.image.label" />
+              </div>
               <div className="input">
                 <input
                   type="file"
@@ -149,13 +156,13 @@ class EditPlaylist extends React.Component {
                   onChange={(e) => this.setImage(e)}
                 />
                 <div className="description">
-									JPEG only, 256kB max. Leave empty to keep cover image unchanged.
+									<I18n path="modal.edit_playlist.image.description" />
                 </div>
               </div>
             </div>
             <div className="field checkbox white">
               <div className="name">
-								Options
+								<I18n path="modal.edit_playlist.options.label" />
               </div>
               <div className="input">
                 <label>
@@ -165,7 +172,9 @@ class EditPlaylist extends React.Component {
                     checked={this.state.public}
                     onChange={(e) => this.setState({ public: !this.state.public })}
                   />
-                  <span className="label">Public</span>
+                  <span className="label">
+                    <I18n path="modal.edit_playlist.options.public" />
+                  </span>
                 </label>
                 <label>
                   <input
@@ -174,7 +183,9 @@ class EditPlaylist extends React.Component {
                     checked={this.state.collaborative}
                     onChange={(e) => this.setState({ collaborative: !this.state.collaborative })}
                   />
-                  <span className="label">Collaborative</span>
+                  <span className="label">
+                    <I18n path="modal.edit_playlist.options.collaborative" />
+                  </span>
                 </label>
               </div>
             </div>
@@ -186,7 +197,9 @@ class EditPlaylist extends React.Component {
         return (
           <div>
             <div className="field text">
-              <div className="name">Name</div>
+              <div className="name">
+                <I18n path="modal.edit_playlist.name" />
+              </div>
               <div className="input">
                 <input
                   type="text"
@@ -203,14 +216,18 @@ class EditPlaylist extends React.Component {
   render() {
     return (
       <Modal className="modal--edit-playlist">
-        <h1>Edit playlist</h1>
+        <h1>
+          <I18n path="modal.edit_playlist.title" />
+        </h1>
         {this.state.error ? <h3 className="red-text">{this.state.error}</h3> : null}
         <form onSubmit={(e) => this.savePlaylist(e)}>
 
           {this.renderFields()}
 
           <div className="actions centered-text">
-            <button type="submit" className="button button--primary button--large">Save</button>
+            <button type="submit" className="button button--primary button--large">
+              <I18n path="actions.save" />
+            </button>
           </div>
         </form>
       </Modal>