diff --git a/front/dist/resources/style/style.css b/front/dist/resources/style/style.css index 2dbba223..807544ad 100644 --- a/front/dist/resources/style/style.css +++ b/front/dist/resources/style/style.css @@ -299,12 +299,11 @@ body { flex-basis: 100%; }*/ -.cowebsite iframe { +.cowebsite > iframe { width: 100%; height: 100%; } - .game-overlay { display: none; position: absolute; diff --git a/front/src/WebRtc/LayoutManager.ts b/front/src/WebRtc/LayoutManager.ts index 02818c78..dc013563 100644 --- a/front/src/WebRtc/LayoutManager.ts +++ b/front/src/WebRtc/LayoutManager.ts @@ -204,6 +204,7 @@ class LayoutManager { * Tries to find the biggest available box of remaining space (this is a space where we can center the character) */ public findBiggestAvailableArray(): {xStart: number, yStart: number, xEnd: number, yEnd: number} { + const game = HtmlUtils.getElementByIdOrFail('game'); if (this.mode === LayoutMode.VideoChat) { const children = document.querySelectorAll('div.chat-mode > div'); const htmlChildren = Array.from(children.values()); @@ -213,27 +214,27 @@ class LayoutManager { return { xStart: 0, yStart: 0, - xEnd: window.innerWidth, - yEnd: window.innerHeight + xEnd: game.offsetWidth, + yEnd: game.offsetHeight } } const lastDiv = htmlChildren[htmlChildren.length - 1]; // Compute area between top right of the last div and bottom right of window - const area1 = (window.innerWidth - (lastDiv.offsetLeft + lastDiv.offsetWidth)) - * (window.innerHeight - lastDiv.offsetTop); + const area1 = (game.offsetWidth - (lastDiv.offsetLeft + lastDiv.offsetWidth)) + * (game.offsetHeight - lastDiv.offsetTop); // Compute area between bottom of last div and bottom of the screen on whole width - const area2 = window.innerWidth - * (window.innerHeight - (lastDiv.offsetTop + lastDiv.offsetHeight)); + const area2 = game.offsetWidth + * (game.offsetHeight - (lastDiv.offsetTop + lastDiv.offsetHeight)); if (area1 < 0 && area2 < 0) { // If screen is full, let's not attempt something foolish and simply center character in the middle. return { xStart: 0, yStart: 0, - xEnd: window.innerWidth, - yEnd: window.innerHeight + xEnd: game.offsetWidth, + yEnd: game.offsetHeight } } if (area1 <= area2) { @@ -241,16 +242,16 @@ class LayoutManager { return { xStart: 0, yStart: lastDiv.offsetTop + lastDiv.offsetHeight, - xEnd: window.innerWidth, - yEnd: window.innerHeight + xEnd: game.offsetWidth, + yEnd: game.offsetHeight } } else { console.log('lastDiv', lastDiv.offsetTop); return { xStart: lastDiv.offsetLeft + lastDiv.offsetWidth, yStart: lastDiv.offsetTop, - xEnd: window.innerWidth, - yEnd: window.innerHeight + xEnd: game.offsetWidth, + yEnd: game.offsetHeight } } } else { @@ -263,15 +264,15 @@ class LayoutManager { return { xStart: 0, yStart: 0, - xEnd: window.innerWidth, - yEnd: window.innerHeight + xEnd: game.offsetWidth, + yEnd: game.offsetHeight } } // At this point, we know we have at least one element in the main section. const lastPresentationDiv = mainSectionChildren[mainSectionChildren.length-1]; - const presentationArea = (window.innerHeight - (lastPresentationDiv.offsetTop + lastPresentationDiv.offsetHeight)) + const presentationArea = (game.offsetHeight - (lastPresentationDiv.offsetTop + lastPresentationDiv.offsetHeight)) * (lastPresentationDiv.offsetLeft + lastPresentationDiv.offsetWidth); let leftSideBar: number; @@ -284,22 +285,22 @@ class LayoutManager { leftSideBar = lastSideBarChildren.offsetLeft; bottomSideBar = lastSideBarChildren.offsetTop + lastSideBarChildren.offsetHeight; } - const sideBarArea = (window.innerWidth - leftSideBar) - * (window.innerHeight - bottomSideBar); + const sideBarArea = (game.offsetWidth - leftSideBar) + * (game.offsetHeight - bottomSideBar); if (presentationArea <= sideBarArea) { return { xStart: leftSideBar, yStart: bottomSideBar, - xEnd: window.innerWidth, - yEnd: window.innerHeight + xEnd: game.offsetWidth, + yEnd: game.offsetHeight } } else { return { xStart: 0, yStart: lastPresentationDiv.offsetTop + lastPresentationDiv.offsetHeight, - xEnd: /*lastPresentationDiv.offsetLeft + lastPresentationDiv.offsetWidth*/ window.innerWidth , // To avoid flickering when a chat start, we center on the center of the screen, not the center of the main content area - yEnd: window.innerHeight + xEnd: /*lastPresentationDiv.offsetLeft + lastPresentationDiv.offsetWidth*/ game.offsetWidth , // To avoid flickering when a chat start, we center on the center of the screen, not the center of the main content area + yEnd: game.offsetHeight } } }