From 0084653a7f64b6571d4127d9c256657a4072f8c8 Mon Sep 17 00:00:00 2001 From: Jared K Date: Thu, 28 Oct 2021 23:30:28 -0700 Subject: [PATCH] chore: add comments, types, enabled ts-check --- js/body.js | 13 +++++++--- js/main.js | 75 ++++++++++++++++++++++++++++++++++++++++-------------- 2 files changed, 66 insertions(+), 22 deletions(-) diff --git a/js/body.js b/js/body.js index 850f6b7..b33945c 100644 --- a/js/body.js +++ b/js/body.js @@ -1,5 +1,11 @@ -const player = document.getElementById('videoPlayer1'); -const player2 = document.getElementById('videoPlayer2'); +// @ts-check +const player = /** @type {HTMLMediaElement} */ ( + document.getElementById('videoPlayer1') +); + +const player2 = /** @type {HTMLMediaElement} */ ( + document.getElementById('videoPlayer2') +); player.addEventListener( 'ended', () => { @@ -29,7 +35,8 @@ player2.addEventListener( const mp4Source = player.getElementsByClassName('mp4Source')[0]; let video = getNextPlaylistItem(); -progressPlaylistState(); // have to move the state forward after getting the first video +// have to move the state forward after getting the first video +progressPlaylistState(); mp4Source.setAttribute('src', video); player.load(); diff --git a/js/main.js b/js/main.js index 3d86c95..754f17e 100644 --- a/js/main.js +++ b/js/main.js @@ -1,12 +1,18 @@ -const mediaFolder = "{{ .MediaFolder }}"; -const initMediaFiles = ["{{ StringsJoin .MediaFiles "\", \"" }}"]; -const transitionVideo = "{{ .TransitionVideo }}"; -const playOnlyOne = {{ .PlayOnlyOne }}; -const loopFirstVideo = {{ .LoopFirstVideo }}; -const transitionVideoPath = `${mediaFolder}${transitionVideo}`; +// @ts-check +const mediaFolder = /** @type {string} */ ("{{ .MediaFolder }}"); +const initMediaFiles = /** @type {string[]} */ (["{{ StringsJoin .MediaFiles "\", \"" }}"]); +const transitionVideo = /** @type {string} */("{{ .TransitionVideo }}"); +const playOnlyOne = /** @type {boolean} */ ({{ .PlayOnlyOne }}); +const loopFirstVideo = /** @type {boolean} */ ({{ .LoopFirstVideo }}); +const transitionVideoPath = /** @type {string} */ (`${mediaFolder}${transitionVideo}`); let isTransition = true; +/** + * shuffleArr takes in an array and returns a new array in random order + * @param {any[]} a any array to be shuffled + * @return {any[]} shuffled array + */ function shuffleArr(a) { var j, x, i; for (i = a.length - 1; i > 0; i--) { @@ -18,16 +24,31 @@ function shuffleArr(a) { return a; } -// prependFolderToFiles simply adds a folder path to a list of files and returns the new array +/** + * prependFolderToFiles simply adds a folder path to a list of files and returns + * the new array + * @param {string} folder folder path, must end with a trailing slash + * @param {string[]} files array of file names + * @returns {string[]} new array with full path to files + */ function prependFolderToFiles(folder, files) { return files.map((file) => `${folder}${file}`); } -// storePlaylistState stores a playlist state to localstorage + +/** + * storePlaylistState takes in a playlist and stores it into localstorage + * @param {string[]} state + * @returns {void} + */ function storePlaylistState(state) { localStorage.setItem('playlist', JSON.stringify(state)); } -// getNewPlaylist creates a newly randomize list of files and stores it in localstorage +/** + * getNewPlaylist creates a newly randomize list of files and stores it in + * localstorage + * @returns {string[]} a new playlist + */ function getNewPlaylist() { const playlist = prependFolderToFiles( mediaFolder, @@ -37,7 +58,10 @@ function getNewPlaylist() { return playlist; } -// getPlaylist will get the playlist state form localstorage or create a new one +/** + * getPlaylist will get the playlist state form localstorage or create a new one + * @returns {string[]} current playlist state + */ function getPlaylist() { let playlist = []; try { @@ -51,18 +75,26 @@ function getPlaylist() { return playlist; } -// progressPlaylistState removes the last item from the playlist and stores the updated version in localstorage +/** + * progressPlaylistState removes the last item from the playlist and stores the + * updated version in localstorage + * @returns {void} + */ function progressPlaylistState() { const playlist = getPlaylist(); - _ = playlist.pop(); + 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 */ +/** + * 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 + * @returns {string} the next item in the playlist + */ function getNextPlaylistItem() { const playlist = getPlaylist(); - mediaItem = playlist.pop(); + let mediaItem = playlist.pop(); // check if we played this mediaItem last run console.log({ lastPlayed: localStorage.getItem('lastPlayed'), mediaItem }); @@ -74,8 +106,13 @@ function getNextPlaylistItem() { return mediaItem; } -/* playNext is the core function of this project and handles the loading and playing - of the alternating video players */ +/** + * playNext is the core function of this project and handles the loading and + * playing of the alternating video players + * @param {HTMLMediaElement} player currently playing video player + * @param {HTMLMediaElement} nextPlayer the next video player to be played + * @returns {void} + */ function playNext(player, nextPlayer) { const currentMp4Source = player.getElementsByClassName('mp4Source')[0]; const nextMp4Source = nextPlayer.getElementsByClassName('mp4Source')[0]; @@ -92,9 +129,9 @@ function playNext(player, nextPlayer) { // TODO: we can use this opacity to crossfade between mediaFiles player.style['z-index'] = 1; - player.style['opacity'] = 1; + player.style['opacity'] = '1'; nextPlayer.style['z-index'] = 0; - nextPlayer.style['opacity'] = 0; + nextPlayer.style['opacity'] = '0'; if (transitionVideo && transitionVideo !== '' && isTransition) { video = transitionVideoPath;