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

<?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"
    xmlns:v-bind="http://vuejs.org"
    xmlns:v-on="http://vuejs.org"
    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-transcription"/>
    </xsl:template>

    <!-- <xsl:attribute-set name="vue">
        <xsl:attribute name="v-on" />
        <xsl:attribute name="v-bind" />
    </xsl:attribute-set> -->
    
    <!-- Template for processing audio file uploads -->
    <xsl:template name="audio-transcription">
        <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
        <link href="interfaces/{$interface_name}/style/asr.css" rel="stylesheet" type="text/css" />

        <section id="audio-transcription-container" class="paper">
            <!-- Used to calculate the character size of our monospace font -->
            <span class="monospace-font-size">ngā tama a rangi</span>

            <!-- Contains the file input, transcribe button and transcription progress indicator -->
            <div id="audioUploadContainer">
                <button type="button" v-on:click="openFilePicker"
                        v-bind:disabled="isTranscribing">
                    <span class="material-icons">&#xE2C6;</span> <!-- file_upload -->
                    <span>Upload Audio Files</span>
                </button>

                <input id="audioFileInput" type="file" v-on:input="onFilesChanged"
                       accept="audio/wav" multiple="multiple" v-bind:disabled="isTranscribing" />

                <button style="float: right;" type="submit"
                        v-bind:disabled="!canTranscribe" v-on:click="doTranscription">
                    <span class="material-icons">&#xEA3E;</span> <!-- history_edu -->
                    <span>Transcribe</span>
                </button>

                <progress v-if="isTranscribing" class="indeterminateLoadingBar" />
            </div>
    
            <!-- Contains the audio element and transcription list -->
            <div id="transcriptionsDisplayContainer">

                <audio id="transcriptionAudio">
                    <source id="transcriptionAudioSource" />
                </audio>

                <ul class="transcription__list">
                    <li v-for="transcription in transcriptions" class="transcription__container">
                        {{ transcription.transcription }}
                    </li>
                    <li v-for="failure in failures" class="transcription__error-container">
                        Failed to transcribe <i v-if="failure.file">{{ failure.file }}</i><br/>
                        <span v-if="failure.message">Reason:    {{ failure.message }}</span>
                    </li>
                </ul>

                <ul class="transcription__list">
                    
                </ul>
    
                <!-- <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 theme-flat" type="button">
                                <span class="material-icons">&#xE037;</span> <!-- play_arrow -->
                            </button>
                            <button class="btn-fab transcription__remove-button theme-error" type="button">
                                <span class="material-icons">&#xE872;</span> <!-- delete -->
                            </button>
                            <p class="transcription__text"></p>
                            <p class="body2 transcription__file-name">test</p>
                        </div>

                        <gsf:div class="transcription__word-list" id="transcriptionWordList">
                            <ul class="transcription__list">
                                <li v-for="line in lines" style="display: flex">
                                    <span v-for="word in line.words" style="border: 1px solid blue">{{ word }}</span>
                                </li>
                            </ul>
                        </gsf:div>
                        
                        <div class="audio-slider-container">
                            <input type="range" min="0" value="0" class="audio-slider" />
                        </div>

                        <hr class="divider" />

                    </li>
                </template>
            </div>

            <!-- <div class="audio-slider__container">
                <button type="button" class="btn-fab">
                    <span class="material-icons mdi-xl">&#xE037;</span>
                </button>
                <input type="range" min="0" value="0" class="audio-slider__range" />
                <span class="audio-slider__value">1:23</span>
            </div> -->
        </section>
        
        <!-- TODO: Switch to production version for release builds -->
        <gsf:script src="https://unpkg.com/vue@next"></gsf:script>
        <gsf:script src="interfaces/{$interface_name}/js/asr/asr-controller.js" type="module"></gsf:script>
        <!-- <script type="module" src="interfaces/{$interface_name}/js/asr/asr-controller.js">
            <xsl:comment>Filler</xsl:comment>>
        </script> -->
    </xsl:template>

</xsl:stylesheet>