More player controls

app/www/annotate.js

@@ -153,6 +153,7 @@ class Annotator extends EventTarget {
         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');
@@ -202,6 +203,31 @@ class Annotator extends EventTarget {
             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 = "…";
+            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);
+
         }
 
 
@@ -1093,6 +1119,11 @@ class Annotator extends EventTarget {
 
     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();
     }
 
@@ -1630,11 +1661,46 @@ class AnnotationPlayer extends HTMLElement {
             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);
         }
         
+        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;
+        }
 
         `;