Changeset 35430

Timestamp:

2021-09-20T11:27:26+12:00 (3 years ago)

Author:

cstephen

Message:

Add audio length to playback state.
Disable audio time bar when irrelevant.

Location:

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

Files:

• App.vue (modified) (1 diff)
• components/AudioTimeBar.vue (modified) (3 diffs)
• components/TranscriptionItemEditor.vue (modified) (1 diff)
• main.js (modified) (2 diffs)
• styles/_material.scss (modified) (3 diffs)

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

@@ -82 +82 @@
             this.player.currentTime = playbackTime;
             await this.player.play();
+
+            this.playbackState.length = this.player.duration;
         }//,
         // shouldPlayAudio(newValue) {

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

@@ -1 +1 @@
 <template>
 <div class="root">
-    <input type="range" class="slider-continuous" v-model.number="sliderValue" :max="audioLength" step="0.01" />
+    <input type="range" class="slider-continuous" v-model.number="sliderValue" :max="audioLength" step="0.01" :disabled="isDisabled" />
     <span>{{ stringSliderValue }}</span>
 </div>
@@ -21 +21 @@
     props: {
         modelValue: Number,
-        audioLength: Number
+        audioLength: Number,
+        isDisabled: Boolean
     },
     emits: [ "update:modelValue" ],
-    data() {
-        return {
-            myValue: 0
-        }
-    },
     computed: {
         sliderValue: {
             get() {
-                if (this.modelValue < 0) {
+                if (this.modelValue < 0 || this.isDisabled) {
                     return 0;
                 }
@@ -43 +39 @@
             },
             set(newValue) {
-                // this.myValue = newValue;
                 this.$emit("update:modelValue", newValue);
             }

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

@@ -2 +2 @@
 <div>
     <div class="editor-controls">
-        <audio-time-bar v-model.number="currentPlaybackTime" :audio-length="2" />
+        <audio-time-bar v-model.number="currentPlaybackTime" :audio-length="playbackState.length" :isDisabled="playbackState.id != transcription.id" />
 
         <toggle-button v-model="enableEditing">

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

@@ -35 +35 @@
      * @param {String} id The ID of the transcription for which audio is being played.
      * @param {Boolean} isPlaying A value indicating if audio is currently being played.
-     * @param {Numbe} currentTime The current time in the audio playback.
+     * @param {Number} currentTime The current time in the audio playback.
+     * @param {Number} length The length of the audio track.
      */
-    constructor(id = "", isPlaying = false, currentTime = 0) {
+    constructor(id = "", isPlaying = false, currentTime = 0, length = 0) {
         /** @type {String} The ID of the transcription for which audio is currently being played. */
         this.id = id;
@@ -46 +47 @@
         /** @type {Number} Gets the current time in the playback. */
         this.currentTime = currentTime;
+
+        /** @type {Number} Gets the length of the current audio track. */
+        this.length = length;
     }
 }

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

@@ -258 +258 @@
     cursor: pointer;
 
-    background: var(--primary-bg-color);
+    background-color: var(--primary-bg-color);
     box-shadow: var(--primary-box-shadow-thin);
 
     &:hover {
         filter: brightness(var(--hover-brightness));
-        }
+    }
+}
+
+@mixin disabled-slider-thumb {
+    cursor: default;
+    
+    &:hover {
+        filter: none;
+    }
 }
 
@@ -273 +281 @@
     height: 8px;
     border-radius: 4px;
-    background: scale-color($primary-bg-color-l1, $alpha: -70%);
+    background-color: scale-color($primary-bg-color-l1, $alpha: -70%);
 
     transition-duration: var(--transition-duration);
@@ -290 +298 @@
 
     &:hover {
-        background: scale-color($primary-bg-color-l1, $alpha: -60%);
+        background-color: scale-color($primary-bg-color-l1, $alpha: -60%);
+    }
+}
+
+.slider-continuous:disabled {
+    filter: grayscale(100%);
+        
+    &::-webkit-slider-thumb {
+        @include disabled-slider-thumb();
+    }
+
+    &::-moz-range-thumb {
+        @include disabled-slider-thumb();
+    }
+
+    &::-ms-thumb {
+        @include disabled-slider-thumb();
+    }
+
+    &:hover {
+        background-color: scale-color($primary-bg-color-l1, $alpha: -70%);
     }
 }