Skip to content
This repository has been archived by the owner on Nov 5, 2023. It is now read-only.

Commit

Permalink
Add initial i18n work
Browse files Browse the repository at this point in the history
  • Loading branch information
curtgrimes committed Sep 12, 2018
1 parent 624ced9 commit fe75671
Show file tree
Hide file tree
Showing 11 changed files with 211 additions and 57 deletions.
4 changes: 2 additions & 2 deletions app/components/CastReceiver.vue
Expand Up @@ -3,8 +3,8 @@
<transcript></transcript>
<nav class="navbar fixed-bottom navbar-expand" style="padding:0.5vw 2vw;background:rgba(0,0,0,.2)">
<span class="navbar-brand mr-auto text-white" style="opacity:.6">
<img src="/static/img/logo.svg" width="17" height="17" class="d-inline-block" style="position:relative;top:-1px;margin-right:10px" alt="Web Captioner" />
<span class="d-none d-md-inline">Web Captioner</span>
<img src="/static/img/logo.svg" width="17" height="17" class="d-inline-block" style="position:relative;top:-1px;margin-right:10px" />
<span class="d-none d-md-inline">{{$t('app.webCaptioner')}}</span>
</span>
</nav>
</div>
Expand Down
31 changes: 16 additions & 15 deletions app/components/Navbar.vue
Expand Up @@ -14,16 +14,17 @@
</button>
<div class="navbar-brand mr-auto" :class="{'mt-3' : largerLayout}">
<a href="/">
<img src="/static/img/logo.svg" width="20" height="20" class="d-inline-block align-top mr-2" alt="Web Captioner" />
<span class="d-none d-md-inline">Web Captioner</span>
<img src="/static/img/logo.svg" width="20" height="20" class="d-inline-block align-top mr-2" :alt="$t('app.webCaptioner')" />
<span class="d-none d-md-inline">{{$t('app.webCaptioner')}}</span>
</a>
</div>

<!-- Do not remove this from the DOM with v-if. Currently the volume meter needs to exist in order to populate microphoneName. -->
<volume-meter v-bind:hidden="!captioningOn || waitingForInitialTranscript"></volume-meter>

<div v-if="waitingForInitialTranscript" class="navbar-text small text-primary mr-3">
Listening<span v-if="microphoneName"> to "{{microphoneName}}"</span>
<span v-if="microphoneName">{{$t('navbar.captioner.listeningToMicrophone', {microphoneName})}}</span>
<span v-else>{{$t('navbar.captioner.listening')}}</span>
</div>
<transition name="fade">
<cast-button></cast-button>
Expand Down Expand Up @@ -74,9 +75,9 @@
<b-button id="startCaptioningDropdown" :class="incompatibleBrowser ? 'button-only-disabled' : ''" :variant="captioningToggleButtonVariant" @click="captioningToggleButtonClick">
<div :class="{'px-4 py-2' : largerLayout}">
<span v-if="!this.captioningOn">
<fa icon="microphone" /> <span v-show="!typingModeOn"> Start Captioning</span>
<fa icon="microphone" /> <span v-show="!typingModeOn"> {{$t('navbar.captioner.startCaptioning')}}</span>
</span>
<span v-else>Stop Captioning</span> <kbd v-show="largerLayout" class="small ml-3">c</kbd>
<span v-else>{{$t('navbar.captioner.stopCaptioning')}}</span> <kbd v-show="largerLayout" class="small ml-3">c</kbd>
</div>
</b-button>
<b-button v-show="experiments.includes('typingMode') && !typingModeOn" variant="primary" v-b-tooltip.top title="Start Typing (t)" @click="startTypingMode">
Expand All @@ -86,20 +87,20 @@
<fa icon="keyboard"/> Done Typing <kbd>ESC</kbd>
</b-btn>
<b-dropdown dropup right :variant="captioningToggleButtonVariant">
<b-dropdown-item href="/" target="_blank">About</b-dropdown-item>
<b-dropdown-item href="/blog" target="_blank">Blog</b-dropdown-item>
<b-dropdown-item href="/help" target="_blank">Help Center</b-dropdown-item>
<b-dropdown-item href="/community" target="_blank">Community</b-dropdown-item>
<b-dropdown-item href="/donate" target="_blank">Donate</b-dropdown-item>
<b-dropdown-item href="/" target="_blank">{{$t('navbar.menu.about')}}</b-dropdown-item>
<b-dropdown-item href="/blog" target="_blank">{{$t('navbar.menu.blog')}}</b-dropdown-item>
<b-dropdown-item href="/help" target="_blank">{{$t('navbar.menu.helpCenter')}}</b-dropdown-item>
<b-dropdown-item href="/community" target="_blank">{{$t('navbar.menu.community')}}</b-dropdown-item>
<b-dropdown-item href="/donate" target="_blank">{{$t('navbar.menu.donate')}}</b-dropdown-item>
<div class="dropdown-divider"></div>
<b-dropdown-item href="/feedback" target="_blank">Feedback</b-dropdown-item>
<b-dropdown-item href="/feedback" target="_blank">{{$t('navbar.menu.feedback')}}</b-dropdown-item>
<div class="dropdown-divider"></div>
<b-dropdown-item @click="startDetachedMode" class="dropdown-item" v-b-tooltip.left title="Show captions in a new window"><fa icon="external-link-alt" fixed-width class="mr-1" /> New Window</b-dropdown-item>
<b-dropdown-item @click="startDetachedMode" class="dropdown-item" v-b-tooltip.left title="Show captions in a new window"><fa icon="external-link-alt" fixed-width class="mr-1" /> {{$t('navbar.menu.newWindow')}}</b-dropdown-item>
<div class="dropdown-divider"></div>
<b-dropdown-item to="/captioner/save-to-file" replace><fa icon="save" class="mr-1" fixed-width /> Save to File</b-dropdown-item>
<b-dropdown-item to="/captioner/clear" replace><fa icon="trash-alt" class="mr-1" fixed-width /> Clear...</b-dropdown-item>
<b-dropdown-item to="/captioner/save-to-file" replace><fa icon="save" class="mr-1" fixed-width /> {{$t('navbar.menu.saveToFile')}}</b-dropdown-item>
<b-dropdown-item to="/captioner/clear" replace><fa icon="trash-alt" class="mr-1" fixed-width /> {{$t('navbar.menu.clear')}}</b-dropdown-item>
<div class="dropdown-divider"></div>
<b-dropdown-item to="/captioner/settings" class="dropdown-item"><fa icon="cog" class="mr-1" fixed-width /> Settings</b-dropdown-item>
<b-dropdown-item to="/captioner/settings" class="dropdown-item"><fa icon="cog" class="mr-1" fixed-width /> {{$t('navbar.menu.settings')}}</b-dropdown-item>
</b-dropdown>
</b-button-group>
</div> <!-- bottom row in big UI mode -->
Expand Down
2 changes: 1 addition & 1 deletion app/components/ReceiverSplash.vue
Expand Up @@ -19,7 +19,7 @@
</div>
<div class="h-25 d-flex align-items-center " style="position:absolute;left:7vw;right:0;bottom:0">
<div class="h2 logo-container">
<img src="/static/img/logo-wordmark-inverse.svg" class="d-inline-block" alt="Web Captioner" />
<img src="/static/img/logo-wordmark-inverse.svg" class="d-inline-block" :alt="$t('app.webCaptioner')" />
</div>
</div>
</div>
Expand Down
85 changes: 85 additions & 0 deletions app/lang/en-US.js
@@ -0,0 +1,85 @@
export default {
common: {
ok: 'Ok',
cancel: 'Cancel',
},
app: {
webCaptioner: 'Web Captioner',
description: 'Real-time captioning for your event, speech, classroom lecture, or church service.',
},
navbar: {
captioner: {
startCaptioning: 'Start Captioning',
stopCaptioning: 'Stop Captioning',
listeningToMicrophone: 'Listening to "{microphoneName}"',
},
menu: {
about: '@:settings.about.about',
blog: 'Blog',
helpCenter: 'Help Center',
community: 'Community',
donate: 'Donate',
feedback: 'Feedback',
newWindow: 'New Window',
saveToFile: 'Save to File',
clear: 'Clear...',
settings: 'Settings',
},
},
settings: {
settings: 'settings',
about: {
about: 'About',
learnMore: 'Learn More',
whatsNew: "What's New",
},
eventLog: {
eventLog: 'Event Log',
},
experiments: {
experiments: 'Experiments',
},
appearance: {
appearance: 'Appearance',
},
censor: {
censor: 'Censor',
},
controls: {
controls: 'Controls',
},
language: {
language: 'Language',
},
remoteDisplays: {
remoteDisplays: 'Remote Displays',
},
wordReplacements: {
wordReplacements: 'Word Replacements',
},
vmix: {
vmix: 'vMix',
},
webhooks: {
webhooks: 'Webhooks',
},
exportRestore: {
exportRestoreSettings: 'Export/Restore Settings',

restore: 'Restore',
restoreDescription: 'Restore settings (appearance, censor settings, word replacements, vMix settings, etc.) from a settings file you previously exported.',
restoreSettingsQuestion: 'Restore settings from this file?',
somethingWrongWithFile: "It looks like something's wrong with that file.",
restoredSettings: 'Settings Restored',

reset: 'Reset',
resetDescription: 'Reset all of your settings.',
resetSettingsQuestion: 'Reset all your settings?',
settingsWillBeLost: 'All of your current settings will be lost.',
settingsReset: 'Settings Reset',

export: 'Export',
exportDescription: 'Your settings will be saved locally as a JSON file.',
},
}
}
12 changes: 12 additions & 0 deletions app/nuxt.config.js
Expand Up @@ -35,6 +35,18 @@ module.exports = {
],
}],
['bootstrap-vue/nuxt', { css: false }],
['nuxt-i18n', {
defaultLocale: 'en',
locales: [
{
code: 'en',
file: 'en-US.js',
iso: 'en-US',
},
],
lazy: true,
langDir: 'lang/'
}],
['@nuxtjs/sentry'],
['@nuxtjs/google-analytics', {
id: 'REMOVED',
Expand Down
55 changes: 55 additions & 0 deletions app/package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions app/package.json
Expand Up @@ -53,6 +53,7 @@
"normalize-strings": "^1.1.0",
"nuxt-env": "0.0.3",
"nuxt-fontawesome": "^0.3.0",
"nuxt-i18n": "^5.3.0",
"promise-polyfill": "^8.1.0",
"sass-loader": "^7.1.0",
"screenfull": "^3.3.2",
Expand Down
26 changes: 13 additions & 13 deletions app/pages/captioner/settings.vue
Expand Up @@ -50,36 +50,36 @@
<div class="row h-100">
<div class="col-lg-9 col-xl-7 ml-auto mb-5">
<div class="position-sticky" style="top:20px">
<h2 class="d-none d-sm-block lead pl-3 text-dark" style="padding-top:.6rem">Settings</h2>
<h2 class="d-none d-sm-block lead pl-3 text-dark" style="padding-top:.6rem">{{$t('settings.settings')}}</h2>
<nav>
<b-nav vertical pills>
<b-nav-item to="/captioner/settings/about">About</b-nav-item>
<b-nav-item to="/captioner/settings/about">{{$t('settings.about.about')}}</b-nav-item>
<b-nav-item v-if="eventLog" to="/captioner/settings/event-log">
Event Log <span v-if="eventLogStopTime">({{logTimeRemainingMinutes}}:{{logTimeRemainingSeconds}})</span>
{{$t('settings.eventLog.eventLog')}} <span v-if="eventLogStopTime">({{logTimeRemainingMinutes}}:{{logTimeRemainingSeconds}})</span>
<b-badge variant="light" class="nav-badge">
{{eventLogCount}} <span class="sr-only">events</span>
</b-badge>
</b-nav-item>
<b-nav-item class="nav-item-rainbow" v-if="experiments.length || currentlyOnExperiments" to="/captioner/settings/experiments"><fa icon="flask" /> Experiments</b-nav-item>
<b-nav-item class="nav-item-rainbow" v-if="experiments.length || currentlyOnExperiments" to="/captioner/settings/experiments"><fa icon="flask" /> {{$t('settings.experiments.experiments')}}</b-nav-item>
</b-nav>
<hr/>
<b-nav vertical pills>
<b-nav-item to="/captioner/settings/appearance">Appearance</b-nav-item>
<b-nav-item to="/captioner/settings/censor">Censor</b-nav-item>
<b-nav-item to="/captioner/settings/controls">Controls</b-nav-item>
<b-nav-item to="/captioner/settings/language">Language</b-nav-item>
<b-nav-item v-if="experiments.includes('remoteDisplays')" to="/captioner/settings/remote-displays">Remote Displays</b-nav-item>
<b-nav-item to="/captioner/settings/word-replacements">Word Replacements</b-nav-item>
<b-nav-item to="/captioner/settings/appearance">{{$t('settings.appearance.appearance')}}</b-nav-item>
<b-nav-item to="/captioner/settings/censor">{{$t('settings.censor.censor')}}</b-nav-item>
<b-nav-item to="/captioner/settings/controls">{{$t('settings.controls.controls')}}</b-nav-item>
<b-nav-item to="/captioner/settings/language">{{$t('settings.language.language')}}</b-nav-item>
<b-nav-item v-if="experiments.includes('remoteDisplays')" to="/captioner/settings/remote-displays">{{$t('settings.remoteDisplays.remoteDisplays')}}</b-nav-item>
<b-nav-item to="/captioner/settings/word-replacements">{{$t('settings.wordReplacements.wordReplacements')}}</b-nav-item>
<!-- <b-nav-item to="/captioner/settings/title-cards">Title Cards</b-nav-item> -->
</b-nav>
<hr/>
<b-nav vertical pills>
<b-nav-item to="/captioner/settings/vmix">vMix</b-nav-item>
<b-nav-item v-if="experiments.includes('webhooks')" to="/captioner/settings/webhooks">Webhooks</b-nav-item>
<b-nav-item to="/captioner/settings/vmix">{{$t('settings.vmix.vmix')}}</b-nav-item>
<b-nav-item v-if="experiments.includes('webhooks')" to="/captioner/settings/webhooks">{{$t('settings.webhooks.webhooks')}}</b-nav-item>
</b-nav>
<hr/>
<b-nav vertical pills>
<b-nav-item class="small" to="/captioner/settings/export-restore">Export/Restore Settings</b-nav-item>
<b-nav-item class="small" to="/captioner/settings/export-restore">{{$t('settings.exportRestore.exportRestoreSettings')}}</b-nav-item>
</b-nav>
</nav>
</div>
Expand Down
8 changes: 4 additions & 4 deletions app/pages/captioner/settings/about/index.vue
Expand Up @@ -9,9 +9,9 @@
<div class="col-sm-8 col-md-9">
<div class="d-flex align-items-center h-100">
<div>
<h3>Web Captioner</h3>
<p class="lead mb-2">Real-time captioning for your event, speech, classroom lecture, or church service.</p>
<p class="mb-0 small"><a href="/">Learn More</a> &middot; <a href="/help">Help Center</a><span class="d-none d-md-inline"> &middot; </span><br class="d-md-none"/> <a href="/blog">Blog</a> &middot; <a href="/donate">Donate</a></p>
<h3>{{$t('app.webCaptioner')}}</h3>
<p class="lead mb-2">{{$t('app.description')}}</p>
<p class="mb-0 small"><a href="/">{{$t('settings.about.learnMore')}}</a> &middot; <a href="/help">{{$t('navbar.menu.helpCenter')}}</a><span class="d-none d-md-inline"> &middot; </span><br class="d-md-none"/> <a href="/blog">{{$t('navbar.menu.blog')}}</a> &middot; <a href="/donate">{{$t('navbar.menu.donate')}}</a></p>
</div>
</div>
</div>
Expand All @@ -20,7 +20,7 @@
</div>
<hr class="my-4" />

<h2>What's New</h2>
<h2>{{$t('settings.about.whatsNew')}}</h2>
<whats-new/>

</div>
Expand Down
2 changes: 1 addition & 1 deletion app/pages/captioner/settings/controls/index.vue
Expand Up @@ -26,7 +26,7 @@
<b-button variant="info" disabled>Save to File</b-button>
</div>
<div class="d-flex w-100 align-items-center">
<img src="/static/img/logo.svg" width="8" height="8" alt="Web Captioner" class="align-middle mr-auto" />
<img src="/static/img/logo.svg" width="8" height="8" class="align-middle mr-auto" />
<b-dropdown variant="primary" split text="Start Captioning" disabled></b-dropdown>
</div>
</b-navbar>
Expand Down

0 comments on commit fe75671

Please sign in to comment.