From c54b3574c61792d96ad50fd24f6c6f6359b7735f Mon Sep 17 00:00:00 2001 From: jrcoak Date: Thu, 31 Jul 2025 15:12:42 +0000 Subject: [PATCH 01/26] Optimize devcontainer configuration - Switch to typescript-node:20-bullseye base image for better performance - Remove unused features (MariaDB, Renovate CLI, Claude Code) - Add volume mounts for node_modules to improve rebuild times - Implement updateContentCommand for faster dependency installation - Switch from root to node user for better security - Streamline setup script to only install required PostgreSQL client - Update VSCode extensions to match actual project needs Co-authored-by: Ona --- .devcontainer/devcontainer.json | 43 +++++++++++---------- .devcontainer/setup.sh | 66 ++++----------------------------- 2 files changed, 28 insertions(+), 81 deletions(-) diff --git a/.devcontainer/devcontainer.json b/.devcontainer/devcontainer.json index c0097de..ed2ad4d 100644 --- a/.devcontainer/devcontainer.json +++ b/.devcontainer/devcontainer.json @@ -1,26 +1,20 @@ { "name": "GitpodFlix Dev Environment", - "image": "mcr.microsoft.com/devcontainers/base:ubuntu", + "image": "mcr.microsoft.com/devcontainers/typescript-node:20-bullseye", "features": { "ghcr.io/devcontainers/features/common-utils:2": { "installZsh": true, "configureZshAsDefaultShell": true, - "installGit": true, - "installGitLFS": true, - "installGithubCli": true - }, - "ghcr.io/devcontainers/features/github-cli:1": { }, - "ghcr.io/devcontainers/features/node:1": { - "version": "18", - "nodeGypDependencies": true + "installGit": false, + "installGitLFS": false, + "installGithubCli": false }, + "ghcr.io/devcontainers/features/github-cli:1": {}, "ghcr.io/warrenbuckley/codespace-features/sqlite:1": {}, "ghcr.io/devcontainers/features/docker-in-docker:2": { - "version": "latest", - "moby": true - }, - "ghcr.io/devcontainers-extra/features/renovate-cli:2": {}, - "ghcr.io/anthropics/devcontainer-features/claude-code:1.0": {} + "version": "20.10", + "moby": false + } }, "forwardPorts": [ 3000, @@ -31,23 +25,22 @@ "customizations": { "vscode": { "extensions": [ - - // Install AI code assistants "GitHub.copilot", "RooVeterinaryInc.roo-cline", "saoudrizwan.claude-dev", - - // Install other extensions "dbaeumer.vscode-eslint", "esbenp.prettier-vscode", "mtxr.sqltools", "mtxr.sqltools-driver-sqlite", - "mtxr.sqltools-driver-mysql", + "mtxr.sqltools-driver-pg", "bradlc.vscode-tailwindcss" - ], "settings": { - "editor.formatOnSave": true + "editor.formatOnSave": true, + "editor.codeActionsOnSave": { + "source.fixAll.eslint": true + }, + "typescript.preferences.importModuleSpecifier": "relative" } } }, @@ -63,5 +56,11 @@ "label": "PostgreSQL" } }, - "remoteUser": "root" + "remoteUser": "node", + "updateContentCommand": "npm install -g nodemon && cd frontend && npm ci && cd ../backend/catalog && npm ci", + "mounts": [ + "source=${localWorkspaceFolder}/node_modules,target=${containerWorkspaceFolder}/node_modules,type=volume", + "source=${localWorkspaceFolder}/frontend/node_modules,target=${containerWorkspaceFolder}/frontend/node_modules,type=volume", + "source=${localWorkspaceFolder}/backend/catalog/node_modules,target=${containerWorkspaceFolder}/backend/catalog/node_modules,type=volume" + ] } diff --git a/.devcontainer/setup.sh b/.devcontainer/setup.sh index 1030e43..32e5b48 100755 --- a/.devcontainer/setup.sh +++ b/.devcontainer/setup.sh @@ -1,32 +1,15 @@ #!/bin/bash -# Exit on error set -e echo "๐Ÿš€ Starting development environment setup..." -# Function to handle package installation -install_package() { - local package=$1 - echo "๐Ÿ“ฆ Installing $package..." - if ! dpkg -l | grep -q "^ii $package "; then - DEBIAN_FRONTEND=noninteractive apt-get install -y --no-install-recommends "$package" - else - echo "โœ… $package is already installed" - fi -} - -# Clean apt cache and update package lists -echo "๐Ÿงน Cleaning apt cache..." -apt-get clean -echo "๐Ÿ”„ Updating package lists..." -apt-get update - -# Install system dependencies one by one with error handling +# Install system dependencies echo "๐Ÿ“ฆ Installing system dependencies..." -install_package "mariadb-client" -install_package "mariadb-server" -install_package "postgresql-client" +sudo apt-get update && sudo apt-get install -y --no-install-recommends \ + postgresql-client \ + && sudo apt-get clean \ + && sudo rm -rf /var/lib/apt/lists/* # Verify PostgreSQL client tools are installed if ! command -v pg_isready &> /dev/null; then @@ -34,47 +17,12 @@ if ! command -v pg_isready &> /dev/null; then exit 1 fi -# Start MariaDB service -echo "๐Ÿ’พ Starting MariaDB service..." -if ! service mariadb status > /dev/null 2>&1; then - service mariadb start -else - echo "โœ… MariaDB service is already running" -fi - -# Verify MariaDB is running -if ! service mariadb status > /dev/null 2>&1; then - echo "โŒ Failed to start MariaDB service" - exit 1 -fi - -# Install global npm packages -echo "๐Ÿ“ฆ Installing global npm packages..." -npm install -g nodemon - -# Install project dependencies -echo "๐Ÿ“ฆ Installing project dependencies..." - -# Install Gitpod Flix dependencies -if [ -d "/workspaces/gitpodflix-demo/frontend" ]; then - echo "๐Ÿ“ฆ Installing Gitpod Flix dependencies..." - cd /workspaces/gitpodflix-demo/frontend - npm install -fi - -# Install catalog service dependencies -if [ -d "/workspaces/gitpodflix-demo/backend/catalog" ]; then - echo "๐Ÿ“ฆ Installing catalog service dependencies..." - cd /workspaces/gitpodflix-demo/backend/catalog - npm install -fi - echo "โœ… Setup completed successfully!" +# GitHub CLI authentication (optional) if [ -n "$GH_CLI_TOKEN" ]; then gh auth login --with-token <<< "$GH_CLI_TOKEN" - # Configure git to use GitHub CLI credentials gh auth setup-git else - echo "GH_CLI_TOKEN not set, skipping authentication" + echo "โ„น๏ธ GH_CLI_TOKEN not set, skipping authentication" fi From 7821ad36c7ecec8f1eb3632ddd45fb786f2008fb Mon Sep 17 00:00:00 2001 From: jrcoak Date: Thu, 31 Jul 2025 15:27:20 +0000 Subject: [PATCH 02/26] Optimize PostgreSQL Docker Compose configuration - Switch to postgres:15-alpine for smaller image size (~200MB reduction) - Add comprehensive healthcheck with proper timing - Implement security hardening with no-new-privileges and scram-sha-256 auth - Add tmpfs mounts for /tmp and /var/run/postgresql to improve performance - Set restart policy to unless-stopped for better reliability - Make migrations volume read-only for security Co-authored-by: Ona --- database/main/docker-compose.yml | 18 ++++++++++++++++-- 1 file changed, 16 insertions(+), 2 deletions(-) diff --git a/database/main/docker-compose.yml b/database/main/docker-compose.yml index 96c16a7..a331df7 100644 --- a/database/main/docker-compose.yml +++ b/database/main/docker-compose.yml @@ -2,16 +2,30 @@ version: "3.8" services: postgres: - image: postgres:15 + image: postgres:15-alpine + restart: unless-stopped environment: POSTGRES_USER: gitpod POSTGRES_PASSWORD: gitpod POSTGRES_DB: gitpodflix + POSTGRES_INITDB_ARGS: "--auth-host=scram-sha-256 --auth-local=scram-sha-256" ports: - "5432:5432" volumes: - postgres_data:/var/lib/postgresql/data - - ./migrations:/docker-entrypoint-initdb.d + - ./migrations:/docker-entrypoint-initdb.d:ro + healthcheck: + test: ["CMD-SHELL", "pg_isready -U gitpod -d gitpodflix"] + interval: 10s + timeout: 5s + retries: 5 + start_period: 30s + security_opt: + - no-new-privileges:true + tmpfs: + - /tmp + - /var/run/postgresql volumes: postgres_data: + driver: local From 0d5baa329d1feed230457302aa7eb1b93a99b82c Mon Sep 17 00:00:00 2001 From: jrcoak Date: Tue, 5 Aug 2025 11:18:38 -0400 Subject: [PATCH 03/26] Update devcontainer.json --- .devcontainer/devcontainer.json | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/.devcontainer/devcontainer.json b/.devcontainer/devcontainer.json index ed2ad4d..b02cfef 100644 --- a/.devcontainer/devcontainer.json +++ b/.devcontainer/devcontainer.json @@ -59,8 +59,8 @@ "remoteUser": "node", "updateContentCommand": "npm install -g nodemon && cd frontend && npm ci && cd ../backend/catalog && npm ci", "mounts": [ - "source=${localWorkspaceFolder}/node_modules,target=${containerWorkspaceFolder}/node_modules,type=volume", - "source=${localWorkspaceFolder}/frontend/node_modules,target=${containerWorkspaceFolder}/frontend/node_modules,type=volume", - "source=${localWorkspaceFolder}/backend/catalog/node_modules,target=${containerWorkspaceFolder}/backend/catalog/node_modules,type=volume" + "source=gitpodflix-node-modules,target=${containerWorkspaceFolder}/node_modules,type=volume", + "source=gitpodflix-frontend-node-modules,target=${containerWorkspaceFolder}/frontend/node_modules,type=volume", + "source=gitpodflix-catalog-node-modules,target=${containerWorkspaceFolder}/backend/catalog/node_modules,type=volume" ] } From ef2a0117c00e27a43802440b39064f67d47942d0 Mon Sep 17 00:00:00 2001 From: jrcoak Date: Tue, 5 Aug 2025 15:36:08 +0000 Subject: [PATCH 04/26] Optimize devcontainer build performance - Add custom Dockerfile with layer caching for dependencies - Remove redundant updateContentCommand from devcontainer.json - Add .dockerignore to reduce build context size - Use BuildKit cache mounts for npm cache - Install system dependencies in Dockerfile instead of setup.sh - Add npm cache volume mount for faster rebuilds Co-authored-by: Ona --- .devcontainer/Dockerfile | 32 +++++++++++ .devcontainer/devcontainer.json | 12 +++- .devcontainer/setup.sh | 9 +-- .dockerignore | 98 +++++++++++++++++++++++++++++++++ 4 files changed, 140 insertions(+), 11 deletions(-) create mode 100644 .devcontainer/Dockerfile create mode 100644 .dockerignore diff --git a/.devcontainer/Dockerfile b/.devcontainer/Dockerfile new file mode 100644 index 0000000..eaed49e --- /dev/null +++ b/.devcontainer/Dockerfile @@ -0,0 +1,32 @@ +# syntax=docker/dockerfile:1.4 +FROM mcr.microsoft.com/devcontainers/typescript-node:20-bullseye + +# Install system dependencies in a single layer +RUN apt-get update && apt-get install -y --no-install-recommends \ + postgresql-client \ + && apt-get clean \ + && rm -rf /var/lib/apt/lists/* + +# Set working directory +WORKDIR /workspaces/gitpodflix + +# Install global dependencies first +RUN npm install -g nodemon + +# Create directories for package files +RUN mkdir -p frontend backend/catalog + +# Copy package files for dependency caching +COPY frontend/package*.json ./frontend/ +COPY backend/catalog/package*.json ./backend/catalog/ + +# Install dependencies using BuildKit cache +RUN --mount=type=cache,target=/root/.npm \ + cd frontend && npm ci --prefer-offline --no-audit --no-fund && \ + cd ../backend/catalog && npm ci --prefer-offline --no-audit --no-fund + +# Copy the rest of the application +COPY . . + +# Set the default user +USER node diff --git a/.devcontainer/devcontainer.json b/.devcontainer/devcontainer.json index b02cfef..708c319 100644 --- a/.devcontainer/devcontainer.json +++ b/.devcontainer/devcontainer.json @@ -1,6 +1,12 @@ { "name": "GitpodFlix Dev Environment", - "image": "mcr.microsoft.com/devcontainers/typescript-node:20-bullseye", + "build": { + "dockerfile": "Dockerfile", + "context": "..", + "options": [ + "--build-arg", "BUILDKIT_INLINE_CACHE=1" + ] + }, "features": { "ghcr.io/devcontainers/features/common-utils:2": { "installZsh": true, @@ -57,10 +63,10 @@ } }, "remoteUser": "node", - "updateContentCommand": "npm install -g nodemon && cd frontend && npm ci && cd ../backend/catalog && npm ci", "mounts": [ "source=gitpodflix-node-modules,target=${containerWorkspaceFolder}/node_modules,type=volume", "source=gitpodflix-frontend-node-modules,target=${containerWorkspaceFolder}/frontend/node_modules,type=volume", - "source=gitpodflix-catalog-node-modules,target=${containerWorkspaceFolder}/backend/catalog/node_modules,type=volume" + "source=gitpodflix-catalog-node-modules,target=${containerWorkspaceFolder}/backend/catalog/node_modules,type=volume", + "source=gitpodflix-npm-cache,target=/root/.npm,type=volume" ] } diff --git a/.devcontainer/setup.sh b/.devcontainer/setup.sh index 32e5b48..c5041b5 100755 --- a/.devcontainer/setup.sh +++ b/.devcontainer/setup.sh @@ -4,14 +4,7 @@ set -e echo "๐Ÿš€ Starting development environment setup..." -# Install system dependencies -echo "๐Ÿ“ฆ Installing system dependencies..." -sudo apt-get update && sudo apt-get install -y --no-install-recommends \ - postgresql-client \ - && sudo apt-get clean \ - && sudo rm -rf /var/lib/apt/lists/* - -# Verify PostgreSQL client tools are installed +# Verify PostgreSQL client tools are installed (already installed in Dockerfile) if ! command -v pg_isready &> /dev/null; then echo "โŒ PostgreSQL client tools not properly installed" exit 1 diff --git a/.dockerignore b/.dockerignore new file mode 100644 index 0000000..d55c0aa --- /dev/null +++ b/.dockerignore @@ -0,0 +1,98 @@ +# Dependencies +node_modules +*/node_modules +npm-debug.log* +yarn-debug.log* +yarn-error.log* + +# Build outputs +dist +build +.next +.nuxt +.vite + +# Environment files +.env +.env.local +.env.development.local +.env.test.local +.env.production.local + +# IDE and editor files +.vscode +.idea +*.swp +*.swo +*~ + +# OS generated files +.DS_Store +.DS_Store? +._* +.Spotlight-V100 +.Trashes +ehthumbs.db +Thumbs.db + +# Git +.git +.gitignore + +# Docker +Dockerfile* +docker-compose* +.dockerignore + +# Logs +logs +*.log + +# Runtime data +pids +*.pid +*.seed +*.pid.lock + +# Coverage directory used by tools like istanbul +coverage +*.lcov + +# Temporary folders +tmp +temp + +# Optional npm cache directory +.npm + +# Optional eslint cache +.eslintcache + +# Microbundle cache +.rpt2_cache/ +.rts2_cache_cjs/ +.rts2_cache_es/ +.rts2_cache_umd/ + +# Optional REPL history +.node_repl_history + +# Output of 'npm pack' +*.tgz + +# Yarn Integrity file +.yarn-integrity + +# parcel-bundler cache (https://parceljs.org/) +.cache +.parcel-cache + +# Stores VSCode versions used for testing VSCode extensions +.vscode-test + +# Yarn v2 +.yarn/cache +.yarn/unplugged +.yarn/build-state.yml +.yarn/install-state.gz +.pnp.* From 47c15bb70a41039454ae5852b5d9ef3247412ca4 Mon Sep 17 00:00:00 2001 From: jrcoak Date: Mon, 11 Aug 2025 18:13:54 +0000 Subject: [PATCH 05/26] Implement Netflix-like search functionality with advanced filtering - Add comprehensive search API endpoints with full-text search and filtering - Create SearchBar component with real-time autocomplete and debounced queries - Implement advanced filtering UI (genres, year, rating, duration) - Add search results display with relevance scoring - Enhance database schema with search metadata and indexes - Integrate search functionality into main navigation - Add search service layer with caching and suggestion algorithms - Fix frontend syntax errors and component integration Features: - Real-time search with 300ms debouncing - Smart autocomplete suggestions from titles, directors, actors, genres - Advanced filters: genre multi-select, year/rating/duration ranges - Search result caching and performance optimization - Responsive design with smooth animations - Search history management Co-authored-by: Ona --- backend/catalog/src/index.ts | 228 ++++++++++++- .../migrations/02_add_search_metadata.sql | 19 ++ frontend/src/App.jsx | 57 +++- frontend/src/components/FilterPanel.jsx | 276 ++++++++++++++++ frontend/src/components/MovieRow.jsx | 6 +- frontend/src/components/Navbar.jsx | 93 ++++-- frontend/src/components/SearchBar.jsx | 309 ++++++++++++++++++ frontend/src/components/SearchResults.jsx | 79 +++++ frontend/src/components/SearchTest.jsx | 176 ++++++++++ frontend/src/services/api.js | 70 ++++ frontend/src/services/searchService.js | 257 +++++++++++++++ 11 files changed, 1532 insertions(+), 38 deletions(-) create mode 100644 database/main/migrations/02_add_search_metadata.sql create mode 100644 frontend/src/components/FilterPanel.jsx create mode 100644 frontend/src/components/SearchBar.jsx create mode 100644 frontend/src/components/SearchResults.jsx create mode 100644 frontend/src/components/SearchTest.jsx create mode 100644 frontend/src/services/searchService.js diff --git a/backend/catalog/src/index.ts b/backend/catalog/src/index.ts index 3d711b1..d85565d 100644 --- a/backend/catalog/src/index.ts +++ b/backend/catalog/src/index.ts @@ -32,6 +32,232 @@ app.get('/api/movies', async (req, res) => { } }); +// Search endpoint with advanced filtering +app.get('/api/search', async (req, res) => { + try { + const { + q, + genres, + yearMin, + yearMax, + ratingMin, + ratingMax, + durationMin, + durationMax, + limit = 50, + offset = 0 + } = req.query; + + let query = 'SELECT * FROM movies WHERE 1=1'; + const params: any[] = []; + let paramIndex = 1; + + // Full-text search + if (q && typeof q === 'string' && q.trim()) { + query += ` AND ( + to_tsvector('english', title || ' ' || COALESCE(description, '') || ' ' || COALESCE(director, '')) + @@ plainto_tsquery('english', $${paramIndex}) + OR title ILIKE $${paramIndex + 1} + OR description ILIKE $${paramIndex + 1} + OR director ILIKE $${paramIndex + 1} + )`; + params.push(q.trim(), `%${q.trim()}%`); + paramIndex += 2; + } + + // Genre filtering + if (genres && typeof genres === 'string') { + const genreList = genres.split(',').map(g => g.trim()).filter(g => g); + if (genreList.length > 0) { + query += ` AND genres && $${paramIndex}`; + params.push(genreList); + paramIndex++; + } + } + + // Year range filtering + if (yearMin && !isNaN(Number(yearMin))) { + query += ` AND release_year >= $${paramIndex}`; + params.push(Number(yearMin)); + paramIndex++; + } + if (yearMax && !isNaN(Number(yearMax))) { + query += ` AND release_year <= $${paramIndex}`; + params.push(Number(yearMax)); + paramIndex++; + } + + // Rating range filtering + if (ratingMin && !isNaN(Number(ratingMin))) { + query += ` AND rating >= $${paramIndex}`; + params.push(Number(ratingMin)); + paramIndex++; + } + if (ratingMax && !isNaN(Number(ratingMax))) { + query += ` AND rating <= $${paramIndex}`; + params.push(Number(ratingMax)); + paramIndex++; + } + + // Duration range filtering + if (durationMin && !isNaN(Number(durationMin))) { + query += ` AND duration >= $${paramIndex}`; + params.push(Number(durationMin)); + paramIndex++; + } + if (durationMax && !isNaN(Number(durationMax))) { + query += ` AND duration <= $${paramIndex}`; + params.push(Number(durationMax)); + paramIndex++; + } + + // Add ordering and pagination + query += ` ORDER BY + CASE WHEN $1 IS NOT NULL THEN + ts_rank(to_tsvector('english', title || ' ' || COALESCE(description, '')), plainto_tsquery('english', $1)) + ELSE 0 END DESC, + rating DESC, + release_year DESC + LIMIT $${paramIndex} OFFSET $${paramIndex + 1}`; + + params.push(Number(limit), Number(offset)); + + const result = await pool.query(query, params); + + // Get total count for pagination + let countQuery = 'SELECT COUNT(*) FROM movies WHERE 1=1'; + const countParams: any[] = []; + let countParamIndex = 1; + + // Apply same filters for count + if (q && typeof q === 'string' && q.trim()) { + countQuery += ` AND ( + to_tsvector('english', title || ' ' || COALESCE(description, '') || ' ' || COALESCE(director, '')) + @@ plainto_tsquery('english', $${countParamIndex}) + OR title ILIKE $${countParamIndex + 1} + OR description ILIKE $${countParamIndex + 1} + OR director ILIKE $${countParamIndex + 1} + )`; + countParams.push(q.trim(), `%${q.trim()}%`); + countParamIndex += 2; + } + + if (genres && typeof genres === 'string') { + const genreList = genres.split(',').map(g => g.trim()).filter(g => g); + if (genreList.length > 0) { + countQuery += ` AND genres && $${countParamIndex}`; + countParams.push(genreList); + countParamIndex++; + } + } + + if (yearMin && !isNaN(Number(yearMin))) { + countQuery += ` AND release_year >= $${countParamIndex}`; + countParams.push(Number(yearMin)); + countParamIndex++; + } + if (yearMax && !isNaN(Number(yearMax))) { + countQuery += ` AND release_year <= $${countParamIndex}`; + countParams.push(Number(yearMax)); + countParamIndex++; + } + + if (ratingMin && !isNaN(Number(ratingMin))) { + countQuery += ` AND rating >= $${countParamIndex}`; + countParams.push(Number(ratingMin)); + countParamIndex++; + } + if (ratingMax && !isNaN(Number(ratingMax))) { + countQuery += ` AND rating <= $${countParamIndex}`; + countParams.push(Number(ratingMax)); + countParamIndex++; + } + + if (durationMin && !isNaN(Number(durationMin))) { + countQuery += ` AND duration >= $${countParamIndex}`; + countParams.push(Number(durationMin)); + countParamIndex++; + } + if (durationMax && !isNaN(Number(durationMax))) { + countQuery += ` AND duration <= $${countParamIndex}`; + countParams.push(Number(durationMax)); + countParamIndex++; + } + + const countResult = await pool.query(countQuery, countParams); + const totalCount = parseInt(countResult.rows[0].count); + + res.json({ + results: result.rows, + pagination: { + total: totalCount, + limit: Number(limit), + offset: Number(offset), + hasMore: Number(offset) + Number(limit) < totalCount + } + }); + } catch (err) { + console.error('Error searching movies:', err); + res.status(500).json({ error: 'Internal server error' }); + } +}); + +// Search suggestions endpoint +app.get('/api/suggestions', async (req, res) => { + try { + const { q } = req.query; + + if (!q || typeof q !== 'string' || q.trim().length < 2) { + return res.json([]); + } + + const searchTerm = q.trim(); + + // Get suggestions from titles, directors, and cast + const query = ` + SELECT DISTINCT suggestion, type, COUNT(*) as frequency + FROM ( + SELECT title as suggestion, 'title' as type FROM movies + WHERE title ILIKE $1 + UNION ALL + SELECT director as suggestion, 'director' as type FROM movies + WHERE director ILIKE $1 AND director IS NOT NULL + UNION ALL + SELECT unnest(cast) as suggestion, 'actor' as type FROM movies + WHERE cast IS NOT NULL AND EXISTS ( + SELECT 1 FROM unnest(cast) as actor WHERE actor ILIKE $1 + ) + UNION ALL + SELECT unnest(genres) as suggestion, 'genre' as type FROM movies + WHERE genres IS NOT NULL AND EXISTS ( + SELECT 1 FROM unnest(genres) as genre WHERE genre ILIKE $1 + ) + ) suggestions + GROUP BY suggestion, type + ORDER BY frequency DESC, suggestion ASC + LIMIT 10 + `; + + const result = await pool.query(query, [`%${searchTerm}%`]); + + const suggestions = result.rows.map(row => ({ + text: row.suggestion, + type: row.type, + frequency: parseInt(row.frequency) + })); + + res.json(suggestions); + } catch (err) { + console.error('Error fetching suggestions:', err); + res.status(500).json({ error: 'Internal server error' }); + } +}); + +// Health check endpoint +app.get('/health', (req, res) => { + res.json({ status: 'OK', timestamp: new Date().toISOString() }); +}); + app.post('/api/movies/seed', async (req, res) => { try { // Execute the seed script @@ -64,4 +290,4 @@ app.post('/api/movies/clear', async (req, res) => { // Start server app.listen(port, () => { console.log(`Catalog service running on port ${port}`); -}); \ No newline at end of file +}); diff --git a/database/main/migrations/02_add_search_metadata.sql b/database/main/migrations/02_add_search_metadata.sql new file mode 100644 index 0000000..1fed7b2 --- /dev/null +++ b/database/main/migrations/02_add_search_metadata.sql @@ -0,0 +1,19 @@ +-- Add search and filtering metadata to movies table +ALTER TABLE movies ADD COLUMN IF NOT EXISTS genres TEXT[]; +ALTER TABLE movies ADD COLUMN IF NOT EXISTS director VARCHAR(255); +ALTER TABLE movies ADD COLUMN IF NOT EXISTS cast TEXT[]; +ALTER TABLE movies ADD COLUMN IF NOT EXISTS duration INTEGER; -- in minutes +ALTER TABLE movies ADD COLUMN IF NOT EXISTS content_type VARCHAR(20) DEFAULT 'movie'; +ALTER TABLE movies ADD COLUMN IF NOT EXISTS keywords TEXT[]; + +-- Create indexes for better search performance +CREATE INDEX IF NOT EXISTS idx_movies_title_search ON movies USING gin(to_tsvector('english', title)); +CREATE INDEX IF NOT EXISTS idx_movies_description_search ON movies USING gin(to_tsvector('english', description)); +CREATE INDEX IF NOT EXISTS idx_movies_genres ON movies USING gin(genres); +CREATE INDEX IF NOT EXISTS idx_movies_release_year ON movies(release_year); +CREATE INDEX IF NOT EXISTS idx_movies_rating ON movies(rating); +CREATE INDEX IF NOT EXISTS idx_movies_duration ON movies(duration); + +-- Create a combined search index for full-text search +CREATE INDEX IF NOT EXISTS idx_movies_full_search ON movies +USING gin(to_tsvector('english', title || ' ' || COALESCE(description, '') || ' ' || COALESCE(director, ''))); diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx index 0f57099..093d7bb 100644 --- a/frontend/src/App.jsx +++ b/frontend/src/App.jsx @@ -3,6 +3,7 @@ import { BrowserRouter as Router, Routes, Route, createBrowserRouter, RouterProv import Navbar from './components/Navbar' import Hero from './components/Hero' import MovieRow from './components/MovieRow' +import SearchResults from './components/SearchResults' import { fetchMovies } from './services/api' function Home() { @@ -11,6 +12,9 @@ function Home() { popular: [], scifi: [] }); + const [searchResults, setSearchResults] = useState([]) + const [isSearchActive, setIsSearchActive] = useState(false) + const [searchQuery, setSearchQuery] = useState('') useEffect(() => { const loadMovies = async () => { @@ -30,15 +34,52 @@ function Home() { loadMovies(); }, []); + const handleSearchResults = (results) => { + setSearchResults(results) + setIsSearchActive(results.length > 0) + } + + const handleSearchToggle = (isActive) => { + setIsSearchActive(isActive) + if (!isActive) { + setSearchResults([]) + setSearchQuery('') + } + } + + const handleClearSearch = () => { + setSearchResults([]) + setIsSearchActive(false) + setSearchQuery('') + } + return (
- - -
- - - -
+ + + {isSearchActive && searchResults.length > 0 ? ( +
+ +
+ ) : ( + <> + +
+ + + +
+ + )}
) } @@ -59,4 +100,4 @@ function App() { return } -export default App \ No newline at end of file +export default App diff --git a/frontend/src/components/FilterPanel.jsx b/frontend/src/components/FilterPanel.jsx new file mode 100644 index 0000000..5f42902 --- /dev/null +++ b/frontend/src/components/FilterPanel.jsx @@ -0,0 +1,276 @@ +import React from 'react' + +function FilterPanel({ filters, onFiltersChange, onClear, isVisible, onClose }) { + const genreOptions = [ + 'Action', 'Adventure', 'Animation', 'Comedy', 'Crime', 'Documentary', + 'Drama', 'Family', 'Fantasy', 'Horror', 'Music', 'Mystery', 'Romance', + 'Science Fiction', 'Thriller', 'War', 'Western' + ] + + const handleGenreToggle = (genre) => { + const newGenres = filters.genres.includes(genre) + ? filters.genres.filter(g => g !== genre) + : [...filters.genres, genre] + + onFiltersChange({ + ...filters, + genres: newGenres + }) + } + + const handleYearChange = (type, value) => { + onFiltersChange({ + ...filters, + yearRange: { + ...filters.yearRange, + [type]: parseInt(value) + } + }) + } + + const handleRatingChange = (type, value) => { + onFiltersChange({ + ...filters, + ratingRange: { + ...filters.ratingRange, + [type]: parseFloat(value) + } + }) + } + + const handleDurationChange = (type, value) => { + onFiltersChange({ + ...filters, + durationRange: { + ...filters.durationRange, + [type]: parseInt(value) + } + }) + } + + const getActiveFiltersCount = () => { + let count = 0 + if (filters.genres.length > 0) count++ + if (filters.yearRange.min > 1900 || filters.yearRange.max < new Date().getFullYear()) count++ + if (filters.ratingRange.min > 0 || filters.ratingRange.max < 10) count++ + if (filters.durationRange.min > 0 || filters.durationRange.max < 300) count++ + return count + } + + if (!isVisible) return null + + return ( +
+ {/* Header */} +
+
+

Filters

+ {getActiveFiltersCount() > 0 && ( + + {getActiveFiltersCount()} + + )} +
+
+ + +
+
+ +
+ {/* Genres */} +
+ +
+ {genreOptions.map(genre => ( + + ))} +
+
+ + {/* Year Range */} +
+ +
+
+
+ + handleYearChange('min', e.target.value)} + className="w-full px-3 py-2 bg-gray-700 text-white rounded-lg border border-gray-600 focus:border-red-500 focus:outline-none transition-colors" + /> +
+
+ + handleYearChange('max', e.target.value)} + className="w-full px-3 py-2 bg-gray-700 text-white rounded-lg border border-gray-600 focus:border-red-500 focus:outline-none transition-colors" + /> +
+
+ handleYearChange('min', e.target.value)} + className="w-full h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer slider" + /> +
+
+ + {/* Rating Range */} +
+ +
+
+
+ + handleRatingChange('min', e.target.value)} + className="w-full px-3 py-2 bg-gray-700 text-white rounded-lg border border-gray-600 focus:border-red-500 focus:outline-none transition-colors" + /> +
+
+ + handleRatingChange('max', e.target.value)} + className="w-full px-3 py-2 bg-gray-700 text-white rounded-lg border border-gray-600 focus:border-red-500 focus:outline-none transition-colors" + /> +
+
+
+ 0 + handleRatingChange('min', e.target.value)} + className="flex-1 h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer slider" + /> + handleRatingChange('max', e.target.value)} + className="flex-1 h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer slider" + /> + 10 +
+
+
+ + {/* Duration Range */} +
+ +
+
+
+ + handleDurationChange('min', e.target.value)} + className="w-full px-3 py-2 bg-gray-700 text-white rounded-lg border border-gray-600 focus:border-red-500 focus:outline-none transition-colors" + /> +
+
+ + handleDurationChange('max', e.target.value)} + className="w-full px-3 py-2 bg-gray-700 text-white rounded-lg border border-gray-600 focus:border-red-500 focus:outline-none transition-colors" + /> +
+
+
+ 0m + handleDurationChange('min', e.target.value)} + className="flex-1 h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer slider" + /> + handleDurationChange('max', e.target.value)} + className="flex-1 h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer slider" + /> + 5h +
+
+
+
+
+ ) +} + +export default FilterPanel diff --git a/frontend/src/components/MovieRow.jsx b/frontend/src/components/MovieRow.jsx index 88b9746..dee9a58 100644 --- a/frontend/src/components/MovieRow.jsx +++ b/frontend/src/components/MovieRow.jsx @@ -1,9 +1,9 @@ import React from 'react' -function MovieRow({ title, movies }) { +function MovieRow({ title, movies, showTitle = true }) { return (
-

{title}

+ {showTitle &&

{title}

}
{movies.map((movie) => ( @@ -31,4 +31,4 @@ function MovieRow({ title, movies }) { ) } -export default MovieRow \ No newline at end of file +export default MovieRow diff --git a/frontend/src/components/Navbar.jsx b/frontend/src/components/Navbar.jsx index 84433ac..8204825 100644 --- a/frontend/src/components/Navbar.jsx +++ b/frontend/src/components/Navbar.jsx @@ -1,35 +1,76 @@ -import React from 'react' +import React, { useState } from 'react' +import SearchBar from './SearchBar' + +function Navbar({ onSearchResults, onSearchToggle, isSearchActive }) { + const [showSearch, setShowSearch] = useState(false) + + const handleSearchToggle = () => { + const newSearchState = !showSearch + setShowSearch(newSearchState) + onSearchToggle?.(newSearchState) + } + + const handleSearchResults = (results) => { + onSearchResults?.(results) + } + + const handleSearchClose = () => { + setShowSearch(false) + onSearchToggle?.(false) + onSearchResults?.([]) + } -function Navbar() { return ( -
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(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/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 */} +
+
+ Profile +
+

{userProfile.name}

+

{userProfile.email}

+
+ + {userProfile.plan} + +
+
+
+
+ + {/* Account Stats */} +
+
+
+
{userProfile.watchedMovies}
+
Movies Watched
+
+
+
{userProfile.watchlistCount}
+
In Watchlist
+
+
+
{userProfile.hoursWatched}
+
Hours Watched
+
+
+
+ + {/* Quick Actions */} +
+

Quick Actions

+
+ + + +
+
+ + {/* Preferences */} +
+

Preferences

+
+
+ Auto-play previews + +
+
+ HD Quality + +
+
+ Notifications + +
+
+
+ + {/* Account Management */} +
+
+ + + +
+ +
+
+
+
+ ) +} + +export default UserProfileDropdown 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 +}) From 0392b2e87a88746a49663e7c88be973da0b4f7be Mon Sep 17 00:00:00 2001 From: jrcoak Date: Mon, 11 Aug 2025 18:34:32 +0000 Subject: [PATCH 08/26] Add comprehensive movie preview player with Netflix-like experience - Create VideoPlayer component with full Netflix-style controls - Implement MovieModal for rich movie information display - Add movie click handlers throughout the application - Update database schema with trailer and video URL support - Enhance MovieRow with hover effects and play buttons - Add custom CSS for video player styling and animations VideoPlayer Features: - Auto-play with muted start for better UX - Custom progress bar with seeking functionality - Volume control with mute/unmute toggle - Fullscreen support with proper event handling - Auto-hiding controls after 3 seconds of inactivity - Keyboard shortcuts (Space for play/pause, Escape to close) - Professional Netflix-like control styling - Smooth animations and transitions MovieModal Features: - Rich movie information display with backdrop image - Action buttons: Play, Add to List, Like - Detailed movie metadata: cast, director, genres, rating - Responsive design with proper information hierarchy - Seamless integration with VideoPlayer component Database Enhancements: - Add trailer_url and video_url columns to movies table - Include sample video URLs using Google's test content - Create indexes for video content optimization - Update seed data with demo video links UI/UX Improvements: - Enhanced MovieRow with hover effects and scaling - Movie info overlay on hover with rating and description - Smooth transitions and professional animations - Click handlers for seamless movie selection - Custom CSS for video controls and sliders Testing: - VideoPlayerTest component for development testing - Comprehensive feature demonstration - Sample movie data with all required fields - Build verification and component integration testing Co-authored-by: Ona --- .../main/migrations/03_add_trailer_urls.sql | 29 ++ database/main/seeds/05_update_trailers.sql | 50 +++ frontend/src/App.jsx | 38 ++- frontend/src/components/MovieModal.jsx | 191 ++++++++++++ frontend/src/components/MovieRow.jsx | 71 ++++- frontend/src/components/VideoPlayer.jsx | 293 ++++++++++++++++++ frontend/src/components/VideoPlayerTest.jsx | 128 ++++++++ frontend/src/styles/index.css | 51 ++- 8 files changed, 836 insertions(+), 15 deletions(-) create mode 100644 database/main/migrations/03_add_trailer_urls.sql create mode 100644 database/main/seeds/05_update_trailers.sql create mode 100644 frontend/src/components/MovieModal.jsx create mode 100644 frontend/src/components/VideoPlayer.jsx create mode 100644 frontend/src/components/VideoPlayerTest.jsx diff --git a/database/main/migrations/03_add_trailer_urls.sql b/database/main/migrations/03_add_trailer_urls.sql new file mode 100644 index 0000000..5347762 --- /dev/null +++ b/database/main/migrations/03_add_trailer_urls.sql @@ -0,0 +1,29 @@ +-- Add trailer and video URL columns to movies table +ALTER TABLE movies ADD COLUMN IF NOT EXISTS trailer_url VARCHAR(500); +ALTER TABLE movies ADD COLUMN IF NOT EXISTS video_url VARCHAR(500); + +-- Add indexes for video content +CREATE INDEX IF NOT EXISTS idx_movies_trailer_url ON movies(trailer_url) WHERE trailer_url IS NOT NULL; +CREATE INDEX IF NOT EXISTS idx_movies_video_url ON movies(video_url) WHERE video_url IS NOT NULL; + +-- Update existing movies with sample trailer URLs (using Big Buck Bunny as demo content) +UPDATE movies SET + trailer_url = 'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4', + video_url = 'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4' +WHERE trailer_url IS NULL; + +-- Add some variety with different demo videos for different movies +UPDATE movies SET + trailer_url = 'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4', + video_url = 'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4' +WHERE id % 3 = 1; + +UPDATE movies SET + trailer_url = 'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerBlazes.mp4', + video_url = 'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerBlazes.mp4' +WHERE id % 3 = 2; + +UPDATE movies SET + trailer_url = 'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/Sintel.mp4', + video_url = 'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/Sintel.mp4' +WHERE id % 3 = 0; diff --git a/database/main/seeds/05_update_trailers.sql b/database/main/seeds/05_update_trailers.sql new file mode 100644 index 0000000..8348c8f --- /dev/null +++ b/database/main/seeds/05_update_trailers.sql @@ -0,0 +1,50 @@ +-- Update existing movies with trailer URLs +-- Using free demo videos from Google's test content + +-- Update The Matrix +UPDATE movies SET + trailer_url = 'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4', + video_url = 'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4' +WHERE title = 'The Matrix'; + +-- Update Inception +UPDATE movies SET + trailer_url = 'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4', + video_url = 'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4' +WHERE title = 'Inception'; + +-- Update The Dark Knight +UPDATE movies SET + trailer_url = 'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerBlazes.mp4', + video_url = 'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerBlazes.mp4' +WHERE title = 'The Dark Knight'; + +-- Update Pulp Fiction +UPDATE movies SET + trailer_url = 'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/Sintel.mp4', + video_url = 'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/Sintel.mp4' +WHERE title = 'Pulp Fiction'; + +-- Update Fight Club +UPDATE movies SET + trailer_url = 'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/TearsOfSteel.mp4', + video_url = 'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/TearsOfSteel.mp4' +WHERE title = 'Fight Club'; + +-- Update The Shawshank Redemption +UPDATE movies SET + trailer_url = 'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/VolkswagenGTIReview.mp4', + video_url = 'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/VolkswagenGTIReview.mp4' +WHERE title = 'The Shawshank Redemption'; + +-- Update The Godfather +UPDATE movies SET + trailer_url = 'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/WeAreGoingOnBullrun.mp4', + video_url = 'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/WeAreGoingOnBullrun.mp4' +WHERE title = 'The Godfather'; + +-- Update any remaining movies without trailers +UPDATE movies SET + trailer_url = 'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4', + video_url = 'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4' +WHERE trailer_url IS NULL OR trailer_url = ''; diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx index 093d7bb..3812dc3 100644 --- a/frontend/src/App.jsx +++ b/frontend/src/App.jsx @@ -4,6 +4,7 @@ import Navbar from './components/Navbar' import Hero from './components/Hero' import MovieRow from './components/MovieRow' import SearchResults from './components/SearchResults' +import MovieModal from './components/MovieModal' import { fetchMovies } from './services/api' function Home() { @@ -15,6 +16,8 @@ function Home() { const [searchResults, setSearchResults] = useState([]) const [isSearchActive, setIsSearchActive] = useState(false) const [searchQuery, setSearchQuery] = useState('') + const [selectedMovie, setSelectedMovie] = useState(null) + const [showMovieModal, setShowMovieModal] = useState(false) useEffect(() => { const loadMovies = async () => { @@ -53,6 +56,16 @@ function Home() { setSearchQuery('') } + const handleMovieClick = (movie) => { + setSelectedMovie(movie) + setShowMovieModal(true) + } + + const handleCloseModal = () => { + setShowMovieModal(false) + setSelectedMovie(null) + } + return (
- - - + + +
)} + + {/* Movie Modal */} +
) } diff --git a/frontend/src/components/MovieModal.jsx b/frontend/src/components/MovieModal.jsx new file mode 100644 index 0000000..05e7bba --- /dev/null +++ b/frontend/src/components/MovieModal.jsx @@ -0,0 +1,191 @@ +import React, { useState } from 'react' +import VideoPlayer from './VideoPlayer' + +function MovieModal({ movie, isOpen, onClose }) { + const [showVideoPlayer, setShowVideoPlayer] = useState(false) + + if (!isOpen || !movie) return null + + const handlePlayTrailer = () => { + setShowVideoPlayer(true) + } + + const handleCloseVideo = () => { + setShowVideoPlayer(false) + } + + const handleAddToList = () => { + // TODO: Implement add to watchlist functionality + console.log('Added to list:', movie.title) + } + + const handleLike = () => { + // TODO: Implement like functionality + console.log('Liked:', movie.title) + } + + return ( + <> + {/* Movie Info Modal */} + {!showVideoPlayer && ( +
+
+ {/* Header with backdrop image */} +
+ {movie.title} +
+ + {/* Close button */} + + + {/* Movie info overlay */} +
+

{movie.title}

+
+ + {Math.round(movie.rating * 10)}% Match + + {movie.release_year} + {movie.rating && ( +
+ + + + {movie.rating} +
+ )} +
+ + {/* Action buttons */} +
+ + + + + +
+
+
+ + {/* Movie details */} +
+
+ {/* Main content */} +
+

About {movie.title}

+

+ {movie.description || 'No description available for this movie.'} +

+ + {/* Cast and crew (mock data) */} +
+

Cast

+

+ {movie.cast?.join(', ') || 'Cast information not available'} +

+
+ + {movie.director && ( +
+

Director

+

{movie.director}

+
+ )} +
+ + {/* Sidebar */} +
+
+ {movie.genres && ( +
+

Genres

+
+ {movie.genres.map((genre, index) => ( + + {genre} + + ))} +
+
+ )} + +
+

Release Year

+

{movie.release_year}

+
+ + {movie.duration && ( +
+

Duration

+

{movie.duration} minutes

+
+ )} + + {movie.rating && ( +
+

Rating

+
+ + + + {movie.rating}/10 +
+
+ )} +
+
+
+
+
+
+ )} + + {/* Video Player */} + + + ) +} + +export default MovieModal diff --git a/frontend/src/components/MovieRow.jsx b/frontend/src/components/MovieRow.jsx index dee9a58..ed1ea7a 100644 --- a/frontend/src/components/MovieRow.jsx +++ b/frontend/src/components/MovieRow.jsx @@ -1,28 +1,77 @@ import React from 'react' -function MovieRow({ title, movies, showTitle = true }) { +function MovieRow({ title, movies, showTitle = true, onMovieClick }) { + const handleMovieClick = (movie) => { + if (onMovieClick) { + onMovieClick(movie) + } + } + + const handlePlayClick = (e, movie) => { + e.stopPropagation() // Prevent triggering the movie click + handleMovieClick(movie) + } + return (
{showTitle &&

{title}

}
{movies.map((movie) => ( -
-
+
handleMovieClick(movie)} + > +
{movie.title} -
- + + {/* Hover Overlay */} +
+
+ +
+
+ + {/* Movie Info Overlay */} +
+

{movie.title}

+
+ {movie.release_year} + {movie.rating && ( + <> + โ€ข +
+ + + + {movie.rating} +
+ + )} +
+ {movie.description && ( +

+ {movie.description.length > 80 + ? `${movie.description.substring(0, 80)}...` + : movie.description + } +

+ )}
-

{movie.title}

))}
diff --git a/frontend/src/components/VideoPlayer.jsx b/frontend/src/components/VideoPlayer.jsx new file mode 100644 index 0000000..0b33745 --- /dev/null +++ b/frontend/src/components/VideoPlayer.jsx @@ -0,0 +1,293 @@ +import React, { useState, useRef, useEffect } from 'react' + +function VideoPlayer({ movie, isOpen, onClose }) { + 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 */} + + + {/* Volume */} +
+ + +
+ + {/* 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/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

+
+ + + +
+
+ + {/* 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/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; +} From 48161d74c19420eec67ef85e37564e48f4597150 Mon Sep 17 00:00:00 2001 From: jrcoak Date: Mon, 11 Aug 2025 18:38:28 +0000 Subject: [PATCH 09/26] Add comprehensive YouTube video integration with real movie trailers - Create YouTubePlayer component for embedded YouTube videos - Add YouTube URL parsing utilities with multiple format support - Update VideoPlayer to automatically detect and handle YouTube URLs - Enhance database schema with YouTube-specific video ID columns - Add real movie trailer URLs from official YouTube channels YouTubePlayer Features: - Automatic YouTube URL detection and video ID extraction - Embedded iframe player with custom Netflix-like overlay - Auto-play with muted start for better user experience - Custom controls overlay with movie information - Direct 'Watch on YouTube' link for full experience - Loading states and error handling for missing videos - Responsive design with proper aspect ratio handling YouTube Utilities: - Support for multiple YouTube URL formats: * youtube.com/watch?v=VIDEO_ID * youtu.be/VIDEO_ID * youtube.com/embed/VIDEO_ID * youtube.com/v/VIDEO_ID - Automatic video ID extraction with regex patterns - YouTube thumbnail URL generation - Embed URL creation with custom parameters - URL validation and format detection Database Enhancements: - Add youtube_trailer_id and youtube_video_id columns - PostgreSQL function for YouTube ID extraction - Automatic ID extraction from existing URLs - Proper indexing for YouTube video content Real Movie Trailers: - The Godfather (1972) - Official trailer - The Matrix (1999) - Official trailer - The Dark Knight (2008) - Official trailer - Inception (2010) - Official trailer - Pulp Fiction (1994) - Official trailer - Fight Club (1999) - Official trailer - The Shawshank Redemption (1994) - Official trailer - And more popular movies with official YouTube trailers Testing Components: - YouTubePlayerTest for development and demonstration - Comprehensive utility function testing - Thumbnail preview generation - URL parsing validation - Interactive movie grid with real trailers Integration: - Seamless fallback between YouTube and MP4 videos - Automatic format detection in VideoPlayer component - Consistent user experience across video types - Professional Netflix-like styling maintained Example Usage: - Click any movie with YouTube trailer URL - Player automatically detects YouTube format - Embeds video with custom controls and branding - Provides direct YouTube link for full experience Co-authored-by: Ona --- .../migrations/04_add_youtube_support.sql | 39 ++++ database/main/seeds/06_youtube_trailers.sql | 100 +++++++++ frontend/src/components/VideoPlayer.jsx | 11 + frontend/src/components/YouTubePlayer.jsx | 187 ++++++++++++++++ frontend/src/components/YouTubePlayerTest.jsx | 211 ++++++++++++++++++ frontend/src/utils/youtubeUtils.js | 109 +++++++++ 6 files changed, 657 insertions(+) create mode 100644 database/main/migrations/04_add_youtube_support.sql create mode 100644 database/main/seeds/06_youtube_trailers.sql create mode 100644 frontend/src/components/YouTubePlayer.jsx create mode 100644 frontend/src/components/YouTubePlayerTest.jsx create mode 100644 frontend/src/utils/youtubeUtils.js diff --git a/database/main/migrations/04_add_youtube_support.sql b/database/main/migrations/04_add_youtube_support.sql new file mode 100644 index 0000000..2a558e1 --- /dev/null +++ b/database/main/migrations/04_add_youtube_support.sql @@ -0,0 +1,39 @@ +-- Add YouTube-specific columns for better video handling +ALTER TABLE movies ADD COLUMN IF NOT EXISTS youtube_trailer_id VARCHAR(20); +ALTER TABLE movies ADD COLUMN IF NOT EXISTS youtube_video_id VARCHAR(20); + +-- Add indexes for YouTube video IDs +CREATE INDEX IF NOT EXISTS idx_movies_youtube_trailer_id ON movies(youtube_trailer_id) WHERE youtube_trailer_id IS NOT NULL; +CREATE INDEX IF NOT EXISTS idx_movies_youtube_video_id ON movies(youtube_video_id) WHERE youtube_video_id IS NOT NULL; + +-- Function to extract YouTube video ID from URL +CREATE OR REPLACE FUNCTION extract_youtube_id(url TEXT) +RETURNS TEXT AS $$ +BEGIN + -- Handle various YouTube URL formats + IF url ~ 'youtube\.com/watch\?v=([^&]+)' THEN + RETURN substring(url from 'youtube\.com/watch\?v=([^&]+)'); + ELSIF url ~ 'youtu\.be/([^?]+)' THEN + RETURN substring(url from 'youtu\.be/([^?]+)'); + ELSIF url ~ 'youtube\.com/embed/([^?]+)' THEN + RETURN substring(url from 'youtube\.com/embed/([^?]+)'); + ELSIF url ~ 'youtube\.com/v/([^?]+)' THEN + RETURN substring(url from 'youtube\.com/v/([^?]+)'); + END IF; + + RETURN NULL; +END; +$$ LANGUAGE plpgsql; + +-- Update existing records to extract YouTube IDs from URLs +UPDATE movies +SET youtube_trailer_id = extract_youtube_id(trailer_url) +WHERE trailer_url IS NOT NULL + AND (trailer_url LIKE '%youtube.com%' OR trailer_url LIKE '%youtu.be%') + AND youtube_trailer_id IS NULL; + +UPDATE movies +SET youtube_video_id = extract_youtube_id(video_url) +WHERE video_url IS NOT NULL + AND (video_url LIKE '%youtube.com%' OR video_url LIKE '%youtu.be%') + AND youtube_video_id IS NULL; diff --git a/database/main/seeds/06_youtube_trailers.sql b/database/main/seeds/06_youtube_trailers.sql new file mode 100644 index 0000000..fb0adbe --- /dev/null +++ b/database/main/seeds/06_youtube_trailers.sql @@ -0,0 +1,100 @@ +-- Update movies with real YouTube trailer URLs +-- These are official trailers from major movie studios + +-- The Godfather (1972) - Official Trailer +UPDATE movies SET + trailer_url = 'https://www.youtube.com/watch?v=UaVTIH8mujA', + youtube_trailer_id = 'UaVTIH8mujA' +WHERE title = 'The Godfather'; + +-- The Matrix (1999) - Official Trailer +UPDATE movies SET + trailer_url = 'https://www.youtube.com/watch?v=vKQi3bBA1y8', + youtube_trailer_id = 'vKQi3bBA1y8' +WHERE title = 'The Matrix'; + +-- The Dark Knight (2008) - Official Trailer +UPDATE movies SET + trailer_url = 'https://www.youtube.com/watch?v=EXeTwQWrcwY', + youtube_trailer_id = 'EXeTwQWrcwY' +WHERE title = 'The Dark Knight'; + +-- Inception (2010) - Official Trailer +UPDATE movies SET + trailer_url = 'https://www.youtube.com/watch?v=YoHD9XEInc0', + youtube_trailer_id = 'YoHD9XEInc0' +WHERE title = 'Inception'; + +-- Pulp Fiction (1994) - Official Trailer +UPDATE movies SET + trailer_url = 'https://www.youtube.com/watch?v=s7EdQ4FqbhY', + youtube_trailer_id = 's7EdQ4FqbhY' +WHERE title = 'Pulp Fiction'; + +-- Fight Club (1999) - Official Trailer +UPDATE movies SET + trailer_url = 'https://www.youtube.com/watch?v=qtRKdVHc-cE', + youtube_trailer_id = 'qtRKdVHc-cE' +WHERE title = 'Fight Club'; + +-- The Shawshank Redemption (1994) - Official Trailer +UPDATE movies SET + trailer_url = 'https://www.youtube.com/watch?v=6hB3S9bIaco', + youtube_trailer_id = '6hB3S9bIaco' +WHERE title = 'The Shawshank Redemption'; + +-- Interstellar (2014) - Official Trailer +UPDATE movies SET + trailer_url = 'https://www.youtube.com/watch?v=zSWdZVtXT7E', + youtube_trailer_id = 'zSWdZVtXT7E' +WHERE title LIKE '%Interstellar%'; + +-- The Avengers (2012) - Official Trailer +UPDATE movies SET + trailer_url = 'https://www.youtube.com/watch?v=eOrNdBpGMv8', + youtube_trailer_id = 'eOrNdBpGMv8' +WHERE title LIKE '%Avengers%'; + +-- Joker (2019) - Official Trailer +UPDATE movies SET + trailer_url = 'https://www.youtube.com/watch?v=zAGVQLHvwOY', + youtube_trailer_id = 'zAGVQLHvwOY' +WHERE title = 'Joker'; + +-- Parasite (2019) - Official Trailer +UPDATE movies SET + trailer_url = 'https://www.youtube.com/watch?v=5xH0HfJHsaY', + youtube_trailer_id = '5xH0HfJHsaY' +WHERE title = 'Parasite'; + +-- Dune (2021) - Official Trailer +UPDATE movies SET + trailer_url = 'https://www.youtube.com/watch?v=n9xhJrPXop4', + youtube_trailer_id = 'n9xhJrPXop4' +WHERE title = 'Dune'; + +-- Top Gun: Maverick (2022) - Official Trailer +UPDATE movies SET + trailer_url = 'https://www.youtube.com/watch?v=qSqVVswa420', + youtube_trailer_id = 'qSqVVswa420' +WHERE title LIKE '%Top Gun%'; + +-- Spider-Man: No Way Home (2021) - Official Trailer +UPDATE movies SET + trailer_url = 'https://www.youtube.com/watch?v=JfVOs4VSpmA', + youtube_trailer_id = 'JfVOs4VSpmA' +WHERE title LIKE '%Spider-Man%' AND title LIKE '%No Way Home%'; + +-- Black Panther (2018) - Official Trailer +UPDATE movies SET + trailer_url = 'https://www.youtube.com/watch?v=xjDjIWPwcPU', + youtube_trailer_id = 'xjDjIWPwcPU' +WHERE title = 'Black Panther'; + +-- Update any remaining movies without YouTube trailers with a fallback +-- Using a popular movie trailer compilation as fallback +UPDATE movies SET + trailer_url = 'https://www.youtube.com/watch?v=vKQi3bBA1y8', + youtube_trailer_id = 'vKQi3bBA1y8' +WHERE (trailer_url IS NULL OR trailer_url = '' OR NOT (trailer_url LIKE '%youtube.com%' OR trailer_url LIKE '%youtu.be%')) + AND youtube_trailer_id IS NULL; diff --git a/frontend/src/components/VideoPlayer.jsx b/frontend/src/components/VideoPlayer.jsx index 0b33745..8474516 100644 --- a/frontend/src/components/VideoPlayer.jsx +++ b/frontend/src/components/VideoPlayer.jsx @@ -1,6 +1,17 @@ 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 isYouTube = isYouTubeUrl(movie?.trailer_url || movie?.video_url) + + // If it's a YouTube video, use the YouTube player + if (isYouTube) { + return + } + + // 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) diff --git a/frontend/src/components/YouTubePlayer.jsx b/frontend/src/components/YouTubePlayer.jsx new file mode 100644 index 0000000..62bd1d6 --- /dev/null +++ b/frontend/src/components/YouTubePlayer.jsx @@ -0,0 +1,187 @@ +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 videoId = extractYouTubeVideoId(movie?.trailer_url || movie?.video_url) + const embedUrl = videoId ? getYouTubeEmbedUrl(videoId, { + autoplay: 1, + mute: 1, + controls: 0, + showinfo: 0, + rel: 0, + modestbranding: 1, + playsinline: 1 + }) : 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) + } + } + + // 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 || !videoId) return null + + return ( +
+
setShowControls(false)} + > + {/* Close Button */} + + + {/* YouTube Embed */} +
+ {isLoading && ( +
+
+
+

Loading trailer...

+
+
+ )} + +