From d7cd59266e5b0f0a4c4ac6bac32c282effeca473 Mon Sep 17 00:00:00 2001
From: Curt Grimes <github@curtgrimes.com>
Date: Tue, 10 Apr 2018 22:33:52 -0500
Subject: [PATCH] Start working on Chromecast integration. Split navbar into
 its own component and reorganize views. Make modals respond to route changes.
 Fix scrolling/positioning during captioning.

---
 app/package-lock.json                       |   5 +
 app/package.json                            |   1 +
 app/public/cast-icon-connected.svg          |  18 ++
 app/public/cast-icon.svg                    |  18 ++
 app/server.js                               |   1 -
 app/src/App.vue                             | 243 +++++++++++++++-----
 app/src/components/ClearTranscriptModal.vue |  34 ++-
 app/src/components/Navbar.vue               |  69 ++++++
 app/src/components/SaveToFileModal.vue      |  40 +++-
 app/src/components/Transcript.vue           |  27 +--
 app/src/router/index.js                     |   9 +-
 app/src/scss/app.scss                       |   9 +-
 app/src/views/CaptionerCaptionView.vue      |  16 --
 app/src/views/CaptionerView.vue             |  12 +
 app/static/receiver.html                    | 102 ++++++++
 15 files changed, 507 insertions(+), 97 deletions(-)
 create mode 100644 app/public/cast-icon-connected.svg
 create mode 100644 app/public/cast-icon.svg
 create mode 100644 app/src/components/Navbar.vue
 delete mode 100755 app/src/views/CaptionerCaptionView.vue
 create mode 100644 app/static/receiver.html

diff --git a/app/package-lock.json b/app/package-lock.json
index a2a5680..b5cb65c 100644
--- a/app/package-lock.json
+++ b/app/package-lock.json
@@ -7195,6 +7195,11 @@
         }
       }
     },
+    "load-script": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/load-script/-/load-script-1.0.0.tgz",
+      "integrity": "sha1-BJGTngvuVkPuSUp+PaPSuscMbKQ="
+    },
     "loader-runner": {
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/loader-runner/-/loader-runner-2.3.0.tgz",
diff --git a/app/package.json b/app/package.json
index cf519e3..e073dd5 100644
--- a/app/package.json
+++ b/app/package.json
@@ -40,6 +40,7 @@
     "gulp-uglify": "^3.0.0",
     "intersection-observer": "^0.5.0",
     "jquery": "^3.2.1",
+    "load-script": "^1.0.0",
     "locale2": "^2.2.0",
     "lru-cache": "^4.1.2",
     "moment": "^2.18.1",
diff --git a/app/public/cast-icon-connected.svg b/app/public/cast-icon-connected.svg
new file mode 100644
index 0000000..7ad0bf3
--- /dev/null
+++ b/app/public/cast-icon-connected.svg
@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
+    <!-- Generator: Sketch 3.2.2 (9983) - http://www.bohemiancoding.com/sketch -->
+    <title>ic_cast_connected_black_24dp</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
+        <g id="ic_cast_connected_black_24dp" sketch:type="MSArtboardGroup">
+            <g id="ic_remove_circle_white_24dp" sketch:type="MSLayerGroup">
+                <path d="M1,18 L1,21 L4,21 C4,19.34 2.66,18 1,18 L1,18 Z M1,14 L1,16 C3.76,16 6,18.24 6,21 L8,21 C8,17.13 4.87,14 1,14 L1,14 Z M19,7 L5,7 L5,8.63 C8.96,9.91 12.09,13.04 13.37,17 L19,17 L19,7 L19,7 Z M1,10 L1,12 C5.97,12 10,16.03 10,21 L12,21 C12,14.92 7.07,10 1,10 L1,10 Z M21,3 L3,3 C1.9,3 1,3.9 1,5 L1,8 L3,8 L3,5 L21,5 L21,19 L14,19 L14,21 L21,21 C22.1,21 23,20.1 23,19 L23,5 C23,3.9 22.1,3 21,3 L21,3 Z" id="cast-on" fill="#ffffff" sketch:type="MSShapeGroup"></path>
+                <rect id="bounds" sketch:type="MSShapeGroup" x="0" y="0" width="24" height="24"></rect>
+            </g>
+        </g>
+        <g id="assets" sketch:type="MSLayerGroup" transform="translate(-336.000000, -106.000000)">
+            <g id="64px" transform="translate(0.000000, 114.000000)"></g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/app/public/cast-icon.svg b/app/public/cast-icon.svg
new file mode 100644
index 0000000..44b6752
--- /dev/null
+++ b/app/public/cast-icon.svg
@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
+    <!-- Generator: Sketch 3.2.2 (9983) - http://www.bohemiancoding.com/sketch -->
+    <title>ic_cast_black_24dp</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
+        <g id="ic_cast_black_24dp" sketch:type="MSArtboardGroup">
+            <g id="ic_remove_circle_white_24dp" sketch:type="MSLayerGroup">
+                <path d="M1,18 L1,21 L4,21 C4,19.34 2.66,18 1,18 L1,18 Z M1,14 L1,16 C3.76,16 6,18.24 6,21 L8,21 C8,17.13 4.87,14 1,14 L1,14 Z M1,10 L1,12 C5.97,12 10,16.03 10,21 L12,21 C12,14.92 7.07,10 1,10 L1,10 Z M21,3 L3,3 C1.9,3 1,3.9 1,5 L1,8 L3,8 L3,5 L21,5 L21,19 L14,19 L14,21 L21,21 C22.1,21 23,20.1 23,19 L23,5 C23,3.9 22.1,3 21,3 L21,3 Z" id="cast" fill="#ffffff" sketch:type="MSShapeGroup"></path>
+                <rect id="bounds" sketch:type="MSShapeGroup" x="0" y="0" width="24" height="24"></rect>
+            </g>
+        </g>
+        <g id="assets" sketch:type="MSLayerGroup" transform="translate(-208.000000, -106.000000)">
+            <g id="64px" transform="translate(0.000000, 114.000000)"></g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/app/server.js b/app/server.js
index 83f8863..54d3f27 100644
--- a/app/server.js
+++ b/app/server.js
@@ -79,7 +79,6 @@ app.use('/privacy-policy', express.static(path.join(__dirname, '../static-site/p
 app.use('/community', express.static(path.join(__dirname, '../static-site/public/community')));
 app.use('/feedback', express.static(path.join(__dirname, '../static-site/public/feedback')));
 app.use('/vmix', express.static(path.join(__dirname, '../static-site/public/vmix')));
-
 app.use('/static/img', express.static(path.join(__dirname, 'static/img')));
 
 // app.use('/captioner', captioner);
diff --git a/app/src/App.vue b/app/src/App.vue
index 2999d24..b80a09d 100755
--- a/app/src/App.vue
+++ b/app/src/App.vue
@@ -1,35 +1,6 @@
 <template>
   <div id="app" class="w-100">
-    <router-view class="view"></router-view>
-    <save-to-file-modal ref="saveToFileModal"></save-to-file-modal>
-    <clear-transcript-modal ref="clearTranscriptModal"></clear-transcript-modal>
-
-    <nav id="main-navbar" class="navbar fixed-bottom navbar-expand navbar-inverse bg-dark pr-2">
-      <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
-        <span class="navbar-toggler-icon"></span>
-      </button>
-      <span class="navbar-brand mr-auto">
-        <a href="/">
-          <img src="/public/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>
-        </a>
-      </span>
-      <volume-meter></volume-meter>
-      <li id="now_listening" class="navbar-text text-white px-3" hidden>
-        Now listening...
-      </li>
-      <b-dropdown variant="primary" dropup right split :text="!captioningOn ? 'Start Captioning' : 'Stop'" @click="!captioningOn ? startCaptioning() : stopCaptioning()">
-        <b-dropdown-item href="/" target="_blank" onclick="ga('send', 'event', 'settings', 'aboutButton')">About</b-dropdown-item>
-        <b-dropdown-item href="/help" target="_blank" onclick="ga('send', 'event', 'settings', 'helpCenterButton')">Help Center</b-dropdown-item>
-        <b-dropdown-item href="/feedback" target="_blank" onclick="ga('send', 'event', 'settings', 'reportAProblemButton')">Report a Problem</b-dropdown-item>
-        <b-dropdown-item href="/donate" target="_blank" onclick="ga('send', 'event', 'settings', 'donateButton')">Donate</b-dropdown-item>
-        <div class="dropdown-divider"></div>
-        <b-dropdown-item @click="startSaveToFileModal()" id="saveTranscriptToFileButton" onclick="ga('send', 'event', 'settings', 'saveToFile')"><i class="fa fa-floppy-o mr-1" aria-hidden="true"></i> Save to File</b-dropdown-item>
-        <b-dropdown-item @click="startClearTranscriptModal()"><i class="fa fa-trash-o mr-1" aria-hidden="true"></i> Clear...</b-dropdown-item>
-        <div class="dropdown-divider"></div>
-        <b-dropdown-item to="/captioner/settings" class="dropdown-item"><i class="fa fa-cog mr-1" aria-hidden="true"></i> Settings</b-dropdown-item>
-      </b-dropdown>
-    </nav>
+    <router-view></router-view>
   </div>
 </template>
 
@@ -42,16 +13,15 @@
 </style>
 
 <script>
-import VolumeMeter from './components/VolumeMeter.vue'
-import SaveToFileModal from './components/SaveToFileModal.vue'
-import ClearTranscriptModal from './components/ClearTranscriptModal.vue'
 import Combokeys from 'combokeys'
+import loadScript from 'load-script'
 
 export default {
   name: 'app-view',
   data: function() {
     return {
       combokeysDocument: null,
+      sendCastMessage: null,
     };
   },
   mounted: function() {
@@ -60,22 +30,19 @@ export default {
     this.combokeysDocument
       .bind('w s', function() {
         self.$router.push('/captioner/settings');
-        self.$refs.saveToFileModal.hideModal();
-        self.$refs.clearTranscriptModal.hideModal(); // if visible
       })
       .bind('w f', function() {
         self.$router.push('/captioner');
-        self.startSaveToFileModal();
+        self.$router.replace('/captioner/save-to-file');
       })
       .bind('w p p', function() {
         self.$store.dispatch('captioner/restart');
         self.$store.commit('captioner/CLEAR_TRANSCRIPT');
-        self.$refs.clearTranscriptModal.hideModal(); // if it was visible; just for clarity
+
+        self.$router.replace('/captioner');
       })
       .bind('?', function() {
         self.$router.push('/captioner/settings/keyboard-shortcuts');
-        self.$refs.saveToFileModal.hideModal(); // if visible
-        self.$refs.clearTranscriptModal.hideModal(); // if visible
       })
       .bind('w c', function() {
         self.$router.push('/captioner');
@@ -86,36 +53,206 @@ export default {
           self.stopCaptioning();
         }
       });
+    
+    window['__onGCastApiAvailable'] = function(isAvailable) {
+      if (isAvailable) {
+        initializeCastApi();
+      }
+    };
+    
+    loadScript('https://www.gstatic.com/cv/js/sender/v1/cast_sender.js?loadCastFramework=1', {async:false}, function (err, script) {
+      if (err) {
+        // print useful message 
+      }
+      else {
+        // console.log(cast);
+        console.log(script.src);// Prints 'foo'.js' 
+        // use script 
+        // note that in IE8 and below loading error wouldn't be reported 
+      }
+    });
+
+      var applicationID = 'C97D0419';
+      var namespace = 'urn:x-cast:com.google.cast.sample.helloworld';
+      var session = null;
+
+      /**
+       * Call initialization for Cast
+       */
+      if (!chrome.cast || !chrome.cast.isAvailable) {
+        setTimeout(initializeCastApi, 1000);
+      }
+
+      /**
+       * initialization
+       */
+      function initializeCastApi() {
+        var sessionRequest = new chrome.cast.SessionRequest(applicationID);
+        var apiConfig = new chrome.cast.ApiConfig(sessionRequest,
+          sessionListener,
+          receiverListener);
+
+        chrome.cast.initialize(apiConfig, onInitSuccess, onError);
+      }
+
+      /**
+       * initialization success callback
+       */
+      function onInitSuccess() {
+        appendMessage('onInitSuccess');
+      }
+
+      /**
+       * initialization error callback
+       */
+      function onError(message) {
+        appendMessage('onError: ' + JSON.stringify(message));
+      }
+
+      /**
+       * generic success callback
+       */
+      function onSuccess(message) {
+        appendMessage('onSuccess: ' + message);
+      }
+
+      /**
+       * callback on success for stopping app
+       */
+      function onStopAppSuccess() {
+        appendMessage('onStopAppSuccess');
+      }
+
+      /**
+       * session listener during initialization
+       */
+      function sessionListener(e) {
+        appendMessage('New session ID:' + e.sessionId);
+        session = e;
+        session.addUpdateListener(sessionUpdateListener);
+        session.addMessageListener(namespace, receiverMessage);
+      }
+
+      /**
+       * listener for session updates
+       */
+      function sessionUpdateListener(isAlive) {
+        var message = isAlive ? 'Session Updated' : 'Session Removed';
+        message += ': ' + session.sessionId;
+        appendMessage(message);
+        if (!isAlive) {
+          session = null;
+        }
+      }
+
+      /**
+       * utility function to log messages from the receiver
+       * @param {string} namespace The namespace of the message
+       * @param {string} message A message string
+       */
+      function receiverMessage(namespace, message) {
+        appendMessage('receiverMessage: ' + namespace + ', ' + message);
+      }
+
+      /**
+       * receiver listener during initialization
+       */
+      function receiverListener(e) {
+        if(e === 'available') {
+          appendMessage('receiver found');
+        }
+        else {
+          appendMessage('receiver list empty');
+        }
+      }
+
+      /**
+       * stop app/session
+       */
+      function stopApp() {
+        session.stop(onStopAppSuccess, onError);
+      }
+
+      /**
+       * send a message to the receiver using the custom namespace
+       * receiver CastMessageBus message handler will be invoked
+       * @param {string} message A message string
+       */
+      this.sendCastMessage = function(message) {
+        if (session != null) {
+          session.sendMessage(namespace, message, onSuccess.bind(this, 'Message sent: ' + message),
+            onError);
+        }
+        else {
+          chrome.cast.requestSession(function(e) {
+              session = e;
+              session.sendMessage(namespace, message, onSuccess.bind(this, 'Message sent: ' +
+                message), onError);
+            }, onError);
+        }
+      }
+
+      /**
+       * append message to debug message window
+       * @param {string} message A message string
+       */
+      function appendMessage(message) {
+        console.log(message);
+      }
+
+      /**
+       * utility function to handle text typed in by user in the input field
+       */
+      function update() {
+        this.sendCastMessage(document.getElementById('input').value);
+      }
+
+      /**
+       * handler for the transcribed text from the speech input
+       * @param {string} words A transcibed speech string
+       */
+      function transcribe(words) {
+        this.sendCastMessage(words);
+      }
+      
+
+
+
+
+
+
+
+
+
+  },
+  watch: {
+    transcript: function(transcript) {
+      console.log(transcript);
+      this.sendCastMessage(transcript);
+    },
   },
   beforeDestroy: function() {
     this.combokeysDocument.detach();
   },
-  components: {
-    VolumeMeter,
-    SaveToFileModal,
-    ClearTranscriptModal,
-  },
   computed: {
     captioningOn: function() {
       return this.$store.state.captioner.on; 
     },
-    transcriptExists () {
-      return this.$store.state.captioner.transcript.interim || this.$store.state.captioner.transcript.final;
-    },
   },
   methods: {
+    requestSessionTest: function() {
+          chrome.cast.requestSession(function(e) {
+              session = e;
+              session.sendMessage(namespace, message, onSuccess.bind(this, 'Message sent: ' +
+                message), function(e){ console.log(e) });
+            }, function(e){ console.log(e) });
+    },
     startCaptioning: function() {
       this.$store.dispatch('captioner/start');
     },
     stopCaptioning: function() {
       this.$store.dispatch('captioner/stop');
     },
-    startSaveToFileModal: function() {
-      this.$refs.saveToFileModal.showModal();
-    },
-    startClearTranscriptModal: function() {
-      this.$refs.clearTranscriptModal.showModal();
-    },
   }
 }
 </script>
\ No newline at end of file
diff --git a/app/src/components/ClearTranscriptModal.vue b/app/src/components/ClearTranscriptModal.vue
index 6a251b7..35283e6 100644
--- a/app/src/components/ClearTranscriptModal.vue
+++ b/app/src/components/ClearTranscriptModal.vue
@@ -1,7 +1,7 @@
 <template>
-    <b-modal lazy ref="modal" hide-footer title="Clear transcript?" @shown="autofocusElement()">
+    <b-modal lazy ref="modal" hide-footer title="Clear transcript?" @shown="autofocusElement()" @hide="replaceRouteToParent">
       <div class="text-right">
-        <b-btn ref="cancelButton" class="mr-2" variant="outline-info" @click="hideModal">Cancel</b-btn>
+        <b-btn ref="cancelButton" class="mr-2" variant="outline-info" to="/captioner" replace>Cancel</b-btn>
         <b-btn variant="danger" @click="clearTranscript">Clear Transcript</b-btn>
       </div>
     </b-modal>
@@ -10,6 +10,8 @@
 <script>
 import { format } from 'date-fns'
 
+const routeName = 'clear-transcript';
+
 export default {
   name: 'save-as-file-modal',
   computed: {
@@ -18,7 +20,31 @@ export default {
         && !this.$store.state.captioner.transcript.final;
     },
   },
+  mounted: function() {
+    if (this.$route.name == routeName) {
+      this.$refs.modal.show();
+    }
+  },
+  watch: {
+    '$route.name': function (routeTo, routeFrom) {
+      if (routeTo == routeName) {
+        this.$refs.modal.show();
+      }
+      else if (routeFrom == routeName) {
+        this.$refs.modal.hide();
+      }
+    }
+  },
   methods: {
+    replaceRouteToParent(e) {
+      // e.trigger is set if the user interacted with the dialog UI directly
+      // to cause it to close. Only replace the state when this happens. Otherwise,
+      // if e.trigger isn't set, the dialog closing is due to a route change already
+      // in progress, (keyboard shortcuts, etc.) so we don't want to change the route.
+      if (e.trigger) {
+        this.$router.replace('/captioner');
+      }
+    },
     showModal () {
       this.$refs.modal.show();
     },
@@ -31,7 +57,9 @@ export default {
     clearTranscript () {
       this.$store.dispatch('captioner/restart');
       this.$store.commit('captioner/CLEAR_TRANSCRIPT');
-      this.$refs.modal.hide();
+
+      // Close dialog
+      this.$router.replace('/captioner');
     },
   },
 }
diff --git a/app/src/components/Navbar.vue b/app/src/components/Navbar.vue
new file mode 100644
index 0000000..12590e5
--- /dev/null
+++ b/app/src/components/Navbar.vue
@@ -0,0 +1,69 @@
+<template>
+    <nav class="navbar fixed-bottom navbar-expand navbar-inverse bg-dark pr-2">
+        <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
+            <span class="navbar-toggler-icon"></span>
+        </button>
+        <span class="navbar-brand mr-auto">
+            <a href="/">
+                <img src="/public/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>
+            </a>
+        </span>
+        <volume-meter></volume-meter>
+        <li id="now_listening" class="navbar-text text-white px-3" hidden>
+        Now listening...
+        </li>
+        <b-button variant="link" @click="requestSessionTest()"><img src="/public/cast-icon.svg"/></b-button>
+        <!--
+        <b-dropdown variant="secondary" dropup no-caret right class="mr-2" toggle-class="rounded">
+        <template slot="button-content">
+            <i class="fa fa-desktop" aria-hidden="true"></i> 1 <span class="sr-only">Screens</span>
+        </template>
+        <b-dropdown-item href="/" target="_blank" onclick="ga('send', 'event', 'settings', 'aboutButton')">About</b-dropdown-item>
+        </b-dropdown>
+        -->
+        <b-dropdown variant="primary" dropup right split :text="!captioningOn ? 'Start Captioning' : 'Stop'" @click="!captioningOn ? startCaptioning() : stopCaptioning()">
+            <b-dropdown-item href="/" target="_blank" onclick="ga('send', 'event', 'settings', 'aboutButton')">About</b-dropdown-item>
+            <b-dropdown-item href="/help" target="_blank" onclick="ga('send', 'event', 'settings', 'helpCenterButton')">Help Center</b-dropdown-item>
+            <b-dropdown-item href="/feedback" target="_blank" onclick="ga('send', 'event', 'settings', 'reportAProblemButton')">Report a Problem</b-dropdown-item>
+            <b-dropdown-item href="/donate" target="_blank" onclick="ga('send', 'event', 'settings', 'donateButton')">Donate</b-dropdown-item>
+            <div class="dropdown-divider"></div>
+            <b-dropdown-item to="/captioner/save-to-file" replace onclick="ga('send', 'event', 'settings', 'saveToFile')"><i class="fa fa-floppy-o mr-1" aria-hidden="true"></i> Save to File</b-dropdown-item>
+            <b-dropdown-item to="/captioner/clear" replace><i class="fa fa-trash-o mr-1" aria-hidden="true"></i> Clear...</b-dropdown-item>
+            <div class="dropdown-divider"></div>
+            <b-dropdown-item to="/captioner/settings" class="dropdown-item"><i class="fa fa-cog mr-1" aria-hidden="true"></i> Settings</b-dropdown-item>
+        </b-dropdown>
+    </nav>
+</template>
+
+<script>
+import VolumeMeter from './VolumeMeter.vue'
+
+export default {
+  name: 'navbar',
+  components: {
+    VolumeMeter,
+  },
+  computed: {
+    captioningOn: function() {
+      return this.$store.state.captioner.on; 
+    },
+  },
+  methods: {
+    startCaptioning: function() {
+      this.$store.dispatch('captioner/start');
+    },
+    stopCaptioning: function() {
+      this.$store.dispatch('captioner/stop');
+    },
+    startSaveToFileModal: function() {
+        this.$router.push('/captioner/save-to-file');
+    //   this.$refs.saveToFileModal.showModal();
+    },
+    startClearTranscriptModal: function() {
+        this.$router.push('/captioner/clear');
+    //   this.$refs.clearTranscriptModal.showModal();
+    },
+  }
+}
+</script>
\ No newline at end of file
diff --git a/app/src/components/SaveToFileModal.vue b/app/src/components/SaveToFileModal.vue
index 325affd..80d3542 100644
--- a/app/src/components/SaveToFileModal.vue
+++ b/app/src/components/SaveToFileModal.vue
@@ -1,5 +1,5 @@
 <template>
-    <b-modal lazy ref="modal" hide-footer title="Save to File" @shown="autofocusElement()">
+    <b-modal lazy ref="modal" hide-footer title="Save to File" @shown="autofocusElement()" @hide="replaceRouteToParent">
       <p>Save your current transcript to file.</p>
       <b-alert v-if="transcriptEmpty" show variant="info" class="small text-center">
         Psst... you know you don't have anything to save yet, right?
@@ -18,13 +18,15 @@
           </b-button>
         </div>
       </div>
-      <b-btn class="mt-3" variant="outline-info" block @click="hideModal">Close</b-btn>
+      <b-btn class="mt-3" variant="outline-info" block to="/captioner" replace>Close</b-btn>
     </b-modal>
 </template>
 
 <script>
 import { format } from 'date-fns'
 
+const routeName = 'save-to-file';
+
 export default {
   name: 'save-as-file-modal',
   computed: {
@@ -33,12 +35,30 @@ export default {
         && !this.$store.state.captioner.transcript.final;
     },
   },
-  methods: {
-    showModal () {
+  mounted: function() {
+    if (this.$route.name == routeName) {
       this.$refs.modal.show();
-    },
-    hideModal () {
-      this.$refs.modal.hide();
+    }
+  },
+  watch: {
+    '$route.name': function (routeTo, routeFrom) {
+      if (routeTo == routeName) {
+        this.$refs.modal.show();
+      }
+      else if (routeFrom == routeName) {
+        this.$refs.modal.hide();
+      }
+    }
+  },
+  methods: {
+    replaceRouteToParent(e) {
+      // e.trigger is set if the user interacted with the dialog UI directly
+      // to cause it to close. Only replace the state when this happens. Otherwise,
+      // if e.trigger isn't set, the dialog closing is due to a route change already
+      // in progress, (keyboard shortcuts, etc.) so we don't want to change the route.
+      if (e.trigger) {
+        this.$router.replace('/captioner');
+      }
     },
     autofocusElement () {
       this.$refs.textFileButton.focus();
@@ -49,6 +69,9 @@ export default {
       a.textContent = 'download';
       a.download = 'web-captioner-'+ format(new Date(), 'YYYY-MM-DD-HH-mm-ss') +'.txt';
       a.click();
+
+      // Close dialog
+      this.$router.replace('/captioner');
     },
     saveAsWord () {
       var a = document.createElement('a');
@@ -56,6 +79,9 @@ export default {
       a.textContent = 'download';
       a.download = 'web-captioner-'+ format(new Date(), 'YYYY-MM-DD-HH-mm-ss') +'.doc';
       a.click();
+
+      // Close dialog
+      this.$router.replace('/captioner');
     },
   },
 }
diff --git a/app/src/components/Transcript.vue b/app/src/components/Transcript.vue
index 8ddab3a..b5fa3ad 100644
--- a/app/src/components/Transcript.vue
+++ b/app/src/components/Transcript.vue
@@ -1,13 +1,8 @@
 <template>
-  <div
-    class="transcript d-flex align-items-end" v-bind:class="wrapTextPositionClass"
-    v-bind:style="{color, backgroundColor}"
-  >
-    <span class="" v-bind:class="textPositionClass">
-      <span class="transcript-child d-flex align-items-end" ref="transcriptScroller">
-        <span>
-          {{finalTranscript}} <span v-bind:style="{color: interimColor}">{{interimTranscript}}</span>
-        </span>
+  <div class="transcript d-flex" v-bind:class="wrapTextPositionClass" v-bind:style="{color, backgroundColor}">
+    <span v-bind:class="textPositionClass" class="transcript-scroller" ref="scroller">
+      <span class="transcript-scroller-child">
+        {{finalTranscript}} <span v-if="interimTranscript" v-bind:style="{color: interimColor}">{{interimTranscript}}</span>
       </span>
     </span>
   </div>
@@ -21,12 +16,15 @@ export default {
   methods: {
     scrollToBottom: function () {
       this.$nextTick(function () {
-        if (this.$refs.transcriptScroller) {
-          this.$refs.transcriptScroller.scrollTop = this.$refs.transcriptScroller.scrollHeight;
+        if (this.$refs.scroller) {
+          this.$refs.scroller.scrollTop = this.$refs.scroller.scrollHeight;
         }
       });
     },
   },
+  mounted: function() {
+    this.scrollToBottom();
+  },
   computed: {
     color () {
       return this.$store.state.settings.appearance.text.textColor;
@@ -43,7 +41,10 @@ export default {
     },
     interimTranscript () {
       this.scrollToBottom();
-      return ' ' + this.$store.state.captioner.transcript.interim;
+
+      // Prepend a space if string is not empty
+      return (this.$store.state.captioner.transcript.interim.length ? ' ' : '')
+        + this.$store.state.captioner.transcript.interim;
     },
 
     textPositionClass: function () {
@@ -55,7 +56,7 @@ export default {
         'w-50 ml-auto': this.$store.state.settings.appearance.text.alignment.horizontal == 'right',
 
         /* Vertical alignments */
-        // 'h-100': this.$store.state.settings.appearance.text.alignment.vertical == 'full',
+        'h-100': this.$store.state.settings.appearance.text.alignment.vertical == 'full',
         'h-50': ['top','middle','bottom'].includes(this.$store.state.settings.appearance.text.alignment.vertical),
         'h-25': this.$store.state.settings.appearance.text.alignment.vertical == 'lowerThird',
       }
diff --git a/app/src/router/index.js b/app/src/router/index.js
index 407eafd..2d6ade4 100755
--- a/app/src/router/index.js
+++ b/app/src/router/index.js
@@ -18,7 +18,9 @@ const SettingsCensorView = () => import('../views/settings/SettingsCensorView.vu
 const SettingsVmixView = () => import('../views/settings/SettingsVmixView.vue')
 const SettingsKeyboardShortcutsView = () => import('../views/settings/SettingsKeyboardShortcutsView.vue')
 const CaptionerView = () => import('../views/CaptionerView.vue')
-const CaptionerCaptionView = () => import('../views/CaptionerCaptionView.vue')
+const Transcript = () => import('../components/Transcript.vue')
+const SaveToFileModal = () => import('../components/SaveToFileModal.vue')
+const ClearTranscriptModal = () => import('../components/ClearTranscriptModal.vue')
 
 export function createRouter () {
   return new Router({
@@ -28,7 +30,9 @@ export function createRouter () {
     routes: [
       { path: '/captioner', component: CaptionerView,
         children: [
-          { path: '', component: CaptionerCaptionView },
+          { path: '', component: Transcript },
+          { path: 'save-to-file', component: Transcript, name: 'save-to-file' },
+          { path: 'clear', component: Transcript, name: 'clear-transcript' },
           { path: 'settings', component: SettingsView, redirect: '/captioner/settings/about',
             children: [
               {
@@ -63,6 +67,7 @@ export function createRouter () {
           },
         ]
       },
+      { path: '/receiver', component: CaptionerView},
       { path: '/top/:page(\\d+)?', component: createListView('top') },
       { path: '/new/:page(\\d+)?', component: createListView('new') },
       { path: '/show/:page(\\d+)?', component: createListView('show') },
diff --git a/app/src/scss/app.scss b/app/src/scss/app.scss
index 76383a3..5374f57 100644
--- a/app/src/scss/app.scss
+++ b/app/src/scss/app.scss
@@ -303,7 +303,6 @@ a.nav-link.active {
     }
 
     .transcript {
-      overflow-y:scroll;
       height: 100vh;
       width:100%;
       line-height: 5rem;
@@ -315,8 +314,14 @@ a.nav-link.active {
       padding-bottom:4rem;
     }
 
-    .transcript-child {
+    .transcript-scroller {
       overflow-y:scroll;
+      position:relative;
+    }
+
+    .transcript-scroller-child {
+      position:absolute;
+      bottom:0; // make transcription start from the bottom
       max-height:100%;
     }
 
diff --git a/app/src/views/CaptionerCaptionView.vue b/app/src/views/CaptionerCaptionView.vue
deleted file mode 100755
index 46d5882..0000000
--- a/app/src/views/CaptionerCaptionView.vue
+++ /dev/null
@@ -1,16 +0,0 @@
-<template>
-  <div class="captioner-caption-view">
-    <transcript></transcript>
-  </div>
-</template>
-
-<script>
-import Transcript from '../components/Transcript.vue'
-
-export default {
-  name: 'captioner-caption-view',
-  components: {
-    Transcript
-  },
-}
-</script>
diff --git a/app/src/views/CaptionerView.vue b/app/src/views/CaptionerView.vue
index ccf9874..0beb4e4 100755
--- a/app/src/views/CaptionerView.vue
+++ b/app/src/views/CaptionerView.vue
@@ -1,12 +1,24 @@
 <template>
   <div class="captioner-view h-100">
     <router-view></router-view>
+    <save-to-file-modal ref="saveToFileModal"></save-to-file-modal>
+    <clear-transcript-modal ref="clearTranscriptModal"></clear-transcript-modal>
+
+    <navbar></navbar>
   </div>
 </template>
 
 <script>
+import navbar from '../components/Navbar.vue'
+import SaveToFileModal from '../components/SaveToFileModal.vue'
+import ClearTranscriptModal from '../components/ClearTranscriptModal.vue'
 
 export default {
   name: 'captioner-view',
+  components: {
+    navbar,
+    SaveToFileModal,
+    ClearTranscriptModal,
+  },
 }
 </script>
diff --git a/app/static/receiver.html b/app/static/receiver.html
new file mode 100644
index 0000000..e74e89b
--- /dev/null
+++ b/app/static/receiver.html
@@ -0,0 +1,102 @@
+<!--
+Copyright (C) 2014 Google Inc. All Rights Reserved.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+     http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+-->
+<!DOCTYPE html>
+<html>
+  <head>
+    <style type="text/css">
+      body {
+        overflow:hidden;
+      }
+      div{
+        height:720PX;
+        width:1280PX;
+        text-align:center;
+        border:0px solid silver;
+        display: table-cell;
+        vertical-align:middle;
+        color:#FFFFFF;
+        background-color:#000000;
+        font-weight:bold;
+        font-family:Verdana, Geneva, sans-serif;
+        font-size:40px;
+      }
+    </style>
+    <title>Cast Hello Text</title>
+  </head>
+  <body>
+  <div id="message">Talk to me</div>
+    <script type="text/javascript" src="//www.gstatic.com/cast/sdk/libs/receiver/2.0.0/cast_receiver.js"></script>
+    <script type="text/javascript">
+      window.onload = function() {
+        cast.receiver.logger.setLevelValue(0);
+        window.castReceiverManager = cast.receiver.CastReceiverManager.getInstance();
+        console.log('Starting Receiver Manager');
+
+        // handler for the 'ready' event
+        castReceiverManager.onReady = function(event) {
+          console.log('Received Ready event: ' + JSON.stringify(event.data));
+          window.castReceiverManager.setApplicationState('Application status is ready...');
+        };
+
+        // handler for 'senderconnected' event
+        castReceiverManager.onSenderConnected = function(event) {
+          console.log('Received Sender Connected event: ' + event.data);
+          console.log(window.castReceiverManager.getSender(event.data).userAgent);
+        };
+
+        // handler for 'senderdisconnected' event
+        castReceiverManager.onSenderDisconnected = function(event) {
+          console.log('Received Sender Disconnected event: ' + event.data);
+          if (window.castReceiverManager.getSenders().length == 0) {
+            window.close();
+          }
+        };
+
+        // handler for 'systemvolumechanged' event
+        castReceiverManager.onSystemVolumeChanged = function(event) {
+          console.log('Received System Volume Changed event: ' + event.data['level'] + ' ' +
+              event.data['muted']);
+        };
+
+        // create a CastMessageBus to handle messages for a custom namespace
+        window.messageBus =
+          window.castReceiverManager.getCastMessageBus(
+              'urn:x-cast:com.google.cast.sample.helloworld');
+
+        // handler for the CastMessageBus message event
+        window.messageBus.onMessage = function(event) {
+          console.log('Message [' + event.senderId + ']: ' + event.data);
+          // display the message from the sender
+          displayText(event.data);
+          // inform all senders on the CastMessageBus of the incoming message event
+          // sender message listener will be invoked
+          window.messageBus.send(event.senderId, event.data);
+        }
+
+        // initialize the CastReceiverManager with an application status message
+        window.castReceiverManager.start({statusText: 'Application is starting'});
+        console.log('Receiver Manager started');
+      };
+
+      // utility function to display the text message in the input field
+      function displayText(text) {
+        console.log(text);
+        document.getElementById('message').innerText = text;
+        window.castReceiverManager.setApplicationState(text);
+      };
+    </script>
+  </body>
+</html>
\ No newline at end of file