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

File:
1 edited

Legend:

Unmodified
Added
Removed
  • 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.