Load strings from external file instead of using hard coded values

components/chat/index.vue

@@ -1,6 +1,6 @@
 <template>
     <div class="chat">
-        <p class="chat-no-messages-warn" v-if="!messages || messages.length === 0">Nobody said nothing. Maybe say something?</p>
+        <p class="chat-no-messages-warn" v-if="!messages || messages.length === 0" v-html="$t('room.chat.noMessages')"></p>
         <div class="chat-messages" :class="{ 'users-are-typing': typingUsers.length > 0 }" ref="messagesView" v-else-if=messages>
             <GroupedChatMessage v-for="(group, i) in messages" :key=group.id :group=group :isLastGroup="i === messages.length - 1" />
         </div>

components/chat/input.vue

@@ -1,7 +1,7 @@
 <template>
     <div class="chat-bar-wrapper">
-        <input type="text" class="chat-bar" :class="{ 'disabled': sending }" placeholder="Say something cool..." ref="input" v-model=content @keyup=didPressKey @keyup.enter=sendMessage() />
-        <div class="send-button" :class="{ 'is-enabled': canSendMessage, loading: sending, disabled: sending }" @click="sendMessage()" title="Send Message">
+        <input type="text" class="chat-bar" :class="{ 'disabled': sending }" :placeholder="$t('room.chat.placeholder')" ref="input" v-model=content @keyup=didPressKey @keyup.enter=sendMessage() />
+        <div class="send-button" :class="{ 'is-enabled': canSendMessage, loading: sending, disabled: sending }" @click="sendMessage()" :title="$t('room.chat.sendButtonTooltip')">
             <img src="/icons/airplane.svg" class="send-button-icon">
         </div>
     </div>

components/chat/typing.vue

@@ -9,7 +9,7 @@
             ...mapGetters(['typingUsers']),
 
             typingTooltip() {
-                return `${this.typingUsersList} ${this.typingUsers.length === 1 ? 'is' : ' are'} typing...`
+                return this.$t('room.chat.typing', {users: this.typingUsersList, isAre: this.typingUsers.length === 1 ? this.$t('general.is') : this.$t('general.are')})
             },
             areUsersTyping() {
                 return this.typingUsers.length > 0

components/player/index.vue

@@ -8,28 +8,33 @@
             </p>
             <!-- Portal is not open and there is only one person in the room -->
             <div class="player-msg" v-if="(portalStatus === 'waiting' || portalStatus === 'closed') && room.members.length === 1"> 
-                <h1 class="title">And so it begins...</h1>
-                <p class="body">Add a friend or two to get the party started! Once someone else joins this room, we'll queue up your room for a virtual browser</p>
+                <h1 class="title" v-html="$t('room.player.new.title')"></h1>
+                <p class="body" v-html="$t('room.player.new.body')"></p>
             </div>
             <!-- Portal is not open but there are more than one members in the room -->
             <div class="player-msg" v-else-if="(portalStatus === 'waiting' || portalStatus === 'closed') && room.members.length > 1">
-                <h1 class="title">Hold your horses...</h1>
-                <p class="body">We're waiting for the right gears to align so we can get your browser ready - hold tight!<br>If this is taking a little long, then either restart the room or contact support.</p>
+                <h1 class="title" v-html="$t('room.player.waiting.title')"></h1>
+                <p class="body" v-html="$t('room.player.waiting.body')"></p>    
             </div>
             <!-- A portal has been placed into the queue -->
             <div class="player-msg" v-else-if="portalStatus === 'in-queue'">
-                <h1 class="title">You're in the queue!</h1>
-                <p class="body">There are a couple rooms infront of you waiting for a virtual browser, it shouldn't take too long</p>
+                <h1 class="title" v-html="$t('room.player.queued.title')"></h1>
+                <p class="body" v-html="$t('room.player.queued.body')"></p>
             </div>
-            <!-- The portal is either being created or starting -->
-            <div class="player-msg" v-else-if="portalStatus === 'creating' || portalStatus === 'starting'">
-                <h1 class="title">We're {{ portalStatus }} your browser now</h1>
-                <p class="body">Normally this takes a couple seconds, hang tight!<br>If you have any issues either refresh the page, ask the room owner to restart the browser or contact support.</p>
+            <!-- The portal is being created -->
+            <div class="player-msg" v-else-if="portalStatus === 'creating'">
+                <h1 class="title" v-html="$t('room.player.creating.title')"></h1>
+                <p class="body" v-html="$t('room.player.creating.body')"></p>
+            </div>
+            <!-- The portal is starting -->
+            <div class="player-msg" v-else-if="portalStatus === 'starting'">
+                <h1 class="title" v-html="$t('room.player.starting.title')"></h1>
+                <p class="body" v-html="$t('room.player.starting.body')"></p>    
             </div>
             <!-- The portal is created and the stream between the client and the aperture is being established -->
             <div class="player-msg" v-else-if="portalStatus === 'open'">
-                <h1 class="title">Strap in...</h1>
-                <p class="body">Everything is ready - we're just getting the stream between you and the VM started!</p>
+                <h1 class="title" v-html="$t('room.player.connecting.title')"></h1>
+                <p class="body" v-html="$t('room.player.connecting.body')"></p>
             </div>
             <div class="loading-wrapper">
                 <div class="loading"></div>

components/player/user-icon.vue

@@ -26,19 +26,20 @@
             },
 
             userHoverTitle() {
-                if(this.controllerId === null && this.isUserSelf) return 'Take the controller'
-                if(!this.isUserSelf && this.canPassControl) return `Pass ${this.member.name} the controller`
+                if(this.controllerId === null && this.isUserSelf) return this.$t('room.controller.take')
+                if(!this.isUserSelf && this.canPassControl) return this.$t('room.controller.pass', {member: this.member.name})
 
-                return `${this.member.name}${this.isUserSelf ? ' (you)' : ''}`
+                return `${this.member.name}${this.isUserSelf ? ` (${this.$t('general.you')})` : ''}`
             },
             indicatorHoverTitle() {
-                if(this.hasControl && this.interactable)
-                    return `Release the controller${this.isUserSelf ? '' : ` from ${this.member.name}`}`
+                if(this.hasControl && this.interactable) {
+                   return this.isUserSelf ? this.$t('room.controller.release') : this.$t('room.controller.releaseOther', {member: this.member.name})
+                }
 
-                if(this.canPassControl) return `Give the controller to ${this.member.name}`
-                if(this.hasControl) return `${this.member.name} has the controller`
+                if(this.canPassControl) return this.$t('room.controller.giveOther', {member: this.member.name})
+                if(this.hasControl) return this.$t('room.controller.current', {member: this.member.name})
 
-                return `${this.member.name}${this.isUserSelf ? ' (you)' : ''}`
+                return `${this.member.name}${this.isUserSelf ? ` (${this.$t('general.you')})` : ''}`
             },
 
             interactable() {

components/player/viewer.vue

@@ -8,10 +8,10 @@
         <div class="player-tooltips" v-if=showMutedPopup>
             <div class="player-tooltip" :class="{ visible: showMutedPopup }">
                 <div class="player-tooltip-info">
-                    <p class="player-tooltip-title">{{ brand.name }} is muted</p>
-                    <p class="player-tooltip-body">Your browser requires user interaction in order to let us play video with audio</p>
+                    <p class="player-tooltip-title" v-html="$t('room.viewer.muted.title', {brand: brand.name})"></p>
+                    <p class="player-tooltip-body" v-html="$t('room.viewer.muted.body')"></p>
                 </div>
-                <Button @click.native=unmute()>Unmute</Button>
+                <Button @click.native=unmute()>{{ $t('room.viewer.unmute') }}</Button>
             </div>
         </div>
     </div>

components/room/create.vue

@@ -4,11 +4,11 @@
             <img src="/icons/circle-close.svg" class="close-button">
             <img src="/icons/circle-close-filled.svg" class="close-button-hover">
         </nuxt-link>
-        <h1 class="title">Create a Room</h1>
-        <p class="subtitle">When you create a room, you'll be able to add your friends and browse the internet.</p>
+        <h1 class="title" v-html="$t('home.modals.createRoom.title')"></h1>
+        <p class="subtitle" v-html="$t('home.modals.createRoom.subtitle')"></p>
         <Form>
             <Input placeholder="Room Name" v-model=roomName :disabled=loading @keydown.enter=createRoom() />
-            <Button @click.native=createRoom() :disabled=!isRoomNameValid :loading=loading>{{ loading ? 'Creating room...' : 'Create Room'}}</Button>
+            <Button @click.native=createRoom() :disabled=!isRoomNameValid :loading=loading>{{ loading ? $t('home.modals.createRoom.creatingRoom') : $t('home.modals.createRoom.createRoom')}}</Button>
         </Form>
         <p class="error" v-if=error>{{ error }}</p>
     </div>

components/room/join.vue

@@ -4,11 +4,11 @@
             <img src="/icons/circle-close.svg" class="close-button">
             <img src="/icons/circle-close-filled.svg" class="close-button-hover">
         </nuxt-link>
-        <h1 class="title">Join Room</h1>
-        <p class="subtitle">If your friend sent you an invite to a room, you're in the right place. Copy the invite into the box below and we'll get you sorted in no time</p>
+        <h1 class="title" v-html="$t('home.modals.joinRoom.title')"></h1>
+        <p class="subtitle" v-html="$t('home.modals.joinRoom.subtitle')"></p>
         <Form>
-            <Input placeholder="Invite Code or Link" v-model=invite :disabled=loading @keydown.enter=joinRoom() />
-            <Button @click.native=joinRoom() :loading=loading :disabled=!isRoomInviteValid>{{ loading ? 'Finding room...' : 'Find Room' }}</Button>
+            <Input :placeholder="$t('home.modals.joinRoom.placeholder')" v-model=invite :disabled=loading @keydown.enter=joinRoom() />
+            <Button @click.native=joinRoom() :loading=loading :disabled=!isRoomInviteValid>{{ loading ? $t('home.modals.joinRoom.findingRoom') : $t('home.modals.joinRoom.findRoom') }}</Button>
         </Form>
         <p class="error" v-if=error>{{ error }}</p>
     </div>

lang/en_US.json

@@ -0,0 +1,118 @@
+{
+  "index": {
+    "title": "Share the internet with your friends",
+    "body": "{brand} makes it easy to start up a room, add your friends, and browse the web",
+    "loginWithDiscord": "Login with Discord",
+    "continueToBrand": "Continue to {brand}"
+  },
+  "discord": {
+    "authenticating": "Authenticating...",
+    "authenticated": "Authenticated! Redirecting...",
+    "authenticationError": "An error occured while authenticating. Please go home and Login with Discord again."
+  },
+  "home": {
+    "inRoom": {
+      "title": "Let's jump back into watching",
+      "subtitle": "You're already in a room. Click the button below to get back into the room.<br>Want out? There's an option for that too",
+      "returnToRoom": "Return to {room}",
+      "leaving": "Leaving {room}...",
+      "leave": "Leave {room}"
+    },
+    "noRoom": {
+      "title": "Welcome Home",
+      "subtitle": "It's never been easier to join or start a room with your friends.<br>Select an option below to get started",
+      "joinRoom": {
+        "header": "Join a Room",
+        "description": "Received an invite link or an invite code for a room? Enter it here!"
+      },
+      "createRoom": {
+        "header": "Create a Room",
+        "description": "Need a room where you can watch anything with your friends? This is the place to go"
+      }
+    },
+    "modals": {
+      "joinRoom": {
+        "title": "Join Room",
+        "subtitle": "If your friend sent you an invite to a room, you're in the right place. Copy the invite into the box below and we'll get you sorted in no time",
+        "placeholder": "Invite Code or Link",
+        "findRoom": "Find Room",
+        "findingRoom": "Finding Room..."
+      },
+      "createRoom": {
+        "title": "Create a Room",
+        "subtitle": "When you create a room, you'll be able to add your friends and browse the internet.",
+        "createRoom": "Create Room",
+        "creatingRoom": "Creating Room..."
+      }
+    }
+  },
+  "invite": {
+    "title": "Join {room}",
+    "subtitle": "Start watching along with <b>{membersList}</b> instantly",
+    "loginWithDiscord": "Login with Discord",
+    "acceptInvite": "Accept Invite",
+    "acceptingInvite": "Accepting Invite...",
+    "viewRoom": "View Room",
+    "alreadyInThisRoom": "You're already in this room",
+    "membersOthers": "and {0} others",
+    "inviteNotFound": {
+      "title": "Invite Not Found",
+      "subtitle": "We couldn't find a room linked with this invite code. Make sure you have the right invite and try again!"
+    },
+    "confirmLeave": "Are you sure you want to leave {room} Once you leave, you cannot join back without an invite"
+  },
+  "room": {
+    "chat": {
+      "noMessages": "Nobody said nothing. Maybe say something?",
+      "placeholder": "Say something cool...",
+      "sendButtonTooltip": "Send Message",
+      "typing": "{users} {isAre} typing..."
+    },
+    "player": {
+      "new": {
+        "title": "And so it begins...",
+        "body": "Add a friend or two to get the party started! Once someone else joins this room, we'll queue up your room for a virtual browser"
+      },
+      "waiting": {
+        "title": "Hold your horses...",
+        "body": "We're waiting for the right gears to align so we can get your browser ready - hold tight!<br>If this is taking a little long, then either restart the room or contact support."
+      },
+      "queued": {
+        "title": "You're in the queue!",
+        "body": "There are a couple rooms infront of you waiting for a virtual browser, it shouldn't take too long"
+      },
+      "creating": {
+        "title": "We're creating your browser now",
+        "body": "Normally this takes a couple seconds, hang tight!<br>If you have any issues either refresh the page, ask the room owner to restart the browser or contact support."
+      },
+      "starting": {
+        "title": "We're starting your browser now",
+        "body": "Normally this takes a couple seconds, hang tight!<br>If you have any issues either refresh the page, ask the room owner to restart the browser or contact support."
+      },
+      "connecting": {
+        "title": "Strap in...",
+        "body": "Everything is ready - we're just getting the stream between you and the VM started!"
+      }
+    },
+    "controller": {
+      "take": "Take the controller",
+      "pass": "Pass {member} the controller",
+      "release": "Release the controller",
+      "releaseOther": "Release the controller from {member}",
+      "giveOther": "Give the controller to {member}",
+      "current": "{member} has the controller"
+    },
+    "viewser": {
+      "muted": { 
+        "title": "{brand} is muted",
+        "body": "Your browser requires user interaction in order to let us play video with audio"
+      },
+      "unmute": "Unmute"
+    }
+  },
+  "general": {
+    "is": "is",
+    "are": "are",
+    "you": "you"
+  }
+}

middleware/i18n.js

@@ -0,0 +1,15 @@
+import Vue from "vue";
+import VueI18n from "vue-i18n";
+
+Vue.use(VueI18n);
+
+export default ({ app }) => {
+  app.i18n = new VueI18n({
+    locale: "en_US",
+
+    fallbackLocale: "en_US",
+    messages: {
+      en_US: require("~/lang/en_US.json")
+    }
+  });
+};

nuxt.config.js

@@ -8,6 +8,7 @@ export default {
 
         '@nuxtjs/axios'
     ],
+    plugins: ["~/middleware/i18n.js"],
     env: {
         /**
          * Brand

package.json

@@ -21,6 +21,7 @@
     "jsmpeg": "^1.0.0",
     "nuxt": "^2.10.1",
     "nuxt-client-init-module": "^0.1.6",
-    "nuxt-clipboard2": "^0.2.1"
+    "nuxt-clipboard2": "^0.2.1",
+    "vue-i18n": "^8.15.0"
   }
 }

pages/auth/discord.vue

@@ -1,5 +1,5 @@
 <template>
-    <p>{{ message }}</p>
+    <p v-html="message"></p>
 </template>
 <script>
 export default {
@@ -11,7 +11,7 @@ export default {
     middleware: 'logged-out',
     data() {
         return {
-            message: 'Authenticating...'
+            message: this.$t('discord.authenticating')
         }
     },
     async mounted() {
@@ -20,13 +20,13 @@ export default {
         try {
             const token = await this.$axios.$post(`/auth/discord`, { code })
 
-            this.message = 'Authenticated! Redirecting...'
-
+            this.message = this.$t('discord.authenticated')
+            
             this.$store.commit('handleToken', { token, save: true })
             this.$store.dispatch('fetchUser')
             this.$router.push(state ? `/i/${state.split('=')[1]}` : '/home')
         } catch(error) {
-            this.message = 'An error occured while authenticating. Please go home and Login with Discord again.'
+            this.message = this.$t('discord.authenticationError')
         }
     }
 }