tidy html

app/www/annotate.html

@@ -72,15 +72,15 @@
         }
 
 
-        .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{
+        .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,33 +254,42 @@
         .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;
-        }
-        .audioconfig:hover{
-            width: auto;
-        }
-        .audioconfig select, .audioconfig input{
-            margin:10px;
-        }
-        audio{
-            vertical-align: middle;
-            width: 100px; /* hides seek head */
+            left: -50px;
         }
 
-        .playlist img{
+        .audioconfig:hover {
+            width: auto;
+            left: 0px;
+        }
+
+        .audioconfig select,
+        .audioconfig input {
+            margin: 10px;
+        }
+
+        audio {
+            vertical-align: middle;
+            width: 100px;
+            /* hides seek head */
+        }
+
+        .playlist img {
             position: static;
             width: 250px;
             height: 250px;
@@ -281,6 +297,41 @@
             display: block;
         }
 
+        .help {
+            position: absolute;
+            right: 0;
+            top: 10px;
+            left: 70px;
+            margin: 0;
+            padding: 0;
+            display: flex;
+            flex-direction: row;
+            flex-wrap: wrap;
+            font-size: 8pt;
+        }
+
+        .help li {
+            display: inline-block;
+            color: gray;
+            margin-right: 10px;
+            flex-grow: 1;
+        }
+
+        .help .key {
+            padding: 5px;
+            background-color: aliceblue;
+            border: solid 1px black;
+            color: black;
+            border-radius: 4px;
+        }
+
+        #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">
@@ -288,6 +339,18 @@
 
 <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>
     </div>
     <script src="assets/nouislider-15.5.0.js"></script>
     <script src="assets/wNumb-1.2.0.min.js"></script>
@@ -307,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>
 

app/www/annotate.js

@@ -525,6 +525,7 @@ class Annotator extends EventTarget {
                 'max': sliderMax,
             },
             keyboardDefaultStep: (sliderMax - sliderMin) / 1000,
+            keyboardPageMultiplier: 10, // page up/down 10s
             tooltips: [
                 this.formatter,
                 this.formatter
@@ -664,13 +665,15 @@ class Annotator extends EventTarget {
                 if (ev.key == 'ArrowLeft' && ev.shiftKey) {
                     const p = this._paused;
                     console.log(p);
-                    this.scrubTo(this._currentTimeMs - 1000);
+                    const diff = ev.ctrlKey ? 10000 : 1000;
+                    this.scrubTo(this._currentTimeMs - diff);
                     if (!p) { console.log('play!'); this.play(); } // scrubTo() causes a pause();
                 }
                 if (ev.key == 'ArrowRight' && ev.shiftKey) {
                     const p = this._paused;
                     console.log(p);
-                    this.scrubTo(this._currentTimeMs + 1000);
+                    const diff = ev.ctrlKey ? 10000 : 1000;
+                    this.scrubTo(this._currentTimeMs + diff);
                     if (!p) { console.log('play!'); this.play(); } // scrubTo() causes a pause();
                 }
             });