update refresh button

app.py

@@ -42,6 +42,25 @@ playlist_id = "PL8uZlc2CEpenUCAo9PeiOtbU04lFv48yD"
 video_id = get_latest_video_id(channel_id, playlist_id = "PL8uZlc2CEpenUCAo9PeiOtbU04lFv48yD")
 print(f"[DEBUG]video id: {video_id}")
 
+def refresh_video():
+    video_id = get_latest_video_id(channel_id, playlist_id = "PL8uZlc2CEpenUCAo9PeiOtbU04lFv48yD")
+    print(f"[DEBUG]video id: {video_id}")
+    iframe_html = f'''
+    <div style="position: relative; width: 100%; padding-top: 56.25%;">
+        <iframe 
+            style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;" 
+            src="https://www.youtube.com/embed/{video_id}" 
+            title="OT-2 Livestream" 
+            frameborder="0" 
+            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" 
+            referrerpolicy="strict-origin-when-cross-origin" 
+            allowfullscreen>
+        </iframe>
+    </div>
+    '''
+    return iframe_html
+
+
 start_prefect_worker()
 print("[TEST]Prefect worker initialized")
 
@@ -444,22 +463,29 @@ with gr.Blocks(title="OT-2 Liquid Color Matching Experiment Queue") as demo:
             gr.Markdown("### Queue Status")
             queue_status = gr.Markdown("Loading queue status...")
             update_status_btn = gr.Button("Refresh Queue Status")
+        
             gr.Markdown("### YouTube Livestream")
-            #src="https://www.youtube.com/embed/live_stream?channel=UCHBzCfYpGwoqygH9YNh9A6g" 
-            iframe_html = f'''
-            <div style="position: relative; width: 100%; padding-top: 56.25%;">
-                <iframe 
-                    style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;" 
-                    src="https://www.youtube.com/embed/{video_id}" 
-                    title="OT-2 Livestream" 
-                    frameborder="0" 
-                    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" 
-                    referrerpolicy="strict-origin-when-cross-origin" 
-                    allowfullscreen>
-                </iframe>
-            </div>
-            '''
-            gr.HTML(iframe_html)
+        
+            def refresh_iframe():
+                video_id = get_latest_video_id(channel_id, playlist_id="PL8uZlc2CEpenUCAo9PeiOtbU04lFv48yD")
+                print(f"[DEBUG]video id: {video_id}")
+                return f'''
+                <div style="position: relative; width: 100%; padding-top: 56.25%;">
+                    <iframe 
+                        style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;" 
+                        src="https://www.youtube.com/embed/{video_id}" 
+                        title="OT-2 Livestream" 
+                        frameborder="0" 
+                        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" 
+                        referrerpolicy="strict-origin-when-cross-origin" 
+                        allowfullscreen>
+                    </iframe>
+                </div>
+                '''
+        
+            iframe_component = gr.HTML(refresh_iframe())
+            refresh_video_btn = gr.Button("Refresh Livestream")
+            refresh_video_btn.click(fn=refresh_iframe, outputs=iframe_component)
 
     verify_id_btn.click(
         verify_student_id,