From 400893d17bdb8aebf58708c8eb89c60b0b7e36f3 Mon Sep 17 00:00:00 2001 From: Jared Kotoff <3268576+jaredkotoff@users.noreply.github.com> Date: Sun, 28 May 2023 21:46:25 -0700 Subject: [PATCH] Add additional error output --- .vscode/settings.json | 5 +++- FUNDING.yml | 3 ++- README.md | 11 +++++--- go.mod | 12 ++++----- go.sum | 31 ++++++++++++---------- js/body.js | 61 ++++++++++++++++++++++++++++++++++--------- js/main.js | 40 ++++++++++++++-------------- main.go | 3 ++- template.gohtml | 12 +++++++++ 9 files changed, 118 insertions(+), 60 deletions(-) diff --git a/.vscode/settings.json b/.vscode/settings.json index 6ebbb9a..a9c979d 100644 --- a/.vscode/settings.json +++ b/.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": [ diff --git a/FUNDING.yml b/FUNDING.yml index 846c047..ec01289 100644 --- a/FUNDING.yml +++ b/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 diff --git a/README.md b/README.md index 7a6fdc7..948562c 100644 --- a/README.md +++ b/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://`** 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 diff --git a/go.mod b/go.mod index f749d81..c687c2b 100644 --- a/go.mod +++ b/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 ) diff --git a/go.sum b/go.sum index 81ec240..855960d 100644 --- a/go.sum +++ b/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= diff --git a/js/body.js b/js/body.js index 647c01a..ca594c0 100644 --- a/js/body.js +++ b/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); diff --git a/js/main.js b/js/main.js index bd5c941..549026e 100644 --- a/js/main.js +++ b/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); diff --git a/main.go b/main.go index a2b1d22..6dd7a36 100644 --- a/main.go +++ b/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)) } diff --git a/template.gohtml b/template.gohtml index 7f5361b..35b809f 100644 --- a/template.gohtml +++ b/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; + }