-
Home
-
TV Shows
-
Movies
-
New & Popular
-
My List
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
-
)
}
-export default Navbar
\ No newline at end of file
+export default Navbar
diff --git a/frontend/src/components/ProfileTest.jsx b/frontend/src/components/ProfileTest.jsx
new file mode 100644
index 0000000..c4ac298
--- /dev/null
+++ b/frontend/src/components/ProfileTest.jsx
@@ -0,0 +1,49 @@
+import React, { useState } from 'react'
+import UserProfileDropdown from './UserProfileDropdown'
+import { mockUserProfile } from '../data/mockUser'
+
+function ProfileTest() {
+ const [showDropdown, setShowDropdown] = useState(false)
+
+ return (
+
+
+
Profile Dropdown Test
+
+
+
User Profile Data
+
+ {JSON.stringify(mockUserProfile, null, 2)}
+
+
+
+
+
setShowDropdown(!showDropdown)}
+ className="flex items-center space-x-2 bg-red-600 hover:bg-red-700 px-4 py-2 rounded-lg transition-colors"
+ >
+ Toggle Profile Dropdown
+
+
+
setShowDropdown(false)}
+ userProfile={mockUserProfile}
+ />
+
+
+
+
Click the button above to test the profile dropdown functionality.
+
The dropdown should show user information, stats, preferences, and actions.
+
+
+
+ )
+}
+
+export default ProfileTest
diff --git a/frontend/src/components/QuickTest.jsx b/frontend/src/components/QuickTest.jsx
new file mode 100644
index 0000000..828d792
--- /dev/null
+++ b/frontend/src/components/QuickTest.jsx
@@ -0,0 +1,43 @@
+import React, { useState } from 'react'
+import VideoPlayer from './VideoPlayer'
+
+function QuickTest() {
+ const [showPlayer, setShowPlayer] = useState(false)
+
+ const testMovie = {
+ id: 1,
+ title: "The Godfather",
+ description: "Test movie with YouTube trailer",
+ release_year: 1972,
+ rating: 9.2,
+ image_url: "https://image.tmdb.org/t/p/w500/rPdtLWNsZmAtoZl9PK7S2wE3qiS.jpg",
+ trailer_url: "https://www.youtube.com/watch?v=UaVTIH8mujA",
+ video_url: "https://www.youtube.com/watch?v=UaVTIH8mujA"
+ }
+
+ return (
+
+
+
Quick YouTube Test
+
+
Movie: {testMovie.title}
+
Trailer URL: {testMovie.trailer_url}
+
+
setShowPlayer(true)}
+ className="bg-red-600 hover:bg-red-700 text-white px-8 py-4 rounded-lg text-xl"
+ >
+ Test YouTube Player
+
+
+
+
setShowPlayer(false)}
+ />
+
+ )
+}
+
+export default QuickTest
diff --git a/frontend/src/components/SearchBar.jsx b/frontend/src/components/SearchBar.jsx
new file mode 100644
index 0000000..25effac
--- /dev/null
+++ b/frontend/src/components/SearchBar.jsx
@@ -0,0 +1,309 @@
+import React, { useState, useEffect, useRef } from 'react'
+import { searchMovies, getSearchSuggestions } from '../services/api'
+
+function SearchBar({ onSearchResults, onClose }) {
+ const [query, setQuery] = useState('')
+ const [suggestions, setSuggestions] = useState([])
+ const [isOpen, setIsOpen] = useState(false)
+ const [isLoading, setIsLoading] = useState(false)
+ const [filters, setFilters] = useState({
+ genres: [],
+ yearRange: { min: 1900, max: new Date().getFullYear() },
+ ratingRange: { min: 0, max: 10 },
+ durationRange: { min: 0, max: 300 }
+ })
+ const [showFilters, setShowFilters] = useState(false)
+ const searchRef = useRef(null)
+ const debounceRef = useRef(null)
+
+ // Available filter options
+ const genreOptions = [
+ 'Action', 'Adventure', 'Animation', 'Comedy', 'Crime', 'Documentary',
+ 'Drama', 'Family', 'Fantasy', 'Horror', 'Music', 'Mystery', 'Romance',
+ 'Science Fiction', 'Thriller', 'War', 'Western'
+ ]
+
+ // Debounced search function
+ useEffect(() => {
+ if (debounceRef.current) {
+ clearTimeout(debounceRef.current)
+ }
+
+ if (query.length >= 2) {
+ debounceRef.current = setTimeout(async () => {
+ setIsLoading(true)
+ try {
+ const [searchResults, searchSuggestions] = await Promise.all([
+ searchMovies(query, filters),
+ getSearchSuggestions(query)
+ ])
+ onSearchResults(searchResults)
+ setSuggestions(searchSuggestions)
+ } catch (error) {
+ console.error('Search error:', error)
+ setSuggestions([])
+ } finally {
+ setIsLoading(false)
+ }
+ }, 300)
+ } else {
+ setSuggestions([])
+ if (query.length === 0) {
+ onSearchResults([])
+ }
+ }
+
+ return () => {
+ if (debounceRef.current) {
+ clearTimeout(debounceRef.current)
+ }
+ }
+ }, [query, filters, onSearchResults])
+
+ // Handle click outside to close suggestions
+ useEffect(() => {
+ function handleClickOutside(event) {
+ if (searchRef.current && !searchRef.current.contains(event.target)) {
+ setIsOpen(false)
+ }
+ }
+
+ document.addEventListener('mousedown', handleClickOutside)
+ return () => document.removeEventListener('mousedown', handleClickOutside)
+ }, [])
+
+ const handleInputChange = (e) => {
+ setQuery(e.target.value)
+ setIsOpen(true)
+ }
+
+ const handleSuggestionClick = (suggestion) => {
+ setQuery(suggestion)
+ setIsOpen(false)
+ searchRef.current?.querySelector('input')?.focus()
+ }
+
+ const handleGenreToggle = (genre) => {
+ setFilters(prev => ({
+ ...prev,
+ genres: prev.genres.includes(genre)
+ ? prev.genres.filter(g => g !== genre)
+ : [...prev.genres, genre]
+ }))
+ }
+
+ const clearFilters = () => {
+ setFilters({
+ genres: [],
+ yearRange: { min: 1900, max: new Date().getFullYear() },
+ ratingRange: { min: 0, max: 10 },
+ durationRange: { min: 0, max: 300 }
+ })
+ }
+
+ const clearSearch = () => {
+ setQuery('')
+ setSuggestions([])
+ onSearchResults([])
+ onClose?.()
+ }
+
+ return (
+
+ {/* Search Input */}
+
+
+
setIsOpen(true)}
+ placeholder="Search movies, shows, actors..."
+ className="block w-full pl-10 pr-12 py-3 border border-gray-600 rounded-lg bg-gray-800 text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-red-500 focus:border-transparent"
+ />
+
+ {isLoading && (
+
+ )}
+
setShowFilters(!showFilters)}
+ className="p-2 text-gray-400 hover:text-white mr-1"
+ title="Filters"
+ >
+
+
+
+ {query && (
+
+
+
+
+ )}
+
+
+
+ {/* Search Suggestions Dropdown */}
+ {isOpen && suggestions.length > 0 && (
+
+ {suggestions.map((suggestion, index) => (
+
handleSuggestionClick(suggestion)}
+ className="w-full px-4 py-2 text-left text-white hover:bg-gray-700 focus:bg-gray-700 focus:outline-none"
+ >
+
+
+ ))}
+
+ )}
+
+ {/* Advanced Filters Panel */}
+ {showFilters && (
+
+
+
Filters
+
+ Clear All
+
+
+
+ {/* Genres */}
+
+
Genres
+
+ {genreOptions.map(genre => (
+ handleGenreToggle(genre)}
+ className={`px-3 py-1 rounded-full text-sm transition-colors ${
+ filters.genres.includes(genre)
+ ? 'bg-red-600 text-white'
+ : 'bg-gray-700 text-gray-300 hover:bg-gray-600'
+ }`}
+ >
+ {genre}
+
+ ))}
+
+
+
+ {/* Year Range */}
+
+
+ {/* Rating Range */}
+
+
+ {/* Duration Range */}
+
+
+ )}
+
+ )
+}
+
+export default SearchBar
diff --git a/frontend/src/components/SearchResults.jsx b/frontend/src/components/SearchResults.jsx
new file mode 100644
index 0000000..9657a2c
--- /dev/null
+++ b/frontend/src/components/SearchResults.jsx
@@ -0,0 +1,79 @@
+import React from 'react'
+import MovieRow from './MovieRow'
+
+function SearchResults({ results, query, isLoading, onClearSearch }) {
+ if (isLoading) {
+ return (
+
+ )
+ }
+
+ if (!query) {
+ return null
+ }
+
+ if (!results || results.length === 0) {
+ return (
+
+
+
+ No results found for "{query}"
+
+
+ Try adjusting your search or filters to find what you're looking for.
+
+
+
β’ Check your spelling
+
β’ Try more general terms
+
β’ Remove some filters
+
+
+ Clear Search
+
+
+ )
+ }
+
+ return (
+
+
+
+ Search Results for "{query}"
+
+ ({results.length} {results.length === 1 ? 'result' : 'results'})
+
+
+
+
+
+
+
+
+
+
+ {results.length >= 20 && (
+
+
+ Showing first {results.length} results. Try refining your search for more specific results.
+
+
+ )}
+
+ )
+}
+
+export default SearchResults
diff --git a/frontend/src/components/SearchTest.jsx b/frontend/src/components/SearchTest.jsx
new file mode 100644
index 0000000..e585ff1
--- /dev/null
+++ b/frontend/src/components/SearchTest.jsx
@@ -0,0 +1,176 @@
+import React, { useState, useEffect } from 'react'
+import SearchBar from './SearchBar'
+import SearchResults from './SearchResults'
+import searchService from '../services/searchService'
+
+function SearchTest() {
+ const [searchResults, setSearchResults] = useState([])
+ const [isLoading, setIsLoading] = useState(false)
+ const [currentQuery, setCurrentQuery] = useState('')
+ const [performanceMetrics, setPerformanceMetrics] = useState(null)
+
+ const handleSearchResults = async (results) => {
+ const startTime = performance.now()
+ setIsLoading(true)
+
+ try {
+ // If results is a query string, perform search
+ if (typeof results === 'string') {
+ setCurrentQuery(results)
+ const searchResults = await searchService.search(results)
+ setSearchResults(searchResults.results || searchResults)
+ } else {
+ // Direct results from SearchBar component
+ setSearchResults(results)
+ }
+
+ const endTime = performance.now()
+ setPerformanceMetrics({
+ searchTime: Math.round(endTime - startTime),
+ resultCount: Array.isArray(results) ? results.length : 0,
+ timestamp: new Date().toLocaleTimeString()
+ })
+ } catch (error) {
+ console.error('Search test error:', error)
+ setSearchResults([])
+ } finally {
+ setIsLoading(false)
+ }
+ }
+
+ const handleClearSearch = () => {
+ setSearchResults([])
+ setCurrentQuery('')
+ setPerformanceMetrics(null)
+ }
+
+ // Test different search scenarios
+ const runSearchTests = async () => {
+ const testQueries = [
+ 'Matrix',
+ 'Action',
+ 'Christopher Nolan',
+ '2008',
+ 'Sci-Fi Adventure'
+ ]
+
+ console.log('Running search performance tests...')
+
+ for (const query of testQueries) {
+ const startTime = performance.now()
+ try {
+ const results = await searchService.search(query)
+ const endTime = performance.now()
+ console.log(`Query: "${query}" - ${results.results?.length || 0} results in ${Math.round(endTime - startTime)}ms`)
+ } catch (error) {
+ console.error(`Test failed for query "${query}":`, error)
+ }
+ }
+ }
+
+ return (
+
+
+
+
Search Functionality Test
+
+ {/* Search Bar */}
+
+
+
+ {/* Performance Metrics */}
+ {performanceMetrics && (
+
+
Performance Metrics
+
+
+ Search Time:
+ {performanceMetrics.searchTime}ms
+
+
+ Results:
+ {performanceMetrics.resultCount}
+
+
+ Time:
+ {performanceMetrics.timestamp}
+
+
+
+ )}
+
+ {/* Test Controls */}
+
+
Test Controls
+
+
+ Run Performance Tests
+
+ searchService.clearCache()}
+ className="px-4 py-2 bg-yellow-600 text-white rounded hover:bg-yellow-700 transition-colors"
+ >
+ Clear Cache
+
+ searchService.clearSearchHistory()}
+ className="px-4 py-2 bg-red-600 text-white rounded hover:bg-red-700 transition-colors"
+ >
+ Clear History
+
+
+
+
+ {/* Search History */}
+
+
Recent Searches
+
+ {searchService.getSearchHistory().map((query, index) => (
+ handleSearchResults(query)}
+ className="px-3 py-1 bg-gray-700 text-gray-300 rounded-full text-sm hover:bg-gray-600 transition-colors"
+ >
+ {query}
+
+ ))}
+
+
+
+ {/* Popular Searches */}
+
+
Popular Searches
+
+ {searchService.getPopularSearches().map((query, index) => (
+ handleSearchResults(query)}
+ className="px-3 py-1 bg-gray-700 text-gray-300 rounded-full text-sm hover:bg-gray-600 transition-colors"
+ >
+ {query}
+
+ ))}
+
+
+
+ {/* Search Results */}
+
+
+
+
+ )
+}
+
+export default SearchTest
diff --git a/frontend/src/components/UserProfileDropdown.jsx b/frontend/src/components/UserProfileDropdown.jsx
new file mode 100644
index 0000000..b6a8ed0
--- /dev/null
+++ b/frontend/src/components/UserProfileDropdown.jsx
@@ -0,0 +1,154 @@
+import React, { useState, useEffect, useRef } from 'react'
+
+function UserProfileDropdown({ isOpen, onClose, userProfile }) {
+ const dropdownRef = useRef(null)
+
+ // Close dropdown when clicking outside
+ useEffect(() => {
+ function handleClickOutside(event) {
+ if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
+ onClose()
+ }
+ }
+
+ if (isOpen) {
+ document.addEventListener('mousedown', handleClickOutside)
+ }
+
+ return () => {
+ document.removeEventListener('mousedown', handleClickOutside)
+ }
+ }, [isOpen, onClose])
+
+ if (!isOpen) return null
+
+ return (
+
+ {/* Profile Header */}
+
+
+
+
+
{userProfile.name}
+
{userProfile.email}
+
+
+ {userProfile.plan}
+
+
+
+
+
+
+ {/* Account Stats */}
+
+
+
+
{userProfile.watchedMovies}
+
Movies Watched
+
+
+
{userProfile.watchlistCount}
+
In Watchlist
+
+
+
{userProfile.hoursWatched}
+
Hours Watched
+
+
+
+
+ {/* Quick Actions */}
+
+
Quick Actions
+
+
+
+
+ My List
+
+
+
+
+ Continue Watching
+
+
+
+
+ Viewing Activity
+
+
+
+
+ {/* Preferences */}
+
+
Preferences
+
+
+ Auto-play previews
+
+
+
+
+ HD Quality
+
+
+
+
+ Notifications
+
+
+
+
+
+
+ {/* Account Management */}
+
+
+
+
+
+ Manage Profiles
+
+
+
+
+ Account Settings
+
+
+
+
+ Help Center
+
+
+
+
+
+ )
+}
+
+export default UserProfileDropdown
diff --git a/frontend/src/components/VideoPlayer.jsx b/frontend/src/components/VideoPlayer.jsx
new file mode 100644
index 0000000..4e17b16
--- /dev/null
+++ b/frontend/src/components/VideoPlayer.jsx
@@ -0,0 +1,315 @@
+import React, { useState, useRef, useEffect } from 'react'
+import { isYouTubeUrl } from '../utils/youtubeUtils'
+import YouTubePlayer from './YouTubePlayer'
+
+function VideoPlayer({ movie, isOpen, onClose }) {
+ // Check if the video is a YouTube URL
+ const trailerUrl = movie?.trailer_url || movie?.video_url
+ const isYouTube = isYouTubeUrl(trailerUrl)
+
+ // Debug logging
+ console.log('VideoPlayer Debug:', {
+ movie: movie?.title,
+ trailerUrl,
+ isYouTube,
+ isOpen
+ })
+
+ // If it's a YouTube video, use the YouTube player
+ if (isYouTube) {
+ console.log('Using YouTubePlayer for:', movie?.title)
+ return
+ }
+
+ console.log('Using regular VideoPlayer for:', movie?.title)
+ // Otherwise, use the regular video player for MP4/other formats
+ const [isPlaying, setIsPlaying] = useState(false)
+ const [currentTime, setCurrentTime] = useState(0)
+ const [duration, setDuration] = useState(0)
+ const [volume, setVolume] = useState(0.7)
+ const [isMuted, setIsMuted] = useState(true) // Start muted for autoplay
+ const [showControls, setShowControls] = useState(true)
+ const [isFullscreen, setIsFullscreen] = useState(false)
+ const videoRef = useRef(null)
+ const containerRef = useRef(null)
+ const controlsTimeoutRef = useRef(null)
+
+ // Auto-hide controls after 3 seconds of inactivity
+ useEffect(() => {
+ if (showControls && isPlaying) {
+ controlsTimeoutRef.current = setTimeout(() => {
+ setShowControls(false)
+ }, 3000)
+ }
+
+ return () => {
+ if (controlsTimeoutRef.current) {
+ clearTimeout(controlsTimeoutRef.current)
+ }
+ }
+ }, [showControls, isPlaying])
+
+ // Handle mouse movement to show controls
+ const handleMouseMove = () => {
+ setShowControls(true)
+ if (controlsTimeoutRef.current) {
+ clearTimeout(controlsTimeoutRef.current)
+ }
+ }
+
+ // Video event handlers
+ const handleLoadedMetadata = () => {
+ if (videoRef.current) {
+ setDuration(videoRef.current.duration)
+ }
+ }
+
+ const handleTimeUpdate = () => {
+ if (videoRef.current) {
+ setCurrentTime(videoRef.current.currentTime)
+ }
+ }
+
+ const handlePlay = () => setIsPlaying(true)
+ const handlePause = () => setIsPlaying(false)
+
+ // Control functions
+ const togglePlayPause = () => {
+ if (videoRef.current) {
+ if (isPlaying) {
+ videoRef.current.pause()
+ } else {
+ videoRef.current.play()
+ }
+ }
+ }
+
+ const handleSeek = (e) => {
+ if (videoRef.current) {
+ const rect = e.currentTarget.getBoundingClientRect()
+ const pos = (e.clientX - rect.left) / rect.width
+ videoRef.current.currentTime = pos * duration
+ }
+ }
+
+ const handleVolumeChange = (e) => {
+ const newVolume = parseFloat(e.target.value)
+ setVolume(newVolume)
+ if (videoRef.current) {
+ videoRef.current.volume = newVolume
+ }
+ setIsMuted(newVolume === 0)
+ }
+
+ const toggleMute = () => {
+ if (videoRef.current) {
+ if (isMuted) {
+ videoRef.current.volume = volume
+ setIsMuted(false)
+ } else {
+ videoRef.current.volume = 0
+ setIsMuted(true)
+ }
+ }
+ }
+
+ const toggleFullscreen = () => {
+ if (!document.fullscreenElement) {
+ containerRef.current?.requestFullscreen()
+ setIsFullscreen(true)
+ } else {
+ document.exitFullscreen()
+ setIsFullscreen(false)
+ }
+ }
+
+ const formatTime = (time) => {
+ const minutes = Math.floor(time / 60)
+ const seconds = Math.floor(time % 60)
+ return `${minutes}:${seconds.toString().padStart(2, '0')}`
+ }
+
+ // Close on escape key
+ useEffect(() => {
+ const handleKeyDown = (e) => {
+ if (e.key === 'Escape') {
+ onClose()
+ }
+ if (e.key === ' ') {
+ e.preventDefault()
+ togglePlayPause()
+ }
+ }
+
+ if (isOpen) {
+ document.addEventListener('keydown', handleKeyDown)
+ }
+
+ return () => {
+ document.removeEventListener('keydown', handleKeyDown)
+ }
+ }, [isOpen, isPlaying])
+
+ // Auto-play when opened
+ useEffect(() => {
+ if (isOpen && videoRef.current) {
+ videoRef.current.play()
+ }
+ }, [isOpen])
+
+ if (!isOpen || !movie) return null
+
+ return (
+
+
setShowControls(false)}
+ >
+ {/* Close Button */}
+
+
+
+
+
+ {/* Video Element */}
+
+
+
+ {/* Video Controls Overlay */}
+
+ {/* Play/Pause Button Overlay */}
+
+
+ {/* Bottom Controls */}
+
+ {/* Progress Bar */}
+
+
+ {/* Control Buttons */}
+
+
+ {/* Play/Pause */}
+
+ {isPlaying ? (
+
+
+ ) : (
+
+
+ )}
+
+
+ {/* Volume */}
+
+
+ {isMuted ? (
+
+
+ ) : (
+
+
+ )}
+
+
+
+
+ {/* Time Display */}
+
+ {formatTime(currentTime)} / {formatTime(duration)}
+
+
+
+
+ {/* Movie Info */}
+
+
{movie.title}
+
{movie.release_year}
+
+
+ {/* Fullscreen */}
+
+
+
+
+
+
+
+
+
+ {/* Loading State */}
+ {!movie.trailer_url && !movie.video_url && (
+
+
+
+
Loading trailer...
+
No trailer available for this movie
+
+
+ )}
+
+
+ )
+}
+
+export default VideoPlayer
diff --git a/frontend/src/components/VideoPlayerDebug.jsx b/frontend/src/components/VideoPlayerDebug.jsx
new file mode 100644
index 0000000..5d4dcd4
--- /dev/null
+++ b/frontend/src/components/VideoPlayerDebug.jsx
@@ -0,0 +1,187 @@
+import React, { useState, useEffect } from 'react'
+import { fetchMovies } from '../services/api'
+import { isYouTubeUrl, extractYouTubeVideoId } from '../utils/youtubeUtils'
+import VideoPlayer from './VideoPlayer'
+
+function VideoPlayerDebug() {
+ const [movies, setMovies] = useState([])
+ const [selectedMovie, setSelectedMovie] = useState(null)
+ const [showPlayer, setShowPlayer] = useState(false)
+ const [debugInfo, setDebugInfo] = useState({})
+
+ useEffect(() => {
+ const loadMovies = async () => {
+ try {
+ const allMovies = await fetchMovies()
+ setMovies(allMovies)
+
+ // Debug each movie's video URLs
+ const debug = {}
+ allMovies.forEach(movie => {
+ debug[movie.id] = {
+ title: movie.title,
+ trailer_url: movie.trailer_url,
+ video_url: movie.video_url,
+ isYouTube: isYouTubeUrl(movie.trailer_url || movie.video_url),
+ videoId: extractYouTubeVideoId(movie.trailer_url || movie.video_url),
+ hasTrailer: !!(movie.trailer_url || movie.video_url)
+ }
+ })
+ setDebugInfo(debug)
+ } catch (error) {
+ console.error('Error loading movies:', error)
+ }
+ }
+
+ loadMovies()
+ }, [])
+
+ const handlePlayMovie = (movie) => {
+ console.log('Playing movie:', movie)
+ console.log('Debug info:', debugInfo[movie.id])
+ setSelectedMovie(movie)
+ setShowPlayer(true)
+ }
+
+ const handleClosePlayer = () => {
+ setShowPlayer(false)
+ setSelectedMovie(null)
+ }
+
+ return (
+
+
+
Video Player Debug
+
+ {/* Debug Information */}
+
+
Debug Information
+
+ {Object.values(debugInfo).map((info, index) => (
+
+
{info.title}
+
+
+
+ Trailer URL:
+ {info.trailer_url ? (
+ {info.trailer_url}
+ ) : (
+ None
+ )}
+
+
+ Video URL:
+ {info.video_url ? (
+ {info.video_url}
+ ) : (
+ None
+ )}
+
+
+
+
+ Is YouTube:
+
+ {info.isYouTube ? 'Yes' : 'No'}
+
+
+
+ Video ID:
+ {info.videoId || 'None'}
+
+
+ Has Trailer:
+
+ {info.hasTrailer ? 'Yes' : 'No'}
+
+
+
+
+
+ ))}
+
+
+
+ {/* Movie Grid */}
+
+ {movies.map(movie => {
+ const debug = debugInfo[movie.id] || {}
+ return (
+
+
+
+
+ {debug.isYouTube ? (
+ YouTube
+ ) : debug.hasTrailer ? (
+ MP4
+ ) : (
+ No Video
+ )}
+
+
+
+
{movie.title}
+
+
Year: {movie.release_year}
+
Rating: {movie.rating}
+
+
handlePlayMovie(movie)}
+ disabled={!debug.hasTrailer}
+ className={`w-full py-2 px-4 rounded transition-colors ${
+ debug.hasTrailer
+ ? 'bg-red-600 hover:bg-red-700 text-white'
+ : 'bg-gray-600 text-gray-400 cursor-not-allowed'
+ }`}
+ >
+ {debug.hasTrailer ? 'Play Trailer' : 'No Trailer'}
+
+
+
+ )
+ })}
+
+
+ {/* Test YouTube URLs */}
+
+
Test YouTube URLs
+
+ {[
+ 'https://www.youtube.com/watch?v=UaVTIH8mujA',
+ 'https://youtu.be/UaVTIH8mujA',
+ 'https://www.youtube.com/embed/UaVTIH8mujA',
+ 'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4'
+ ].map((url, index) => (
+
+ {url}
+
+ {isYouTubeUrl(url) ? 'YouTube' : 'Other'}
+
+
+ ID: {extractYouTubeVideoId(url) || 'None'}
+
+
+ ))}
+
+
+
+
+ {/* Video Player */}
+
+
+ )
+}
+
+export default VideoPlayerDebug
diff --git a/frontend/src/components/VideoPlayerTest.jsx b/frontend/src/components/VideoPlayerTest.jsx
new file mode 100644
index 0000000..b962486
--- /dev/null
+++ b/frontend/src/components/VideoPlayerTest.jsx
@@ -0,0 +1,128 @@
+import React, { useState } from 'react'
+import VideoPlayer from './VideoPlayer'
+import MovieModal from './MovieModal'
+
+function VideoPlayerTest() {
+ const [showVideoPlayer, setShowVideoPlayer] = useState(false)
+ const [showMovieModal, setShowMovieModal] = useState(false)
+
+ const testMovie = {
+ id: 1,
+ title: "Test Movie",
+ description: "This is a test movie with a sample video to demonstrate the video player functionality. The video player includes Netflix-like controls, progress tracking, volume control, and fullscreen support.",
+ release_year: 2024,
+ rating: 8.5,
+ image_url: "https://image.tmdb.org/t/p/w500/f89U3ADr1oiB1s9GkdPOEpXUk5H.jpg",
+ trailer_url: "https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4",
+ video_url: "https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4",
+ genres: ["Action", "Sci-Fi", "Thriller"],
+ director: "Test Director",
+ cast: ["Actor One", "Actor Two", "Actor Three"],
+ duration: 120
+ }
+
+ return (
+
+
+
Video Player Test
+
+
+ {/* Test Controls */}
+
+
Test Controls
+
+
setShowVideoPlayer(true)}
+ className="w-full bg-red-600 hover:bg-red-700 text-white py-3 px-6 rounded-lg transition-colors flex items-center justify-center space-x-2"
+ >
+
+
+ Test Video Player
+
+
+
setShowMovieModal(true)}
+ className="w-full bg-blue-600 hover:bg-blue-700 text-white py-3 px-6 rounded-lg transition-colors flex items-center justify-center space-x-2"
+ >
+
+
+ Test Movie Modal
+
+
+
+
+ {/* Movie Info */}
+
+
Test Movie Info
+
+
Title: {testMovie.title}
+
Year: {testMovie.release_year}
+
Rating: {testMovie.rating}/10
+
Duration: {testMovie.duration} minutes
+
Genres: {testMovie.genres.join(', ')}
+
Director: {testMovie.director}
+
Video URL:
+
+ Sample Video
+
+
+
+
+
+
+ {/* Features List */}
+
+
Video Player Features
+
+
+
Player Controls
+
+ β’ Play/Pause toggle
+ β’ Progress bar with seeking
+ β’ Volume control with mute
+ β’ Fullscreen support
+ β’ Auto-hide controls
+ β’ Keyboard shortcuts (Space, Escape)
+
+
+
+
Netflix-like Features
+
+ β’ Auto-play on open
+ β’ Muted by default
+ β’ Smooth animations
+ β’ Movie info overlay
+ β’ Professional styling
+ β’ Responsive design
+
+
+
+
+
+ {/* Instructions */}
+
+
Click the buttons above to test the video player functionality.
+
Use Space to play/pause, Escape to close, and mouse to show/hide controls.
+
+
+
+ {/* Video Player */}
+
setShowVideoPlayer(false)}
+ />
+
+ {/* Movie Modal */}
+ setShowMovieModal(false)}
+ />
+
+ )
+}
+
+export default VideoPlayerTest
diff --git a/frontend/src/components/YouTubePlayer.jsx b/frontend/src/components/YouTubePlayer.jsx
new file mode 100644
index 0000000..8e24a7c
--- /dev/null
+++ b/frontend/src/components/YouTubePlayer.jsx
@@ -0,0 +1,216 @@
+import React, { useState, useRef, useEffect } from 'react'
+import { extractYouTubeVideoId, getYouTubeEmbedUrl, isYouTubeUrl } from '../utils/youtubeUtils'
+
+function YouTubePlayer({ movie, isOpen, onClose }) {
+ const [isPlaying, setIsPlaying] = useState(false)
+ const [showControls, setShowControls] = useState(true)
+ const [isLoading, setIsLoading] = useState(true)
+ const iframeRef = useRef(null)
+ const containerRef = useRef(null)
+ const controlsTimeoutRef = useRef(null)
+
+ // Extract YouTube video ID from trailer URL
+ const trailerUrl = movie?.trailer_url || movie?.video_url
+ const videoId = extractYouTubeVideoId(trailerUrl)
+ const embedUrl = videoId ? getYouTubeEmbedUrl(videoId, {
+ autoplay: 1,
+ mute: 0, // Enable sound - note: some browsers may still start muted due to autoplay policies
+ controls: 1, // Show YouTube's native controls for full functionality including volume
+ showinfo: 0,
+ rel: 0,
+ modestbranding: 1,
+ playsinline: 1,
+ fs: 1, // Allow fullscreen
+ cc_load_policy: 1, // Show closed captions if available
+ iv_load_policy: 3, // Hide video annotations
+ disablekb: 0, // Enable keyboard controls
+ start: 0 // Start from beginning
+ }) : null
+
+ // Debug logging
+ console.log('YouTubePlayer Debug:', {
+ movie: movie?.title,
+ trailerUrl,
+ videoId,
+ embedUrl,
+ isOpen
+ })
+
+ // Auto-hide controls after 3 seconds of inactivity
+ useEffect(() => {
+ if (showControls && isPlaying) {
+ controlsTimeoutRef.current = setTimeout(() => {
+ setShowControls(false)
+ }, 3000)
+ }
+
+ return () => {
+ if (controlsTimeoutRef.current) {
+ clearTimeout(controlsTimeoutRef.current)
+ }
+ }
+ }, [showControls, isPlaying])
+
+ // Handle mouse movement to show controls
+ const handleMouseMove = () => {
+ setShowControls(true)
+ if (controlsTimeoutRef.current) {
+ clearTimeout(controlsTimeoutRef.current)
+ }
+ }
+
+ // Close on escape key
+ useEffect(() => {
+ const handleKeyDown = (e) => {
+ if (e.key === 'Escape') {
+ onClose()
+ }
+ }
+
+ if (isOpen) {
+ document.addEventListener('keydown', handleKeyDown)
+ }
+
+ return () => {
+ document.removeEventListener('keydown', handleKeyDown)
+ }
+ }, [isOpen, onClose])
+
+ // Handle iframe load
+ const handleIframeLoad = () => {
+ setIsLoading(false)
+ setIsPlaying(true)
+ }
+
+ if (!isOpen || !movie) return null
+
+ // If no video ID, show error message
+ if (!videoId) {
+ return (
+
+
+
+
+
+
+
+
+
+
YouTube trailer not available
+
Could not extract video ID from: {trailerUrl}
+
+
+
+ )
+ }
+
+ return (
+
+
setShowControls(false)}
+ >
+ {/* Close Button */}
+
+
+
+
+
+ {/* YouTube Embed */}
+
+ {isLoading && (
+
+ )}
+
+
+
+
+ {/* Minimal Custom Overlay - Only show movie info, don't interfere with YouTube controls */}
+
+ {/* Top Info Bar */}
+
+
+
+ {/* Movie Info */}
+
+
{movie.title} - Official Trailer
+
{movie.release_year}
+
+
+
+
+ {/* YouTube Logo/Link */}
+
+
+
+ YouTube
+
+
+ {/* Add to List Button */}
+
+
+
+
+
+
+
+
+
+ {/* No Video Available */}
+ {!videoId && (
+
+
+
+
+
No trailer available
+
This movie doesn't have a YouTube trailer
+
+
+ )}
+
+
+ )
+}
+
+export default YouTubePlayer
diff --git a/frontend/src/components/YouTubePlayerTest.jsx b/frontend/src/components/YouTubePlayerTest.jsx
new file mode 100644
index 0000000..f5e82a7
--- /dev/null
+++ b/frontend/src/components/YouTubePlayerTest.jsx
@@ -0,0 +1,211 @@
+import React, { useState } from 'react'
+import YouTubePlayer from './YouTubePlayer'
+import { extractYouTubeVideoId, getYouTubeEmbedUrl, getYouTubeThumbnail } from '../utils/youtubeUtils'
+
+function YouTubePlayerTest() {
+ const [showPlayer, setShowPlayer] = useState(false)
+ const [selectedMovie, setSelectedMovie] = useState(null)
+
+ const testMovies = [
+ {
+ id: 1,
+ title: "The Godfather",
+ description: "The aging patriarch of an organized crime dynasty transfers control of his clandestine empire to his reluctant son.",
+ release_year: 1972,
+ rating: 9.2,
+ image_url: "https://m.media-amazon.com/images/M/MV5BM2MyNjYxNmUtYTAwNi00MTYxLWJmNWYtYzZlODY3ZTk3OTFlXkEyXkFqcGdeQXVyNzkwMjQ5NzM@._V1_.jpg",
+ trailer_url: "https://www.youtube.com/watch?v=UaVTIH8mujA",
+ youtube_trailer_id: "UaVTIH8mujA"
+ },
+ {
+ id: 2,
+ title: "The Matrix",
+ description: "A computer hacker learns from mysterious rebels about the true nature of his reality and his role in the war against its controllers.",
+ release_year: 1999,
+ rating: 8.7,
+ image_url: "https://image.tmdb.org/t/p/w500/f89U3ADr1oiB1s9GkdPOEpXUk5H.jpg",
+ trailer_url: "https://www.youtube.com/watch?v=vKQi3bBA1y8",
+ youtube_trailer_id: "vKQi3bBA1y8"
+ },
+ {
+ id: 3,
+ title: "The Dark Knight",
+ description: "When the menace known as the Joker wreaks havoc and chaos on the people of Gotham, Batman must accept one of the greatest psychological and physical tests.",
+ release_year: 2008,
+ rating: 9.0,
+ image_url: "https://m.media-amazon.com/images/M/MV5BMTMxNTMwODM0NF5BMl5BanBnXkFtZTcwODAyMTk2Mw@@._V1_.jpg",
+ trailer_url: "https://www.youtube.com/watch?v=EXeTwQWrcwY",
+ youtube_trailer_id: "EXeTwQWrcwY"
+ },
+ {
+ id: 4,
+ title: "Inception",
+ description: "A thief who steals corporate secrets through the use of dream-sharing technology is given the inverse task of planting an idea into the mind of a C.E.O.",
+ release_year: 2010,
+ rating: 8.8,
+ image_url: "https://m.media-amazon.com/images/M/MV5BMjAxMzY3NjcxNF5BMl5BanBnXkFtZTcwNTI5OTM0Mw@@._V1_.jpg",
+ trailer_url: "https://www.youtube.com/watch?v=YoHD9XEInc0",
+ youtube_trailer_id: "YoHD9XEInc0"
+ }
+ ]
+
+ const handlePlayTrailer = (movie) => {
+ setSelectedMovie(movie)
+ setShowPlayer(true)
+ }
+
+ const handleClosePlayer = () => {
+ setShowPlayer(false)
+ setSelectedMovie(null)
+ }
+
+ return (
+
+
+
YouTube Player Test
+
+ {/* Utility Functions Test */}
+
+
YouTube Utility Functions Test
+
+
+
URL Parsing Test
+
+ {testMovies.map(movie => {
+ const videoId = extractYouTubeVideoId(movie.trailer_url)
+ const embedUrl = getYouTubeEmbedUrl(videoId)
+ const thumbnail = getYouTubeThumbnail(videoId)
+
+ return (
+
+
{movie.title}
+
Original: {movie.trailer_url}
+
Video ID: {videoId}
+
Embed URL: {embedUrl?.substring(0, 60)}...
+
Thumbnail: {thumbnail}
+
+ )
+ })}
+
+
+
+
+
Thumbnail Preview
+
+ {testMovies.map(movie => {
+ const videoId = extractYouTubeVideoId(movie.trailer_url)
+ const thumbnail = getYouTubeThumbnail(videoId)
+
+ return (
+
+
+
{movie.title}
+
+ )
+ })}
+
+
+
+
+
+ {/* Movie Grid */}
+
+ {testMovies.map(movie => (
+
+
+
+
+
handlePlayTrailer(movie)}
+ className="bg-red-600 hover:bg-red-700 text-white rounded-full p-4 transform scale-0 hover:scale-100 transition-all duration-300 opacity-0 hover:opacity-100"
+ >
+
+
+
+
+
+
+
{movie.title}
+
+
{movie.release_year}
+
β’
+
+
+
{movie.description}
+
handlePlayTrailer(movie)}
+ className="w-full mt-4 bg-red-600 hover:bg-red-700 text-white py-2 px-4 rounded transition-colors flex items-center justify-center space-x-2"
+ >
+
+
+ Play Trailer
+
+
+
+ ))}
+
+
+ {/* Features List */}
+
+
YouTube Integration Features
+
+
+
YouTube Player Features
+
+ β’ Automatic YouTube URL detection
+ β’ Embedded YouTube player with custom controls
+ β’ Auto-play with muted start
+ β’ Custom overlay with movie information
+ β’ Direct link to watch on YouTube
+ β’ Responsive iframe embedding
+ β’ Loading states and error handling
+
+
+
+
URL Parsing Capabilities
+
+ β’ youtube.com/watch?v=VIDEO_ID
+ β’ youtu.be/VIDEO_ID
+ β’ youtube.com/embed/VIDEO_ID
+ β’ youtube.com/v/VIDEO_ID
+ β’ Automatic thumbnail generation
+ β’ Video ID extraction and validation
+ β’ Embed URL generation with parameters
+
+
+
+
+
+ {/* Instructions */}
+
+
Click on any movie poster or "Play Trailer" button to test YouTube video embedding.
+
The player will automatically detect YouTube URLs and embed them properly.
+
+
+
+ {/* YouTube Player */}
+
+
+ )
+}
+
+export default YouTubePlayerTest
diff --git a/frontend/src/data/mockUser.js b/frontend/src/data/mockUser.js
new file mode 100644
index 0000000..3450532
--- /dev/null
+++ b/frontend/src/data/mockUser.js
@@ -0,0 +1,49 @@
+// Mock user data for demonstration
+export const mockUserProfile = {
+ name: "Alex Johnson",
+ email: "alex.johnson@gitpodflix.com",
+ plan: "Premium",
+ watchedMovies: 127,
+ watchlistCount: 23,
+ hoursWatched: 342,
+ preferences: {
+ autoPlayPreviews: true,
+ hdQuality: true,
+ notifications: false
+ },
+ recentActivity: [
+ { title: "The Matrix", watchedAt: "2024-01-15", progress: 100 },
+ { title: "Inception", watchedAt: "2024-01-14", progress: 75 },
+ { title: "The Dark Knight", watchedAt: "2024-01-13", progress: 100 }
+ ],
+ favoriteGenres: ["Action", "Sci-Fi", "Thriller", "Drama"],
+ joinedDate: "2023-06-15",
+ profileImage: "/images/profile-avatar.jpg"
+}
+
+// Simulate user preferences updates
+export const updateUserPreference = (key, value) => {
+ mockUserProfile.preferences[key] = value
+ console.log(`Updated ${key} to ${value}`)
+ // In a real app, this would make an API call
+}
+
+// Simulate user activity tracking
+export const addToWatchHistory = (movieTitle) => {
+ mockUserProfile.recentActivity.unshift({
+ title: movieTitle,
+ watchedAt: new Date().toISOString().split('T')[0],
+ progress: Math.floor(Math.random() * 100) + 1
+ })
+ mockUserProfile.recentActivity = mockUserProfile.recentActivity.slice(0, 10) // Keep last 10
+ mockUserProfile.watchedMovies += 1
+}
+
+// Get user stats
+export const getUserStats = () => ({
+ totalMovies: mockUserProfile.watchedMovies,
+ totalHours: mockUserProfile.hoursWatched,
+ averageRating: 4.2,
+ favoriteGenre: mockUserProfile.favoriteGenres[0],
+ memberSince: mockUserProfile.joinedDate
+})
diff --git a/frontend/src/services/api.js b/frontend/src/services/api.js
index b316c67..1b60641 100644
--- a/frontend/src/services/api.js
+++ b/frontend/src/services/api.js
@@ -16,3 +16,73 @@ export const fetchMovies = async () => {
throw error;
}
};
+
+export const searchMovies = async (query, filters = {}) => {
+ try {
+ const params = new URLSearchParams();
+
+ if (query) {
+ params.append('q', query);
+ }
+
+ if (filters.genres && filters.genres.length > 0) {
+ params.append('genres', filters.genres.join(','));
+ }
+
+ if (filters.yearRange) {
+ params.append('yearMin', filters.yearRange.min);
+ params.append('yearMax', filters.yearRange.max);
+ }
+
+ if (filters.ratingRange) {
+ params.append('ratingMin', filters.ratingRange.min);
+ params.append('ratingMax', filters.ratingRange.max);
+ }
+
+ if (filters.durationRange) {
+ params.append('durationMin', filters.durationRange.min);
+ params.append('durationMax', filters.durationRange.max);
+ }
+
+ const response = await fetch(`${API_BASE_URL}/search?${params.toString()}`);
+ if (!response.ok) {
+ throw new Error('Failed to search movies');
+ }
+ const results = await response.json();
+ return results;
+ } catch (error) {
+ console.error('Error searching movies:', error);
+ throw error;
+ }
+};
+
+export const getSearchSuggestions = async (query) => {
+ try {
+ if (!query || query.length < 2) {
+ return [];
+ }
+
+ const response = await fetch(`${API_BASE_URL}/suggestions?q=${encodeURIComponent(query)}`);
+ if (!response.ok) {
+ throw new Error('Failed to fetch suggestions');
+ }
+ const suggestions = await response.json();
+ return suggestions;
+ } catch (error) {
+ console.error('Error fetching suggestions:', error);
+ return [];
+ }
+};
+
+// Debounce utility function for search optimization
+export const debounce = (func, wait) => {
+ let timeout;
+ return function executedFunction(...args) {
+ const later = () => {
+ clearTimeout(timeout);
+ func(...args);
+ };
+ clearTimeout(timeout);
+ timeout = setTimeout(later, wait);
+ };
+};
diff --git a/frontend/src/services/searchService.js b/frontend/src/services/searchService.js
new file mode 100644
index 0000000..9660150
--- /dev/null
+++ b/frontend/src/services/searchService.js
@@ -0,0 +1,257 @@
+import { searchMovies, getSearchSuggestions } from './api'
+
+class SearchService {
+ constructor() {
+ this.searchCache = new Map()
+ this.suggestionCache = new Map()
+ this.cacheTimeout = 5 * 60 * 1000 // 5 minutes
+ }
+
+ // Enhanced search with caching and ranking
+ async search(query, filters = {}, options = {}) {
+ const cacheKey = this.generateCacheKey(query, filters)
+ const cached = this.searchCache.get(cacheKey)
+
+ if (cached && Date.now() - cached.timestamp < this.cacheTimeout) {
+ return cached.data
+ }
+
+ try {
+ const results = await searchMovies(query, filters)
+
+ // Enhance results with search relevance scoring
+ const enhancedResults = this.enhanceSearchResults(results.results || results, query)
+
+ const finalResults = {
+ ...results,
+ results: enhancedResults
+ }
+
+ // Cache the results
+ this.searchCache.set(cacheKey, {
+ data: finalResults,
+ timestamp: Date.now()
+ })
+
+ return finalResults
+ } catch (error) {
+ console.error('Search service error:', error)
+ throw error
+ }
+ }
+
+ // Get intelligent search suggestions
+ async getSuggestions(query) {
+ if (!query || query.length < 2) {
+ return []
+ }
+
+ const cacheKey = `suggestions_${query.toLowerCase()}`
+ const cached = this.suggestionCache.get(cacheKey)
+
+ if (cached && Date.now() - cached.timestamp < this.cacheTimeout) {
+ return cached.data
+ }
+
+ try {
+ const suggestions = await getSearchSuggestions(query)
+
+ // Process and rank suggestions
+ const processedSuggestions = this.processSuggestions(suggestions, query)
+
+ // Cache the suggestions
+ this.suggestionCache.set(cacheKey, {
+ data: processedSuggestions,
+ timestamp: Date.now()
+ })
+
+ return processedSuggestions
+ } catch (error) {
+ console.error('Suggestions service error:', error)
+ return []
+ }
+ }
+
+ // Enhanced search results with relevance scoring
+ enhanceSearchResults(results, query) {
+ if (!Array.isArray(results) || !query) {
+ return results
+ }
+
+ const queryLower = query.toLowerCase()
+
+ return results.map(movie => {
+ let relevanceScore = 0
+
+ // Title match scoring
+ if (movie.title) {
+ const titleLower = movie.title.toLowerCase()
+ if (titleLower === queryLower) {
+ relevanceScore += 100 // Exact match
+ } else if (titleLower.startsWith(queryLower)) {
+ relevanceScore += 80 // Starts with query
+ } else if (titleLower.includes(queryLower)) {
+ relevanceScore += 60 // Contains query
+ }
+ }
+
+ // Director match scoring
+ if (movie.director && movie.director.toLowerCase().includes(queryLower)) {
+ relevanceScore += 40
+ }
+
+ // Genre match scoring
+ if (movie.genres && Array.isArray(movie.genres)) {
+ const genreMatch = movie.genres.some(genre =>
+ genre.toLowerCase().includes(queryLower)
+ )
+ if (genreMatch) {
+ relevanceScore += 30
+ }
+ }
+
+ // Cast match scoring
+ if (movie.cast && Array.isArray(movie.cast)) {
+ const castMatch = movie.cast.some(actor =>
+ actor.toLowerCase().includes(queryLower)
+ )
+ if (castMatch) {
+ relevanceScore += 35
+ }
+ }
+
+ // Description match scoring
+ if (movie.description && movie.description.toLowerCase().includes(queryLower)) {
+ relevanceScore += 20
+ }
+
+ // Boost popular movies slightly
+ if (movie.rating && movie.rating > 8.0) {
+ relevanceScore += 10
+ }
+
+ return {
+ ...movie,
+ relevanceScore
+ }
+ }).sort((a, b) => {
+ // Sort by relevance score first, then by rating
+ if (b.relevanceScore !== a.relevanceScore) {
+ return b.relevanceScore - a.relevanceScore
+ }
+ return (b.rating || 0) - (a.rating || 0)
+ })
+ }
+
+ // Process and rank search suggestions
+ processSuggestions(suggestions, query) {
+ if (!Array.isArray(suggestions)) {
+ return []
+ }
+
+ const queryLower = query.toLowerCase()
+
+ return suggestions
+ .map(suggestion => {
+ const text = typeof suggestion === 'string' ? suggestion : suggestion.text
+ const type = typeof suggestion === 'object' ? suggestion.type : 'unknown'
+ const frequency = typeof suggestion === 'object' ? suggestion.frequency : 1
+
+ let score = frequency || 1
+
+ // Boost exact matches
+ if (text.toLowerCase() === queryLower) {
+ score += 1000
+ }
+ // Boost starts with matches
+ else if (text.toLowerCase().startsWith(queryLower)) {
+ score += 500
+ }
+ // Boost word boundary matches
+ else if (text.toLowerCase().includes(` ${queryLower}`)) {
+ score += 200
+ }
+
+ // Type-based scoring
+ const typeScores = {
+ title: 100,
+ director: 80,
+ actor: 70,
+ genre: 60
+ }
+ score += typeScores[type] || 50
+
+ return {
+ text,
+ type,
+ score,
+ frequency
+ }
+ })
+ .sort((a, b) => b.score - a.score)
+ .slice(0, 8) // Limit to top 8 suggestions
+ .map(s => s.text) // Return just the text for simplicity
+ }
+
+ // Generate cache key for search results
+ generateCacheKey(query, filters) {
+ const filterString = JSON.stringify(filters)
+ return `search_${query}_${filterString}`.replace(/\s+/g, '_').toLowerCase()
+ }
+
+ // Clear caches
+ clearCache() {
+ this.searchCache.clear()
+ this.suggestionCache.clear()
+ }
+
+ // Get popular search terms (could be enhanced with analytics)
+ getPopularSearches() {
+ return [
+ 'Action movies',
+ 'Comedy',
+ 'Sci-Fi',
+ 'Drama',
+ 'Thriller',
+ 'Romance',
+ 'Horror',
+ 'Animation'
+ ]
+ }
+
+ // Search history management (localStorage-based)
+ getSearchHistory() {
+ try {
+ const history = localStorage.getItem('gitpodflix_search_history')
+ return history ? JSON.parse(history) : []
+ } catch (error) {
+ console.error('Error reading search history:', error)
+ return []
+ }
+ }
+
+ addToSearchHistory(query) {
+ if (!query || query.length < 2) return
+
+ try {
+ const history = this.getSearchHistory()
+ const filteredHistory = history.filter(item => item !== query)
+ const newHistory = [query, ...filteredHistory].slice(0, 10) // Keep last 10 searches
+
+ localStorage.setItem('gitpodflix_search_history', JSON.stringify(newHistory))
+ } catch (error) {
+ console.error('Error saving search history:', error)
+ }
+ }
+
+ clearSearchHistory() {
+ try {
+ localStorage.removeItem('gitpodflix_search_history')
+ } catch (error) {
+ console.error('Error clearing search history:', error)
+ }
+ }
+}
+
+// Export singleton instance
+export default new SearchService()
diff --git a/frontend/src/styles/index.css b/frontend/src/styles/index.css
index 9bb6e59..9241c5e 100644
--- a/frontend/src/styles/index.css
+++ b/frontend/src/styles/index.css
@@ -30,4 +30,53 @@
.play-button {
@apply opacity-0 group-hover:opacity-100 transform translate-y-4 group-hover:translate-y-0 transition-all duration-300;
-}
\ No newline at end of file
+}
+/* Video Player Custom Styles */
+.video-controls {
+ background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.4) 50%, transparent 100%);
+}
+
+/* Custom range slider styles */
+.slider {
+ -webkit-appearance: none;
+ appearance: none;
+ background: transparent;
+ cursor: pointer;
+}
+
+.slider::-webkit-slider-track {
+ background: #4a5568;
+ height: 4px;
+ border-radius: 2px;
+}
+
+.slider::-webkit-slider-thumb {
+ -webkit-appearance: none;
+ appearance: none;
+ background: #e53e3e;
+ height: 16px;
+ width: 16px;
+ border-radius: 50%;
+ cursor: pointer;
+ transition: all 0.2s ease;
+}
+
+.slider::-webkit-slider-thumb:hover {
+ background: #c53030;
+ transform: scale(1.2);
+}
+
+/* Line clamp utility */
+.line-clamp-2 {
+ display: -webkit-box;
+ -webkit-line-clamp: 2;
+ -webkit-box-orient: vertical;
+ overflow: hidden;
+}
+
+/* Focus styles for accessibility */
+button:focus-visible,
+input:focus-visible {
+ outline: 2px solid #e53e3e;
+ outline-offset: 2px;
+}
diff --git a/frontend/src/utils/youtubeUtils.js b/frontend/src/utils/youtubeUtils.js
new file mode 100644
index 0000000..9470eda
--- /dev/null
+++ b/frontend/src/utils/youtubeUtils.js
@@ -0,0 +1,116 @@
+// YouTube utility functions for video handling
+
+/**
+ * Extract YouTube video ID from various YouTube URL formats
+ * @param {string} url - YouTube URL
+ * @returns {string|null} - Video ID or null if invalid
+ */
+export const extractYouTubeVideoId = (url) => {
+ if (!url || typeof url !== 'string') return null;
+
+ const patterns = [
+ /(?:youtube\.com\/watch\?v=|youtu\.be\/|youtube\.com\/embed\/)([^&\n?#]+)/i,
+ /youtube\.com\/v\/([^&\n?#]+)/i,
+ /youtube\.com\/watch\?.*v=([^&\n?#]+)/i
+ ];
+
+ for (const pattern of patterns) {
+ const match = url.match(pattern);
+ if (match && match[1]) {
+ return match[1];
+ }
+ }
+
+ return null;
+};
+
+/**
+ * Generate YouTube embed URL from video ID
+ * @param {string} videoId - YouTube video ID
+ * @param {object} options - Embed options
+ * @returns {string} - YouTube embed URL
+ */
+export const getYouTubeEmbedUrl = (videoId, options = {}) => {
+ if (!videoId) return null;
+
+ const defaultOptions = {
+ autoplay: 1,
+ mute: 0, // Allow sound by default
+ controls: 1, // Show YouTube controls by default
+ showinfo: 0,
+ rel: 0,
+ modestbranding: 1,
+ playsinline: 1,
+ enablejsapi: 1,
+ fs: 1, // Allow fullscreen
+ cc_load_policy: 1, // Show closed captions
+ iv_load_policy: 3, // Hide annotations
+ origin: window.location.origin
+ };
+
+ const embedOptions = { ...defaultOptions, ...options };
+ const params = new URLSearchParams(embedOptions);
+
+ return `https://www.youtube.com/embed/${videoId}?${params.toString()}`;
+};
+
+/**
+ * Generate YouTube thumbnail URL from video ID
+ * @param {string} videoId - YouTube video ID
+ * @param {string} quality - Thumbnail quality (default, mqdefault, hqdefault, sddefault, maxresdefault)
+ * @returns {string} - YouTube thumbnail URL
+ */
+export const getYouTubeThumbnail = (videoId, quality = 'hqdefault') => {
+ if (!videoId) return null;
+ return `https://img.youtube.com/vi/${videoId}/${quality}.jpg`;
+};
+
+/**
+ * Check if URL is a YouTube URL
+ * @param {string} url - URL to check
+ * @returns {boolean} - True if YouTube URL
+ */
+export const isYouTubeUrl = (url) => {
+ if (!url || typeof url !== 'string') return false;
+ const lowerUrl = url.toLowerCase();
+ return lowerUrl.includes('youtube.com') || lowerUrl.includes('youtu.be');
+};
+
+/**
+ * Get video duration from YouTube API (requires API key)
+ * This is a placeholder for future implementation
+ * @param {string} videoId - YouTube video ID
+ * @returns {Promise
} - Duration in seconds
+ */
+export const getYouTubeDuration = async (videoId) => {
+ // TODO: Implement with YouTube Data API v3
+ // For now, return a default duration
+ return 180; // 3 minutes default
+};
+
+/**
+ * Create YouTube player configuration
+ * @param {string} videoId - YouTube video ID
+ * @param {object} playerOptions - Player configuration options
+ * @returns {object} - Player configuration
+ */
+export const createYouTubePlayerConfig = (videoId, playerOptions = {}) => {
+ return {
+ videoId,
+ playerVars: {
+ autoplay: 1,
+ mute: 0, // Enable sound by default
+ controls: 1, // Show YouTube controls
+ showinfo: 0,
+ rel: 0,
+ modestbranding: 1,
+ playsinline: 1,
+ enablejsapi: 1,
+ fs: 1, // Allow fullscreen
+ cc_load_policy: 1, // Show captions
+ iv_load_policy: 3, // Hide annotations
+ origin: window.location.origin,
+ ...playerOptions
+ }
+ };
+};
diff --git a/frontend/vite.config.js b/frontend/vite.config.js
index b70d413..f60d358 100644
--- a/frontend/vite.config.js
+++ b/frontend/vite.config.js
@@ -10,6 +10,7 @@ export default defineConfig({
'.gitpod.dev',
'localhost',
'127.0.0.1',
+ '.eu-runner.flex.doptig.cloud',
'.sales-emea.flex.doptig.cloud',
'.sales-us.flex.doptig.cloud',
'.gcp-demo-runner.flex.doptig.cloud'
diff --git a/health-check.sh b/health-check.sh
new file mode 100755
index 0000000..b22aab6
--- /dev/null
+++ b/health-check.sh
@@ -0,0 +1,125 @@
+#!/bin/bash
+
+# Colors for output
+RED='\033[0;31m'
+GREEN='\033[0;32m'
+YELLOW='\033[1;33m'
+BLUE='\033[0;34m'
+NC='\033[0m' # No Color
+
+print_status() {
+ echo -e "${BLUE}[INFO]${NC} $1"
+}
+
+print_success() {
+ echo -e "${GREEN}[SUCCESS]${NC} $1"
+}
+
+print_warning() {
+ echo -e "${YELLOW}[WARNING]${NC} $1"
+}
+
+print_error() {
+ echo -e "${RED}[ERROR]${NC} $1"
+}
+
+echo "π GitpodFlix Health Check"
+echo "=========================="
+
+# Check PostgreSQL
+print_status "Checking PostgreSQL database..."
+if PGPASSWORD=gitpod psql -h localhost -U gitpod -d gitpodflix -c "SELECT 1" >/dev/null 2>&1; then
+ MOVIE_COUNT=$(PGPASSWORD=gitpod psql -h localhost -U gitpod -d gitpodflix -t -c "SELECT COUNT(*) FROM movies" 2>/dev/null | xargs)
+ if [ "$MOVIE_COUNT" -gt 0 ]; then
+ print_success "PostgreSQL: β
Connected ($MOVIE_COUNT movies in database)"
+ else
+ print_warning "PostgreSQL: β οΈ Connected but no movies in database"
+ fi
+else
+ print_error "PostgreSQL: β Connection failed"
+ POSTGRES_FAILED=1
+fi
+
+# Check Backend API
+print_status "Checking Backend API..."
+if curl -s http://localhost:3001/health >/dev/null 2>&1; then
+ API_RESPONSE=$(curl -s http://localhost:3001/health | jq -r '.status' 2>/dev/null)
+ if [ "$API_RESPONSE" = "OK" ]; then
+ print_success "Backend API: β
http://localhost:3001 (Status: $API_RESPONSE)"
+ else
+ print_warning "Backend API: β οΈ Responding but status unclear"
+ fi
+else
+ print_error "Backend API: β Not responding on http://localhost:3001"
+ BACKEND_FAILED=1
+fi
+
+# Check Frontend
+print_status "Checking Frontend..."
+if curl -s http://localhost:3000 >/dev/null 2>&1; then
+ TITLE=$(curl -s http://localhost:3000 | grep -o '.* ' | sed 's/<[^>]*>//g')
+ if [ ! -z "$TITLE" ]; then
+ print_success "Frontend: β
http://localhost:3000 ($TITLE)"
+ else
+ print_warning "Frontend: β οΈ Responding but title not found"
+ fi
+else
+ print_error "Frontend: β Not responding on http://localhost:3000"
+ FRONTEND_FAILED=1
+fi
+
+# Check API endpoints
+print_status "Checking API endpoints..."
+if curl -s http://localhost:3001/api/movies >/dev/null 2>&1; then
+ MOVIES_COUNT=$(curl -s http://localhost:3001/api/movies | jq length 2>/dev/null)
+ if [ "$MOVIES_COUNT" -gt 0 ]; then
+ print_success "Movies API: β
/api/movies ($MOVIES_COUNT movies)"
+ else
+ print_warning "Movies API: β οΈ Endpoint responding but no movies returned"
+ fi
+else
+ print_error "Movies API: β /api/movies not responding"
+fi
+
+# Check search functionality
+if curl -s "http://localhost:3001/api/search?q=dark" >/dev/null 2>&1; then
+ SEARCH_RESULTS=$(curl -s "http://localhost:3001/api/search?q=dark" | jq '.results | length' 2>/dev/null)
+ if [ "$SEARCH_RESULTS" -gt 0 ]; then
+ print_success "Search API: β
/api/search ($SEARCH_RESULTS results for 'dark')"
+ else
+ print_warning "Search API: β οΈ Endpoint responding but no search results"
+ fi
+else
+ print_error "Search API: β /api/search not responding"
+fi
+
+# Summary
+echo ""
+echo "π Health Check Summary"
+echo "======================"
+
+if [ -z "$POSTGRES_FAILED" ] && [ -z "$BACKEND_FAILED" ] && [ -z "$FRONTEND_FAILED" ]; then
+ print_success "All services are healthy! π"
+ echo ""
+ echo "π Access URLs:"
+ echo " Frontend: http://localhost:3000"
+ echo " Backend API: http://localhost:3001"
+ echo " Health: http://localhost:3001/health"
+ echo ""
+ exit 0
+else
+ print_error "Some services have issues. Check the logs above."
+ echo ""
+ echo "π§ Troubleshooting:"
+ if [ ! -z "$POSTGRES_FAILED" ]; then
+ echo " PostgreSQL: docker logs main-postgres-1"
+ fi
+ if [ ! -z "$BACKEND_FAILED" ]; then
+ echo " Backend: tail -f /tmp/catalog.log"
+ fi
+ if [ ! -z "$FRONTEND_FAILED" ]; then
+ echo " Frontend: tail -f /tmp/frontend.log"
+ fi
+ echo ""
+ exit 1
+fi
diff --git a/mcp.json b/mcp.json
new file mode 100644
index 0000000..6d984ea
--- /dev/null
+++ b/mcp.json
@@ -0,0 +1,18 @@
+{
+ "mcpServers": {
+ "jira-mcp": {
+ "command": "node",
+ "args": ["/home/node/jira-mcp/build/index.js"],
+ "env": {
+ "JIRA_HOST": "${JIRA_HOST:-coakley.atlassian.net}",
+ "JIRA_USERNAME": "${JIRA_USERNAME:-joe@gitpod.io}",
+ "JIRA_API_TOKEN": "${JIRA_API_TOKEN:-your_api_token_here}",
+ "JIRA_PROJECT_KEY": "${JIRA_PROJECT_KEY:-MBA}",
+ "AUTO_CREATE_TEST_TICKETS": "true",
+ "JIRA_ACCEPTANCE_CRITERIA_FIELD": "customfield_10429",
+ "JIRA_STORY_POINTS_FIELD": "customfield_10040",
+ "JIRA_EPIC_LINK_FIELD": "customfield_10014"
+ }
+ }
+ }
+}
diff --git a/movies.db b/movies.db
new file mode 100644
index 0000000..e69de29
diff --git a/startup.sh b/startup.sh
new file mode 100755
index 0000000..156f717
--- /dev/null
+++ b/startup.sh
@@ -0,0 +1,267 @@
+#!/bin/bash
+
+set -e
+
+echo "π Starting GitpodFlix Environment..."
+
+# Colors for output
+RED='\033[0;31m'
+GREEN='\033[0;32m'
+YELLOW='\033[1;33m'
+BLUE='\033[0;34m'
+NC='\033[0m' # No Color
+
+# Function to print colored output
+print_status() {
+ echo -e "${BLUE}[INFO]${NC} $1"
+}
+
+print_success() {
+ echo -e "${GREEN}[SUCCESS]${NC} $1"
+}
+
+print_warning() {
+ echo -e "${YELLOW}[WARNING]${NC} $1"
+}
+
+print_error() {
+ echo -e "${RED}[ERROR]${NC} $1"
+}
+
+# Function to wait for service with timeout
+wait_for_service() {
+ local service_name=$1
+ local check_command=$2
+ local timeout=${3:-60}
+ local interval=${4:-2}
+
+ print_status "Waiting for $service_name to be ready..."
+
+ for i in $(seq 1 $((timeout / interval))); do
+ if eval "$check_command" >/dev/null 2>&1; then
+ print_success "$service_name is ready!"
+ return 0
+ fi
+
+ if [ $i -eq $((timeout / interval)) ]; then
+ print_error "Timeout waiting for $service_name after ${timeout}s"
+ return 1
+ fi
+
+ echo -n "."
+ sleep $interval
+ done
+}
+
+# Function to check if port is in use
+check_port() {
+ local port=$1
+ if timeout 5 netstat -tlnp 2>/dev/null | grep -q ":$port "; then
+ return 0
+ else
+ return 1
+ fi
+}
+
+# Function to kill process on port
+kill_port() {
+ local port=$1
+ local pid=$(timeout 5 netstat -tlnp 2>/dev/null | grep ":$port " | awk '{print $7}' | cut -d'/' -f1 | head -1)
+ if [ ! -z "$pid" ] && [ "$pid" != "-" ]; then
+ print_warning "Killing process on port $port (PID: $pid)"
+ kill -9 $pid 2>/dev/null || true
+ sleep 2
+ fi
+}
+
+# Step 1: Clean up any existing services
+print_status "Cleaning up existing services..."
+
+# Stop any existing Docker containers
+docker stop main-postgres-1 2>/dev/null || true
+docker rm main-postgres-1 2>/dev/null || true
+docker stop postgres 2>/dev/null || true
+docker rm postgres 2>/dev/null || true
+
+# Kill processes on our ports
+kill_port 3000
+kill_port 3001
+kill_port 5432
+
+print_success "Cleanup completed"
+
+# Step 2: Start PostgreSQL Database
+print_status "Starting PostgreSQL database..."
+
+cd database/main
+if ! docker-compose up -d; then
+ print_error "Failed to start PostgreSQL with docker-compose"
+ exit 1
+fi
+
+# Wait for PostgreSQL container to be healthy
+print_status "Waiting for PostgreSQL container to be healthy..."
+if ! wait_for_service "PostgreSQL Container" "docker-compose ps postgres | grep -q '(healthy)'" 90 5; then
+ print_error "PostgreSQL container failed to become healthy"
+ docker-compose logs
+ exit 1
+fi
+
+# Wait for database connection and schema to be ready
+if ! wait_for_service "PostgreSQL Database" "PGPASSWORD=gitpod psql -h localhost -U gitpod -d gitpodflix -c 'SELECT 1'" 30 2; then
+ print_error "PostgreSQL database connection failed"
+ docker-compose logs
+ exit 1
+fi
+
+# Verify database schema is ready (migrations have run)
+print_status "Verifying database schema..."
+if ! wait_for_service "Database Schema" "PGPASSWORD=gitpod psql -h localhost -U gitpod -d gitpodflix -c 'SELECT 1 FROM information_schema.tables WHERE table_name = '\''movies'\'''" 30 2; then
+ print_error "Database schema not ready - migrations may not have completed"
+ docker-compose logs
+ exit 1
+fi
+
+# Additional buffer time to ensure database is fully stable
+print_status "Allowing database to stabilize..."
+sleep 5
+
+cd ../..
+
+# Step 3: Install and start Backend Catalog Service
+print_status "Setting up Backend Catalog Service..."
+
+cd backend/catalog
+
+# Create .env file if it doesn't exist
+if [ ! -f .env ]; then
+ print_status "Creating .env file..."
+ cat > .env << EOF
+DB_HOST=localhost
+DB_USER=gitpod
+DB_PASSWORD=gitpod
+DB_NAME=gitpodflix
+DB_PORT=5432
+PORT=3001
+EOF
+fi
+
+# Install dependencies
+print_status "Installing backend dependencies..."
+npm install
+
+# Start the service in background
+print_status "Starting catalog service..."
+nohup npm run dev > /tmp/catalog.log 2>&1 &
+CATALOG_PID=$!
+
+# Wait for catalog service to be ready
+if ! wait_for_service "Catalog Service" "curl -s http://localhost:3001/health" 30 2; then
+ print_error "Catalog service failed to start"
+ print_error "Logs:"
+ tail -20 /tmp/catalog.log
+ exit 1
+fi
+
+cd ../..
+
+# Step 4: Install and start Frontend
+print_status "Setting up Frontend..."
+
+cd frontend
+
+# Install dependencies
+print_status "Installing frontend dependencies..."
+npm install
+
+# Start the service in background
+print_status "Starting frontend service..."
+nohup npm run dev > /tmp/frontend.log 2>&1 &
+FRONTEND_PID=$!
+
+# Wait for frontend to be ready
+if ! wait_for_service "Frontend" "curl -s http://localhost:3000" 30 2; then
+ print_error "Frontend failed to start"
+ print_error "Logs:"
+ tail -20 /tmp/frontend.log
+ exit 1
+fi
+
+cd ..
+
+# Step 5: Seed the database
+print_status "Seeding database with sample data..."
+
+# Double-check database is ready before seeding
+if ! PGPASSWORD=gitpod psql -h localhost -U gitpod -d gitpodflix -c "SELECT COUNT(*) FROM information_schema.tables WHERE table_name = 'movies'" >/dev/null 2>&1; then
+ print_error "Database schema not ready for seeding"
+ exit 1
+fi
+
+if [ -f "database/main/seeds/movies_complete.sql" ]; then
+ print_status "Seeding database from SQL file..."
+ if PGPASSWORD=gitpod psql -h localhost -U gitpod -d gitpodflix -f database/main/seeds/movies_complete.sql >/dev/null 2>&1; then
+ print_success "Database seeded with sample movies"
+ else
+ print_error "Failed to seed database from SQL file"
+ # Try API fallback
+ print_status "Attempting API seeding fallback..."
+ if curl -s -X POST http://localhost:3001/api/movies/seed >/dev/null 2>&1; then
+ print_success "Database seeded via API fallback"
+ else
+ print_warning "Could not seed database - continuing anyway"
+ fi
+ fi
+else
+ # Fallback to API seeding
+ print_status "SQL seed file not found, using API seeding..."
+ if curl -s -X POST http://localhost:3001/api/movies/seed >/dev/null 2>&1; then
+ print_success "Database seeded via API"
+ else
+ print_warning "Could not seed database - continuing anyway"
+ fi
+fi
+
+# Step 6: Final health checks
+print_status "Performing final health checks..."
+
+# Check PostgreSQL
+if PGPASSWORD=gitpod psql -h localhost -U gitpod -d gitpodflix -c "SELECT COUNT(*) FROM movies" >/dev/null 2>&1; then
+ MOVIE_COUNT=$(PGPASSWORD=gitpod psql -h localhost -U gitpod -d gitpodflix -t -c "SELECT COUNT(*) FROM movies" | xargs)
+ print_success "PostgreSQL: β
($MOVIE_COUNT movies in database)"
+else
+ print_error "PostgreSQL: β Database connection failed"
+fi
+
+# Check Backend API
+if curl -s http://localhost:3001/health >/dev/null 2>&1; then
+ print_success "Backend API: β
http://localhost:3001"
+else
+ print_error "Backend API: β Not responding"
+fi
+
+# Check Frontend
+if curl -s http://localhost:3000 >/dev/null 2>&1; then
+ print_success "Frontend: β
http://localhost:3000"
+else
+ print_error "Frontend: β Not responding"
+fi
+
+# Step 7: Display summary
+echo ""
+echo "π¬ GitpodFlix Environment Ready!"
+echo "================================"
+echo "Frontend: http://localhost:3000"
+echo "Backend API: http://localhost:3001"
+echo "Database: PostgreSQL on port 5432"
+echo ""
+echo "Service PIDs:"
+echo "- Catalog Service: $CATALOG_PID"
+echo "- Frontend: $FRONTEND_PID"
+echo ""
+echo "Logs available at:"
+echo "- Backend: /tmp/catalog.log"
+echo "- Frontend: /tmp/frontend.log"
+echo "- Database: docker logs main-postgres-1"
+echo ""
+print_success "All services are running successfully! π"
+