Add more locale strings

app/locale/en-US.ts

@@ -1,8 +1,49 @@
 export default {
+  add: 'Add',
+  addMedia: 'Add Media',
+  advanced: 'Advanced',
+  allowTracking: 'Allow Tracking',
+  allowTrackingDesc: 'Send app usage information to the developer.',
+  cancel: 'Cancel',
+  chatColor: 'Chat Color',
+  chatPlaceholder: 'Message or URL',
+  connecting: 'Connecting',
+  copy: 'Copy',
+  copyLink: 'Copy link',
+  debug: 'Debug',
+  developerMode: 'Developer Mode',
+  developerModeDesc: 'Show developer tools for inspecting web pages.',
+  disconnect: 'Disconnect',
+  enterJoinDest: 'Enter a friend code or IP address.',
+  enterLicense: 'Enter License',
+  extensions: 'Extensions',
+  friendCode: 'Friend code',
+  goBack: 'Go back',
+  info: 'Info',
+  invite: 'Invite',
+  join: 'Join',
+  joinSession: 'Join Session',
+  license: 'License',
+  next: 'Next',
+  nextUp: 'Next Up',
   networkDisconnectHostDisconnect: 'Host closed connection',
   networkDisconnectTimeout: 'Network timeout',
   networkDisconnectInvalidClientInfo: 'Invalid client info',
   networkDisconnectVersionMismatch: `Client version mismatch`,
   networkDisconnectDuplicateLicense: `Shared license found in session`,
-  networkDisconnectFull: 'Session is full'
+  networkDisconnectFull: 'Session is full',
+  ok: 'OK',
+  openInBrowser: 'Open in browser',
+  profile: 'Profile',
+  purchase: 'Purchase',
+  purchaseLicense: 'Purchase License',
+  reload: 'Reload',
+  removeLicense: 'Remove License',
+  repeat: 'Repeat',
+  requestUrl: 'Request URL',
+  settings: 'Settings',
+  startSession: 'Start Session',
+  useLicense: 'Use License',
+  username: 'Username',
+  users: 'Users'
 }

app/locale/index.ts

@@ -4,5 +4,5 @@ type LocaleKey = keyof typeof en
 
 /** Translate locale key */
 export function t(key: LocaleKey, vars?: { [key: string]: any }) {
-  return `TEST: ${en[key]}` || null
+  return en[key]
 }

app/renderer/components/Home.tsx

@@ -11,6 +11,7 @@ import { MenuButton } from 'renderer/components/menu/MenuButton'
 import { MenuHeader } from './menu/MenuHeader'
 import { ExternalLink } from './common/link'
 import { hasValidLicense } from '../license'
+import { t } from '../../locale/index'
 
 interface IProps {}
 
@@ -31,7 +32,7 @@ export default class Home extends Component<IProps> {
           <ul>
             <li>
               <Link to="/lobby/create" className={styles.btn}>
-                <MenuButton icon="play">Start Session</MenuButton>
+                <MenuButton icon="play">{t('startSession')}</MenuButton>
               </Link>
             </li>
             {/* <li>
@@ -41,18 +42,18 @@ export default class Home extends Component<IProps> {
             </li> */}
             <li>
               <Link to="/join" className={styles.btn}>
-                <MenuButton icon="globe">Join Session</MenuButton>
+                <MenuButton icon="globe">{t('joinSession')}</MenuButton>
               </Link>
             </li>
             <li>
               <Link to="/settings" className={styles.btn}>
-                <MenuButton icon="settings">Settings</MenuButton>
+                <MenuButton icon="settings">{t('settings')}</MenuButton>
               </Link>
             </li>
             {!hasValidLicense() && (
               <li>
                 <Link to="/license" className={styles.btn}>
-                  <MenuButton icon="file-text">Enter License</MenuButton>
+                  <MenuButton icon="file-text">{t('enterLicense')}</MenuButton>
                 </Link>
               </li>
             )}

app/renderer/components/SessionJoin.tsx

@@ -10,6 +10,7 @@ import { MenuButton } from 'renderer/components/menu/MenuButton'
 import { TextInput, InputGroup } from './common/input'
 import { GoBackButton } from './menu/GoBackButton'
 import { MenuHeader } from './menu/MenuHeader'
+import { t } from '../../locale/index'
 
 interface IProps {
   connect: (sessionId: string) => void
@@ -23,14 +24,14 @@ export class SessionJoin extends Component<IProps> {
       <LayoutMain className={styles.container}>
         <GoBackButton />
         <section>
-          <MenuHeader text="Join Session" />
+          <MenuHeader text={t('joinSession')} />
           <form>
-            <p>Enter a friend code or IP address.</p>
+            <p>{t('enterJoinDest')}</p>
             <InputGroup>
               <TextInput
                 theRef={el => (this.sessionInput = el)}
                 className={styles.peerId}
-                placeholder="Friend code"
+                placeholder={t('friendCode')}
                 defaultValue={localStorage.getItem('prevFriendCode') || undefined}
                 spellCheck={false}
                 autoFocus
@@ -50,7 +51,7 @@ export class SessionJoin extends Component<IProps> {
                   }
                 }}
               >
-                Join
+                {t('join')}
               </MenuButton>
             </InputGroup>
           </form>

app/renderer/components/browser/Controls.tsx

@@ -7,6 +7,7 @@ import { IconButton, HighlightButton } from 'renderer/components/common/button'
 import styles from './Controls.css'
 import { MenuButton } from 'renderer/components/menu/MenuButton'
 import { BrowserActionList } from './BrowserActionList'
+import { t } from '../../../locale/index'
 
 interface IProps {
   initialUrl: string
@@ -106,7 +107,7 @@ export class WebControls extends Component<IProps, IState> {
           disabled={!this.canRequestUrl}
           highlight={this.canRequestUrl}
         >
-          Request URL
+          {t('requestUrl')}
         </HighlightButton>
       </div>
     )

app/renderer/components/chat/ChatForm.tsx

@@ -3,6 +3,7 @@ import { IMessage } from 'renderer/lobby/reducers/chat'
 
 import styles from './Chat.css'
 import { CHAT_MAX_MESSAGE_LENGTH } from 'constants/chat'
+import { t } from '../../../locale/index'
 
 interface IProps {
   send: (text: string) => void
@@ -52,7 +53,7 @@ export class ChatForm extends Component<IProps, IState> {
           }}
           type="text"
           className={styles.messageInput}
-          placeholder="Message or URL"
+          placeholder={t('chatPlaceholder')}
           spellCheck={this.state.spellcheck}
           onKeyPress={this.submitText}
           maxLength={CHAT_MAX_MESSAGE_LENGTH}

app/renderer/components/common/input.tsx

@@ -3,6 +3,7 @@ import * as cx from 'classnames'
 import styles from './input.css'
 import { Icon } from 'renderer/components/Icon'
 import { HighlightButton } from 'renderer/components/common/button'
+import { t } from '../../../locale/index'
 
 interface ITextInputProps extends React.HTMLProps<HTMLInputElement> {
   theRef?: (e: HTMLInputElement | null) => void
@@ -47,7 +48,7 @@ export class ClipboardTextInput extends React.Component<IClipboardTextInputProps
           disabled={this.props.disabled}
         />
         <HighlightButton icon="clipboard" onClick={this.copy} highlight>
-          Copy
+          {t('copy')}
         </HighlightButton>
       </div>
     )

app/renderer/components/lobby/Connect.tsx

@@ -7,6 +7,7 @@ import { IAppState } from '../../reducers/index'
 import { MenuButton } from '../menu/MenuButton'
 import { Icon } from '../Icon'
 import { Spinner } from '../common/spinner'
+import { t } from '../../../locale/index'
 
 interface IProps {
   className?: string
@@ -22,10 +23,11 @@ class _Connect extends Component<PrivateProps> {
         <TitleBar className={styles.titlebar} />
 
         <p className={styles.info}>
-          <Spinner />Connecting&hellip;
+          <Spinner />
+          {t('connecting')}&hellip;
         </p>
         <MenuButton icon="x" size="medium" onClick={() => this.props.onCancel()}>
-          Cancel
+          {t('cancel')}
         </MenuButton>
       </div>
     )

app/renderer/components/lobby/Disconnect.tsx

@@ -7,6 +7,7 @@ import { IAppState } from '../../reducers/index'
 import { MenuButton } from '../menu/MenuButton'
 import { Link } from 'react-router-dom'
 import { Icon } from '../Icon'
+import { t } from '../../../locale/index'
 
 interface IProps {
   message: string
@@ -24,7 +25,7 @@ export class Disconnect extends Component<IProps> {
           {this.props.message}
         </p>
         <Link to="/">
-          <MenuButton size="medium">OK</MenuButton>
+          <MenuButton size="medium">{t('ok')}</MenuButton>
         </Link>
       </div>
     )

app/renderer/components/lobby/MediaList.tsx

@@ -9,6 +9,7 @@ import { server_requestDeleteMedia } from '../../lobby/actions/mediaPlayer'
 import { HighlightButton } from '../common/button'
 import { ListOverlay } from './ListOverlay'
 import { MediaItem } from '../media/MediaItem'
+import { t } from '../../../locale/index'
 
 interface IProps {
   className?: string
@@ -37,7 +38,7 @@ class _MediaList extends Component<Props> {
     return (
       <ListOverlay
         className={this.props.className}
-        title="Next up"
+        title={t('nextUp')}
         tagline={this.props.mediaQueue.length ? `${this.props.mediaQueue.length}` : undefined}
         action={
           <HighlightButton
@@ -49,7 +50,7 @@ class _MediaList extends Component<Props> {
               }
             }}
           >
-            Add
+            {t('add')}
           </HighlightButton>
         }
       >

app/renderer/components/lobby/UserList.tsx

@@ -8,6 +8,7 @@ import { getMaxUsers } from '../../lobby/reducers/session'
 import { HighlightButton } from '../common/button'
 import { ListOverlay } from './ListOverlay'
 import { UserItem } from './UserItem'
+import { t } from '../../../locale/index'
 
 interface IProps {
   className?: string
@@ -33,11 +34,11 @@ class _UserList extends Component<Props> {
     return (
       <ListOverlay
         className={this.props.className}
-        title="Users"
+        title={t('users')}
         tagline={userSlots}
         action={
           <HighlightButton icon="mail" highlight={numUsers < 2} onClick={this.props.onInvite}>
-            Invite
+            {t('invite')}
           </HighlightButton>
         }
       >

app/renderer/components/lobby/modals/Invite.tsx

@@ -16,6 +16,7 @@ import { MenuButton } from 'renderer/components/menu/MenuButton'
 import { ExternalLink } from 'renderer/components/common/link'
 import { HighlightButton } from 'renderer/components/common/button'
 import { IconButton } from 'renderer/components/common/button'
+import { t } from '../../../../locale/index'
 
 interface IProps {
   className?: string
@@ -75,7 +76,7 @@ class Invite extends Component<PrivateProps, IState> {
         <p>Would you like to purchase a license now?</p>
         <ExternalLink href={`${LICENSE_PURCHASE_URL}&utm_source=invite`}>
           <HighlightButton icon="credit-card" size="medium" highlight>
-            Purchase
+            {t('purchase')}
           </HighlightButton>
         </ExternalLink>
       </div>

app/renderer/components/lobby/modals/PurchaseLicense.tsx

@@ -5,6 +5,7 @@ import { LICENSE_PURCHASE_URL } from 'constants/license'
 import { MenuButton } from 'renderer/components/menu/MenuButton'
 import { ExternalLink } from 'renderer/components/common/link'
 import { HighlightButton } from 'renderer/components/common/button'
+import { t } from '../../../../locale/index'
 
 interface IProps {}
 
@@ -20,7 +21,7 @@ export default class PurchaseLicense extends Component<IProps> {
         <p>Would you like to purchase a license now?</p>
         <ExternalLink href={`${LICENSE_PURCHASE_URL}&utm_source=modal`}>
           <HighlightButton icon="credit-card" size="large" highlight>
-            Purchase
+            {t('purchase')}
           </HighlightButton>
         </ExternalLink>
       </div>

app/renderer/components/media/PlaybackControls.tsx

@@ -34,6 +34,7 @@ import { getPlaybackTime2 } from 'renderer/lobby/reducers/mediaPlayer.helpers'
 import { absoluteUrl } from 'utils/appUrl'
 import { BrowserActionList } from '../browser/BrowserActionList'
 import { isDeveloper } from '../../reducers/settings'
+import { t } from '../../../locale/index'
 
 const EXTENSIONS_URL = absoluteUrl('./browser/resources/extensions.html')
 
@@ -133,7 +134,7 @@ class _PlaybackControls extends Component<PrivateProps> {
           this.props.openBrowser()
         }}
       >
-        Add Media
+        {t('addMedia')}
       </Button>
     )
 
@@ -142,13 +143,19 @@ class _PlaybackControls extends Component<PrivateProps> {
     )
 
     const nextBtn = (
-      <Button key="next" icon="skip-forward" title="Next" disabled={isIdle} onClick={this.next} />
+      <Button
+        key="next"
+        icon="skip-forward"
+        title={t('next')}
+        disabled={isIdle}
+        onClick={this.next}
+      />
     )
 
     const repeatBtn = (
       <Button
         icon="repeat"
-        title="Repeat"
+        title={t('repeat')}
         enabled={this.props.repeatMode === RepeatMode.On}
         disabled={isIdle}
         onClick={this.repeat}
@@ -179,41 +186,43 @@ class _PlaybackControls extends Component<PrivateProps> {
     )
 
     const infoBtn = media &&
-      media.description && <Button icon="info" title="Info" onClick={() => this.props.showInfo()} />
+      media.description && (
+        <Button icon="info" title={t('info')} onClick={() => this.props.showInfo()} />
+      )
 
     const reloadBtn = (
       <ButtonListItem icon="rotate-cw" onClick={this.props.reload}>
-        Reload
+        {t('reload')}
       </ButtonListItem>
     )
 
     const externalLinkBtn = media && (
       <ButtonListItem icon="external-link" onClick={this.openLink}>
-        Open in browser
+        {t('openInBrowser')}
       </ButtonListItem>
     )
 
     const copyLinkBtn = media && (
       <ButtonListItem icon="clipboard" onClick={this.copyLink}>
-        Copy link
+        {t('copyLink')}
       </ButtonListItem>
     )
 
     const debugBtn = this.props.developer && (
       <ButtonListItem icon="settings" onClick={this.props.debug}>
-        Debug
+        {t('debug')}
       </ButtonListItem>
     )
 
     const extensionsBtn = (
       <ButtonListItem icon="package" onClick={() => this.props.openBrowser(EXTENSIONS_URL)}>
-        Extensions
+        {t('extensions')}
       </ButtonListItem>
     )
 
     const disconnectBtn = (
       <ButtonListItem icon="log-out" onClick={this.disconnect}>
-        Disconnect
+        {t('disconnect')}
       </ButtonListItem>
     )