Merge pull request #1603 from thecodingmachine/fix-black-screen

Cannot rezise main cowebsite when fullscreen is enable

front/src/WebRtc/CoWebsiteManager.ts

@@ -15,6 +15,7 @@ const cowebsiteContainerDomId = "cowebsite-container"; // the id of the whole co
 const cowebsiteMainDomId = "cowebsite-slot-0"; // the id of the parent div of the iframe.
 const cowebsiteBufferDomId = "cowebsite-buffer"; // the id of the container who contains cowebsite iframes.
 const cowebsiteAsideDomId = "cowebsite-aside"; // the id of the parent div of the iframe.
+const cowebsiteAsideHolderDomId = "cowebsite-aside-holder";
 const cowebsiteSubIconsDomId = "cowebsite-sub-icons";
 export const cowebsiteCloseButtonId = "cowebsite-close";
 const cowebsiteFullScreenButtonId = "cowebsite-fullscreen";
@@ -54,6 +55,7 @@ class CoWebsiteManager {
     private cowebsiteMainDom: HTMLDivElement;
     private cowebsiteBufferDom: HTMLDivElement;
     private cowebsiteAsideDom: HTMLDivElement;
+    private cowebsiteAsideHolderDom: HTMLDivElement;
     private cowebsiteSubIconsDom: HTMLDivElement;
     private previousTouchMoveCoordinates: TouchMoveCoordinates | null = null; //only use on touchscreens to track touch movement
 
@@ -99,6 +101,7 @@ class CoWebsiteManager {
         this.cowebsiteMainDom = HtmlUtils.getElementByIdOrFail<HTMLDivElement>(cowebsiteMainDomId);
         this.cowebsiteBufferDom = HtmlUtils.getElementByIdOrFail<HTMLDivElement>(cowebsiteBufferDomId);
         this.cowebsiteAsideDom = HtmlUtils.getElementByIdOrFail<HTMLDivElement>(cowebsiteAsideDomId);
+        this.cowebsiteAsideHolderDom = HtmlUtils.getElementByIdOrFail<HTMLDivElement>(cowebsiteAsideHolderDomId);
         this.cowebsiteSubIconsDom = HtmlUtils.getElementByIdOrFail<HTMLDivElement>(cowebsiteSubIconsDomId);
         this.initResizeListeners();
 
@@ -188,21 +191,23 @@ class CoWebsiteManager {
             this.fire();
         };
 
-        this.cowebsiteAsideDom.addEventListener("mousedown", (event) => {
+        this.cowebsiteAsideHolderDom.addEventListener("mousedown", (event) => {
+            if (this.isFullScreen) return;
             this.cowebsiteMainDom.style.display = "none";
             this.resizing = true;
             document.addEventListener("mousemove", movecallback);
         });
 
         document.addEventListener("mouseup", (event) => {
-            if (!this.resizing) return;
+            if (!this.resizing || this.isFullScreen) return;
             document.removeEventListener("mousemove", movecallback);
             this.cowebsiteMainDom.style.display = "block";
             this.resizing = false;
             this.cowebsiteMainDom.style.display = "flex";
         });
 
-        this.cowebsiteAsideDom.addEventListener("touchstart", (event) => {
+        this.cowebsiteAsideHolderDom.addEventListener("touchstart", (event) => {
+            if (this.isFullScreen) return;
             this.cowebsiteMainDom.style.display = "none";
             this.resizing = true;
             const touchEvent = event.touches[0];
@@ -211,7 +216,7 @@ class CoWebsiteManager {
         });
 
         document.addEventListener("touchend", (event) => {
-            if (!this.resizing) return;
+            if (!this.resizing || this.isFullScreen) return;
             this.previousTouchMoveCoordinates = null;
             document.removeEventListener("touchmove", movecallback);
             this.cowebsiteMainDom.style.display = "block";
@@ -640,17 +645,22 @@ class CoWebsiteManager {
     }
 
     private fullscreen(): void {
+        const openFullscreenImage = HtmlUtils.getElementByIdOrFail(cowebsiteOpenFullScreenImageId);
+        const closeFullScreenImage = HtmlUtils.getElementByIdOrFail(cowebsiteCloseFullScreenImageId);
+
         if (this.isFullScreen) {
             this.resetStyleMain();
             this.fire();
             //we don't trigger a resize of the phaser game since it won't be visible anyway.
-            HtmlUtils.getElementByIdOrFail(cowebsiteOpenFullScreenImageId).style.display = "inline";
+            this.cowebsiteAsideHolderDom.style.visibility = "visible";
-            HtmlUtils.getElementByIdOrFail(cowebsiteCloseFullScreenImageId).style.display = "none";
+            openFullscreenImage.style.display = "inline";
+            closeFullScreenImage.style.display = "none";
         } else {
             this.verticalMode ? (this.height = window.innerHeight) : (this.width = window.innerWidth);
             //we don't trigger a resize of the phaser game since it won't be visible anyway.
-            HtmlUtils.getElementByIdOrFail(cowebsiteOpenFullScreenImageId).style.display = "none";
+            this.cowebsiteAsideHolderDom.style.visibility = "hidden";
-            HtmlUtils.getElementByIdOrFail(cowebsiteCloseFullScreenImageId).style.display = "inline";
+            openFullscreenImage.style.display = "none";
+            closeFullScreenImage.style.display = "inline";
         }
     }
 }

front/style/cowebsite.scss

@@ -28,7 +28,7 @@
     justify-content: space-between;
 
     #cowebsite-aside-holder {
-      pointer-events: none;
+      background: gray;
       height: 20px;
       flex: 1;
       display: flex;
@@ -38,6 +38,7 @@
 
       img {
         width: 80%;
+        pointer-events: none;
       }
     }
 
@@ -206,12 +207,14 @@
 
     aside {
       width: 30px;
-      cursor: ew-resize;
 
       img {
-        cursor: ew-resize;
         transform: rotate(90deg);
       }
     }
+
+    &-aside-holder {
+      cursor: ew-resize;
+    }
   }
 }