Changeset 35885


Ignore:
Timestamp:
2022-01-05T12:43:39+13:00 (2 years ago)
Author:
cstephen
Message:

Format AudioUpload

File:
1 edited

Legend:

Unmodified
Added
Removed

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

    r35501 r35885  
    1 <template>
    2     <!-- Contains the file input, transcribe button and transcription progress indicator -->
    3     <div class="audio-file-picker">
    4         <div class="input-bar">
    5             <div class="text-input-sl" style="cursor: pointer;" @click="openFilePicker">
    6                 <span class="text-placeholder material-icons" v-if="!anyFiles">&#xe226;</span> <!-- attach_file -->
    7                 <span class="text-placeholder" v-if="!anyFiles">{{ translations.get("AudioUpload_SelectFileText") }}</span>
    8                 <span v-if="anyFiles">{{ getFileNameList }}</span>
    9             </div>
    10 
    11             <input ref="audioFileInput" type="file" @input="onFilesChanged"
    12                 accept="audio/wav" multiple :disabled="isTranscribing" />
    13 
    14             <button class="btn-primary" type="submit" :disabled="!anyFiles || isTranscribing" @click="doTranscription">
    15                 <span class="material-icons">&#xEA3E;</span> <!-- history_edu -->
    16                 <span>{{ translations.get("AudioUpload_TranscribeFiles") }}</span>
    17             </button>
    18         </div>
    19 
    20         <div v-if="isTranscribing" class="progress-bar-container">
    21             <div class="progress-bar-value progress-bar-indeterminate" />
    22         </div>
    23 
    24         <ul class="list-view" v-if="failures.size > 0">
    25             <li v-for="[id, failure] in failures" :key="failure.id" class="list-view__item transcription-error-container">
    26                 <div>
    27                     {{ translations.get("AudioUpload_TranscriptionFailed_Message") }} <i v-if="failure.fileName">{{ failure.fileName }}</i><br />
    28                     <span v-if="failure.message">{{ translations.get("AudioUpload_TranscriptionFailed_Reason") }}: {{ failure.message }}</span>
    29                 </div>
    30 
    31                 <button class="btn-fab theme-flat" @click="dismissFailure(id)">
    32                     <span class="material-icons">&#xE14C;</span> <!-- clear -->
    33                 </button>
    34             </li>
    35         </ul>
    36     </div>
    37 </template>
    38 
    39 <!-- Add "scoped" attribute to limit CSS to this component only -->
    40 <style scoped lang="scss">
    41 .audio-file-picker {
    42     display: flex;
    43     gap: 0.5em;
    44     flex-direction: column;
    45 
    46     input {
    47         display: none;
    48     }
    49 
    50     .text-container {
    51         cursor: pointer;
    52     }
    53 }
    54 
    55 .input-bar {
    56     display: grid;
    57     align-items: stretch;
    58     gap: 0.5em;
    59     grid-template-columns: 1fr auto;
    60 }
    61 
    62 .transcription-error-container {
    63     display: grid;
    64     gap: 0.5em;
    65     grid-template-columns: 1fr auto;
    66     align-items: center;
    67 
    68     border-left: 3px solid red;
    69 }
    70 </style>
    71 
    721<script>
    732import { mapState } from "vuex";
    … …  
    215144}
    216145</script>
     146
     147<template>
     148    <!-- Contains the file input, transcribe button and transcription progress indicator -->
     149    <div class="audio-file-picker">
     150        <div class="input-bar">
     151            <div class="text-input-sl" style="cursor: pointer;" @click="openFilePicker">
     152                <span class="text-placeholder material-icons" v-if="!anyFiles">&#xe226;</span> <!-- attach_file -->
     153                <span class="text-placeholder" v-if="!anyFiles">{{ translations.get("AudioUpload_SelectFileText") }}</span>
     154                <span v-if="anyFiles">{{ getFileNameList }}</span>
     155            </div>
     156
     157            <input ref="audioFileInput" type="file" @input="onFilesChanged"
     158                accept="audio/wav" multiple :disabled="isTranscribing" />
     159
     160            <button class="btn-primary" type="submit" :disabled="!anyFiles || isTranscribing" @click="doTranscription">
     161                <span class="material-icons">&#xEA3E;</span> <!-- history_edu -->
     162                <span>{{ translations.get("AudioUpload_TranscribeFiles") }}</span>
     163            </button>
     164        </div>
     165
     166        <div v-if="isTranscribing" class="progress-bar-container">
     167            <div class="progress-bar-value progress-bar-indeterminate" />
     168        </div>
     169
     170        <ul class="list-view" v-if="failures.size > 0">
     171            <li v-for="[id, failure] in failures" :key="failure.id" class="list-view__item transcription-error-container">
     172                <div>
     173                    {{ translations.get("AudioUpload_TranscriptionFailed_Message") }} <i v-if="failure.fileName">{{ failure.fileName }}</i><br />
     174                    <span v-if="failure.message">{{ translations.get("AudioUpload_TranscriptionFailed_Reason") }}: {{ failure.message }}</span>
     175                </div>
     176
     177                <button class="btn-fab theme-flat" @click="dismissFailure(id)">
     178                    <span class="material-icons">&#xE14C;</span> <!-- clear -->
     179                </button>
     180            </li>
     181        </ul>
     182    </div>
     183</template>
     184
     185<!-- Add "scoped" attribute to limit CSS to this component only -->
     186<style scoped lang="scss">
     187.audio-file-picker {
     188    display: flex;
     189    gap: 0.5em;
     190    flex-direction: column;
     191
     192    input {
     193        display: none;
     194    }
     195
     196    .text-container {
     197        cursor: pointer;
     198    }
     199}
     200
     201.input-bar {
     202    display: grid;
     203    align-items: stretch;
     204    gap: 0.5em;
     205    grid-template-columns: 1fr auto;
     206}
     207
     208.transcription-error-container {
     209    display: grid;
     210    gap: 0.5em;
     211    grid-template-columns: 1fr auto;
     212    align-items: center;
     213
     214    border-left: 3px solid red;
     215}
     216</style>
Note: See TracChangeset for help on using the changeset viewer.