Implement ability to clear transcription and add keyboard shortcut

curtgrimes · Apr 9, 2018 · 2fe448c · 2fe448c
1 parent eca114c
commit 2fe448c
Show file tree

Hide file tree

Showing 4 changed files with 72 additions and 6 deletions.
diff --git a/app/src/App.vue b/app/src/App.vue
@@ -2,6 +2,7 @@
   <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">
@@ -23,9 +24,8 @@
         <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()" href="javascript:void(0)" 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 disabled hidden href="javascript:void(0)" id="saveTranscriptToFileDisabledButton" data-toggle="tooltip" data-trigger="hover" data-placement="left" title="Nothing to save right now"><i class="fa fa-floppy-o mr-1" aria-hidden="true"></i> Save to File</b-dropdown-item>
-        <b-dropdown-item href="javascript:void(0)" id="clearTranscriptButton"><i class="fa fa-trash-o mr-1" aria-hidden="true"></i> Clear...</b-dropdown-item>
+        <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>
@@ -44,6 +44,7 @@
 <script>
 import VolumeMeter from './components/VolumeMeter.vue'
 import SaveToFileModal from './components/SaveToFileModal.vue'
+import ClearTranscriptModal from './components/ClearTranscriptModal.vue'
 import Combokeys from 'combokeys'
 
 export default {
@@ -65,6 +66,11 @@ export default {
         self.$router.push('/captioner');
         self.startSaveToFileModal();
       })
+      .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
+      })
       .bind('?', function() {
         self.$router.push('/captioner/settings/keyboard-shortcuts');
       })
@@ -84,6 +90,7 @@ export default {
   components: {
     VolumeMeter,
     SaveToFileModal,
+    ClearTranscriptModal,
   },
   computed: {
     captioningOn: function() {
@@ -103,6 +110,9 @@ export default {
     startSaveToFileModal: function() {
       this.$refs.saveToFileModal.showModal();
     },
+    startClearTranscriptModal: function() {
+      this.$refs.clearTranscriptModal.showModal();
+    },
   }
 }
 </script>
diff --git a/app/src/components/ClearTranscriptModal.vue b/app/src/components/ClearTranscriptModal.vue
@@ -0,0 +1,38 @@
+<template>
+    <b-modal lazy ref="modal" hide-footer title="Clear transcript?" @shown="autofocusElement()">
+      <div class="text-right">
+        <b-btn ref="cancelButton" class="mr-2" variant="outline-info" @click="hideModal">Cancel</b-btn>
+        <b-btn variant="danger" @click="clearTranscript">Clear Transcript</b-btn>
+      </div>
+    </b-modal>
+</template>
+
+<script>
+import { format } from 'date-fns'
+
+export default {
+  name: 'save-as-file-modal',
+  computed: {
+    transcriptEmpty() {
+      return !this.$store.state.captioner.transcript.interim
+        && !this.$store.state.captioner.transcript.final;
+    },
+  },
+  methods: {
+    showModal () {
+      this.$refs.modal.show();
+    },
+    hideModal () {
+      this.$refs.modal.hide();
+    },
+    autofocusElement () {
+      this.$refs.cancelButton.focus();
+    },
+    clearTranscript () {
+      this.$store.dispatch('captioner/restart');
+      this.$store.commit('captioner/CLEAR_TRANSCRIPT');
+      this.$refs.modal.hide();
+    },
+  },
+}
+</script>
diff --git a/app/src/store/modules/captioner/index.js b/app/src/store/modules/captioner/index.js
@@ -57,7 +57,6 @@ const actions = {
                 // Clear the interim transcript because its content is now
                 // returned in the final transcript
                 commit('CLEAR_TRANSCRIPT_INTERIM');
-
                 commit('APPEND_TRANSCRIPT_FINAL', { transcriptFinal });
             }
         };
@@ -67,6 +66,15 @@ const actions = {
         speechRecognizer.stop();
     },
 
+    restart ({commit, state, rootState}) {
+        const restartSpeechRecognizer = function(event) {
+            speechRecognizer.removeEventListener('end', restartSpeechRecognizer, false); // only do it once
+            speechRecognizer.start();
+        };
+        speechRecognizer.addEventListener('end', restartSpeechRecognizer, false);
+        speechRecognizer.abort();
+    },
+
   // The first argument is the vuex store, but we're using only the
   // dispatch function, which applies a mutation to the store,
   // and the current state of the store
@@ -91,6 +99,10 @@ const mutations = {
     SET_TRANSCRIPT_INTERIM (state, { transcriptInterim }) {
         state.transcript.interim = transcriptInterim;
     },
+    CLEAR_TRANSCRIPT (state) {
+        state.transcript.interim = '';
+        state.transcript.final = '';
+    },
     CLEAR_TRANSCRIPT_INTERIM (state) {
         state.transcript.interim = '';
     },

diff --git a/app/src/views/settings/SettingsKeyboardShortcutsView.vue b/app/src/views/settings/SettingsKeyboardShortcutsView.vue
@@ -11,16 +11,22 @@
       </div>
       <div class="list-group-item">
         <div class="row">
-          <div class="col-6">Settings</div>
+          <div class="col-6">Open Settings</div>
           <div class="col-6 text-right"><kbd>w</kbd> then <kbd>s</kbd></div>
         </div>
       </div>
       <div class="list-group-item">
         <div class="row">
-          <div class="col-6">"Save as File" dialog</div>
+          <div class="col-6">Open "Save as File" dialog</div>
           <div class="col-6 text-right"><kbd>w</kbd> then <kbd>f</kbd></div>
         </div>
       </div>
+      <div class="list-group-item">
+        <div class="row">
+          <div class="col-6">Clear transcript</div>
+          <div class="col-6 text-right"><kbd>w</kbd> then <kbd>p</kbd> then <kbd>p</kbd></div>
+        </div>
+      </div>
       <div class="list-group-item">
         <div class="row">
           <div class="col-6">List keyboard shortcuts</div>