vndangkhoa/kv-netflix
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

v1.0.8: Simplified Dockerfile - use pre-built backend/static, includes Get App button

Browse source
This commit is contained in:
Khoa.vo 2025-12-24 14:20:39 +07:00
parent a00c204dcd
commit 6dab7530ae
9 changed files with 598 additions and 56 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
Dockerfile
View file

@ -1,12 +1,4 @@
# --- Stage 1: Build Frontend ---
FROM node:20-slim AS frontend-builder
WORKDIR /build-frontend
COPY frontend/package*.json ./
RUN npm install
COPY frontend/ ./
RUN npm run build
# --- Stage 2: Final Image ---
# StreamFlix Docker Image - Unified Backend + Frontend
FROM python:3.11-slim
WORKDIR /app
@ -36,13 +28,9 @@ RUN pip install --no-cache-dir -r requirements.txt
RUN playwright install chromium
RUN playwright install-deps chromium
# Copy Backend code
# Copy Backend code (includes pre-built static files)
COPY backend/ .
# Copy built Frontend to Backend's static directory
COPY --from=frontend-builder /build-frontend/dist ./static
COPY --from=frontend-builder /build-frontend/StreamFlix-Universal-v1.0.6.apk ./static/
# Create data directory for persistence
RUN mkdir -p /app/data

24
frontend/download.html
View file

@ -215,8 +215,8 @@
<div class="platform-card">
<span class="platform-icon">🤖</span>
<h2 class="platform-title">Android Mobile & TV</h2>
<span class="platform-version">Version 1.0.5 (Universal APK)</span>
<a href="/StreamFlix-Universal-v1.0.5.apk" class="btn-download" download>Download APK</a>
<span class="platform-version">Version 1.0.6 (Universal APK)</span>
<a href="/StreamFlix-Universal-v1.0.6.apk" class="btn-download" download>Download APK</a>
<div class="instructions">
<strong>How to install:</strong>
@ -247,28 +247,10 @@
</ol>
</div>
</div>
<!-- Android TV Sideload -->
<div class="platform-card">
<span class="platform-icon">📺</span>
<h2 class="platform-title">Android TV</h2>
<span class="platform-version">Sideload Guide</span>
<a href="/StreamFlix-Universal-v1.0.5.apk" class="btn-download btn-secondary" download>Download APK</a>
<div class="instructions">
<strong>For Android TV:</strong>
<ol>
<li>Option 1: Download "Send Files to TV" app on both phone & TV. Send the APK from phone to TV.
</li>
<li>Option 2: Use a USB drive to copy the APK to your TV.</li>
<li>Open with a File Manager and Install.</li>
</ol>
</div>
</div>
</div>
<p style="color: #666; font-size: 0.8rem; margin-top: 40px;">
StreamFlix v1.0.5 (Gold Master) • Private Access Only
StreamFlix v1.0.6 (Gold Master) • Private Access Only
</p>
</div>

232
frontend/history.html Normal file
View file

@ -0,0 +1,232 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Watch History - KV-Stream</title>
<!-- Preconnect for fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link
href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Outfit:wght@500;600;700;900&display=swap"
rel="stylesheet">
<link rel="stylesheet" href="/styles/index.css">
<style>
/* History Specific Styles */
.history-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 20px 40px;
margin-top: 20px;
}
.history-title {
font-size: 2rem;
font-weight: 700;
}
.clear-btn {
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.2);
color: #fff;
padding: 8px 16px;
border-radius: 8px;
cursor: pointer;
font-family: inherit;
transition: all 0.2s;
}
.clear-btn:hover {
background: rgba(255, 0, 0, 0.2);
border-color: rgba(255, 0, 0, 0.4);
}
.history-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 20px;
padding: 0 40px 40px;
}
.history-card {
position: relative;
border-radius: 12px;
overflow: hidden;
background: #1a1a1a;
transition: transform 0.3s ease;
text-decoration: none;
color: white;
}
.history-card:hover {
transform: scale(1.05);
z-index: 2;
}
.history-thumb {
width: 100%;
aspect-ratio: 2/3;
object-fit: cover;
}
.history-info {
padding: 12px;
}
.history-progress-bar {
height: 3px;
background: rgba(255, 255, 255, 0.2);
width: 100%;
position: absolute;
bottom: 0;
left: 0;
}
.history-progress-fill {
height: 100%;
background: var(--color-primary);
}
.history-meta {
font-size: 0.85rem;
color: #aaa;
margin-top: 4px;
}
</style>
</head>
<body>
<div id="app" class="app-layout">
<!-- Sidebar -->
<aside class="sidebar" id="sidebar">
<div class="sidebar__logo">
<a href="/" style="color:white;">
<svg viewBox="0 0 24 24" fill="currentColor">
<path d="M4 8H2v12c0 1.1.9 2 2 2h12v-2H4V8z" />
<path
d="M20 2H8c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-8 12.5v-9l6 4.5-6 4.5z" />
</svg>
</a>
</div>
<nav class="sidebar__nav">
<a href="/" class="sidebar__nav-item" title="Home">
<svg viewBox="0 0 24 24" fill="currentColor">
<path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z" />
</svg>
</a>
<!-- History Link (Active) -->
<a href="/history.html" class="sidebar__nav-item active" title="History">
<svg viewBox="0 0 24 24" fill="currentColor">
<path
d="M13 3c-4.97 0-9 4.03-9 9H1l3.89 3.89.07.14L9 12H6c0-3.87 3.13-7 7-7s7 3.13 7 7-7 7-7 7c-1.93 0-3.68-.79-4.94-2.06l-1.42 1.42C8.27 19.99 10.51 21 13 21c4.97 0 9-4.03 9-9s-4.03-9-9-9zm-1 5v5l4.28 2.54.72-1.21-3.5-2.08V8H12z" />
</svg>
</a>
</nav>
</aside>
<!-- Main Content -->
<main class="main-content" style="margin-left: 80px; width: calc(100% - 80px);">
<div class="history-header">
<div style="display:flex; gap:20px; align-items:center;">
<h1 class="history-title" style="margin:0; cursor:pointer;" id="tabHistory">Watch History</h1>
<h1 class="history-title" style="margin:0; opacity:0.5; cursor:pointer;" id="tabMyList">My List</h1>
</div>
<button class="clear-btn" id="clearHistoryBtn">Clear History</button>
</div>
<div class="history-grid" id="historyGrid">
<!-- Items -->
</div>
<div id="emptyState" style="text-align:center; display:none; padding:50px;">
<h2 id="emptyTitle">No history yet</h2>
<p style="color:#aaa;" id="emptyMsg">Movies you watch will appear here.</p>
<a href="/" class="action-btn action-btn--primary" style="margin-top:20px; display:inline-block;">Browse
Movies</a>
</div>
</main>
</div>
<script src="/js/history-service.js"></script>
<script>
document.addEventListener('DOMContentLoaded', () => {
const grid = document.getElementById('historyGrid');
const emptyState = document.getElementById('emptyState');
const clearBtn = document.getElementById('clearHistoryBtn');
const tabHistory = document.getElementById('tabHistory');
const tabMyList = document.getElementById('tabMyList');
const emptyTitle = document.getElementById('emptyTitle');
const emptyMsg = document.getElementById('emptyMsg');
let currentView = 'history'; // history or mylist
function updateTabs() {
if (currentView === 'history') {
tabHistory.style.opacity = '1';
tabMyList.style.opacity = '0.5';
clearBtn.style.display = 'block';
} else {
tabHistory.style.opacity = '0.5';
tabMyList.style.opacity = '1';
clearBtn.style.display = 'none'; // Don't allow clearing My List via this button
}
render();
}
tabHistory.addEventListener('click', () => { currentView = 'history'; updateTabs(); });
tabMyList.addEventListener('click', () => { currentView = 'mylist'; updateTabs(); });
function render() {
let items = [];
if (currentView === 'history') {
items = window.historyService.getHistory();
emptyTitle.textContent = "No history yet";
emptyMsg.textContent = "Movies you watch will appear here.";
} else {
items = window.historyService.getFavorites();
emptyTitle.textContent = "My List is empty";
emptyMsg.textContent = "Add movies to your list to watch later.";
}
if (items.length === 0) {
grid.style.display = 'none';
emptyState.style.display = 'block';
return;
}
grid.style.display = 'grid';
emptyState.style.display = 'none';
grid.innerHTML = items.map(item => `
<a href="/watch.html?id=${item.id}&slug=${item.slug}&ep=${item.progress?.episode || 1}" class="history-card">
<img src="${item.thumbnail}" class="history-thumb" loading="lazy" alt="${item.title}">
<div class="history-info">
<h3 style="font-size:1rem; margin-bottom:4px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;">${item.title}</h3>
<div class="history-meta">${currentView === 'history' ? `Episode ${item.progress.episode}` : (item.year || 'Movie')}</div>
<div class="history-meta" style="font-size:0.75rem; margin-top:2px;">
${currentView === 'history' ? new Date(item.timestamp).toLocaleDateString() : 'Added ' + new Date(item.addedAt || Date.now()).toLocaleDateString()}
</div>
</div>
${currentView === 'history' ? `
<div class="history-progress-bar">
<div class="history-progress-fill" style="width: ${item.progress.percentage || 0}%"></div>
</div>` : ''}
</a>
`).join('');
}
clearBtn.addEventListener('click', () => {
if (confirm('Are you sure you want to clear your watch history?')) {
window.historyService.clearHistory();
render();
}
});
updateTabs();
});
</script>
</body>
</html>

20
frontend/index.html
View file

@ -44,7 +44,9 @@
{
"imports": {
"@capacitor/status-bar": "/js/capacitor-mock.js",
"@capacitor/haptics": "/js/capacitor-mock.js"
"@capacitor/haptics": "/js/capacitor-mock.js",
"artplayer": "https://esm.sh/artplayer@5.1.7",
"hls.js": "https://esm.sh/hls.js@1.5.7"
}
}
</script>
@ -63,6 +65,13 @@
#mobileBottomNav {
padding-bottom: calc(1.25rem + var(--safe-bottom)) !important;
}
/* Add bottom padding to main content on mobile to prevent overlap with nav */
main,
#videoGrid,
.video-grid {
padding-bottom: calc(120px + var(--safe-bottom)) !important;
}
}
/* Hide scrollbar for Chrome, Safari and Opera */
@ -391,7 +400,14 @@
</footer>
</div>
<!-- Mobile Bottom Navigation -->
<!-- Mobile Floating "Get App" Button (shows only on mobile, above bottom nav) -->
<a href="/download.html"
class="fixed right-4 z-50 md:hidden flex items-center gap-2 bg-gradient-to-r from-[#ea2a33] to-[#ff6b6b] text-white px-4 py-2.5 rounded-full shadow-lg hover:shadow-xl transition-all duration-300 hover:scale-105"
style="bottom: calc(100px + var(--safe-bottom, 0px));" aria-label="Get the App">
<span class="material-symbols-outlined text-lg">download</span>
<span class="text-sm font-semibold">Get App</span>
</a>
<nav class="fixed bottom-0 left-0 right-0 z-50 bg-[#121212]/95 backdrop-blur-lg border-t border-white/5 pb-5 pt-3 px-6 md:hidden"
id="mobileBottomNav">
<div class="flex justify-between items-center max-w-lg mx-auto">

305
frontend/info.html Normal file
View file

@ -0,0 +1,305 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Movie Details - KV-Stream</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link
href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Outfit:wght@500;600;700;900&display=swap"
rel="stylesheet">
<link rel="stylesheet" href="/styles/index.css">
<style>
/* Info Page Specific Styles */
.info-page-container {
position: relative;
min-height: 100vh;
width: 100%;
}
/* Backdrop */
.info-backdrop {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 70vh;
background-size: cover;
background-position: center;
mask-image: linear-gradient(to bottom, black 0%, transparent 100%);
-webkit-mask-image: linear-gradient(to bottom, black 0%, transparent 100%);
z-index: 0;
opacity: 0.6;
}
.info-content-wrapper {
position: relative;
z-index: 2;
padding: 100px 40px 40px;
max-width: 1400px;
margin: 0 auto;
display: flex;
gap: 50px;
}
/* Left Column: Poster */
.info-poster-col {
flex-shrink: 0;
width: 300px;
}
.info-poster {
width: 100%;
border-radius: 12px;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
aspect-ratio: 2/3;
object-fit: cover;
}
/* Right Column: Details */
.info-details-col {
flex-grow: 1;
padding-top: 20px;
}
.info-title {
font-size: 3rem;
font-weight: 900;
margin-bottom: 10px;
line-height: 1.1;
}
.info-original-title {
font-size: 1.2rem;
color: rgba(255, 255, 255, 0.7);
margin-bottom: 20px;
}
.info-rating {
display: flex;
align-items: center;
gap: 5px;
margin-bottom: 20px;
color: #f5c518;
font-weight: 600;
}
/* Metadata Grid */
.meta-box {
background: rgba(255, 255, 255, 0.05);
border-radius: 12px;
padding: 24px;
margin-bottom: 30px;
border: 1px solid rgba(255, 255, 255, 0.1);
}
.meta-row {
display: flex;
margin-bottom: 12px;
line-height: 1.5;
}
.meta-label {
width: 150px;
color: rgba(255, 255, 255, 0.6);
flex-shrink: 0;
}
.meta-value {
color: #fff;
flex-grow: 1;
}
.meta-tag {
display: inline-block;
color: var(--color-primary);
}
/* Actions */
.info-actions {
display: flex;
gap: 16px;
margin-bottom: 40px;
}
/* Description */
.section-header {
font-size: 1.5rem;
font-weight: 600;
margin-bottom: 16px;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
padding-bottom: 10px;
}
.info-desc {
font-size: 1rem;
line-height: 1.6;
color: rgba(255, 255, 255, 0.9);
margin-bottom: 40px;
max-width: 800px;
}
/* Recommendations */
.rec-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
gap: 16px;
}
.rec-card {
text-decoration: none;
color: white;
transition: transform 0.2s;
}
.rec-card:hover {
transform: scale(1.05);
}
.rec-img {
width: 100%;
border-radius: 8px;
aspect-ratio: 2/3;
object-fit: cover;
margin-bottom: 8px;
}
@media (max-width: 900px) {
.info-content-wrapper {
flex-direction: column;
align-items: center;
padding-top: 40px;
}
.info-poster-col {
width: 200px;
}
.info-details-col {
text-align: center;
}
.meta-row {
text-align: left;
}
.info-title {
font-size: 2rem;
}
}
</style>
</head>
<body>
<div id="app" class="app-layout">
<!-- Sidebar -->
<aside class="sidebar" id="sidebar">
<div class="sidebar__logo">
<a href="/" style="color:white;">
<svg viewBox="0 0 24 24" fill="currentColor">
<path d="M4 8H2v12c0 1.1.9 2 2 2h12v-2H4V8z" />
<path
d="M20 2H8c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-8 12.5v-9l6 4.5-6 4.5z" />
</svg>
</a>
</div>
<nav class="sidebar__nav">
<a href="/" class="sidebar__nav-item" title="Home">
<svg viewBox="0 0 24 24" fill="currentColor">
<path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z" />
</svg>
</a>
<a href="/history.html" class="sidebar__nav-item" title="History">
<svg viewBox="0 0 24 24" fill="currentColor">
<path
d="M13 3c-4.97 0-9 4.03-9 9H1l3.89 3.89.07.14L9 12H6c0-3.87 3.13-7 7-7s7 3.13 7 7-7 7-7 7c-1.93 0-3.68-.79-4.94-2.06l-1.42 1.42C8.27 19.99 10.51 21 13 21c4.97 0 9-4.03 9-9s-4.03-9-9-9zm-1 5v5l4.28 2.54.72-1.21-3.5-2.08V8H12z" />
</svg>
</a>
</nav>
</aside>
<main class="main-content" style="margin-left: 80px; width: calc(100% - 80px);">
<div class="info-page-container">
<!-- Backdrop -->
<div class="info-backdrop" id="backdrop"></div>
<div class="info-content-wrapper">
<!-- Poster -->
<div class="info-poster-col">
<img src="" alt="Poster" class="info-poster" id="poster">
</div>
<!-- Details -->
<div class="info-details-col">
<h1 class="info-title" id="title">Loading...</h1>
<div class="info-original-title" id="originalTitle"></div>
<div class="info-rating" id="rating">
<!-- e.g. ⭐⭐⭐⭐⭐ (0 votes) -->
</div>
<!-- Metadata Box -->
<div class="meta-box">
<div class="meta-row">
<span class="meta-label">Trạng thái:</span>
<span class="meta-value" id="status">...</span>
</div>
<div class="meta-row">
<span class="meta-label">Năm phát hành:</span>
<span class="meta-value" id="year">...</span>
</div>
<div class="meta-row">
<span class="meta-label">Số tập:</span>
<span class="meta-value" id="episodes">...</span>
</div>
<div class="meta-row">
<span class="meta-label">Quốc gia:</span>
<span class="meta-value" id="country">...</span>
</div>
<div class="meta-row">
<span class="meta-label">Thể loại:</span>
<span class="meta-value" id="genre">...</span>
</div>
<div class="meta-row">
<span class="meta-label">Đạo diễn:</span>
<span class="meta-value" id="director">...</span>
</div>
<div class="meta-row">
<span class="meta-label">Diễn viên:</span>
<span class="meta-value" id="cast">...</span>
</div>
</div>
<!-- Actions -->
<div class="info-actions">
<a href="#" class="action-btn action-btn--primary" id="btnWatch">
<svg viewBox="0 0 24 24" fill="currentColor" width="24" height="24">
<path d="M8 5v14l11-7z" />
</svg>
Xem Phim
</a>
<!-- My List Button can go here -->
</div>
<!-- Description -->
<div class="section-header">Nội dung chi tiết</div>
<div class="info-desc" id="description"></div>
<!-- Tags/Keywords -->
<div style="margin-bottom: 40px; display:flex; gap:10px; flex-wrap:wrap;" id="tags"></div>
<!-- Recommendations -->
<div class="section-header">Có thể bạn sẽ thích (Top phim hay)</div>
<div class="rec-grid" id="recommendations"></div>
</div>
</div>
</div>
</main>
</div>
<script type="module" src="/scripts/info.js"></script>
</body>
</html>

5
frontend/scripts/components/VideoCard.js
View file

@ -82,8 +82,11 @@ export function createVideoCard(video, onPlay, onInfo) {
card.dataset.videoId = video.id;
// PERFORMANCE: Use backend image proxy for faster loading (WebP + Resized)
// Use optimized sizes for mobile/desktop balance (quality vs speed)
const isMobile = window.innerWidth < 768;
const imageWidth = isMobile ? 180 : 200;
const originalThumbnail = video.thumbnail || '';
const thumbnail = api.getProxyUrl(originalThumbnail, 200);
const thumbnail = api.getProxyUrl(originalThumbnail, imageWidth);
const year = video.year || new Date().getFullYear();
// Smart badge detection

2
frontend/scripts/haptics.js
View file

@ -1,4 +1,4 @@
import { Haptics, ImpactStyle } from '@capacitor/haptics';
import { Haptics, ImpactStyle } from '../js/capacitor-mock.js';
/**
* Trigger a light haptic feedback for small interactions

46
frontend/scripts/main.js
View file

@ -13,7 +13,7 @@ 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 '@capacitor/status-bar';
import { StatusBar, Style } from '../js/capacitor-mock.js';
/**
* SplashScreen Controller
@ -141,8 +141,10 @@ async function init() {
// Handle routing
if (view === 'home') {
renderHome();
// Scroll to top for home
window.scrollTo({ top: 0, behavior: 'smooth' });
} else if (view === 'search') {
// Mobile Search View
// Mobile Search View - don't scroll to top
if (window.innerWidth < 768) {
try {
renderMobileSearch();
@ -154,6 +156,7 @@ async function init() {
elements.searchInput.focus();
}
} else if (view === 'mylist') {
// My List View - don't scroll to top
if (window.innerWidth < 768) {
renderMobileMyList();
} else {
@ -166,12 +169,13 @@ async function init() {
} 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' });
}
// Roll back to hero banner (scroll to top)
window.scrollTo({ top: 0, behavior: 'smooth' });
});
});
}
@ -281,7 +285,7 @@ function renderHero(video = null) {
// Play button
// Remove old listeners to prevent stacking
if (heroPlayBtn) {
if (heroPlayBtn && heroPlayBtn.parentNode) {
const newPlayBtn = heroPlayBtn.cloneNode(true);
heroPlayBtn.parentNode.replaceChild(newPlayBtn, heroPlayBtn);
newPlayBtn.addEventListener('click', () => {
@ -291,7 +295,7 @@ function renderHero(video = null) {
}
// Info button
if (heroInfoBtn) {
if (heroInfoBtn && heroInfoBtn.parentNode) {
const newInfoBtn = heroInfoBtn.cloneNode(true);
heroInfoBtn.parentNode.replaceChild(newInfoBtn, heroInfoBtn);
newInfoBtn.addEventListener('click', () => handleShowInfo(featured));
@ -541,6 +545,13 @@ function setupEventListeners() {
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;
@ -1236,6 +1247,11 @@ function createTailwindCard(video, showRank = false, rank = 0, orientation = 've
image = video.backdrop;
}
// PERFORMANCE: Use image proxy with optimized sizes (quality vs speed balance)
const isMobile = window.innerWidth < 768;
const imageWidth = isMobile ? 180 : (orientation === 'horizontal' ? 400 : 200);
const proxiedImage = image ? api.getProxyUrl(image, imageWidth) : '';
const title = video.name || video.title || 'Untitled';
const year = video.year || '';
const quality = video.quality || 'HD';
@ -1249,7 +1265,7 @@ function createTailwindCard(video, showRank = false, rank = 0, orientation = 've
card.innerHTML = `
<div class="relative ${aspectClass} rounded-md overflow-hidden bg-surface-dark shadow-lg transition-all duration-300 group-hover:shadow-2xl ring-0 group-hover:ring-2 group-hover:ring-white/20">
<div class="absolute inset-0 bg-cover bg-center transition-transform duration-500 group-hover:scale-110" style="background-image: url('${image}');"></div>
<div class="absolute inset-0 bg-cover bg-center transition-transform duration-500 group-hover:scale-110" style="background-image: url('${proxiedImage}');"></div>
<!-- Gradient Overlay (Only visible on hover) -->
<div class="absolute inset-0 bg-gradient-to-t from-black via-black/40 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
@ -1908,13 +1924,7 @@ function handleVideoPlay(video) {
// Store all videos for recommendations
sessionStorage.setItem('allVideos', JSON.stringify(state.videos));
// Handle back button gesture support via pushState if opening player in same page
// (Though here we navigate, it's good practice tracker)
if (!window.history.state?.playerOpen) {
window.history.pushState({ playerOpen: true }, '', window.location.href);
}
// Navigation to Watch
// Navigate directly to the watch page (no pushState needed for full page navigation)
navigateToWatch(video);
}
@ -2184,7 +2194,10 @@ async function renderCategoryView(viewType) {
const sections = sectionConfigs[viewType] || sectionConfigs.home;
// Check sessionStorage for cached view (Home/Cinema only to keep it fresh)
// DISABLED: Session cache restoration breaks event listeners
// Event handlers are set up via JavaScript and lost when HTML is restored
// TODO: Implement event delegation to fix this properly
/*
if (viewType === 'home' || viewType === 'cinema') {
const cachedHTML = sessionStorage.getItem(`view_cache_${viewType}`);
if (cachedHTML) {
@ -2194,6 +2207,7 @@ async function renderCategoryView(viewType) {
if (elements.videoGrid.children.length > 0) return;
}
}
*/
// Lazy loading configuration
const EAGER_LOAD_COUNT = 3; // Load first 3 sections immediately

4
frontend/watch.html
View file

@ -44,7 +44,9 @@
{
"imports": {
"@capacitor/status-bar": "/js/capacitor-mock.js",
"@capacitor/haptics": "/js/capacitor-mock.js"
"@capacitor/haptics": "/js/capacitor-mock.js",
"artplayer": "https://esm.sh/artplayer@5.1.7",
"hls.js": "https://esm.sh/hls.js@1.5.7"
}
}
</script>