changing so that it randomly plays all videos once before looping thr…

…ough randomly again

index.html

@@ -44,55 +44,76 @@
         const repoName = 'doit-welcome-board';
         const winFolderPath = 'wins';
         const transitionFolderPath = 'transitions'
-        let winVideoSources = [];
-        let transitionVideoSources = [];
-        let isWinVideoNext = true;
+
+        const state = {
+        winVideos: [],
+        transitionVideos: [],
+        currentWinIndex: 0,
+        currentTransitionIndex: 0,
+        isWinVideoNext: true
+        };
+
         const player = videojs(videoContainer, { controls: false, autoplay: true, muted: true, loop: false, inactivityTimeout: 0 });
 
-        function fetchVideoFiles(folderPath, videoSourcesArray, callback) {
-        fetch(`https://api.github.com/repos/${repoOwner}/${repoName}/contents/${folderPath}`)
-          .then(response => response.json())
-          .then(data => {
-            const videoFiles = data.filter(file => file.type === 'file' && (file.name.endsWith('.mp4') || file.name.endsWith('.webm')));
-
-            videoFiles.forEach(file => {
-              const source = {
-                src: file.download_url,
-                type: `video/${file.name.split('.').pop()}`
-              };
-              videoSourcesArray.push(source);
-            });
-
-            callback();
-          })
-          .catch(error => {
-            console.error(`Error fetching video files from ${folderPath}:`, error);
-            callback();
-          });
-      }
-
-      function playNextVideo() {
-        let videoSources = isWinVideoNext ? winVideoSources : transitionVideoSources;
-        isWinVideoNext = !isWinVideoNext; // Toggle for next video
+        const fetchVideoFiles = async (folderPath) => {
+        try {
+          const response = await fetch(`https://api.github.com/repos/${repoOwner}/${repoName}/contents/${folderPath}`);
+          const data = await response.json();
+
+          return data
+            .filter(file => file.type === 'file' && (file.name.endsWith('.mp4') || file.name.endsWith('.webm')))
+            .map(file => ({
+              src: file.download_url,
+              type: `video/${file.name.split('.').pop()}`
+            }));
+        } catch (error) {
+          console.error(`Error fetching video files from ${folderPath}:`, error);
+          return [];
+        }
+      };
+
+      const shuffleArray = (array) => array.sort(() => Math.random() - 0.5);
+
+      const playNextVideo = () => {
+        const { isWinVideoNext, winVideos, transitionVideos } = state;
+        let videoSources = isWinVideoNext ? winVideos : transitionVideos;
+        let currentIndex = isWinVideoNext ? state.currentWinIndex : state.currentTransitionIndex;
 
         if (videoSources.length === 0) {
           console.error('No video sources available.');
           return;
         }
 
-        const randomIndex = Math.floor(Math.random() * videoSources.length);
-        const videoSource = videoSources[randomIndex];
-
+        const videoSource = videoSources[currentIndex];
         player.src({ src: videoSource.src, type: videoSource.type });
         player.play();
 
+        // Update the current index and shuffle if necessary
+        if (isWinVideoNext) {
+          state.currentWinIndex = (state.currentWinIndex + 1) % winVideos.length;
+          if (state.currentWinIndex === 0) {
+            state.winVideos = shuffleArray(winVideos);
+          }
+        } else {
+          state.currentTransitionIndex = (state.currentTransitionIndex + 1) % transitionVideos.length;
+          if (state.currentTransitionIndex === 0) {
+            state.transitionVideos = shuffleArray(transitionVideos);
+          }
+        }
+
+        // Toggle for next video
+        state.isWinVideoNext = !isWinVideoNext;
         player.one('ended', playNextVideo);
-      }
+      };
+
+      const initializeVideoPlayback = async () => {
+        state.winVideos = shuffleArray(await fetchVideoFiles(winFolderPath));
+        state.transitionVideos = shuffleArray(await fetchVideoFiles(transitionFolderPath));
+
+        playNextVideo();
+      };
 
-      // Fetch videos from both folders and start playing
-      fetchVideoFiles(winFolderPath, winVideoSources, () => {
-        fetchVideoFiles(transitionFolderPath, transitionVideoSources, playNextVideo);
-      });
+      initializeVideoPlayback();
     });
 </script>
 </body>