lbehm/workadventure
1
0
Fork 0
Code Issues Pull requests Releases Activity

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

Browse source 
Cannot rezise main cowebsite when fullscreen is enable
This commit is contained in:
David Négrier 2021-11-29 18:37:36 +01:00 committed by GitHub
parent 233c3d1abe 812485f863
commit 591467f1e3
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 24 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

26
front/src/WebRtc/CoWebsiteManager.ts
View file

@ -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";
HtmlUtils.getElementByIdOrFail(cowebsiteCloseFullScreenImageId).style.display = "none";
this.cowebsiteAsideHolderDom.style.visibility = "visible";
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";
HtmlUtils.getElementByIdOrFail(cowebsiteCloseFullScreenImageId).style.display = "inline";
this.cowebsiteAsideHolderDom.style.visibility = "hidden";
openFullscreenImage.style.display = "none";
closeFullScreenImage.style.display = "inline";
}
}
}

9
front/style/cowebsite.scss
View file

@ -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;
}
}
}