Temp test

Functions/temp.py

@@ -1,13 +0,0 @@
-import urllib
-
-
-def youtube_link_to_id(link):
-    try:
-        from urllib.parse import urlparse, parse_qs
-        parsed = urlparse(link)
-        return parse_qs(parsed.query)['v'][0]
-    except (KeyError, IndexError):
-        raise ValueError(f"Invalid YouTube URL: {link}")
-
-
-print(youtube_link_to_id("https://www.youtube.com/watch?v=tkMg8g8vVUo&ab_channel=ASLTHAT"))

README.md

@@ -5,9 +5,9 @@ colorFrom: blue
 colorTo: red
 sdk: gradio
 sdk_version: 5.49.1
-app_file: app.py
+app_file: temp.py
 pinned: false
-hf_oauth: true
+hf_oauth: false
 ---
 
 Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

temp.py

@@ -0,0 +1,58 @@
+import gradio as gr
+
+
+def get_youtube_player_html():
+    """Returns the static HTML container for YouTube player (API loaded in page head)"""
+    return """
+<div style="margin:0 auto; width: fit-content;">
+  <div id="yt-container" style="width: 640px; height: 360px;"></div>
+</div>
+"""
+
+
+css = """
+#yt-container {
+}
+"""
+
+yt_init_js = """
+<script src="https://www.youtube.com/iframe_api"></script>
+<script>
+window.onYouTubeIframeAPIReady = function() {
+    window.ytPlayer = new YT.Player('yt-container', {
+        height: '360',
+        width: '640',
+        playerVars: { 
+            origin: window.location.origin, 
+            playsinline: 1 
+        },
+        events: {
+            'onReady': function(event) {
+                window.ytPlayerReady = true;
+            }
+        }
+    });
+};
+</script>
+"""
+
+
+with gr.Blocks(css=css, head=yt_init_js) as demo:
+    video_embed = gr.HTML(value=get_youtube_player_html())
+    current_video_id = gr.Textbox(value="tkMg8g8vVUo", visible=False, interactive=False)
+
+    demo.load(
+        fn=None,
+        inputs=current_video_id,
+        outputs=None,
+        js="""(videoId) => {
+            const checkPlayer = setInterval(() => {
+                if (window.ytPlayer && window.ytPlayer.cueVideoById) {
+                    clearInterval(checkPlayer);
+                    window.ytPlayer.cueVideoById(videoId);
+                }
+            }, 100);
+        }"""
+    )
+
+demo.launch()