add buttons logic

js/main.js

@@ -4,6 +4,8 @@ const main = () => {
     // Video folder
     const videoFolder = "./videos";
 
+    // TODO: Use JSON instead of hardcoded objects
+
     // Video list, as a list of ["filename", "extension"]
     const videos = {
         1: ["nameOfFirstVideo", "mp4"],
@@ -26,17 +28,12 @@ const main = () => {
         2: [3, 4],
     };
 
-    // TODO: Add custom label for the button redirection
-
     // Main Element who will receive the videos
     const mainElement = document.getElementsByTagName("main").item(0);
 
     // Current video showed to the user
     let currentVideo;
 
-    // Buttons showed to the user
-    let buttons = [];
-
     // Add property to the player
     currentVideo = document.createElement("video");
     currentVideo.controls = true;
@@ -46,25 +43,66 @@ const main = () => {
         margin: auto;";
 
     // Init the page with the first video
+    const firstVideo = 1;
     const source = document.createElement("source");
-
-    source.src = `${videoFolder}/${videos[1][0]}.${videos[1][1]}`;
-    source.type = `video/${videos[1][1]}`;
+    source.type = `video/${videos[firstVideo][1]}`;
 
     currentVideo.appendChild(source);
     mainElement.appendChild(currentVideo);
 
-    // TODO: Add listener of the buttons
+    updateVideo(videoFolder, videos, tree, source, firstVideo);
 
     // TODO: Remove the current video and the buttons
 
     // TODO: Add function who go to the next video (used by the button's listener)
-
-    /* Help for TODOs:
-     *
-     * for (let [key, value] of Object.entries(tree)) {
-     *     // key is the number (0, 1, 2)
-     *     // value is the [filename, extension]
-     * }
-     */
+};
+
+/**
+ * Remove all buttons from an HTMLElement
+ * @param {HTMLElement } parentButtons Parent element of the buttons
+ */
+const removeButtons = (parentButtons) => {
+    const buttons = parentButtons.getElementsByTagName("button");
+    for (let index = 0; index < buttons.length; index++) {
+        parentButtons.removeChild(buttons[index]);
+    }
+};
+
+/**
+ * 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) => {
+    const mainElement = source.parentElement.parentElement;
+    source.src = `${videoFolder}/${videosList[newVideoId][0]}.${videosList[newVideoId][1]}`;
+
+    if (tree[newVideoId]) {
+        tree[newVideoId].forEach((nextVideoId, counter) => {
+            const button = document.createElement("button");
+
+            // TODO: Add custom label for the button redirection
+            const textButton = "Choix n°";
+
+            button.textContent = textButton + counter;
+
+            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("h2");
+        endText.innerText = "Merci d'avoir regardé !";
+        mainElement.appendChild(endText);
+    }
 };