Paris8/vidarousel
Archived
Template
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

* remove video size

Browse source 
* center video even with buttons
* add once property to the video listener so the buttons are added only once
This commit is contained in:
Mylloon 2022-11-21 22:09:04 +01:00
parent 9df27a0a37
commit 4c6625357b
Signed by: Anri
GPG key ID: A82D63DFF8D1317F
1 changed files with 43 additions and 26 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

27
js/main.js
View file

@ -37,7 +37,8 @@ const main = () => {
// Add property to the player // Add property to the player
currentVideo = document.createElement("video"); currentVideo = document.createElement("video");
currentVideo.controls = true; currentVideo.controls = true;
currentVideo.width = window.innerWidth - window.innerWidth / 4; currentVideo.width = window.innerWidth - window.innerWidth / 2;
currentVideo.style = "display: block; margin: auto;";
// Add the video container to the document // Add the video container to the document
const source = document.createElement("source"); const source = document.createElement("source");
@ -71,11 +72,15 @@ const removeButtons = (parentOfButtons) => {
* @param {number} newVideoId Video ID to add to the main element * @param {number} newVideoId Video ID to add to the main element
*/ */
const updateVideo = (videoFolder, videosList, tree, source, newVideoId) => { const updateVideo = (videoFolder, videosList, tree, source, newVideoId) => {
const mainElement = source.parentElement.parentElement; const videoElement = source.parentElement;
const mainElement = videoElement.parentElement;
source.src = `${videoFolder}/${videosList[newVideoId][0]}.${videosList[newVideoId][1]}`; source.src = `${videoFolder}/${videosList[newVideoId][0]}.${videosList[newVideoId][1]}`;
source.type = `video/${videosList[newVideoId][1]}`; source.type = `video/${videosList[newVideoId][1]}`;
source.parentElement.load();
// Add buttons at the end of the video
videoElement.addEventListener(
"ended",
() => {
if (tree[newVideoId]) { if (tree[newVideoId]) {
tree[newVideoId].forEach((nextVideoId, counter) => { tree[newVideoId].forEach((nextVideoId, counter) => {
const button = document.createElement("button"); const button = document.createElement("button");
@ -83,7 +88,7 @@ const updateVideo = (videoFolder, videosList, tree, source, newVideoId) => {
// TODO(enhancement): Add custom label for the button redirection // TODO(enhancement): Add custom label for the button redirection
const textButton = "Choix n°"; const textButton = "Choix n°";
button.textContent = textButton + counter; button.textContent = textButton + (counter + 1);
button.style = button.style =
"\ "\
font-size: 10vh; \ font-size: 10vh; \
@ -95,7 +100,13 @@ const updateVideo = (videoFolder, videosList, tree, source, newVideoId) => {
removeButtons(mainElement); removeButtons(mainElement);
// Update with the new video // Update with the new video
updateVideo(videoFolder, videosList, tree, source, nextVideoId); updateVideo(
videoFolder,
videosList,
tree,
source,
nextVideoId
);
}); });
mainElement.appendChild(button); mainElement.appendChild(button);
@ -107,4 +118,10 @@ const updateVideo = (videoFolder, videosList, tree, source, newVideoId) => {
endText.innerText = "Merci d'avoir regardé !"; endText.innerText = "Merci d'avoir regardé !";
mainElement.appendChild(endText); mainElement.appendChild(endText);
} }
},
{ once: true }
);
// Force the reload of the video
videoElement.load();
}; };