Update app.py

app.py

@@ -61,7 +61,7 @@ def youtube_search(query, max_results=50):
 
     except requests.exceptions.RequestException as e:
         print(f"Error during YouTube API request: {e}")
-        return [], f"Error retrieving video results: {str(e)}"
+        return []
 
 # Function to display the video using the video URL
 def show_video(video_url):
@@ -91,33 +91,8 @@ def show_video(video_url):
     '''
     return html_code
 
-# Function to handle video selection
-def select_video(video_id):
-    video_url = f"https://www.youtube.com/watch?v={video_id}"
-    return video_url
-
 # Create the Gradio interface
-with gr.Blocks(css="""
-.search-item {
-    display: flex;
-    align-items: flex-start;
-    margin-bottom: 30px;
-    cursor: pointer;
-}
-.search-item img {
-    width: 300px;
-    height: auto;
-    margin-right: 20px;
-}
-.search-item h3 {
-    font-size: 24px;
-    margin: 0 0 10px 0;
-}
-.search-item p {
-    font-size: 18px;
-    margin: 0;
-}
-""") as demo:
+with gr.Blocks() as demo:
     gr.Markdown("## YouTube Video Search, Selection, and Playback")
 
     with gr.Row():
@@ -127,21 +102,22 @@ with gr.Blocks(css="""
             search_output = gr.HTML(label="Search Results")
 
         with gr.Column(scale=2):
-            selected_video_link = gr.Textbox(label="Selected Video Link", interactive=False)
-            play_video_button = gr.Button("Play Video")
+            selected_video_link = gr.Textbox(label="Selected Video Link", interactive=True)
+            play_button = gr.Button("Play Video")
             video_output = gr.HTML(label="Video Player")
 
     # Define search button behavior
     def update_search_results(query):
         search_results = youtube_search(query)
-        html_code = '<div>'
+        html_code = '<div id="search-results">'
         for item in search_results:
             video_id = item['video_id']
             thumbnail_url = item['thumbnail_url']
             title = item['title']
             description = item['description']
+            video_url = f"https://www.youtube.com/watch?v={video_id}"
             html_code += f'''
-            <div class="search-item" onclick="selectVideo('{video_id}')">
+            <div class="search-item" onclick="selectVideo('{video_url}')">
                 <img src="{thumbnail_url}" alt="{title}">
                 <div>
                     <h3>{title}</h3>
@@ -151,39 +127,25 @@ with gr.Blocks(css="""
             '''
         html_code += '''
         <script>
-        function selectVideo(video_id) {
-            fetch('/select_video', {
-                method: 'POST',
-                headers: { 'Content-Type': 'application/json' },
-                body: JSON.stringify({ 'video_id': video_id })
-            })
-            .then(response => response.json())
-            .then(data => {
-                const gradioApp = document.querySelector('gradio-app').shadowRoot || document;
-                const textbox = gradioApp.querySelector('#selected_video_link textarea');
-                if (!textbox) {
-                    console.error('Selected video link textbox not found');
-                    return;
-                }
-                textbox.value = data;
+        function selectVideo(videoUrl) {
+            const textbox = document.querySelector('input[data-testid="textbox"]');
+            if (textbox) {
+                textbox.value = videoUrl;
                 textbox.dispatchEvent(new Event('input', { bubbles: true }));
-            })
-            .catch(error => {
-                console.error('Error selecting video:', error);
-            });
+            }
         }
         </script>
         '''
         html_code += '</div>'
         return html_code
 
-    # Play the video when the Play Video button is clicked
+    # Function to play the selected video
     def play_video(video_url):
         return show_video(video_url)
 
+    # Set up event listeners
     search_button.click(update_search_results, inputs=search_query_input, outputs=search_output)
-    play_video_button.click(play_video, inputs=selected_video_link, outputs=video_output)
-    select_video_event = gr.Event(fn=select_video, inputs="video_id", outputs=selected_video_link, api_name="select_video")
+    play_button.click(play_video, inputs=selected_video_link, outputs=video_output)
 
 # Launch the Gradio interface
-demo.launch()
+demo.launch()