Update app.py

app.py

@@ -21,7 +21,7 @@ def get_api_key():
     key_index = (key_index + 1) % len(YOUTUBE_API_KEYS)  # Rotate to the next key
     return api_key
 
-# Function to search YouTube videos using the API with pagination to get up to 1,000 results
+# Function to search YouTube videos using the API
 def youtube_search(query, max_results=50):
     search_url = "https://www.googleapis.com/youtube/v3/search"
     all_results = []
@@ -34,42 +34,37 @@ def youtube_search(query, max_results=50):
 
     try:
         while len(all_results) < max_results:
-            params["key"] = get_api_key()  # Get the current API key
+            params["key"] = get_api_key()
             response = requests.get(search_url, params=params)
 
-            # If we get a bad response, try the next API key
             if response.status_code == 403 or response.status_code == 429:
                 print(f"Quota exceeded or forbidden for API key. Trying next key...")
                 continue
-            response.raise_for_status()  # Raise an error for other bad responses (4xx or 5xx)
+            response.raise_for_status()
 
             results = response.json().get("items", [])
             for result in results:
                 video_info = {
-                    'thumbnail_url': result["snippet"]["thumbnails"]["medium"]["url"],
+                    'thumbnail_url': result["snippet"]["thumbnails"]["high"]["url"],
                     'video_id': result["id"]["videoId"],
                     'title': result["snippet"]["title"],
                     'description': result["snippet"]["description"]
                 }
                 all_results.append(video_info)
 
-            # If there is no nextPageToken, we've reached the end
             if 'nextPageToken' not in response.json() or len(all_results) >= max_results:
                 break
 
-            # Update params with the nextPageToken to get the next batch of results
             params['pageToken'] = response.json()['nextPageToken']
 
         return all_results
 
     except requests.exceptions.RequestException as e:
-        # Print the error message to help debug issues
         print(f"Error during YouTube API request: {e}")
         return [], f"Error retrieving video results: {str(e)}"
 
 # Function to display the video using the video URL
 def show_video(video_url):
-    # Regular expression to extract the YouTube video ID from the URL
     video_id = None
     patterns = [
         r"youtube\.com/watch\?v=([^\&\?\/]+)",
@@ -84,14 +79,11 @@ def show_video(video_url):
             video_id = match.group(1)
             break
 
-    # If no video ID is found, return an error message
     if not video_id:
         return "Invalid YouTube URL. Please enter a valid YouTube video link."
 
-    # Create the embed URL
     embed_url = f"https://www.youtube.com/embed/{video_id}"
 
-    # Return an iframe with the video
     html_code = f'''
     <iframe width="560" height="315" src="{embed_url}" 
     frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" 
@@ -100,48 +92,82 @@ def show_video(video_url):
     return html_code
 
 # Create the Gradio interface
-with gr.Blocks() as demo:
+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:
     gr.Markdown("## YouTube Video Search, Selection, and Playback")
-    video_ids_state = gr.State()  # To store video IDs corresponding to the search results
 
     with gr.Row():
         with gr.Column(scale=3):
             search_query_input = gr.Textbox(label="Search YouTube", placeholder="Enter your search query here")
             search_button = gr.Button("Search")
-            search_output = gr.Gallery(label="Search Results", columns=1, height="800px")
-        
+            search_output = gr.HTML(label="Search Results")
+
         with gr.Column(scale=2):
-            selected_video_link = gr.Textbox(label="Selected Video Link", interactive=False)
+            selected_video_link = gr.Textbox(label="Selected Video Link", interactive=False, elem_id='selected_video_link')
             play_video_button = gr.Button("Play Video")
             video_output = gr.HTML(label="Video Player")
 
-    # Update the search results and store video IDs
+    # Define search button behavior
     def update_search_results(query):
         search_results = youtube_search(query)
-        gallery_items = []
-        video_ids = []
+        html_code = '<div>'
         for item in search_results:
-            image_url = item['thumbnail_url']
+            video_id = item['video_id']
+            thumbnail_url = item['thumbnail_url']
             title = item['title']
             description = item['description']
-            caption = f"{title}\n{description}"
-            gallery_items.append((image_url, caption))
-            video_ids.append(item['video_id'])
-        return gallery_items, video_ids
-
-    # When a video is selected
-    def on_video_select(evt: gr.SelectData, video_ids):
-        index = evt.index
-        selected_video_id = video_ids[index]
-        video_url = f"https://www.youtube.com/watch?v={selected_video_id}"
-        return video_url
-
-    # Play the video
+            html_code += f'''
+            <div class="search-item" onclick="selectVideo('{video_id}')">
+                <img src="{thumbnail_url}" alt="{title}">
+                <div>
+                    <h3>{title}</h3>
+                    <p>{description}</p>
+                </div>
+            </div>
+            '''
+        html_code += '''
+        <script>
+        function getGradioApp() {
+            const elems = document.getElementsByTagName('gradio-app');
+            const gradioShadowRoot = elems.length == 0 ? null : elems[0].shadowRoot;
+            return gradioShadowRoot ? gradioShadowRoot : document;
+        }
+
+        function selectVideo(video_id) {
+            const gradioApp = getGradioApp();
+            const textbox = gradioApp.querySelector('#selected_video_link textarea');
+            textbox.value = 'https://www.youtube.com/watch?v=' + video_id;
+            textbox.dispatchEvent(new Event('input', { bubbles: true }));
+        }
+        </script>
+        '''
+        html_code += '</div>'
+        return html_code
+
+    # Play the video when the Play Video button is clicked
     def play_video(video_url):
         return show_video(video_url)
 
-    search_button.click(update_search_results, inputs=search_query_input, outputs=[search_output, video_ids_state])
-    search_output.select(on_video_select, inputs=video_ids_state, outputs=selected_video_link)
+    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)
 
 # Launch the Gradio interface