From f7e9fd99fcda6246f538296833c1c3e1e8ebad60 Mon Sep 17 00:00:00 2001
From: Ruben van de Ven <git@rubenvandeven.com>
Date: Thu, 23 Feb 2023 13:25:03 +0100
Subject: [PATCH] Style Player component and move to annotate.js

---
 app/www/annotate.js    | 266 ++++++++++++++++++++++++++++++++++++++---
 app/www/annotations.js | 158 ------------------------
 2 files changed, 247 insertions(+), 177 deletions(-)

diff --git a/app/www/annotate.js b/app/www/annotate.js
index 3ec0e98..499bd34 100644
--- a/app/www/annotate.js
+++ b/app/www/annotate.js
@@ -130,10 +130,11 @@ class Annotator extends EventTarget {
                     time *= -1;
                 }
                 const s = Math.floor(time / 1000);
-                const minutes = Math.floor(s / 60);
-                const seconds = s - minutes * 60;
-                const ms = Math.floor((time / 1000 - s) * 1000);
-                return `${neg}${minutes}:${seconds}.${ms}`;
+                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(/[\.\,]/);
@@ -143,7 +144,7 @@ class Annotator extends EventTarget {
                     ms += v * factor;
                     factor *= 60;
                 });
-                return `${ms}`;
+                return `${ ms } `;
             }
         });
 
@@ -192,12 +193,12 @@ class Annotator extends EventTarget {
             ev.preventDefault(); // we don't want to spacebar, as this is captured in the overall keydown event
         })
 
-        this.scrubberEl = document.createElement('div');
-        this.scrubberEl.classList.add('scrubber')
-        this.controlsEl.appendChild(this.scrubberEl);
-
-
         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);
@@ -339,7 +340,7 @@ class Annotator extends EventTarget {
             if (this.selectedAnnotationI == annotation_i) {
                 this.annotationEl.classList.add('selected');
             }
-            this.annotationEl.title = `[${annotation.tag}] ${annotation.comment}`;
+            this.annotationEl.title = `[${ annotation.tag }] ${ annotation.comment } `;
 
             this.annotationEl.addEventListener('mouseover', (e) => {
 
@@ -425,7 +426,7 @@ class Annotator extends EventTarget {
         // draw full stroke of annotation
         console.debug('setInOut');
         this.drawStrokePosition(this.inPointPosition, this.outPointPosition);
-        console.debug([`${this.inPointTimeMs}`, `${this.outPointTimeMs}`])
+        console.debug([`${ this.inPointTimeMs } `, `${ this.outPointTimeMs } `])
         this.slider.set([this.inPointTimeMs, this.outPointTimeMs]);
 
         // console.debug(this.selectedAnnotation);
@@ -460,7 +461,7 @@ class Annotator extends EventTarget {
             .then(data => {
                 if (!this.config.is_player) {
 
-                    const metadata_req = new Request(`/annotations/${data.file}`, {
+                    const metadata_req = new Request(`/ annotations / ${ data.file } `, {
                         method: 'GET',
                     });
                     return fetch(metadata_req)
@@ -1032,7 +1033,7 @@ class Annotator extends EventTarget {
         //     }
 
         //     for (let index = 0; index < inPath_i; index++) {
-        //         const pathEl = this.svgEl.querySelector(`.path${index}`);
+        //         const pathEl = this.svgEl.querySelector(`.path${ index } `);
         //         if (pathEl) {
         //             pathEl.classList.add('before_in');
         //         }
@@ -1044,7 +1045,7 @@ class Annotator extends EventTarget {
 
         // const path = this.strokes[path_i];
         // // console.log(path);
-        // let pathEl = this.svgEl.querySelector(`.path${path_i}`);
+        // 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;
@@ -1072,7 +1073,7 @@ class Annotator extends EventTarget {
 
     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}`);
+            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) {
@@ -1086,15 +1087,19 @@ class Annotator extends EventTarget {
                 w = this.dimensions[0],
                 h = this.dimensions[1];
             }
-            this.svgEl.setAttribute('viewBox', `${x} ${y} ${w} ${h}`);
+            this.svgEl.setAttribute('viewBox', `${ x } ${ y } ${ w } ${ h } `);
         }
     }
 
-    toggleCrop(){
-        this.config.crop_to_fit = !this.config.crop_to_fit;
+    setCrop(crop_to_fit) {
+        this.config.crop_to_fit = Boolean(crop_to_fit);
         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;
@@ -1446,3 +1451,226 @@ class Annotator extends EventTarget {
 
 }
 
+
+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;
+        }
+        
+        .gray {
+            position: absolute;
+            background: rgba(255, 255, 255, 0.7);
+        }
+        
+
+        `;
+
+        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);
diff --git a/app/www/annotations.js b/app/www/annotations.js
index f09b3de..a0ab6ae 100644
--- a/app/www/annotations.js
+++ b/app/www/annotations.js
@@ -1,161 +1,3 @@
-class AnnotationPlayer extends HTMLElement {
-    constructor() {
-        super();
-        // We don't use constructor() because an element's attributes
-        // are unavailable until connected to the DOM.
-    }
-
-    connectedCallback() {
-        // Create a shadow root
-        this.attachShadow({ mode: "open" });
-
-        const imgEl = document.createElement('img');
-        const playerEl = document.createElement('div');
-
-
-        imgEl.src = `/annotation/${this.annotation.id}.svg`;
-        imgEl.addEventListener('click', () => {
-            imgEl.style.display = 'none';
-            new Annotator(
-                playerEl,
-                "tags.json",
-                this.annotation.url,
-                { is_player: true, crop_to_fit: true, autoplay: true }
-            );
-        })
-
-        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; */
-            position: relative;
-        }
-
-        .timecode {
-            position: absolute;
-            right: 100%;
-            width: 5%;
-            font-size: 8px;
-        }
-
-
-        .controls--playback input[type='range'] {
-            /* position: absolute;
-            z-index: 100;
-            bottom: 0;
-            left: 0;
-            right: 0; */
-            width: 100%;
-
-        }
-
-        .controls button.paused,
-        .controls button.playing {
-            position: absolute;
-            left: 100%;
-            width: 30px;
-            height: 30px;
-        }
-
-        .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;
-        }
-        
-        .gray {
-            position: absolute;
-            background: rgba(255, 255, 255, 0.7);
-        }
-        
-
-        `;
-
-        this.shadowRoot.appendChild(styleEl);
-        this.shadowRoot.appendChild(imgEl);
-        this.shadowRoot.appendChild(playerEl);
-
-    }
-
-    setAnnotation(annotation) {
-        this.annotation = annotation;
-    }
-}
-
-window.customElements.define('annotation-player', AnnotationPlayer);
-
-
 class AnnotationManager {
     constructor(rootEl, tagsUrl) {
         this.rootEl = rootEl;