From 70bbcb97b80a10b439228a8d3df97d9b9fc6abf3 Mon Sep 17 00:00:00 2001
From: Gabe Kangas <gabek@real-ity.com>
Date: Fri, 15 Nov 2024 13:25:06 -0800
Subject: [PATCH] fix(js): tweak how the vjs hook is fired and url is created

---
 web/components/video/VideoJS/VideoJS.tsx | 16 ++++++++++++----
 1 file changed, 12 insertions(+), 4 deletions(-)

diff --git a/web/components/video/VideoJS/VideoJS.tsx b/web/components/video/VideoJS/VideoJS.tsx
index 5177bf581..6120056c1 100644
--- a/web/components/video/VideoJS/VideoJS.tsx
+++ b/web/components/video/VideoJS/VideoJS.tsx
@@ -29,23 +29,31 @@ export const VideoJS: FC<VideoJSProps> = ({ options, onReady }) => {
       player.autoplay(options.autoplay);
       player.src(options.sources);
     }
+  }, [options, videoRef]);
 
+  React.useEffect(() => {
     videojs.getPlayer(videoRef.current).on('xhr-hooks-ready', () => {
       const cachebusterRequestHook = o => {
-        let { uri } = o;
+        const { uri } = o;
+        let updatedURI = uri;
         if (o.uri.match('m3u8')) {
+          const u = uri.startsWith('http')
+            ? new URL(uri)
+            : new URL(uri, window.location.protocol + window.location.host);
           const cachebuster = Math.random().toString(16).slice(2, 8);
-          uri = `${o.uri}?cachebust=${cachebuster}`;
+          u.searchParams.append('cachebust', cachebuster);
+          updatedURI = u.toString();
         }
         return {
-          uri,
+          ...o,
+          uri: updatedURI,
         };
       };
       (
         videojs.getPlayer(videoRef.current).tech({ IWillNotUseThisInPlugins: true }) as any
       )?.vhs.xhr.onRequest(cachebusterRequestHook);
     });
-  }, [options, videoRef]);
+  }, []);
 
   return (
     <div data-vjs-player>