From 111bfeeb7a07dacd9c0dfa3780271b1bae833f00 Mon Sep 17 00:00:00 2001
From: Ruben van de Ven <git@rubenvandeven.com>
Date: Mon, 2 May 2022 22:41:37 +0200
Subject: [PATCH] More keyboard input, and no reset on pause()

---
 app/www/annotate.js | 67 ++++++++++++++++++++++++++++++++++++++++++---
 1 file changed, 63 insertions(+), 4 deletions(-)

diff --git a/app/www/annotate.js b/app/www/annotate.js
index 0f00b39..04573ab 100644
--- a/app/www/annotate.js
+++ b/app/www/annotate.js
@@ -160,6 +160,9 @@ class Annotator extends EventTarget {
 
         this.playheadEl.addEventListener("input", (ev) => {
             this.scrubTo(ev.target.value);
+        });
+        this.playheadEl.addEventListener('keydown',(ev) => {
+            ev.preventDefault(); // we don't want to use arrow keys, as these are captured in the overall keydown event
         })
 
         this.timeCodeEl = document.createElement('input');
@@ -201,7 +204,7 @@ class Annotator extends EventTarget {
                     });
 
                     tagEl.title = tagData.hasOwnProperty('description') ? tagData.description : "";
-                    
+
                     let signEl = document.createElement('span');
                     signEl.classList.add('annotation-' + tag);
                     signEl.style.backgroundColor = this.getColorForTag(tag);
@@ -209,7 +212,7 @@ class Annotator extends EventTarget {
 
                     tagLiEl.appendChild(tagEl);
 
-                    if(tagData.hasOwnProperty('sub')){
+                    if (tagData.hasOwnProperty('sub')) {
                         const subEl = document.createElement('ul');
                         subEl.classList.add('subtags');
                         addTags(tagData.sub, subEl);
@@ -356,6 +359,26 @@ class Annotator extends EventTarget {
         this.updateAnnotations(false); // selects the right tag & highlights the annotation
     }
 
+    setInPoint(time_ms) {
+        this.setInOutPoint(time_ms, this.outPointTimeMs);
+    }
+    setOutPoint(time_ms) {
+        this.setInOutPoint(this.inPointTimeMs, time_ms);
+    }
+
+    setInOutPoint(in_ms, out_ms) {
+        this.inPointPosition = this.findPositionForTime(in_ms);
+        this.inPointTimeMs = in_ms;
+        this.outPointPosition = this.findPositionForTime(out_ms);
+        this.outPointTimeMs = out_ms;
+        // this._seekByTimeMs(this.audioOffset < 0 ? this.audioOffset * 1000 : 0);
+        // draw full stroke of annotation
+        console.log('setInOut');
+        this.drawStrokePosition(this.inPointPosition, this.outPointPosition);
+        console.log([`${this.inPointTimeMs}`, `${this.outPointTimeMs}`])
+        this.slider.set([this.inPointTimeMs, this.outPointTimeMs]);
+    }
+
     resetInOutPoint() {
         this.inPointPosition = [0, 0];
         this.inPointTimeMs = null;
@@ -610,6 +633,21 @@ class Annotator extends EventTarget {
                 if (ev.key == ' ') {
                     this.playPause();
                 }
+                console.log('key', ev);
+                if (ev.key == 'i') {
+                    this.setInPoint(this.currentTime * 1000);
+                }
+                if (ev.key == 'o') {
+                    this.setOutPoint(this.currentTime * 1000);
+                }
+                if (ev.key == 'I') {
+                    // shift+i == jump to in point
+                    this.scrubTo(this.inPointTimeMs);
+                }
+                if (ev.key == 'O') {
+                    // shift+o == jump to end point
+                    this.scrubTo(this.outPointTimeMs);
+                }
                 if (ev.key == 'Escape') {
                     if (this.selectedAnnotation) {
                         this.deselectAnnotation();
@@ -617,6 +655,21 @@ class Annotator extends EventTarget {
                         this.resetInOutPoint();
                     }
                 }
+                // shift+arrow keys, jump playhead (search position)
+                // FIXME doesn't keep playback after initial load. Only after unfocussing the window, and refocussing it, do the keys capture.
+                // Probably a wrong order
+                if (ev.key == 'ArrowLeft' && ev.shiftKey) {
+                    const p = this._paused;
+                    console.log(p);
+                    this.scrubTo(this._currentTimeMs - 1000);
+                    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);
+                    if (!p) { console.log('play!'); this.play(); } // scrubTo() causes a pause();
+                }
             });
         });
 
@@ -980,7 +1033,12 @@ class Annotator extends EventTarget {
     play() {
         return new Promise((resolve, reject) => {
             this._interruptPlayback();
-            this._seekByTimeMs(this._currentTimeMs); // prevent playback issue for initial load
+
+            if (this._currentTimeMs > this.outPointTimeMs) {
+                this._seekByTimeMs(this.inPointTimeMs);
+            } else {
+                this._seekByTimeMs(this._currentTimeMs); // prevent playback issue for initial load
+            }
 
             this.startTimeMs = window.performance.now() - this._currentTimeMs;
             // strokes
@@ -1025,6 +1083,7 @@ class Annotator extends EventTarget {
     }
 
 
+    // on playback, run every windowAnimationFrame
     _animationFrame(timestamp) {
         // TODO, move time at end of playStrokePosition to here
         const nextTime = window.performance.now() - this.startTimeMs;
@@ -1042,7 +1101,7 @@ class Annotator extends EventTarget {
         } else {
             console.debug('finished playback');
             this._interruptPlayback(true);
-            this.resetPlayhead();
+            // this.resetPlayhead(); // Disable to not jump to start on pause. TODO: check if this causes issues e.g. on end
         }
     }