Changeset 35426


Ignore:
Timestamp:
2021-09-20T10:06:23+12:00 (8 months ago)
Author:
cstephen
Message:

Improve audio time bar implementation

Location:
main/trunk/model-interfaces-dev/atea/korero-maori-asr/src
Files:
5 edited

Legend:

Unmodified
Added
Removed
  • main/trunk/model-interfaces-dev/atea/korero-maori-asr/src/App.vue

    r35411 r35426  
    126126        }
    127127
    128         setTimeout(p, 50);
     128        setTimeout(p, 33); // Slightly more than 30hz
    129129    })();
    130130}
  • main/trunk/model-interfaces-dev/atea/korero-maori-asr/src/components/AudioTimeBar.vue

    r35413 r35426  
    11<template>
    22<div class="root">
    3     <input type="range" class="slider-continuous" v-model="sliderValue" :max="audioLength" step="0.01" />
    4     <span>{{ sliderValue }}</span>
     3    <input type="range" class="slider-continuous" v-model.number="sliderValue" :max="audioLength" step="0.01" />
     4    <span>{{ stringSliderValue }}</span>
    55</div>
    66</template>
     
    3232        sliderValue: {
    3333            get() {
    34                 if (this.myValue < 0) {
     34                if (this.modelValue < 0) {
    3535                    return 0;
    3636                }
    3737
    38                 if (this.myValue > this.audioLength) {
     38                if (this.modelValue > this.audioLength) {
    3939                    return this.audioLength;
    4040                }
    4141
    42                 return this.myValue;
     42                return this.modelValue;
    4343            },
    4444            set(newValue) {
     45                // this.myValue = newValue;
    4546                this.$emit("update:modelValue", newValue);
    46                 this.myValue = newValue;
    4747            }
    4848        },
    4949        stringSliderValue() {
    50             return Util.formatSecondsTimeString(this.sliderValue);
     50            return Util.formatSecondsTimeString(this.sliderValue, false, 2);
    5151        }
    5252    }
  • main/trunk/model-interfaces-dev/atea/korero-maori-asr/src/components/TranscriptionItemEditor.vue

    r35413 r35426  
    22<div>
    33    <div class="editor-controls">
    4         <audio-time-bar v-model="currentPlaybackTime" :audio-length="2" />
     4        <audio-time-bar v-model.number="currentPlaybackTime" :audio-length="2" />
    55
    66        <toggle-button v-model="enableEditing">
     
    125125        }
    126126    },
    127     computed: mapState({
    128         playbackState: state => state.playbackState,
    129         currentPlaybackTime: state => state.playbackState.currentTime,
    130         translations: state => state.translations
    131     }),
     127    computed: {
     128        currentPlaybackTime: {
     129            get() {
     130                return this.$store.state.playbackState.currentTime;
     131            },
     132            set(value) {
     133                this.$store.commit("setCurrentPlaybackTime", value);
     134            }
     135        },
     136        ...mapState({
     137            playbackState: state => state.playbackState,
     138            translations: state => state.translations
     139        })
     140    },
    132141    methods: {
    133142        playAudio(startTime) {
  • main/trunk/model-interfaces-dev/atea/korero-maori-asr/src/js/Util.js

    r35413 r35426  
    4848     * @param {Number} seconds The number of seconds.
    4949     * @param {Boolean} includeHoursIfNone Defines whether to include the hours component if it is empty.
     50     * @param {Number} fractionDigits The number of millisecond digits to include in the time string.
    5051     * @returns {String} The formatted time string.
    5152     */
    52     static formatSecondsTimeString(seconds, includeHoursIfNone) {
     53    static formatSecondsTimeString(seconds, includeHoursIfNone, fractionDigits = 3) {
    5354        const hours = (seconds / 3600) | 0;
    5455        const minutes = ((seconds - (hours * 60)) / 60) | 0;
     
    6566
    6667        result += minutes.toLocaleString("en-US", { maximumFractionDigits: 0, minimumIntegerDigits: 2 });
    67         result += ":" + actualSeconds.toLocaleString("en-US", { minimumFractionDigits: 3, maximumFractionDigis: 3, minimumIntegerDigits: 2 });
     68        result += ":" + actualSeconds.toLocaleString("en-US", { minimumFractionDigits: fractionDigits, maximumFractionDigits: fractionDigits, minimumIntegerDigits: 2 });
    6869
    6970        return result;
  • main/trunk/model-interfaces-dev/atea/korero-maori-asr/src/main.js

    r35412 r35426  
    3737     * @param {Numbe} currentTime The current time in the audio playback.
    3838     */
    39     constructor(id = "", isPlaying = false, currentTime = -1) {
     39    constructor(id = "", isPlaying = false, currentTime = 0) {
    4040        /** @type {String} The ID of the transcription for which audio is currently being played. */
    4141        this.id = id;
Note: See TracChangeset for help on using the changeset viewer.