From aa80cf415bf3a50a6a3460ba54c09ce6e2d4b79f Mon Sep 17 00:00:00 2001 From: Sanne de Vries Date: Tue, 14 Dec 2021 16:51:00 +0100 Subject: [PATCH] Refined video controls behaviour Refs https://github.com/TryGhost/Team/issues/1229 --- core/frontend/src/cards/js/video.js | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) diff --git a/core/frontend/src/cards/js/video.js b/core/frontend/src/cards/js/video.js index 3336f7e6af..55572cea92 100644 --- a/core/frontend/src/cards/js/video.js +++ b/core/frontend/src/cards/js/video.js @@ -1,6 +1,7 @@ (function() { const handleVideoPlayer = function (videoElementContainer) { - const videoPlayerContainer = videoElementContainer.querySelector('.kg-video-player'); + const videoPlayer = videoElementContainer.querySelector('.kg-video-player'); + const videoPlayerContainer = videoElementContainer.querySelector('.kg-video-player-container'); const playIconContainer = videoElementContainer.querySelector('.kg-video-play-icon'); const pauseIconContainer = videoElementContainer.querySelector('.kg-video-pause-icon'); const seekSlider = videoElementContainer.querySelector('.kg-video-seek-slider'); @@ -36,16 +37,16 @@ const whilePlaying = () => { seekSlider.value = Math.floor(videoEl.currentTime); currentTimeContainer.textContent = calculateTime(seekSlider.value); - videoPlayerContainer.style.setProperty('--seek-before-width', `${seekSlider.value / seekSlider.max * 100}%`); + videoPlayer.style.setProperty('--seek-before-width', `${seekSlider.value / seekSlider.max * 100}%`); raf = requestAnimationFrame(whilePlaying); } const showRangeProgress = (rangeInput) => { if (rangeInput === seekSlider) { - videoPlayerContainer.style.setProperty('--seek-before-width', rangeInput.value / rangeInput.max * 100 + '%'); + videoPlayer.style.setProperty('--seek-before-width', rangeInput.value / rangeInput.max * 100 + '%'); } else { - videoPlayerContainer.style.setProperty('--volume-before-width', rangeInput.value / rangeInput.max * 100 + '%'); + videoPlayer.style.setProperty('--volume-before-width', rangeInput.value / rangeInput.max * 100 + '%'); } } @@ -67,7 +68,7 @@ const displayBufferedAmount = () => { if (videoEl.buffered.length > 0) { const bufferedAmount = Math.floor(videoEl.buffered.end(videoEl.buffered.length - 1)); - videoPlayerContainer.style.setProperty('--buffered-width', `${(bufferedAmount / seekSlider.max) * 100}%`); + videoPlayer.style.setProperty('--buffered-width', `${(bufferedAmount / seekSlider.max) * 100}%`); } }