From 3e66a541e3c17be85855ecce4a9ecf3a8881a7f1 Mon Sep 17 00:00:00 2001
From: _Bastler <_Bastler@bstly.de>
Date: Sun, 16 May 2021 18:48:48 +0200
Subject: [PATCH] add website focus overlay

---
 front/dist/index.tmpl.html                    |  4 +++
 .../resources/style/cowebsite-mobile.scss     |  3 +++
 front/dist/resources/style/cowebsite.scss     |  8 +++++-
 front/dist/resources/style/style.css          |  4 +--
 front/src/WebRtc/CoWebsiteManager.ts          | 27 ++++++++++++++++++-
 5 files changed, 42 insertions(+), 4 deletions(-)

diff --git a/front/dist/index.tmpl.html b/front/dist/index.tmpl.html
index ffcafb04..1af36d86 100644
--- a/front/dist/index.tmpl.html
+++ b/front/dist/index.tmpl.html
@@ -78,6 +78,10 @@
                 <button class="top-right-btn" id="cowebsite-close" alt="close the iframe">
                     <img src="resources/logos/close.svg"/>
                 </button>
+                <button class="top-right-btn" id="cowebsite-focus" alt="focus the iframe">
+                    <img id="cowebsite-focus-inactive" src="resources/logos/cinema.svg"/>
+                    <img id="cowebsite-focus-active" style="display: none;" src="resources/logos/cinema-close.svg"/>
+                </button>
             </div>
 
             <div id="audioplayerctrl" class="hidden">
diff --git a/front/dist/resources/style/cowebsite-mobile.scss b/front/dist/resources/style/cowebsite-mobile.scss
index 85b41511..2127f09a 100644
--- a/front/dist/resources/style/cowebsite-mobile.scss
+++ b/front/dist/resources/style/cowebsite-mobile.scss
@@ -43,6 +43,9 @@
         &#cowebsite-fullscreen {
           left: 0;
         }
+        &#cowebsite-focus {
+          left: 25px;
+        }
       }
     }
   }
diff --git a/front/dist/resources/style/cowebsite.scss b/front/dist/resources/style/cowebsite.scss
index a7f66600..fbae1ec0 100644
--- a/front/dist/resources/style/cowebsite.scss
+++ b/front/dist/resources/style/cowebsite.scss
@@ -4,12 +4,15 @@
   position: fixed;
   transition: transform 0.5s;
   background-color: white;
-  z-index: 999;
   
   &.loading {
     background-color: gray;
   }
 
+  &.focus {
+    z-index: 999;
+  }
+
   main {
     iframe {
       width: 100%;
@@ -85,6 +88,9 @@
       &#cowebsite-fullscreen {
         top: 25px;
       }
+      &#cowebsite-focus {
+        top: 50px;
+      }
     }
   }
 }
diff --git a/front/dist/resources/style/style.css b/front/dist/resources/style/style.css
index ee67ec2e..331506b6 100644
--- a/front/dist/resources/style/style.css
+++ b/front/dist/resources/style/style.css
@@ -166,8 +166,8 @@ video#myCamVideo {
     position: absolute;
     bottom: 0px;
     right: 0px;
-    width: 450px;
-    height: 150px;
+    width: 300px;
+    height: 50px;
 }
 
 
diff --git a/front/src/WebRtc/CoWebsiteManager.ts b/front/src/WebRtc/CoWebsiteManager.ts
index f58b2e67..460d348c 100644
--- a/front/src/WebRtc/CoWebsiteManager.ts
+++ b/front/src/WebRtc/CoWebsiteManager.ts
@@ -15,6 +15,9 @@ const cowebsiteCloseButtonId = 'cowebsite-close';
 const cowebsiteFullScreenButtonId = 'cowebsite-fullscreen';
 const cowebsiteOpenFullScreenImageId = 'cowebsite-fullscreen-open';
 const cowebsiteCloseFullScreenImageId = 'cowebsite-fullscreen-close';
+const cowebsiteFocusButtonId = 'cowebsite-focus';
+const cowebsiteFocusInactiveImageId = 'cowebsite-focus-inactive';
+const cowebsiteFocusActiveImageId = 'cowebsite-focus-active';
 const animationTime = 500; //time used by the css transitions, in ms.
 
 class CoWebsiteManager {
@@ -70,6 +73,9 @@ class CoWebsiteManager {
         HtmlUtils.getElementByIdOrFail(cowebsiteFullScreenButtonId).addEventListener('click', () => {
             this.fullscreen();
         });
+        HtmlUtils.getElementByIdOrFail(cowebsiteFocusButtonId).addEventListener('click', () => {
+            this.toggleFocus();
+        });
     }
 
     private initResizeListeners() {
@@ -90,6 +96,8 @@ class CoWebsiteManager {
             document.removeEventListener('mousemove', movecallback);
             this.getIframeDom().style.display = 'block';
             this.resizing = false;
+            HtmlUtils.getElementByIdOrFail(cowebsiteOpenFullScreenImageId).style.display = 'inline';
+            HtmlUtils.getElementByIdOrFail(cowebsiteCloseFullScreenImageId).style.display = 'none';
         });
     }
 
@@ -105,13 +113,26 @@ class CoWebsiteManager {
         this.opened = iframeStates.closed;
         this.resetStyle();
     }
+
+    private toggleFocus(): void {
+        if (this.cowebsiteDiv.classList.contains('focus')) {
+            this.cowebsiteDiv.classList.remove('focus');
+            HtmlUtils.getElementByIdOrFail(cowebsiteFocusInactiveImageId).style.display = 'inline';
+            HtmlUtils.getElementByIdOrFail(cowebsiteFocusActiveImageId).style.display = 'none';
+        } else {
+            this.cowebsiteDiv.classList.add('focus');
+            HtmlUtils.getElementByIdOrFail(cowebsiteFocusInactiveImageId).style.display = 'none';
+            HtmlUtils.getElementByIdOrFail(cowebsiteFocusActiveImageId).style.display = 'inline';
+        }
+    }
+
     private load(): void {
         this.cowebsiteDiv.classList.remove('hidden'); //edit the css class to trigger the transition
         this.cowebsiteDiv.classList.add('loading');
         this.opened = iframeStates.loading;
     }
     private open(): void {
-        this.cowebsiteDiv.classList.remove('loading', 'hidden'); //edit the css class to trigger the transition
+        this.cowebsiteDiv.classList.remove('loading', 'hidden', 'focus'); //edit the css class to trigger the transition
         this.opened = iframeStates.opened;
         this.resetStyle();
     }
@@ -119,6 +140,10 @@ class CoWebsiteManager {
     public resetStyle() {
         this.cowebsiteDiv.style.width = '';
         this.cowebsiteDiv.style.height = '';
+        HtmlUtils.getElementByIdOrFail(cowebsiteFocusInactiveImageId).style.display = 'inline';
+        HtmlUtils.getElementByIdOrFail(cowebsiteFocusActiveImageId).style.display = 'none';
+        HtmlUtils.getElementByIdOrFail(cowebsiteOpenFullScreenImageId).style.display = 'inline';
+        HtmlUtils.getElementByIdOrFail(cowebsiteCloseFullScreenImageId).style.display = 'none';
     }
 
     private getIframeDom(): HTMLIFrameElement {