feat: add GET /tts/permalink

src/huesoporro/main.py

@@ -131,6 +131,22 @@ async def get_tts_overlay() -> Template:
     return Template(template_name="tts.html")
 
 
+@get(
+    "/tts/permalink",
+    media_type=MediaType.HTML,
+)
+async def get_tts_permalink(access_token: str) -> Template:
+    """Handler for the /tts permalink endpoint to be used by apps that can only give the authentication as a query
+    param and not as a cookie, i.e. OBS"""
+
+    # authenticate the user using the provided access token
+    await _authenticate(access_token)
+
+    return Template(
+        template_name="tts.html",
+    )
+
+
 @get(
     "/",
     media_type=MediaType.HTML,
@@ -197,6 +213,7 @@ def create_app():
             login,
             get_index,
             get_tts_overlay,
+            get_tts_permalink,
             WebsocketHandler,
         ],
         static_files_config=(

src/huesoporro/static/js/utils.js

@@ -16,3 +16,27 @@ function addLogoutEvent() {
     });
 
 }
+
+function setCookie(name, value, days) {
+    const date = new Date();
+    date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
+    const expires = `expires=${date.toUTCString()}`;
+    document.cookie = `${name}=${value};${expires};path=/;SameSite=Strict`;
+}
+
+function getCookie(name) {
+    const cookieName = `${name}=`;
+    const decodedCookie = decodeURIComponent(document.cookie);
+    const cookieArray = decodedCookie.split(';');
+
+    for (let i = 0; i < cookieArray.length; i++) {
+        let cookie = cookieArray[i];
+        while (cookie.charAt(0) === ' ') {
+            cookie = cookie.substring(1);
+        }
+        if (cookie.indexOf(cookieName) === 0) {
+            return cookie.substring(cookieName.length, cookie.length);
+        }
+    }
+    return null;
+}

src/huesoporro/templates/header.html

@@ -10,7 +10,7 @@
     <meta name="description" content="Huesoporro Twitch bot">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
-    <script src="static/js/utils.js"></script>
+    <script src="/static/js/utils.js"></script>
 
     <title>Huesoporro</title>
 </head>

src/huesoporro/templates/login.html

@@ -35,35 +35,11 @@
                 this.loginData = null;
             }
 
-            // Helper method to set a cookie
-            setCookie(name, value, days) {
-                const date = new Date();
-                date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
-                const expires = `expires=${date.toUTCString()}`;
-                document.cookie = `${name}=${value};${expires};path=/;SameSite=Strict`;
-            }
 
-            // Helper method to get a cookie
-            getCookie(name) {
-                const cookieName = `${name}=`;
-                const decodedCookie = decodeURIComponent(document.cookie);
-                const cookieArray = decodedCookie.split(';');
-
-                for (let i = 0; i < cookieArray.length; i++) {
-                    let cookie = cookieArray[i];
-                    while (cookie.charAt(0) === ' ') {
-                        cookie = cookie.substring(1);
-                    }
-                    if (cookie.indexOf(cookieName) === 0) {
-                        return cookie.substring(cookieName.length, cookie.length);
-                    }
-                }
-                return null;
-            }
 
             async readLoginData() {
                 // Try to get existing login data from cookies
-                const loginData = this.getCookie("twitchLoginData");
+                const loginData = getCookie("twitchLoginData");
 
                 try {
                     // Parse the stored login data if it exists
@@ -89,7 +65,7 @@
 
                     try {
                         // Save login data to cookie (expires in 30 days)
-                        this.setCookie("twitchLoginData", JSON.stringify(loginData), 30);
+                        setCookie("twitchLoginData", JSON.stringify(loginData), 30);
                         this.loginData = loginData;
 
                         // Hide the login button

src/huesoporro/templates/tts.html

@@ -21,6 +21,7 @@
             <label for="textInput">Enter text:</label>
             <input type="text" id="textInput" placeholder="Hi huesoporro">
             <button id="sendButton" type="button">Send text</button>
+            <button id="genPermalinkButton" type="button" style="background-color: #9c36b5; border-color: #9c36b5">Generate OBS Link</button>
         </form>
     </section>
     <audio id="audioPlayer" hidden="hidden" controls></audio>
@@ -53,6 +54,7 @@
                 this.receivedFileSize = 0;
                 this.log("Connecting to WebSocket: " + this.url);
                 this.websocket = new WebSocket(this.url);
+                this.websocket.withCredentials = true;
                 this.websocket.onopen = () => {
                     this.log('WebSocket connection established');
                 };
@@ -178,6 +180,17 @@
 
         addLogoutEvent()
 
+        const genPermalinkButton = document.getElementById('genPermalinkButton');
+        genPermalinkButton.addEventListener('click', () => {
+            // generate <ur>/tts/permalink?access_token=<access_token>
+            // the access token is available in the twitchLoginData cookie
+
+            const cookie = JSON.parse(getCookie("twitchLoginData"))
+            const permalinkUrl = `${window.location.origin}/tts/permalink?access_token=${cookie.access_token}`;
+            navigator.clipboard.writeText(permalinkUrl);
+            alert('OBS link copied to clipboard ' + permalinkUrl);
+        })
+
     });
 </script>
 </body>