Ignore:
Timestamp:
2021-08-06T14:38:41+12:00 (3 years ago)
Author:
davidb
Message:

Audio slider styling and refactor audio loading to separate function

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

Legend:

Unmodified
Added
Removed

  • main/trunk/model-interfaces-dev/atea/js/asr/TranscribeService.js

    r35259 r35261  
    3838    {
    3939        /** @type {String} The URL to which query POST requests should be made. */
    40         this.queryUrl = "/gs3-koreromaori/transcribe";
     40        this.queryUrl = "/gs3-koreromaori/transcribe/test";
    4141
    4242        /** @type {Number} The maximum number of files which can be transcribed in one request to the API. */

  • main/trunk/model-interfaces-dev/atea/js/asr/asr-controller.js

    r35259 r35261  
    4646
    4747/** @type {HTMLAudioElement} */
    48 const transcriptionAudioElement = document.getElementById("transcriptionAudio");
     48const TRANSCRIPTION_AUDIO_ELEMENT = document.getElementById("transcriptionAudio");
    4949
    5050/** @type {HTMLSourceElement} */
    51 const transcriptionAudioSourceElement = document.getElementById("transcriptionAudioSource");
     51const TRANSCRIPTION_AUDIO_SOURCE_ELEMENT = document.getElementById("transcriptionAudioSource");
    5252
    5353let cachedAudioFileList = new Map();
    … …  
    9797
    9898/** @type {HTMLUListElement} */
    99 const transcriptionsList = document.getElementById("transcriptionsList");
     99const TRANSCRIPTIONS_LIST = document.getElementById("transcriptionsList");
    100100
    101101/**
    … …  
    105105{
    106106    cachedAudioFileList = new Map();
    107     while (transcriptionsList.lastChild) {
    108         transcriptionsList.removeChild(transcriptionsList.lastChild);
     107    while (TRANSCRIPTIONS_LIST.lastChild) {
     108        TRANSCRIPTIONS_LIST.removeChild(TRANSCRIPTIONS_LIST.lastChild);
    109109    }
    110110}
    … …  
    128128    spans[0].textContent = transcription.file_name;
    129129    spans[1].textContent = transcription.transcription;
     130
     131    // Get the scroll button
     132    /** @type {HTMLButtonElement} */
     133    const scrollButton = clone.querySelector("button");
    130134   
    131135    // Get the metadata list and template
    132136    /** @type {HTMLUListElement} */
    133137    const metadataList = clone.querySelector("#metadataList");
     138
     139    scrollButton.onclick = function() {
     140        metadataList.scrollLeft = 200;
     141    }
     142
     143    // Prepare the audio slider
     144    loadAudioFile(transcription.file_name);
     145    /** @type {HTMLInputElement} */
     146    const audioSlider = clone.querySelector(".audio-slider");
     147    audioSlider.max = TRANSCRIPTION_AUDIO_ELEMENT.duration;
     148    audioSlider.step = 0.01;
    134149   
    135150    // Insert metadata rows
    … …  
    138153    }
    139154   
    140     transcriptionsList.appendChild(clone);
     155    TRANSCRIPTIONS_LIST.appendChild(clone);
    141156}
    142157
    … …  
    166181        // Have to traverse the event path, because the event target is the child element of the button.
    167182        const requestedAudioFile = e.composedPath().find((t) => t instanceof HTMLButtonElement).dataset.fileName;
    168         const currentAudioFile = transcriptionAudioSourceElement.dataset.fileName;
    169 
    170         // Load the appropiate audio if necessary.
    171         if (currentAudioFile != requestedAudioFile)
    172         {
    173             if (currentAudioFile) {
    174                 URL.revokeObjectURL(currentAudioFile);
    175             }
    176 
    177             const urlObject = URL.createObjectURL(cachedAudioFileList.get(requestedAudioFile));
    178             transcriptionAudioSourceElement.src = urlObject;
    179             transcriptionAudioSourceElement.dataset.fileName = requestedAudioFile;
    180             transcriptionAudioElement.load();
    181         }
    182 
    183         transcriptionAudioElement.currentTime = metadata.start_time;
    184         transcriptionAudioElement.play();
     183        loadAudioFile(requestedAudioFile);
     184
     185        TRANSCRIPTION_AUDIO_ELEMENT.currentTime = metadata.start_time;
     186        TRANSCRIPTION_AUDIO_ELEMENT.play();
    185187    }
    186188   
    … …  
    193195
    194196    return metadataClone;
     197}
     198
     199/**
     200 * Loads an audio file.
     201 * @param {String} requestedAudioFile The name of the requested audio file.
     202 */
     203function loadAudioFile(requestedAudioFile)
     204{
     205    const currentAudioFile = TRANSCRIPTION_AUDIO_SOURCE_ELEMENT.dataset.fileName;
     206
     207    // Load the appropiate audio if necessary.
     208    if (currentAudioFile != requestedAudioFile)
     209    {
     210        // If an audio file is already loaded we can revoke it.
     211        if (currentAudioFile) {
     212            URL.revokeObjectURL(currentAudioFile);
     213        }
     214
     215        const urlObject = URL.createObjectURL(cachedAudioFileList.get(requestedAudioFile));
     216        TRANSCRIPTION_AUDIO_SOURCE_ELEMENT.src = urlObject;
     217        TRANSCRIPTION_AUDIO_SOURCE_ELEMENT.dataset.fileName = requestedAudioFile;
     218        TRANSCRIPTION_AUDIO_ELEMENT.load();
     219    }
    195220}
    196221
    … …  
    213238    spans[1].textContent = fileName;
    214239   
    215     transcriptionsList.appendChild(clone);
     240    TRANSCRIPTIONS_LIST.appendChild(clone);
    216241}
    217242
    … …  
    240265});
    241266
    242 // $(function() {
    243    
    244 // });
     267function get

  • main/trunk/model-interfaces-dev/atea/style/asr.css

    r35258 r35261  
    9999}
    100100
     101/* Audio slider element */
     102
     103.audio-slider__container {
     104    padding: 8px;
     105    margin: 0;
     106}
     107
     108.audio-slider__range {
     109    /* Override user-agent default styles */
     110    -webkit-appearance: none;
     111    appearance: none;
     112
     113    width: 80%;
     114    height: 8px;
     115    margin: 0;
     116    padding: 0;
     117    border-radius: 4px;
     118    background: #d3d3d3;
     119    outline: none;
     120
     121    /* For a visual cue on mouseover */
     122    opacity: 0.7;
     123    -webkit-transition-duration: 0.2s;
     124    transition-duration: 0.2s;
     125}
     126
     127.audio-slider__range:hover {
     128    opacity: 1;
     129}
     130
     131.audio-slider__value {
     132    display: inline-block;
     133    position: relative;
     134    background-color: rgb(85, 95, 100);
     135    color: white;
     136    text-align: center;
     137    border-radius: 3px;
     138    padding: 5px 10px;
     139    margin-left: 8px;
     140    width: 300;
     141}
     142
     143.audio-slider__value::after {
     144    position: absolute;
     145    top: 8px;
     146    left: -7px;
     147    width: 0;
     148    height: 0;
     149    border-top: 7px solid transparent;
     150    border-right: 7px solid rgb(85, 95, 100);
     151    border-bottom: 7px solid transparent;
     152    content: '';
     153}
     154
     155.audio-slider__play-button {
     156    vertical-align: middle;
     157    background-color: #21bbc0;
     158    border: none;
     159    border-radius: 16px;
     160    height: 32px;
     161    width: 32px;
     162    box-shadow: 0px 0px 2px 0px #0a2e4d;
     163
     164    -webkit-transition-duration: 0.2s;
     165    transition-duration: 0.2s;
     166}
     167
     168#transcriptionAudio {
     169    width: 100%;
     170}
     171
     172.audio-slider__play-button:hover {
     173    box-shadow: 0px 0px 4px 0px #0a2e4d;
     174}
     175
     176/* Details element */
     177
    101178details {
    102179    border: 1px solid #aaa;

  • main/trunk/model-interfaces-dev/atea/transform/pages/asr.xsl

    r35259 r35261  
    11<?xml version="1.0" encoding="UTF-8"?>
    22<xsl:stylesheet version="1.0"
    3     xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
    4     xmlns:java="http://xml.apache.org/xslt/java"
    5     xmlns:util="xalan://org.greenstone.gsdl3.util.XSLTUtil"
     3    xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
     4    xmlns:java="http://xml.apache.org/xslt/java"
     5    xmlns:util="xalan://org.greenstone.gsdl3.util.XSLTUtil"
    66    xmlns:gsf="http://www.greenstone.org/greenstone3/schema/ConfigFormat"
    7     xmlns:gslib="http://www.greenstone.org/skinning"
    8     extension-element-prefixes="java util"
    9     exclude-result-prefixes="java util">
     7    xmlns:gslib="http://www.greenstone.org/skinning"
     8    extension-element-prefixes="java util"
     9    exclude-result-prefixes="java util">
    1010
    11     <!-- use the 'main' layout -->
    12     <xsl:import href="layouts/main.xsl"/>
     11    <!-- use the 'main' layout -->
     12    <xsl:import href="layouts/main.xsl"/>
    1313
    14     <xsl:variable name="groupPath"><xsl:value-of select="/page/pageRequest/paramList/param[@name='group']/@value"/></xsl:variable>
    15     <!-- set page title -->
    16     <xsl:template name="pageTitle"><gslib:collectionName/></xsl:template>
     14    <xsl:variable name="groupPath"><xsl:value-of select="/page/pageRequest/paramList/param[@name='group']/@value"/></xsl:variable>
     15    <!-- set page title -->
     16    <xsl:template name="pageTitle"><gslib:collectionName/></xsl:template>
    1717
    18     <!-- set page breadcrumbs -->
    19     <xsl:template name="breadcrumbs"><gslib:siteLink/><gslib:rightArrow/>
    20     <xsl:if test="$groupPath != ''">
    21       <xsl:for-each select="/page/pageResponse/pathList/group">
    22         <xsl:sort data-type="number" select="@position"/>
    23           <a>
    24         <xsl:attribute name="href"><gslib:groupHref path="{@path}"/></xsl:attribute>               
    25         <xsl:attribute name="title"><gslib:groupName path="{@path}"/></xsl:attribute>
    26         <gslib:groupName path="{@path}"/>
    27           </a>
    28           <gslib:rightArrow/>
    29       </xsl:for-each>
    30     </xsl:if>
    31     </xsl:template>
     18    <!-- set page breadcrumbs -->
     19    <xsl:template name="breadcrumbs"><gslib:siteLink/><gslib:rightArrow/>
     20    <xsl:if test="$groupPath != ''">
     21      <xsl:for-each select="/page/pageResponse/pathList/group">
     22        <xsl:sort data-type="number" select="@position"/>
     23          <a>
     24        <xsl:attribute name="href"><gslib:groupHref path="{@path}"/></xsl:attribute>               
     25        <xsl:attribute name="title"><gslib:groupName path="{@path}"/></xsl:attribute>
     26        <gslib:groupName path="{@path}"/>
     27          </a>
     28          <gslib:rightArrow/>
     29      </xsl:for-each>
     30    </xsl:if>
     31    </xsl:template>
    3232
    33     <!-- the page content -->
    34     <xsl:template match="/page">
    35         <xsl:call-template name="audio-upload"/>
    36     </xsl:template>
    37    
     33    <!-- the page content -->
     34    <xsl:template match="/page">
     35        <xsl:call-template name="audio-upload"/>
     36    </xsl:template>
     37   
    3838    <!-- Template for processing audio file uploads -->
    39     <xsl:template name="audio-upload">
     39    <xsl:template name="audio-upload">
    4040        <link href="interfaces/{$interface_name}/style/asr.css" rel="stylesheet" type="text/css" />
    4141       
    42         <div>
     42        <div>
    4343            <form onSubmit="    doAudioUpload(); return false;" enctype="multipart/form-data">
    44                 <label for="fileUpload">Audio File:</label>
     44                <label for="fileUpload">Audio File:</label>
    4545                <input id="fileUpload" type="file" accept="audio/wav" multiple="multiple" />
    4646                <button id="btnFileUpload" type="submit" disabled="disabled">Transcribe</button>
    … …  
    4848        </div>
    4949
    50         <div id="prgFileUploadContainer" class="asr-hidden">
    51             <label for="prgFileUpload">Processing:</label>
    52             <progress id="prgFileUpload" />
    53         </div>
     50        <div class="audio-slider__container">
     51            <button type="button" class="audio-slider__play-button">
     52                <img src="interfaces/{$interface_name}/assets/play_arrow_black_18dp.svg" />
     53            </button>
     54            <input type="range" min="0" value="0" class="audio-slider__range" />
     55            <span class="audio-slider__value">1:23</span>
     56        </div>
     57
     58        <div id="prgFileUploadContainer" class="asr-hidden">
     59            <label for="prgFileUpload">Processing:</label>
     60            <progress id="prgFileUpload" />
     61        </div>
    5462
    5563        <div id="transcriptionsDisplayContainer">
    56             <audio id="transcriptionAudio">
    57                 <source id="transcriptionAudioSource" />
    58             </audio>
     64            <audio id="transcriptionAudio" controls="controls">
     65                <source id="transcriptionAudioSource" />
     66            </audio>
    5967
    60             <ul id="transcriptionsList" class="transcription-list"></ul>
     68            <ul id="transcriptionsList" class="transcription-list"></ul>
    6169
    62             <template id="transcriptionTemplate">
    63                 <li class="transcription-list-item">
    64                     <div>
    65                         <div class="spaced-block">
    66                             <b>File: </b><span></span>
    67                         </div>
    68                         <div class="spaced-block">
    69                             <b>Transcription: </b><span></span>
    70                         </div>
    71                         <details>
    72                             <summary>Character Information</summary>
    73                             <div class="metadata-list-container">
    74                                 <ul id="metadataList" class="metadata-list"></ul>
    75                             </div>
    76                         </details>
    77                     </div>
    78                 </li>
    79             </template>
     70            <template id="transcriptionTemplate">
     71                <li class="transcription-list-item">
     72                    <div>
     73                        <button class="close-button"></button>
     74                        <div class="spaced-block">
     75                            <b>File: </b><span></span>
     76                        </div>
     77                        <div class="spaced-block">
     78                            <b>Transcription: </b><span></span>
     79                        </div>
     80                        <details>
     81                            <summary>Character Information</summary>
     82                            <button>Scroll Left</button>
     83                            <div class="metadata-list-container">
     84                                <ul id="metadataList" class="metadata-list"></ul>
     85                            </div>
     86                            <div class="audio-slider-container">
     87                                <input type="range" min="0" value="0" class="audio-slider" />
     88                            </div>
     89                        </details>
     90                    </div>
     91                </li>
     92            </template>
    8093
    81             <template id="errorTemplate">
    82                 <li class="error-list-item">
    83                     <div>
    84                         <div class="spaced-block">
    85                             <b>Transcription Failed: </b><span></span>
    86                         </div>
    87                         <div class="spaced-block">
    88                             <b>File: </b><span></span>
    89                         </div>
    90                     </div>
    91                 </li>
    92             </template>
     94            <template id="errorTemplate">
     95                <li class="error-list-item">
     96                    <div>
     97                        <div class="spaced-block">
     98                            <b>Transcription Failed: </b><span></span>
     99                        </div>
     100                        <div class="spaced-block">
     101                            <b>File: </b><span></span>
     102                        </div>
     103                    </div>
     104                </li>
     105            </template>
    93106
    94             <template id="metadataTemplate">
    95                 <!-- <li class="metadata-list-item tooltip-parent tooltip">
    96                     <div class="spaced-block">
    97                         <p></p>
    98                     </div>
    99                     <div class="spaced-block">
    100                         <button type="button"><img src="interfaces/{$interface_name}/assets/play_arrow_black_18dp.svg" /></button>
    101                     </div>
    102                     <div class="tooltip-wrapper">
    103                         <span class="tooltip">0.02</span>
    104                     </div>
    105                 </li> -->
    106                 <li class="metadata-list-item">
    107                     <div class="spaced-block">
    108                         <p></p>
    109                     </div>
    110                     <div class="spaced-block">
    111                         <button type="button"><img src="interfaces/{$interface_name}/assets/play_arrow_black_18dp.svg" /></button>
    112                     </div>
    113                 </li>
    114             </template>
     107            <template id="metadataTemplate">
     108                <!-- <li class="metadata-list-item tooltip-parent tooltip">
     109                    <div class="spaced-block">
     110                        <p></p>
     111                    </div>
     112                    <div class="spaced-block">
     113                        <button type="button"><img src="interfaces/{$interface_name}/assets/play_arrow_black_18dp.svg" /></button>
     114                    </div>
     115                    <div class="tooltip-wrapper">
     116                        <span class="tooltip">0.02</span>
     117                    </div>
     118                </li> -->
     119                <li class="metadata-list-item">
     120                    <div class="spaced-block">
     121                        <p></p>
     122                    </div>
     123                    <div class="spaced-block">
     124                        <button type="button"><img src="interfaces/{$interface_name}/assets/play_arrow_black_18dp.svg" /></button>
     125                    </div>
     126                </li>
     127            </template>
    115128        </div>
    116129       
    117130        <gsf:script src="interfaces/{$interface_name}/js/asr/asr-controller.js"></gsf:script>
    118     </xsl:template>
     131    </xsl:template>
    119132
    120133</xsl:stylesheet> 
Note: See TracChangeset for help on using the changeset viewer.