From b34d38f846e7e3e10b3b46ca6f30b539001d20ca Mon Sep 17 00:00:00 2001 From: Yoan Le Clanche Date: Mon, 11 Mar 2024 15:35:12 +0100 Subject: [PATCH] Fix issue with mobile and handle fullscreen --- teleforma/src/js/video/SyncVideoPlayer.ts | 1 - teleforma/src/js/video/VideoComponent.vue | 113 ++++++++-------- teleforma/src/js/video/VideoPlayer.ts | 134 ++++++++++++------- teleforma/static/teleforma/css/teleforma.css | 4 + teleforma/static/teleforma/dist/app.css | 2 +- teleforma/static/teleforma/dist/app.css.map | 2 +- teleforma/static/teleforma/dist/app.js | 6 +- teleforma/static/teleforma/dist/app.js.map | 2 +- 8 files changed, 153 insertions(+), 111 deletions(-) diff --git a/teleforma/src/js/video/SyncVideoPlayer.ts b/teleforma/src/js/video/SyncVideoPlayer.ts index 3eb5e4d9..1e26f5b9 100644 --- a/teleforma/src/js/video/SyncVideoPlayer.ts +++ b/teleforma/src/js/video/SyncVideoPlayer.ts @@ -182,7 +182,6 @@ class SyncVideoPlayer { } public async play() { - console.log("play") await this.moveStateTo(PlayerState.PLAYING, async () => { this.timeTo(this.currentTime); await Promise.all(this.videoPlayers.map(async video => { diff --git a/teleforma/src/js/video/VideoComponent.vue b/teleforma/src/js/video/VideoComponent.vue index f82d6f35..d52a9102 100644 --- a/teleforma/src/js/video/VideoComponent.vue +++ b/teleforma/src/js/video/VideoComponent.vue @@ -6,7 +6,6 @@ import SyncVideoPlayer from "./SyncVideoPlayer" const multivideos = (window as any).multivideos console.log(multivideos) - const syncVideoPlayer = new SyncVideoPlayer({ controls: false, loop: false, @@ -18,38 +17,37 @@ const ids = ref(Array.from({ length: multivideos.length }, (_, i) => `video-${i} onMounted(() => { syncVideoPlayer.mount() - const mainVideo = document.getElementById("main-video").querySelector("video") - - mainVideo.addEventListener("loadeddata", () => { - //Video should now be loaded but we can add a second check + // const mainVideo = document.getElementById("main-video").querySelector("video") - if (mainVideo.readyState >= 1) { - resizeVideoContainers() - } - }) - // resize videos containers on window resize - window.addEventListener("resize", resizeVideoContainers) + // mainVideo.addEventListener("loadeddata", () => { + // //Video should now be loaded but we can add a second check + // if (mainVideo.readyState >= 1) { + // resizeVideoContainers() + // } + // }) + // // resize videos containers on window resize + // window.addEventListener("resize", resizeVideoContainers) }) -function resizeVideoContainers() { - /** resize video containers so it fits a 2/3 - 1/3 */ - - console.log("resizeVideoContainers") - const mainVideoContainer = document.getElementById("main-video") - const mainVideoHeight = mainVideoContainer?.clientHeight - // set height to thumbnails list - const thumbnailsVideos = document.getElementById("thumbnails-videos") - // check if window size is less than 1280px (thumbnails wraps below in this case) - let thumbnailsVideoHeight = mainVideoHeight - if (window.innerWidth < 1280) { - thumbnailsVideoHeight = mainVideoHeight / 2 - - } - console.log(thumbnailsVideos, thumbnailsVideoHeight) - - thumbnailsVideos!.style.height = `${thumbnailsVideoHeight}px` -} +// function resizeVideoContainers() { +// /** resize video containers so it fits a 2/3 - 1/3 */ + +// console.log("resizeVideoContainers") +// const mainVideoContainer = document.getElementById("main-video") +// const mainVideoHeight = mainVideoContainer?.clientHeight +// // set height to thumbnails list +// const thumbnailsVideos = document.getElementById("thumbnails-videos") +// // check if window size is less than 1280px (thumbnails wraps below in this case) +// let thumbnailsVideoHeight = mainVideoHeight +// if (window.innerWidth < 1280) { +// thumbnailsVideoHeight = mainVideoHeight / 2 + +// } +// console.log(thumbnailsVideos, thumbnailsVideoHeight) + +// thumbnailsVideos!.style.height = `${thumbnailsVideoHeight}px` +// } async function onPlay() { await syncVideoPlayer.play() @@ -73,6 +71,10 @@ function onAdd() { }) } +function onFullscreen() { + document.getElementById("multivideo")!.requestFullscreen() +} + async function onClick(index: number) { syncVideoPlayer.swapVideo(0, index) } @@ -85,12 +87,21 @@ async function onChange(e: Event) {