source: main/trunk/model-interfaces-dev/atea/transform/pages/asr.xsl@ 35265

<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0"
    xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
    xmlns:java="http://xml.apache.org/xslt/java"
    xmlns:util="xalan://org.greenstone.gsdl3.util.XSLTUtil"
    xmlns:gsf="http://www.greenstone.org/greenstone3/schema/ConfigFormat"
    xmlns:gslib="http://www.greenstone.org/skinning"
    extension-element-prefixes="java util"
    exclude-result-prefixes="java util">

    <!-- use the 'main' layout -->
    <xsl:import href="layouts/main.xsl"/>

    <xsl:variable name="groupPath"><xsl:value-of select="/page/pageRequest/paramList/param[@name='group']/@value"/></xsl:variable>
    <!-- set page title -->
    <xsl:template name="pageTitle"><gslib:collectionName/></xsl:template>

    <!-- set page breadcrumbs -->
    <xsl:template name="breadcrumbs"><gslib:siteLink/><gslib:rightArrow/>
    <xsl:if test="$groupPath != ''">
      <xsl:for-each select="/page/pageResponse/pathList/group">
        <xsl:sort data-type="number" select="@position"/>
          <a>
        <xsl:attribute name="href"><gslib:groupHref path="{@path}"/></xsl:attribute>                
        <xsl:attribute name="title"><gslib:groupName path="{@path}"/></xsl:attribute>
        <gslib:groupName path="{@path}"/>
          </a>
          <gslib:rightArrow/>
      </xsl:for-each>
    </xsl:if>
    </xsl:template>

    <!-- the page content -->
    <xsl:template match="/page">
        <xsl:call-template name="audio-upload"/>
    </xsl:template>
    
    <!-- Template for processing audio file uploads -->
    <xsl:template name="audio-upload">
        <link href="interfaces/{$interface_name}/style/asr.css" rel="stylesheet" type="text/css" />
        <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />

        <div class="paper">
            <div>
                <form onSubmit="doAudioUpload(); return false;" enctype="multipart/form-data">
                    <input id="fileUpload" type="file" accept="audio/wav" multiple="multiple" />
                    <button id="btnFileUpload" type="submit" disabled="disabled">Transcribe</button>
                </form>
            </div>
    
            <div class="audio-slider__container">
                <button type="button" class="btn-fab btn-fab-small">
                    <span class="material-icons">&#xE037;</span> <!-- play_arrow -->
                </button>
                <input type="range" min="0" value="0" class="audio-slider__range" />
                <span class="audio-slider__value">1:23</span>
            </div>
    
            <div id="prgFileUploadContainer" class="asr-hidden">
                <label for="prgFileUpload">Processing:</label>
                <progress id="prgFileUpload" />
            </div>
    
            <div id="transcriptionsDisplayContainer">
                <audio id="transcriptionAudio">
                    <source id="transcriptionAudioSource" />
                </audio>
    
                <ul id="transcriptionsList" class="transcription__list"></ul>
    
                <template id="transcriptionTemplate">
                    <li class="transcription__container">
                        <div class="transcription__header">
                            <button class="btn-fab transcription__play-button" type="button">
                                <span class="material-icons">&#xE037;</span> <!-- play_arrow -->
                            </button>
                            <button class="btn-fab transcription__remove-button" type="button">
                                <span class="material-icons">&#xE872;</span> <!-- delete -->
                            </button>
                            <p class="transcription__file-name"></p>    
                        </div>
                        <details>
                            <summary>Character Information</summary>
                            <div class="metadata-list-container">
                                <ul class="metadata-list"></ul>
                            </div>
                            <div class="audio-slider-container">
                                <input type="range" min="0" value="0" class="audio-slider" />
                            </div>
                        </details>
                        <hr class="divider" />
                    </li>
                </template>
    
                <template id="errorTemplate">
                    <li class="error-list-item">
                        <div>
                            <div class="spaced-block">
                                <b>Transcription Failed: </b><span></span>
                            </div>
                            <div class="spaced-block">
                                <b>File: </b><span></span>
                            </div>
                        </div>
                    </li>
                </template>
    
                <template id="metadataTemplate">
                    <!-- <li class="metadata-list-item tooltip-parent tooltip">
                        <div class="spaced-block">
                            <p></p>
                        </div>
                        <div class="spaced-block">
                            <button type="button"><img src="interfaces/{$interface_name}/assets/play_arrow_black_18dp.svg" /></button>
                        </div>
                        <div class="tooltip-wrapper">
                            <span class="tooltip">0.02</span>
                        </div>
                    </li> -->
                    <li class="metadata-list-item">
                        <div class="spaced-block">
                            <p></p>
                        </div>
                        <div class="spaced-block">
                            <button type="button"><img src="interfaces/{$interface_name}/assets/play_arrow_black_18dp.svg" /></button>
                        </div>
                    </li>
                </template>
            </div>
        </div>
        
        <gsf:script src="interfaces/{$interface_name}/js/asr/asr-controller.js"></gsf:script>
    </xsl:template>

</xsl:stylesheet>