chore: add comments, types, enabled ts-check

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();

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;