(null);
+
+ // Drag to scroll logic state
+ const [isDragging, setIsDragging] = useState(false);
+
+ // Drag to scroll logic state refs
+ const isDown = useRef(false);
+ const startX = useRef(0);
+ const scrollLeft = useRef(0);
+
+ useEffect(() => {
+ const fetchMovies = async () => {
+ // If manual movies are provided (e.g. History, My List), use them directly
+ if (manualMovies) {
+ let result = manualMovies;
+ if (limit && result.length > 0) {
+ result = result.slice(0, limit);
+ }
+ setMovies(result);
+ setLoading(false);
+ return;
+ }
+
+ try {
+ let endpoint = '';
+ if (searchQuery) { // ... unchanged fetch logic
+ endpoint = `/api/videos/search?q=${encodeURIComponent(searchQuery)}`;
+ } else if (category && category !== 'home') {
+ endpoint = `/api/videos/home?category=${category}`;
+ } else {
+ endpoint = '/api/videos/home';
+ }
+
+ const res = await fetch(endpoint);
+ const data = await res.json();
+ let result = data || [];
+
+ // Search API usually returns unfiltered list, so we might need to be careful.
+ // But generally it returns an array of movies.
+
+ if (limit && result.length > 0) {
+ result = result.slice(0, limit);
+ }
+ setMovies(result);
+ } catch (err) {
+ console.error(`Failed to fetch movies for row ${title}`, err);
+ } finally {
+ setLoading(false);
+ }
+ };
+ fetchMovies();
+ }, [category, searchQuery, limit, manualMovies]);
+
+ const scroll = (direction: 'left' | 'right') => {
+ if (rowRef.current) {
+ const { current } = rowRef;
+ const scrollAmount = direction === 'left' ? -current.clientWidth * 0.8 : current.clientWidth * 0.8;
+ current.scrollBy({ left: scrollAmount, behavior: 'smooth' });
+ }
+ };
+
+ if (loading) return (
+
+
+ {layout === 'row' ? (
+
+ {[...Array(6)].map((_, i) => (
+
+ ))}
+
+ ) : (
+
+ {[...Array(10)].map((_, i) => (
+
+ ))}
+
+ )}
+
+
+
+ {title}
+
+ Xem tất cả
+
+
+
+ {layout === 'row' ? (
+
+
+
+
+ {movies.map((movie) => (
+
+
+
+
+
+ {movie.quality && (
+
+ {movie.quality}
+
+ )}
+ {movie.lang && (
+
+ {movie.lang}
+
+ )}
+
+ {movie.time && (
+
+ {movie.time}
+
+ )}
+
+
+
+ {movie.title}
+
+
+
+ ))}
+
+
+
+
+ ) : (
+
+ {movies.map((movie) => (
+
+
+
+
+
+ {movie.quality && (
+
+ {movie.quality}
+
+ )}
+
+
+
+
+ {movie.title}
+
+
+
+ ))}
+
+ )}
+
+
setIsOpen(false)}
+ />
+
+
+
+
Appearance
+
+
+
+
+
+
Choose Theme
+
+ {themes.map((theme) => (
+
+ ))}
+
+
+
+
+
+ Switching themes completely changes the layout and browsing experience.
+
+
+
+
+
+ )}
+
+ );
+};
diff --git a/frontend-react/src/constants.ts b/frontend-react/src/constants.ts
new file mode 100644
index 0000000..30180f9
--- /dev/null
+++ b/frontend-react/src/constants.ts
@@ -0,0 +1,14 @@
+import { Home, Film, Tv, PlayCircle, Heart, Folder } from 'lucide-react';
+
+export const CATEGORIES = [
+ { id: 'phim-le', name: 'Phim Lẻ', path: '?category=phim-le', icon: Film },
+ { id: 'phim-bo', name: 'Phim Bá»™', path: '?category=phim-bo', icon: Tv },
+ { id: 'hoat-hinh', name: 'Hoạt Hình', path: '?category=hoat-hinh', icon: PlayCircle },
+ { id: 'tv-shows', name: 'TV Shows', path: '?category=tv-shows', icon: Folder },
+ { id: 'my-list', name: 'My List', path: '/my-list', icon: Heart },
+];
+
+export const NAV_ITEMS = [
+ { name: 'Home', path: '/', icon: Home },
+ ...CATEGORIES.map(cat => ({ name: cat.name, path: cat.path, icon: cat.icon })),
+];
diff --git a/frontend-react/src/context/ThemeContext.tsx b/frontend-react/src/context/ThemeContext.tsx
new file mode 100644
index 0000000..9fe6e4e
--- /dev/null
+++ b/frontend-react/src/context/ThemeContext.tsx
@@ -0,0 +1,43 @@
+import React, { createContext, useContext, useState, useEffect } from 'react';
+import type { ThemeName } from '../types/Theme';
+
+// We will import the actual theme objects here once they are created
+// import { netflixTheme } from '../themes/netflix';
+// import { appleTheme } from '../themes/apple';
+
+interface ThemeContextType {
+ currentTheme: ThemeName;
+ setTheme: (theme: ThemeName) => void;
+
+ // For now, we'll just store the ID. Later we will expose the full theme object
+ // theme: Theme;
+}
+
+const ThemeContext = createContext
(undefined);
+
+export const ThemeProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
+ const [currentTheme, setCurrentTheme] = useState(() => {
+ const saved = localStorage.getItem('app-theme');
+ return (saved as ThemeName) || 'netflix';
+ });
+
+ useEffect(() => {
+ localStorage.setItem('app-theme', currentTheme);
+ // We can also set a class on the body if global styles need it
+ document.body.className = `theme-${currentTheme}`;
+ }, [currentTheme]);
+
+ return (
+
+ {children}
+
+ );
+};
+
+export const useTheme = () => {
+ const context = useContext(ThemeContext);
+ if (context === undefined) {
+ throw new Error('useTheme must be used within a ThemeProvider');
+ }
+ return context;
+};
diff --git a/frontend-react/src/hooks/useMovies.ts b/frontend-react/src/hooks/useMovies.ts
new file mode 100644
index 0000000..8555a1d
--- /dev/null
+++ b/frontend-react/src/hooks/useMovies.ts
@@ -0,0 +1,49 @@
+import { useState, useEffect } from 'react';
+import { useSearchParams } from 'react-router-dom';
+import type { Movie } from '../types';
+
+export const useMovies = () => {
+ const [movies, setMovies] = useState([]);
+ const [loading, setLoading] = useState(true);
+ const [searchParams] = useSearchParams();
+ const query = searchParams.get('q');
+ const category = searchParams.get('category');
+
+ useEffect(() => {
+ const fetchMovies = async () => {
+ setLoading(true);
+ try {
+ let endpoint = '/api/videos/home';
+ if (query) {
+ endpoint = `/api/videos/search?q=${query}`;
+ } else if (category && category !== 'home') {
+ endpoint = `/api/videos/home?category=${category}`;
+ }
+
+ const res = await fetch(endpoint);
+ if (!res.ok) {
+ throw new Error(`HTTP error! status: ${res.status}`);
+ }
+ const data = await res.json();
+ setMovies(data || []);
+ } catch (err) {
+ console.error("Failed to fetch movies", err);
+ } finally {
+ setLoading(false);
+ }
+ };
+
+ fetchMovies();
+ }, [query, category]);
+
+ const getTitle = () => {
+ if (query) return `Results for "${query}"`;
+ if (category === 'phim-le') return 'Movies';
+ if (category === 'phim-bo') return 'Series';
+ if (category === 'hoat-hinh') return 'Cartoons';
+ if (category === 'tv-shows') return 'TV Shows';
+ return 'Latest Movies';
+ };
+
+ return { movies, loading, title: getTitle() };
+};
diff --git a/frontend-react/src/hooks/useMyList.ts b/frontend-react/src/hooks/useMyList.ts
new file mode 100644
index 0000000..2cb2f49
--- /dev/null
+++ b/frontend-react/src/hooks/useMyList.ts
@@ -0,0 +1,61 @@
+import { useState, useEffect } from 'react';
+import type { Movie } from '../types';
+
+interface MyListState {
+ saved: Movie[];
+ history: Movie[];
+}
+
+export const useMyList = () => {
+ const [list, setList] = useState(() => {
+ const saved = localStorage.getItem('streamflow_mylist');
+ return saved ? JSON.parse(saved) : { saved: [], history: [] };
+ });
+
+ useEffect(() => {
+ localStorage.setItem('streamflow_mylist', JSON.stringify(list));
+ }, [list]);
+
+ const addToList = (movie: Movie) => {
+ setList(prev => {
+ if (prev.saved.some(m => m.id === movie.id)) return prev;
+ return { ...prev, saved: [movie, ...prev.saved] };
+ });
+ };
+
+ const removeFromList = (movieId: string) => {
+ setList(prev => ({
+ ...prev,
+ saved: prev.saved.filter(m => m.id !== movieId)
+ }));
+ };
+
+ const addToHistory = (movie: Movie) => {
+ setList(prev => {
+ const filtered = prev.history.filter(m => m.id !== movie.id);
+
+ // Normalize Category to ensure it works with Recommendations
+ let cat = movie.category?.toLowerCase() || 'phim-le';
+ if (cat === 'movies') cat = 'phim-le';
+ if (cat === 'series') cat = 'phim-bo';
+ if (cat === 'animation') cat = 'hoat-hinh';
+ if (cat === 'cartoon') cat = 'hoat-hinh';
+ if (cat === 'tv') cat = 'tv-shows';
+
+ const normalizedMovie = { ...movie, category: cat };
+
+ return { ...prev, history: [normalizedMovie, ...filtered].slice(0, 50) };
+ });
+ };
+
+ const isSaved = (movieId: string) => list.saved.some(m => m.id === movieId);
+
+ return {
+ savedMovies: list.saved,
+ watchHistory: list.history,
+ addToList,
+ removeFromList,
+ addToHistory,
+ isSaved
+ };
+};
diff --git a/frontend-react/src/hooks/useSmartRecommendations.ts b/frontend-react/src/hooks/useSmartRecommendations.ts
new file mode 100644
index 0000000..10ce297
--- /dev/null
+++ b/frontend-react/src/hooks/useSmartRecommendations.ts
@@ -0,0 +1,64 @@
+import { useMemo } from 'react';
+import type { Movie } from '../types';
+import { CATEGORIES } from '../constants';
+
+interface Recommendation {
+ id: string;
+ title: string;
+ category: string;
+ reason: string;
+}
+
+export const useSmartRecommendations = (history: Movie[]): Recommendation[] => {
+ return useMemo(() => {
+ if (!history || history.length === 0) return [];
+
+ // Pre-defined mapping for data normalization
+ const NORMALIZE_MAP: Record = {
+ 'movies': 'phim-le',
+ 'phim-le': 'phim-le',
+ 'series': 'phim-bo',
+ 'phim-bo': 'phim-bo',
+ 'cartoon': 'hoat-hinh',
+ 'animation': 'hoat-hinh',
+ 'hoat-hinh': 'hoat-hinh',
+ 'tv-shows': 'tv-shows',
+ 'tv': 'tv-shows',
+ 'shows': 'tv-shows'
+ };
+
+ // 1. Frequency Map of Categories
+ const categoryCounts: Record = {};
+ history.forEach(movie => {
+ if (movie.category) {
+ const raw = movie.category.toLowerCase();
+ const normalized = NORMALIZE_MAP[raw] || (CATEGORIES.some(c => c.id === raw) ? raw : 'phim-le');
+
+ if (CATEGORIES.some(c => c.id === normalized)) {
+ categoryCounts[normalized] = (categoryCounts[normalized] || 0) + 1;
+ }
+ }
+ });
+
+ // 2. Sort by frequency
+ const sortedCategories = Object.entries(categoryCounts)
+ .sort(([, a], [, b]) => b - a)
+ .map(([cat]) => cat);
+
+ // 3. Get Top 2 Categories
+ const topCategories = sortedCategories.slice(0, 2);
+
+ // 4. Map to Recommendation Objects
+ const recommendations: Recommendation[] = topCategories.map(catSlug => {
+ const catName = CATEGORIES.find(c => c.id === catSlug)?.name || 'Phim';
+ return {
+ id: `rec-${catSlug}`,
+ title: `Gợi ý từ ${catName}`,
+ category: catSlug,
+ reason: `Based on your interest in ${catName}`
+ };
+ });
+
+ return recommendations;
+ }, [history]);
+};
diff --git a/frontend-react/src/hooks/useWatchMovie.ts b/frontend-react/src/hooks/useWatchMovie.ts
new file mode 100644
index 0000000..d906a13
--- /dev/null
+++ b/frontend-react/src/hooks/useWatchMovie.ts
@@ -0,0 +1,93 @@
+import { useState, useEffect, useRef } from 'react';
+import Hls from 'hls.js';
+import type { MovieDetail, VideoSource } from '../types';
+
+export const useWatchMovie = (slug: string | undefined, episode: string | undefined) => {
+ const videoRef = useRef(null);
+ const [movie, setMovie] = useState(null);
+ const [source, setSource] = useState(null);
+ const [loading, setLoading] = useState(true);
+ const [currentEpisode, setCurrentEpisode] = useState(parseInt(episode || '1'));
+
+ useEffect(() => {
+ if (!slug) return;
+ const fetchDetails = async () => {
+ try {
+ const res = await fetch(`/api/videos/${slug}`);
+ if (!res.ok) throw new Error('Failed to fetch details');
+ const data = await res.json();
+ setMovie(data);
+ } catch (err) {
+ console.error("Failed to fetch details", err);
+ }
+ };
+ fetchDetails();
+ }, [slug]);
+
+ useEffect(() => {
+ if (!movie) return;
+
+ const fetchStream = async () => {
+ setLoading(true);
+ try {
+ const ep = movie.episodes?.find(e => e.number === currentEpisode);
+
+ if (ep && (ep.url.includes('.m3u8') || ep.url.includes('index.m3u8'))) {
+ setSource({
+ stream_url: ep.url,
+ resolution: 'HD',
+ format_id: 'hls'
+ });
+ setLoading(false);
+ return;
+ }
+
+ const targetUrl = ep ? ep.url : `https://phimmoichill.network/xem-phim/${slug}/tap-${currentEpisode}`;
+
+ const res = await fetch(`/api/extract`, {
+ method: 'POST',
+ headers: { 'Content-Type': 'application/json' },
+ body: JSON.stringify({ url: targetUrl }) // Changed to JSON payload
+ });
+
+ if (!res.ok) throw new Error('Failed to extract');
+ const data = await res.json();
+ setSource(data);
+ } catch (err) {
+ console.error("Failed to extract stream", err);
+ } finally {
+ setLoading(false);
+ }
+ };
+
+ fetchStream();
+ }, [movie, currentEpisode, slug]);
+
+ useEffect(() => {
+ if (source && videoRef.current) {
+ if (Hls.isSupported()) {
+ const hls = new Hls();
+ hls.loadSource(source.stream_url);
+ hls.attachMedia(videoRef.current);
+ hls.on(Hls.Events.MANIFEST_PARSED, () => {
+ videoRef.current?.play();
+ });
+ return () => {
+ hls.destroy();
+ };
+ } else if (videoRef.current.canPlayType('application/vnd.apple.mpegurl')) {
+ videoRef.current.src = source.stream_url;
+ videoRef.current.play();
+ }
+ }
+ }, [source]);
+
+ return {
+ movie,
+ source,
+ loading,
+ currentEpisode,
+ setCurrentEpisode,
+ videoRef
+ };
+};
diff --git a/frontend-react/src/index.css b/frontend-react/src/index.css
new file mode 100644
index 0000000..dd8af38
--- /dev/null
+++ b/frontend-react/src/index.css
@@ -0,0 +1,22 @@
+@import "tailwindcss";
+
+:root {
+ font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+ line-height: 1.5;
+ font-weight: 400;
+
+ color-scheme: light dark;
+ color: rgba(255, 255, 255, 0.87);
+ background-color: #000000;
+
+ font-synthesis: none;
+ text-rendering: optimizeLegibility;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+}
+
+body {
+ margin: 0;
+ min-width: 320px;
+ min-height: 100vh;
+}
\ No newline at end of file
diff --git a/frontend-react/src/main.tsx b/frontend-react/src/main.tsx
new file mode 100644
index 0000000..bef5202
--- /dev/null
+++ b/frontend-react/src/main.tsx
@@ -0,0 +1,10 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import './index.css'
+import App from './App.tsx'
+
+createRoot(document.getElementById('root')!).render(
+
+
+ ,
+)
diff --git a/frontend-react/src/pages/Home.tsx b/frontend-react/src/pages/Home.tsx
new file mode 100644
index 0000000..43b0b23
--- /dev/null
+++ b/frontend-react/src/pages/Home.tsx
@@ -0,0 +1,23 @@
+import { useTheme } from '../context/ThemeContext';
+import { netflixTheme } from '../themes/netflix';
+import { appleTheme } from '../themes/apple';
+
+import { defaultTheme } from '../themes/default';
+
+const themes = {
+ default: defaultTheme,
+ netflix: netflixTheme,
+ apple: appleTheme,
+};
+
+const Home = () => {
+ const { currentTheme } = useTheme();
+
+ // Dynamically select the Home component based on the current theme
+ const ActiveTheme = themes[currentTheme];
+ const ThemeHome = ActiveTheme.components.Home;
+
+ return ;
+};
+
+export default Home;
diff --git a/frontend-react/src/pages/MyList.tsx b/frontend-react/src/pages/MyList.tsx
new file mode 100644
index 0000000..317f821
--- /dev/null
+++ b/frontend-react/src/pages/MyList.tsx
@@ -0,0 +1,46 @@
+import { useTheme } from '../context/ThemeContext';
+import { netflixTheme } from '../themes/netflix';
+import { appleTheme } from '../themes/apple';
+import { useMyList } from '../hooks/useMyList';
+import { SettingsPanel } from '../components/SettingsPanel';
+
+import { defaultTheme } from '../themes/default';
+
+const themes = {
+ netflix: netflixTheme,
+ apple: appleTheme,
+ default: defaultTheme,
+};
+
+const MyList = () => {
+ const { currentTheme } = useTheme();
+ const { savedMovies, watchHistory } = useMyList();
+ const ActiveTheme = themes[currentTheme];
+ const { Layout, MovieGrid } = ActiveTheme.components;
+
+ return (
+
+
+ {/* Watch History Section */}
+ {watchHistory.length > 0 && (
+
+
+
+ )}
+
+ {/* Saved List Section */}
+
+
+ {savedMovies.length === 0 && watchHistory.length === 0 && (
+
+
Your list is empty.
+
Start watching or add movies to your list.
+
+ )}
+
+
+
+
+
+ );
+};
diff --git a/frontend-react/src/themes/apple/Card.tsx b/frontend-react/src/themes/apple/Card.tsx
new file mode 100644
index 0000000..64a5053
--- /dev/null
+++ b/frontend-react/src/themes/apple/Card.tsx
@@ -0,0 +1,41 @@
+import type { Movie } from '../../types';
+import { Play } from 'lucide-react';
+
+export const Card = ({ movie }: { movie: Movie }) => {
+ return (
+
+ );
+};
diff --git a/frontend-react/src/themes/apple/Hero.tsx b/frontend-react/src/themes/apple/Hero.tsx
new file mode 100644
index 0000000..bb6aa7a
--- /dev/null
+++ b/frontend-react/src/themes/apple/Hero.tsx
@@ -0,0 +1,86 @@
+import { useState, useEffect } from 'react';
+import { Plus, Check, Play } from 'lucide-react';
+import type { Movie } from '../../types';
+import { useMyList } from '../../hooks/useMyList';
+
+export const Hero = ({ movies }: { movies: Movie[] }) => {
+ const [index, setIndex] = useState(0);
+ const { addToList, removeFromList, isSaved } = useMyList();
+
+ useEffect(() => {
+ if (movies.length <= 1) return;
+ const interval = setInterval(() => {
+ setIndex((prev) => (prev + 1) % movies.length);
+ }, 8000);
+ return () => clearInterval(interval);
+ }, [movies]);
+
+ if (!movies || movies.length === 0) return null;
+
+ const movie = movies[index];
+ const saved = isSaved(movie.id);
+
+ const toggleList = () => {
+ if (saved) removeFromList(movie.id);
+ else addToList(movie);
+ };
+
+ return (
+
+
+
+
+
+
+
+
+
+
+ Premiere
+
+
+
+ {movie.title}
+
+
+ {movie.original_title && (
+
{movie.original_title}
+ )}
+
+
+
+
+ Play
+
+
+
+
+
+
+ {/* Carousel Dots */}
+
+ {movies.map((_, i) => (
+
+
+ {/* Glass Navbar */}
+
+
+ {/* Mobile Bottom Nav */}
+
+
+
+ {children}
+
+
+ {title &&
{title}
}
+
+ {[...Array(10)].map((_, i) => (
+
+ ))}
+
+
+
+ {title &&
{title}
}
+
+
+
+
+ {movies.map((movie) => (
+
+ ))}
+
+
Loading...
;
+
+ const episodes = movie.episodes || [];
+
+ return (
+
+ {/* Navigation */}
+
+
+
+
+
+ {/* Player Section - Sticky on larger screens for cinema feel */}
+
+ {loading && (
+
+ )}
+ {(() => {
+ const activeEpisode = movie.episodes?.find(e => e.number === currentEpisode);
+ if (!activeEpisode?.url) {
+ return (
+
+
+
+
Processing Content
+
+ This title is currently being prepared for streaming.
+
+
+ {/* Subtle Background */}
+
+
+ );
+ }
+
+ return (
+
+ );
+ })()}
+
+
+ {/* Content Section - Scrolls over the bottom of the player if sticky, or just below */}
+
+
+ {/* Movie Info */}
+
+
+
{movie.title}
+
+ HD
+ {movie.year || '2024'}
+ {movie.episodes?.length || 0} Episodes
+
+
+
{movie.description}
+
+
+ {/* Episodes Grid */}
+
+
+
Episodes
+ {episodes.length} available
+
+
+
+ {(expanded ? episodes : episodes.slice(0, 20)).map((ep) => (
+
+ ))}
+
+
+ {episodes.length > 20 && (
+
+ )}
+
+
+ {/* Related Categories */}
+
+
+
More Like This
+
+
+
+
+
Trending Now
+
+
+
+
+
Top Movies
+
+
+
+
+
Animation
+
+
+
+
+
+
+
+
+
Loading StreamFlow...
+
+
+ {/* Header / Navigation Overlay */}
+
+
+
+
+ {/* Main Layout Container */}
+
+ {/* Sidebar / Metadata Panel */}
+
+
+ {/* Movie Header */}
+
+
{movie.title}
+
+
+ {movie.quality || 'HD'}
+
+ {movie.year || '2024'}
+
+ 98% Match
+
+ {movie.original_title}
+
+
+
+ {/* Description */}
+
+
+ {/* Episodes Grid */}
+ {episodes.length > 0 && (
+
+
+
+
+ Episodes
+
+
+ {episodes.length} Items
+
+
+
+
+ {visibleEpisodes.map((ep) => (
+
+ ))}
+
+
+ {episodes.length > 20 && (
+
+ )}
+
+ )}
+
+ {/* Related Content Section */}
+
+ {/* More Like This */}
+
+
Có thể bạn sẽ thÃch
+
+
+
+ {/* Trending */}
+
+
Phim Má»›i Cáºp Nháºt
+
+
+
+ {/* Top Movies */}
+
+
Top Phim Lẻ
+
+
+
+ {/* Top Series */}
+
+
Top Phim Bá»™
+
+
+
+ {/* Animation */}
+
+
Hoạt Hình Hot
+
+
+
+ {/* TV Shows */}
+
+
TV Shows
+
+
+
+
+
+
+ {/* Main Content Area (Player) */}
+
+ {/* Ambient Background Gradient behind player */}
+
+
+ {loading && (
+
+ )}
+
+ {(() => {
+ const activeEpisode = movie.episodes?.find(e => e.number === currentEpisode);
+ if (!activeEpisode?.url) {
+ return (
+
+
+
+
Coming Soon
+
+ The server is currently processing the movie "{movie.title}". Please check back later for the upload.
+
+
+ {/* Ambient background from poster */}
+
+
+ );
+ }
+
+ return (
+
+ );
+ })()}
+
+
+
+
+
+
+
+
+
+
+
+
+ TOP 10 TODAY
+ #{index + 1} in Movies
+
+
+
+ {movie.title}
+
+
+ {movie.original_title && (
+
{movie.original_title}
+ )}
+
+
+
+
+ Play
+
+
+
+
+
+
+ {/* Indicators */}
+
+ {movies.map((_, i) => (
+
+
+ {/* Sidebar Navigation */}
+
+
+ {/* Mobile Bottom Nav (Visible only on small screens) */}
+
+ {NAV_ITEMS.slice(0, 5).map((item) => (
+
+
+ {item.name}
+
+ ))}
+
+
+ {/* Main Content Area */}
+
+ {children}
+
+
+ {title &&
{title}
}
+
+ {[...Array(12)].map((_, i) => (
+
+ ))}
+
+
+ {title &&
{title} >
}
+
+ {movies.map((movie) => (
+
+ ))}
+
+
+
+
+
+
+ );
+};
diff --git a/frontend-react/src/themes/netflix/WatchPage.tsx b/frontend-react/src/themes/netflix/WatchPage.tsx
new file mode 100644
index 0000000..bb6a216
--- /dev/null
+++ b/frontend-react/src/themes/netflix/WatchPage.tsx
@@ -0,0 +1,220 @@
+import { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { ArrowLeft, Play, ChevronDown, ChevronUp } from 'lucide-react';
+import { Layout } from './Layout';
+import { useWatchMovie } from '../../hooks/useWatchMovie';
+import MovieRow from '../../components/MovieRow';
+
+export const WatchPage = ({ slug, episode }: { slug: string, episode: string }) => {
+ const navigate = useNavigate();
+ const { movie, loading, currentEpisode, setCurrentEpisode, videoRef } = useWatchMovie(slug, episode);
+ const [expanded, setExpanded] = useState(false);
+
+ if (!movie) return Loading...
;
+
+ const episodes = movie.episodes || [];
+ const visibleEpisodes = expanded ? episodes : episodes.slice(0, 20);
+
+ return (
+
+
+ {/* Back Button Overlay */}
+
+
+
+ {/* Sidebar / Metadata Panel */}
+
+
+ {/* Movie Header */}
+
+
{movie.title}
+
+ 98% Match
+ {movie.year || '2024'}
+ HD
+ {movie.original_title}
+
+
+
+
+ {movie.description}
+
+
+ {/* Episodes Grid */}
+ {episodes.length > 0 && (
+
+
+
Episodes
+
+ {episodes.length} Episodes
+
+
+
+
+ {visibleEpisodes.map((ep) => (
+
+ ))}
+
+
+ {episodes.length > 20 && (
+
+ )}
+
+ )}
+
+ {/* Related Content Section */}
+
+ {/* More Like This */}
+
+
More Like This
+
+
+
+ {/* Trending */}
+
+
New Releases
+
+
+
+ {/* Top Movies */}
+
+
Top Movies
+
+
+
+ {/* Top Series */}
+
+
Top Series
+
+
+
+ {/* Animation */}
+
+
Animation
+
+
+
+ {/* TV Shows */}
+
+
TV Shows
+
+
+
+
+
+
+ {/* Main Content Area (Player) */}
+
+ {loading && (
+
+ )}
+ {(() => {
+ const activeEpisode = movie.episodes?.find(e => e.number === currentEpisode);
+ if (!activeEpisode?.url) {
+ return (
+
+
+
Coming Soon
+
+ We're busy uploading the best quality version of this movie.
+
+
+
+
+ );
+ }
+
+ return (
+
+ );
+ })()}
+
+
+
-
-
-
Download StreamFlix
-
Experience cinema-quality streaming on all your devices. Ad-free, high performance, and
- built for privacy.
-
-
-
-
- StreamFlix • Private Access Only
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
Initializing StreamFlix...
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- local_fire_department
-
-
-
-
-
-
- Loading...
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- search
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
![Poster]()
-
-
-
-
-
Loading...
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
![Poster]()
-
-
-
-
-
Loading...
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- ${rating.toFixed(1)}
-
- `;
- }
-
- // Build rating badge HTML (Rotten Tomatoes style)
- let tomatoBadgeHTML = '';
- if (rating > 0) {
- const tomatoIcon = isFresh ? 'ðŸ…' : '🥀';
- tomatoBadgeHTML = `
-
- ${tomatoIcon}
- ${ratingPercent}%
-
- `;
- }
-
- // Placeholder for loading state
- const placeholderSvg = 'data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 450"%3E%3Crect width="300" height="450" fill="%2314141c"/%3E%3C/svg%3E';
-
- // Build tags HTML
- let tagsHTML = '';
-
- // NEW tag (top left)
- if (isNew) {
- tagsHTML += `MỚI`;
- }
-
- // Type tag (SERIES / PHIM LẺ)
- if (movieType === 'trailer') {
- tagsHTML += `TRAILER`;
- } else if (movieType === 'series') {
- tagsHTML += `PHIM BỘ`;
- } else if (movieType === 'animation') {
- tagsHTML += `HOẠT HÌNH`;
- }
-
- card.innerHTML = `
-
-
-
-
-
-
- ${tagsHTML}
-
-
-
-
- ${tomatoBadgeHTML}
- ${numericRatingHTML}
- ${qualityBadge}
-
-
-
-
- ${year}
- ${episodeText ? `${episodeText}` : ''}
-
-
-
- ${video.progress && video.progress.percentage > 0 ? `
-
- ` : ''}
-
-
-
-
-
- ${escapeHtml(video.title)}
-
- `;
-
- // Lazy load image from cache when visible
- const img = card.querySelector('.video-card__img');
- if (img && thumbnail) {
- // Use IntersectionObserver for lazy loading
- const observer = new IntersectionObserver((entries) => {
- entries.forEach(entry => {
- if (entry.isIntersecting) {
- // Load from cache
- imageCache.getCachedImage(thumbnail).then(cachedUrl => {
- img.src = cachedUrl;
- img.classList.add('loaded');
- }).catch(() => {
- // Fallback to direct load
- img.src = thumbnail;
- img.onload = () => img.classList.add('loaded');
- img.onerror = () => img.classList.add('loaded'); // Show placeholder if fails
- });
- observer.unobserve(img);
- }
- });
- }, {
- rootMargin: '800px', // Start loading 800px before visible
- threshold: 0
- });
- observer.observe(img);
- }
-
- // Event Listeners
- card.querySelector('[data-action="play"]')?.addEventListener('click', (e) => {
- e.stopPropagation();
- onPlay?.(video);
- });
-
- // Default click behavior - play on any click
- card.addEventListener('click', () => {
- onPlay?.(video);
- });
-
- return card;
-}
-
-function escapeHtml(str) {
- if (!str) return '';
- const div = document.createElement('div');
- div.textContent = str;
- return div.innerHTML;
-}
diff --git a/frontend/scripts/components/VideoPlayer.js b/frontend/scripts/components/VideoPlayer.js
deleted file mode 100755
index e6f7c01..0000000
--- a/frontend/scripts/components/VideoPlayer.js
+++ /dev/null
@@ -1,310 +0,0 @@
-/**
- * StreamFlow - Video Player Component
- * ArtPlayer.js integration with custom skin
- * Includes Screen Wake Lock API to prevent screen sleep during playback
- */
-
-import Artplayer from 'artplayer';
-
-// Player instance reference
-let currentPlayer = null;
-
-// Wake lock instance for preventing screen sleep
-let wakeLock = null;
-
-/**
- * Request screen wake lock to prevent display from sleeping
- */
-async function requestWakeLock() {
- if ('wakeLock' in navigator) {
- try {
- wakeLock = await navigator.wakeLock.request('screen');
- console.log('Wake lock acquired');
-
- // Handle wake lock release (e.g., when tab loses visibility)
- wakeLock.addEventListener('release', () => {
- console.log('Wake lock released');
- });
- } catch (err) {
- console.log('Wake lock request failed:', err.message);
- }
- }
-}
-
-/**
- * Release screen wake lock
- */
-async function releaseWakeLock() {
- if (wakeLock !== null) {
- try {
- await wakeLock.release();
- wakeLock = null;
- console.log('Wake lock released');
- } catch (err) {
- console.log('Wake lock release failed:', err.message);
- }
- }
-}
-
-/**
- * Handle visibility change to re-acquire wake lock when tab becomes visible
- */
-function handleVisibilityChange() {
- if (document.visibilityState === 'visible' && currentPlayer && !currentPlayer.paused) {
- requestWakeLock();
- }
-}
-
-// Register visibility change listener
-document.addEventListener('visibilitychange', handleVisibilityChange);
-
-/**
- * Format duration for display
- * @param {number} seconds - Duration in seconds
- * @returns {string} Formatted duration
- */
-function formatDuration(seconds) {
- const hours = Math.floor(seconds / 3600);
- const minutes = Math.floor((seconds % 3600) / 60);
- const secs = Math.floor(seconds % 60);
-
- if (hours > 0) {
- return `${hours}:${String(minutes).padStart(2, '0')}:${String(secs).padStart(2, '0')}`;
- }
- return `${minutes}:${String(secs).padStart(2, '0')}`;
-}
-
-/**
- * Initialize video player
- * @param {HTMLElement} container - Container element
- * @param {Object} options - Player options
- * @returns {Artplayer} Player instance
- */
-export function initPlayer(container, options = {}) {
- // Destroy existing player if any
- destroyPlayer();
-
- const {
- url,
- poster,
- title,
- autoplay = false,
- qualities = []
- } = options;
-
- // Build player config with enhanced buffering
- const playerConfig = {
- container,
- url,
- poster,
- title,
- volume: 0.7,
- autoplay,
- autoSize: false,
- autoMini: true,
- loop: false,
- flip: true,
- playbackRate: true,
- aspectRatio: true,
- screenshot: true,
- setting: true,
- hotkey: true,
- pip: true,
- mutex: true,
- fullscreen: true,
- fullscreenWeb: true,
- miniProgressBar: true,
- playsInline: true,
- autoPlayback: true,
- theme: '#f5c518', // Golden-yellow accent
- lang: 'en',
- moreVideoAttr: {
- // crossOrigin: 'anonymous',
- preload: 'auto',
- },
- airplay: true,
- // HLS custom configuration for better buffering
- customType: {
- m3u8: function playM3u8(video, url, art) {
- // Check if Android - prefer native HLS to avoid CORS/hls.js issues
- const isAndroid = /Android/i.test(navigator.userAgent);
-
- if (isAndroid && video.canPlayType('application/vnd.apple.mpegurl')) {
- video.src = url;
- return;
- }
-
- if (Hls.isSupported()) {
- if (art.hls) {
- art.hls.destroy();
- }
- const hls = new Hls({
- // Buffer configuration for faster start
- maxBufferLength: 30, // Max buffer in seconds
- maxMaxBufferLength: 60, // Max buffer ceiling
- maxBufferSize: 60 * 1000 * 1000, // Max buffer size (60MB)
- maxBufferHole: 0.5, // Max gap in buffer
- lowLatencyMode: false, // Disable low latency for stability
- startLevel: -1, // Auto select quality
- // Faster loading
- enableWorker: true,
- startFragPrefetch: true, // Prefetch next fragment
- testBandwidth: true
- });
- hls.loadSource(url);
- hls.attachMedia(video);
- art.hls = hls;
- art.on('destroy', () => hls.destroy());
-
- // Handle HLS errors
- hls.on(Hls.Events.ERROR, (event, data) => {
- if (data.fatal) {
- switch (data.type) {
- case Hls.ErrorTypes.NETWORK_ERROR:
- console.warn('HLS network error, trying to recover...');
- hls.startLoad();
- break;
- case Hls.ErrorTypes.MEDIA_ERROR:
- console.warn('HLS media error, trying to recover...');
- hls.recoverMediaError();
- break;
- default:
- console.error('Fatal HLS error');
- break;
- }
- }
- });
- } else if (video.canPlayType('application/vnd.apple.mpegurl')) {
- // Native HLS support (Safari)
- video.src = url;
- }
- }
- },
- settings: [
- {
- html: 'Speed',
- selector: [
- { html: '0.5x', value: 0.5 },
- { html: '0.75x', value: 0.75 },
- { html: 'Normal', value: 1, default: true },
- { html: '1.25x', value: 1.25 },
- { html: '1.5x', value: 1.5 },
- { html: '2x', value: 2 }
- ],
- onSelect(item) {
- if (currentPlayer) {
- currentPlayer.playbackRate = item.value;
- }
- return item.html;
- }
- }
- ],
- icons: {
- loading: ``,
- state: ``
- },
- cssVar: {
- '--art-theme': '#f5c518',
- '--art-background-color': '#0f0f0f',
- '--art-progress-color': '#f5c518',
- '--art-control-background-color': 'rgba(0, 0, 0, 0.8)',
- '--art-control-height': '48px',
- '--art-bottom-gap': '12px'
- }
- };
-
- // Only add quality if available (ArtPlayer requires array, not undefined)
- if (qualities.length > 0) {
- playerConfig.quality = qualities.map((q, i) => ({
- default: i === 0,
- html: q,
- url: url
- }));
- }
-
- // Initialize ArtPlayer
- currentPlayer = new Artplayer(playerConfig);
-
- // Event handling
- currentPlayer.on('ready', () => {
- console.log('Player ready');
- if (currentPlayer.video) {
- currentPlayer.video.preload = 'auto';
- }
- });
-
- currentPlayer.on('video:waiting', () => {
- console.log('Buffering...');
- });
-
- currentPlayer.on('video:canplay', () => {
- console.log('Can play');
- });
-
- currentPlayer.on('error', (error) => {
- console.error('Player error:', error);
- });
-
- // Wake lock events - keep screen on during playback
- currentPlayer.on('play', () => {
- requestWakeLock();
- });
-
- currentPlayer.on('pause', () => {
- releaseWakeLock();
- });
-
- return currentPlayer;
-}
-
-/**
- * Destroy current player instance
- */
-export function destroyPlayer() {
- if (currentPlayer) {
- currentPlayer.destroy();
- currentPlayer = null;
- }
- // Release wake lock when player is destroyed
- releaseWakeLock();
-}
-
-/**
- * Get current player instance
- * @returns {Artplayer|null} Current player or null
- */
-export function getPlayer() {
- return currentPlayer;
-}
-
-/**
- * Create a lazy-load placeholder with play button
- * @param {Object} options - Placeholder options
- * @returns {HTMLElement} Placeholder element
- */
-export function createPlayerPlaceholder(options = {}) {
- const { poster, onClick } = options;
-
- const placeholder = document.createElement('div');
- placeholder.className = 'player-skeleton';
-
- if (poster) {
- placeholder.style.backgroundImage = `url(${poster})`;
- placeholder.style.backgroundSize = 'cover';
- placeholder.style.backgroundPosition = 'center';
- }
-
- placeholder.innerHTML = `
-
- `;
-
- if (onClick) {
- placeholder.addEventListener('click', onClick);
- }
-
- return placeholder;
-}
diff --git a/frontend/scripts/haptics.js b/frontend/scripts/haptics.js
deleted file mode 100755
index 666b72e..0000000
--- a/frontend/scripts/haptics.js
+++ /dev/null
@@ -1,34 +0,0 @@
-import { Haptics, ImpactStyle } from '../js/capacitor-mock.js';
-
-/**
- * Trigger a light haptic feedback for small interactions
- */
-export const hapticLight = async () => {
- try {
- await Haptics.impact({ style: ImpactStyle.Light });
- } catch (e) {
- // Fail silently if not on native
- }
-};
-
-/**
- * Trigger a medium haptic feedback for major interactions
- */
-export const hapticMedium = async () => {
- try {
- await Haptics.impact({ style: ImpactStyle.Medium });
- } catch (e) {
- // Fail silently
- }
-};
-
-/**
- * Trigger a success haptic feedback
- */
-export const hapticSuccess = async () => {
- try {
- await Haptics.notification({ type: 'SUCCESS' });
- } catch (e) {
- // Fail silently
- }
-};
diff --git a/frontend/scripts/info.js b/frontend/scripts/info.js
deleted file mode 100755
index a7bb94e..0000000
--- a/frontend/scripts/info.js
+++ /dev/null
@@ -1,145 +0,0 @@
-
-import { api } from './api.js';
-
-// DOM Elements
-const elements = {
- poster: document.getElementById('poster'),
- backdrop: document.getElementById('backdrop'),
- title: document.getElementById('title'),
- originalTitle: document.getElementById('originalTitle'),
- rating: document.getElementById('rating'),
- status: document.getElementById('status'),
- year: document.getElementById('year'),
- episodes: document.getElementById('episodes'),
- country: document.getElementById('country'),
- genre: document.getElementById('genre'),
- director: document.getElementById('director'),
- cast: document.getElementById('cast'),
- description: document.getElementById('description'),
- btnWatch: document.getElementById('btnWatch'),
- tags: document.getElementById('tags'),
- recommendations: document.getElementById('recommendations')
-};
-
-async function init() {
- const params = new URLSearchParams(window.location.search);
- const id = params.get('id');
- const slug = params.get('slug');
-
- if (!id && !slug) {
- window.location.href = '/';
- return;
- }
-
- try {
- const movieSlug = slug || id;
- const data = await api.getRophimMovie(movieSlug);
-
- if (data) {
- renderInfo(data.movie || data, data.episodes || []);
- loadRecommendations();
- }
- } catch (e) {
- console.error('Error loading info:', e);
- // Fallback or error state
- }
-}
-
-function renderInfo(movie, episodes) {
- document.title = `${movie.name || movie.title} - KV-Stream`;
-
- // Images
- const posterUrl = movie.poster_url || movie.thumb_url || movie.thumbnail || 'https://via.placeholder.com/300x450?text=No+Poster';
- const backdropUrl = movie.backdrop_url || posterUrl;
-
- if (elements.poster) {
- elements.poster.src = posterUrl;
- elements.poster.onerror = () => { elements.poster.src = 'https://via.placeholder.com/300x450?text=No+Poster'; };
- }
- if (elements.backdrop) elements.backdrop.style.backgroundImage = `url('${backdropUrl}')`;
-
- // Titles
- if (elements.title) elements.title.textContent = movie.name || movie.title;
- if (elements.originalTitle) elements.originalTitle.textContent = movie.origin_name || movie.original_title || '';
-
- // Metadata
- if (elements.status) {
- // Infer status
- let status = 'Äang chiếu'; // Default
- if (movie.status === 'completed' || (episodes.length > 0 && movie.episode_current === 'Full')) status = 'Hoà n tất';
- elements.status.innerHTML = `${status}`;
- }
-
- if (elements.year) elements.year.textContent = movie.year || 'N/A';
-
- // Episodes Count
- if (elements.episodes) {
- const epCount = episodes[0]?.server_data?.length || 1;
- const currentEp = movie.episode_current || epCount;
- const totalEp = movie.episode_total || '?';
- elements.episodes.textContent = `${epCount}`;
- }
-
- // Country
- if (elements.country) {
- const countries = Array.isArray(movie.country) ? movie.country.map(c => c.name) : [movie.country];
- elements.country.textContent = countries.filter(Boolean).join(', ') || 'Äang cáºp nháºt';
- }
-
- // Genre
- if (elements.genre) {
- const genres = Array.isArray(movie.category) ? movie.category.map(c => c.name) : (movie.genre ? movie.genre.split(',') : []);
- elements.genre.textContent = genres.map(g => g.trim()).join(', ') || 'Äang cáºp nháºt';
- }
-
- // Director
- if (elements.director) {
- const director = Array.isArray(movie.director) ? movie.director.join(', ') : movie.director;
- elements.director.textContent = director || 'Äang cáºp nháºt';
- }
-
- // Cast
- if (elements.cast) {
- const cast = Array.isArray(movie.actor) ? movie.actor.join(', ') : (movie.cast ? (Array.isArray(movie.cast) ? movie.cast.join(', ') : movie.cast) : '');
- elements.cast.textContent = cast || 'Äang cáºp nháºt';
- }
-
- // Description
- if (elements.description) {
- elements.description.innerHTML = movie.content || movie.description || 'Chưa có mô tả.';
- }
-
- // Watch Link
- if (elements.btnWatch) {
- elements.btnWatch.href = `/watch.html?id=${movie.slug}&slug=${movie.slug}`;
- }
-
- // Tags (Keywords)
- if (elements.tags) {
- // Just use Title and English title as tags for now
- const tags = [movie.name, movie.origin_name].filter(Boolean);
- elements.tags.innerHTML = tags.map(t =>
- `${t}`
- ).join('');
- }
-}
-
-async function loadRecommendations() {
- if (!elements.recommendations) return;
- try {
- const res = await api.getRophimCatalog({ page: 1, limit: 24 });
- const recs = res.movies || [];
-
- elements.recommendations.innerHTML = recs.map(v => `
-
- 
- ${v.title}
- ${v.year || ''}
-
- `).join('');
- } catch (e) {
- console.warn('Failed to load recs', e);
- }
-}
-
-init();
diff --git a/frontend/scripts/keyboard-nav.js b/frontend/scripts/keyboard-nav.js
deleted file mode 100755
index 3e8d4c7..0000000
--- a/frontend/scripts/keyboard-nav.js
+++ /dev/null
@@ -1,378 +0,0 @@
-/**
- * TV-Style Keyboard Navigation
- * Handles Arrow keys to navigate horizontally through sliders and vertically between rows.
- * Optimized for Android TV D-pad remote control navigation.
- */
-
-export class KeyboardNavigation {
- constructor() {
- this.currentFocus = null;
- this.isEnabled = false;
- this.isTVMode = this.detectTVMode();
- this.focusInitialized = false;
-
- // Selectors for focusable items (in priority order)
- this.selectors = [
- '.video-card',
- '.hero__btn',
- '.slider-btn',
- '#topSearchBtn',
- '.nav-item',
- '.nav-link',
- '.category-card',
- '.tab-btn',
- '.episode-row',
- '.recommendation-card',
- 'button:not([disabled])',
- 'a[href]'
- ];
- }
-
- /**
- * Detect if running on Android TV or similar leanback device
- * Uses multiple detection methods for reliability
- */
- detectTVMode() {
- const ua = navigator.userAgent.toLowerCase();
-
- // Check UA for known TV strings
- const tvPatterns = [
- 'tv', 'aftm', 'aftt', 'aft', 'shield', 'googletv',
- 'chromecast', 'firetv', 'bravia', 'philipstv', 'samsungtv',
- 'lgtv', 'webos', 'tizen', 'vizio', 'roku', 'appletv'
- ];
- const isAndroid = ua.includes('android');
- const hasTV = tvPatterns.some(p => ua.includes(p));
-
- // Fallback: No fine pointer (mouse) likely means D-pad/remote
- const noMouse = window.matchMedia && !window.matchMedia('(pointer: fine)').matches;
-
- // Fallback: Large screen without touch is likely TV
- const isBigScreen = window.innerWidth >= 1280 && window.innerHeight >= 720;
- const noTouch = !('ontouchstart' in window);
-
- const detected = (isAndroid && hasTV) || (isAndroid && noMouse) || (isBigScreen && noTouch && noMouse);
-
- if (detected) {
- console.log('[KeyboardNav] TV Mode detected');
- document.body.classList.add('tv-mode');
- }
-
- return detected;
- }
-
- init() {
- this.isEnabled = true;
- document.addEventListener('keydown', this.handleKey.bind(this));
-
- // Only add mouse handler on non-TV devices
- if (!this.isTVMode) {
- document.addEventListener('mousemove', this.handleMouseMove.bind(this));
- }
-
- // Add tabindex to all focusable elements for D-pad navigation
- this.ensureTabIndexes();
-
- // Auto-focus first card for TV mode (helps D-pad users start navigating)
- if (this.isTVMode) {
- this.waitForFocusableElement();
- }
-
- // Re-apply tabindex when DOM changes (e.g., new content loaded)
- this.observeDOM();
- }
-
- /**
- * Ensure all interactive elements have tabindex for focus
- */
- ensureTabIndexes() {
- const elements = document.querySelectorAll(this.selectors.join(','));
- elements.forEach(el => {
- if (!el.hasAttribute('tabindex')) {
- el.setAttribute('tabindex', '0');
- }
- });
- }
-
- /**
- * Observe DOM for new elements and add tabindex
- */
- observeDOM() {
- const observer = new MutationObserver((mutations) => {
- let needsUpdate = false;
- for (const mutation of mutations) {
- if (mutation.addedNodes.length > 0) {
- needsUpdate = true;
- break;
- }
- }
- if (needsUpdate) {
- // Debounce updates
- clearTimeout(this._tabindexTimeout);
- this._tabindexTimeout = setTimeout(() => {
- this.ensureTabIndexes();
- // Try to focus if not yet focused
- if (this.isTVMode && !this.focusInitialized) {
- this.focusFirstVisible();
- }
- }, 100);
- }
- });
-
- observer.observe(document.body, {
- childList: true,
- subtree: true
- });
- }
-
- /**
- * Wait for focusable elements to appear, then focus the first one
- */
- waitForFocusableElement() {
- const tryFocus = (attempt = 0) => {
- const candidates = document.querySelectorAll('.video-card');
- if (candidates.length > 0) {
- this.setFocus(candidates[0]);
- this.focusInitialized = true;
- console.log('[KeyboardNav] Initial focus set');
- } else if (attempt < 10) {
- // Retry with exponential backoff (100ms, 200ms, 400ms, ...)
- setTimeout(() => tryFocus(attempt + 1), 100 * Math.pow(2, attempt));
- }
- };
-
- // Initial delay to let page settle
- setTimeout(() => tryFocus(0), 300);
- }
-
- handleMouseMove() {
- // If mouse moves, likely user is using mouse.
- if (this.currentFocus) {
- this.currentFocus.blur();
- this.currentFocus.classList.remove('keyboard-focused');
- this.currentFocus = null;
- }
- }
-
- handleKey(e) {
- // Handle navigation keys
- if (['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(e.key)) {
- e.preventDefault(); // Prevent default page scroll
-
- if (!this.currentFocus) {
- this.focusFirstVisible();
- return;
- }
-
- let nextTarget = null;
-
- switch (e.key) {
- case 'ArrowRight':
- nextTarget = this.moveHorizontal(1);
- break;
- case 'ArrowLeft':
- nextTarget = this.moveHorizontal(-1);
- break;
- case 'ArrowUp':
- nextTarget = this.moveVertical(-1);
- break;
- case 'ArrowDown':
- nextTarget = this.moveVertical(1);
- break;
- }
-
- if (nextTarget) {
- this.setFocus(nextTarget);
- }
- } else if (e.key === 'Enter' || e.key === ' ') {
- // Select/activate focused element
- if (this.currentFocus) {
- e.preventDefault();
- this.currentFocus.click();
- }
- } else if (e.key === 'Backspace' || e.key === 'Escape' || e.key === 'XF86Back') {
- // Back button handling for Android TV
- this.handleBack(e);
- }
- }
-
- /**
- * Handle back button for Android TV
- */
- handleBack(e) {
- // Check for open modals/overlays first
- const searchModal = document.getElementById('searchModal');
- const playerModal = document.getElementById('playerModal');
- const infoModal = document.querySelector('.info-modal.active, .info-modal:not(.hidden)');
- const videoPlayerContainer = document.getElementById('videoPlayerContainer');
-
- // Close modals in priority order
- if (searchModal?.classList.contains('active')) {
- e.preventDefault();
- searchModal.classList.remove('active');
- return;
- }
-
- if (infoModal) {
- e.preventDefault();
- infoModal.classList.add('hidden');
- infoModal.classList.remove('active');
- return;
- }
-
- if (videoPlayerContainer && !videoPlayerContainer.classList.contains('hidden')) {
- e.preventDefault();
- // Trigger close player - the page's own handler should catch this
- const closeBtn = document.getElementById('closePlayer') || document.getElementById('playerBackButton');
- if (closeBtn) closeBtn.click();
- return;
- }
-
- if (playerModal?.classList.contains('active')) {
- e.preventDefault();
- const closePlayerBtn = document.getElementById('closePlayer');
- if (closePlayerBtn) closePlayerBtn.click();
- return;
- }
-
- // If no modal is open, let default back behavior happen
- // (e.g., browser back or Capacitor's back handling)
- }
-
- focusFirstVisible() {
- // Find first video card in viewport
- const candidates = document.querySelectorAll('.video-card');
- if (candidates.length > 0) {
- this.setFocus(candidates[0]);
- this.focusInitialized = true;
- }
- }
-
- setFocus(el) {
- if (!el) return;
-
- if (this.currentFocus) {
- this.currentFocus.classList.remove('keyboard-focused');
- }
-
- this.currentFocus = el;
- el.classList.add('keyboard-focused');
- el.focus({ preventScroll: true }); // Native focus
-
- // Smooth scroll into view
- el.scrollIntoView({
- behavior: 'smooth',
- block: 'center',
- inline: 'center'
- });
- }
-
- /**
- * Get the row container of an element
- */
- getRowContainer(el) {
- return el.closest('.video-row, .slider-row, .row-content, .grid, .episodes-grid, .recommendations-container');
- }
-
- /**
- * Get all focusable elements within a container (or document)
- */
- getFocusableInContainer(container) {
- const selector = this.selectors.slice(0, 10).join(','); // Primary interactive elements
- return container
- ? Array.from(container.querySelectorAll(selector))
- : Array.from(document.querySelectorAll(selector));
- }
-
- moveHorizontal(direction) {
- if (!this.currentFocus) return null;
-
- // Try to stay within the same row/container
- const row = this.getRowContainer(this.currentFocus);
-
- if (row) {
- // Get siblings in the same row
- const siblings = this.getFocusableInContainer(row);
- const currentIndex = siblings.indexOf(this.currentFocus);
-
- if (currentIndex !== -1) {
- const nextIndex = currentIndex + direction;
- if (nextIndex >= 0 && nextIndex < siblings.length) {
- return siblings[nextIndex];
- }
- }
- // At edge of row - don't wrap to next row on horizontal nav
- return null;
- }
-
- // Fallback: flat DOM order navigation
- const allFocusable = Array.from(document.querySelectorAll(this.selectors.join(',')));
- const currentIndex = allFocusable.indexOf(this.currentFocus);
-
- if (currentIndex === -1) return null;
-
- const nextIndex = currentIndex + direction;
- if (nextIndex >= 0 && nextIndex < allFocusable.length) {
- const currentRect = this.currentFocus.getBoundingClientRect();
- const nextEl = allFocusable[nextIndex];
- const nextRect = nextEl.getBoundingClientRect();
-
- // Don't jump to next row on horizontal nav
- const verticalDist = Math.abs(currentRect.top - nextRect.top);
- if (verticalDist > currentRect.height * 0.5) {
- return null; // Would jump to different row
- }
- return nextEl;
- }
- return null;
- }
-
- moveVertical(direction) {
- // Find closest element in the visual direction
- if (!this.currentFocus) return null;
-
- const currentRect = this.currentFocus.getBoundingClientRect();
- const centerX = currentRect.left + currentRect.width / 2;
- const allFocusable = Array.from(document.querySelectorAll(this.selectors.join(',')));
-
- // Filter elements that are strictly Above/Below
- const candidates = allFocusable.filter(el => {
- if (el === this.currentFocus) return false;
- const rect = el.getBoundingClientRect();
-
- if (direction === 1) { // Down
- return rect.top >= currentRect.bottom - (currentRect.height * 0.3);
- } else { // Up
- return rect.bottom <= currentRect.top + (currentRect.height * 0.3);
- }
- });
-
- if (candidates.length === 0) return null;
-
- // Find the one with minimum distance, prioritizing horizontal alignment
- let bestCandidate = null;
- let minDistance = Infinity;
-
- candidates.forEach(el => {
- const rect = el.getBoundingClientRect();
- const elCenterX = rect.left + rect.width / 2;
-
- // Vertical distance (primary)
- const vDist = Math.abs(rect.top - currentRect.top);
-
- // Horizontal alignment penalty (prefer elements at similar X position)
- const hDist = Math.abs(elCenterX - centerX);
-
- // Weight: prefer closer rows, then prefer horizontal alignment
- // Vertical distance matters more for row-based navigation
- const dist = vDist * 2 + hDist;
-
- if (dist < minDistance) {
- minDistance = dist;
- bestCandidate = el;
- }
- });
-
- return bestCandidate;
- }
-}
diff --git a/frontend/scripts/main.js b/frontend/scripts/main.js
deleted file mode 100755
index 01f4885..0000000
--- a/frontend/scripts/main.js
+++ /dev/null
@@ -1,3219 +0,0 @@
-/**
- * KV-Netflix - Main Application Entry Point
- * Initializes the video streaming application
- */
-
-import { api } from './api.js';
-import { createVideoCard } from './components/VideoCard.js';
-import { initPlayer, destroyPlayer } from './components/VideoPlayer.js';
-import { initSearch } from './components/SearchBar.js';
-import { showToast } from './components/Toast.js';
-
-import { createInfoModal } from './components/InfoModal.js';
-import { renderNewAndHotView } from './components/NewAndHot.js';
-import { KeyboardNavigation } from './keyboard-nav.js';
-import { hapticLight, hapticMedium, hapticSuccess } from './haptics.js';
-import { StatusBar, Style } from '../js/capacitor-mock.js';
-
-/**
- * SplashScreen Controller
- * Manages loading progress and cinematic transition
- */
-const SplashScreen = {
- elements: {
- overlay: document.getElementById('splash-screen'),
- bar: document.getElementById('loading-bar'),
- text: document.getElementById('loading-text')
- },
- progress: 0,
- isFinished: false,
-
- update(percent, message) {
- if (this.isFinished) return;
- this.progress = Math.min(percent, 100);
- if (this.elements.bar) this.elements.bar.style.width = `${this.progress}%`;
- if (this.elements.text && message) this.elements.text.textContent = message;
-
- if (this.progress >= 100) {
- this.finish();
- }
- },
-
- finish() {
- if (this.isFinished) return;
- this.isFinished = true;
- setTimeout(() => {
- if (this.elements.overlay) {
- this.elements.overlay.classList.add('fade-out');
- // Remove from DOM after transition to free up resources
- setTimeout(() => this.elements.overlay.remove(), 1000);
- }
- }, 500);
- }
-};
-// Drag scroll removed per user request
-// Application state
-const state = {
- videos: [],
- currentCategory: 'all',
- currentVideo: null,
- isLoading: false,
- featuredVideo: null,
- heroMovies: [],
- currentHeroIndex: 0,
- heroInterval: null,
- page: 1,
- hasMore: true
-};
-
-// DOM elements
-const elements = {
- // Use videoGrid if exists, otherwise fall back to mainContent (Tailwind CSS design)
- videoGrid: document.getElementById('videoGrid') || document.getElementById('mainContent'),
- mainContent: document.getElementById('mainContent'),
- loading: document.getElementById('loading'),
- emptyState: document.getElementById('emptyState'),
- categories: document.getElementById('categories'),
- // Netflix-style navigation elements
- mainHeader: document.getElementById('mainHeader'),
- searchWrapper: document.getElementById('searchWrapper'),
- searchToggle: document.getElementById('searchToggle'),
- searchInput: document.getElementById('searchInput'),
- searchResults: document.getElementById('searchResults'),
- navLinks: document.querySelectorAll('.header__nav-link'),
-
- playerModal: document.getElementById('playerModal'),
- playerContainer: document.getElementById('playerContainer'),
- playerTitle: document.getElementById('playerTitle'),
- playerMeta: document.getElementById('playerMeta'),
- closePlayer: document.getElementById('closePlayer'),
- modalBackdrop: document.getElementById('modalBackdrop'),
- mobileNavItems: document.querySelectorAll('.mobile-nav__item, .sidebar__nav-item'),
- mobileBottomNavButtons: document.querySelectorAll('#mobileBottomNav .nav-item')
-};
-
-/**
- * Set the active state of mobile bottom navigation
- * @param {string} viewName - 'home', 'cinema', 'mylist', or 'search'
- */
-function setMobileNavActive(viewName) {
- const navButtons = document.querySelectorAll('#mobileBottomNav .nav-item');
- navButtons.forEach(btn => {
- const isActive = btn.dataset.view === viewName;
- btn.classList.toggle('active', isActive);
- btn.classList.toggle('text-white', isActive);
- btn.classList.toggle('text-gray-400', !isActive);
-
- const icon = btn.querySelector('.material-symbols-outlined');
- if (icon) {
- icon.style.fontVariationSettings = isActive ? "'FILL' 1" : "'FILL' 0";
- }
- });
-}
-
-
-/**
- * Initialize the application
- */
-async function init() {
- SplashScreen.update(10, 'Initializing services...');
-
- // Initialize search
- initSearch(elements.searchInput, elements.searchResults, handleVideoPlay);
- SplashScreen.update(20, 'Setting up navigation...');
-
- // Initialize Mobile Bottom Nav
- if (elements.mobileBottomNavButtons) {
- // ... (existing button logic)
- elements.mobileBottomNavButtons.forEach(btn => {
- btn.addEventListener('click', (e) => {
- e.preventDefault();
- const view = btn.dataset.view;
- if (!view) return;
-
- // Update active state
- elements.mobileBottomNavButtons.forEach(b => b.classList.remove('active'));
- btn.classList.add('active');
-
- // Native Haptic
- hapticLight();
-
- // Handle routing
- if (view === 'home') {
- renderHome();
- // Scroll to top for home
- window.scrollTo({ top: 0, behavior: 'smooth' });
- } else if (view === 'search') {
- // Mobile Search View - don't scroll to top
- if (window.innerWidth < 768) {
- try {
- renderMobileSearch();
- } catch (e) {
- console.error('Search render failed', e);
- }
- } else {
- elements.searchWrapper.classList.add('active');
- elements.searchInput.focus();
- }
- } else if (view === 'mylist') {
- // My List View - don't scroll to top
- if (window.innerWidth < 768) {
- renderMobileMyList();
- } else {
- renderHistoryView('mylist');
- }
- } else if (view === 'downloads') {
- showToast('Downloads feature coming soon!', 'info');
- } else if (view === 'profile') {
- renderProfileView();
- } else if (view === 'cinema') {
- setMobileNavActive('cinema');
- renderCategoryView('cinema');
- // Scroll to top for category views
- window.scrollTo({ top: 0, behavior: 'smooth' });
- } else {
- renderCategoryView(view);
- // Scroll to top for category views
- window.scrollTo({ top: 0, behavior: 'smooth' });
- }
- });
- });
- }
-
- // Set up event listeners
- setupEventListeners();
- SplashScreen.update(40, 'Fetching movie catalog...');
-
- // Load home view with organized sections
- try {
- await renderCategoryView('home');
- } catch (e) {
- console.error('Home render failed', e);
- }
- SplashScreen.update(70, 'Preparing featured content...');
-
- // Render hero with featured content
- try {
- await renderHero();
- } catch (e) {
- console.error('Hero render failed', e);
- }
- SplashScreen.update(90, 'Applying final touches...');
-
- // Handle view parameter from URL (e.g. for redirects from watch page)
- const urlParams = new URLSearchParams(window.location.search);
- const viewParam = urlParams.get('view');
- if (viewParam && window.innerWidth < 768) {
- if (viewParam === 'search') renderMobileSearch();
- else if (viewParam === 'mylist') renderMobileMyList();
- else if (viewParam === 'cinema') renderCategoryView('cinema');
- }
-
- // Initialize TV-Style Keyboard Navigation
- const nav = new KeyboardNavigation();
- nav.init();
-
- // Register PWA Service Worker
- if ('serviceWorker' in navigator) {
- window.addEventListener('load', () => {
- navigator.serviceWorker.register('/sw.js')
- });
- }
-
- SplashScreen.update(100, 'Welcome to StreamFlix');
-
- // Initialize Native Status Bar
- try {
- await StatusBar.setStyle({ style: Style.Dark });
- await StatusBar.setBackgroundColor({ color: '#141414' });
- } catch (e) {
- // Fail silently
- }
-}
-
-/**
- * Render hero section with featured movie
- * @param {Object} video - Optional video object to render (defaults to state.featuredVideo)
- */
-function renderHero(video = null) {
- const heroTitle = document.getElementById('heroTitle');
- const heroDescription = document.getElementById('heroDescription');
- const heroBg = document.getElementById('heroBg');
- const heroTag = document.getElementById('heroTag');
- const heroTagContainer = document.getElementById('heroTagContainer');
- const heroPlayBtn = document.getElementById('heroPlayBtn');
- const heroInfoBtn = document.getElementById('heroInfoBtn');
- const heroContent = document.getElementById('heroContent');
-
- // Get featured video (param, or state.featuredVideo, or first video)
- const featured = video || state.featuredVideo || state.videos[0];
-
- if (!featured) {
- return;
- }
-
- // Add fade out effect
- if (heroBg) heroBg.style.opacity = '0.5';
- if (heroContent) heroContent.style.opacity = '0';
-
- setTimeout(() => {
- // Update hero content
- if (heroTitle) heroTitle.textContent = featured.name || featured.title || 'Featured Movie';
- if (heroDescription) heroDescription.textContent = featured.description || featured.content || 'Watch now on StreamFlix';
-
- // Set background
- const backdrop = featured.backdrop || featured.poster_url || featured.thumb_url || featured.thumbnail || '';
- if (heroBg && backdrop) {
- heroBg.style.backgroundImage = `url('${backdrop}')`;
- }
-
- // Set category tag
- if (heroTag && heroTagContainer) {
- const genres = featured.genres || featured.category;
-
- // Unhide container
- heroTagContainer.classList.remove('hidden');
-
- if (genres && Array.isArray(genres) && genres.length > 0) {
- heroTag.textContent = genres[0];
- } else if (typeof genres === 'string') {
- heroTag.textContent = genres;
- } else {
- heroTag.textContent = '#1 in Movies Today';
- }
- }
-
- // Play button
- // Remove old listeners to prevent stacking
- if (heroPlayBtn && heroPlayBtn.parentNode) {
- const newPlayBtn = heroPlayBtn.cloneNode(true);
- heroPlayBtn.parentNode.replaceChild(newPlayBtn, heroPlayBtn);
- newPlayBtn.addEventListener('click', () => {
- hapticMedium();
- handleVideoPlay(featured);
- });
- }
-
- // Info button
- if (heroInfoBtn && heroInfoBtn.parentNode) {
- const newInfoBtn = heroInfoBtn.cloneNode(true);
- heroInfoBtn.parentNode.replaceChild(newInfoBtn, heroInfoBtn);
- newInfoBtn.addEventListener('click', () => handleShowInfo(featured));
- }
-
- // Fade in
- if (heroBg) heroBg.style.opacity = '1';
- if (heroContent) heroContent.style.opacity = '1';
- }, 300);
-
- state.featuredVideo = featured;
-}
-
-/**
- * Start Hero Carousel
- */
-function startHeroCarousel() {
- if (state.heroInterval) clearInterval(state.heroInterval);
-
- // Only start if we have multiple movies
- if (!state.heroMovies || state.heroMovies.length <= 1) return;
-
- state.heroInterval = setInterval(() => {
- state.currentHeroIndex++;
- if (state.currentHeroIndex >= state.heroMovies.length) {
- state.currentHeroIndex = 0;
- }
- renderHero(state.heroMovies[state.currentHeroIndex]);
- }, 8000); // 8 seconds
-}
-
-/**
- * Stop Hero Carousel
- */
-function stopHeroCarousel() {
- if (state.heroInterval) {
- clearInterval(state.heroInterval);
- state.heroInterval = null;
- }
-}
-
-/**
- * Set up event listeners
- */
-function setupEventListeners() {
- // Header Scroll Effect - Master Instruction Logic
- const backToTopBtn = document.getElementById('backToTop');
- const handleScroll = () => {
- const scrollY = window.scrollY;
-
- // Header background change
- if (elements.mainHeader) {
- if (scrollY > 100) {
- elements.mainHeader.classList.add('scrolled');
- elements.mainHeader.style.backgroundColor = '#141414'; // Strict Netflix Black
- } else {
- elements.mainHeader.classList.remove('scrolled');
- elements.mainHeader.style.backgroundColor = 'transparent'; // Gradient handled by CSS
- }
- }
-
- // Back to top button visibility
- if (backToTopBtn) {
- if (scrollY > 500) {
- backToTopBtn.classList.add('visible');
- } else {
- backToTopBtn.classList.remove('visible');
- }
- }
- };
- window.addEventListener('scroll', handleScroll, { passive: true });
- // Initial check
- handleScroll();
-
- // Back to Top Button Click Handler
- if (backToTopBtn) {
- backToTopBtn.addEventListener('click', () => {
- window.scrollTo({
- top: 0,
- behavior: 'smooth'
- });
- });
- }
-
- // Expandable Search Logic - REMOVED (Unifying with Modal)
-
- // Category Navigation
- elements.navLinks?.forEach(link => {
- link.addEventListener('click', (e) => {
- e.preventDefault();
- const category = link.dataset.category;
-
- // Update active state
- elements.navLinks.forEach(l => l.classList.remove('active'));
- link.classList.add('active');
-
- // Load content for category
- state.currentCategory = category;
- loadVideos(category, true); // true = reset pagination
- });
- });
-
- // Mobile & Sidebar Navigation
- elements.mobileNavItems?.forEach(item => {
- item.addEventListener('click', (e) => {
- e.preventDefault();
- const view = item.dataset.view;
-
- // Update active state
- elements.mobileNavItems.forEach(i => i.classList.remove('active'));
- // If it's a sidebar item, we might need to activate all matching items (desktop + mobile logic if split)
- // For now just activate clicked
- item.classList.add('active');
-
- // Sync other items with same view (e.g. if both mobile nav and sidebar exist)
- elements.mobileNavItems.forEach(i => {
- if (i.dataset.view === view) i.classList.add('active');
- });
-
- if (view === 'home') {
- elements.videoGrid.style.display = 'block';
- const newHot = document.getElementById('newHotContainer');
- if (newHot) newHot.style.display = 'none';
- state.currentCategory = 'all';
- loadVideos('all', true);
- } else if (['movies', 'series', 'animation', 'cinema'].includes(view)) {
- // Category Views
- elements.videoGrid.style.display = 'block';
- const newHot = document.getElementById('newHotContainer');
- if (newHot) newHot.style.display = 'none';
-
- state.currentCategory = view;
- loadVideos(view, true); // loadVideos handles the API call with category param
- } else if (view === 'history') {
- // History & My List View (SPA)
- elements.videoGrid.style.display = 'block';
- const newHot = document.getElementById('newHotContainer');
- if (newHot) newHot.style.display = 'none';
- renderHistoryView();
- } else if (view === 'search') {
- // Trigger search modal instead of legacy view
- const searchBtn = document.getElementById('headerSearchBtn');
- if (searchBtn) searchBtn.click();
- }
-
- // Roll back to hero banner (scroll to top)
- window.scrollTo({ top: 0, behavior: 'smooth' });
- });
- });
-
- // Netflix Header Navigation (Desktop Top Nav)
- const netflixNavLinks = document.querySelectorAll('.netflix-header__nav-link');
- netflixNavLinks.forEach(link => {
- link.addEventListener('click', (e) => {
- e.preventDefault();
- const view = link.dataset.view;
-
- // Update active state on Netflix header
- netflixNavLinks.forEach(l => l.classList.remove('active'));
- link.classList.add('active');
-
- // Sync sidebar/mobile items
- elements.mobileNavItems.forEach(i => {
- i.classList.remove('active');
- if (i.dataset.view === view) i.classList.add('active');
- });
-
- // Handle view switching
- elements.videoGrid.style.display = 'block';
- const newHot = document.getElementById('newHotContainer');
- if (newHot) newHot.style.display = 'none';
-
- if (view === 'home') {
- state.currentCategory = 'all';
- loadVideos('all', true);
- } else if (['movies', 'series', 'animation', 'cinema'].includes(view)) {
- state.currentCategory = view;
- loadVideos(view, true);
- } else if (view === 'history') {
- renderHistoryView();
- }
-
- // Roll back to hero banner (scroll to top)
- window.scrollTo({ top: 0, behavior: 'smooth' });
- });
- });
-
- // Netflix Header Search Button
- const headerSearchBtn = document.getElementById('headerSearchBtn');
- if (headerSearchBtn) {
- headerSearchBtn.addEventListener('click', (e) => {
- e.preventDefault();
- const searchModal = document.getElementById('searchModal');
- const searchInput = document.getElementById('searchInput');
- if (searchModal) {
- searchModal.classList.add('active');
- if (searchInput) setTimeout(() => searchInput.focus(), 100);
- }
- });
- }
-
- // Mobile Search Button
- const mobileSearchBtn = document.getElementById('mobileSearchBtn');
- if (mobileSearchBtn) {
- mobileSearchBtn.addEventListener('click', (e) => {
- e.preventDefault();
- const searchModal = document.getElementById('searchModal');
- const searchInput = document.getElementById('searchInput');
- if (searchModal) {
- hapticLight();
- searchModal.classList.add('active');
- if (searchInput) setTimeout(() => searchInput.focus(), 100);
- }
- });
- }
-
- // Close Search Modal
- const closeSearch = document.getElementById('closeSearch');
- if (closeSearch) {
- closeSearch.addEventListener('click', () => {
- const searchModal = document.getElementById('searchModal');
- if (searchModal) searchModal.classList.remove('active');
- });
- }
-
- // Modal Player Back Button
- const modalPlayerBackButton = document.getElementById('modalPlayerBackButton');
- if (modalPlayerBackButton) {
- modalPlayerBackButton.addEventListener('click', () => {
- hapticLight();
- if (window.history.state?.playerOpen) {
- window.history.back();
- } else {
- closePlayerModal();
- }
- });
- }
-
- // Global Popstate for Modal Player
- window.addEventListener('popstate', (event) => {
- if (elements.playerModal?.classList.contains('active') && !event.state?.playerOpen) {
- closePlayerModal(false);
- }
- });
-
- // StreamFlix Nav Links (Tailwind design)
- const streamflixNavLinks = document.querySelectorAll('.nav-link');
- streamflixNavLinks.forEach(link => {
- link.addEventListener('click', (e) => {
- // Allow links with real href (not '#') to navigate normally
- const href = link.getAttribute('href');
- if (href && href !== '#' && !href.startsWith('#')) {
- // This is a real link (like Install App), let it navigate
- return;
- }
-
- e.preventDefault();
- const view = link.dataset.view;
-
- // Update active state
- streamflixNavLinks.forEach(l => {
- l.classList.remove('active', 'text-white');
- l.classList.add('text-gray-300');
- });
- link.classList.add('active', 'text-white');
- link.classList.remove('text-gray-300');
-
- // Handle view switching with organized category sections
- if (view === 'home') {
- state.currentCategory = 'all';
- renderCategoryView('home');
- } else if (view === 'series') {
- state.currentCategory = 'series';
- renderCategoryView('series');
- } else if (view === 'movies') {
- state.currentCategory = 'movies';
- renderCategoryView('movies');
- } else if (view === 'cinema') {
- state.currentCategory = 'cinema';
- renderCategoryView('cinema');
- } else if (view === 'history') {
- renderHistoryView();
- }
-
- // Roll back to hero banner (scroll to top)
- window.scrollTo({ top: 0, behavior: 'smooth' });
- });
- });
-
- // Modal close events
- elements.closePlayer?.addEventListener('click', closePlayerModal);
- elements.modalBackdrop?.addEventListener('click', closePlayerModal);
-
-
- // Keyboard shortcuts
- document.addEventListener('keydown', (e) => {
- if (e.key === 'Escape') {
- if (elements.playerModal?.classList.contains('active')) {
- if (window.history.state?.playerOpen) {
- window.history.back();
- } else {
- closePlayerModal();
- }
- }
- if (elements.searchWrapper?.classList.contains('active')) {
- elements.searchWrapper.classList.remove('active');
- }
- // Close search modal
- const searchModal = document.getElementById('searchModal');
- if (searchModal?.classList.contains('active')) {
- searchModal.classList.remove('active');
- }
- }
- });
-}
-
-/**
- * Load videos from API - tries RoPhim first, then database, then demo
- * @param {string} category - Optional category filter
- * @param {boolean} reset - Whether to reset pagination (e.g. category change)
- */
-async function loadVideos(category = 'all', reset = false) {
- if (state.isLoading) return;
- if (reset) {
- state.page = 1;
- state.hasMore = true;
- state.videos = [];
- elements.videoGrid.innerHTML = '';
- }
-
- if (!state.hasMore) return;
-
- state.isLoading = true;
- showLoading(state.page === 1); // Only show full loader on first page
-
- // Helper function to add timeout to fetch
- const fetchWithTimeout = (promise, timeout = 12000) => {
- return Promise.race([
- promise,
- new Promise((_, reject) =>
- setTimeout(() => reject(new Error('Timeout')), timeout)
- )
- ]);
- };
-
- // Top Search Button
- const topSearchBtn = document.getElementById('topSearchBtn');
- if (topSearchBtn) {
- topSearchBtn.addEventListener('click', (e) => {
- e.preventDefault();
- const searchModal = document.getElementById('searchModal');
- const searchInput = document.getElementById('searchInput');
- if (searchModal) {
- searchModal.classList.add('active');
- if (searchInput) setTimeout(() => searchInput.focus(), 100);
- }
- });
- }
-
- try {
-
- let apiResponse = null;
- let isSectionMode = false;
-
- // Section Mode disabled to force Responsive Grid Layout per user request
-
-
- // Fallback: Flat Catalog
- if (!apiResponse) {
- apiResponse = await fetchWithTimeout(
- api.getRophimCatalog({
- category: category !== 'all' ? category : null,
- page: state.page,
- limit: 24
- }), 12000
- );
- }
-
-
-
- if (apiResponse && apiResponse.movies && apiResponse.movies.length > 0) {
-
- // Map API data to Video objects
- const newVideos = apiResponse.movies.map(m => ({
- id: m.id || `api_${Date.now()}_${Math.random()}`,
- title: m.title || 'Unknown Title',
- thumbnail: m.thumbnail || 'https://via.placeholder.com/300x450?text=No+Image',
- backdrop: m.backdrop || m.thumbnail || 'https://via.placeholder.com/1920x1080?text=No+Backdrop',
- preview_url: m.preview_url || '',
- duration: m.duration || 0,
- resolution: m.quality || 'HD',
- category: m.category || 'movies',
- year: m.year || new Date().getFullYear(),
- description: m.description || '',
- matchScore: Math.floor(Math.random() * 15) + 85, // Random high match score
- source_url: m.source_url,
- slug: m.slug,
- // Rich Metadata
- cast: m.cast || [],
- director: m.director,
- country: m.country,
- episodes: m.episodes || []
- }));
-
- // Append new videos
- // Deduplicate based on ID or slug
- const existingIds = new Set(state.videos.map(v => v.id));
- const uniqueNewVideos = newVideos.filter(v => !existingIds.has(v.id));
-
- state.videos = [...state.videos, ...uniqueNewVideos];
- state.page += 1; // Increment page for next fetch
-
- // Detect if we reached end of content? (Usually API returns empty list, but here we got items)
- if (newVideos.length < 24) {
- // state.hasMore = false; // Optional optimization
- }
-
-
- // Force Responsive Grid Layout for ALL categories
- const isFirstBatch = state.page === 2; // Page bumped after fetch
- if (isFirstBatch) {
- renderVideoGrid(state.videos, false);
- } else {
- renderVideoGrid(uniqueNewVideos, true);
- }
-
- // Preload featured video for Hero only on first load
-
-
- // Setup/Update Infinite Scroll trigger
- setupInfiniteScrollTrigger();
-
- // Hide loading state on sentinel
- if (scrollSentinel) scrollSentinel.classList.remove('loading');
-
- state.isLoading = false;
- showLoading(false);
- return;
- } else {
- state.hasMore = false;
- // Hide sentinel when no more content
- if (scrollSentinel) {
- scrollSentinel.classList.remove('loading');
- scrollSentinel.style.display = 'none';
- }
- state.isLoading = false;
- showLoading(false);
- }
-
- } catch (error) {
- console.warn('API load failed:', error);
- // Only fallback to demo on first page load
- if (state.page === 1) {
- showToast('Using offline mode', 'info');
- const demoVideos = getDemoContent();
- state.videos = demoVideos;
- state.featuredVideo = demoVideos[0];
- renderVideoGrid(demoVideos);
-
-
- }
- state.isLoading = false;
- showLoading(false);
- }
-}
-
-/**
- * Render content as horizontal sliders - PhimMoi Style
- * @param {Array} videos - Videos to group
- */
-/**
- * Render content as horizontal sliders - Apple TV+ Style
- * Enhanced with smart categorization and genre-based sections
- * @param {Array} videos - Videos to group
- */
-/**
- * Render content as horizontal sliders - Apple TV+ Style
- * Enhanced with smart categorization and genre-based sections
- * @param {Array} videos - Videos to group
- */
-function renderBackendSection(title, movies, isTop10, container = elements.videoGrid, usedIds = null) {
- if (!movies || movies.length === 0) return;
-
- // Deduplicate if set provided
- let uniqueMovies = movies;
- if (usedIds) {
- uniqueMovies = movies.filter(m => !usedIds.has(m.id || m.slug));
- if (uniqueMovies.length === 0) return;
- uniqueMovies.forEach(m => usedIds.add(m.id || m.slug));
- }
-
- // Normalize
- const normalizedVideo = uniqueMovies.map(m => ({
- id: m.id || m.slug,
- title: m.title,
- thumbnail: m.thumbnail,
- backdrop: m.backdrop || m.thumbnail,
- slug: m.slug,
- year: m.year,
- badge: m.badge,
- ranking: m.ranking
- }));
-
- const section = isTop10
- ? createTop10Section(title, normalizedVideo)
- : createSliderSection(title, normalizedVideo);
-
- container.appendChild(section);
-}
-
-async function renderSliders(videos) {
- elements.videoGrid.innerHTML = '';
- // Use Tailwind CSS layout classes
- elements.videoGrid.className = 'space-y-12';
-
- if (elements.emptyState) elements.emptyState.style.display = 'none';
-
- // 1. DISABLED: Curated sections API was overriding sectionConfigs.
- // Now using only sectionConfigs for full control over categories.
- /*
- try {
- const curatedResponse = await api.getCuratedSections();
-
- if (curatedResponse && curatedResponse.sections && curatedResponse.sections.length > 0) {
-
- curatedResponse.sections.forEach(section => {
- if (section.movies && section.movies.length > 0) {
- // Normalize movies
- const normalizedMovies = section.movies.map(m => ({
- id: m.id || m.slug,
- title: m.title,
- thumbnail: m.thumbnail,
- backdrop: m.poster_url || m.thumbnail,
- slug: m.slug,
- year: m.year,
- quality: m.quality || 'HD',
- resolution: m.quality || 'HD',
- rating: m.rating,
- tmdb_rating: m.tmdb_rating,
- genres: m.genres,
- category: m.category
- }));
-
- // Determine if this is a "Top Rated" section
- const isTopRated = section.title.includes('Top Rated') || section.title.includes('ðŸ†');
-
- const sectionEl = isTopRated
- ? createTop10Section(section.title, normalizedMovies)
- : createSliderSection(section.title, normalizedMovies);
- elements.videoGrid.appendChild(sectionEl);
- }
- });
-
- if (elements.videoGrid.children.length > 0) {
- return;
- }
- }
- } catch (e) {
- console.warn('Curated sections failed, trying backend categories...', e);
- }
- */
-
- // 2. DISABLED: Backend structured categories were also overriding sectionConfigs.
- // All rendering now happens in renderCategoryView() using sectionConfigs.
- /*
- try {
- let backendCategories = null;
-
- // Try categorySystem first, then direct API call
- if (window.categorySystem) {
- backendCategories = await window.categorySystem.loadCategories();
- }
-
- // Fallback: fetch directly from API
- if (!backendCategories) {
- const response = await fetch('/api/rophim/categories/all');
- const data = await response.json();
- backendCategories = data.categories;
- }
-
- if (backendCategories) {
-
- // Defined section order and titles
- const sectionConfig = [
- { key: 'hot', title: '🔥 Phim Hot (Movies)', isTop10: false },
- { key: 'top10', title: '🆠Top 10 Phim Lẻ', isTop10: true },
- { key: 'series', title: '📺 Phim Bộ Mới (Series)', isTop10: false },
- { key: 'cinema', title: '🿠Phim Chiếu Rạp', isTop10: false },
- { key: 'animated', title: '🎌 Hoạt Hình & Anime', isTop10: false },
- { key: 'vietnamese', title: '🇻🇳 Phim Việt Nam', isTop10: false },
- { key: 'tv_shows', title: '🎬 TV Shows', isTop10: false },
- { key: 'action', title: '💥 Action Movies', isTop10: false },
- { key: 'new_releases', title: '✨ Má»›i Cáºp Nháºt', isTop10: false }
- ];
-
- // Track used videos to prevent duplicates across sections
- const globalUsedIds = new Set();
-
- // Render sections in order
- sectionConfig.forEach(config => {
- if (backendCategories[config.key] && backendCategories[config.key].length > 0) {
- // Skip deduplication for Top 10 - it's a ranked section and should always show
- const skipDedup = config.isTop10;
- renderBackendSection(
- config.title,
- backendCategories[config.key],
- config.isTop10,
- elements.videoGrid,
- skipDedup ? null : globalUsedIds
- );
- }
- });
-
- // If we successfully rendered backend categories, return here
- if (elements.videoGrid.children.length > 0) {
- return;
- }
- }
- } catch (e) {
- console.warn('Failed to load backend categories, falling back to local logic', e);
- }
- */
-
- // --- FALLBACK / ORIGINAL LOGIC ---
-
- // Sort videos by year descending (newest first)
- videos.sort((a, b) => (b.year || 0) - (a.year || 0));
-
- // Track videos already added to sections to prevent duplicates
- const usedVideoIds = new Set();
-
- /**
- * Helper: Add videos to a section and track them
- */
- function addSection(title, videos, isTop10 = false) {
- if (!videos || videos.length === 0) return;
-
- // Filter out already-used videos
- const availableVideos = videos.filter(v => !usedVideoIds.has(v.id));
- if (availableVideos.length === 0) return;
-
- // Take up to 12 videos (or 10 for Top10)
- const limit = isTop10 ? 10 : 12;
- const sectionVideos = availableVideos.slice(0, limit);
-
- // Mark videos as used
- sectionVideos.forEach(v => usedVideoIds.add(v.id));
-
- // Create and append section
- const section = isTop10
- ? createTop10Section(title, sectionVideos)
- : createSliderSection(title, sectionVideos);
- elements.videoGrid.appendChild(section);
-
- }
-
- /**
- * Helper: Extract unique genres from videos
- */
- function extractGenres(videos) {
- const genreCounts = {};
- videos.forEach(v => {
- if (v.category && typeof v.category === 'string') {
- // Normalize category names
- const normalized = v.category.toLowerCase();
- const genreMap = {
- 'phim-le': 'Movies',
- 'phim-bo': 'Series',
- 'hoat-hinh': 'Animation',
- 'tv-shows': 'TV Shows'
- };
- const genre = genreMap[normalized] || v.category;
- genreCounts[genre] = (genreCounts[genre] || 0) + 1;
- }
- });
- return genreCounts;
- }
-
- // ==========================================
- // PRIORITY SECTION 1: Featured/Top Content
- // ==========================================
- addSection('Top Charts: Movies', videos, true);
-
- // ==========================================
- // PRIORITY SECTION 2: Year-Based (Newest First)
- // ==========================================
- const currentYear = new Date().getFullYear();
-
- addSection('2024 New Releases',
- videos.filter(v => v.year === currentYear));
-
- addSection('2023 Hits',
- videos.filter(v => v.year === currentYear - 1));
-
- // ==========================================
- // PRIORITY SECTION 3: Quality-Based
- // ==========================================
- addSection('4K Ultra HD',
- videos.filter(v => v.resolution === '4K' || v.quality === '4K'));
-
- // ==========================================
- // PRIORITY SECTION 4: Category-Based
- // ==========================================
- addSection('Must-Watch Series',
- videos.filter(v => v.category === 'series' || v.category === 'phim-bo' || v.category === 'tv-shows'));
-
- addSection('Anime & Animation',
- videos.filter(v => v.category === 'anime' || v.category === 'hoat-hinh'));
-
- addSection('Action & Blockbusters',
- videos.filter(v => v.category === 'movies' || v.category === 'theater' || v.category === 'phim-le'));
-
- // ==========================================
- // PRIORITY SECTION 5: Country/Region-Based
- // ==========================================
- addSection('Korean Cinema',
- videos.filter(v => v.country && (v.country.includes('Korea') || v.country.includes('Hà n Quốc'))));
-
- addSection('Japanese Films',
- videos.filter(v => v.country && (v.country.includes('Japan') || v.country.includes('Nháºt Bản'))));
-
- addSection('Hollywood Blockbusters',
- videos.filter(v => v.country && (v.country.includes('US') || v.country.includes('USA') || v.country.includes('Mỹ'))));
-
- addSection('European Collection',
- videos.filter(v => v.country && (
- v.country.includes('UK') || v.country.includes('France') ||
- v.country.includes('Germany') || v.country.includes('Spain') ||
- v.country.includes('Anh') || v.country.includes('Pháp') || v.country.includes('Äức')
- )));
-
- addSection('Asian Cinema',
- videos.filter(v => v.country && (
- v.country.includes('China') || v.country.includes('Thailand') ||
- v.country.includes('Hong Kong') || v.country.includes('Taiwan') ||
- v.country.includes('Trung Quốc') || v.country.includes('Thái Lan') || v.country.includes('Hồng Kông')
- )));
-
- // ==========================================
- // PRIORITY SECTION 6: Time-Period Based
- // ==========================================
- addSection('Recent Favorites (2020-2022)',
- videos.filter(v => v.year && v.year >= 2020 && v.year <= 2022));
-
- addSection('Modern Classics (2015-2019)',
- videos.filter(v => v.year && v.year >= 2015 && v.year < 2020));
-
- addSection('Timeless Classics',
- videos.filter(v => v.year && v.year < 2015));
-
- // ==========================================
- // PRIORITY SECTION 7: Dynamic Genre Sections
- // ==========================================
- // Get remaining unused videos
- const unusedVideos = videos.filter(v => !usedVideoIds.has(v.id));
-
- if (unusedVideos.length > 0) {
- const genreCounts = extractGenres(unusedVideos);
-
- // Sort genres by count and create sections for top genres
- const sortedGenres = Object.entries(genreCounts)
- .sort((a, b) => b[1] - a[1])
- .slice(0, 5);
-
- sortedGenres.forEach(([genre, count]) => {
- if (count >= 6) {
- addSection(`${genre} Collection`,
- unusedVideos.filter(v => v.category === genre || v.category?.toLowerCase().includes(genre.toLowerCase())));
- }
- });
- }
-
- // ==========================================
- // FINAL FALLBACK: Hidden Gems (minimal)
- // ==========================================
- const stillUnused = videos.filter(v => !usedVideoIds.has(v.id));
-
- if (stillUnused.length >= 6) {
- addSection('Hidden Gems', stillUnused);
- }
-
- // Log categorization summary
-}
-
-/**
- * Create a Top 10 Section with numbered rankings - PhimMoi Style
- */
-function createTop10Section(title, videos) {
- const section = document.createElement('section');
- section.className = 'slider-section top10-section';
-
- section.innerHTML = `
- ${title}
-
- `;
-
- const track = section.querySelector('.slider-track');
- videos.slice(0, 10).forEach((video, index) => {
- const card = createRankedCard(video, index + 1);
- track.appendChild(card);
- });
-
- // Mouse drag scrolling removed per user request
-
- // Slider Logic
- const btnLeft = section.querySelector('.slider-btn--left');
- const btnRight = section.querySelector('.slider-btn--right');
-
- btnRight.addEventListener('click', () => {
- track.scrollBy({ left: window.innerWidth * 0.6, behavior: 'smooth' });
- });
-
- btnLeft.addEventListener('click', () => {
- track.scrollBy({ left: -window.innerWidth * 0.6, behavior: 'smooth' });
- });
-
- return section;
-}
-
-/**
- * Create a ranked card with number - PhimMoi Top 10 style
- */
-function createRankedCard(video, rank) {
- const card = document.createElement('div');
- card.className = 'ranked-card';
- card.innerHTML = `
- ${rank}
-
-
-
${video.resolution || 'HD'}
-
-
${video.title}
-
${video.year || ''} • ${video.country || ''}
-
-
-
-
-
-
-
-
- ${!showRank && year === new Date().getFullYear().toString() ? `NEW` : ''}
- ${video.quality ? `${video.quality.replace('FHD', 'HD')}` : ''}
- ${video.current_episode ? `EP ${video.current_episode}` : ''}
-
-
-
- ${showRank ? `
${rank}` : ''}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- ${matchScore}% Match
- ${quality}
- ${year}
-
-
-
-
-
-
- local_pizza ${rtScore}%
-
-
- ${video.genres && video.genres.length > 0 ? `
${video.genres[0]}` : ''}
-
-
-
- ${title}
-
-
-
-
- ${title}
- ${episode ? `${episode}` : ''}
-
- `;
-
- card.addEventListener('click', () => handleVideoPlay(video));
- return card;
-}
-
-
-
-
-/**
- * Render video grid (standard grid for search/categories)
- * @param {Array} videos - Array of video objects
- * @param {boolean} append - Whether to append to existing grid
- */
-function renderVideoGrid(videos, append = false) {
- // If not appending, clear the grid
- if (!append) {
- elements.videoGrid.innerHTML = '';
- elements.videoGrid.innerHTML = '';
- elements.videoGrid.className = 'grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 gap-x-4 gap-y-10';
- }
-
- if (videos.length === 0 && !append) {
- if (elements.emptyState) elements.emptyState.style.display = 'flex';
- return;
- }
-
- if (elements.emptyState) elements.emptyState.style.display = 'none';
-
- videos.forEach(video => {
- const card = createVideoCard(video, handleVideoPlay, handleShowInfo);
- elements.videoGrid.appendChild(card);
- });
-}
-
-function renderInfiniteGrid(videos) {
-
- if (!videos || videos.length === 0) {
- console.warn('No videos to render in infinite grid');
- return;
- }
-
- let infiniteContainer = document.getElementById('infinite-scroll-container');
- if (!infiniteContainer) {
- infiniteContainer = document.createElement('div');
- infiniteContainer.id = 'infinite-scroll-container';
- // Reduce top margin as the "Khám Phá Thêm" header from renderSliders already provides spacing
- infiniteContainer.style.marginTop = '1vw';
- elements.videoGrid.appendChild(infiniteContainer);
-
- // Removed redundant 'More to Explore' header here as it duplicates the one from renderSliders
- }
-
- // Group videos by year
- const currentYear = new Date().getFullYear();
- const moviesByYear = {};
-
- videos.forEach(video => {
- const year = video.year || currentYear;
- if (!moviesByYear[year]) {
- moviesByYear[year] = [];
- }
- moviesByYear[year].push(video);
- });
-
- // Sort years descending (newest first)
- const years = Object.keys(moviesByYear).sort((a, b) => b - a);
-
- // Create slider sections for each year
- let cardsAdded = 0;
- years.forEach(year => {
- const movies = moviesByYear[year];
- if (movies.length > 0) {
- const yearLabel = year == currentYear ? `${year} New Releases` :
- year == currentYear - 1 ? `${year} Hits` :
- `${year} Movies`;
- const section = createSliderSection(yearLabel, movies);
- infiniteContainer.appendChild(section);
- cardsAdded += movies.length;
- }
- });
-
-}
-
-let scrollObserver;
-let scrollSentinel = null;
-let lastScrollTrigger = 0; // Debounce timer
-
-function setupInfiniteScrollTrigger() {
- // If no more content, hide sentinel and don't set up observer
- if (!state.hasMore) {
- if (scrollSentinel) {
- scrollSentinel.classList.remove('loading');
- scrollSentinel.style.display = 'none';
- }
- if (scrollObserver) scrollObserver.disconnect();
- return;
- }
-
- if (scrollObserver) scrollObserver.disconnect();
-
- // Remove any existing sentinels first to prevent duplicates
- document.querySelectorAll('.scroll-sentinel').forEach(el => el.remove());
- scrollSentinel = null;
-
- const options = {
- root: null,
- rootMargin: '50px', // Reduced from 200px to prevent early triggering
- threshold: 0.0 // Trigger when any part is visible
- };
-
- scrollObserver = new IntersectionObserver((entries) => {
- entries.forEach(entry => {
- // Debounce: require at least 1.5 seconds between triggers
- const now = Date.now();
- if (now - lastScrollTrigger < 1500) {
- return;
- }
- if (entry.isIntersecting && !state.isLoading && state.hasMore) {
- lastScrollTrigger = now;
- // Show loading state on sentinel
- if (scrollSentinel) scrollSentinel.classList.add('loading');
- loadVideos(state.currentCategory);
- }
- });
- }, options);
-
- // Create single sentinel element
- scrollSentinel = document.createElement('div');
- scrollSentinel.className = 'scroll-sentinel';
- scrollSentinel.id = 'scrollSentinel';
-
- // Place sentinel at the proper location - after infinite container or at end of videoGrid
- const infiniteContainer = document.getElementById('infinite-scroll-container');
- if (infiniteContainer) {
- // Insert after the infinite container for proper positioning
- infiniteContainer.parentNode.insertBefore(scrollSentinel, infiniteContainer.nextSibling);
- } else {
- elements.videoGrid.appendChild(scrollSentinel);
- }
-
- scrollObserver.observe(scrollSentinel);
-}
-
-function handleShowInfo(video) {
- navigateToWatch(video);
-}
-
-/**
- * Render History View - Shows user's watch history and saved content
- * @param {string} tab - 'history' or 'mylist'
- */
-function renderHistoryView(tab = 'history') {
- if (elements.mainHeader) elements.mainHeader.style.display = '';
- if (!window.historyService) {
- console.error('HistoryService not initialized');
- return;
- }
-
- // Clear the grid
- elements.videoGrid.innerHTML = '';
- if (elements.emptyState) elements.emptyState.style.display = 'none';
-
- // Remove any existing history tabs
- const existingTabs = document.querySelector('.view-tabs');
- if (existingTabs) existingTabs.remove();
-
- // Create tabs for switching between History and My List
- const tabsContainer = document.createElement('div');
- tabsContainer.className = 'view-tabs';
- tabsContainer.innerHTML = `
-
-
- `;
- elements.videoGrid.before(tabsContainer);
-
- // Tab click listeners
- tabsContainer.querySelectorAll('.view-tab').forEach(btn => {
- btn.addEventListener('click', () => {
- tabsContainer.remove();
- renderHistoryView(btn.dataset.tab);
- });
- });
-
- let items = [];
- if (tab === 'history') {
- items = window.historyService.getHistory();
- } else {
- items = window.historyService.getFavorites();
- }
-
- if (items.length === 0) {
- if (elements.emptyState) {
- elements.emptyState.style.display = 'flex';
- const emptyTitle = elements.emptyState.querySelector('h2');
- const emptyDesc = elements.emptyState.querySelector('p');
-
- if (tab === 'history') {
- if (emptyTitle) emptyTitle.textContent = 'No history yet';
- if (emptyDesc) emptyDesc.textContent = 'Movies you watch will appear here.';
- } else {
- if (emptyTitle) emptyTitle.textContent = 'My List is empty';
- if (emptyDesc) emptyDesc.textContent = 'Add movies to your list to watch later.';
- }
- }
- return;
- }
-
- // 1. Sort by Latest (Year/Date)
- items.sort((a, b) => {
- const dateA = a.timestamp || a.year || 0;
- const dateB = b.timestamp || b.year || 0;
- return dateB - dateA;
- });
-
- // Normalize items with horizontal orientation for slider
- const normalizedItems = items.map((item, index) => {
- return {
- ...item,
- id: item.id || item.slug,
- orientation: 'horizontal'
- };
- });
-
- // Ensure header is shown
- if (elements.mainHeader) elements.mainHeader.style.display = 'block';
-
- // Use horizontal slider layout (same as home page)
- const title = tab === 'history' ? 'Continue Watching' : 'My List';
- const sliderSection = createSliderSection(title, normalizedItems, 'poster');
- elements.videoGrid.appendChild(sliderSection);
-}
-
-/**
- * Render Library View - Legacy fallback for history/favorites
- */
-function renderLibraryView() {
- renderHistoryView('mylist');
-}
-
-/**
- * Render Movies View - Shows movies in horizontal sliders organized by year
- */
-async function renderMoviesView() {
- // Show loading state
- showLoading(true);
-
- // Clear the grid
- elements.videoGrid.innerHTML = '';
- if (elements.emptyState) elements.emptyState.style.display = 'none';
-
- try {
- // Load movies if not already loaded
- if (state.videos.length === 0 || state.currentCategory !== 'movies') {
- state.currentCategory = 'movies';
- state.page = 1;
- state.hasMore = true;
-
- const apiResponse = await api.getRophimCatalog({
- category: 'phim-le', // movies category
- page: 1,
- limit: 48 // Load more movies for better categorization
- });
-
- if (apiResponse && apiResponse.movies && apiResponse.movies.length > 0) {
- state.videos = apiResponse.movies.map(m => ({
- id: m.id || `api_${Date.now()}_${Math.random()}`,
- title: m.title || 'Unknown Title',
- thumbnail: m.thumbnail || 'https://via.placeholder.com/300x450?text=No+Image',
- backdrop: m.backdrop || m.thumbnail || 'https://via.placeholder.com/1920x1080?text=No+Backdrop',
- preview_url: m.preview_url || '',
- duration: m.duration || 0,
- resolution: m.quality || 'HD',
- category: m.category || 'movies',
- year: m.year || new Date().getFullYear(),
- description: m.description || '',
- matchScore: Math.floor(Math.random() * 15) + 85,
- source_url: m.source_url,
- slug: m.slug,
- cast: m.cast || [],
- director: m.director,
- country: m.country,
- episodes: m.episodes || []
- }));
- }
- }
-
- // Group movies by year
- const moviesByYear = {};
- const currentYear = new Date().getFullYear();
-
- state.videos.forEach(video => {
- const year = video.year || currentYear;
- if (!moviesByYear[year]) {
- moviesByYear[year] = [];
- }
- moviesByYear[year].push(video);
- });
-
- // Sort years descending (newest first)
- const years = Object.keys(moviesByYear).sort((a, b) => b - a);
-
- // Create slider sections for each year
- years.forEach(year => {
- const movies = moviesByYear[year];
- if (movies.length > 0) {
- const yearLabel = year == currentYear ? `${year} New Releases` :
- year == currentYear - 1 ? `${year} Hits` :
- `${year} Movies`;
- const section = createSliderSection(yearLabel, movies);
- elements.videoGrid.appendChild(section);
- }
- });
-
- showLoading(false);
-
- } catch (error) {
- console.error('Error loading movies:', error);
- showLoading(false);
- if (elements.emptyState) elements.emptyState.style.display = 'flex';
- }
-}
-
-
-/**
- * Render demo content when API is not available
- */
-function renderDemoContent() {
- // Using CORS-friendly sample videos that work in browsers
- const SAMPLE_VIDEO = 'https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8'; // Big Buck Bunny HLS
- const SAMPLE_MP4 = 'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4';
-
- const demoVideos = [
- {
- id: 1,
- title: 'Venom: The Last Dance',
- thumbnail: 'https://image.tmdb.org/t/p/w500/aosm8NMQ3UyoBVpSxyimorCQykC.jpg',
- backdrop: 'https://image.tmdb.org/t/p/original/3V4kLQg0kSqPLctI5ziYWabAZYF.jpg',
- duration: 7200,
- resolution: '4K',
- category: 'movies',
- year: 2024,
- description: 'Eddie và Venom đang chạy trốn. Bị cả hai hai thế giới truy đuổi, hỠbuộc phải đưa ra quyết định khốc liệt...',
- }
- ];
-
- // Fuzzy match title
- const isBanner = bannerCategories.some(cat => title.includes(cat));
-
- // Attempt to find a video with a real backdrop first (landscape)
- // to avoid stretching portrait thumbnails
- const bannerVideo = videos.find(v => v.backdrop && v.backdrop !== v.thumbnail) || videos[0] || {};
- const backdrop = bannerVideo.backdrop || bannerVideo.thumbnail || '';
-
- // If we are using a thumbnail (likely portrait), apply blur
- const isPortrait = backdrop === bannerVideo.thumbnail;
- const bgStyle = isPortrait ? `background-image: url('${backdrop}'); filter: blur(20px) brightness(0.7); transform: scale(1.2);` : `background-image: url('${backdrop}');`;
-
- if (isBanner && backdrop) {
- // Create Banner Header with separate BG for zoom effects
- const bannerHeader = document.createElement('div');
- bannerHeader.className = 'section-banner group';
-
- bannerHeader.innerHTML = `
-
-
-
-
${title}
- Explore Collection ›
-
- `;
- section.appendChild(bannerHeader);
- } else {
- // Standard Header
- const header = document.createElement('h2');
- header.className = 'section-title-apple';
- header.textContent = title;
- section.appendChild(header);
- }
-
- // Split videos into chunks (Rows)
- const rowSize = 21;
-
- const createRow = (rowVideos) => {
- const container = document.createElement('div');
- container.className = 'slider-container';
- // Add vertical spacing between rows
- container.style.marginBottom = '1.5rem';
-
- container.innerHTML = `
-
-
-
-
-
- `;
-
- const track = container.querySelector('.slider-track');
- rowVideos.forEach(video => {
- const card = createVideoCard(video, handleVideoPlay, handleShowInfo);
- track.appendChild(card);
- });
-
- // Slider Logic
- const btnLeft = container.querySelector('.slider-btn--left');
- const btnRight = container.querySelector('.slider-btn--right');
-
- btnRight.addEventListener('click', () => {
- track.scrollBy({ left: window.innerWidth * 0.7, behavior: 'smooth' });
- });
-
- btnLeft.addEventListener('click', () => {
- track.scrollBy({ left: -window.innerWidth * 0.7, behavior: 'smooth' });
- });
-
- return container;
- };
-
- // Create rows
- for (let i = 0; i < videos.length; i += rowSize) {
- const chunk = videos.slice(i, i + rowSize);
- // Avoid creating a tiny final row if it has very few items compared to rowSize,
- // unless it's the only row.
- if (i > 0 && chunk.length < 5) break;
-
- section.appendChild(createRow(chunk));
- }
-
- return section;
- function setupInfiniteScrollTrigger() {
- // If no more content, hide sentinel and don't set up observer
- if (!state.hasMore) {
- if (scrollSentinel) {
- scrollSentinel.classList.remove('loading');
- scrollSentinel.style.display = 'none';
- }
- if (scrollObserver) scrollObserver.disconnect();
- return;
- }
-
- if (scrollObserver) scrollObserver.disconnect();
-
- // Remove any existing sentinels first to prevent duplicates
- document.querySelectorAll('.scroll-sentinel').forEach(el => el.remove());
- scrollSentinel = null;
-
- const options = {
- root: null,
- rootMargin: '50px', // Reduced from 200px to prevent early triggering
- threshold: 0.0 // Trigger when any part is visible
- };
-
- scrollObserver = new IntersectionObserver((entries) => {
- entries.forEach(entry => {
- // Debounce: require at least 1.5 seconds between triggers
- const now = Date.now();
- if (now - lastScrollTrigger < 1500) {
- return;
- }
- if (entry.isIntersecting && !state.isLoading && state.hasMore) {
- lastScrollTrigger = now;
- // Show loading state on sentinel
- if (scrollSentinel) scrollSentinel.classList.add('loading');
- loadVideos(state.currentCategory);
- }
- });
- }, options);
-
- // Create single sentinel element
- scrollSentinel = document.createElement('div');
- scrollSentinel.className = 'scroll-sentinel';
- scrollSentinel.id = 'scrollSentinel';
-
- // Place sentinel at the proper location - after infinite container or at end of videoGrid
- const infiniteContainer = document.getElementById('infinite-scroll-container');
- if (infiniteContainer) {
- // Insert after the infinite container for proper positioning
- infiniteContainer.parentNode.insertBefore(scrollSentinel, infiniteContainer.nextSibling);
- } else {
- elements.videoGrid.appendChild(scrollSentinel);
- }
-
- scrollObserver.observe(scrollSentinel);
- }
-
- function handleShowInfo(video) {
-
- // Smart Recommendations: Filter by category/genre
- let recommendations = state.videos.filter(v =>
- v.id !== video.id &&
- (v.category === video.category || v.resolution === video.resolution)
- );
-
- // Fallback if not enough matches
- if (recommendations.length < 6) {
- const remaining = state.videos.filter(v => v.id !== video.id && !recommendations.includes(v));
- recommendations = [...recommendations, ...remaining];
- }
-
- // Shuffle and slice
- recommendations = recommendations.sort(() => Math.random() - 0.5).slice(0, 6);
-
- const modal = createInfoModal(video, (modalEl) => {
- modalEl.classList.remove('active');
- setTimeout(() => modalEl.remove(), 400);
- }, handleVideoPlay, recommendations);
-
- }
-}
-
-/**
- * Render hero section with featured content
- */
-
-
-/**
- * Handle video play action - Navigate to dedicated watch page
- * @param {Object} video - Video object
- */
-function handleVideoPlay(video) {
- // Store video data in sessionStorage for the watch page
- sessionStorage.setItem('currentVideo', JSON.stringify(video));
-
- // Store all videos for recommendations
- sessionStorage.setItem('allVideos', JSON.stringify(state.videos));
-
- // Navigate directly to the watch page (no pushState needed for full page navigation)
- navigateToWatch(video);
-}
-
-function navigateToWatch(video) {
- window.location.href = `/watch.html?slug=${video.slug}`;
-}
-
-
-/**
- * Load specific episode with server
- */
-async function loadEpisode(video, episode, server) {
- try {
- let streamUrl = null;
- let poster = video.thumbnail;
-
- // Check if this is a PhimMoiChill movie
- const isPhimMoiChill = video.source_url && (
- video.source_url.includes('royalcanalbikehire') ||
- video.source_url.includes('phimmoichill') ||
- video.source_url.includes('/phim/') ||
- video.slug
- );
-
- if (isPhimMoiChill) {
- showToast('Loading stream...', 'info');
- try {
- const streamData = await api.getRophimStreamByUrl(video.source_url, video.slug, episode, server);
- if (streamData && streamData.stream_url) {
- streamUrl = streamData.stream_url;
- }
- } catch (phimmoiError) {
- console.warn('PhimMoiChill stream extraction failed:', phimmoiError.message);
- }
- }
-
- // Fallback: try yt-dlp extraction
- if (!streamUrl && video.source_url) {
- try {
- const extraction = await api.extractVideo(video.source_url);
- if (extraction && extraction.stream_url) {
- streamUrl = extraction.stream_url;
- poster = extraction.thumbnail || poster;
- }
- } catch (extractError) {
- console.warn('Extraction failed:', extractError.message);
- }
- }
-
- // Final fallback: use source_url directly
- if (!streamUrl && video.source_url) {
- if (video.source_url.match(/\.(mp4|m3u8|webm)(\?|$)/i)) {
- streamUrl = video.source_url;
- }
- }
-
- if (streamUrl) {
- const isEmbedUrl = streamUrl.includes('goatembed') ||
- streamUrl.includes('/embed/') ||
- streamUrl.includes('player.') ||
- (streamUrl.includes('embed') && !streamUrl.match(/\.(mp4|m3u8|webm)/i));
-
- if (isEmbedUrl) {
- elements.playerContainer.innerHTML = `
-
-
-
- `;
- } else {
- const art = initPlayer(elements.playerContainer, {
- url: streamUrl,
- poster: poster,
- title: video.title,
- autoplay: true
- });
-
- // Push state for back navigation
- if (!window.history.state?.playerOpen) {
- window.history.pushState({ playerOpen: true }, '', window.location.href);
- }
-
- if (art && window.historyService) {
- art.on('video:timeupdate', () => {
- const currentTime = art.currentTime;
- const duration = art.duration;
- if (currentTime > 0 && duration > 0 && Math.floor(currentTime) % 5 === 0) {
- window.historyService.addToHistory(video, {
- currentTime,
- duration,
- percentage: (currentTime / duration) * 100,
- episode: 1 // Default to 1 for modal player
- });
- }
- });
- }
- }
- showToast('Playing...', 'success');
- } else {
- throw new Error('Không tìm thấy nguồn phát phim');
- }
-
- } catch (error) {
- console.error('Video playback failed:', error);
- showToast(`Lá»—i: ${error.message}`, 'error');
- elements.playerContainer.innerHTML = `
-
-
-
Cannot load video
-
${video.title}
-
-
${sections[i].title}
`;
- elements.videoGrid.appendChild(placeholder);
- lazyObserver.observe(placeholder);
- }
-
- // Fallback: If hero is still empty, use first available content
-
- if (!state.featuredVideo) {
- if (firstAvailableMovies && firstAvailableMovies.length > 0) {
- state.featuredVideo = firstAvailableMovies[0];
- state.videos = firstAvailableMovies;
- renderHero();
- } else {
- // Absolute final fallback: Demo content to prevent broken UI
- try {
- const demo = getDemoContent();
- if (demo && demo.length > 0) {
- state.featuredVideo = demo[0];
- state.videos = demo;
- renderHero();
- }
- } catch (e) { console.warn('Demo content fallback failed', e); }
- }
- }
-
- // If no sections were rendered, show a message
- if (elements.videoGrid.children.length === 0) {
- elements.videoGrid.innerHTML = `
-
-
movie
-
No content available for this category
-
-
error
-
Failed to load content. Please try again.
-
${item.title}
- ${item.sub}
- ›
- `;
-
- card.addEventListener('click', () => {
- // Scroll to section logic
- const titles = Array.from(document.querySelectorAll('.section-title-apple, .section-banner__title'));
- const target = titles.find(t => t.textContent.includes(item.tag));
- if (target) {
- target.closest('section')?.scrollIntoView({ behavior: 'smooth', block: 'center' });
- } else {
- console.warn("Section not found:", item.tag);
- }
- });
- track.appendChild(card);
- });
-
- section.appendChild(track);
- return section;
-}
-/**
- * Render Profile View - Mobile first profile screen
- */
-function renderProfileView() {
- // Show standard header and hero section
- if (elements.mainHeader) elements.mainHeader.style.display = '';
- const heroContainer = document.getElementById('heroContainer');
- if (heroContainer) {
- heroContainer.style.display = '';
- renderHero();
- }
-
- // Update bottom nav active state (profile is not in nav, so none will be active)
- setMobileNavActive('profile');
-
- // Clear content
- elements.videoGrid.innerHTML = '';
- elements.videoGrid.className = 'profile-view pb-24 bg-background-light dark:bg-background-dark min-h-screen';
-
- // HTML Structure based on user example
- const profileHTML = `
-
-
-
-
Profile
-
-
-
-
- `;
-
- elements.videoGrid.innerHTML = profileHTML;
-
- // Inject history
- if (window.historyService) {
- const historyItems = window.historyService.getHistory().slice(0, 10);
- if (historyItems.length > 0) {
- const historyContainer = document.getElementById('profileHistoryContainer');
- // Re-use createSliderSection. Note: it has padding baked in from previous task.
- // We might want to ensure it looks good here.
- const slider = createSliderSection('Continue Watching', historyItems, 'landscape');
- historyContainer.appendChild(slider);
- }
- }
-}
-
-/**
- * Render Home View Wrapper
- */
-async function renderHome() {
- if (elements.mainHeader) elements.mainHeader.style.display = '';
-
- // Show hero section
- const heroContainer = document.getElementById('heroContainer');
- if (heroContainer) heroContainer.style.display = '';
-
- // Update bottom nav
- setMobileNavActive('home');
-
- // Hide footer on mobile
- if (window.innerWidth < 768) {
- document.querySelectorAll('footer').forEach(f => f.style.display = 'none');
- const searchModal = document.getElementById('searchModal');
- if (searchModal) searchModal.classList.remove('active');
- } else {
- document.querySelectorAll('footer').forEach(f => f.style.display = '');
- }
-
- await renderCategoryView('home');
-}
-
-/**
- * Render Mobile Search View
- */
-async function renderMobileSearch() {
- // Show standard header and hero section
- if (elements.mainHeader) elements.mainHeader.style.display = '';
- const heroContainer = document.getElementById('heroContainer');
- if (heroContainer) {
- heroContainer.style.display = '';
- renderHero(); // Ensure hero is populated
- }
-
- // Hide all footers on mobile
- document.querySelectorAll('footer').forEach(f => f.style.display = 'none');
-
- // Explicitly hide search modal/popup if it somehow triggered
- const searchModal = document.getElementById('searchModal');
- if (searchModal) searchModal.classList.remove('active');
-
- // Update bottom nav
- setMobileNavActive('search');
-
- // Clear content - leave room for fixed bottom nav (80px = nav height + safe area)
- elements.videoGrid.innerHTML = '';
- elements.videoGrid.className = 'mobile-search-view bg-background-light dark:bg-background-dark';
-
- // HTML Structure based on user example
- const searchHTML = `
-
-
-
-
-
- search
-
-
-
- mic
-
-
-
-
-
-
-
Results for "${query}"
-
- `;
- const grid = resultsContainer.querySelector('.grid');
- response.movies.forEach(movie => {
- const card = document.createElement('div');
- card.className = 'relative group aspect-[2/3] overflow-hidden rounded-lg cursor-pointer';
- card.innerHTML = `
-
-
- `;
- card.addEventListener('click', () => handleVideoPlay(movie));
- grid.appendChild(card);
- });
- } else {
- resultsContainer.innerHTML = `
-
-
search_off
-
No results for "${query}"
-
Search failed. Try again.
';
- }
- }, 300);
- });
-
- // Focus input automatically
- mobileInput.focus();
- }
-
- // Cancel button clears search and restores default content
- const cancelBtn = document.getElementById('mobileSearchCancel');
- if (cancelBtn) {
- cancelBtn.addEventListener('click', () => {
- const input = document.getElementById('mobileSearchInput');
- if (input) {
- input.value = '';
- input.focus();
- }
- // Re-render the mobile search view to restore default content
- renderMobileSearch();
- });
- }
- // Populate Top Searches (Trending)
- try {
- const trending = await api.getRophimCatalog({ category: 'trending', limit: 5 });
- if (trending && trending.movies) {
- const container = document.getElementById('topSearchesList');
- trending.movies.forEach(movie => {
- const el = document.createElement('div');
- el.className = 'group flex items-center gap-3 px-4 py-2 hover:bg-gray-100 dark:hover:bg-white/5 cursor-pointer transition-colors';
- el.innerHTML = `
-
-
-
${movie.title}
-
${movie.year || '2024'}
-
- play_circle
-
- `;
- el.addEventListener('click', () => handleVideoPlay(movie));
- container.appendChild(el);
- });
- }
-
- // Populate Recommended
- const recommended = await api.getRophimCatalog({ category: 'phim-le', limit: 9 });
- if (recommended && recommended.movies) {
- const grid = document.getElementById('recommendedGrid');
- recommended.movies.forEach(movie => {
- const card = document.createElement('div');
- card.className = 'relative group aspect-[2/3] overflow-hidden rounded-lg cursor-pointer';
- card.innerHTML = `
-
- `;
- card.addEventListener('click', () => handleVideoPlay(movie));
- grid.appendChild(card);
- });
- }
-
- } catch (e) {
- console.error('Failed to load mobile search content', e);
- }
-
- // Set up genre filter chip click handlers
- const filterChips = document.querySelectorAll('.search-chip');
- filterChips.forEach(chip => {
- chip.addEventListener('click', async () => {
- const genre = chip.dataset.genre;
- if (!genre) return;
-
- // Update active chip styling
- filterChips.forEach(c => {
- c.classList.remove('active', 'bg-white', 'text-black');
- c.classList.add('bg-gray-200', 'dark:bg-surface-dark');
- const p = c.querySelector('p');
- if (p) {
- p.classList.remove('font-bold');
- p.classList.add('font-medium', 'text-slate-700', 'dark:text-gray-300');
- }
- });
- chip.classList.add('active', 'bg-white', 'text-black');
- chip.classList.remove('bg-gray-200', 'dark:bg-surface-dark');
- const chipP = chip.querySelector('p');
- if (chipP) {
- chipP.classList.add('font-bold');
- chipP.classList.remove('font-medium', 'text-slate-700', 'dark:text-gray-300');
- }
-
- // Fetch and display genre content
- const resultsContainer = document.getElementById('mobileSearchResults');
- if (resultsContainer) {
- resultsContainer.innerHTML = '';
-
- try {
- const response = await api.getRophimCatalog({ category: genre, limit: 12 });
- if (response && response.movies && response.movies.length > 0) {
- const chipName = chip.querySelector('p')?.textContent || genre;
- resultsContainer.innerHTML = `
- ${chipName}
-
- `;
- const grid = resultsContainer.querySelector('.grid');
- response.movies.forEach(movie => {
- const card = document.createElement('div');
- card.className = 'relative group aspect-[2/3] overflow-hidden rounded-lg cursor-pointer';
- card.innerHTML = `
-
- `;
- card.addEventListener('click', () => handleVideoPlay(movie));
- grid.appendChild(card);
- });
- } else {
- resultsContainer.innerHTML = 'No results found
';
- }
- } catch (e) {
- console.error('Genre filter error:', e);
- resultsContainer.innerHTML = 'Failed to load content
';
- }
- }
- });
- });
-}
-
-/**
- * Render Mobile My List View - Netflix-style grid layout
- */
-async function renderMobileMyList() {
- // Show standard header and hero
- if (elements.mainHeader) elements.mainHeader.style.display = '';
- const heroContainer = document.getElementById('heroContainer');
- if (heroContainer) {
- heroContainer.style.display = '';
- renderHero();
- }
-
- // Hide all footers on mobile
- document.querySelectorAll('footer').forEach(f => f.style.display = 'none');
-
- // Explicitly hide search modal/popup
- const searchModal = document.getElementById('searchModal');
- if (searchModal) searchModal.classList.remove('active');
-
- // Update nav active state
- setMobileNavActive('mylist');
-
- // Get saved items
- const items = window.historyService ? window.historyService.getFavorites() : [];
-
- elements.videoGrid.innerHTML = '';
- elements.videoGrid.className = 'mobile-mylist-view min-h-screen bg-background-dark pb-24';
-
- const mylistHTML = `
-
-
-
-
My List
-
-
-
-
-
-
-
-
-
-
- `;
-
- elements.videoGrid.innerHTML = mylistHTML;
-
- // Populate grid with saved items or fallback content
- const grid = document.getElementById('mylistGrid');
-
- if (items.length > 0) {
- items.forEach(movie => {
- const card = document.createElement('div');
- card.className = 'group relative flex flex-col gap-2 cursor-pointer';
- card.innerHTML = `
-
- `;
- card.addEventListener('click', () => handleVideoPlay(movie));
- grid.appendChild(card);
- });
- } else {
- // Load trending as placeholder
- try {
- const trending = await api.getRophimCatalog({ category: 'trending', limit: 12 });
- if (trending && trending.movies) {
- trending.movies.forEach((movie, index) => {
- const card = document.createElement('div');
- card.className = 'group relative flex flex-col gap-2 cursor-pointer';
- card.innerHTML = `
-
-
- ${index === 0 ? '
New
' : ''}
-
-
-
- ${index === 0 ? '
New
' : ''}
-
-
No content found
';
- }
- } catch (e) {
- console.error('Filter error:', e);
- grid.innerHTML = 'Failed to load content
';
- }
- }
- });
- });
-}
diff --git a/frontend/scripts/search.js b/frontend/scripts/search.js
deleted file mode 100755
index 1f1b632..0000000
--- a/frontend/scripts/search.js
+++ /dev/null
@@ -1,196 +0,0 @@
-/**
- * Search Modal Functionality
- */
-
-import { api } from './api.js';
-
-// Search state
-let searchTimeout = null;
-const SEARCH_DEBOUNCE_MS = 300;
-
-// Elements
-const searchModal = document.getElementById('searchModal');
-const searchBackdrop = document.getElementById('searchBackdrop');
-const searchInput = document.getElementById('searchInput');
-const closeSearch = document.getElementById('closeSearch');
-
-const searchLoading = document.getElementById('searchLoading');
-const searchGrid = document.getElementById('searchGrid');
-
-// Search button in sidebar
-const searchNavButton = document.querySelector('[data-view="search"]');
-
-/**
- * Open search modal
- */
-function openSearchModal() {
- searchModal.classList.add('active');
- setTimeout(() => searchInput.focus(), 100);
-}
-
-/**
- * Close search modal
- */
-function closeSearchModal() {
- searchModal.classList.remove('active');
- searchInput.value = '';
- searchGrid.innerHTML = '';
- searchLoading.style.display = 'none';
-}
-
-/**
- * Perform search
- */
-async function performSearch(query) {
- if (!query || query.trim().length < 2) {
- searchGrid.innerHTML = '';
- searchLoading.style.display = 'none';
- return;
- }
-
- // Show loading
- searchLoading.style.display = 'flex';
-
- try {
- // Search in the API
- const response = await api.searchRophim(query);
-
- searchLoading.style.display = 'none';
-
- if (response && response.movies && response.movies.length > 0) {
- // Display results
- searchGrid.innerHTML = response.movies.map(movie => {
- return `
-
-
-
-
-
-
-
-
${movie.title}
-
- ${movie.year || ''}
- ${movie.quality ? `${movie.quality}` : ''}
-
-
-
-
-
-
-
No results found for "${query}"
-
-
Search failed. Please try again.
-
,
)
- elements.movieDescription.innerHTML = description;
- if (elements.movieDescriptionMobile) elements.movieDescriptionMobile.innerHTML = description;
- }
-
- // Mobile Data Population
- if (elements.movieTitleMobile) elements.movieTitleMobile.textContent = video.title;
- if (elements.movieYearMobile) elements.movieYearMobile.textContent = video.year || '';
- if (elements.movieRatingMobile) {
- const rating = video.rating || video.tmdb_rating;
- elements.movieRatingMobile.textContent = (rating && rating !== 'N/A') ? (typeof rating === 'number' ? rating.toFixed(1) : rating) : 'TV-MA';
- }
- if (elements.movieDurationMobile) elements.movieDurationMobile.textContent = elements.movieDuration ? elements.movieDuration.textContent : (video.duration || '');
- if (elements.movieQualityMobile) elements.movieQualityMobile.textContent = video.quality || 'HD';
- if (elements.movieMatchMobile && elements.movieMatch) elements.movieMatchMobile.textContent = elements.movieMatch.textContent;
-
- // Genre Tags
- if (elements.movieTags) {
- const genres = video.genres || [];
- const director = video.director;
- const country = video.country;
-
- let tagsHTML = '';
- if (genres.length > 0) {
- tagsHTML += `
Genres: ${genres.join(', ')}
`;
- }
- if (director && director !== 'Unknown') {
- tagsHTML += `Director: ${director}
`;
- }
- if (country && country !== 'Unknown') {
- tagsHTML += `Country: ${country}
`;
- }
-
- elements.movieTags.innerHTML = tagsHTML;
- }
-
- // Update page title
- document.title = `${video.title} - StreamFlix`;
-
- // Update Add to List button state
- if (window.historyService && video.slug) {
- updateAddListUI(window.historyService.isFavorite(video.slug));
- }
-
- // Render episodes
- renderEpisodes(video);
-
- // Render cast
- if (video.tmdb_cast && video.tmdb_cast.length > 0) {
- renderCast(video.tmdb_cast, true);
- } else if (video.cast && video.cast.length > 0) {
- renderCast(video.cast, false);
- }
-
- // Render additional details
- renderDetails(video);
-}
-
-/**
- * Render episodes grid (StreamFlix Tailwind Design)
- */
-function renderEpisodes(video) {
- if (!elements.episodesPanel) return;
-
- // Get episodes from the API response format
- let episodes = [];
- if (Array.isArray(video.episodes) && video.episodes.length > 0) {
- if (video.episodes[0].server_data) {
- episodes = video.episodes[0].server_data;
- } else {
- episodes = video.episodes;
- }
- }
-
- // Hide episodes section for single-episode movies
- if (episodes.length <= 1) {
- if (elements.seasonSelectContainer) elements.seasonSelectContainer.style.display = 'none';
- if (elements.episodesLoading) elements.episodesLoading.style.display = 'none';
-
- // Show "Play Movie" message instead
- if (elements.episodesGrid) {
- elements.episodesGrid.innerHTML = `
-
-
play_circle
-
-
Full Movie
-
Click Play to watch
-
-
-
${epNumber}
-
-
${epName}
- ${epTitle ? `
${epTitle}
` : ''}
-
- ${isActive ? '
play_circle' : ''}
-
-
-
It cannot load
-
This stream is currently unavailable. Please try again later or choose another source.
-
-
Error loading video: ${msg}
-
-
- ${hasPhoto
- ? `
`
- : `
${initials}
`
- }
-
${person.name}
- ${person.character || 'Actor'}
-
- `;
- }).join('');
- } else {
- elements.castCarousel.innerHTML = displayCast.map(actor => {
- const searchUrl = `/?search=${encodeURIComponent(actor)}`;
- const initials = actor.split(' ').map(n => n[0]).join('').toUpperCase().slice(0, 2);
-
- return `
-
-
- ${initials}
-
- ${actor}
- Actor
-
- `;
- }).join('');
- }
-}
-
-/**
- * Load Recommendations (StreamFlix Tailwind Design)
- */
-/**
- * Load Recommendations (Expanded: Genre, Country, Year)
- */
-async function loadRecommendations() {
- const container = elements.recommendationsContainer;
- if (!container) return;
-
- try {
- container.innerHTML = '';
-
- const video = state.video;
- if (!video) return;
-
- const currentSlug = video.slug;
- const usedSlugs = new Set([currentSlug]);
-
- // 1. Prepare Categories
- const genres = video.category ? Object.values(video.category) : (video.genres || []);
- const countries = video.country ? Object.values(video.country) : (video.countries || []);
- const year = video.year;
-
- const requests = [];
-
- // Category 1: Similar (Genre)
- if (genres.length > 0) {
- let genreSlug = '';
- // Handle both object {id: name} and string array
- if (typeof genres[0] === 'object' && genres[0].slug) {
- genreSlug = genres[0].slug;
- } else if (typeof genres[0] === 'string') {
- genreSlug = genres[0].toLowerCase()
- .normalize('NFD').replace(/[\u0300-\u036f]/g, '')
- .replace(/Ä‘/g, 'd').replace(/\s+/g, '-');
- }
-
- // Adjust slug logic if needed based on API
- // For RoPhim it's often 'the-loai/'
- if (genreSlug) {
- requests.push(
- api.getRophimCatalog({ page: 1, limit: 24, category: `the-loai/${genreSlug}` })
- .then(res => ({ title: "More Like This", movies: res.movies || [] }))
- .catch(() => null)
- );
- }
- }
-
- // Category 2: Same Country
- if (countries.length > 0) {
- let countrySlug = '';
- if (typeof countries[0] === 'object' && countries[0].slug) {
- countrySlug = countries[0].slug;
- } else if (typeof countries[0] === 'string') {
- countrySlug = countries[0].toLowerCase()
- .normalize('NFD').replace(/[\u0300-\u036f]/g, '')
- .replace(/Ä‘/g, 'd').replace(/\s+/g, '-');
- }
-
- if (countrySlug) {
- requests.push(
- api.getRophimCatalog({ page: 1, limit: 24, category: `quoc-gia/${countrySlug}` })
- .then(res => ({ title: `Movies from ${countries[0].name || countries[0]}`, movies: res.movies || [] }))
- .catch(() => null)
- );
- }
- }
-
- // Category 3: Same Year
- if (year) {
- requests.push(
- api.getRophimCatalog({ page: 1, limit: 24, category: `nam-phat-hanh/${year}` })
- .then(res => ({ title: `Released in ${year}`, movies: res.movies || [] }))
- .catch(() => null)
- );
- }
-
- // Execute all requests
- const results = await Promise.all(requests);
-
- container.innerHTML = ''; // Clear loading
-
- const renderedTitles = new Set();
- let hasContent = false;
-
- results.forEach(section => {
- if (!section || !section.movies || section.movies.length === 0) return;
-
- // Deduplicate Titles (Prevent multiple 'More Like This')
- if (section.title && renderedTitles.has(section.title)) return;
- if (section.title) renderedTitles.add(section.title);
-
- // Filter duplicates
- const uniqueMovies = section.movies.filter(m => !usedSlugs.has(m.slug));
- uniqueMovies.forEach(m => usedSlugs.add(m.slug));
-
- if (uniqueMovies.length === 0) return;
-
- hasContent = true;
-
- const sectionHtml = `
-
- ${section.title ? `
${section.title}
` : ''}
-
- ${uniqueMovies.map(v => createCardHtml(v)).join('')}
-
-
No specific recommendations found.
';
- }
-
- } catch (error) {
- console.error('Failed to load recommendations:', error);
- container.innerHTML = 'Failed to load recommendations
';
- }
-}
-
-/**
- * Helper to create card HTML (Smaller for Recommendations)
- */
-function createCardHtml(v) {
- const poster = v.poster_url || v.thumbnail || v.thumb_url || '';
- const title = v.name || v.title || 'Untitled';
- const year = v.year || '';
- const quality = v.quality || 'HD';
- const match = v.matchScore || Math.floor(Math.random() * (99 - 85 + 1) + 85);
- const tmdb = v.tmdb_rating || 0;
- const rtScore = Math.round(tmdb * 10);
- const slug = v.slug || v.id || '';
-
- // Smaller card dimensions for "More Like This"
- return `
-
-
-
-
-
-
-
-
-
- ${year == new Date().getFullYear() ? `NEW` : ''}
- ${quality.replace('FHD', 'HD')}
-
-
-
-
-
-
-
-
-
-
${title}
-
-
${match}% Match
-
-
- local_pizza ${rtScore}%
-
-
-
-
-
-
-
error
-
${msg}
-
Go Home
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
Loading...
-
-
- 98% Match
- 2024
- PG-13
- hd HD
-
-
-
Loading description...
-
-
-
-
-
-
-
-
-
-
-
- movie
- Series
-
-
Loading...
-
-
- 98% Match
- 2024
- TV-MA
- 2h 30m
- HD
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Episodes
-
-
-
-
-
-
- Loading episodes...
-
-
-
-
-
-
-
-
-
No trailers available
-
-
-
-
-
-
-
-
-
-
About this movie
-
-
-
-
-
-
-
-
-
-
-
-
-
- search
-
-
-
-
-
-
-
-