Add additional error output

.vscode/settings.json

@@ -1,5 +1,6 @@
 {
   "cSpell.words": [
+    "deepcode",
     "goarch",
     "gohtml",
     "goreleaser",
@@ -8,7 +9,9 @@
     "ldflags",
     "manifoldco",
     "obsstudio",
-    "promptui"
+    "promptui",
+    "sparkdemcisin",
+    "webp"
   ],
   "yaml.schemas": {
     "https://json.schemastore.org/github-workflow.json": [

FUNDING.yml

@@ -4,9 +4,10 @@ custom:
     'https://www.twitch.tv/subs/updownleftdie',
     'https://cash.app/$UpDownLeftDie/FPBDPCH',
     'https://www.paypal.me/jaredkotoff',
+    'https://next.invitation.codes/@updownleftdie'
   ]
 github: # Replace with up to 4 GitHub Sponsors-enabled usernames e.g., [user1, user2]
-patreon: 
+patreon:
 open_collective: # Replace with a single Open Collective username
 ko_fi: jaredk
 tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel

README.md

@@ -21,12 +21,12 @@ Notice: the VLC Source now supports "Shuffle playlist" option.
    2. **Copy this path**
    3. **Uncheck "Local file" and set the url to `file://<paste the path you copied>`**
       1. Windows example: `file://C:/obs-videos-folder/obs-random-videos.html`
-      2. Mac/Linux example: `file:///obs-videos-folder/obs-random-videos.html` (note the `///`)
+      2. Mac/Linux example: `file:///obs-videos-folder/obs-random-videos.html` **(note the `///` instead of `//`)**
    4. Set the width and height to your full canvas resolution
    5. Check "Shutdown source when not visible"
    6. If you want a new shuffle each time: check "Refresh browser when scene becomes active"
    7. Leave "Page permissions" set to "Read access to OBS status information"
-6. Rerun the executable to change any settings
+6. **Rerun the executable when you add or remove videos** or want to change any settings
 
 ### Supported files
 
@@ -57,12 +57,15 @@ Notice: the VLC Source now supports "Shuffle playlist" option.
 ## Stuck? Or nothing happening?
 
   1. Try hitting `Refresh cache of current page` in OBS
-  2. [Enable remote debugging](https://github.com/crowbartools/Firebot/wiki/Troubleshooting-Firebot-Overlay-issues-in-OBS-Studio) and open the page for the browser source
+  2. **In OBS go to `Scene Collection` then `New`**
+     1. **Add only your random video browser source and see if this works**
+     2. **If it works, then theres an external issue.** I have no idea what is causing this so, if you have any info on this us know in the [discussions](https://github.com/UpDownLeftDie/obs-random-videos/discussions)
+  3. [Enable remote debugging](https://github.com/crowbartools/Firebot/wiki/Troubleshooting-Firebot-Overlay-issues-in-OBS-Studio) and open the page for the browser source
      1. Open Chrome Dev tools
      2. `Application` tab
      3. Make sure `Local and session storage` box is CHECKED
      4. Click `Clear site data`
-  3. If issues persist: use [GitHub Discussions](https://github.com/UpDownLeftDie/obs-random-videos/discussions/categories/q-a) or join the [Discord server](https://discord.gg/zxYsjpxaxN)
+  4. If issues persist: use [GitHub Discussions](https://github.com/UpDownLeftDie/obs-random-videos/discussions/categories/q-a) or join the [Discord server](https://discord.gg/zxYsjpxaxN)
 
 ## TODO
 

go.mod

@@ -1,14 +1,14 @@
 module github.com/UpDownLeftDie/obs-random-videos/v2
 
-go 1.18
+go 1.20
 
 require github.com/sparkdemcisin81/promptui v1.0.0
 
 require (
-	github.com/chzyer/readline v1.5.0 // indirect
-	github.com/juju/ansiterm v0.0.0-20210929141451-8b71cc96ebdc // indirect
+	github.com/chzyer/readline v1.5.1 // indirect
+	github.com/juju/ansiterm v1.0.0 // indirect
 	github.com/lunixbochs/vtclean v1.0.0 // indirect
-	github.com/mattn/go-colorable v0.1.12 // indirect
-	github.com/mattn/go-isatty v0.0.14 // indirect
-	golang.org/x/sys v0.0.0-20220615213510-4f61da869c0c // indirect
+	github.com/mattn/go-colorable v0.1.13 // indirect
+	github.com/mattn/go-isatty v0.0.19 // indirect
+	golang.org/x/sys v0.8.0 // indirect
 )

go.sum

@@ -1,15 +1,15 @@
 github.com/chzyer/logex v1.1.10/go.mod h1:+Ywpsq7O8HXn0nuIou7OrIPyXbp3wmkHB+jjWRnGsAI=
-github.com/chzyer/logex v1.2.0 h1:+eqR0HfOetur4tgnC8ftU5imRnhi4te+BadWS95c5AM=
-github.com/chzyer/logex v1.2.0/go.mod h1:9+9sk7u7pGNWYMkh0hdiL++6OeibzJccyQU4p4MedaY=
+github.com/chzyer/logex v1.2.1 h1:XHDu3E6q+gdHgsdTPH6ImJMIp436vR6MPtH8gP05QzM=
+github.com/chzyer/logex v1.2.1/go.mod h1:JLbx6lG2kDbNRFnfkgvh4eRJRPX1QCoOIWomwysCBrQ=
 github.com/chzyer/readline v0.0.0-20180603132655-2972be24d48e/go.mod h1:nSuG5e5PlCu98SY8svDHJxuZscDgtXS6KTTbou5AhLI=
-github.com/chzyer/readline v1.5.0 h1:lSwwFrbNviGePhkewF1az4oLmcwqCZijQ2/Wi3BGHAI=
-github.com/chzyer/readline v1.5.0/go.mod h1:x22KAscuvRqlLoK9CsoYsmxoXZMMFVyOl86cAH8qUic=
+github.com/chzyer/readline v1.5.1 h1:upd/6fQk4src78LMRzh5vItIt361/o4uq553V8B5sGI=
+github.com/chzyer/readline v1.5.1/go.mod h1:Eh+b79XXUwfKfcPLepksvw2tcLE/Ct21YObkaSkeBlk=
 github.com/chzyer/test v0.0.0-20180213035817-a1ea475d72b1/go.mod h1:Q3SI9o4m/ZMnBNeIyt5eFwwo7qiLfzFZmjNmxjkiQlU=
-github.com/chzyer/test v0.0.0-20210722231415-061457976a23 h1:dZ0/VyGgQdVGAss6Ju0dt5P0QltE0SFY5Woh6hbIfiQ=
-github.com/chzyer/test v0.0.0-20210722231415-061457976a23/go.mod h1:Q3SI9o4m/ZMnBNeIyt5eFwwo7qiLfzFZmjNmxjkiQlU=
+github.com/chzyer/test v1.0.0 h1:p3BQDXSxOhOG0P9z6/hGnII4LGiEPOYBhs8asl/fC04=
+github.com/chzyer/test v1.0.0/go.mod h1:2JlltgoNkt4TW/z9V/IzDdFaMTM2JPIi26O1pF38GC8=
 github.com/juju/ansiterm v0.0.0-20180109212912-720a0952cc2a/go.mod h1:UJSiEoRfvx3hP73CvoARgeLjaIOjybY9vj8PUPPFGeU=
-github.com/juju/ansiterm v0.0.0-20210929141451-8b71cc96ebdc h1:ZQrgZFsLzkw7o3CoDzsfBhx0bf/1rVBXrLy8dXKRe8o=
-github.com/juju/ansiterm v0.0.0-20210929141451-8b71cc96ebdc/go.mod h1:PyXUpnI3olx3bsPcHt98FGPX/KCFZ1Fi+hw1XLI6384=
+github.com/juju/ansiterm v1.0.0 h1:gmMvnZRq7JZJx6jkfSq9/+2LMrVEwGwt7UR6G+lmDEg=
+github.com/juju/ansiterm v1.0.0/go.mod h1:PyXUpnI3olx3bsPcHt98FGPX/KCFZ1Fi+hw1XLI6384=
 github.com/kr/pretty v0.1.0/go.mod h1:dAy3ld7l9f0ibDNOQOHHMYYIIbhfbHSm3C4ZsoJORNo=
 github.com/kr/pretty v0.2.1 h1:Fmg33tUaq4/8ym9TJN1x7sLJnHVwhP33CNkpYV/7rwI=
 github.com/kr/pretty v0.2.1/go.mod h1:ipq/a2n7PKx3OHsz4KJII5eveXtPO4qwEXGdVfWzfnI=
@@ -21,22 +21,25 @@ github.com/lunixbochs/vtclean v1.0.0 h1:xu2sLAri4lGiovBDQKxl5mrXyESr3gUr5m5SM5+L
 github.com/lunixbochs/vtclean v1.0.0/go.mod h1:pHhQNgMf3btfWnGBVipUOjRYhoOsdGqdm/+2c2E2WMI=
 github.com/mattn/go-colorable v0.0.9/go.mod h1:9vuHe8Xs5qXnSaW/c/ABM9alt+Vo+STaOChaDxuIBZU=
 github.com/mattn/go-colorable v0.1.10/go.mod h1:u6P/XSegPjTcexA+o6vUJrdnUu04hMope9wVRipJSqc=
-github.com/mattn/go-colorable v0.1.12 h1:jF+Du6AlPIjs2BiUiQlKOX0rt3SujHxPnksPKZbaA40=
-github.com/mattn/go-colorable v0.1.12/go.mod h1:u5H1YNBxpqRaxsYJYSkiCWKzEfiAb1Gb520KVy5xxl4=
+github.com/mattn/go-colorable v0.1.13 h1:fFA4WZxdEF4tXPZVKMLwD8oUnCTTo08duU7wxecdEvA=
+github.com/mattn/go-colorable v0.1.13/go.mod h1:7S9/ev0klgBDR4GtXTXX8a3vIGJpMovkB8vQcUbaXHg=
 github.com/mattn/go-isatty v0.0.4/go.mod h1:M+lRXTBqGeGNdLjl/ufCoiOlB5xdOkqRJdNxMWT7Zi4=
 github.com/mattn/go-isatty v0.0.12/go.mod h1:cbi8OIDigv2wuxKPP5vlRcQ1OAZbq2CE4Kysco4FUpU=
-github.com/mattn/go-isatty v0.0.14 h1:yVuAays6BHfxijgZPzw+3Zlu5yQgKGP2/hcQbHb7S9Y=
 github.com/mattn/go-isatty v0.0.14/go.mod h1:7GGIvUiUoEMVVmxf/4nioHXj79iQHKdU27kJ6hsGG94=
+github.com/mattn/go-isatty v0.0.16/go.mod h1:kYGgaQfpe5nmfYZH+SKPsOc2e4SrIfOl2e/yFXSvRLM=
+github.com/mattn/go-isatty v0.0.19 h1:JITubQf0MOLdlGRuRq+jtsDlekdYPia9ZFsB8h/APPA=
+github.com/mattn/go-isatty v0.0.19/go.mod h1:W+V8PltTTMOvKvAeJH7IuucS94S2C6jfK/D7dTCTo3Y=
 github.com/sparkdemcisin81/promptui v1.0.0 h1:GGK4vlIZP36dyM1PgKH0utVkk13kDUqOS5sy6XqeU6I=
 github.com/sparkdemcisin81/promptui v1.0.0/go.mod h1:RpZAFCsCFF7OVe+B1Pc4gEA1OAW0n7uQq43ck3rPpNk=
 golang.org/x/sys v0.0.0-20181122145206-62eef0e2fa9b/go.mod h1:STP8DvDyc/dI5b8T5hshtkjS+E42TnysNCUPdjciGhY=
 golang.org/x/sys v0.0.0-20200116001909-b77594299b42/go.mod h1:h1NjWce9XRLGQEsW7wpKNCjG9DtNlClVuFLEZdDNbEs=
 golang.org/x/sys v0.0.0-20200223170610-d5e6a3e2c0ae/go.mod h1:h1NjWce9XRLGQEsW7wpKNCjG9DtNlClVuFLEZdDNbEs=
 golang.org/x/sys v0.0.0-20210630005230-0f9fa26af87c/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
-golang.org/x/sys v0.0.0-20210927094055-39ccf1dd6fa6/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
 golang.org/x/sys v0.0.0-20220310020820-b874c991c1a5/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
-golang.org/x/sys v0.0.0-20220615213510-4f61da869c0c h1:aFV+BgZ4svzjfabn8ERpuB4JI4N6/rdy1iusx77G3oU=
-golang.org/x/sys v0.0.0-20220615213510-4f61da869c0c/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
+golang.org/x/sys v0.0.0-20220811171246-fbc7d0a398ab/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
+golang.org/x/sys v0.6.0/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
+golang.org/x/sys v0.8.0 h1:EBmGv8NaZBZTWvrbjNoL6HVt+IVy3QDQpJs7VRIw3tU=
+golang.org/x/sys v0.8.0/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
 gopkg.in/check.v1 v1.0.0-20180628173108-788fd7840127/go.mod h1:Co6ibVJAznAaIkqp8huTwlJQCZ016jof/cbN4VW5Yz0=
 gopkg.in/check.v1 v1.0.0-20201130134442-10cb98267c6c h1:Hei/4ADfdWqJk1ZMxUNpqntNwaWcugrBjAiHlqqRiVk=
 gopkg.in/check.v1 v1.0.0-20201130134442-10cb98267c6c/go.mod h1:JHkPIbrfpd72SG/EVd6muEfDQjcINNoR0C8j2r3qZ4Q=

js/body.js

@@ -1,24 +1,59 @@
 // @ts-check
-const player = /** @type {HTMLMediaElement} */ (
-  document.getElementById('videoPlayer1')
-);
+const [player1, player2] = document.querySelectorAll('video');
+const [mp4Source1] = player1.querySelectorAll('source');
+const [mp4Source2] = player2.querySelectorAll('source');
 
-const player2 = /** @type {HTMLMediaElement} */ (
-  document.getElementById('videoPlayer2')
-);
+mp4Source1.addEventListener('error', errorFunction);
+mp4Source1.addEventListener('stalled', errorFunction);
+mp4Source1.addEventListener('suspend', errorFunction);
+mp4Source1.addEventListener('waiting', errorFunction);
+mp4Source2.addEventListener('error', errorFunction);
+mp4Source2.addEventListener('stalled', errorFunction);
+mp4Source2.addEventListener('suspend', errorFunction);
+mp4Source2.addEventListener('waiting', errorFunction);
+
+/**
+ * @param {ErrorEvent | Event} event
+ */
+function errorFunction(event) {
+  const { type, target } = event;
+  const videoSrc =
+    // @ts-ignore
+    /** @type {string} */ (target?.src) || 'UNKNOWN SOURCE FILE ERROR';
+
+  switch (type) {
+    case 'error':
+      const errorStr = `Error loading: ${videoSrc}`;
+      console.error(errorStr);
+      if (isOBS) break;
+
+      const errorText = document.createTextNode(errorStr);
+      const error = document.createElement('h1');
+      error.setAttribute('id', 'error');
+      error.appendChild(errorText);
+      document.body.innerHTML = '';
+      document.body.appendChild(error);
+      break;
+    case 'stalled':
+    case 'suspended':
+    case 'waiting':
+    default:
+      console.error(`Error loading: [TYPE: ${type}] ${videoSrc}`);
+  }
+}
 
 if (!isOBS) {
-  player.setAttribute('controls', "true");
-  player2.setAttribute('controls', "true");
+  player1.setAttribute('controls', 'true');
+  player2.setAttribute('controls', 'true');
 }
 
-player.addEventListener(
+player1.addEventListener(
   'ended',
   () => {
     if (!loopFirstVideo) {
       progressPlaylistState();
     }
-    playNext(player2, player);
+    playNext(player2, player1);
   },
   {
     passive: true,
@@ -30,7 +65,7 @@ player2.addEventListener(
     if (!loopFirstVideo) {
       progressPlaylistState();
     }
-    playNext(player, player2);
+    playNext(player1, player2);
   },
   {
     passive: true,
@@ -39,11 +74,11 @@ player2.addEventListener(
 
 /***** Initial load *****/
 
-const mp4Source = player.getElementsByClassName('mp4Source')[0];
+const mp4Source = player1.getElementsByClassName('mp4Source')[0];
 let video = getNextPlaylistItem();
 // have to move the state forward after getting the first video
 progressPlaylistState();
 
 mp4Source.setAttribute('src', video);
 
-playNext(player, player2);
+playNext(player1, player2);

js/main.js

@@ -5,14 +5,15 @@ const playOnlyOne = /** @type {boolean} */ ({{ .PlayOnlyOne }});
 const loopFirstVideo = /** @type {boolean} */ ({{ .LoopFirstVideo }});
 const hashKey = /** @type {string} */("{{ .HashKey }}");
 // @ts-ignore
-const isOBS = !!window?.obsstudio?.pluginVersion
+const isOBS = !!(window?.obsstudio?.pluginVersion);
 let isTransition = true; // set true for init on purpose
 
 
 /**
  * shuffleArr takes in an array and returns a new array in random order
- * @param {any[]} originalArray any array to be shuffled
- * @return {any[]} shuffled array
+ * @template T
+ * @param {T[]} originalArray any array to be shuffled
+ * @return {T[]} shuffled array
  */
 function shuffleArr(originalArray) {
   let a = [...originalArray]
@@ -52,12 +53,8 @@ function getNewPlaylist() {
  */
 function getPlaylist() {
   let playlist = [];
-  try {
-    playlist = JSON.parse(localStorage.getItem(`playlist-${hashKey}`));
-  } catch {
-    console.debug('playlist doesn\'t exist yet!');
-  }
-  if (!playlist || playlist.length === 0 || typeof playlist.pop === 'undefined') {
+  playlist = JSON.parse(localStorage.getItem(`playlist-${hashKey}`) || '[]');
+  if (!playlist?.length || typeof playlist.pop === 'undefined') {
     playlist = getNewPlaylist();
   }
   return playlist;
@@ -82,7 +79,7 @@ function progressPlaylistState() {
  */
 function getNextPlaylistItem() {
   const playlist = getPlaylist();
-  let mediaItem = playlist.pop();
+  let mediaItem = playlist.pop() || '';
 
   console.debug({
     lastPlayed: localStorage.getItem(`lastPlayed-${hashKey}`),
@@ -110,15 +107,16 @@ function playNext(currentPlayer, nextPlayer) {
   const currentMp4Source = /** @type {HTMLSourceElement} */(currentPlayer.getElementsByClassName('mp4Source')[0]);
   const nextMp4Source  =  /** @type {HTMLSourceElement} */(nextPlayer.getElementsByClassName('mp4Source')[0]);
   const currentVideo = currentMp4Source.getAttribute('src');
+
   currentPlayer.load();
-  if (currentVideo !== transitionVideoPath) {
+  if (currentVideo && currentVideo !== transitionVideoPath) {
     localStorage.setItem(`lastPlayed-${hashKey}`, currentVideo);
   }
 
-  let video = localStorage.getItem(`lastPlayed-${hashKey}`);
+  let videoSrc = localStorage.getItem(`lastPlayed-${hashKey}`) || '';
   if (!loopFirstVideo && (!transitionVideoPath || !isTransition)) {
-    video = getNextPlaylistItem();
-    console.debug(`next video: ${video}`);
+    videoSrc = getNextPlaylistItem();
+    console.debug(`next video: ${videoSrc}`);
   }
 
   // TODO: we can use this opacity to crossfade between mediaFiles
@@ -128,7 +126,7 @@ function playNext(currentPlayer, nextPlayer) {
   nextPlayer.style['opacity'] = '0';
 
   if (transitionVideoPath && transitionVideoPath !== '' && isTransition) {
-    video = transitionVideoPath;
+    videoSrc = transitionVideoPath;
     isTransition = false;
   } else {
     isTransition = true;
@@ -138,8 +136,10 @@ function playNext(currentPlayer, nextPlayer) {
   nextMp4Source.removeAttribute('src'); // empty source
 
 
-  nextMp4Source.setAttribute('src', video);
-  nextPlayer.load();
+  if (videoSrc) {
+    nextMp4Source.setAttribute('src', videoSrc);
+    nextPlayer.load();
+  }
 
   if (playOnlyOne) {
     // Remove videos after playing once
@@ -157,14 +157,14 @@ function playNext(currentPlayer, nextPlayer) {
  * https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/readyState
  * @returns {void}
  */
-  const handleLoadedData = function() {
-    if (currentPlayer.readyState >= 2) {
+  function handleLoadedData() {
+    if (currentPlayer.readyState >= 3) {
       currentPlayer.play();
       currentPlayer.removeEventListener('loadeddata', handleLoadedData, false);
     }
    }
 
-   if (currentPlayer.readyState >= 2) {
+   if (currentPlayer.readyState >= 3) {
      currentPlayer.play();
    } else {
      currentPlayer.addEventListener('loadeddata', handleLoadedData, false);

main.go

@@ -169,7 +169,8 @@ func createHashFromUserAnswers(answers UserAnswers) string {
 		answers.TransitionVideo,
 		strings.Join(answers.MediaFiles[:], ""))
 
-	hasher := md5.New()
+	// deepcode ignore InsecureHash: Not using this hash for anything sensitive
+ 	hasher := md5.New()
 	hasher.Write([]byte(s))
 	return hex.EncodeToString(hasher.Sum(nil))
 }

template.gohtml

@@ -9,6 +9,18 @@
         margin: 0;
         padding: 0;
       }
+      body {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+      #error {
+        color: red;
+        font-weight: bolder;
+        font-size: 2.5rem;
+        background-color: white;
+        padding: 0.5rem;
+      }
     </style>
   </head>