Changeset 35449 for main

Timestamp:

2021-09-22T11:21:41+12:00 (3 years ago)

Author:

cstephen

Message:

Add progress bars

Location:

main/trunk/model-interfaces-dev/atea/korero-maori-asr/src

Files:

• components/AudioUpload.vue (modified) (2 diffs)
• components/TranscriptionItem.vue (modified) (1 diff)
• components/TranscriptionItemEditor.vue (modified) (1 diff)
• styles/_material.scss (modified) (1 diff)
• styles/theme.scss (modified) (1 diff)

main/trunk/model-interfaces-dev/atea/korero-maori-asr/src/components/AudioUpload.vue

@@ -18 +18 @@
         </div>
 
-        <progress v-if="isTranscribing" class="indeterminateLoadingBar" />
+        <div v-if="isTranscribing" class="progress-bar-container">
+            <div class="progress-bar-value progress-bar-indeterminate" />
+        </div>
 
         <ul class="list-view" v-if="failures.size > 0">
@@ -158 +160 @@
          */
         async getTranscriptions(files) {
-            await Util.delay(200); // TODO: Remove - UI testing purposes only
-
             const validFiles = [];
 

main/trunk/model-interfaces-dev/atea/korero-maori-asr/src/components/TranscriptionItem.vue

@@ -128 +128 @@
             this.showAdvancedEditor = !this.showAdvancedEditor;
         },
-        toggleAudio() {
-            this.isPlaying ? AudioPlayback.pause() : AudioPlayback.play(this.transcription.id, -1);
+        async toggleAudio() {
+            this.isPlaying ? AudioPlayback.pause() : await AudioPlayback.play(this.transcription.id, -1);
         },
         remove() {

main/trunk/model-interfaces-dev/atea/korero-maori-asr/src/components/TranscriptionItemEditor.vue

@@ -141 +141 @@
     },
     methods: {
-        playAudio(startTime) {
-            AudioPlayback.play(this.transcription.id, startTime);
+        async playAudio(startTime) {
+            await AudioPlayback.play(this.transcription.id, startTime);
         },
         /**

main/trunk/model-interfaces-dev/atea/korero-maori-asr/src/styles/_material.scss

@@ -320 +320 @@
 }
 
+/* Progress Bars */
+
+.progress-circle-indeterminate {
+    height: 2em;
+    width: 2em;
+
+    border: 0.25em solid var(--bg-color);
+    border-right: 0.25em solid rgba(var(--bg-color-raw), 0.3);
+    border-radius: 50%;
+
+    animation: 1.5s linear 0s infinite running rotate360;
+}
+
+@keyframes rotate360 {
+    0% {
+        transform: rotate(0deg);
+    }
+
+    100% {
+        transform: rotate(360deg);
+    }
+}
+
+.progress-bar-container {
+    width: 100%;
+    height: 8px;
+    overflow: hidden;
+
+    background-color: rgba(var(--bg-color-raw), 0.2);
+    border-radius: 4px;
+}
+
+.progress-bar-value {
+    height: 100%;
+
+    background-color: var(--bg-color);
+    border-radius: 4px;
+}
+
+.progress-bar-indeterminate {
+    width: 20%;
+    animation: 2s ease 0s infinite alternate prgbr-indeterminate;
+}
+
+@keyframes prgbr-indeterminate {
+    0% {
+        transform: translateX(-100%);
+    }
+
+    100% {
+        transform: translateX(500%);
+    }
+}
+
 /* === End component definitions === */
 

main/trunk/model-interfaces-dev/atea/korero-maori-asr/src/styles/theme.scss

@@ -20 +20 @@
 body {
     background-color: var(--page-bg-color);
+    color: var(--body-color);
     font-family: 'Roboto', sans-serif;