i18n (wip)

client/package.json

@@ -35,6 +35,7 @@
     "vue-class-component": "^7.0.2",
     "vue-clickaway": "^2.2.2",
     "vue-context": "^5.0.0",
+    "vue-i18n": "^8.16.0",
     "vue-notification": "^1.3.20",
     "vue-property-decorator": "^8.3.0",
     "vuex": "^3.1.2"

client/src/components/chat.vue

@@ -24,7 +24,7 @@
               boundariesElement: 'body',
             }"
           >
-            <strong v-if="message.id === id">You</strong>
+            <strong v-if="message.id === id">{{ $t('you') }}</strong>
             <strong v-else>{{ member(message.id).displayname }}</strong>
             {{ message.content }}
           </div>

client/src/components/connect.vue

@@ -6,11 +6,11 @@
         <span><b>n</b>.eko</span>
       </div>
       <form class="message" v-if="!connecting" @submit.stop.prevent="connect">
-        <span>Please Login</span>
+        <span>{{ $t('connect.title') }}</span>
-        <input type="text" placeholder="Display Name" v-model="displayname" />
+        <input type="text" :placeholder="$t('connect.displayname')" v-model="displayname" />
-        <input type="password" placeholder="Password" v-model="password" />
+        <input type="password" :placeholder="$t('connect.password')" v-model="password" />
         <button type="submit" @click.stop.prevent="login">
-          Connect
+          {{ $t('connect.connect') }}
         </button>
       </form>
       <div class="loader" v-if="connecting">

client/src/components/context.vue

@@ -9,38 +9,40 @@
       </li>
       <li class="seperator" />
       <li>
-        <span @click="ignore(child.data.member)" v-if="!child.data.member.ignored">Ignore</span>
+        <span @click="ignore(child.data.member)" v-if="!child.data.member.ignored">{{ $t('context.ignore') }}</span>
-        <span @click="unignore(child.data.member)" v-else>Unignore</span>
+        <span @click="unignore(child.data.member)" v-else>{{ $t('context.unignore') }}</span>
       </li>
 
       <template v-if="admin">
         <li>
-          <span @click="mute(child.data.member)" v-if="!child.data.member.muted">Mute</span>
+          <span @click="mute(child.data.member)" v-if="!child.data.member.muted">{{ $t('context.mute') }}</span>
-          <span @click="unmute(child.data.member)" v-else>Unmute</span>
+          <span @click="unmute(child.data.member)" v-else>{{ $t('context.unmute') }}</span>
         </li>
         <li v-if="child.data.member.id === host">
-          <span @click="adminRelease(child.data.member)">Force Release Controls</span>
+          <span @click="adminRelease(child.data.member)">{{ $t('context.release') }}</span>
         </li>
         <li v-if="child.data.member.id === host">
-          <span @click="adminControl(child.data.member)">Force Take Controls</span>
+          <span @click="adminControl(child.data.member)">{{ $t('context.take') }}</span>
         </li>
         <li>
-          <span v-if="child.data.member.id !== host" @click="adminGive(child.data.member)">Give Controls</span>
+          <span v-if="child.data.member.id !== host" @click="adminGive(child.data.member)">{{
+            $t('context.give')
+          }}</span>
         </li>
       </template>
       <template v-else>
         <li v-if="hosting">
-          <span @click="give(child.data.member)">Give Controls</span>
+          <span @click="give(child.data.member)">{{ $t('context.give') }}</span>
         </li>
       </template>
 
       <template v-if="admin">
         <li class="seperator" />
         <li>
-          <span @click="kick(child.data.member)" style="color: #f04747">Kick</span>
+          <span @click="kick(child.data.member)" style="color: #f04747">{{ $t('context.kick') }}</span>
         </li>
         <li>
-          <span @click="ban(child.data.member)" style="color: #f04747">Ban IP</span>
+          <span @click="ban(child.data.member)" style="color: #f04747">{{ $t('context.ban') }}</span>
         </li>
       </template>
     </template>

client/src/components/controls.vue

@@ -10,7 +10,7 @@
           'request',
         ]"
         v-tooltip="{
-          content: !hosted || hosting ? (hosting ? 'Release Controls' : 'Request Controls') : '',
+          content: !hosted || hosting ? (hosting ? $t('controls.release') : $t('controls.request')) : '',
           placement: 'top',
           offset: 5,
           boundariesElement: 'body',
@@ -23,7 +23,7 @@
       <label
         class="switch"
         v-tooltip="{
-          content: hosting ? (locked ? 'Unlock Controls' : 'Lock Controls') : '',
+          content: hosting ? (locked ? $t('controls.unlock') : $t('controls.lock')) : '',
           placement: 'top',
           offset: 5,
           boundariesElement: 'body',

client/src/components/header.vue

@@ -10,7 +10,13 @@
           :class="[{ disabled: !admin }, { 'fa-lock-open': !locked }, { 'fa-lock': locked }, 'fas', 'lock']"
           @click="toggleLock"
           v-tooltip="{
-            content: admin ? (locked ? 'Unlock Room' : 'Lock Room') : locked ? 'Room Unlocked' : 'Room Locked',
+            content: admin
+              ? locked
+                ? $t('room.unlock')
+                : $t('room.lock')
+              : locked
+              ? $t('room.unlocked')
+              : $t('room.locked'),
             placement: 'bottom',
             offset: 5,
             boundariesElement: 'body',

client/src/components/menu.vue

@@ -5,7 +5,7 @@
       <i
         class="fas fa-shield-alt"
         v-tooltip="{
-          content: 'You are logged in as an admin',
+          content: $t('admin_loggedin'),
           placement: 'right',
           offset: 5,
           boundariesElement: 'body',

client/src/components/settings.vue

@@ -2,41 +2,41 @@
   <div class="settings">
     <ul>
       <li>
-        <span>Scroll Sensitivity</span>
+        <span>{{ $t('setting.scroll') }}</span>
         <label class="slider">
           <input type="range" min="5" max="100" v-model="scroll" />
         </label>
       </li>
       <li>
-        <span>Invert Scroll</span>
+        <span>{{ $t('setting.scroll_invert') }}</span>
         <label class="switch">
           <input type="checkbox" v-model="scroll_invert" />
           <span />
         </label>
       </li>
       <li>
-        <span>Autoplay Video</span>
+        <span>{{ $t('setting.autoplay') }}</span>
         <label class="switch">
           <input type="checkbox" v-model="autoplay" />
           <span />
         </label>
       </li>
       <li>
-        <span>Ignore Emotes</span>
+        <span>{{ $t('setting.ignore_emotes') }}</span>
         <label class="switch">
           <input type="checkbox" v-model="ignore_emotes" />
           <span />
         </label>
       </li>
       <li>
-        <span>Play Chat Sound</span>
+        <span>{{ $t('setting.chat_sound') }}</span>
         <label class="switch">
           <input type="checkbox" v-model="chat_sound" />
           <span />
         </label>
       </li>
       <li v-if="connected">
-        <button @click.stop.prevent="logout">Logout</button>
+        <button @click.stop.prevent="logout">{{ $t('logout') }}</button>
       </li>
     </ul>
   </div>

client/src/components/side.vue

@@ -4,11 +4,11 @@
       <ul>
         <li :class="{ active: tab === 'chat' }" @click.stop.prevent="change('chat')">
           <i class="fas fa-comment-alt" />
-          <span>Chat</span>
+          <span>{{ $t('chat') }}</span>
         </li>
         <li :class="{ active: tab === 'settings' }" @click.stop.prevent="change('settings')">
           <i class="fas fa-sliders-h" />
-          <span>Settings</span>
+          <span>{{ $t('settings') }}</span>
         </li>
       </ul>
     </div>

client/src/components/unsupported.vue

@@ -6,7 +6,7 @@
         <span><b>n</b>.eko</span>
       </div>
       <div class="message">
-        <span>this browser does not support webrtc</span>
+        <span>{{ $t('unsupported') }}</span>
       </div>
     </div>
   </div>

client/src/locale/en-us.ts

@@ -0,0 +1,75 @@
+export const chat = 'Chat'
+export const settings = 'Settings'
+export const logout = 'logout'
+export const unsupported = 'this browser does not support webrtc'
+export const admin_loggedin = 'You are logged in as an admin'
+export const you = 'You'
+export const ok = 'ok'
+export const connected = 'connected'
+export const disconnected = 'disconnected'
+
+export const connect = {
+  title: 'Please Login',
+  displayname: 'Display Name',
+  password: 'Password',
+  connect: 'Connect',
+}
+
+export const context = {
+  ignore: 'Ignore',
+  unignore: 'Unignore',
+  mute: 'Mute',
+  unmute: 'Unmute',
+  release: 'Force Release Controls',
+  take: 'Force Take Controls',
+  give: 'Give Controls',
+  kick: 'Kick',
+  ban: 'Ban IP',
+}
+
+export const controls = {
+  release: 'Release Controls',
+  request: 'Request Controls',
+  lock: 'Lock Controls',
+  unlock: 'Unlock Controls',
+}
+
+export const room = {
+  lock: 'Lock Room',
+  unlock: 'Unlock Room',
+  locked: 'Room Locked',
+  unlocked: 'Room Unlocked',
+}
+
+export const setting = {
+  scroll: 'Scroll Sensitivity',
+  scroll_invert: 'Invert Scroll',
+  autoplay: 'Autoplay Video',
+  ignore_emotes: 'Ignore Emotes',
+  chat_sound: 'Play Chat Sound',
+}
+
+export const connection = {
+  success: 'Successfully connected',
+}
+
+export const notifications = {
+  logged_out: '{name} logged out!',
+  controls_taken: '{name} took the controls',
+  controls_taken_force: 'force took the controls',
+  controls_taken_steal: 'took the controls from {name}',
+  controls_released: '{name} released the controls',
+  controls_released_force: 'force released the controls',
+  controls_released_steal: 'released the controls from {name}',
+  controls_given: 'gave the controls to {name}',
+  controls_has: '{name} has the controls',
+  controls_has_alt: 'But I let them know you wanted it',
+  controls_requesting: '{name} is requesting the controls',
+  resolution: 'changed the resolution to {width}x{height}@{rate}',
+  banned: 'banned {name}',
+  kicked: 'kicked {name}',
+  muted: 'muted {name}',
+  unmuted: 'unmuted {name}',
+  room_locked: 'locked the room',
+  room_unlocked: 'unlocked the room',
+}

client/src/locale/index.ts

@@ -0,0 +1,5 @@
+import * as en from './en-us'
+
+export const messages = {
+  en,
+}

client/src/main.ts

@@ -10,6 +10,7 @@ import Axios from './plugins/axios'
 import Swal from './plugins/swal'
 import Anime from './plugins/anime'
 
+import { i18n } from './plugins/i18n'
 import store from './store'
 import app from './app.vue'
 
@@ -24,6 +25,7 @@ Vue.use(Anime)
 Vue.use(Client)
 
 new Vue({
+  i18n,
   store,
   render: h => h(app),
   created() {

client/src/neko/index.ts

@@ -54,9 +54,9 @@ export class NekoClient extends BaseClient implements EventEmitter<NekoEvents> {
     this.disconnect()
     this.cleanup()
     this.$vue.$swal({
-      title: 'You have logged out!',
+      title: this.$vue.$t('notifications.logged_out', { name: 'You' }),
       icon: 'info',
-      confirmButtonText: 'ok',
+      confirmButtonText: this.$vue.$t('ok') as string,
     })
   }
 
@@ -75,7 +75,7 @@ export class NekoClient extends BaseClient implements EventEmitter<NekoEvents> {
     this.$vue.$notify({
       group: 'neko',
       type: 'success',
-      title: 'Successfully connected',
+      title: this.$vue.$t('connection.success') as string,
       duration: 5000,
       speed: 1000,
     })
@@ -86,7 +86,7 @@ export class NekoClient extends BaseClient implements EventEmitter<NekoEvents> {
     this.$vue.$notify({
       group: 'neko',
       type: 'error',
-      title: `Disconnected:`,
+      title: this.$vue.$t('disconnected') as string,
       text: reason ? reason.message : undefined,
       duration: 5000,
       speed: 1000,
@@ -111,10 +111,10 @@ export class NekoClient extends BaseClient implements EventEmitter<NekoEvents> {
   protected [EVENT.SYSTEM.DISCONNECT]({ message }: DisconnectPayload) {
     this.onDisconnected(new Error(message))
     this.$vue.$swal({
-      title: 'Disconnected!',
+      title: this.$vue.$t('disconnected'),
       text: message,
       icon: 'error',
-      confirmButtonText: 'ok',
+      confirmButtonText: this.$vue.$t('ok') as string,
     })
   }
 
@@ -125,7 +125,7 @@ export class NekoClient extends BaseClient implements EventEmitter<NekoEvents> {
     this.$accessor.user.setMembers(members)
     this.$accessor.chat.newMessage({
       id: this.id,
-      content: 'connected',
+      content: this.$vue.$t('connected') as string,
       type: 'event',
       created: new Date(),
     })
@@ -137,7 +137,7 @@ export class NekoClient extends BaseClient implements EventEmitter<NekoEvents> {
     if (member.id !== this.id) {
       this.$accessor.chat.newMessage({
         id: member.id,
-        content: 'connected',
+        content: this.$vue.$t('connected') as string,
         type: 'event',
         created: new Date(),
       })
@@ -152,7 +152,7 @@ export class NekoClient extends BaseClient implements EventEmitter<NekoEvents> {
 
     this.$accessor.chat.newMessage({
       id: member.id,
-      content: 'disconnected',
+      content: this.$vue.$t('disconnected') as string,
       type: 'event',
       created: new Date(),
     })
@@ -174,7 +174,7 @@ export class NekoClient extends BaseClient implements EventEmitter<NekoEvents> {
       this.$vue.$notify({
         group: 'neko',
         type: 'info',
-        title: `You have the controls`,
+        title: this.$vue.$t('notifications.controls_taken', { name: this.$vue.$t('you') }) as string,
         duration: 5000,
         speed: 1000,
       })
@@ -182,7 +182,7 @@ export class NekoClient extends BaseClient implements EventEmitter<NekoEvents> {
 
     this.$accessor.chat.newMessage({
       id: member.id,
-      content: 'took the controls',
+      content: this.$vue.$t('notifications.controls_taken', { name: '' }) as string,
       type: 'event',
       created: new Date(),
     })
@@ -199,7 +199,7 @@ export class NekoClient extends BaseClient implements EventEmitter<NekoEvents> {
       this.$vue.$notify({
         group: 'neko',
         type: 'info',
-        title: `You released the controls`,
+        title: this.$vue.$t('notifications.controls_released', { name: this.$vue.$t('you') }) as string,
         duration: 5000,
         speed: 1000,
       })
@@ -207,7 +207,7 @@ export class NekoClient extends BaseClient implements EventEmitter<NekoEvents> {
 
     this.$accessor.chat.newMessage({
       id: member.id,
-      content: 'released the controls',
+      content: this.$vue.$t('notifications.controls_released') as string,
       type: 'event',
       created: new Date(),
     })
@@ -222,8 +222,8 @@ export class NekoClient extends BaseClient implements EventEmitter<NekoEvents> {
     this.$vue.$notify({
       group: 'neko',
       type: 'info',
-      title: `${member.displayname} has the controls`,
+      title: this.$vue.$t('notifications.controls_has', { name: member.displayname }) as string,
-      text: 'But I let them know you wanted it',
+      text: this.$vue.$t('notifications.controls_has_alt') as string,
       duration: 5000,
       speed: 1000,
     })
@@ -238,7 +238,7 @@ export class NekoClient extends BaseClient implements EventEmitter<NekoEvents> {
     this.$vue.$notify({
       group: 'neko',
       type: 'info',
-      title: `${member.displayname} is requesting the controls`,
+      title: this.$vue.$t('notifications.controls_requesting', { name: member.displayname }) as string,
       duration: 5000,
       speed: 1000,
     })
@@ -253,7 +253,9 @@ export class NekoClient extends BaseClient implements EventEmitter<NekoEvents> {
     this.$accessor.remote.setHost(member)
     this.$accessor.chat.newMessage({
       id,
-      content: `gave the controls to ${member.id == this.id ? 'you' : member.displayname}`,
+      content: this.$vue.$t('notifications.controls_given', {
+        name: member.id == this.id ? this.$vue.$t('you') : member.displayname,
+      }) as string,
       type: 'event',
       created: new Date(),
     })
@@ -310,7 +312,11 @@ export class NekoClient extends BaseClient implements EventEmitter<NekoEvents> {
 
     this.$accessor.chat.newMessage({
       id,
-      content: `changed the resolution to ${width}x${height}@${rate}`,
+      content: this.$vue.$t('notifications.resolution', {
+        width: width,
+        height: height,
+        rate: rate,
+      }) as string,
       type: 'event',
       created: new Date(),
     })
@@ -331,7 +337,9 @@ export class NekoClient extends BaseClient implements EventEmitter<NekoEvents> {
 
     this.$accessor.chat.newMessage({
       id,
-      content: `banned ${member.id == this.id ? 'you' : member.displayname}`,
+      content: this.$vue.$t('notifications.banned', {
+        name: member.id == this.id ? this.$vue.$t('you') : member.displayname,
+      }) as string,
       type: 'event',
       created: new Date(),
     })
@@ -349,7 +357,9 @@ export class NekoClient extends BaseClient implements EventEmitter<NekoEvents> {
 
     this.$accessor.chat.newMessage({
       id,
-      content: `kicked ${member.id == this.id ? 'you' : member.displayname}`,
+      content: this.$vue.$t('notifications.kicked', {
+        name: member.id == this.id ? this.$vue.$t('you') : member.displayname,
+      }) as string,
       type: 'event',
       created: new Date(),
     })
@@ -369,7 +379,9 @@ export class NekoClient extends BaseClient implements EventEmitter<NekoEvents> {
 
     this.$accessor.chat.newMessage({
       id,
-      content: `muted ${member.id == this.id ? 'you' : member.displayname}`,
+      content: this.$vue.$t('notifications.muted', {
+        name: member.id == this.id ? this.$vue.$t('you') : member.displayname,
+      }) as string,
       type: 'event',
       created: new Date(),
     })
@@ -389,7 +401,9 @@ export class NekoClient extends BaseClient implements EventEmitter<NekoEvents> {
 
     this.$accessor.chat.newMessage({
       id,
-      content: `unmuted ${member.displayname}`,
+      content: this.$vue.$t('notifications.unmuted', {
+        name: member.id == this.id ? this.$vue.$t('you') : member.displayname,
+      }) as string,
       type: 'event',
       created: new Date(),
     })
@@ -399,7 +413,7 @@ export class NekoClient extends BaseClient implements EventEmitter<NekoEvents> {
     this.$accessor.setLocked(true)
     this.$accessor.chat.newMessage({
       id,
-      content: `locked the room`,
+      content: this.$vue.$t('notifications.room_locked') as string,
       type: 'event',
       created: new Date(),
     })
@@ -409,7 +423,7 @@ export class NekoClient extends BaseClient implements EventEmitter<NekoEvents> {
     this.$accessor.setLocked(false)
     this.$accessor.chat.newMessage({
       id,
-      content: `unlocked the room`,
+      content: this.$vue.$t('notifications.room_unlocked') as string,
       type: 'event',
       created: new Date(),
     })
@@ -421,7 +435,7 @@ export class NekoClient extends BaseClient implements EventEmitter<NekoEvents> {
     if (!target) {
       this.$accessor.chat.newMessage({
         id,
-        content: `force took the controls`,
+        content: this.$vue.$t('notifications.controls_taken_force') as string,
         type: 'event',
         created: new Date(),
       })
@@ -435,7 +449,9 @@ export class NekoClient extends BaseClient implements EventEmitter<NekoEvents> {
 
     this.$accessor.chat.newMessage({
       id,
-      content: `took the controls from ${member.id == this.id ? 'you' : member.displayname}`,
+      content: this.$vue.$t('notifications.controls_taken_steal', {
+        name: member.id == this.id ? this.$vue.$t('you') : member.displayname,
+      }) as string,
       type: 'event',
       created: new Date(),
     })
@@ -446,7 +462,7 @@ export class NekoClient extends BaseClient implements EventEmitter<NekoEvents> {
     if (!target) {
       this.$accessor.chat.newMessage({
         id,
-        content: `force released the controls`,
+        content: this.$vue.$t('notifications.controls_released_force') as string,
         type: 'event',
         created: new Date(),
       })
@@ -460,7 +476,9 @@ export class NekoClient extends BaseClient implements EventEmitter<NekoEvents> {
 
     this.$accessor.chat.newMessage({
       id,
-      content: `released the controls from ${member.id == this.id ? 'you' : member.displayname}`,
+      content: this.$vue.$t('notifications.controls_released_steal', {
+        name: member.id == this.id ? this.$vue.$t('you') : member.displayname,
+      }) as string,
       type: 'event',
       created: new Date(),
     })
@@ -480,7 +498,9 @@ export class NekoClient extends BaseClient implements EventEmitter<NekoEvents> {
 
     this.$accessor.chat.newMessage({
       id,
-      content: `gave the controls to ${member.id == this.id ? 'you' : member.displayname}`,
+      content: this.$vue.$t('notifications.controls_given', {
+        name: member.id == this.id ? this.$vue.$t('you') : member.displayname,
+      }) as string,
       type: 'event',
       created: new Date(),
     })

client/src/plugins/i18n.ts

@@ -0,0 +1,10 @@
+import Vue from 'vue'
+import VueI18n from 'vue-i18n'
+import { messages } from '~/locale'
+
+Vue.use(VueI18n)
+
+export const i18n = new VueI18n({
+  locale: 'en',
+  messages,
+})