host/xiaowang
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Add videos to gallery template and logic

Browse source
This commit is contained in:
Paul Nicoué 2022-05-10 16:24:40 +02:00
parent 568e1d3fad
commit 586763f249
138 changed files with 156 additions and 1420 deletions
Download patch file Download diff file Expand all files Collapse all files

74
assets/js/app.js
View file

@ -17,6 +17,11 @@ const navImage = document.querySelector('.home__nav-image');
// Declare empty circleTypes array for further use
const circleTypes = [];
// VIDEO PLAYERS //
const galleryVideos = document.querySelectorAll('.gallery__video');
let videoPlayers = [];
// ----------------------------------------------------------------------------
// UTILS
// ----------------------------------------------------------------------------
@ -183,6 +188,70 @@ function waveNavLinksOnHover() {
}
}
// VIDEO PLAYERS //
// Set up Plyr video players
function setUpVideoPlayers() {
if (galleryVideos.length !== 0) {
videoPlayers = Plyr.setup(galleryVideos, {
controls: [
'play-large',
'play',
'progress',
'current-time',
'duration',
'mute',
'volume',
'settings',
'fullscreen'
],
settings: [
'quality'
],
i18n: {
play: 'Lire',
pause: 'Mettre sur pause',
seek: 'Parcourir la piste audio',
currentTime: 'Temps écoulé depuis le début de la piste audio',
duration: 'Durée de la piste audio',
volume: 'Ajuster le volume',
mute: 'Couper le son',
unmute: 'Activer le son',
enterFullscreen: 'Activer le mode plein écran',
exitFullscreen: 'Quitter le mode plein écran'
},
tooltips: {
controls: true,
seek: true
},
quality: {
default: 720,
options: [
1080,
720,
480,
360,
240,
]
}
});
}
}
// Toggle videos full screen mode on Plyr enterfullscreen and exitfullscreen media events
function toggleVideosFullScreen() {
if (videoPlayers.length !== 0) {
for (let i = 0; i < videoPlayers.length; i++) {
videoPlayers[i].on('enterfullscreen', function(e) {
galleryVideos[i].classList.add('gallery__video--full-screen');
});
videoPlayers[i].on('exitfullscreen', function(e) {
galleryVideos[i].classList.remove('gallery__video--full-screen');
});
}
}
}
// ----------------------------------------------------------------------------
// PROGRAM
// ----------------------------------------------------------------------------
@ -199,3 +268,8 @@ window.addEventListener('load', function() {
editNavLinksOnResize();
waveNavLinksOnHover();
});
// VIDEO PLAYERS //
setUpVideoPlayers();
toggleVideosFullScreen();