Ignore:
Timestamp:
2021-12-13T10:05:46+13:00 (2 years ago)
Author:
cstephen
Message:

Pause playback when scrubbing the audio time bar

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

Legend:

Unmodified
Added
Removed

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

    r35631 r35802  
    1 <template>
    2 <div class="root">
    3     <button type="button" class="btn-fab theme-flat" :disabled="isDisabled"
    4             @click="stepBack" @mousedown="onStepBackMouseDown" @mouseup="onStepperMouseUp">
    5         <span class="material-icons mdi-s">arrow_back_ios_new</span>
    6     </button>
    7 
    8     <span>{{ stringSliderValue }}</span>
    9 
    10     <button type="button" class="btn-fab theme-flat" :disabled="isDisabled"
    11             @click="stepForward" @mousedown="onStepForwardMouseDown" @mouseup="onStepperMouseUp">
    12         <span class="material-icons mdi-s">arrow_forward_ios</span>
    13     </button>
    14 
    15     <input type="range" class="slider-continuous" v-model.number="sliderValue" min="0" :max="audioLength" step="0.01" :disabled="isDisabled" />
    16 </div>
    17 </template>
    18 
    19 <style lang="scss" scoped>
    20 .root {
    21     display: flex;
    22     align-items: center;
    23     gap: 0.5em;
    24 }
    25 </style>
    26 
    271<script>
    282import AudioPlayback from "../js/AudioPlaybackModule"
    … …  
    9872                setTimeout(run, 25); // 40hz
    9973            })();
     74        },
     75        onBarMouseDown() {
     76            AudioPlayback.pause();
     77        },
     78        onBarMouseUp() {
     79            AudioPlayback.resume();
    10080        }
    10181    }
    10282}
    10383</script>
     84
     85<template>
     86<div class="root">
     87    <button type="button" class="btn-fab theme-flat" :disabled="isDisabled"
     88            @click="stepBack" @mousedown="onStepBackMouseDown" @mouseup="onStepperMouseUp">
     89        <span class="material-icons mdi-s">arrow_back_ios_new</span>
     90    </button>
     91
     92    <span>{{ stringSliderValue }}</span>
     93
     94    <button type="button" class="btn-fab theme-flat" :disabled="isDisabled"
     95            @click="stepForward" @mousedown="onStepForwardMouseDown" @mouseup="onStepperMouseUp">
     96        <span class="material-icons mdi-s">arrow_forward_ios</span>
     97    </button>
     98
     99    <input type="range" class="slider-continuous" v-model.number="sliderValue" min="0" :max="audioLength" step="0.01" :disabled="isDisabled"
     100        @mousedown="onBarMouseDown" @mouseup="onBarMouseUp" />
     101</div>
     102</template>
     103
     104<style lang="scss" scoped>
     105.root {
     106    display: flex;
     107    align-items: center;
     108    gap: 0.5em;
     109}
     110</style>

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

    r35731 r35802  
    1 <template>
    2     <div class="card">
    3         <!-- Header containing info and actions for the transcription -->
    4         <div class="transcription__header">
    5             <button class="btn-fab" v-on:click="toggleAudio" type="button" :title="translations.get('TranscriptionItem_PlayButtonTooltip')">
    6                 <span class="material-icons mdi-l play-button" v-if="!isPlaying">play_arrow</span>
    7                 <span class="material-icons mdi-l play-button" v-if="isPlaying">pause</span>
    8             </button>
    9 
    10             <span>{{ translations.get("TranscriptionItem_FileName") }}: {{ transcription.fileName }}</span>
    11 
    12             <div style="position: relative;">
    13                 <button class="btn-primary" @mouseover="showDownloadOptions = true" @mouseout="showDownloadOptions = false" type="button">
    14                     <span class="material-icons">download</span>
    15                     <span>{{ translations.get("TranscriptionItem_Download") }}</span>
    16                 </button>
    17 
    18                 <div class="download-popup card" :class="{ 'download-popup-show': showDownloadOptions }"
    19                      @mouseover="showDownloadOptions = true" @mouseout="showDownloadOptions = false">
    20                     <button @click="downloadAsText" type="button" class="btn-primary theme-flat left-align">
    21                         <span class="material-icons">text_snippet</span>
    22                         <span>{{ translations.get("TranscriptionItem_DownloadAsText") }}</span>
    23                     </button>
    24 
    25                     <button @click="downloadAsJson" type="button" class="btn-primary theme-flat left-align">
    26                         <span class="material-icons">integration_instructions</span>
    27                         <span>{{ translations.get("TranscriptionItem_DownloadAsJson") }}</span>
    28                     </button>
    29 
    30                     <button @click="downloadAsWebvtt" type="button" class="btn-primary theme-flat left-align">
    31                         <span class="material-icons">subtitles</span>
    32                         <span>{{ translations.get("TranscriptionItem_DownloadAsWebvtt") }}</span>
    33                     </button>
    34                 </div>
    35             </div>
    36 
    37             <button class="btn-primary theme-error" @click="remove" type="button">
    38                 <span class="material-icons">delete</span>
    39                 <span>{{ translations.get("TranscriptionItem_Remove") }}</span>
    40             </button>
    41         </div>
    42 
    43         <div class="editor-controls">
    44             <audio-time-bar v-model.number="currentPlaybackTime" :audio-length="audioLength" :isDisabled="playbackState.id != transcription.id" />
    45         </div>
    46 
    47         <hr />
    48 
    49         <div class="editor-controls">
    50             <TranscriptionItemEditor ref="editor" :transcription="transcription" style="margin-bottom: 1em" :enableEditing="enableEditing" />
    51             <toggle-button v-model="enableEditing" :title="translations.get('TranscriptionItemEditor_ToggleEditTooltip')">
    52                 <span class="material-icons">edit</span>
    53             </toggle-button>
    54         </div>
    55     </div>
    56 </template>
    57 
    58 <style scoped lang="scss">
    59 .transcription__header {
    60     display: grid;
    61     gap: 0.5em 0.5em;
    62     grid-template-columns: auto 1fr auto auto;
    63     align-items: center;
    64 }
    65 
    66 .download-popup {
    67     display: flex;
    68     flex-direction: column;
    69     align-items: stretch;
    70 
    71     position: absolute;
    72     top: 97%;
    73     z-index: 2;
    74 
    75     padding: 2px;
    76     margin: 0;
    77     width: 14em;
    78 
    79     transition-duration: var(--transition-duration);
    80     visibility: hidden;
    81     opacity: 0;
    82 }
    83 
    84 .download-popup-show {
    85     visibility: visible;
    86     opacity: 1;
    87 }
    88 
    89 .editor-controls {
    90     display: grid;
    91     align-items: flex-start;
    92     grid-template-columns: 1fr auto;
    93     margin: 0.5em 0 0.3em 0;
    94     gap: 1em;
    95 }
    96 
    97 .rotate-180 {
    98     transform: rotate(180deg);
    99 }
    100 
    101 .left-align {
    102     justify-content: flex-start;
    103 }
    104 </style>
    105 
    1061<script>
    1072import { mapState } from "vuex";
    … …  
    212107}
    213108</script>
     109
     110<template>
     111    <div class="card">
     112        <!-- Header containing info and actions for the transcription -->
     113        <div class="transcription__header">
     114            <button class="btn-fab" v-on:click="toggleAudio" type="button" :title="translations.get('TranscriptionItem_PlayButtonTooltip')">
     115                <span class="material-icons mdi-l play-button" v-if="!isPlaying">play_arrow</span>
     116                <span class="material-icons mdi-l play-button" v-if="isPlaying">pause</span>
     117            </button>
     118
     119            <span>{{ translations.get("TranscriptionItem_FileName") }}: {{ transcription.fileName }}</span>
     120
     121            <div style="position: relative;">
     122                <button class="btn-primary" @mouseover="showDownloadOptions = true" @mouseout="showDownloadOptions = false" type="button">
     123                    <span class="material-icons">download</span>
     124                    <span>{{ translations.get("TranscriptionItem_Download") }}</span>
     125                </button>
     126
     127                <div class="download-popup card" :class="{ 'download-popup-show': showDownloadOptions }"
     128                     @mouseover="showDownloadOptions = true" @mouseout="showDownloadOptions = false">
     129                    <button @click="downloadAsText" type="button" class="btn-primary theme-flat left-align">
     130                        <span class="material-icons">text_snippet</span>
     131                        <span>{{ translations.get("TranscriptionItem_DownloadAsText") }}</span>
     132                    </button>
     133
     134                    <button @click="downloadAsJson" type="button" class="btn-primary theme-flat left-align">
     135                        <span class="material-icons">integration_instructions</span>
     136                        <span>{{ translations.get("TranscriptionItem_DownloadAsJson") }}</span>
     137                    </button>
     138
     139                    <button @click="downloadAsWebvtt" type="button" class="btn-primary theme-flat left-align">
     140                        <span class="material-icons">subtitles</span>
     141                        <span>{{ translations.get("TranscriptionItem_DownloadAsWebvtt") }}</span>
     142                    </button>
     143                </div>
     144            </div>
     145
     146            <button class="btn-primary theme-error" @click="remove" type="button">
     147                <span class="material-icons">delete</span>
     148                <span>{{ translations.get("TranscriptionItem_Remove") }}</span>
     149            </button>
     150        </div>
     151
     152        <div class="editor-controls">
     153            <audio-time-bar v-model.number="currentPlaybackTime" :audio-length="audioLength" :isDisabled="playbackState.id != transcription.id" />
     154        </div>
     155
     156        <hr />
     157
     158        <div class="editor-controls">
     159            <TranscriptionItemEditor ref="editor" :transcription="transcription" style="margin-bottom: 1em" :enableEditing="enableEditing" />
     160            <toggle-button v-model="enableEditing" :title="translations.get('TranscriptionItemEditor_ToggleEditTooltip')">
     161                <span class="material-icons">edit</span>
     162            </toggle-button>
     163        </div>
     164    </div>
     165</template>
     166
     167<style scoped lang="scss">
     168.transcription__header {
     169    display: grid;
     170    gap: 0.5em 0.5em;
     171    grid-template-columns: auto 1fr auto auto;
     172    align-items: center;
     173}
     174
     175.download-popup {
     176    display: flex;
     177    flex-direction: column;
     178    align-items: stretch;
     179
     180    position: absolute;
     181    top: 97%;
     182    z-index: 2;
     183
     184    padding: 2px;
     185    margin: 0;
     186    width: 14em;
     187
     188    transition-duration: var(--transition-duration);
     189    visibility: hidden;
     190    opacity: 0;
     191}
     192
     193.download-popup-show {
     194    visibility: visible;
     195    opacity: 1;
     196}
     197
     198.editor-controls {
     199    display: grid;
     200    align-items: flex-start;
     201    grid-template-columns: 1fr auto;
     202    margin: 0.5em 0 0.3em 0;
     203    gap: 1em;
     204}
     205
     206.rotate-180 {
     207    transform: rotate(180deg);
     208}
     209
     210.left-align {
     211    justify-content: flex-start;
     212}
     213</style>

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

    r35755 r35802  
    145145        this.store.commit("playbackStateSetIsPlaying", false);
    146146    }
     147
     148    /**
     149     * Resumes playback.
     150     * @param {Number} startTime The time into the audio at which to resume playback.
     151     */
     152    static resume(startTime = -1) {
     153        this.play(this.loadedAudio.id, startTime);
     154    }
    147155}
Note: See TracChangeset for help on using the changeset viewer.