diff --git a/js/body.js b/js/body.js index b9160ef..850f6b7 100644 --- 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 index c9b59c7..3d86c95 100644 --- 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(); + }; } -} \ No newline at end of file + + player.play(); +}