diff --git a/index.html b/index.html
index ce1034b..36ad7f8 100644
--- a/index.html
+++ b/index.html
@@ -7,7 +7,7 @@
Document
-
+
diff --git a/js/main.js b/js/main.js
index 680d167..0c0bf15 100644
--- a/js/main.js
+++ b/js/main.js
@@ -4,7 +4,7 @@ const main = () => {
// Video folder
const videoFolder = "./videos";
- // TODO: Use JSON instead of hardcoded objects
+ // TODO(enhancement): Use JSON instead of hardcoded objects
// Video list, as a list of ["filename", "extension"]
const videos = {
@@ -38,33 +38,27 @@ const main = () => {
currentVideo = document.createElement("video");
currentVideo.controls = true;
currentVideo.width = window.innerWidth - window.innerWidth / 4;
- currentVideo.style = "\
- display: block; \
- margin: auto;";
- // Init the page with the first video
- const firstVideo = 1;
+ // Add the video container to the document
const source = document.createElement("source");
- source.type = `video/${videos[firstVideo][1]}`;
-
currentVideo.appendChild(source);
mainElement.appendChild(currentVideo);
- updateVideo(videoFolder, videos, tree, source, firstVideo);
+ // Add the first video
+ updateVideo(videoFolder, videos, tree, source, 1);
- // TODO: Remove the current video and the buttons
-
- // TODO: Add function who go to the next video (used by the button's listener)
+ // Add autoplay attributes for the next videos
+ currentVideo.autoplay = true;
};
/**
* Remove all buttons from an HTMLElement
- * @param {HTMLElement } parentButtons Parent element of the buttons
+ * @param {HTMLElement} parentOfButtons Parent element of the buttons
*/
-const removeButtons = (parentButtons) => {
- const buttons = parentButtons.getElementsByTagName("button");
+const removeButtons = (parentOfButtons) => {
+ const buttons = parentOfButtons.getElementsByTagName("button");
for (let index = 0; index < buttons.length; index++) {
- parentButtons.removeChild(buttons[index]);
+ parentOfButtons.removeChild(buttons[index]);
}
};
@@ -79,15 +73,21 @@ const removeButtons = (parentButtons) => {
const updateVideo = (videoFolder, videosList, tree, source, newVideoId) => {
const mainElement = source.parentElement.parentElement;
source.src = `${videoFolder}/${videosList[newVideoId][0]}.${videosList[newVideoId][1]}`;
+ source.type = `video/${videosList[newVideoId][1]}`;
if (tree[newVideoId]) {
tree[newVideoId].forEach((nextVideoId, counter) => {
const button = document.createElement("button");
- // TODO: Add custom label for the button redirection
+ // TODO(enhancement): Add custom label for the button redirection
const textButton = "Choix n°";
button.textContent = textButton + counter;
+ button.style =
+ "\
+ font-size: 10vh; \
+ margin-top: 5%; \
+ margin-right: 5%;";
button.addEventListener("click", () => {
// Remove older buttons
@@ -101,7 +101,8 @@ const updateVideo = (videoFolder, videosList, tree, source, newVideoId) => {
});
} else {
removeButtons(mainElement);
- const endText = document.createElement("h2");
+ const endText = document.createElement("h1");
+ endText.style = "font-size: 11vh;";
endText.innerText = "Merci d'avoir regardé !";
mainElement.appendChild(endText);
}