Changeset 35302

Timestamp:

2021-08-17T14:15:34+12:00 (3 years ago)

Author:

davidb

Message:

Fix race error to get DOM elements.
Add transcription delete animations.
Add audio current time polling.
Improve style and layout.

Location:

main/trunk/model-interfaces-dev/atea

Files:

• js/asr/asr-controller.js (modified) (12 diffs)
• style/asr.scss (modified) (5 diffs)
• style/material.scss (modified) (4 diffs)
• transform/pages/asr.xsl (modified) (4 diffs)

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

@@ -5 +5 @@
 
 import { TranscribeService, TranscriptionError, TranscriptionModel, TranscriptionMetadata } from "./TranscribeModule.js";
-
-/** @type {HTMLAudioElement} */
-// @ts-ignore
-const TRANSCRIPTION_AUDIO_ELEMENT = document.getElementById("transcriptionAudio");
-
-/** @type {HTMLSourceElement} */
-// @ts-ignore
-const TRANSCRIPTION_AUDIO_SOURCE_ELEMENT = document.getElementById("transcriptionAudioSource");
 
 class TranscriptionViewModel {
@@ -36 +28 @@
         /** @type {File} The file from which the transcription was generated. */
         this.file = file;
-    }
-}
+
+        /** @type {Boolean} Gets or sets a value indicating if the transcription view is expanded. */
+        this.isExpanded = false;
+
+        /** @type {Boolean} Gets or sets a value indicating if this transcription view has been deleted. */
+        this.isDeleted = false;
+    }
+}
+
+/** @type {HTMLAudioElement} */
+var EL_AUDIO_TRANSCRIPTION_AUDIO;
+
+/** @type {HTMLSourceElement} */
+var EL_SOURCE_TRANSCRIPTION_AUDIO;
+
+/** @type {Number} The size of each character in our monospace font. */
+var MONOSPACE_CHAR_SIZE;
+
+/** @type {HTMLInputElement} */
+var EL_INPUT_AUDIO_FILE;
 
 var transcribeService = new TranscribeService();
+
+window.addEventListener("load", function()
+{
+    // @ts-ignore | Object could be null
+    EL_AUDIO_TRANSCRIPTION_AUDIO = document.getElementById("transcriptionAudio");
+
+    // @ts-ignore | Object could be null
+    EL_INPUT_AUDIO_FILE = document.getElementById("audioFileInput");
+
+    // @ts-ignore | Object could be null
+    EL_SOURCE_TRANSCRIPTION_AUDIO = document.getElementById("transcriptionAudioSource");
+
+    const monoCharSizeTestElement = document.querySelector(".monospace-font-sizer");
+    if (monoCharSizeTestElement == null || monoCharSizeTestElement.textContent == null)
+    {
+        MONOSPACE_CHAR_SIZE = 8; // Slightly over-estimated guess for 16px font-size.
+        return;
+    }
+    
+    MONOSPACE_CHAR_SIZE = monoCharSizeTestElement.clientWidth / monoCharSizeTestElement.textContent.length;
+
+    pollAudioTime();
+});
+
+// Adapted from https://davidwalsh.name/javascript-polling
+function pollAudioTime()
+{
+    var lastTime = 0;
+    (function p()
+    {
+        if (EL_AUDIO_TRANSCRIPTION_AUDIO.currentTime != lastTime)
+        {
+            lastTime = EL_AUDIO_TRANSCRIPTION_AUDIO.currentTime;
+            console.log("time updated! " + lastTime);
+        }
+        
+        setTimeout(p, 50);
+    })();
+}
 
 /**
@@ -47 +96 @@
  * @link http://stackoverflow.com/questions/105034/how-to-create-a-guid-uuid-in-javascript/21963136#21963136
  **/
- var UUID = (function() {
+ var UUID = (function()
+ {
     var self = {};
-    var lut = []; for (var i=0; i<256; i++) { lut[i] = (i<16?'0':'')+(i).toString(16); }
-    self.generate = function() {
-      var d0 = Math.random()*0xffffffff|0;
-      var d1 = Math.random()*0xffffffff|0;
-      var d2 = Math.random()*0xffffffff|0;
-      var d3 = Math.random()*0xffffffff|0;
-      return lut[d0&0xff]+lut[d0>>8&0xff]+lut[d0>>16&0xff]+lut[d0>>24&0xff]+'-'+
-        lut[d1&0xff]+lut[d1>>8&0xff]+'-'+lut[d1>>16&0x0f|0x40]+lut[d1>>24&0xff]+'-'+
-        lut[d2&0x3f|0x80]+lut[d2>>8&0xff]+'-'+lut[d2>>16&0xff]+lut[d2>>24&0xff]+
-        lut[d3&0xff]+lut[d3>>8&0xff]+lut[d3>>16&0xff]+lut[d3>>24&0xff];
-    }
+    var lut = [];
+
+    for (var i=0; i<256; i++){
+        lut[i] = (i < 16 ? '0' : '') + (i).toString(16);
+    }
+
+    self.generate = function()
+    {
+        var d0 = Math.random() * 0xffffffff | 0;
+        var d1 = Math.random() * 0xffffffff | 0;
+        var d2 = Math.random() * 0xffffffff | 0;
+        var d3 = Math.random() * 0xffffffff | 0;
+
+        return lut[d0 & 0xff] + lut[d0 >> 8 & 0xff] + lut[d0 >> 16 & 0xff] + lut[d0 >> 24 & 0xff] + '-' +
+            lut[d1 & 0xff] + lut[d1 >> 8 & 0xff] + '-' + lut[d1 >> 16 & 0x0f | 0x40] + lut[d1 >> 24 & 0xff] + '-' +
+            lut[d2 & 0x3f | 0x80] + lut[d2 >> 8 & 0xff] + '-' + lut[d2 >> 16 & 0xff] + lut[d2 >> 24 & 0xff] +
+            lut[d3 & 0xff] + lut[d3 >> 8 & 0xff] + lut[d3 >> 16 & 0xff] + lut[d3 >> 24 & 0xff];
+    }
+
     return self;
-  })();
-  // TODO: Hash file name and size instead. Good indicator that the user has uploaded a duplicate.
-
-// Get the size of each character in our monospace font
-var MONOSPACE_CHAR_SIZE;
-window.addEventListener("load", function()
-{
-    const monoCharSizeTestElement = document.querySelector(".monospace-font-sizer");
-    if (monoCharSizeTestElement == null || monoCharSizeTestElement.textContent == null)
-    {
-        MONOSPACE_CHAR_SIZE = 8; // Slightly over-estimated guess for size 16 font.
-        return;
-    }
-    
-    MONOSPACE_CHAR_SIZE = monoCharSizeTestElement.clientWidth / monoCharSizeTestElement.textContent.length;
-});
+})();
+// TODO: Hash file name and size instead. Good indicator that the user has uploaded a duplicate.
 
 // @ts-ignore
@@ -108 +152 @@
         {
             openFilePicker() {
-                document.getElementById("audioFileInput")?.click();
+                EL_INPUT_AUDIO_FILE.click(); 
             },
             onFilesChanged()
             {
-                /** @type {HTMLInputElement} */
-                // @ts-ignore | Object could be null
-                const audioFileInput = document.getElementById("audioFileInput");
-
-                if (audioFileInput.files?.length != undefined && audioFileInput.files?.length > 0) {
+                this.files = [];
+
+                if (EL_INPUT_AUDIO_FILE.files?.length != undefined && EL_INPUT_AUDIO_FILE.files?.length > 0) {
                     
-                    for (const f of audioFileInput.files) {
-                        this.files.push(f);
-                    }
-                }
-                else {
-                    this.files = [];
+                    for (const file of EL_INPUT_AUDIO_FILE.files)
+                        this.files.push(file);
                 }
             },
@@ -130 +168 @@
                 // Else call getTranscriptions();
                 // Then, we don't have to worry about preventing the user from transcribing multiple items.
-                await getTranscriptions(this.files);
+                const files = this.files;
+                this.files = []; // Clear the file list, as there is no reason the user would want to transcribe the same file multiple times over
+                await getTranscriptions(files);
             }
         }
@@ -148 +188 @@
             failures: new Map(),
             showCharDisplay: false,
-            showWordList: false,
             /** @type {{id: String, url: String} | null} Gets the ID of the transcription for which the audio is currently loaded */
             currentlyLoadedAudio: null
@@ -155 +194 @@
     methods:
     {
-        playAudioFile(transcriptionId, startTime = 0) // TODO: Convert to ID
+        playAudioFile(transcriptionId, startTime = 0)
         {
             if (startTime < 0)
             {
                 startTime = 0;
-                console.warn("Cannot start a audio playback at a time of less than zero.");
-            }
-
-            if (startTime >= TRANSCRIPTION_AUDIO_ELEMENT.duration)
-            {
-                console.warn("Cannot start a audio playback at a time longer than the audio duration.");
+                console.warn("Cannot start audio playback at a time of less than zero.");
+            }
+
+            if (startTime >= EL_AUDIO_TRANSCRIPTION_AUDIO.duration)
+            {
+                console.warn("Cannot start audio playback at a time longer than the audio duration.");
                 return;
             }
@@ -171 +210 @@
             this.currentlyLoadedAudio = loadTranscriptionAudio(transcriptionId, this.currentlyLoadedAudio);
 
-            TRANSCRIPTION_AUDIO_ELEMENT.currentTime = startTime;
-            TRANSCRIPTION_AUDIO_ELEMENT.play();
-        },
-        removeTranscription(id) {
-            this.transcriptions.delete(id);
-            // TODO: delete cached audio file
+            EL_AUDIO_TRANSCRIPTION_AUDIO.currentTime = startTime;
+            EL_AUDIO_TRANSCRIPTION_AUDIO.play();
+        },
+        removeTranscription(id)
+        {
+            this.transcriptions.get(id).isDeleted = true;
+            delay(550).then(() => this.transcriptions.delete(id));
         },
         removeFailure(id) {
@@ -235 +275 @@
 
             return chars;
-        },
-        toggleWordList() {
-            this.showWordList = !this.showWordList;
         }
     }
@@ -273 +310 @@
     AudioUploadVM.isTranscribing = true;
     
-    // await delay(200); // TODO: Remove - UI testing purposes only
+    await delay(200); // TODO: Remove - UI testing purposes only
     
     // Transcribe each audio file in batches.
@@ -384 +421 @@
 
         const urlObject = URL.createObjectURL(TranscriptionsListVM.transcriptions.get(transcriptionId).file);
-        TRANSCRIPTION_AUDIO_SOURCE_ELEMENT.src = urlObject;
-        TRANSCRIPTION_AUDIO_ELEMENT.load();
+        EL_SOURCE_TRANSCRIPTION_AUDIO.src = urlObject;
+        EL_AUDIO_TRANSCRIPTION_AUDIO.load();
 
         return { id: transcriptionId, url: urlObject };
@@ -392 +429 @@
     return current;
 }
-
-TRANSCRIPTION_AUDIO_ELEMENT.addEventListener('durationchange', function() {
-    TranscriptionsListVM.audioDuration = TRANSCRIPTION_AUDIO_ELEMENT.duration;
-});
-
-TRANSCRIPTION_AUDIO_ELEMENT.addEventListener('timeupdate', function() {
-    console.log("time updated");
-    TranscriptionsListVM.currentAudioTime = TRANSCRIPTION_AUDIO_ELEMENT.currentTime;
-});

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

@@ +1 @@
+/*
+ * Defines styles for asr.xsl
+ * Author: Carl Stephens
+ */
+
 @use "./material.scss";
 @import url('https://fonts.googleapis.com/css2?family=Roboto+Mono&family=Roboto:wght@400;700&display=swap');
@@ -21 +26 @@
 
 /* === End theme application === */
+
+.transform-slideout {
+    -webkit-transition-duration: 0.5s;
+    -moz-transition-duration: 0.5s;
+    transition-duration: 0.5s;
+
+    transform: translate(100%, 0);
+    opacity: 0;
+}
 
 body {
@@ -49 +63 @@
     display: grid;
     gap: 0.5em 0.5em;
-    grid-template-columns: auto 1fr auto;
+    grid-template-columns: 1fr auto;
     align-items: stretch;
 
@@ -74 +88 @@
     padding: 0;
     list-style-type: none;
-}
-
-.transcription__container {
-    -webkit-transition-duration: 0.15s;
-    transition-duration: 0.15s;
-
-    // &:hover {
-    //     background-color: #EEE;
-    // }
 }
 
@@ -121 +126 @@
 
 .transcription__error-container {
-    @extend .transcription__container;
     display: grid;
     gap: 0.5em 0.5em;

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

@@ +1 @@
+/*
+ * Defines themes that match the material design specification
+ * Author: Carl Stephens
+ */
+
 /* === Start theme definitions === */
 
@@ -132 +137 @@
     align-items: center;
 
-    line-height: 1.5em;
+    //line-height: 1.5em;
     border-radius: var(--border-radius);
-    background: #DCDCDCDC;
+    background: #DDD;
     padding: 0.5em;
+
+    .text-placeholder {
+        cursor: default;
+    }
 }
 
@@ -147 +156 @@
 
 .text-input {
-    display: flex;
-    align-items: center;
+    @extend .text-container;
 
     border-radius: var(--border-radius) var(--border-radius) 0 0;
     border-bottom: 1px solid #AAA;
-    background: #EEE;
-    padding: 0.5em;
-
-    @include transition-set;
-
-    &:hover {
-        background-color: #DDD;
+    cursor: text;
+
+    @include transition-set;
+
+    &:hover {
+        background-color: #CDCDCD;
     }
 
@@ -179 +186 @@
 }
 
+.text-input-sl {
+    @extend .text-input;
+
+    overflow-x: auto;
+    overflow-y: hidden;
+    white-space: nowrap;
+}
+
 .text-placeholder {
     color: #666; 
     cursor: default;
     font-style: italic;
+    cursor: inherit;
 }
 

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

@@ -49 +49 @@
             <!-- Contains the file input, transcribe button and transcription progress indicator -->
             <div id="audioUploadContainer" class="audio-file-picker">
-                <button type="button" v-on:click="openFilePicker"
-                        v-bind:disabled="isTranscribing">
-                    <span class="material-icons">&#xE2C6;</span> <!-- file_upload -->
+                <!-- <button type="button" v-on:click="openFilePicker">
+                    <span class="material-icons">&#xE2C6;</span> file_upload
                     <span>Upload Audio Files</span>
-                </button>
+                </button>-->
 
-                <div class="text-container-sl" v-on:click="openFilePicker">
+                <div class="text-input-sl" style="cursor: pointer;" v-on:click="openFilePicker">
+                    <span class="text-placeholder material-icons" v-if="!anyFiles">&#xe226;</span> <!-- attach_file -->
                     <span class="text-placeholder" v-if="!anyFiles">Select file/s...</span>
                     <span v-if="anyFiles">{{ getFileNameList }}</span>
@@ -96 +96 @@
                     <!-- Displays each transcription --> 
                     <li v-for="[id, transcription] in transcriptions">
+                        <xsl:attribute name="v-bind:class">
+                            <xsl:text disable-output-escaping="yes">{ 'transform-slideout': transcription.isDeleted }</xsl:text>
+                        </xsl:attribute>
+
                         <div class="transcription__container card">
                             <!-- Header containing info and actions for the transcription -->
@@ -111 +115 @@
                             </div>
 
-                            <div class="transcription__word-list" v-if="showWordList">
+                            <div class="transcription__word-list" v-if="transcription.isExpanded">
                                 <div class="transcription__word-list__controls">
                                     <button class="btn-fab" v-on:click="playAudioFile(id)" type="button">
@@ -138 +142 @@
                             <hr />
 
-                            <button type="button" class="theme-flat" v-on:click="toggleWordList">
-                                <span class="material-icons" v-if="!showWordList">expand_more</span>
-                                <span class="material-icons" v-if="showWordList">expand_less</span>
+                            <button type="button" class="theme-flat" v-on:click="transcription.isExpanded = !transcription.isExpanded">
+                                <span class="material-icons" v-if="!transcription.isExpanded">expand_more</span>
+                                <span class="material-icons" v-if="transcription.isExpanded">expand_less</span>
                                 <span>Playback and Edit</span>
                             </button>