Adjusted clip player to changed Twitch Clip URI

viewer.html

@@ -82,9 +82,60 @@
             return clips;
         }
 
-        function getClipStreamURL(clip) {
-            let thumbPart = clip.thumbnail_url.split("-preview-");
-            return thumbPart[0] + ".mp4";
+        async function getClipStreamURL(clip) {
+            const result = await getClipInfo(clip.id)
+            // console.log(`Selected target: ${JSON.stringify(result)}`)
+
+            const uri = result.sourceUrl + "?token=" + encodeURIComponent(result.token) + "&sig=" + encodeURIComponent(result.signature)
+            // console.log(`Video URI: ${uri}`)
+
+            return uri
+        }
+
+        async function getClipInfo(clipId) {
+            const content = JSON.stringify(buildGraphQLQuery(clipId))
+            const response = await fetch("https://gql.twitch.tv/gql", {
+                method: "POST",
+                headers: {
+                   "Content-Type": "application/json",
+                   "Client-ID": "kimne78kx3ncx6brgo4mv6wki5h1ko"
+                },
+                body: content
+            })
+
+            const responseBody = await response.text()
+            // console.log(`GraphQL Response: ${responseBody}`)
+
+            return parseGraphQLResponse(responseBody)
+        }
+
+        function buildGraphQLQuery(clipId) {
+           return {
+              operationName: "VideoAccessToken_Clip",
+              variables: {
+                  slug: clipId
+              },
+              extensions: {
+                   persistedQuery: {
+                       version: 1,
+                       sha256Hash: "36b89d2507fce29e5ca551df756d27c1cfe079e2609642b4390aa4c35796eb11"
+                   }
+              }
+           }
+        }
+
+        function parseGraphQLResponse(responseBody) {
+             const jsonResponse = JSON.parse(responseBody);
+
+             const videoQualities = jsonResponse.data.clip.videoQualities;
+             const sourceUrlIndex = videoQualities && videoQualities.length > 2 ? 2 : 0;
+             const playbackAccessToken = jsonResponse.data.clip.playbackAccessToken;
+
+             return {
+                 sourceUrl: videoQualities[sourceUrlIndex].sourceURL,
+                 signature: playbackAccessToken.signature,
+                 token: playbackAccessToken.value
+             }
         }
 
         let CLIPS_TO_PLAY = []
@@ -123,7 +174,7 @@
             CLIP_PLAYING = clip
 
             player.pause()
-            player.src = getClipStreamURL(clip)
+            player.src = await getClipStreamURL(clip)
             player.play()
             if (SHOW_CLIP_CREATORS.toLowerCase() == "true") {
                 let date = new Date(clip.created_at)