diff --git a/front/dist/resources/style/style.css b/front/dist/resources/style/style.css index 8d232fb5..2dbba223 100644 --- a/front/dist/resources/style/style.css +++ b/front/dist/resources/style/style.css @@ -256,6 +256,10 @@ body { .sidebar > div { max-height: 21%; } + + .sidebar > div:hover { + max-height: 25%; + } } @media (max-aspect-ratio: 1/1) { .main-container { @@ -274,6 +278,10 @@ body { .sidebar > div { max-width: 21%; } + + .sidebar > div:hover { + max-width: 25%; + } } .game { @@ -324,9 +332,16 @@ body { .main-section > div { margin: 2%; flex-basis: 96%; + transition: margin-left 0.2s, margin-right 0.2s, margin-bottom 0.2s, margin-top 0.2s, flex-basis 0.2s; + cursor: pointer; /*flex-shrink: 2;*/ } +.main-section > div:hover { + margin: 0%; + flex-basis: 100%; +} + .sidebar { flex: 0 0 25%; display: flex; @@ -334,6 +349,12 @@ body { .sidebar > div { margin: 2%; + transition: margin-left 0.2s, margin-right 0.2s, margin-bottom 0.2s, margin-top 0.2s, max-height 0.2s, max-width 0.2s; + cursor: pointer; +} + +.sidebar > div:hover { + margin: 0%; } /* Let's make sure videos are vertically centered if they need to be cropped */ @@ -354,11 +375,16 @@ body { padding: 1%; } -.chat-mode div { +.chat-mode > div { margin: 1%; max-height: 96%; + transition: margin-left 0.2s, margin-right 0.2s, margin-bottom 0.2s, margin-top 0.2s; + cursor: pointer; } +.chat-mode > div:hover { + margin: 0%; +} .chat-mode.one-col > div { flex-basis: 98%; } diff --git a/front/src/WebRtc/LayoutManager.ts b/front/src/WebRtc/LayoutManager.ts index 575b0bb2..02818c78 100644 --- a/front/src/WebRtc/LayoutManager.ts +++ b/front/src/WebRtc/LayoutManager.ts @@ -42,6 +42,14 @@ class LayoutManager { div.innerHTML = html; div.id = "user-"+userId; div.className = "media-container" + div.onclick = () => { + const parentId = div.parentElement?.id; + if (parentId === 'sidebar' || parentId === 'chat-mode') { + this.focusOn(userId); + } else { + this.removeFocusOn(userId); + } + } if (importance === DivImportance.Important) { this.importantDivs.set(userId, div); @@ -76,6 +84,48 @@ class LayoutManager { } } + /** + * Put the screen in presentation mode and move elem in presentation mode (and all other videos in normal mode) + */ + private focusOn(userId: string): void { + const focusedDiv = this.getDivByUserId(userId); + for (const [importantUserId, importantDiv] of this.importantDivs.entries()) { + //this.positionDiv(importantDiv, DivImportance.Normal); + this.importantDivs.delete(importantUserId); + this.normalDivs.set(importantUserId, importantDiv); + } + this.normalDivs.delete(userId); + this.importantDivs.set(userId, focusedDiv); + //this.positionDiv(focusedDiv, DivImportance.Important); + this.switchLayoutMode(LayoutMode.Presentation); + } + + /** + * Removes userId from presentation mode + */ + private removeFocusOn(userId: string): void { + const importantDiv = this.importantDivs.get(userId); + if (importantDiv === undefined) { + throw new Error('Div with user id "'+userId+'" is not in important mode'); + } + this.normalDivs.set(userId, importantDiv); + this.importantDivs.delete(userId); + + this.positionDiv(importantDiv, DivImportance.Normal); + } + + private getDivByUserId(userId: string): HTMLDivElement { + let div = this.importantDivs.get(userId); + if (div !== undefined) { + return div; + } + div = this.normalDivs.get(userId); + if (div !== undefined) { + return div; + } + throw new Error('Could not find media with user id '+userId); + } + /** * Removes the DIV matching userId. */