Add start of typing mode. Tweak webhook request format.

curtgrimes · Sep 5, 2018 · 83cdb0c · 83cdb0c
1 parent 1b992a6
commit 83cdb0c
Show file tree

Hide file tree

Showing 9 changed files with 122 additions and 8 deletions.
diff --git a/app/assets/scss/app.scss b/app/assets/scss/app.scss
@@ -350,6 +350,7 @@ a.nav-link.active {
       position:absolute;
       bottom:0; // make transcription start from the bottom
       max-height:100%;
+      min-width:5px;
     }
 
     .final:focus {

diff --git a/app/components/Navbar.vue b/app/components/Navbar.vue
@@ -25,6 +25,12 @@
                 <div v-if="waitingForInitialTranscript" class="navbar-text small text-primary mr-3">
                     Listening<span v-if="microphoneName"> to "{{microphoneName}}"</span>
                 </div>
+                <b-btn v-show="false && !typingModeOn" variant="info" class="mr-3" v-b-tooltip.top title="Typing Mode" @click="startTypingMode">
+                    <fa icon="keyboard"/>
+                </b-btn>
+                <b-btn v-show="false && typingModeOn" variant="secondary" class="mr-3" v-b-tooltip.top title="Turn Off" @click="stopTypingMode">
+                    <fa icon="keyboard"/> Typing Mode
+                </b-btn>
                 <transition name="fade">
                     <cast-button v-if="experiments.includes('chromecast')"></cast-button>
                 </transition>
@@ -131,6 +137,9 @@ export default {
     captioningOn: function() {
         return this.$store.state.captioner.shouldBeOn;
     },
+    typingModeOn: function() {
+        return this.$store.state.captioner.typingModeOn;
+    },
     microphoneName: function() {
         return this.$store.state.captioner.microphoneName;
     },
@@ -186,11 +195,11 @@ export default {
     stopCaptioning: function() {
       this.$store.dispatch('captioner/stopManual');
     },
-    startTyping: function() {
-      this.$store.dispatch('captioner/startTyping');
+    startTypingMode: function() {
+        this.$store.dispatch('captioner/startTypingMode');
     },
-    stopTyping: function() {
-      this.$store.dispatch('captioner/stopTyping');
+    stopTypingMode: function() {
+        this.$store.dispatch('captioner/stopTypingMode');
     },
     startSaveToFileModal: function() {
         this.$router.push('/captioner/save-to-file');

diff --git a/app/components/Transcript.vue b/app/components/Transcript.vue
@@ -2,13 +2,14 @@
   <div
     class="transcript d-flex"
     v-bind:class="[wrapTextPositionClass, (chromeless ? 'chromeless' : '')]"
-    v-bind:style="{height, color, backgroundColor, fontFamily, fontSize, lineHeight, letterSpacing, textTransform, padding, textShadow}">
+    v-bind:style="{height, color, backgroundColor, fontFamily, fontSize, lineHeight, letterSpacing, textTransform, padding, textShadow, cursor}"
+    @click="focusIfInTypingMode()">
     <link type="text/css" rel="stylesheet" :href="'https://fonts.googleapis.com/css?family=' + fontFamily" />
     <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 class="transcript-scroller-child">{{finalTranscript}} <span v-if="interimTranscript" v-bind:style="{color: interimColor}">{{interimTranscript}}</span> <span v-show="typingModeOn" contenteditable v-text="transcriptTypedForDisplay" @input="typedTranscriptDidChange()" ref="typedTranscript" class="transcriptTyped">Hello world</span></span>
     </span>
   </div>
 </template>
@@ -27,6 +28,7 @@ export default {
   data: function() {
     return {
       height: '100vh',
+      transcriptTypedForDisplay: '',
     }
   },
   methods: {
@@ -37,6 +39,14 @@ export default {
         }
       });
     },
+    typedTranscriptDidChange: function() {
+      this.$store.commit('captioner/SET_TRANSCRIPT_TYPED', {transcriptTyped: this.$refs.typedTranscript.innerText})
+    },
+    focusIfInTypingMode: function() {
+      if (this.typingModeOn) {
+        this.$refs.typedTranscript.focus();
+      }
+    },
   },
   mounted: function() {
     this.scrollToBottom();
@@ -54,6 +64,37 @@ export default {
       this.height = this.adjustAppHeight();
     });
   },
+  watch: {
+    typingModeOn: function (on) {
+      if (on) {
+        // Turned on. Copy the transcript over once.
+        this.transcriptTypedForDisplay = this.typedTranscript;
+        this.$nextTick(() => {
+          this.$refs.typedTranscript.focus();
+
+          // Put caret at end
+          if (typeof window.getSelection != "undefined"
+                  && typeof document.createRange != "undefined") {
+              var range = document.createRange();
+              range.selectNodeContents(this.$refs.typedTranscript);
+              range.collapse(false);
+              var sel = window.getSelection();
+              sel.removeAllRanges();
+              sel.addRange(range);
+          } else if (typeof document.body.createTextRange != "undefined") {
+              var textRange = document.body.createTextRange();
+              textRange.moveToElementText(this.$refs.typedTranscript);
+              textRange.collapse(false);
+              textRange.select();
+          }
+        });
+      }
+      else {
+        // Turned off.
+        this.transcriptTypedForDisplay = '';
+      }
+    },
+  },
   computed: {
     // Appearance
     color () {
@@ -107,6 +148,12 @@ export default {
       return (this.$store.state.captioner.transcript.interim && this.$store.state.captioner.transcript.interim.length ? ' ' : '')
         + this.$store.state.captioner.transcript.interim;
     },
+    typingModeOn () {
+      return this.$store.state.captioner.typingModeOn;
+    },
+    typedTranscript () {
+      return this.$store.state.captioner.transcript.typed;
+    },
 
     textPositionClass: function () {
       return {
@@ -130,6 +177,9 @@ export default {
         'align-items-end': ['bottom','lowerThird'].includes(this.$store.state.settings.appearance.text.alignment.vertical),
       }
     },
+    cursor: function() {
+      return this.typingModeOn ? 'text' : 'default';
+    },
     largerLayout: function() {
       return this.$store.state.settings.controls.layout.larger;
     },
@@ -138,4 +188,10 @@ export default {
 </script>
 
 <style lang="css">
+  .transcriptTyped {
+    outline:none;
+    min-width:5px;
+    display:inline-block;
+    min-height:100px;
+  }
 </style>
diff --git a/app/nuxt.config.js b/app/nuxt.config.js
@@ -32,7 +32,7 @@ module.exports = {
       imports: [
         {
           set: '@fortawesome/free-solid-svg-icons',
-          icons: ['faFileAlt', 'faFileWord', 'faExclamationTriangle', 'faTimes', 'faMicrophone', 'faDesktop', 'faExternalLinkAlt', 'faSave', 'faTrashAlt', 'faCog', 'faCheckCircle', 'faSpinner', 'faChevronRight', 'faMinusCircle', 'faPlusCircle', 'faArrowLeft', 'faFlask', 'faCaretRight', 'faCaretDown', ],
+          icons: ['faFileAlt', 'faFileWord', 'faExclamationTriangle', 'faTimes', 'faMicrophone', 'faDesktop', 'faExternalLinkAlt', 'faSave', 'faTrashAlt', 'faCog', 'faCheckCircle', 'faSpinner', 'faChevronRight', 'faMinusCircle', 'faPlusCircle', 'faArrowLeft', 'faFlask', 'faCaretRight', 'faCaretDown', 'faKeyboard', ],
         },
         {
           set: '@fortawesome/free-regular-svg-icons',
@@ -45,6 +45,9 @@ module.exports = {
       ]
     }],
   ],
+  plugins: [
+    '~/node_modules/vue-contenteditable-directive',
+  ],
   css: [
     '@/assets/scss/app.scss',
   ],

diff --git a/app/package-lock.json b/app/package-lock.json
diff --git a/app/package.json b/app/package.json
@@ -54,6 +54,7 @@
     "sass-loader": "^7.1.0",
     "screenfull": "^3.3.2",
     "semver-compare": "^1.0.0",
+    "vue-contenteditable-directive": "^1.2.0",
     "whatwg-fetch": "^2.0.4"
   }
 }
diff --git a/app/pages/captioner.vue b/app/pages/captioner.vue
@@ -217,7 +217,6 @@ export default {
           mode: 'cors',
           headers: {
             'Accept': 'application/json',
-            'Content-Type': 'application/json',
           },
           body,
         })

diff --git a/app/store/modules/captioner/index.js b/app/store/modules/captioner/index.js
@@ -13,6 +13,7 @@ let speechRecognizer,
 const state = {
     on: false,
     shouldBeOn: false,
+    typingModeOn: false,
     microphonePermission: {
         needed: false,
         denied: false,
@@ -22,6 +23,7 @@ const state = {
     transcript: {
         interim: '',
         final: '',
+        typed: '',
         lastStart: null,
         lastUpdate: null,
         waitingForInitial: false,
@@ -198,6 +200,21 @@ const actions = {
               });
         }
     },
+
+    startTypingMode: ({state, commit, dispatch}) => {
+      dispatch('stopManual');
+      setTimeout(() => {
+        commit('SET_TRANSCRIPT_TYPED', {transcriptTyped: state.transcript.final});
+        commit('CLEAR_TRANSCRIPT_FINAL');
+        commit('SET_TYPING_MODE_ON');
+      },500);
+    },
+
+    stopTypingMode: ({state, commit, dispatch}) => {
+        commit('APPEND_TRANSCRIPT_FINAL', {transcriptFinal: state.transcript.typed });
+        commit('CLEAR_TRANSCRIPT_TYPED');
+        commit('SET_TYPING_MODE_OFF');
+    },
 }
 
 const mutations = {
@@ -227,13 +244,23 @@ const mutations = {
         state.transcript.interim = transcriptInterim;
         state.transcript.lastUpdate = Date.now();
     },
+    SET_TRANSCRIPT_TYPED (state, { transcriptTyped }) {
+        state.transcript.typed = transcriptTyped;
+    },
     CLEAR_TRANSCRIPT (state) {
         state.transcript.interim = '';
         state.transcript.final = '';
+        state.transcript.typed = '';
     },
     CLEAR_TRANSCRIPT_INTERIM (state) {
         state.transcript.interim = '';
     },
+    CLEAR_TRANSCRIPT_FINAL (state) {
+        state.transcript.final = '';
+    },
+    CLEAR_TRANSCRIPT_TYPED (state) {
+        state.transcript.typed = '';
+    },
     APPEND_TRANSCRIPT_FINAL (state, { transcriptFinal }) {
         if (state.transcript.final.length && state.transcript.final.charAt(state.transcript.final.length - 1) != ' ') {
             // Current final string is not empty and doesn't end in a 
@@ -258,6 +285,14 @@ const mutations = {
     SET_WAITING_FOR_INITIAL_TRANSCRIPT (state, { waitingForInitial }) {
         state.transcript.waitingForInitial = waitingForInitial;
     },
+
+    SET_TYPING_MODE_ON (state) {
+        state.typingModeOn = true;
+    },
+
+    SET_TYPING_MODE_OFF (state) {
+        state.typingModeOn = false;
+    },
 }
 
 const getters = {

diff --git a/app/store/mutations.js b/app/store/mutations.js
@@ -136,6 +136,10 @@ export default {
     state.detached = false;
   },
 
+  SET_DETACHED_MODE_OFF: (state) => {
+    state.detached = false;
+  },
+
   SET_LAST_WHATS_NEW_VERSION_SEEN: (state, { version }) => {
     state.settings.lastWhatsNewVersionSeen = version;
   },