From de95c5afa0f04569f0cf3c84b6b300ceedf4f78d Mon Sep 17 00:00:00 2001
From: Ruben van de Ven <git@rubenvandeven.com>
Date: Tue, 3 May 2022 10:00:27 +0200
Subject: [PATCH] tidy html

---
 app/www/annotate.html | 140 ++++++++++++++++++++++++------------------
 1 file changed, 80 insertions(+), 60 deletions(-)

diff --git a/app/www/annotate.html b/app/www/annotate.html
index dce45a2..c914e43 100644
--- a/app/www/annotate.html
+++ b/app/www/annotate.html
@@ -71,16 +71,16 @@
             background: rgba(255, 255, 255, 0.7);
         }
 
-        
-        .controls--playback{
+
+        .controls--playback {
             /* display:flex; */
         }
 
-        .timecode{
+        .timecode {
             position: absolute;
             right: 100%;
             width: 5%;
-            font-size:8px;
+            font-size: 8px;
         }
 
         .controls--playback input[type='range'] {
@@ -93,15 +93,18 @@
 
         }
 
-        .controls button.paused, .controls button.playing{
+        .controls button.paused,
+        .controls button.playing {
             position: absolute;
             left: 100%;
             width: 30px;
         }
-        .controls button.paused::before{
+
+        .controls button.paused::before {
             content: '⏵';
         }
-        .controls button.playing::before{
+
+        .controls button.playing::before {
             content: '⏸';
         }
 
@@ -132,17 +135,19 @@
             text-align: center;
         }
 
-        .tags li{
-         display: block;   
+        .tags li {
+            display: block;
         }
-        .tags .subtags{
-            padding:0;
+
+        .tags .subtags {
+            padding: 0;
             font-size: 80%;
             display: flex;
             flex-direction: row;
             flex-wrap: wrap;
         }
-        .tags .subtags .tag{
+
+        .tags .subtags .tag {
             padding: 2px;
         }
 
@@ -177,11 +182,12 @@
             pointer-events: all;
         }
 
-        .noUi-handle:focus{
+        .noUi-handle:focus {
             /* background: red;; */
             border: solid 2px #601be0;
-            
+
         }
+
         /* .noUi-handle:focus::before, .noUi-handle:focus::after{
             background: #601be0;
         } */
@@ -194,7 +200,8 @@
             vertical-align: middle;
             border-radius: 5px;
         }
-        .tags .subtags .tag span{
+
+        .tags .subtags .tag span {
             width: 10px;
             height: 10px;
             margin-right: 2px;
@@ -247,73 +254,84 @@
         .noUi-horizontal .noUi-touch-area {
             cursor: ew-resize;
         }
-        #interface .noUi-horizontal .noUi-tooltip{
+
+        #interface .noUi-horizontal .noUi-tooltip {
             /* tooltips go below the buttons */
-            bottom:auto;
-            top:110%;
+            bottom: auto;
+            top: 110%;
         }
 
-        .audioconfig{
+        .audioconfig {
             z-index: 9;
-            background:black;
+            background: black;
             color: white;
             position: relative;
-            width: 100px; /* as wide as audio controls only */
+            width: 100px;
+            /* as wide as audio controls only */
             overflow: hidden;
             white-space: nowrap;
             left: -50px;
         }
-        .audioconfig:hover{
+
+        .audioconfig:hover {
             width: auto;
             left: 0px;
         }
-        .audioconfig select, .audioconfig input{
-            margin:10px;
-        }
-        audio{
-            vertical-align: middle;
-            width: 100px; /* hides seek head */
+
+        .audioconfig select,
+        .audioconfig input {
+            margin: 10px;
         }
 
-        .playlist img{
+        audio {
+            vertical-align: middle;
+            width: 100px;
+            /* hides seek head */
+        }
+
+        .playlist img {
             position: static;
             width: 250px;
             height: 250px;
             background: white;
             display: block;
         }
-        .help{
+
+        .help {
             position: absolute;
             right: 0;
-            top:10px;
-            left:70px;
-            margin:0;
-            padding:0;
+            top: 10px;
+            left: 70px;
+            margin: 0;
+            padding: 0;
             display: flex;
             flex-direction: row;
             flex-wrap: wrap;
             font-size: 8pt;
         }
-        .help li{
+
+        .help li {
             display: inline-block;
             color: gray;
-            margin-right:10px;
+            margin-right: 10px;
             flex-grow: 1;
         }
-        .help .key{
-            padding:5px;
+
+        .help .key {
+            padding: 5px;
             background-color: aliceblue;
             border: solid 1px black;
-            color:black;
+            color: black;
             border-radius: 4px;
         }
-        #interface:not(.selected-annotation) .help .esc1{
-            display: none;
-        }
-        #interface.selected-annotation .help .esc2{
+
+        #interface:not(.selected-annotation) .help .esc1 {
             display: none;
         }
 
+        #interface.selected-annotation .help .esc2 {
+            display: none;
+        }
     </style>
     <link rel="stylesheet" href="assets/nouislider-15.5.0.css">
     <link rel="stylesheet" href="core.css">
@@ -321,21 +339,23 @@
 
 <body>
     <div id='interface'>
-            <ul class="help">
-                <li><span class='key'>Space</span> play/pause</li>
-                <li><span class='key'>Shift</span> + <span class='key'>&RightArrow;</span> Skip 1s</li>
-                <li><span class='key'>Shift</span> + <span class='key'>Ctrl</span> + <span class='key'>&RightArrow;</span> Skip 10s</li>
-                <li><span class='key'>i / o</span> set in/out-point</li>
-                <li><span class='key'>Shift</span> + <span class='key'>i / o</span> Jump to in/out-point</li>
-                <li><span class='key'>&LeftArrow; / &RightArrow;</span> Shift selected point 1s</li>
-                <li><span class='key'>PgUp/Dwn</span> Shift selected point 10s</li>
-                <li class="esc"><span class='key'>Esc</span> <span class='esc1'>Deselect annotation</span><span class="esc2">reset in & out-points</span></li>
-            </ul>
+        <ul class="help">
+            <li><span class='key'>Space</span> play/pause</li>
+            <li><span class='key'>Shift</span> + <span class='key'>&RightArrow;</span> Skip 1s</li>
+            <li><span class='key'>Shift</span> + <span class='key'>Ctrl</span> + <span class='key'>&RightArrow;</span>
+                Skip 10s</li>
+            <li><span class='key'>i / o</span> set in/out-point</li>
+            <li><span class='key'>Shift</span> + <span class='key'>i / o</span> Jump to in/out-point</li>
+            <li><span class='key'>&LeftArrow; / &RightArrow;</span> Shift selected point 1s</li>
+            <li><span class='key'>PgUp/Dwn</span> Shift selected point 10s</li>
+            <li class="esc"><span class='key'>Esc</span> <span class='esc1'>Deselect annotation</span><span
+                    class="esc2">reset in & out-points</span></li>
+        </ul>
     </div>
     <script src="assets/nouislider-15.5.0.js"></script>
     <script src="assets/wNumb-1.2.0.min.js"></script>
     <script src="annotate.js"></script>
-	<script src="playlist.js"></script>
+    <script src="playlist.js"></script>
     <script type='text/javascript'>
         let ann;
         if (location.search) {
@@ -350,12 +370,12 @@
 
 
         // Hack to disable hardware media keys starting/stopping the audio playback
-        navigator.mediaSession.setActionHandler('play', function() { /* Code excerpted. */ });
-        navigator.mediaSession.setActionHandler('pause', function() { /* Code excerpted. */ });
-        navigator.mediaSession.setActionHandler('seekbackward', function() { /* Code excerpted. */ });
-        navigator.mediaSession.setActionHandler('seekforward', function() { /* Code excerpted. */ });
-        navigator.mediaSession.setActionHandler('previoustrack', function() { /* Code excerpted. */ });
-        navigator.mediaSession.setActionHandler('nexttrack', function() { /* Code excerpted. */ });
+        navigator.mediaSession.setActionHandler('play', function () { /* Code excerpted. */ });
+        navigator.mediaSession.setActionHandler('pause', function () { /* Code excerpted. */ });
+        navigator.mediaSession.setActionHandler('seekbackward', function () { /* Code excerpted. */ });
+        navigator.mediaSession.setActionHandler('seekforward', function () { /* Code excerpted. */ });
+        navigator.mediaSession.setActionHandler('previoustrack', function () { /* Code excerpted. */ });
+        navigator.mediaSession.setActionHandler('nexttrack', function () { /* Code excerpted. */ });
     </script>
 </body>