Changeset 35285 for main/trunk/model-interfaces-dev/atea

Timestamp:

2021-08-11T17:04:46+12:00 (3 years ago)

Author:

davidb

Message:

Add Vue view for transcriptions

Location:

main/trunk/model-interfaces-dev/atea

Files:

• js/asr/asr-controller.js (modified) (1 diff)
• style/asr.scss (modified) (1 diff)
• transform/pages/asr.xsl (modified) (3 diffs)

main/trunk/model-interfaces-dev/atea/js/asr/asr-controller.js

@@ -92 +92 @@
                 failures: []
             }
+        },
+        methods:
+        {
+            playAudioFile(fileName) {
+                loadAudioFile(fileName);
+                // TODO: play audio element
+            },
+            // TODO: give transcriptions a unique ID
+            removeTranscription(id) {
+                
+            }
         }
     }

main/trunk/model-interfaces-dev/atea/style/asr.scss

@@ -215 +215 @@
 }
 
-.transcription__remove-button {
-    order: 100;
-}
-
 .transcription__word-list {
     font: var(--monospace-font);

main/trunk/model-interfaces-dev/atea/transform/pages/asr.xsl

@@ -80 +80 @@
 
                 <ul class="transcription__list">
-                    <li v-for="transcription in transcriptions" class="transcription__container">
-                        {{ transcription.transcription }}
-                    </li>
+                    <!-- Displays any failed transcriptions -->
                     <li v-for="failure in failures" class="transcription__error-container">
                         Failed to transcribe <i v-if="failure.file">{{ failure.file }}</i><br/>
-                        <span v-if="failure.message">Reason:    {{ failure.message }}</span>
+                        <span v-if="failure.message">Reason: {{ failure.message }}</span>
+                    </li>
+
+                    <li v-for="transcription in transcriptions" class="transcription__container">
+                        <div class="transcription__header">
+                            <button class="btn-fab theme-flat" v-on:click="playAudioFile" type="button">
+                                <span class="material-icons">&#xE037;</span> <!-- play_arrow -->
+                            </button>
+
+                            <p class="transcription__text">{{ transcription.transcription }}</p>
+                            <p class="body2 transcription__file-name">File: {{ transcription.file_name }}</p>
+
+                            <button class="btn-fab theme-error" v-on:click="removeTranscription" type="button">
+                                <span class="material-icons">&#xE872;</span> <!-- delete -->
+                            </button>
+                        </div>
+
+                        <gsf:div class="transcription__word-list" id="transcriptionWordList">
+                            <ul class="transcription__list">
+                                <li v-for="line in lines" style="display: flex">
+                                    <span v-for="word in line.words" style="border: 1px solid blue">{{ word }}</span>
+                                </li>
+                            </ul>
+                        </gsf:div>
+                        
+                        <div class="audio-slider-container">
+                            <input type="range" min="0" value="0" class="audio-slider" />
+                        </div>
+
+                        <hr class="divider" />
                     </li>
                 </ul>
-
-                <ul class="transcription__list">
-                    
-                </ul>
     
-                <!-- <ul id="transcriptionsList" class="transcription__list"></ul> -->
+                <ul id="transcriptionsList" class="transcription__list"></ul>
     
                 <template id="transcriptionTemplate">
@@ -116 +139 @@
                             </ul>
                         </gsf:div>
-                        
-                        <div class="audio-slider-container">
-                            <input type="range" min="0" value="0" class="audio-slider" />
-                        </div>
 
                         <hr class="divider" />
@@ -137 +156 @@
         
         <!-- TODO: Switch to production version for release builds -->
-        <gsf:script src="https://unpkg.com/vue@next"></gsf:script>
+        <!-- <gsf:script src="https://unpkg.com/vue@next"></gsf:script> -->
+        <gsf:script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.global.js"></gsf:script>
         <gsf:script src="interfaces/{$interface_name}/js/asr/asr-controller.js" type="module"></gsf:script>
         <!-- <script type="module" src="interfaces/{$interface_name}/js/asr/asr-controller.js">