2022-11-21 09:50:37 +01:00
|
|
|
window.addEventListener("load", () => main());
|
|
|
|
|
|
|
|
const main = () => {
|
2022-11-21 10:44:10 +01:00
|
|
|
// Video folder
|
|
|
|
const videoFolder = "./videos";
|
|
|
|
|
2022-11-21 21:44:47 +01:00
|
|
|
// TODO(enhancement): Use JSON instead of hardcoded objects
|
2022-11-21 21:26:28 +01:00
|
|
|
|
2022-11-21 10:44:10 +01:00
|
|
|
// Video list, as a list of ["filename", "extension"]
|
|
|
|
const videos = {
|
|
|
|
1: ["nameOfFirstVideo", "mp4"],
|
|
|
|
2: ["nameOfSecondVideo", "mp4"],
|
|
|
|
3: ["nameOfThirdVideo", "mp4"],
|
|
|
|
4: ["nameOfFourthVideo", "mp4"],
|
|
|
|
};
|
|
|
|
|
|
|
|
/* Add option for each videos
|
|
|
|
* For example:
|
|
|
|
* {
|
|
|
|
* 1: [2],
|
|
|
|
* 2: [3, 4]
|
|
|
|
* };
|
|
|
|
*
|
|
|
|
* The video 1 offer the option to redirect to the video 2
|
|
|
|
* The video 2 offer the option to redirect to the video 3 and 4 */
|
|
|
|
const tree = {
|
|
|
|
1: [2],
|
|
|
|
2: [3, 4],
|
2022-11-21 09:50:37 +01:00
|
|
|
};
|
|
|
|
|
2022-11-21 10:44:10 +01:00
|
|
|
// Main Element who will receive the videos
|
2022-11-21 09:50:37 +01:00
|
|
|
const mainElement = document.getElementsByTagName("main").item(0);
|
|
|
|
|
2022-11-21 10:44:10 +01:00
|
|
|
// Current video showed to the user
|
|
|
|
let currentVideo;
|
|
|
|
|
|
|
|
// Add property to the player
|
|
|
|
currentVideo = document.createElement("video");
|
|
|
|
currentVideo.controls = true;
|
2022-11-21 22:09:04 +01:00
|
|
|
currentVideo.width = window.innerWidth - window.innerWidth / 2;
|
|
|
|
currentVideo.style = "display: block; margin: auto;";
|
2022-11-21 10:44:10 +01:00
|
|
|
|
2022-11-21 21:44:47 +01:00
|
|
|
// Add the video container to the document
|
2022-11-21 10:44:10 +01:00
|
|
|
const source = document.createElement("source");
|
|
|
|
currentVideo.appendChild(source);
|
|
|
|
mainElement.appendChild(currentVideo);
|
|
|
|
|
2022-11-21 21:44:47 +01:00
|
|
|
// Add the first video
|
|
|
|
updateVideo(videoFolder, videos, tree, source, 1);
|
2022-11-21 10:44:10 +01:00
|
|
|
|
2022-11-21 21:44:47 +01:00
|
|
|
// Add autoplay attributes for the next videos
|
|
|
|
currentVideo.autoplay = true;
|
2022-11-21 21:26:28 +01:00
|
|
|
};
|
2022-11-21 10:44:10 +01:00
|
|
|
|
2022-11-21 21:26:28 +01:00
|
|
|
/**
|
|
|
|
* Remove all buttons from an HTMLElement
|
2022-11-21 21:44:47 +01:00
|
|
|
* @param {HTMLElement} parentOfButtons Parent element of the buttons
|
2022-11-21 21:26:28 +01:00
|
|
|
*/
|
2022-11-21 21:44:47 +01:00
|
|
|
const removeButtons = (parentOfButtons) => {
|
|
|
|
const buttons = parentOfButtons.getElementsByTagName("button");
|
2022-11-21 21:26:28 +01:00
|
|
|
for (let index = 0; index < buttons.length; index++) {
|
2022-11-21 21:44:47 +01:00
|
|
|
parentOfButtons.removeChild(buttons[index]);
|
2022-11-21 21:26:28 +01:00
|
|
|
}
|
|
|
|
};
|
|
|
|
|
|
|
|
/**
|
|
|
|
* Update the video and the buttons
|
|
|
|
* @param {string} videoFolder Directory's name who contains videos
|
|
|
|
* @param {{number: string[]}} videosList List of videos filenames
|
|
|
|
* @param {{int: int[]}} tree List of all the videos from videosList with the next possibles choices from the video
|
|
|
|
* @param {HTMLSourceElement} source Current video
|
|
|
|
* @param {number} newVideoId Video ID to add to the main element
|
|
|
|
*/
|
|
|
|
const updateVideo = (videoFolder, videosList, tree, source, newVideoId) => {
|
2022-11-21 22:09:04 +01:00
|
|
|
const videoElement = source.parentElement;
|
|
|
|
const mainElement = videoElement.parentElement;
|
2022-11-21 21:26:28 +01:00
|
|
|
source.src = `${videoFolder}/${videosList[newVideoId][0]}.${videosList[newVideoId][1]}`;
|
2022-11-21 21:44:47 +01:00
|
|
|
source.type = `video/${videosList[newVideoId][1]}`;
|
2022-11-21 21:26:28 +01:00
|
|
|
|
2022-11-21 22:09:04 +01:00
|
|
|
// Add buttons at the end of the video
|
|
|
|
videoElement.addEventListener(
|
|
|
|
"ended",
|
|
|
|
() => {
|
|
|
|
if (tree[newVideoId]) {
|
|
|
|
tree[newVideoId].forEach((nextVideoId, counter) => {
|
|
|
|
const button = document.createElement("button");
|
2022-11-21 21:26:28 +01:00
|
|
|
|
2022-11-21 22:09:04 +01:00
|
|
|
// TODO(enhancement): Add custom label for the button redirection
|
|
|
|
const textButton = "Choix n°";
|
2022-11-21 21:26:28 +01:00
|
|
|
|
2022-11-21 22:09:04 +01:00
|
|
|
button.textContent = textButton + (counter + 1);
|
|
|
|
button.style =
|
|
|
|
"\
|
2022-11-21 21:44:47 +01:00
|
|
|
font-size: 10vh; \
|
|
|
|
margin-top: 5%; \
|
|
|
|
margin-right: 5%;";
|
2022-11-21 21:26:28 +01:00
|
|
|
|
2022-11-21 22:09:04 +01:00
|
|
|
button.addEventListener("click", () => {
|
|
|
|
// Remove older buttons
|
|
|
|
removeButtons(mainElement);
|
|
|
|
|
|
|
|
// Update with the new video
|
|
|
|
updateVideo(
|
|
|
|
videoFolder,
|
|
|
|
videosList,
|
|
|
|
tree,
|
|
|
|
source,
|
|
|
|
nextVideoId
|
|
|
|
);
|
|
|
|
});
|
|
|
|
|
|
|
|
mainElement.appendChild(button);
|
|
|
|
});
|
|
|
|
} else {
|
2022-11-21 21:26:28 +01:00
|
|
|
removeButtons(mainElement);
|
2022-11-21 22:09:04 +01:00
|
|
|
const endText = document.createElement("h1");
|
|
|
|
endText.style = "font-size: 11vh;";
|
|
|
|
endText.innerText = "Merci d'avoir regardé !";
|
|
|
|
mainElement.appendChild(endText);
|
|
|
|
}
|
|
|
|
},
|
|
|
|
{ once: true }
|
|
|
|
);
|
|
|
|
|
|
|
|
// Force the reload of the video
|
|
|
|
videoElement.load();
|
2022-11-21 10:45:29 +01:00
|
|
|
};
|