From 8d5971753d103dfcbf1fe644f86d5e83d7ffbce1 Mon Sep 17 00:00:00 2001 From: Sebastian Date: Wed, 10 Jan 2024 15:05:01 +0100 Subject: [PATCH 1/3] Fixed bug with fullscreen mode and also created new function for double press on player so the fullscreen won't break --- web/ts/splitview.ts | 21 ++++++++++++++++----- 1 file changed, 16 insertions(+), 5 deletions(-) diff --git a/web/ts/splitview.ts b/web/ts/splitview.ts index 34a3e4e03..7030d9c67 100644 --- a/web/ts/splitview.ts +++ b/web/ts/splitview.ts @@ -1,6 +1,8 @@ import { getPlayers } from "./TUMLiveVjs"; import Split from "split.js"; import { cloneEvents } from "./global"; +import videojs, {VideoJsPlayer} from "video.js"; +import PlayerOptions = videojs.PlayerOptions; const mouseMovingTimeout = 2200; @@ -152,12 +154,21 @@ export class SplitView { fullscreenToggle.off("click"); fullscreenToggle.on("click", async () => { - if (document.fullscreenElement === null) { - await this.splitParent.requestFullscreen(); - } else { - await document.exitFullscreen(); - } + await this.toggleFullscreen(); }); + + (this.players[0] as VideoJsPlayer).options_.userActions.doubleClick = async () => await this.toggleFullscreen(); + (this.players[1] as VideoJsPlayer).options_.userActions.doubleClick = async () => await this.toggleFullscreen(); + + this.splitParent.addEventListener("fullscreenchange", () => this.update(25)) + } + + private async toggleFullscreen() { + if (document.fullscreenElement === null) { + await this.splitParent.requestFullscreen(); + } else { + await document.exitFullscreen(); + } } private setTrackBarModes(k: number, mode: string) { From 6e8ed9cc2db7f388706744d2c2cb84156dbde947 Mon Sep 17 00:00:00 2001 From: johanneskarrer Date: Thu, 24 Oct 2024 12:39:03 +0200 Subject: [PATCH 2/3] fixed control bar and subtitle fullscreen resize bug --- web/ts/splitview.ts | 39 ++++++++++++++++----------------------- 1 file changed, 16 insertions(+), 23 deletions(-) diff --git a/web/ts/splitview.ts b/web/ts/splitview.ts index 7030d9c67..523358414 100644 --- a/web/ts/splitview.ts +++ b/web/ts/splitview.ts @@ -39,16 +39,16 @@ export class SplitView { this.videoWrapperResizeObs.observe(this.videoWrapper); this.detectMouseNotMoving(); - this.players[0].ready(() => { + this.players[1].ready(() => { this.setTrackBarModes(0, "disabled"); }); - this.players[1].ready(() => { + this.players[0].ready(() => { this.setupControlBars(); this.overwriteFullscreenToggle(); }); - cloneEvents(this.players[0].el(), this.players[1].el(), ["mousemove", "mouseenter", "mouseleave"]); + cloneEvents(this.players[1].el(), this.players[0].el(), ["mousemove", "mouseenter", "mouseleave"]); // Setup splitview // eslint-disable-next-line @typescript-eslint/no-this-alias @@ -109,15 +109,15 @@ export class SplitView { } private setupControlBars() { - this.players[0].controlBar.hide(); - this.players[0].muted(true); + this.players[1].controlBar.hide(); + this.players[1].muted(true); - this.players[1].el().addEventListener("fullscreenchange", () => { + this.players[0].el().addEventListener("fullscreenchange", () => { this.isFullscreen = document.fullscreenElement !== null; this.updateControlBarSize(this.getSizes()); }); - const mainControlBarElem = this.players[1].controlBar.el(); + const mainControlBarElem = this.players[0].controlBar.el(); mainControlBarElem.style.position = "absolute"; mainControlBarElem.style.zIndex = "1"; @@ -128,29 +128,24 @@ export class SplitView { const wrapperSize = this.videoWrapper.getBoundingClientRect().width; let marginLeft; - if (this.isFullscreen) { - marginLeft = "0"; - } else if (sizes[0] === 100) { - marginLeft = `${this.gutterWidth / 2 - wrapperSize}px`; //`calc(${this.gutterWidth / 2}px - 100vw)`; - } else if (sizes[0] === 0) { - marginLeft = `-${this.gutterWidth / 2}px`; + if (sizes[0] === 0) { + marginLeft = `${this.gutterWidth / 2}px`; } else { - const leftContainerWidth = (sizes[0] * wrapperSize) / 100; - marginLeft = `-${leftContainerWidth}px`; + marginLeft = `0px`; } - - const mainControlBarElem = this.players[1].controlBar.el(); - mainControlBarElem.style.marginLeft = marginLeft; + const mainControlBarElem = this.players[0].controlBar.el(); mainControlBarElem.style.width = `${wrapperSize}px`; + mainControlBarElem.style.marginLeft = marginLeft; - const textTrackDisplay = this.players[1].el_.querySelector(".vjs-text-track-display"); + const textTrackDisplay = this.players[0].el_.querySelector(".vjs-text-track-display"); if (textTrackDisplay) { - textTrackDisplay.style.left = marginLeft; + textTrackDisplay.style.width = `${wrapperSize}px`; + textTrackDisplay.style.zIndex = "1"; } } private overwriteFullscreenToggle() { - const fullscreenToggle = this.players[1].controlBar.fullscreenToggle; + const fullscreenToggle = this.players[0].controlBar.fullscreenToggle; fullscreenToggle.off("click"); fullscreenToggle.on("click", async () => { @@ -159,8 +154,6 @@ export class SplitView { (this.players[0] as VideoJsPlayer).options_.userActions.doubleClick = async () => await this.toggleFullscreen(); (this.players[1] as VideoJsPlayer).options_.userActions.doubleClick = async () => await this.toggleFullscreen(); - - this.splitParent.addEventListener("fullscreenchange", () => this.update(25)) } private async toggleFullscreen() { From e68e6e9e41cc48f7ada7d2e8be1ede13d95bafc2 Mon Sep 17 00:00:00 2001 From: johanneskarrer Date: Thu, 24 Oct 2024 13:05:56 +0200 Subject: [PATCH 3/3] prettier fix --- web/ts/splitview.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/web/ts/splitview.ts b/web/ts/splitview.ts index 523358414..b97d49632 100644 --- a/web/ts/splitview.ts +++ b/web/ts/splitview.ts @@ -1,7 +1,7 @@ import { getPlayers } from "./TUMLiveVjs"; import Split from "split.js"; import { cloneEvents } from "./global"; -import videojs, {VideoJsPlayer} from "video.js"; +import videojs, { VideoJsPlayer } from "video.js"; import PlayerOptions = videojs.PlayerOptions; const mouseMovingTimeout = 2200;