security_vision/chronodiagram
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

More keyboard input, and no reset on pause()

Browse source
This commit is contained in:
Ruben van de Ven 2022-05-02 22:41:37 +02:00
parent 4a0d605595
commit 111bfeeb7a
1 changed files with 63 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

67
app/www/annotate.js
View file

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