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 } }