337 lines
17 KiB
HTML
337 lines
17 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<meta http-equiv="Content-Security-Policy" content="default-src 'self' 'unsafe-inline' 'unsafe-eval' data: file: blob: http://localhost:* https:; connect-src 'self' http://localhost:* https: ws://localhost:*; img-src 'self' data: file: blob:; media-src 'self' data: file: blob:; script-src 'self' 'unsafe-inline' 'unsafe-eval' https:;">
|
||
<title>Porn Cinema - Gooner Training Academy</title>
|
||
<link rel="stylesheet" href="src/styles/styles.css">
|
||
<link rel="stylesheet" href="src/styles/base-video-player.css">
|
||
<link rel="stylesheet" href="src/styles/porn-cinema.css">
|
||
<link href="https://fonts.googleapis.com/css2?family=Audiowide&display=swap" rel="stylesheet">
|
||
</head>
|
||
<body class="cinema-mode">
|
||
<!-- Cinema Header -->
|
||
<header class="cinema-header">
|
||
<div class="cinema-nav">
|
||
<h1>🎬 Porn Cinema</h1>
|
||
<div class="cinema-controls">
|
||
<button id="back-to-home" class="btn btn-secondary">🏠 Home</button>
|
||
<button id="settings-btn" class="btn btn-secondary">⚙️ Settings</button>
|
||
<button id="theater-mode" class="btn btn-secondary">🎭 Theater</button>
|
||
<button id="fullscreen-toggle" class="btn btn-secondary">⛶ Fullscreen</button>
|
||
</div>
|
||
</div>
|
||
</header>
|
||
|
||
<!-- Keyboard Shortcuts Help -->
|
||
<div class="shortcuts-help" id="shortcuts-help">
|
||
<div class="shortcuts-content">
|
||
<h3>🎹 One-Handed Controls</h3>
|
||
<div class="shortcuts-grid">
|
||
<div class="shortcut-item"><kbd>Space</kbd> Play/Pause</div>
|
||
<div class="shortcut-item"><kbd>←</kbd><kbd>→</kbd> Seek ±10s</div>
|
||
<div class="shortcut-item"><kbd>↑</kbd><kbd>↓</kbd> Volume ±10%</div>
|
||
<div class="shortcut-item"><kbd>F</kbd> Fullscreen</div>
|
||
<div class="shortcut-item"><kbd>M</kbd> Mute/Unmute</div>
|
||
<div class="shortcut-item"><kbd>1-4</kbd> Quality</div>
|
||
<div class="shortcut-item"><kbd>Enter</kbd> Add to Playlist</div>
|
||
<div class="shortcut-item"><kbd>N</kbd> Next Video</div>
|
||
<div class="shortcut-item"><kbd>P</kbd> Previous Video</div>
|
||
<div class="shortcut-item"><kbd>S</kbd> Shuffle Playlist</div>
|
||
<div class="shortcut-item"><kbd>Escape</kbd> Exit Fullscreen</div>
|
||
<div class="shortcut-item"><kbd>?</kbd> Toggle This Help</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Loading Overlay -->
|
||
<div id="cinema-loading" class="cinema-loading">
|
||
<div class="loading-content">
|
||
<div class="loading-spinner"></div>
|
||
<h2>Loading Cinema...</h2>
|
||
<p>Preparing your video library...</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Main Cinema Content -->
|
||
<main class="cinema-main">
|
||
<!-- Main Content Area -->
|
||
<div class="main-content-area">
|
||
<!-- Video Player Section -->
|
||
<section class="video-player-section">
|
||
<div class="video-container" id="video-container">
|
||
<video id="main-video-player" class="main-video" preload="metadata">
|
||
<source id="video-source" src="" type="video/mp4">
|
||
Your browser does not support the video tag.
|
||
</video>
|
||
|
||
<!-- Video Overlay Controls -->
|
||
<div class="video-overlay" id="video-overlay">
|
||
<div class="video-title" id="video-title">Select a video to begin</div>
|
||
<div class="video-info" id="video-info"></div>
|
||
|
||
<!-- Play Button Overlay -->
|
||
<div class="play-overlay" id="play-overlay">
|
||
<button class="play-button-large" id="play-button-large">▶</button>
|
||
</div>
|
||
|
||
<!-- Loading Spinner -->
|
||
<div class="video-loading" id="video-loading" style="display: none;">
|
||
<div class="loading-spinner"></div>
|
||
<p>Loading video...</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Custom Video Controls -->
|
||
<div class="video-controls" id="video-controls">
|
||
<div class="progress-container">
|
||
<div class="progress-bar" id="progress-bar">
|
||
<div class="progress-filled" id="progress-filled"></div>
|
||
<div class="progress-thumb" id="progress-thumb"></div>
|
||
</div>
|
||
<div class="time-display">
|
||
<span id="current-time">0:00</span>
|
||
<span class="time-separator">/</span>
|
||
<span id="total-time">0:00</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="controls-row">
|
||
<div class="controls-left">
|
||
<button id="play-pause-btn" class="control-btn">▶</button>
|
||
<button id="prev-video-btn" class="control-btn" title="Previous Video (P)">⏮</button>
|
||
<button id="next-video-btn" class="control-btn" title="Next Video (N)">⏭</button>
|
||
<div class="volume-control">
|
||
<button id="mute-btn" class="control-btn" title="Mute (M)">🔊</button>
|
||
<input type="range" id="volume-slider" class="volume-slider" min="0" max="100" value="70">
|
||
<span id="volume-percentage">70%</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="controls-center">
|
||
<div class="quality-selector">
|
||
<select id="quality-select" class="quality-dropdown">
|
||
<option value="auto">Auto Quality</option>
|
||
<option value="1080p">1080p (1)</option>
|
||
<option value="720p">720p (2)</option>
|
||
<option value="480p">480p (3)</option>
|
||
<option value="360p">360p (4)</option>
|
||
</select>
|
||
</div>
|
||
|
||
<div class="speed-control">
|
||
<select id="speed-select" class="speed-dropdown">
|
||
<option value="0.5">0.5x</option>
|
||
<option value="0.75">0.75x</option>
|
||
<option value="1" selected>1x</option>
|
||
<option value="1.25">1.25x</option>
|
||
<option value="1.5">1.5x</option>
|
||
<option value="2">2x</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="controls-right">
|
||
<button id="add-to-playlist-btn" class="control-btn" title="Add to Playlist (Enter)">➕</button>
|
||
<button id="theater-mode-btn" class="control-btn" title="Theater Mode">🎭</button>
|
||
<button id="fullscreen-btn" class="control-btn" title="Fullscreen (F)">⛶</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Video Library Section -->
|
||
<section class="video-library-section">
|
||
<div class="library-header">
|
||
<h3><EFBFBD> Video Library</h3>
|
||
<div class="library-controls">
|
||
<div class="view-toggle">
|
||
<button id="grid-view-btn" class="view-btn active" title="Grid View">⊞</button>
|
||
<button id="list-view-btn" class="view-btn" title="List View">☰</button>
|
||
</div>
|
||
<div class="sort-controls">
|
||
<select id="sort-select" class="sort-dropdown">
|
||
<option value="name">Sort by Name</option>
|
||
<option value="date">Sort by Date</option>
|
||
<option value="duration">Sort by Duration</option>
|
||
<option value="size">Sort by Size</option>
|
||
</select>
|
||
<button id="sort-direction" class="btn btn-mini" title="Sort Direction">↕️</button>
|
||
</div>
|
||
<div class="search-controls">
|
||
<input type="text" id="library-search" class="search-input" placeholder="Search videos...">
|
||
<button id="refresh-library" class="btn btn-mini" title="Refresh Library">🔄</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="library-content" id="library-content">
|
||
<div class="library-loading">
|
||
<div class="loading-spinner"></div>
|
||
<p>Loading video library...</p>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</div>
|
||
|
||
<!-- Right Sidebar -->
|
||
<aside class="cinema-sidebar">
|
||
<!-- Sidebar Tabs -->
|
||
<div class="sidebar-tabs">
|
||
<button class="sidebar-tab active" id="playlist-tab">🎵 Playlist</button>
|
||
<button class="sidebar-tab" id="search-tab">🔍 Search</button>
|
||
</div>
|
||
|
||
<!-- Playlist Panel -->
|
||
<div class="sidebar-panel active" id="playlist-panel">
|
||
<div class="panel-header">
|
||
<h3>Current Playlist</h3>
|
||
<div class="playlist-controls">
|
||
<button id="shuffle-playlist" class="btn btn-mini" title="Shuffle (S)">🔀</button>
|
||
<button id="clear-playlist" class="btn btn-mini btn-danger">🗑️</button>
|
||
<button id="save-playlist" class="btn btn-mini">💾</button>
|
||
<button id="load-playlist" class="btn btn-mini">📁</button>
|
||
</div>
|
||
</div>
|
||
<div class="playlist-content" id="playlist-content">
|
||
<div class="playlist-empty">
|
||
<p>Playlist is empty. Add videos by clicking ➕ or pressing Enter while a video is selected.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Search Panel -->
|
||
<div class="sidebar-panel" id="search-panel">
|
||
<div class="panel-header">
|
||
<h3>Search Videos</h3>
|
||
</div>
|
||
<div class="search-content">
|
||
<input type="text" class="search-input-sidebar" placeholder="Search your library...">
|
||
<div class="search-results" id="search-results">
|
||
<p>Enter search terms to find videos...</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</aside>
|
||
</main>
|
||
|
||
<!-- Scripts -->
|
||
<script src="src/data/gameDataManager.js"></script>
|
||
<script src="src/utils/desktop-file-manager.js"></script>
|
||
<script src="src/features/media/baseVideoPlayer.js"></script>
|
||
<script src="src/features/media/videoLibrary.js"></script>
|
||
<script src="src/features/media/pornCinema.js"></script>
|
||
|
||
<script>
|
||
// Initialize cinema when page loads
|
||
document.addEventListener('DOMContentLoaded', async function() {
|
||
console.log('🎬 Initializing Porn Cinema...');
|
||
|
||
// Initialize desktop file manager if in Electron environment
|
||
if (window.electronAPI && typeof DesktopFileManager !== 'undefined') {
|
||
// Create a minimal data manager for the cinema (since we don't have the full game instance)
|
||
const minimalDataManager = {
|
||
get: (key) => {
|
||
try {
|
||
return JSON.parse(localStorage.getItem(key));
|
||
} catch {
|
||
return null;
|
||
}
|
||
},
|
||
set: (key, value) => {
|
||
localStorage.setItem(key, JSON.stringify(value));
|
||
}
|
||
};
|
||
|
||
window.desktopFileManager = new DesktopFileManager(minimalDataManager);
|
||
console.log('🖥️ Desktop File Manager initialized for porn cinema');
|
||
|
||
// Wait for the desktop file manager to fully initialize
|
||
// This includes loading linked directories and video files
|
||
let retries = 0;
|
||
const maxRetries = 50; // Wait up to 5 seconds
|
||
|
||
while (retries < maxRetries) {
|
||
// Check if initialization is complete by verifying video directories are set up
|
||
if (window.desktopFileManager.videoDirectories &&
|
||
window.desktopFileManager.videoDirectories.background) {
|
||
console.log('✅ Desktop file manager video directories are ready');
|
||
break;
|
||
}
|
||
|
||
console.log(`⏳ Waiting for desktop file manager to initialize... (${retries + 1}/${maxRetries})`);
|
||
await new Promise(resolve => setTimeout(resolve, 100));
|
||
retries++;
|
||
}
|
||
|
||
if (retries >= maxRetries) {
|
||
console.warn('⚠️ Desktop file manager took too long to initialize');
|
||
}
|
||
|
||
// Force refresh of linked directories to ensure we have the latest video data
|
||
try {
|
||
// Force reload from storage first
|
||
await window.desktopFileManager.loadLinkedDirectories();
|
||
console.log('✅ Force reloaded linked directories');
|
||
|
||
// Then refresh all directories to get current video lists
|
||
await window.desktopFileManager.refreshAllDirectories();
|
||
console.log('✅ Refreshed all video directories');
|
||
} catch (error) {
|
||
console.warn('⚠️ Error refreshing directories:', error);
|
||
}
|
||
|
||
} else if (!window.electronAPI) {
|
||
console.warn('⚠️ Running in browser mode - video management limited');
|
||
}
|
||
|
||
// Initialize the cinema after desktop file manager is ready
|
||
window.pornCinema = new PornCinema();
|
||
await window.pornCinema.initialize();
|
||
|
||
// Hide loading overlay
|
||
setTimeout(() => {
|
||
document.getElementById('cinema-loading').style.display = 'none';
|
||
}, 1000);
|
||
});
|
||
|
||
// Back to home functionality
|
||
document.getElementById('back-to-home').addEventListener('click', () => {
|
||
if (confirm('Return to home screen? Current playback will stop.')) {
|
||
window.location.href = 'index.html';
|
||
}
|
||
});
|
||
|
||
// Keyboard shortcut to toggle help
|
||
document.addEventListener('keydown', (e) => {
|
||
if (e.key === '?' || (e.shiftKey && e.key === '/')) {
|
||
const help = document.getElementById('shortcuts-help');
|
||
help.style.display = help.style.display === 'none' ? 'block' : 'none';
|
||
}
|
||
});
|
||
|
||
// Sidebar tab functionality
|
||
document.getElementById('playlist-tab').addEventListener('click', () => {
|
||
// Remove active from all tabs and panels
|
||
document.querySelectorAll('.sidebar-tab').forEach(tab => tab.classList.remove('active'));
|
||
document.querySelectorAll('.sidebar-panel').forEach(panel => panel.classList.remove('active'));
|
||
|
||
// Activate playlist tab and panel
|
||
document.getElementById('playlist-tab').classList.add('active');
|
||
document.getElementById('playlist-panel').classList.add('active');
|
||
});
|
||
|
||
document.getElementById('search-tab').addEventListener('click', () => {
|
||
// Remove active from all tabs and panels
|
||
document.querySelectorAll('.sidebar-tab').forEach(tab => tab.classList.remove('active'));
|
||
document.querySelectorAll('.sidebar-panel').forEach(panel => panel.classList.remove('active'));
|
||
|
||
// Activate search tab and panel
|
||
document.getElementById('search-tab').classList.add('active');
|
||
document.getElementById('search-panel').classList.add('active');
|
||
});
|
||
</script>
|
||
</body>
|
||
</html> |