Changeset 35451


Ignore:
Timestamp:
2021-09-22T15:45:46+12:00 (3 years ago)
Author:
cstephen
Message:

Add time increment buttons to the AudioTimeBar

Location:
main/trunk/model-interfaces-dev/atea
Files:
8 edited

Legend:

Unmodified
Added
Removed

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

    r35448 r35451  
    8080.transcription-list-leave-to {
    8181    opacity: 0;
    82     transform: translateX(30%);
    8382}
    8483

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

    r35450 r35451  
    22<div class="root">
    33    <input type="range" class="slider-continuous" v-model.number="sliderValue" min="0" :max="audioLength" step="0.01" :disabled="isDisabled" />
     4
     5    <button type="button" class="btn-fab" @click="stepBack" :disabled="isDisabled">
     6        <span class="material-icons mdi-s">arrow_back_ios_new</span>
     7    </button>
     8
    49    <span>{{ stringSliderValue }}</span>
     10
     11    <button type="button" class="btn-fab" @click="stepForward" :disabled="isDisabled">
     12        <span class="material-icons mdi-s">arrow_forward_ios</span>
     13    </button>
    514</div>
    615</template>
    … …  
    1019    display: flex;
    1120    align-items: center;
    12     gap: 1em;
     21    gap: 0.5em;
    1322}
    1423</style>
    1524
    1625<script>
     26import AudioPlayback from "../js/AudioPlaybackModule"
    1727import Util from "../js/Util"
    1828
    … …  
    4555            return Util.formatSecondsTimeString(this.sliderValue, false, 2);
    4656        }
     57    },
     58    methods: {
     59        stepBack() {
     60            AudioPlayback.scrub(this.modelValue - 0.1);
     61        },
     62        stepForward() {
     63            AudioPlayback.scrub(this.modelValue + 0.1);
     64        }
    4765    }
    4866}

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

    r35449 r35451  
    33        <!-- Header containing info and actions for the transcription -->
    44        <div class="transcription__header">
    5             <button class="btn-fab" v-on:click="toggleAudio" type="button" title="Play Audio">
     5            <button class="btn-fab" v-on:click="toggleAudio" type="button" :title="translations.get('TranscriptionItem_PlayButtonTooltip')">
    66                <span class="material-icons mdi-l play-button" v-if="!isPlaying">play_arrow</span>
    77                <span class="material-icons mdi-l play-button" v-if="isPlaying">pause</span>

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

    r35450 r35451  
    2323        <audio-time-bar v-model.number="currentPlaybackTime" :audio-length="audioLength" :isDisabled="playbackState.id != transcription.id" />
    2424
    25         <toggle-button v-model="enableEditing" title="Toggle Edit Mode">
    26             <span class="material-icons .mdi-m">edit</span>
     25        <toggle-button v-model="enableEditing" :title="translations.get('TranscriptionItemEditor_ToggleEditTooltip')">
     26            <span class="material-icons">edit</span>
    2727        </toggle-button>
    2828    </div>

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

    r35450 r35451  
    105105
    106106    /**
     107     * Sets the current time of the audio player.
     108     * @param {Number} time The time to scrub to.
     109     * @param {Boolean} fromCurrent Indicates if the time is an offset.
     110     */
     111    static scrub(time, fromCurrent) {
     112        const newTime = fromCurrent ? this.player.currentTime + time : time;
     113        this.player.currentTime = newTime;
     114    }
     115
     116    /**
    107117     * Pauses playback.
    108118     */

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

    r35449 r35451  
    6363
    6464.btn-primary {
     65    appearance: none;
     66
    6567    display: flex;
    6668    align-items: center;
    … …  
    7577    padding: 0.5em;
    7678    cursor: pointer;
    77     font-size: 16px;
     79    font-size: 1rem;
    7880    text-decoration: none;
    79     margin: 0 1px 3px 1px; /* Keeps space around the box shadow */
    8081
    8182    transition-duration: var(--transition-duration);

  • main/trunk/model-interfaces-dev/atea/resources/interface_atea.properties

    r35447 r35451  
    1515atea.TranscriptionItem_DownloadAsJson=Download as JSON
    1616atea.TranscriptionItem_DownloadAsWebvtt=Download as WebVTT
     17atea.TranscriptionItem_PlayButtonTooltip=Listen
    1718
    18 atea.TranscriptionItemEditor_EnableEditing=Enable Editing
     19atea.TranscriptionItemEditor_ToggleEditTooltip=Toggle Edit Mode

  • main/trunk/model-interfaces-dev/atea/resources/interface_atea_mi.properties

    r35447 r35451  
    1515atea.TranscriptionItem_DownloadAsJson=Tangohia hei JSON
    1616atea.TranscriptionItem_DownloadAsWebvtt=Tangohia hei WebVTT
     17atea.TranscriptionItem_PlayButtonTooltip=Whakarongo
    1718
    18 atea.TranscriptionItemEditor_EnableEditing=Whakahohea te Whakatika
     19atea.TranscriptionItemEditor_ToggleEditTooltip=Takahuri Aratau Whakatika
Note: See TracChangeset for help on using the changeset viewer.