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

69
js/main.js
View file

@ -37,7 +37,8 @@ const main = () => {
// Add property to the player
currentVideo = document.createElement("video");
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
const source = document.createElement("source");
@ -71,40 +72,56 @@ const removeButtons = (parentOfButtons) => {
* @param {number} newVideoId Video ID to add to the main element
*/
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.type = `video/${videosList[newVideoId][1]}`;
source.parentElement.load();
if (tree[newVideoId]) {
tree[newVideoId].forEach((nextVideoId, counter) => {
const button = document.createElement("button");
// Add buttons at the end of the video
videoElement.addEventListener(
"ended",
() => {
if (tree[newVideoId]) {
tree[newVideoId].forEach((nextVideoId, counter) => {
const button = document.createElement("button");
// TODO(enhancement): Add custom label for the button redirection
const textButton = "Choix n°";
// TODO(enhancement): Add custom label for the button redirection
const textButton = "Choix n°";
button.textContent = textButton + counter;
button.style =
"\
button.textContent = textButton + (counter + 1);
button.style =
"\
font-size: 10vh; \
margin-top: 5%; \
margin-right: 5%;";
button.addEventListener("click", () => {
// Remove older buttons
button.addEventListener("click", () => {
// Remove older buttons
removeButtons(mainElement);
// Update with the new video
updateVideo(
videoFolder,
videosList,
tree,
source,
nextVideoId
);
});
mainElement.appendChild(button);
});
} else {
removeButtons(mainElement);
const endText = document.createElement("h1");
endText.style = "font-size: 11vh;";
endText.innerText = "Merci d'avoir regardé !";
mainElement.appendChild(endText);
}
},
{ once: true }
);
// Update with the new video
updateVideo(videoFolder, videosList, tree, source, nextVideoId);
});
mainElement.appendChild(button);
});
} else {
removeButtons(mainElement);
const endText = document.createElement("h1");
endText.style = "font-size: 11vh;";
endText.innerText = "Merci d'avoir regardé !";
mainElement.appendChild(endText);
}
// Force the reload of the video
videoElement.load();
};