feat: major refactor to handle localstorage state

UpDownLeftDie · Oct 29, 2021 · a126d9e · a126d9e
1 parent d237958
commit a126d9e
Show file tree

Hide file tree

Showing 2 changed files with 118 additions and 49 deletions.
diff --git a/js/body.js b/js/body.js
@@ -1,20 +1,36 @@
 const player = document.getElementById('videoPlayer1');
 const player2 = document.getElementById('videoPlayer2');
-player.addEventListener('ended', () => playNext(player2, player), {
-  passive: true,
-});
-player2.addEventListener('ended', () => playNext(player, player2), {
-  passive: true,
-});
+player.addEventListener(
+  'ended',
+  () => {
+    if (!loopFirstVideo) {
+      progressPlaylistState();
+    }
+    playNext(player2, player);
+  },
+  {
+    passive: true,
+  },
+);
+player2.addEventListener(
+  'ended',
+  () => {
+    if (!loopFirstVideo) {
+      progressPlaylistState();
+    }
+    playNext(player, player2);
+  },
+  {
+    passive: true,
+  },
+);
 
-/* Initial logic */
+/***** Initial load *****/
 
 const mp4Source = player.getElementsByClassName('mp4Source')[0];
-let video = `${mediaFiles[0]}`;
-// check if we played this video last run
-if (mediaFiles.length > 1 && localStorage.getItem('lastPlayed') === video) {
-  video = `${mediaFiles[1]}`;
-}
+let video = getNextPlaylistItem();
+progressPlaylistState(); // have to move the state forward after getting the first video
+
 mp4Source.setAttribute('src', video);
 player.load();
 

diff --git a/js/main.js b/js/main.js
@@ -3,10 +3,8 @@ const initMediaFiles =  ["{{ StringsJoin .MediaFiles "\", \"" }}"];
 const transitionVideo = "{{ .TransitionVideo }}";
 const playOnlyOne = {{ .PlayOnlyOne }};
 const loopFirstVideo = {{ .LoopFirstVideo }};
-const transitionVideoPath =  `${mediaFolder}${transitionVideo}`
+const transitionVideoPath = `${mediaFolder}${transitionVideo}`;
 
-const mediaFiles = shuffleArr(initMediaFiles);
-let count = 0;
 let isTransition = true;
 
 function shuffleArr(a) {
@@ -17,51 +15,106 @@ function shuffleArr(a) {
     a[i] = a[j];
     a[j] = x;
   }
+  return a;
+}
+
+// prependFolderToFiles simply adds a folder path to a list of files and returns the new array
+function prependFolderToFiles(folder, files) {
+  return files.map((file) => `${folder}${file}`);
+}
+// storePlaylistState stores a playlist state to localstorage
+function storePlaylistState(state) {
+  localStorage.setItem('playlist', JSON.stringify(state));
+}
+
+// getNewPlaylist creates a newly randomize list of files and stores it in localstorage
+function getNewPlaylist() {
+  const playlist = prependFolderToFiles(
+    mediaFolder,
+    shuffleArr(initMediaFiles),
+  );
+  storePlaylistState(playlist);
+  return playlist;
+}
+
+// getPlaylist will get the playlist state form localstorage or create a new one
+function getPlaylist() {
+  let playlist = [];
+  try {
+    playlist = JSON.parse(localStorage.getItem('playlist'));
+  } catch {
+    console.log('playlist empty!');
+  }
+  if (!playlist || playlist.length === 0) {
+    playlist = getNewPlaylist();
+  }
+  return playlist;
+}
+
+// progressPlaylistState removes the last item from the playlist and stores the updated version in localstorage
+function progressPlaylistState() {
+  const playlist = getPlaylist();
+  _ = playlist.pop();
+  storePlaylistState(playlist);
+}
 
+/* getNextPlaylistItem returns the next item in the playlist unless it matches the last thing played
+    then it moves that item to the end and returns the next item after that */
+function getNextPlaylistItem() {
+  const playlist = getPlaylist();
+  mediaItem = playlist.pop();
 
-  return a.map(b => `${mediaFolder}${b}`);
+  // check if we played this mediaItem last run
+  console.log({ lastPlayed: localStorage.getItem('lastPlayed'), mediaItem });
+  if (localStorage.getItem('lastPlayed') === mediaItem) {
+    // moves the repeated item to the end so its not skipped entirely
+    storePlaylistState([mediaItem].concat(playlist));
+    mediaItem = getNextPlaylistItem();
+  }
+  return mediaItem;
 }
 
+/* playNext is the core function of this project and handles the loading and playing
+    of the alternating video players */
 function playNext(player, nextPlayer) {
-  const nextMp4Source = nextPlayer.getElementsByClassName("mp4Source")[0];
   const currentMp4Source = player.getElementsByClassName('mp4Source')[0];
-  if(!loopFirstVideo) {
-    if (!transitionVideo || !isTransition) {
-      count++;
-      if (count > mediaFiles.length - 1) count = 0;
-    }
+  const nextMp4Source = nextPlayer.getElementsByClassName('mp4Source')[0];
+  const currentVideo = currentMp4Source.getAttribute('src');
+  if (currentVideo !== transitionVideoPath) {
+    localStorage.setItem('lastPlayed', currentVideo);
+  }
+
+  let video = localStorage.getItem('lastPlayed');
+  if (!loopFirstVideo && (!transitionVideo || !isTransition)) {
+    video = getNextPlaylistItem();
+    console.log(`next video: ${video}`);
+  }
+
+  // TODO: we can use this opacity to crossfade between mediaFiles
+  player.style['z-index'] = 1;
+  player.style['opacity'] = 1;
+  nextPlayer.style['z-index'] = 0;
+  nextPlayer.style['opacity'] = 0;
+
+  if (transitionVideo && transitionVideo !== '' && isTransition) {
+    video = transitionVideoPath;
+    isTransition = false;
+  } else {
+    isTransition = true;
   }
+  nextMp4Source.setAttribute('src', video);
+  nextPlayer.load();
+  nextPlayer.pause();
 
   if (playOnlyOne) {
-    if (count > 1) {
-      // Remove video after playing once
+    // Remove videos after playing once
+    player.onended = () => {
       currentMp4Source.removeAttribute('src');
       nextMp4Source.removeAttribute('src');
       player.load();
       nextPlayer.load();
-    }
-  } else {
-    // TODO: we can use this opacity to crossfade between mediaFiles
-    player.style["z-index"] = 1;
-    player.style["opacity"] = 1;
-    nextPlayer.style["z-index"] = 0;
-    nextPlayer.style["opacity"] = 0;
-    let video = `${mediaFiles[count]}`;
-
-    if (transitionVideo && transitionVideo !== "" && isTransition) {
-      video = transitionVideoPath;
-      isTransition = false;
-    } else {
-      isTransition = true;
-    }
-    nextMp4Source.setAttribute("src", video);
-    nextPlayer.load();
-    nextPlayer.pause();
-
-    const currentVideo = currentMp4Source.getAttribute("src");
-    if (currentVideo !== transitionVideoPath) {
-      localStorage.setItem("lastPlayed", currentVideo);
-    }
-    player.play();
+    };
   }
-}
+
+  player.play();
+}