Fix global search

app/main.py

@@ -34,6 +34,7 @@ def https_url_for(context: dict, name: str, **path_params: Any) -> URL:
     url: URL = request.url_for(name, **path_params)
     return url.replace(scheme="https")
 
+
 templates.env.globals["https_url_for"] = https_url_for
 
 
@@ -54,16 +55,48 @@ async def video_page(request: Request, video_id: str):
     if video and video.title:
         title = video.title
 
+    # Get the start time from query parameters if available
+    start_time = 0
+    if "t" in request.query_params:
+        try:
+            # Try to parse the t parameter as seconds
+            t_param = request.query_params.get("t")
+            # First try as a float (seconds)
+            start_time = int(float(t_param))
+        except (ValueError, TypeError):
+            # If that fails, try parsing as MM:SS or HH:MM:SS format
+            try:
+                if ":" in t_param:
+                    parts = t_param.split(":")
+                    if len(parts) == 2:  # MM:SS
+                        start_time = int(parts[0]) * 60 + int(parts[1])
+                    elif len(parts) == 3:  # HH:MM:SS
+                        start_time = (
+                            int(parts[0]) * 3600 + int(parts[1]) * 60 + int(parts[2])
+                        )
+            except (ValueError, TypeError, IndexError):
+                # If all parsing fails, default to 0
+                start_time = 0
+
     return templates.TemplateResponse(
         "video.html",
-        {"request": request, "title": title, "video_id": video_id},
+        {
+            "request": request,
+            "title": title,
+            "video_id": video_id,
+            "start_time": start_time,
+        },
     )
 
 
 @app.get("/watch")
 async def watch_redirect(request: Request, v: str):
     # Redirect YouTube-style URLs to our video page
-    return RedirectResponse(url=f"/video/{v}")
+    # If there's a t parameter, include it in the redirect
+    if "t" in request.query_params:
+        return RedirectResponse(url=f"/video/{v}?t={request.query_params.get('t')}")
+    else:
+        return RedirectResponse(url=f"/video/{v}")
 
 
 # Include API routers

app/models/video.py

@@ -21,7 +21,8 @@ class Video(BaseModel):
     channel: Optional[str] = Field(None, description="Channel name")
     processed: bool = Field(False, description="Whether the video has been processed")
     created_at: Optional[int] = Field(
-        None, description="Unix timestamp (seconds since epoch) when the video was processed"
+        None,
+        description="Unix timestamp (seconds since epoch) when the video was processed",
     )
 
 

app/services/video_service.py

@@ -12,7 +12,9 @@ from app.models.video import VideoSegment, Video, SearchResult
 from app.services.qdrant_service import qdrant_client
 
 # Initialize the sentence transformer model
-model = SentenceTransformer("sentence-transformers/static-retrieval-mrl-en-v1", cache_folder="/tmp")
+model = SentenceTransformer(
+    "sentence-transformers/static-retrieval-mrl-en-v1", cache_folder="/tmp"
+)
 
 # Collection names
 COLLECTION_NAME = "video_segments"

app/static/css/style.css

@@ -135,3 +135,51 @@
     color: var(--accent-content, #581c87);
     white-space: nowrap;
 }
+
+/* Truncate text lines for search results */
+.truncate-3-lines {
+    display: -webkit-box;
+    -webkit-line-clamp: 3;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+/* Modal styles */
+.modal-box {
+    max-width: 80vw;
+    width: 100%;
+}
+
+@media (min-width: 768px) {
+    .modal-box {
+        max-width: 700px;
+    }
+}
+
+@media (min-width: 1024px) {
+    .modal-box {
+        max-width: 900px;
+    }
+}
+
+/* Search results in modal */
+#search-results-container {
+    scrollbar-width: thin;
+    scrollbar-color: var(--primary) var(--base-200);
+}
+
+#search-results-container::-webkit-scrollbar {
+    width: 8px;
+}
+
+#search-results-container::-webkit-scrollbar-track {
+    background: var(--base-200);
+    border-radius: 10px;
+}
+
+#search-results-container::-webkit-scrollbar-thumb {
+    background-color: var(--primary);
+    border-radius: 10px;
+    border: 2px solid var(--base-200);
+}

app/static/js/index.js

@@ -7,6 +7,14 @@ document.addEventListener('DOMContentLoaded', () => {
     const recentlyProcessedCard = document.getElementById('recently-processed');
     const videoListContainer = document.getElementById('video-list');
     
+    // Check for search parameter in URL
+    const urlParams = new URLSearchParams(window.location.search);
+    const searchQuery = urlParams.get('search');
+    if (searchQuery) {
+        // Display search results
+        displaySearchResults(searchQuery);
+    }
+    
     // Example video buttons
     const exampleButtons = document.querySelectorAll('.example-video');
     
@@ -265,4 +273,200 @@ document.addEventListener('DOMContentLoaded', () => {
     
     // Display recent videos on page load
     displayRecentVideos();
+    
+    // Function to display search results
+    function displaySearchResults(query) {
+        // Try to use the modal if available
+        const searchModal = document.getElementById('search-results-modal');
+        const searchResultsContainer = document.getElementById('search-results-container');
+        
+        if (searchModal && searchResultsContainer) {
+            // Update modal title with search term
+            const modalTitle = searchModal.querySelector('h3');
+            if (modalTitle) {
+                modalTitle.textContent = `Search Results for "${query}"`;
+            }
+            
+            // Show the modal
+            searchModal.showModal();
+            
+            // Clear previous results and show loading state
+            searchResultsContainer.innerHTML = `
+                <div class="flex justify-center items-center p-4">
+                    <span class="loading loading-spinner loading-md"></span>
+                    <span class="ml-2">Searching...</span>
+                </div>
+            `;
+            
+            // Fetch and display results in the modal
+            fetchAndDisplayResults(query, searchResultsContainer);
+        } else {
+            // Fallback to the old implementation if modal is not available
+            // Show a search results card with loading indicator
+            processStatus.innerHTML = `
+                <div class="card bg-base-100 shadow-xl mt-4">
+                    <div class="card-body">
+                        <h2 class="card-title">Search Results for "${query}"</h2>
+                        <div class="mt-4">
+                            <div class="flex justify-center items-center p-4">
+                                <span class="loading loading-spinner loading-md"></span>
+                                <span class="ml-2">Searching...</span>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            `;
+            
+            // Fetch and display results in the processStatus element
+            fetchAndDisplayResults(query, null, processStatus);
+        }
+    }
+    
+    // Helper function to fetch and display search results
+    function fetchAndDisplayResults(query, container, fallbackContainer) {
+        // Fetch search results from API
+        fetch(`/api/video/search?query=${encodeURIComponent(query)}&limit=10`)
+            .then(response => {
+                if (!response.ok) {
+                    throw new Error('Failed to perform search');
+                }
+                return response.json();
+            })
+            .then(results => {
+                if (results && results.length > 0) {
+                    // Group results by video
+                    const videoGroups = {};
+                    // First pass: collect all video IDs that need titles
+                    const videoIds = [];
+                    results.forEach(result => {
+                        const videoId = result.segment.video_id;
+                        if (!videoGroups[videoId]) {
+                            videoGroups[videoId] = {
+                                videoId: videoId,
+                                title: `Video ${videoId}`,  // Default title, will be updated
+                                segments: []
+                            };
+                            // Add to list of IDs to fetch titles for
+                            videoIds.push(videoId);
+                        }
+                        videoGroups[videoId].segments.push(result);
+                    });
+                    
+                    // If we have video IDs, fetch their proper titles
+                    const videoPromises = videoIds.map(videoId => {
+                        return fetch(`/api/video/info/${videoId}`)
+                            .then(response => response.ok ? response.json() : null)
+                            .then(videoInfo => {
+                                if (videoInfo && videoInfo.title && videoGroups[videoId]) {
+                                    videoGroups[videoId].title = videoInfo.title;
+                                }
+                            })
+                            .catch(error => console.error(`Error fetching video info for ${videoId}:`, error));
+                    });
+                    
+                    // After all video titles are fetched, continue with rendering
+                    Promise.all(videoPromises).then(() => {
+                        // Generate results HTML
+                        const resultsHTML = Object.values(videoGroups).map(group => {
+                            const segmentsHTML = group.segments.map(result => {
+                                return `
+                                    <a href="/video/${group.videoId}?t=${Math.floor(result.segment.start)}" 
+                                       class="block p-2 hover:bg-base-200 rounded-md transition-colors duration-150 mb-2">
+                                        <div class="flex items-start">
+                                            <div class="text-primary font-mono mr-2">${formatTime(result.segment.start)}</div>
+                                            <div class="flex-grow">
+                                                <p class="truncate-3-lines">${result.segment.text}</p>
+                                                <div class="text-xs opacity-70 mt-1">Score: ${(result.score * 100).toFixed(1)}%</div>
+                                            </div>
+                                        </div>
+                                    </a>
+                                `;
+                            }).join('');
+                            
+                            return `
+                                <div class="mb-6">
+                                    <div class="flex items-center mb-2">
+                                        <img src="https://img.youtube.com/vi/${group.videoId}/default.jpg" alt="Thumbnail" 
+                                             class="w-12 h-12 rounded-md mr-2">
+                                        <h3 class="text-lg font-bold">
+                                            <a href="/video/${group.videoId}" class="link">${group.title}</a>
+                                        </h3>
+                                    </div>
+                                    <div class="pl-4 border-l-2 border-primary">
+                                        ${segmentsHTML}
+                                    </div>
+                                </div>
+                            `;
+                        }).join('');
+                    
+                        // Display results in the appropriate container
+                        if (container) {
+                            container.innerHTML = resultsHTML;
+                        } else if (fallbackContainer) {
+                            fallbackContainer.innerHTML = `
+                                <div class="card bg-base-100 shadow-xl mt-4">
+                                    <div class="card-body">
+                                        <h2 class="card-title">Search Results for "${query}"</h2>
+                                        <div class="mt-4">
+                                            ${resultsHTML}
+                                        </div>
+                                    </div>
+                                </div>
+                            `;
+                        }
+                    });
+                } else {
+                    // No results found - display immediately, no need to wait for titles
+                    const noResultsHTML = `
+                        <div class="alert alert-info">
+                            <svg xmlns="http://www.w3.org/2000/svg" class="stroke-current shrink-0 h-6 w-6" fill="none" viewBox="0 0 24 24">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+                            </svg>
+                            <span>No results found. Try a different search term or process more videos.</span>
+                        </div>
+                    `;
+                    
+                    if (container) {
+                        container.innerHTML = noResultsHTML;
+                    } else if (fallbackContainer) {
+                        fallbackContainer.innerHTML = `
+                            <div class="card bg-base-100 shadow-xl mt-4">
+                                <div class="card-body">
+                                    <h2 class="card-title">Search Results for "${query}"</h2>
+                                    <div class="mt-4">
+                                        ${noResultsHTML}
+                                    </div>
+                                </div>
+                            </div>
+                        `;
+                    }
+                }
+            })
+            .catch(error => {
+                console.error('Search error:', error);
+                const errorHTML = `
+                    <div class="alert alert-error">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="stroke-current shrink-0 h-6 w-6" fill="none" viewBox="0 0 24 24">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z" />
+                        </svg>
+                        <span>Error performing search: ${error.message}</span>
+                    </div>
+                `;
+                
+                if (container) {
+                    container.innerHTML = errorHTML;
+                } else if (fallbackContainer) {
+                    fallbackContainer.innerHTML = `
+                        <div class="card bg-base-100 shadow-xl mt-4">
+                            <div class="card-body">
+                                <h2 class="card-title">Search Results for "${query}"</h2>
+                                <div class="mt-4">
+                                    ${errorHTML}
+                                </div>
+                            </div>
+                        </div>
+                    `;
+                }
+            });
+    }
 });

app/static/js/main.js

@@ -20,13 +20,35 @@ document.addEventListener('DOMContentLoaded', () => {
     if (savedTheme) {
         document.documentElement.setAttribute('data-theme', savedTheme);
     }
+    
+    // Handle global search
+    const searchButton = document.getElementById('global-search-button');
+    const searchInput = document.getElementById('global-search');
+    
+    if (searchButton && searchInput) {
+        searchButton.addEventListener('click', () => {
+            handleGlobalSearch();
+        });
+        
+        searchInput.addEventListener('keypress', (e) => {
+            if (e.key === 'Enter') {
+                handleGlobalSearch();
+            }
+        });
+    }
 });
 
-// Format seconds to MM:SS format
+// Format seconds to HH:MM:SS format
 function formatTime(seconds) {
-    const minutes = Math.floor(seconds / 60);
+    const hours = Math.floor(seconds / 3600);
+    const mins = Math.floor((seconds % 3600) / 60);
     const secs = Math.floor(seconds % 60);
-    return `${minutes.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;
+    
+    if (hours > 0) {
+        return `${hours}:${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;
+    } else {
+        return `${mins}:${secs.toString().padStart(2, '0')}`;
+    }
 }
 
 // Error handling function
@@ -99,6 +121,138 @@ function extractVideoId(url) {
     return (match && match[7].length === 11) ? match[7] : null;
 }
 
+// Handle global search
+function handleGlobalSearch() {
+    const searchInput = document.getElementById('global-search');
+    const searchTerm = searchInput.value.trim();
+    
+    if (searchTerm) {
+        // Get modal elements
+        const searchModal = document.getElementById('search-results-modal');
+        const searchResultsContainer = document.getElementById('search-results-container');
+        const modalTitle = searchModal.querySelector('h3');
+        
+        // Update modal title with search term
+        modalTitle.textContent = `Search Results for "${searchTerm}"`;
+        
+        // Show the modal
+        searchModal.showModal();
+        
+        // Clear previous results and show loading state
+        searchResultsContainer.innerHTML = `
+            <div class="flex justify-center items-center p-4">
+                <span class="loading loading-spinner loading-md"></span>
+                <span class="ml-2">Searching...</span>
+            </div>
+        `;
+        
+        // Fetch search results from API
+        fetch(`/api/video/search?query=${encodeURIComponent(searchTerm)}&limit=10`)
+            .then(response => {
+                if (!response.ok) {
+                    throw new Error('Failed to perform search');
+                }
+                return response.json();
+            })
+            .then(results => {
+                if (results && results.length > 0) {
+                    // Group results by video
+                    const videoGroups = {};
+                    // First pass: collect all video IDs that need titles
+                    const videoIds = [];
+                    results.forEach(result => {
+                        const videoId = result.segment.video_id;
+                        if (!videoGroups[videoId]) {
+                            videoGroups[videoId] = {
+                                videoId: videoId,
+                                title: `Video ${videoId}`,  // Default title, will be updated
+                                segments: []
+                            };
+                            // Add to list of IDs to fetch titles for
+                            videoIds.push(videoId);
+                        }
+                        videoGroups[videoId].segments.push(result);
+                    });
+                    
+                    // If we have video IDs, fetch their proper titles
+                    const videoPromises = videoIds.map(videoId => {
+                        return fetch(`/api/video/info/${videoId}`)
+                            .then(response => response.ok ? response.json() : null)
+                            .then(videoInfo => {
+                                if (videoInfo && videoInfo.title && videoGroups[videoId]) {
+                                    videoGroups[videoId].title = videoInfo.title;
+                                }
+                            })
+                            .catch(error => console.error(`Error fetching video info for ${videoId}:`, error));
+                    });
+                    
+                    // After all video titles are fetched, continue with rendering
+                    Promise.all(videoPromises).then(() => {
+                        // Generate results HTML
+                        const resultsHTML = Object.values(videoGroups).map(group => {
+                            const segmentsHTML = group.segments.map(result => {
+                                return `
+                                    <a href="/video/${group.videoId}?t=${Math.floor(result.segment.start)}" 
+                                       class="block p-2 hover:bg-base-200 rounded-md transition-colors duration-150 mb-2">
+                                        <div class="flex items-start">
+                                            <div class="text-primary font-mono mr-2">${formatTime(result.segment.start)}</div>
+                                            <div class="flex-grow">
+                                                <p class="truncate-3-lines">${result.segment.text}</p>
+                                                <div class="text-xs opacity-70 mt-1">Score: ${(result.score * 100).toFixed(1)}%</div>
+                                            </div>
+                                        </div>
+                                    </a>
+                                `;
+                            }).join('');
+                            
+                            return `
+                                <div class="mb-6">
+                                    <div class="flex items-center mb-2">
+                                        <img src="https://img.youtube.com/vi/${group.videoId}/default.jpg" alt="Thumbnail" 
+                                             class="w-12 h-12 rounded-md mr-2">
+                                        <h3 class="text-lg font-bold">
+                                            <a href="/video/${group.videoId}" class="link">${group.title}</a>
+                                        </h3>
+                                    </div>
+                                    <div class="pl-4 border-l-2 border-primary">
+                                        ${segmentsHTML}
+                                    </div>
+                                </div>
+                            `;
+                        }).join('');
+                        
+                        // Update search results container
+                        searchResultsContainer.innerHTML = resultsHTML;
+                    });
+                } else {
+                    // No results found - display immediately, no need to wait for titles
+                    searchResultsContainer.innerHTML = `
+                        <div class="alert alert-info">
+                            <svg xmlns="http://www.w3.org/2000/svg" class="stroke-current shrink-0 h-6 w-6" fill="none" viewBox="0 0 24 24">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+                            </svg>
+                            <span>No results found. Try a different search term or process more videos.</span>
+                        </div>
+                    `;
+                }
+            })
+            .catch(error => {
+                console.error('Search error:', error);
+                searchResultsContainer.innerHTML = `
+                    <div class="alert alert-error">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="stroke-current shrink-0 h-6 w-6" fill="none" viewBox="0 0 24 24">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z" />
+                        </svg>
+                        <span>Error performing search: ${error.message}</span>
+                    </div>
+                `;
+            });
+    } else {
+        // Show notification if search is empty
+        showToast('Please enter a search term', 'warning');
+    }
+}
+
 // Load recent videos into the footer from the API
 function loadFooterRecentVideos() {
     const footerRecentVideos = document.getElementById('footer-recent-videos');

app/static/js/video.js

@@ -11,10 +11,11 @@ document.addEventListener('DOMContentLoaded', () => {
     let ytPlayer = null;
     let isProcessingUrl = false;
     
-    // Check if there's a search query in the URL
+    // Check if there's a search query or timestamp in the URL
     const urlParams = new URLSearchParams(window.location.search);
     const searchQuery = urlParams.get('q');
     const processingUrl = urlParams.get('processing');
+    const startTime = urlParams.get('t');
     
     // Format time to display as HH:MM:SS
     function formatTime(seconds) {
@@ -67,6 +68,7 @@ document.addEventListener('DOMContentLoaded', () => {
     // When player is ready
     function onPlayerReady(event) {
         console.log('Player ready');
+        // Seeking will be handled by the dedicated timestamp handler code at the bottom
     }
     
     // Load transcript segments
@@ -107,6 +109,17 @@ document.addEventListener('DOMContentLoaded', () => {
                     `;
                 } else {
                     displayTranscript(segments);
+                    
+                    // If we have a timestamp in the URL, highlight the relevant segment
+                    if (startTime) {
+                        const timeInSeconds = parseFloat(startTime);
+                        if (!isNaN(timeInSeconds)) {
+                            // Find segment containing this time
+                            setTimeout(() => {
+                                highlightSegment(timeInSeconds);
+                            }, 500);  // Short delay to ensure segments are rendered
+                        }
+                    }
                 }
             })
             .catch(error => {
@@ -162,6 +175,11 @@ document.addEventListener('DOMContentLoaded', () => {
                 // Ensure seconds is a number
                 seconds = parseFloat(seconds);
                 
+                if (isNaN(seconds)) {
+                    console.error('Invalid seconds value:', seconds);
+                    return;
+                }
+                
                 // Seek to time
                 ytPlayer.seekTo(seconds, true);
                 
@@ -173,12 +191,23 @@ document.addEventListener('DOMContentLoaded', () => {
                 }
                 
                 // Highlight the current segment
-                highlightSegment(seconds);
+                setTimeout(() => {
+                    highlightSegment(seconds);
+                }, 300); // Short delay to ensure seek completes first
             } catch (error) {
                 console.error('Error seeking to time:', error);
             }
         } else {
             console.error('YouTube player is not ready yet or seekTo method is not available');
+            
+            // Queue the seek operation for when the player becomes available
+            console.log('Queueing seek operation for later...');
+            setTimeout(() => {
+                if (ytPlayer && typeof ytPlayer.seekTo === 'function') {
+                    console.log('Player now ready, executing queued seek');
+                    seekToTime(seconds);
+                }
+            }, 1000); // Try again in 1 second
         }
     }
     
@@ -189,6 +218,14 @@ document.addEventListener('DOMContentLoaded', () => {
             segment.classList.remove('highlight');
         });
         
+        // Wait until segments are available in the DOM
+        if (document.querySelectorAll('.transcript-segment').length === 0) {
+            console.log('No transcript segments found, waiting...');
+            // Retry after a short delay to allow transcript to load
+            setTimeout(() => highlightSegment(time), 500);
+            return;
+        }
+        
         // Find the segment containing current time
         // Need to find by approximate match since floating point exact matches may not work
         const segments = document.querySelectorAll('.transcript-segment');
@@ -204,16 +241,32 @@ document.addEventListener('DOMContentLoaded', () => {
             }
         }
         
-        // If exact time match not found, find the closest segment
-        if (!currentSegment) {
+        // If exact time match not found, find the closest segment by time
+        if (!currentSegment && segments.length > 0) {
+            // First try exact match
             const exactMatch = document.querySelector(`.transcript-segment[data-start="${time}"]`);
             if (exactMatch) {
                 currentSegment = exactMatch;
+            } else {
+                // Find closest segment
+                let closestSegment = segments[0];
+                let closestDistance = Math.abs(parseFloat(closestSegment.dataset.start) - time);
+                
+                segments.forEach(segment => {
+                    const distance = Math.abs(parseFloat(segment.dataset.start) - time);
+                    if (distance < closestDistance) {
+                        closestDistance = distance;
+                        closestSegment = segment;
+                    }
+                });
+                
+                currentSegment = closestSegment;
             }
         }
         
         if (currentSegment) {
             currentSegment.classList.add('highlight');
+            // Ensure the segment is visible in the transcript container
             currentSegment.scrollIntoView({ behavior: 'smooth', block: 'center' });
         }
     }
@@ -437,4 +490,105 @@ document.addEventListener('DOMContentLoaded', () => {
         // Set timeout to stop checking after 10 seconds
         setTimeout(() => clearInterval(checkTranscriptInterval), 10000);
     }
+    
+    // If there's a timestamp in the URL, ensure it will be seeked to after transcript loads
+    if (startTime) {  // Handle timestamp regardless of search query
+        let timeInSeconds = parseFloat(startTime);
+        
+        // If parsing fails, try to parse as HH:MM:SS format
+        if (isNaN(timeInSeconds) && typeof startTime === 'string') {
+            // Try to parse HH:MM:SS or MM:SS format
+            const timeParts = startTime.split(':').map(part => parseInt(part, 10));
+            if (timeParts.length === 3) {
+                // HH:MM:SS format
+                timeInSeconds = timeParts[0] * 3600 + timeParts[1] * 60 + timeParts[2];
+            } else if (timeParts.length === 2) {
+                // MM:SS format
+                timeInSeconds = timeParts[0] * 60 + timeParts[1];
+            }
+        }
+        
+        if (!isNaN(timeInSeconds)) {
+            console.log('Will seek to timestamp:', timeInSeconds, 'seconds');
+            
+            // Try immediately if player is ready
+            if (ytPlayer && typeof ytPlayer.seekTo === 'function') {
+                console.log('YouTube player is ready, seeking now');
+                seekToTime(timeInSeconds);
+                // Also try to play the video as a fallback if autoplay doesn't work
+                try {
+                    ytPlayer.playVideo();
+                    // Unmute the video after a short delay
+                    setTimeout(() => {
+                        try {
+                            ytPlayer.unMute();
+                            // Set volume to a reasonable level
+                            ytPlayer.setVolume(80);
+                        } catch (e) {
+                            console.warn('Could not unmute video:', e);
+                        }
+                    }, 1000);
+                } catch (e) {
+                    console.warn('Could not autoplay video:', e);
+                }
+            }
+            
+            // Also set up a backup interval to ensure we seek once everything is ready
+            const checkReadyInterval = setInterval(() => {
+                if (ytPlayer && typeof ytPlayer.seekTo === 'function') {
+                    if (transcriptSegments.length > 0) {
+                        clearInterval(checkReadyInterval);
+                        console.log('Everything loaded, seeking to timestamp:', timeInSeconds);
+                        seekToTime(timeInSeconds);
+                        // Also try to play the video
+                        try {
+                            ytPlayer.playVideo();
+                            // Unmute the video after a short delay
+                            setTimeout(() => {
+                                try {
+                                    ytPlayer.unMute();
+                                    ytPlayer.setVolume(80);
+                                } catch (e) {
+                                    console.warn('Could not unmute video after delay:', e);
+                                }
+                            }, 1000);
+                        } catch (e) {
+                            console.warn('Could not autoplay video after delay:', e);
+                        }
+                    } else {
+                        console.log('Waiting for transcript segments to load...');
+                    }
+                } else {
+                    console.log('Waiting for YouTube player to be ready...');
+                }
+            }, 500);
+            
+            // Set timeout to stop checking after 10 seconds
+            setTimeout(() => {
+                clearInterval(checkReadyInterval);
+                // Final attempt
+                if (ytPlayer && typeof ytPlayer.seekTo === 'function') {
+                    console.log('Final attempt to seek to:', timeInSeconds);
+                    seekToTime(timeInSeconds);
+                    // One final attempt to play
+                    try {
+                        ytPlayer.playVideo();
+                        // Unmute the video after a short delay
+                        setTimeout(() => {
+                            try {
+                                ytPlayer.unMute();
+                                ytPlayer.setVolume(80);
+                            } catch (e) {
+                                console.warn('Could not unmute video on final attempt:', e);
+                            }
+                        }, 1000);
+                    } catch (e) {
+                        console.warn('Could not autoplay video on final attempt:', e);
+                    }
+                }
+            }, 10000);
+        } else {
+            console.warn('Could not parse timestamp from URL:', startTime);
+        }
+    }
 });

app/templates/base.html

@@ -75,6 +75,26 @@
         </div>
     </footer>
     
+    <!-- Search Results Modal -->
+    <dialog id="search-results-modal" class="modal">
+        <div class="modal-box max-w-4xl">
+            <form method="dialog">
+                <button class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2">✕</button>
+            </form>
+            <h3 class="font-bold text-lg mb-4">Search Results</h3>
+            <div id="search-results-container" class="overflow-y-auto max-h-[70vh]">
+                <!-- Search results will be loaded here by JavaScript -->
+                <div class="flex justify-center items-center p-4">
+                    <span class="loading loading-spinner loading-md"></span>
+                    <span class="ml-2">Searching...</span>
+                </div>
+            </div>
+        </div>
+        <form method="dialog" class="modal-backdrop">
+            <button>close</button>
+        </form>
+    </dialog>
+    
     <!-- Scripts -->
     <script src="{{ https_url_for('static', path='/js/main.js') }}"></script>
     {% block scripts %}{% endblock %}

app/templates/video.html

@@ -7,7 +7,7 @@
             <div class="card-body p-4">
                 <div class="aspect-video">
                     <iframe id="youtube-player" class="w-full h-full" 
-                        src="https://www.youtube.com/embed/{{ video_id }}?enablejsapi=1" 
+                        src="https://www.youtube.com/embed/{{ video_id }}?enablejsapi=1&start={{ start_time }}{% if start_time > 0 %}&autoplay=1&mute=1{% endif %}" 
                         frameborder="0" 
                         allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" 
                         allowfullscreen>

gunicorn.conf.py

@@ -17,7 +17,7 @@ bind = "0.0.0.0:7860"
 
 # Logging
 accesslog = "-"  # Log to stdout
-errorlog = "-"   # Log to stderr
+errorlog = "-"  # Log to stderr
 loglevel = "info"
 
 # Timeout configuration
@@ -29,4 +29,4 @@ worker_connections = 1000  # Maximum number of connections each worker can handl
 keepalive = 5  # Seconds to wait between client requests before closing connection
 
 # For better performance with Uvicorn
-proc_name = "vibe-coding-rag"
+proc_name = "vibe-coding-rag"