Merge pull request #243 from thecodingmachine/zoom_on_video

Clicking on a video puts it in presentation mode
This commit is contained in:
David Négrier 2020-08-27 10:26:02 +02:00 committed by GitHub
commit 4d90d4b50b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 77 additions and 1 deletions

View File

@ -256,6 +256,10 @@ body {
.sidebar > div { .sidebar > div {
max-height: 21%; max-height: 21%;
} }
.sidebar > div:hover {
max-height: 25%;
}
} }
@media (max-aspect-ratio: 1/1) { @media (max-aspect-ratio: 1/1) {
.main-container { .main-container {
@ -274,6 +278,10 @@ body {
.sidebar > div { .sidebar > div {
max-width: 21%; max-width: 21%;
} }
.sidebar > div:hover {
max-width: 25%;
}
} }
.game { .game {
@ -324,9 +332,16 @@ body {
.main-section > div { .main-section > div {
margin: 2%; margin: 2%;
flex-basis: 96%; 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;*/ /*flex-shrink: 2;*/
} }
.main-section > div:hover {
margin: 0%;
flex-basis: 100%;
}
.sidebar { .sidebar {
flex: 0 0 25%; flex: 0 0 25%;
display: flex; display: flex;
@ -334,6 +349,12 @@ body {
.sidebar > div { .sidebar > div {
margin: 2%; 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 */ /* Let's make sure videos are vertically centered if they need to be cropped */
@ -354,11 +375,16 @@ body {
padding: 1%; padding: 1%;
} }
.chat-mode div { .chat-mode > div {
margin: 1%; margin: 1%;
max-height: 96%; 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 { .chat-mode.one-col > div {
flex-basis: 98%; flex-basis: 98%;
} }

View File

@ -42,6 +42,14 @@ class LayoutManager {
div.innerHTML = html; div.innerHTML = html;
div.id = "user-"+userId; div.id = "user-"+userId;
div.className = "media-container" 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) { if (importance === DivImportance.Important) {
this.importantDivs.set(userId, div); 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. * Removes the DIV matching userId.
*/ */