Changeset 36197

Timestamp:

2022-05-19T14:00:48+12:00 (2 years ago)

Author:

davidb

Message:

audio player improvements

File:

• main/trunk/model-sites-dev/atea/collect/tiriana-audio/transform/pages/document.xsl (modified) (2 diffs)

main/trunk/model-sites-dev/atea/collect/tiriana-audio/transform/pages/document.xsl

@@ -42 +42 @@
         <script type="text/javascript" src="https://unpkg.com/wavesurfer.js/dist/plugin/wavesurfer.regions.min.js"><xsl:text> </xsl:text></script>
         <script type="text/javascript" src="https://unpkg.com/wavesurfer.js/dist/plugin/wavesurfer.timeline.min.js"><xsl:text> </xsl:text></script>
+        <script type="text/javascript" src="https://unpkg.com/wavesurfer.js/dist/plugin/wavesurfer.cursor.min.js"><xsl:text> </xsl:text></script>
         <script type="text/javascript" src="https://d3js.org/colorbrewer.v1.min.js"><xsl:text> </xsl:text></script>
 
@@ -48 +49 @@
             <div id="wave-timeline"><text></text></div>
             <div id="toolbar">
-                <div class="flex-leftalign" id="zoom-section">
+                <div class="flex-leftalign toolbar-section">
                     <img src="interfaces/{$interface_name}/images/bootstrap/zoom-out.svg" id="zoomIcon" class="noHover" />
-                    <input type="range" min="1" max="100" value="0" id="slider" />
+                    <input type="range" min="1" max="100" value="25" id="slider" />
                     <img src="interfaces/{$interface_name}/images/bootstrap/zoom-in.svg" id="zoomIcon" class="noHover" />
                 </div>
-                <img src="interfaces/{$interface_name}/images/bootstrap/back.svg" id="backButton" />
-                <img src="interfaces/{$interface_name}/images/bootstrap/play.svg" id="playPauseButton" />
-                <img src="interfaces/{$interface_name}/images/bootstrap/forward.svg" id="forwardButton" />
-                <img src="interfaces/{$interface_name}/images/bootstrap/unmute.svg" id="muteButton" />
+                <div class="flex-centeralign toolbar-section">
+                    <img src="interfaces/{$interface_name}/images/bootstrap/back.svg" id="backButton" />
+                    <img src="interfaces/{$interface_name}/images/bootstrap/play.svg" id="playPauseButton" />
+                    <img src="interfaces/{$interface_name}/images/bootstrap/forward.svg" id="forwardButton" />
+                </div>
+                <div class="flex-rightalign toolbar-section">
+                    <img src="interfaces/{$interface_name}/images/bootstrap/chapters.svg" id="chapterButton" />
+                    <img src="interfaces/{$interface_name}/images/bootstrap/unmute.svg" id="muteButton" />
+                </div>
             </div>
-            <img src="interfaces/{$interface_name}/images/bootstrap/chapters.svg" id="chapterButton" />
             <div id="chapters"></div>
         </div>