From b47b9be2d4879d165c029f055ed3725239cffb33 Mon Sep 17 00:00:00 2001
From: Bastian <Shaarigan@users.noreply.github.com>
Date: Thu, 13 Feb 2025 16:09:11 +0100
Subject: [PATCH 1/2] Fixed clip player

---
 viewer.html | 57 ++++++++++++++++++++++++++++++++++++++++++++++++++---
 1 file changed, 54 insertions(+), 3 deletions(-)

diff --git a/viewer.html b/viewer.html
index 501614c..02556cf 100644
--- a/viewer.html
+++ b/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 = []

From 400765996c7c0e2e3d299b3b02c59b32b40246e0 Mon Sep 17 00:00:00 2001
From: Bastian <Shaarigan@users.noreply.github.com>
Date: Thu, 13 Feb 2025 16:15:29 +0100
Subject: [PATCH 2/2] Added missing await to player

---
 viewer.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/viewer.html b/viewer.html
index 02556cf..0cad917 100644
--- a/viewer.html
+++ b/viewer.html
@@ -174,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)