TryGhost/Ghost
1
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2024-09-22 02:19:59 +03:00
Code Issues Projects Releases Wiki Activity

Refined video controls behaviour

Browse Source 
Refs https://github.com/TryGhost/Team/issues/1229
This commit is contained in:
Sanne de Vries 2021-12-14 16:51:00 +01:00
parent 79a48df75c
commit aa80cf415b
1 changed files with 6 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
core/frontend/src/cards/js/video.js
View File

@ -1,6 +1,7 @@
(function() { (function() {
const handleVideoPlayer = function (videoElementContainer) { 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 playIconContainer = videoElementContainer.querySelector('.kg-video-play-icon');
const pauseIconContainer = videoElementContainer.querySelector('.kg-video-pause-icon'); const pauseIconContainer = videoElementContainer.querySelector('.kg-video-pause-icon');
const seekSlider = videoElementContainer.querySelector('.kg-video-seek-slider'); const seekSlider = videoElementContainer.querySelector('.kg-video-seek-slider');
@ -36,16 +37,16 @@
const whilePlaying = () => { const whilePlaying = () => {
seekSlider.value = Math.floor(videoEl.currentTime); seekSlider.value = Math.floor(videoEl.currentTime);
currentTimeContainer.textContent = calculateTime(seekSlider.value); 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); raf = requestAnimationFrame(whilePlaying);
} }
const showRangeProgress = (rangeInput) => { const showRangeProgress = (rangeInput) => {
if (rangeInput === seekSlider) { 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 { 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 = () => { const displayBufferedAmount = () => {
if (videoEl.buffered.length > 0) { if (videoEl.buffered.length > 0) {
const bufferedAmount = Math.floor(videoEl.buffered.end(videoEl.buffered.length - 1)); 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}%`);
} }
} }