From 23283212d6d93251dc18ed106dda3dc42a5b397c Mon Sep 17 00:00:00 2001
From: Ruben van de Ven <git@rubenvandeven.com>
Date: Mon, 27 Feb 2023 20:04:38 +0100
Subject: [PATCH] Format controls and add Fullscreen option

---
 app/www/annotate.js | 64 ++++++++++++++++++++++++++++++++++++++++-----
 1 file changed, 57 insertions(+), 7 deletions(-)

diff --git a/app/www/annotate.js b/app/www/annotate.js
index 6938e3f..e3c3f83 100644
--- a/app/www/annotate.js
+++ b/app/www/annotate.js
@@ -241,12 +241,23 @@ class Annotator extends EventTarget {
 
             const extraControlsEl = document.createElement('ul');
 
-            // TODO: add handlers
+            const toggleFutureHeaderEl = document.createElement('li');
+            toggleFutureHeaderEl.classList.add('config-header', 'config-future');
+            toggleFutureHeaderEl.innerText = "Preview drawing";
+            extraControlsEl.appendChild(toggleFutureHeaderEl);
+
+            // TODO: add handlers to change text
             const toggleFutureEl = document.createElement('li');
-            toggleFutureEl.innerText = "Show preview"
+            toggleFutureEl.classList.add('config-future');
+            toggleFutureEl.innerText = "Show"
             toggleFutureEl.addEventListener('click', () => this.wrapperEl.classList.toggle('hide-drawing-preview'));
             extraControlsEl.appendChild(toggleFutureEl);
 
+            const toggleCropHeaderEl = document.createElement('li');
+            toggleCropHeaderEl.classList.add('config-header');
+            toggleCropHeaderEl.innerText = "Crop";
+            extraControlsEl.appendChild(toggleCropHeaderEl);
+            
             this.toggleCropPlayerEl = document.createElement('li');
             this.toggleCropPlayerEl.innerText = CropDescriptions[this.config.crop];
             this.toggleCropPlayerEl.addEventListener('click', () => this.toggleCrop());
@@ -256,6 +267,21 @@ class Annotator extends EventTarget {
 
             this.playbackControlsEl.appendChild(extraEl);
 
+
+
+            const fullScreenEl = document.createElement('div');
+            fullScreenEl.classList.add('controls-fs');
+            fullScreenEl.innerHTML = "&#x26F6;";
+            fullScreenEl.addEventListener('click', () => {
+                if(document.fullscreenElement) {
+                    document.exitFullscreen();
+                } else {
+                    // console.log(this.wrapperEl, this.shadowRoot);
+                    this.wrapperEl.requestFullscreen();
+                }
+            })
+            this.playbackControlsEl.appendChild(fullScreenEl);
+
         }
 
 
@@ -1551,7 +1577,12 @@ class AnnotationPlayer extends HTMLElement {
         // Create a shadow root
         this.attachShadow({ mode: "open" });
 
+        const imgWrapEl = document.createElement('div');
+        imgWrapEl.classList.add('imgWrap');
+
         const imgEl = document.createElement('img');
+        imgWrapEl.appendChild(imgEl);
+
         const playerEl = document.createElement('div');
 
         const config = {
@@ -1578,8 +1609,10 @@ class AnnotationPlayer extends HTMLElement {
         styleEl.textContent = `
         :host{
             overflow: hidden;
-            padding: 10px;
+        }
 
+        div.play, div.imgWrap {
+            padding: 10px;
             background: white;
         }
         
@@ -1656,6 +1689,15 @@ class AnnotationPlayer extends HTMLElement {
             line-height: 1;
         }
 
+        .controls .controls-fs {
+            width: 30px;
+            text-align: center;
+            cursor: pointer;
+        }
+        .controls .controls-fs:hover {
+            font-weight:bold;
+        }
+
         .controls button.paused::before {
             content: '⏵';
         }
@@ -1739,7 +1781,7 @@ class AnnotationPlayer extends HTMLElement {
 
         details > ul{
             position: absolute;
-            bottom: 30px;
+            bottom: 35px;
             background: rgba(0,0,0, .5);
             border-radius: 3px;
             right: 0;
@@ -1747,25 +1789,33 @@ class AnnotationPlayer extends HTMLElement {
             margin: 0;
             list-style: none;
             font-size: 10pt;
+            width: 150px;
         }
 
-        details > ul li:hover{
+        details > ul li:not(.config-header):hover{
             cursor: pointer;
             text-decoration: underline;
         }
 
+        details .config-header {
+            font-weight: bold;
+        }
+
         .play:not(.hide-drawing-preview) details > ul li:first-child{
             /*text-decoration: line-through;*/
             font-weight:bold;
         }
         .play.crop-selection details > ul li:nth-child(2){
             /*text-decoration: line-through;*/
-            font-weight:bold;
+            /*font-weight:bold;*/
+        }
+        .play:not(.crop-selection) details .config-future{
+            display:none;
         }
         `;
 
         this.shadowRoot.appendChild(styleEl);
-        this.shadowRoot.appendChild(imgEl);
+        this.shadowRoot.appendChild(imgWrapEl);
         this.shadowRoot.appendChild(playerEl);
 
     }