420 lines
21 KiB
HTML
420 lines
21 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="playlist-management">
|
||
<button id="create-playlist-btn" class="btn btn-mini" title="Create New Playlist">📝 New Playlist</button>
|
||
<button id="select-mode-btn" class="btn btn-mini" title="Select Multiple Videos">☑️ Select</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="repeat-mode-btn" class="btn btn-mini" title="Repeat: Off">🔁</button>
|
||
<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/stats/playerStats.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', () => {
|
||
showExitConfirmationDialog();
|
||
});
|
||
|
||
function showExitConfirmationDialog() {
|
||
// Create modal dialog
|
||
const modal = document.createElement('div');
|
||
modal.className = 'confirmation-modal';
|
||
modal.innerHTML = `
|
||
<div class="confirmation-modal-content">
|
||
<div class="confirmation-modal-header">
|
||
<h3>🏠 Return to Home</h3>
|
||
</div>
|
||
<div class="confirmation-modal-body">
|
||
<p>Are you sure you want to return to the home screen?</p>
|
||
<p class="warning-text">⚠️ Current playback will stop and any unsaved progress will be lost.</p>
|
||
</div>
|
||
<div class="confirmation-modal-actions">
|
||
<button class="btn-confirm-exit">Yes, Go Home</button>
|
||
<button class="btn-cancel-exit">Stay in Cinema</button>
|
||
</div>
|
||
</div>
|
||
`;
|
||
|
||
// Add modal styles
|
||
modal.style.cssText = `
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100vw;
|
||
height: 100vh;
|
||
background: rgba(0, 0, 0, 0.8);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
z-index: 10003;
|
||
backdrop-filter: blur(5px);
|
||
animation: fadeIn 0.3s ease-out;
|
||
`;
|
||
|
||
document.body.appendChild(modal);
|
||
|
||
// Setup event handlers
|
||
const confirmBtn = modal.querySelector('.btn-confirm-exit');
|
||
const cancelBtn = modal.querySelector('.btn-cancel-exit');
|
||
|
||
const closeModal = () => {
|
||
modal.style.animation = 'fadeOut 0.3s ease-in';
|
||
setTimeout(() => {
|
||
if (modal.parentNode) {
|
||
document.body.removeChild(modal);
|
||
}
|
||
}, 300);
|
||
};
|
||
|
||
confirmBtn.addEventListener('click', () => {
|
||
window.location.href = 'index.html';
|
||
});
|
||
|
||
cancelBtn.addEventListener('click', closeModal);
|
||
|
||
// Close on escape key
|
||
const escapeHandler = (e) => {
|
||
if (e.key === 'Escape') {
|
||
closeModal();
|
||
document.removeEventListener('keydown', escapeHandler);
|
||
}
|
||
};
|
||
document.addEventListener('keydown', escapeHandler);
|
||
|
||
// Click outside to close
|
||
modal.addEventListener('click', (e) => {
|
||
if (e.target === modal) {
|
||
closeModal();
|
||
}
|
||
});
|
||
|
||
// Focus on cancel button by default
|
||
setTimeout(() => {
|
||
cancelBtn.focus();
|
||
}, 100);
|
||
}
|
||
|
||
// 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> |