chronodiagram/app/www/annotate.js

class Annotation {
    constructor(tag, t_in, t_out, comment) {
        this.tag = tag;
        this.t_in = Number.parseFloat(t_in);
        this.t_out = Number.parseFloat(t_out);
        this.comment = comment;
    }
}

class StrokeGroup {
    constructor(group_element, player) {
        this.g = group_element;
        this.player = player;
    }

    setStrokes(strokes) {
        const pathEls = this.g.querySelectorAll('path');
        let indexes = Object.keys(strokes);
        for (let pathEl of pathEls) {
            const i = pathEl.dataset.path_i;
            if (!indexes.includes(pathEl.dataset.path_i)) {
                pathEl.parentNode.removeChild(pathEl);
            } else {
                // check in and outpoint using pathEl.dataset
                if (strokes[i].getSliceId() != pathEl.dataset.slice) {
                    const d = this.points2D(strokes[i].points);
                    pathEl.dataset.slice = strokes[i].getSliceId();
                    pathEl.setAttribute('d', d);
                }
            }

            // this has now been processed
            indexes.splice(indexes.indexOf(i), 1);
        }

        // new strokes
        indexes.forEach(index => {
            const stroke = strokes[index];

            let pathEl = document.createElementNS('http://www.w3.org/2000/svg', 'path');
            pathEl.style.stroke = stroke.color;
            pathEl.classList.add('path');
            pathEl.dataset.path_i = index;
            pathEl.dataset.slice = stroke.getSliceId();
            this.g.appendChild(pathEl);

            const d = this.points2D(stroke.points);
            pathEl.setAttribute('d', d);
        });
    }

    // convert array of points to a d-attribute
    points2D(strokes) {
        // strokes to a d attribute for a path
        let d = "";
        let last_stroke = undefined;
        let cmd = "";
        for (let stroke of strokes) {
            if (!last_stroke) {
                d += `M${stroke[0]},${stroke[1]} `;
                cmd = 'M';
            } else {
                if (last_stroke[2] == 1) {
                    d += " m";
                    cmd = 'm';
                } else if (cmd != 'l') {
                    d += ' l ';
                    cmd = 'l';
                }
                let rel_stroke = [stroke[0] - last_stroke[0], stroke[1] - last_stroke[1]];
                d += `${rel_stroke[0]},${rel_stroke[1]} `;
            }
            last_stroke = stroke;

        }
        return d;
    }
}

class Stroke {
    constructor(color, points) {
        this.color = color;
        this.points = points; // [[x1,y1,t1], [x2,y2,t2], ...]
    }

    getSliceId() {
        return 'all';
    }
}

class StrokeSlice {
    constructor(stroke, i_in, i_out) {
        this.stroke = stroke; // Stroke
        this.i_in = typeof i_in === 'undefined' ? 0 : i_in;
        this.i_out = typeof i_out === 'undefined' ? this.stroke.points.length - 1 : i_out;
    }

    getSliceId() {
        return `${this.i_in}-${this.i_out}`;
    }

    // compatible with Stroke()
    get points() {
        return this.stroke.points.slice(this.i_in, this.i_out + 1);
    }

    // compatible with Stroke()
    get color() {
        return this.stroke.color;
    }
}

class Annotator extends EventTarget {
    constructor(wrapperEl, tagFile, fileurl, config) {
        fileurl = fileurl.replace("&", "&"); // little hack: tornadoweb does this automatically for some reason
        super();

        this.config = {
            is_player: config && config.hasOwnProperty('is_player') ? config.is_player : false, // in player mode annotations are not loaded, nor is the annotator shown
            crop_to_fit: config && config.hasOwnProperty('crop_to_fit') ? config.crop_to_fit : false, // don't animate viewport, but show the whole drawing
            autoplay: config && config.hasOwnProperty('autoplay') ? config.autoplay : false, // immediately start playback 
        }

        this.formatter = wNumb({
            decimals: 2,
            edit: (time) => {
                let neg = "";
                if (time < 0) {
                    neg = "-";
                    time *= -1;
                }
                const s = Math.floor(time / 1000);
                const minutes = String(Math.floor(s / 60)).padStart(2, '0');
                const seconds = String(s - minutes * 60).padStart(2, '0');
                // show miliseconds only in annotator
                const ms = !this.config.is_player ? "." + String(Math.floor((time / 1000 - s) * 1000)).padStart(3, '0') : "";
                return `${neg}${minutes}:${seconds}${ms}`;
            },
            undo: (tc) => {
                let [rest, ms] = tc.split(/[\.\,]/);
                ms = parseFloat(typeof ms === "undefined" ? 0 : ms);
                let factor = 1000;
                rest.split(':').reverse().forEach((v, i) => {
                    ms += v * factor;
                    factor *= 60;
                });
                return `${ms} `;
            }
        });

        this.wrapperEl = wrapperEl;

        this.svgEl = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
        this.wrapperEl.appendChild(this.svgEl);
        this.wrapperEl.classList.add(this.config.is_player ? "svganim_player" : "svganim_annotator");
        this.wrapperEl.classList.add(this.config.crop_to_fit ? "cropped-to-selection" : "follow-drawing");


        this.controlsEl = document.createElement('div');
        this.controlsEl.classList.add('controls')
        this.wrapperEl.appendChild(this.controlsEl);

        this.playbackControlsEl = document.createElement('div');
        this.playbackControlsEl.classList.add('controls--playback')
        this.controlsEl.appendChild(this.playbackControlsEl);

        this.playheadEl = document.createElement('input');
        this.playheadEl.type = "range";
        this.playheadEl.min = 0;
        this.playheadEl.step = 0.01;
        this.playbackControlsEl.appendChild(this.playheadEl);

        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');
        this.timeCodeEl.type = 'numeric';
        this.timeCodeEl.classList.add('timecode');
        this.timeCodeEl.disabled = true;
        this.playbackControlsEl.appendChild(this.timeCodeEl);

        this.playPauseEl = document.createElement('button');
        this.playPauseEl.classList.add('paused');
        this.playbackControlsEl.appendChild(this.playPauseEl);

        this.playPauseEl.addEventListener("click", (ev) => {
            this.playPause()
        })
        this.playPauseEl.addEventListener('keydown', (ev) => {
            ev.preventDefault(); // we don't want to spacebar, as this is captured in the overall keydown event
        })

        if (!this.config.is_player) {
            this.scrubberEl = document.createElement('div');
            this.scrubberEl.classList.add('scrubber')
            this.controlsEl.appendChild(this.scrubberEl);


            this.annotationsEl = document.createElement('div');
            this.annotationsEl.classList.add('annotations')
            this.controlsEl.appendChild(this.annotationsEl);
        } else {
            const extraEl = document.createElement('details');
            extraEl.classList.add('controls--extra');

            const summaryEl = document.createElement('summary');
            summaryEl.innerHTML = "&mldr;";
            extraEl.appendChild(summaryEl);

            const extraControlsEl = document.createElement('ul');

            // TODO: add handlers
            const toggleFutureEl = document.createElement('li');
            toggleFutureEl.innerText = "Show preview"
            toggleFutureEl.addEventListener('click', () => this.wrapperEl.classList.toggle('hide-drawing-preview'));
            extraControlsEl.appendChild(toggleFutureEl);

            const toggleCropPlayerEl = document.createElement('li');
            toggleCropPlayerEl.innerText = "Crop to selection";
            toggleCropPlayerEl.addEventListener('click', () => this.toggleCrop());
            extraControlsEl.appendChild(toggleCropPlayerEl);

            extraEl.appendChild(extraControlsEl);

            this.playbackControlsEl.appendChild(extraEl);

        }


        this.inPointPosition = [0, 0];
        this.inPointTimeMs = null;
        this.outPointPosition = null;
        this.outPointTimeMs = null;
        this._currentTimeMs = 0;
        this.videoIsPlaying = false;

        const groups = ['before', 'annotation', 'after']
        this.strokeGroups = {};
        groups.forEach(group => {
            let groupEl = document.createElementNS('http://www.w3.org/2000/svg', 'g');
            groupEl.classList.add(group)
            this.svgEl.appendChild(groupEl);
            this.strokeGroups[group] = new StrokeGroup(groupEl, this);
        });

        this.annotations = [];

        if (this.config.is_player) {
            this.load(fileurl);
        } else {

            this.loadTags(tagFile).then(() => {
                this.tagsEl = document.createElement('ul');
                this.tagsEl.classList.add('tags');
                const addTags = (tags, tagsEl) => {
                    tags.forEach((tag) => {
                        let tagLiEl = document.createElement('li');
                        let tagEl = document.createElement('div');

                        tagEl.classList.add('tag');
                        tagEl.dataset.tag = tag.id;
                        tagEl.innerText = tag.hasOwnProperty('name') ? tag.name : tag.id;
                        tagEl.addEventListener('click', (e) => {
                            this.addTag(tag.id, this.inPointPosition, this.outPointPosition);
                        });

                        tagEl.title = tag.hasOwnProperty('description') ? tag.description : "";

                        let signEl = document.createElement('span');
                        signEl.classList.add('annotation-' + tag.id);
                        signEl.style.backgroundColor = this.getColorForTag(tag.id);
                        tagEl.prepend(signEl);

                        tagLiEl.appendChild(tagEl);

                        if (tag.hasOwnProperty('children')) {
                            const subEl = document.createElement('ul');
                            subEl.classList.add('subtags');
                            addTags(tag.children, subEl);
                            tagLiEl.appendChild(subEl);
                        }

                        tagsEl.appendChild(tagLiEl);
                    });
                };
                addTags(this.tags, this.tagsEl);

                let tagEl = document.createElement('li');
                tagEl.classList.add('tag');
                tagEl.classList.add('annotation-rm');
                tagEl.dataset.tag = 'rm';
                tagEl.title = "Remove annotation";
                tagEl.innerHTML = "🚮"; // &times;
                tagEl.addEventListener('click', (e) => {
                    if (this.selectedAnnotation) {
                        this.removeAnnotation(this.selectedAnnotationI);
                    }
                });
                this.tagsEl.appendChild(tagEl);

                this.wrapperEl.appendChild(this.tagsEl);

                this.commentEl = document.createElement('input');
                this.commentEl.type = 'text';
                this.commentEl.classList.add('annotation-comment');
                this.commentEl.title = "Add comment to annotation";
                this.commentEl.placeholder = "comment";
                this.commentEl.value = "";
                this.commentEl.addEventListener('keyup', (e) => {
                    if (e.key == 'Escape') {
                        this.commentEl.blur() // deselect annotation, and deselect commentEl
                    } else {
                        e.stopPropagation(); // prevent keyup event to propagate and set i/o points
                    }
                });
                this.commentEl.addEventListener('input', (e) => {
                    e.stopPropagation(); // prevent keyup event 
                    if (this.selectedAnnotation) {
                        this.selectedAnnotation.comment = this.commentEl.value;
                        this.updateAnnotations(true)
                    }
                });
                this.controlsEl.appendChild(this.commentEl);

                this.load(fileurl);
            });
        }
    }

    getColorForTag(tag_id) {
        const tag = this.tagMap[tag_id];
        // console.log(tag_id, tag);
        if (tag && tag.hasOwnProperty('color') && tag.color) {
            return tag.color;
        }
        if (tag && tag.hasOwnProperty('parent') && tag.parent) {
            return this.getColorForTag(tag['parent'].id);
        }
        return 'black';
    }

    updateAnnotations(save) {

        if (this.config.is_player) {
            return false;
        }

        this.annotationsEl.innerHTML = "";
        for (let annotation_i in this.annotations) {
            const annotation = this.annotations[annotation_i];
            this.annotationEl = document.createElement('div');
            const prerollDiff = Number.parseFloat(this.audioOffset < 0 ? this.audioOffset * -1000 : 0);
            // console.log('diff', prerollDiff, annotation.t_in, typeof annotation.t_in, this.duration,annotation.t_in + prerollDiff, (annotation.t_in + prerollDiff) / this.duration);
            const left = ((annotation.t_in + prerollDiff) / (this.duration * 1000)) * 100;
            const right = 100 - ((annotation.t_out + prerollDiff) / (this.duration * 1000)) * 100;
            this.annotationEl.style.left = left + '%';
            this.annotationEl.style.right = right + '%';

            this.annotationEl.style.backgroundColor = this.getColorForTag(annotation.tag);

            this.annotationEl.classList.add('annotation-' + annotation.tag);
            if (this.selectedAnnotationI == annotation_i) {
                this.annotationEl.classList.add('selected');
            }
            this.annotationEl.title = `[${annotation.tag}] ${annotation.comment} `;

            this.annotationEl.addEventListener('mouseover', (e) => {

            });
            this.annotationEl.addEventListener('mouseout', (e) => {

            });
            this.annotationEl.addEventListener('click', (e) => {
                if (this.selectedAnnotationI == annotation_i) {
                    this.deselectAnnotation(false);
                } else {
                    this.selectAnnotation(annotation_i);
                }
            });

            this.annotationsEl.appendChild(this.annotationEl);
        }

        this.tagsEl.querySelectorAll('.tag').forEach(tagEl => {
            if (this.selectedAnnotation && this.selectedAnnotation.tag == tagEl.dataset.tag) {
                tagEl.classList.add('selected')
            } else {
                tagEl.classList.remove('selected')
            }
        });

        if (save) {
            this.updateState();
        }
    }

    selectAnnotation(annotation_i) {
        this.selectedAnnotationI = annotation_i;
        this.selectedAnnotation = this.annotations[annotation_i];

        this.slider.set([this.selectedAnnotation.t_in, this.selectedAnnotation.t_out]);

        this.inPointPosition = this.findPositionForTime(this.selectedAnnotation.t_in);
        this.outPointPosition = this.findPositionForTime(this.selectedAnnotation.t_out);
        this.inPointTimeMs = this.selectedAnnotation.t_in;
        this.outPointTimeMs = this.selectedAnnotation.t_out;
        this._seekByTimeMs(this.selectedAnnotation.t_in);
        // draw full stroke of annotation:
        this.drawStrokePosition(this.inPointPosition, this.outPointPosition);

        this.updateAnnotations(false); //selects the right tag & highlights the annotation

        this.wrapperEl.classList.add('selected-annotation');
        this.commentEl.value = this.selectedAnnotation.comment;
    }

    deselectAnnotation(keep_position) {
        if (this.selectedAnnotation) {
            this._seekByTimeMs(this.selectedAnnotation.t_out);
        }

        this.wrapperEl.classList.remove('selected-annotation');
        this.commentEl.value = "";
        this.commentEl.blur(); // make sure we're not typing anymore

        this.selectedAnnotationI = null;
        this.selectedAnnotation = null;

        if (!keep_position) {
            this.setUpAnnotator();
        }
        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.debug('setInOut');
        this.drawStrokePosition(this.inPointPosition, this.outPointPosition);
        console.debug([`${this.inPointTimeMs} `, `${this.outPointTimeMs} `])
        this.slider.set([this.inPointTimeMs, this.outPointTimeMs]);

        // console.debug(this.selectedAnnotation);
        if (this.selectedAnnotation) {
            this.selectedAnnotation.t_in = in_ms;
            this.selectedAnnotation.t_out = out_ms;
            this.updateAnnotations(false);
        }
    }

    resetInOutPoint() {
        this.inPointPosition = [0, 0];
        this.inPointTimeMs = null;
        this.outPointPosition = null;
        this.outPointTimeMs = null;
        this._seekByTimeMs(this.audioOffset < 0 ? this.audioOffset * 1000 : 0);
        // draw full stroke of annotation
        console.debug('reset!');
        this.drawStrokePosition(this.inPointPosition, [Infinity, Infinity]);
        this.setUpAnnotator();
    }

    load(file) {
        const request = new Request(file, {
            method: 'GET',
        });

        this.wrapperEl.classList.add('loading');

        fetch(request)
            .then(response => response.json())
            .then(data => {
                if (!this.config.is_player) {

                    const metadata_req = new Request(`/annotations/${data.file}`, {
                        method: 'GET',
                    });
                    return fetch(metadata_req)
                        .then(response => response.ok ? response.json() : null)
                        .then(metadata => {
                            if (metadata !== null) {
                                metadata.annotations = metadata.annotations.map((a) => new Annotation(a.tag, a.t_in, a.t_out, a.hasOwnProperty('comment') ? a.comment : ""))
                            }
                            return this.loadStrokes(data, metadata)
                        })
                        .catch(e => console.error(e));
                } else {
                    return this.loadStrokes(data, null);
                }
            })
            .then(() => {
                // play on click for player
                if (this.config.is_player) {
                    this.svgEl.addEventListener('click', (ev) => {
                        console.debug('clicked for play/pause');
                        this.playPause();
                    });
                }

                // autoplay if necessary
                if (this.config.autoplay) {
                    this.play(); // play should remove loading
                } else {
                    this.wrapperEl.classList.remove('loading');
                }
            })
            .catch(e => console.debug(e));
    }

    updateState() {
        const state = {
            'title': this.title,
            'file': this.filename,
            'annotations': this.annotations,
            'audio': {
                'file': this.audioFile,
                'offset': this.audioOffset,
            }
        }
        const newState = JSON.stringify(state);
        if (newState == this.state) {
            return;
        }

        this.wrapperEl.classList.remove('saved');
        this.wrapperEl.classList.add('unsaved');
        this.state = newState;
        // autosave on state change:
        this.save(newState);
    }

    setSaved(state) {
        if (this.state != state) {
            console.debug('already outdated');
        }
        else {
            this.wrapperEl.classList.add('saved');
            this.wrapperEl.classList.remove('unsaved');
        }
    }

    save(state) {
        const request = new Request("/annotations/" + this.filename, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: state
        });
        fetch(request)
            .then((response) => {
                if (response.ok) {
                    this.setSaved(state);
                }
                else {
                    throw Error('Something went wrong');
                }
            })
            .catch((error) => {
                console.error(error);
            });

    }

    removeAnnotation(annotation_i) {
        this.deselectAnnotation(true);
        this.annotations.splice(annotation_i, 1);
        this.updateAnnotations(true);
    }

    addTag(tag) {
        if (this.selectedAnnotation) {
            this.selectedAnnotation.tag = tag;
            this.updateAnnotations(true);
        } else {

            // TODO this.slider values for in and out
            const [t_in, t_out] = this.slider.get();
            if (this.slider) {
                this.slider.destroy();
            }

            this.annotations.push(new Annotation(tag, t_in, t_out, ""));
            this.updateAnnotations(true);

            this._currentTimeMs = t_out;
            this._updatePlayhead();
            this.setUpAnnotator();
        }
    }


    setUpAnnotator() {

        this.playheadEl.min = this.audioOffset < 0 ? this.audioOffset * 1000 : 0;
        this.playheadEl.max = this.getEndTimeMs();
        this._updatePlayhead();


        this.inPointPosition = this.findPositionForTime(this.currentTime);
        this.inPointTimeMs = this._currentTimeMs;
        this.outPointPosition = this.findPositionForTime(this.lastFrameTime); // TODO: simplify to get the last frame indexes directly
        this.outPointTimeMs = this.getEndTimeMs();


        if (!this.config.is_player) {
            this.buildAnnotator();
        }

        this.drawStrokePosition(this.inPointPosition, this.outPointPosition);
    }

    buildAnnotator() {

        if (this.scrubberEl.noUiSlider) {
            this.slider.destroy();
        }

        // console.log(this._currentTimeMs, )
        const sliderMin = this.audioOffset < 0 ? this.audioOffset * 1000 : 0;
        const sliderMax = this.getEndTimeMs();
        this.slider = noUiSlider.create(this.scrubberEl, {
            start: [this._currentTimeMs, this.getEndTimeMs()],
            connect: true,
            range: {
                'min': sliderMin,
                'max': sliderMax,
            },
            keyboardDefaultStep: (sliderMax - sliderMin) / 1000,
            keyboardPageMultiplier: 10, // page up/down 10s
            tooltips: [
                this.formatter,
                this.formatter
            ],
            // pips: {
            //     mode: 'range',
            //     density: 3,
            //     format: this.formatter
            // }
        });

        this.slider.on("slide", (values, handle) => {
            this.videoIsPlaying = false;
            this.inPointPosition = this.findPositionForTime(values[0]);
            this.inPointTimeMs = Number.parseFloat(values[0]);
            this.outPointPosition = this.findPositionForTime(values[1]);
            this.outPointTimeMs = Number.parseFloat(values[1]);
            this.drawStrokePosition(this.inPointPosition, this.outPointPosition);

            // console.log(this.selectedAnnotation);
            if (this.selectedAnnotation) {
                this.selectedAnnotation.t_in = Number.parseFloat(values[0]);
                this.selectedAnnotation.t_out = Number.parseFloat(values[1]);
                this.updateAnnotations(false);
            }
        });
        this.slider.on("end", (values, handle) => {
            if (this.selectedAnnotation) {
                this.updateAnnotations(true);
            }
            this._seekByTimeMs(values[0]);
            this.play();
            // this.playAudioSegment(values[0], values[1]);
        });

        this.slider.getTooltips().forEach((ttEl, i) => {
            // console.log(ttEl, i);
            ttEl.addEventListener('click', (e) => {
                let ttInputEl = document.createElement('input');
                ttInputEl.value = ttEl.innerHTML
                ttEl.innerHTML = "";
                ttEl.appendChild(ttInputEl);
                ttInputEl.focus();

                const submit = () => {
                    console.debug(ttInputEl.value);
                    const tcMs = this.formatter.from(ttInputEl.value);
                    let points = this.slider.get();
                    points[i] = tcMs;
                    console.debug(points);
                    this.slider.set(points);
                };
                ttInputEl.addEventListener('keydown', (keyE) => {
                    keyE.stopPropagation(); //prevent movement of tooltip
                    if (keyE.key == "Enter") {
                        submit();
                    }
                })
                ttInputEl.addEventListener('click', (clickE) => {
                    clickE.stopPropagation(); //prevent retrigger on selectino
                })
                ttInputEl.addEventListener('blur', submit);
            });
        })
    }

    loadStrokes(drawing, metadata) {
        this.audioOffset = 0;

        if (metadata) {
            this.annotations = metadata.annotations;
        }

        if ((metadata && metadata.hasOwnProperty('audio')) || (drawing.hasOwnProperty('audio') && drawing.audio)) {
            if (metadata && metadata.hasOwnProperty('audio')) {
                this.audioFile = metadata.audio.file
                this.audioOffset = Number.parseFloat(metadata.audio.offset);
            } else {
                this.audioFile = drawing.audio.file
                this.audioOffset = Number.parseFloat(drawing.audio.offset);
            }
            this._currentTimeMs = this.audioOffset < 0 ? this.audioOffset * 1000 : 0;
            this._updatePlayhead();
        }

        this.title = null;
        if (metadata && metadata.hasOwnProperty('title')) {
            this.title = metadata.title;
        }
        else if (drawing.hasOwnProperty('title')) {
            this.title = drawing.title;
        }

        this.filename = drawing.file;
        this.strokes = drawing.shape.map(s => new Stroke(s['color'], s['points']));
        this.viewboxes = drawing.viewboxes;
        this.currentPathI = null;
        this.currentPointI = null;
        this.currentViewboxI = null;
        this.dimensions = drawing.dimensions;
        this.bounding_box = drawing.bounding_box;
        this.updateViewbox();

        // let bgEl = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
        // bgEl.setAttribute("x", 0);
        // bgEl.setAttribute("y", 0);
        // bgEl.setAttribute("width", this.dimensions[0]);
        // bgEl.setAttribute("height", this.dimensions[1]);
        // bgEl.classList.add('background');
        // this.svgEl.prepend(bgEl);

        this.firstFrameTime = this.strokes.length == 0 ? 0 : this.strokes[0].points[0][3];
        this.lastFrameTime = this.getFinalFrameTime();
        this.playheadEl.max = this.lastFrameTime;
        this.nextFrameTimeout = null;
        this.nextViewboxTimeout = null;
        this._setPausedFlag(true);

        return this.setupAudioConfig().then(() => {
            // this.setUpAnnotator()
            let keyEl;
            if (this.config.is_player) {
                keyEl = this.wrapperEl;
            } else {
                keyEl = document.body; // always capture
                this.updateAnnotations(false);
            }

            keyEl.addEventListener('keyup', (ev) => {
                if (ev.key == ' ') {
                    this.playPause();
                }

                // 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;
                    const diff = ev.ctrlKey ? 10000 : 1000;
                    this.scrubTo(this._currentTimeMs - diff);
                    if (!p) { this.play(); } // scrubTo() causes a pause();
                }
                if (ev.key == 'ArrowRight' && ev.shiftKey) {
                    const p = this._paused;
                    const diff = ev.ctrlKey ? 10000 : 1000;
                    this.scrubTo(this._currentTimeMs + diff);
                    if (!p) { this.play(); } // scrubTo() causes a pause();
                }

                // additional keys only for annotation mode
                if (!this.config.is_player) {
                    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();
                        } else {
                            this.resetInOutPoint();
                        }
                    }
                }
            });
        });

        // this.playStrokePosition(0, 1);
    }


    loadTags(tagFile) {
        // tags config
        const request = new Request(tagFile);
        return fetch(request)
            .then(response => response.json())
            .then(rootTag => {
                this.tags = rootTag.children;
                this.tagMap = {};
                const addTagsToMap = (tags, parent) => {
                    tags.forEach((tag) => {
                        tag['parent'] = typeof parent != "undefined" ? parent : null;
                        this.tagMap[tag.id] = tag;
                        if (tag.hasOwnProperty("children")) {
                            addTagsToMap(tag.children, tag);
                        }
                    });
                };
                addTagsToMap(this.tags);
            });
    }

    setupAudioConfig() {
        // audio config
        return new Promise((resolve, reject) => {
            this.audioEl = document.createElement('audio');
            if (!this.config.is_player)
                this.audioEl.setAttribute('controls', true);

            this.audioEl.addEventListener('canplaythrough', (ev) => {
                console.debug('loaded audio');
                // this.audioEl.play();
            });

            if (this.config.is_player) {
                this.wrapperEl.prepend(this.audioEl);
            }
            else {

                let mdConfigEl = document.createElement('div');
                mdConfigEl.classList.add('metadataconfig')
                this.wrapperEl.appendChild(mdConfigEl);


                let titleEl = document.createElement('div');
                titleEl.classList.add('drawing-title');
                titleEl.innerText = this.title ?? "[add title]"
                titleEl.title = this.title ?? "[click to add title for this diagram]"
                titleEl.addEventListener('click', (ev) => {
                    const title = prompt("Change the title for the drawing", this.title ?? "");
                    if (title === null) return; //cancel
                    titleEl.innerText = title.length ? title : "[add title]";
                    this.title = title.length ? title : null;
                    this.updateState();
                })
                mdConfigEl.appendChild(titleEl);

                let audioConfigEl = document.createElement('div');
                audioConfigEl.classList.add('audioconfig')
                mdConfigEl.appendChild(audioConfigEl);


                audioConfigEl.appendChild(this.audioEl);

                let audioSelectEl = document.createElement('select');
                audioSelectEl.classList.add('audioselect');
                audioConfigEl.appendChild(audioSelectEl);

                fetch('/audio')
                    .then(response => response.json())
                    .then(data => {
                        data.unshift(''); // add empty, to deselect any file
                        data.forEach(audioFile => {
                            let optionEl = document.createElement('option');
                            optionEl.selected = this.audioFile == audioFile;
                            optionEl.innerText = audioFile;
                            audioSelectEl.appendChild(optionEl);
                        });
                    })

                audioSelectEl.addEventListener('change', (ev) => {
                    this.setAudioFile(ev.target.value);
                });


                let audioOffsetTextEl = document.createElement('label');
                audioOffsetTextEl.innerText = "Offset (s)";
                audioConfigEl.appendChild(audioOffsetTextEl);

                let audioOffsetEl = document.createElement('input');
                audioOffsetEl.setAttribute('type', 'number');
                audioOffsetEl.setAttribute('step', '.01');
                audioOffsetEl.value = this.audioOffset ?? 0;
                audioOffsetEl.addEventListener('change', (ev) => {
                    this.setAudioOffset(ev.target.value);
                });
                audioOffsetTextEl.appendChild(audioOffsetEl);

            }




            this.audioEl.addEventListener('loadedmetadata', (ev) => {
                // resolve the 'set up audio' when metadata has loaded
                this.setUpAnnotator(); // if offset is negative, annotator starts at negative time
                resolve();
            })
            if (this.audioFile) {
                this.audioEl.setAttribute('src', this.audioFile);
            } else {
                this.setUpAnnotator();
                resolve();
            }

        });
    }

    setAudioFile(audioFile) {
        this.audioFile = audioFile;
        this.audioEl.setAttribute('src', this.audioFile);
        // this.audioEl.play();
        // TODO update playhead
        // TODO update this.duration after load
        this.updateState();
    }

    setAudioOffset(audioOffset) {
        this.audioOffset = Number.parseFloat(audioOffset);
        // TODO update playhead
        // TODO update this.duration
        this.setUpAnnotator(); // if offset is negative, annotator starts at negative time
        this.updateState();
    }

    /**
     * @param float time time is ms
     * @returns float
     */
    getAudioTime(time) {
        return Number.parseFloat(time) - (this.audioOffset * 1000 ?? 0);
    }

    /**
     * 
     * @param float t_in in point time, in ms
     * @param float t_out out point time, in ms
     */
    playAudioSegment(t_in, t_out) {
        if (this.audioStartTimeout) clearTimeout(this.audioStartTimeout);
        if (this.audioEndTimeout) clearTimeout(this.audioEndTimeout);

        // TODO, handle playback delay
        const t_start = this.getAudioTime(t_in); // in ms
        const t_diff = (t_out ?? this.audioEl.duration * 1000) - t_in; // in ms

        this.audioEl.pause();

        if (t_start < 0) {
            if (t_diff <= t_start * -1) {
                console.debug('no audio playback in segment', t_start, t_diff);
            } else {
                console.debug('delay audio playback', t_start, t_diff);
                // a negative audiooffset delays playback from the start
                // this.audioStartTimeout = setTimeout((e) => this.audioEl.play(), t*-1000);
                this.audioStartTimeout = setTimeout((e) => { this.audioEl.currentTime = 0; this.audioEl.play(); }, t_start * -1); // triggers play with "seeked" event
                // this.audioEl.currentTime = 0;
            }
        } else {
            if (this.audioEl.currentTime !== t_start / 1000) {
                console.debug(this.audioEl.currentTime, t_start / 1000);
                this.audioEl.currentTime = t_start / 1000;
            }
            this.audioEl.play();
            // this.audioEl.play(); // play is done in "seeked" evenlistener
            console.debug(this.audioEl.currentTime, t_start, t_in, t_out);
        }

        this.audioIsPlaying = true; // also state as playing in preroll
        this.audioEndTimeout = setTimeout((e) => {
            this.audioEl.pause();
            this.audioIsPlaying = false;
            console.debug('done playing audio');
        }, t_diff);
    }

    _scrubAudio(time_ms) {
        this.audioEl.currentTime = Math.max(0, this.getAudioTime(time_ms)) / 1000;
    }

    getFinalFrameTime() {
        if (this.strokes.length == 0) return null; // when no strokes are loaded (eg. for annotation)
        const points = this.strokes[this.strokes.length - 1].points;
        return points[points.length - 1][3];
    }

    getStrokesSliceForPathRange(in_point, out_point) {
        // get paths for given range. Also, split path at in & out if necessary.
        let slices = {};
        for (let i = in_point[0]; i <= out_point[0]; i++) {
            const stroke = this.strokes[i];
            if (typeof stroke === 'undefined') {
                // out point can be Infinity. So interrupt whenever the end is reached
                break;
            }
            const in_i = (in_point[0] === i) ? in_point[1] : 0;
            const out_i = (out_point[0] === i) ? out_point[1] : Infinity;

            slices[i] = new StrokeSlice(stroke, in_i, out_i);
        }
        return slices;
    }

    // TODO: when drawing, have a group active & inactive.
    // active is getPathRange(currentIn, currentOut)
    // inactive is what comes before and after.
    // then, playing the video is just running pathRanghe(0, playhead)
    drawStrokePosition(in_point, out_point, show_all) {
        if (typeof show_all === 'undefined')
            show_all = true;

        this.strokeGroups['before'].setStrokes(this.getStrokesSliceForPathRange([0, 0], in_point));
        this.strokeGroups['annotation'].setStrokes(this.getStrokesSliceForPathRange(in_point, out_point));
        this.strokeGroups['after'].setStrokes(this.getStrokesSliceForPathRange(out_point, [Infinity, Infinity]));


        // // an inpoint is set, so we're annotating
        // // make everything coming before translucent
        // if (this.inPointPosition !== null) {
        //     const [inPath_i, inPoint_i] = this.inPointPosition;
        //     // returns a static NodeList
        //     const currentBeforeEls = this.svgEl.querySelectorAll(`.before_in`);
        //     for (let currentBeforeEl of currentBeforeEls) {
        //         currentBeforeEl.classList.remove('before_in');
        //     }

        //     for (let index = 0; index < inPath_i; index++) {
        //         const pathEl = this.svgEl.querySelector(`.path${ index } `);
        //         if (pathEl) {
        //             pathEl.classList.add('before_in');
        //         }
        //     }
        // }

        // this.currentPathI = path_i;
        // this.currentPointI = point_i;

        // const path = this.strokes[path_i];
        // // console.log(path);
        // let pathEl = this.svgEl.querySelector(`.path${ path_i } `);
        // if (!pathEl) {
        //     pathEl = document.createElementNS('http://www.w3.org/2000/svg', 'path');
        //     pathEl.style.stroke = path.color;
        //     pathEl.classList.add('path' + path_i)
        //     this.svgEl.appendChild(pathEl)
        // }

        // const stroke = path.points.slice(0, point_i);
        // const d = this.strokes2D(stroke);
        // pathEl.setAttribute('d', d);

        // this.scrubberElOld.value = path.points[point_i][3];
        // this.currentTime = path.points[point_i][3];
    }

    setViewboxPosition(box_i) {
        if (this.currentViewboxI == box_i) {
            return;
        }
        this.currentViewboxI = box_i
        if (!this.config.crop_to_fit) {
            this.updateViewbox();
        }
    }

    updateViewbox() {
        if (this.config.crop_to_fit) {
            this.svgEl.setAttribute('viewBox', `${this.bounding_box.x} ${this.bounding_box.y} ${this.bounding_box.width} ${this.bounding_box.height} `);
        } else {
            let x, y, w, h;
            if (this.currentViewboxI !== null) {
                x = this.viewboxes[this.currentViewboxI].x,
                    y = this.viewboxes[this.currentViewboxI].y,
                    w = this.dimensions[0],
                    h = this.dimensions[1];
            } else {
                x = 0,
                    y = 0,
                    w = this.dimensions[0],
                    h = this.dimensions[1];
            }
            this.svgEl.setAttribute('viewBox', `${x} ${y} ${w} ${h} `);
        }
    }

    setCrop(crop_to_fit) {
        this.config.crop_to_fit = Boolean(crop_to_fit);
        if (this.config.crop_to_fit) {
            this.wrapperEl.classList.add('cropped-to-selection');
        } else {
            this.wrapperEl.classList.remove('cropped-to-selection');
        }
        this.updateViewbox();
    }

    toggleCrop() {
        this.setCrop(!this.config.crop_to_fit);
    }

    getNextPosition(path_i, point_i) {
        const path = this.strokes[path_i];
        let next_path, next_point;
        if (path.points.length > point_i + 1) {
            next_path = path_i;
            next_point = point_i + 1;
            // setTimeout(() => this.playStroke(next_path, next_point), dt);
        } else if (this.strokes.length > path_i + 1) {
            next_path = path_i + 1;
            next_point = 0;
            // use starttime instead of diff, to prevent floating
        } else {
            return [null, null];
        }

        // when an outpoint is set, stop playing there
        if (this.outPointPosition && (next_path > this.outPointPosition[0] ||
            (next_path == this.outPointPosition[0] && next_point > this.outPointPosition[1]))) {
            console.debug('> out point', this.outPointPosition)
            return [null, null];
        }

        return [next_path, next_point];
    }

    playStrokePosition(path_i, point_i, allow_interrupt) {
        if (this.strokes.length === 0) {
            console.debug('No video to play back');
            this.videoIsPlaying = false;
            return;
        }

        if (allow_interrupt) {
            if (!this.videoIsPlaying) {
                console.debug('not playing because of interrupt');
                return;
            }
        } else {
            this.videoIsPlaying = true;
        }
        this.drawStrokePosition(this.inPointPosition, [path_i, point_i]);

        const [next_path, next_point] = this.getNextPosition(path_i, point_i);
        if (next_path === null) {
            console.debug('done playing video');
            this.videoIsPlaying = false;
            return;
        }

        const t = this.strokes[next_path].points[next_point][3];// - path.points[point_i][3];

        // calculate interval based on playback start to avoid drifting of time
        const dt = t - (window.performance.now() - this.startTimeMs);
        this.nextFrameTimeout = setTimeout(() => this.playStrokePosition(next_path, next_point, true), dt);
    }


    playViewboxPosition(box_i, allow_interrupt) {
        if (allow_interrupt) {
            if (!this.videoIsPlaying) {
                console.debug('not playing because of interrupt');
                return;
            }
        }
        // else {
        //     this.videoIsPlaying = true;
        // }
        this.setViewboxPosition(box_i);

        const next_box_i = box_i + 1;
        if (this.viewboxes.length <= next_box_i) {
            console.debug('done playing viewbox');
            return;
        }

        const t = this.viewboxes[next_box_i].t;

        // calculate interval based on playback start to avoid drifting of time
        const dt = t - (window.performance.now() - this.startTimeMs);
        this.nextViewboxTimeout = setTimeout(() => this.playViewboxPosition(next_box_i, true), dt);
    }

    scrubTo(ms) {
        // const [path_i, point_i] = this.findPositionForTime(ms);
        // console.log(path_i, point_i);
        this.pause();
        this._seekByTime(ms / 1000);
        // this.playHead = ms;
    }

    playPause() {
        if (this.paused) {
            this.play();
        } else {
            this.pause()
        }
    }

    /**
     * Compatibility with HTMLMediaElement API
     * @returns None
     */
    pause() {
        this._interruptPlayback();
    }

    _interruptPlayback() {
        clearTimeout(this.nextFrameTimeout);
        clearTimeout(this.nextViewboxTimeout);
        clearTimeout(this.audioEndTimeout);
        clearTimeout(this.audioStartTimeout);
        clearTimeout(this.startVideoTimeout);
        this.audioEl.pause();
        this.videoIsPlaying = false;
        this.audioIsPlaying = false;
        this._setPausedFlag(true);
    }

    /**
     * Compatibility with HTMLMediaElement API
     * @returns Promise
     */
    play() {
        return new Promise((resolve, reject) => {
            this._interruptPlayback();

            if (this._currentTimeMs > this.outPointTimeMs) {
                this._seekByTimeMs(this.inPointTimeMs);
            } else {
                this._seekByTimeMs(this._currentTimeMs); // prevent playback issue for initial load
            }

            this._setPausedFlag(false);

            const startPlayback = () => {
                console.debug('start playback');
                this.wrapperEl.classList.remove('loading'); // no loading anymore

                this.startTimeMs = window.performance.now() - this._currentTimeMs;
                // strokes
                if (this._currentTimeMs < 0) {
                    this.startVideoTimeout = setTimeout((e) => this.playStrokePosition(this.currentPathI, this.currentPointI), this._currentTimeMs * -1);
                } else {
                    this.playStrokePosition(this.currentPathI, this.currentPointI);
                }
                // viewboxes
                // const nextViewboxI = Math.max(this.currentViewboxI++, this.viewboxes.length-1);
                this.playViewboxPosition(this.currentViewboxI);

                // audio
                // TODO: use this.audioEl.readyState == 4 : play immediately, otherwise after event
                this.playAudioSegment(this._currentTimeMs, this.outPointTimeMs);
                // this.playStrokePosition(this.currentPathI, this.currentPointI);

                this.dispatchEvent(new CustomEvent('play', {}));
                this._animationFrame();
                resolve();
            }

            if (this.audioEl.src.length && this.audioEl.readyState !== 4) { // not ready to play after seeking audio.
                console.debug('wait for audio before playback');
                this.wrapperEl.classList.add('loading');
                this.audioEl.addEventListener('canplaythrough', () => {
                    startPlayback()
                }, { once: true }); // only once
            } else {
                startPlayback();
            }

        });
    }

    _setPausedFlag(paused) {
        this._paused = !!paused; //convert to boolean
        if (paused) {
            this.playPauseEl.classList.remove('playing');
            this.playPauseEl.classList.add('paused');
        } else {
            this.playPauseEl.classList.remove('paused');
            this.playPauseEl.classList.add('playing');
        }
    }

    get paused() {
        return this._paused;
    }

    _updatePlayhead() {
        this.playheadEl.value = this._currentTimeMs;
        this.timeCodeEl.value = this.formatter.to(this._currentTimeMs);
    }


    // on playback, run every windowAnimationFrame
    _animationFrame(timestamp) {
        // TODO, move time at end of playStrokePosition to here
        const nextTime = window.performance.now() - this.startTimeMs;
        const endTime = this.outPointTimeMs ?? this.duration * 1000;
        let interrupt = false;
        if (nextTime > endTime) {
            this._currentTimeMs = endTime;
            interrupt = true;
        } else {
            this._currentTimeMs = nextTime;
        }
        this._updatePlayhead();
        if (!interrupt && (this.videoIsPlaying || this.audioIsPlaying)) {
            window.requestAnimationFrame((timestamp) => this._animationFrame(timestamp));
        } else {
            console.debug('finished playback');
            this._interruptPlayback(true);
            // this.resetPlayhead(); // Disable to not jump to start on pause. TODO: check if this causes issues e.g. on end
        }
    }

    resetPlayhead() {
        this._seekByTimeMs(this.inPointTimeMs);
        if (this.selectedAnnotation) {
            // show the hole selected annotation
            this.drawStrokePosition(this.inPointPosition, this.outPointPosition);
        }
    }

    /**
     * Note that both t_in and t_out can be negative
     * @param float|Array t_in in point time, in ms  or array with path/frame points
     * @param float|Array t_out out point time, in ms or array with path/frame points
     */
    playSegment(in_point, out_point) {
        if (!Array.isArray(in_point)) in_point = this.findPositionForTime(in_point);
        if (!Array.isArray(out_point)) out_point = this.findPositionForTime(out_point);

        this.inPointPosition = in_point;
        this.outPointPosition = out_point;
        this._seekByPoint(in_point);

        this.play();
    }

    _seekByPoint(point) {
        this.dispatchEvent(new CustomEvent('seeking', {}));
        this._currentTimeMs = this.strokes[point[0]].points[point[1]][2];
        this.audioEl.currentTime = this.getAudioTime(this._currentTimeMs) / 1000;
        [this.currentPathI, this.currentPointI] = point;
        this._updatePlayhead();
        this._updateFrame();
        // TODO set audio, wait for promise to finish
        this.dispatchEvent(new CustomEvent('seeked', {}));

    }
    _seekByTimeMs(time) {
        this._seekByTime(Number.parseFloat(time) / 1000);
    }
    _seekByTime(time) {
        this.dispatchEvent(new CustomEvent('seeking', { detail: time }));
        this._currentTimeMs = Number.parseFloat(time) * 1000;
        this.audioEl.currentTime = this.getAudioTime(this._currentTimeMs) / 1000;
        [this.currentPathI, this.currentPointI] = this.findPositionForTime(this._currentTimeMs);

        this._updatePlayhead();
        this._updateFrame();
        this.dispatchEvent(new CustomEvent('seeked', { detail: this.currentTime }));
    }

    _updateFrame() {
        this.drawStrokePosition(this.inPointPosition, [this.currentPathI, this.currentPointI]);
        this.setViewboxPosition(this.findViewboxForTime(this._currentTimeMs));
    }

    /**
     * For compatibility with HTMLMediaElement API convert seconds to ms of internal timer
     */
    set currentTime(time) {
        this._seekByTime(time);
    }

    get currentTime() {
        return this._currentTimeMs / 1000;
    }

    getEndTimeMs() {
        const videoDuration = this.getFinalFrameTime();
        const audioDuration = (this.audioEl && this.audioEl.src) ? this.audioEl.duration + this.audioOffset : 0;

        return Math.max(videoDuration, audioDuration * 1000);
    }

    get duration() {

        const prerollDuration = this.audioOffset < 0 ? this.audioOffset * -1 : 0;

        return prerollDuration + this.getEndTimeMs() / 1000;
    }

    findPositionForTime(ms) {
        ms = Math.min(Math.max(ms, 0), this.lastFrameTime);
        // console.log('scrub to', ms)
        let path_i = 0;
        let point_i = 0;
        this.strokes.every((stroke, index) => {
            const startAt = stroke.points[0][3];
            const endAt = stroke.points[stroke.points.length - 1][3];

            if (startAt > ms) {
                return false; // too far
            }
            if (endAt > ms) {
                // we're getting close. Find the right point_i
                path_i = index;
                stroke.points.every((point, pi) => {
                    if (point[3] > ms) {
                        // too far
                        return false;
                    }
                    point_i = pi;
                    return true;
                });
                return false;
            } else {
                // in case nothings comes after, we store the last best option thus far
                path_i = index;
                point_i = stroke.points.length - 1;
                return true;
            }

        });
        return [path_i, point_i];
    }

    findViewboxForTime(ms) {
        ms = Math.min(Math.max(ms, 0), this.lastFrameTime);
        // console.log('scrub to', ms)
        let box_i = 0;
        this.viewboxes.every((viewbox, index) => {
            const startAt = viewbox.t;

            if (startAt > ms) {
                return false; // too far
            } else {
                // in case nothings comes after, we store the last best option thus far
                box_i = index;
                return true;
            }

        });
        return box_i;
    }


}


class AnnotationPlayer extends HTMLElement {
    constructor() {
        super();
        // We don't use constructor() because an element's attributes
        // are unavailable until connected to the DOM.

        // attributes:
        // - data-no-crop
        // - autoplay
        // - preload
        // - data-poster-src
        // - data-annotation-url
    }

    connectedCallback() {
        // Create a shadow root
        this.attachShadow({ mode: "open" });

        const imgEl = document.createElement('img');
        const playerEl = document.createElement('div');

        const config = {
            is_player: true,
            crop_to_fit: this.hasAttribute('data-no-crop') ? false : true,
            autoplay: true,
        }


        imgEl.src = this.getAttribute('data-poster-url');
        imgEl.addEventListener('click', () => {
            imgEl.style.display = 'none';
            this.annotator = new Annotator(
                playerEl,
                null, //"tags.json",
                this.getAttribute('data-annotation-url'),
                config
            );
        })

        playerEl.classList.add('play');

        const styleEl = document.createElement('style');
        styleEl.textContent = `
        :host{
            overflow: hidden;
            padding: 10px;

            background: white;
        }
        
        svg, img {
            width: 100%;
            height: 100%;
        }

        .play:not(.loading) .controls {
            visibility: hidden;
        }

        :host(:hover) .controls {
            visibility: visible !important;
        }
        
        .controls--playback {
            display:flex;
            background: rgba(0,0,0,.5);
            border-radius: 3px;
        }

        .timecode {
            width: 30px;
            font-size: 8px;
            background: none;
            border: none;
            color: white;
        }


        .controls--playback input[type='range'] {
            flex-grow: 1;
            -webkit-appearance: none;
            background: none;

        }

        input[type="range"]::-webkit-slider-runnable-track,
        input[type="range"]::-moz-range-track  {
            background: lightgray;
            height: 5px;
            border-radius: 3px;
        }

        input[type="range"]::-moz-range-progress {
            background-color: white;
            height: 5px;
            border-radius: 3px 0 0 3px;
          }
          

        input[type="range"]::-webkit-slider-thumb,
        input[type="range"]::-moz-range-thumb {
         -webkit-appearance: none;
         height: 15px;
         width: 15px;
         background: white;
         margin-top: -5px;
         border-radius: 50%;
         border:none;
        }

           

        .controls button.paused,
        .controls button.playing {
            order: -1;
            width: 30px;
            height: 30px;
            border: none;
            background: none;
            color: white;
            line-height: 1;
        }

        .controls button.paused::before {
            content: '⏵';
        }

        .controls button.playing::before {
            content: '⏸';
        }


        .loading .controls button:is(.playing, .paused)::before {
            content: '↺';
            display: inline-block;
            animation: rotate 1s infinite;
        }

        @keyframes rotate {
            0% {
                transform: rotate(359deg)
            }

            100% {
                transform: rotate(0deg)
            }
        }

        .controls {
            position: absolute !important;
            z-index: 100;
            bottom: 10px;
            left: 5%;
            right: 0;
            width: 90%;
        }
        svg .background {
            fill: white
        }
        
        path {
            fill: none;
            stroke: gray;
            stroke-width: 1mm;
            stroke-linecap: round;
        }
        
        g.before path {
            opacity: 0.5;
            stroke: gray !important;
        }
        
        g.after path,
        path.before_in {
            opacity: .1;
            stroke: gray !important;
        }

        .hide-drawing-preview g.after path, .hide-drawing-preview path.before_in{
            opacity:0;
        }
        
        .gray {
            position: absolute;
            background: rgba(255, 255, 255, 0.7);
        }

        details{
            color: white;
        }
        
        summary{
            list-style: none;
            cursor: pointer;
            padding: 0 5px;
        }

        details > ul{
            position: absolute;
            bottom: 30px;
            background: rgba(0,0,0, .5);
            border-radius: 3px;
            right: 0;
            padding: 5px;
            margin: 0;
            list-style: none;
            font-size: 10pt;
        }

        details > ul li:hover{
            cursor: pointer;
            text-decoration: underline;
        }

        .play:not(.hide-drawing-preview) details > ul li:first-child{
            /*text-decoration: line-through;*/
            font-weight:bold;
        }
        .play.cropped-to-selection details > ul li:nth-child(2){
            /*text-decoration: line-through;*/
            font-weight:bold;
        }

        `;

        this.shadowRoot.appendChild(styleEl);
        this.shadowRoot.appendChild(imgEl);
        this.shadowRoot.appendChild(playerEl);

    }

    setAnnotation(annotation) {
        // this.annotation = annotation;
        this.setAttribute('data-annotation-url', annotation.url)
        this.setAttribute('data-poster-url', `/annotation/${annotation.id}.svg`)
    }

    toggleCrop() {
        if (this.hasAttribute('data-no-crop')) {
            this.removeAttribute('data-no-crop');
        } else {
            this.setAttribute('data-no-crop', true);
        }
    }

    attributeChangedCallback(name, oldValue, newValue) {
        console.log(name, oldValue, newValue);
        if (name == 'data-no-crop') {
            if (!this.annotator) {
                return;
            }
            this.annotator.setCrop(!this.hasAttribute('data-no-crop'));
        }
    }

    // required for attributeChangedCallback()
    static get observedAttributes() { return ['data-no-crop']; }

}

window.customElements.define('annotation-player', AnnotationPlayer);