Clicking on a video puts it in presentation mode
Adding the ability to put a video in presentation mode by clicking on it. Also, adding small CSS animations on hover.
This commit is contained in:
parent
15e7b88e2b
commit
13272968cf
28
front/dist/resources/style/style.css
vendored
28
front/dist/resources/style/style.css
vendored
@ -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%;
|
||||
}
|
||||
|
@ -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.
|
||||
*/
|
||||
|
Loading…
Reference in New Issue
Block a user