PROGRESS: Porn Cinema Refactoring
Analysis & Planning Complete: - Created pornCinema-backup.js preserving original implementation - Analyzed cinema-specific features: playlists, theater mode, navigation - Identified BaseVideoPlayer integration points Refactoring Approach: - Clean extension of BaseVideoPlayer for shared functionality - Preserve cinema-specific methods: playlist management, video navigation - Maintain existing UI features while leveraging base player controls Next Steps: - Complete clean PornCinema class implementation - Migrate playlist and cinema-specific methods - Test integration with existing cinema HTML/CSS
This commit is contained in:
dilgenfritz
parent
755b5ec8d6
commit
775b2b8ec0
11
ROADMAP.md
11
ROADMAP.md
|
|
@ -44,11 +44,12 @@
|
|||
- ✅ **Script Integration**: Added baseVideoPlayer.js and focusVideoPlayer.js to index.html loading sequence
|
||||
- ✅ **Global Export**: Properly exported classes to window object for browser compatibility
|
||||
- ✅ **Syntax Validation**: Clean JavaScript validation with no errors
|
||||
- **🎬 Porn Cinema Refactoring** *(🚧 Active - October 31, 2025)*
|
||||
- 🚧 **Legacy Code Analysis**: Analyze existing pornCinema.js for BaseVideoPlayer integration points
|
||||
- 🚧 **Extend BaseVideoPlayer**: Update PornCinema class to inherit from BaseVideoPlayer
|
||||
- 🚧 **Remove Duplicate Code**: Clean up redundant video control implementations
|
||||
- <20> **Preserve Cinema Features**: Maintain all existing cinema-specific functionality
|
||||
- **🎬 Porn Cinema Refactoring** *(🚧 In Progress - October 31, 2025)*
|
||||
- ✅ **Legacy Code Analysis**: Analyzed existing pornCinema.js for BaseVideoPlayer integration points
|
||||
- ✅ **Architecture Planning**: Identified cinema-specific features (playlist, theater mode, navigation)
|
||||
- ✅ **Code Backup**: Created pornCinema-backup.js to preserve original implementation
|
||||
- 🚧 **Class Refactoring**: Creating clean PornCinema class extending BaseVideoPlayer
|
||||
- 📋 **Method Migration**: Need to migrate playlist, navigation, and cinema-specific UI methods
|
||||
- 📋 **Testing & Validation**: Ensure cinema mode works seamlessly with new architecture
|
||||
- **NEW XP System Implementation:**
|
||||
- **Main Game**
|
||||
|
|
|
|||
|
|
@ -52,6 +52,53 @@ class PornCinema extends BaseVideoPlayer {
|
|||
this.attachCinemaEventListeners();
|
||||
}
|
||||
|
||||
/**
|
||||
* Initialize cinema-specific elements (extends BaseVideoPlayer initialization)
|
||||
*/
|
||||
initializeCinemaElements() {
|
||||
// Call parent initialization first
|
||||
super.initializeElements();
|
||||
|
||||
// Initialize cinema-specific elements
|
||||
this.initializeCinemaSpecificElements();
|
||||
this.extendCinemaKeyboardShortcuts();
|
||||
}
|
||||
|
||||
/**
|
||||
* Initialize cinema-specific UI elements and controls
|
||||
*/
|
||||
initializeCinemaSpecificElements() {
|
||||
// Cinema-specific navigation elements
|
||||
this.controls.prevVideo = document.getElementById('prev-video-btn');
|
||||
this.controls.nextVideo = document.getElementById('next-video-btn');
|
||||
this.controls.addToPlaylist = document.getElementById('add-to-playlist-btn');
|
||||
this.controls.theater = document.getElementById('theater-mode-btn');
|
||||
|
||||
// Playlist management elements
|
||||
this.playlistContent = document.getElementById('playlist-content');
|
||||
this.shuffleBtn = document.getElementById('shuffle-playlist');
|
||||
this.clearPlaylistBtn = document.getElementById('clear-playlist');
|
||||
this.savePlaylistBtn = document.getElementById('save-playlist');
|
||||
this.loadPlaylistBtn = document.getElementById('load-playlist');
|
||||
|
||||
// Cinema-specific display elements
|
||||
this.videoTitle = document.getElementById('video-title');
|
||||
this.videoInfo = document.getElementById('video-info');
|
||||
this.playOverlay = document.getElementById('play-overlay');
|
||||
this.playButtonLarge = document.getElementById('play-button-large');
|
||||
|
||||
console.log('🎬 Cinema-specific elements initialized');
|
||||
}
|
||||
|
||||
/**
|
||||
* Extend base keyboard shortcuts with cinema-specific shortcuts
|
||||
*/
|
||||
extendCinemaKeyboardShortcuts() {
|
||||
// Add cinema shortcuts to the base shortcuts
|
||||
Object.assign(this.keyboardShortcuts, this.cinemaShortcuts);
|
||||
console.log('🎹 Cinema keyboard shortcuts extended');
|
||||
}
|
||||
|
||||
async initialize() {
|
||||
console.log('🎬 Initializing Porn Cinema...');
|
||||
|
||||
|
|
@ -65,72 +112,69 @@ class PornCinema extends BaseVideoPlayer {
|
|||
console.log('✅ Porn Cinema initialized');
|
||||
}
|
||||
|
||||
initializeElements() {
|
||||
// Video elements
|
||||
this.videoContainer = document.getElementById('video-container');
|
||||
this.videoElement = document.getElementById('main-video-player');
|
||||
this.videoSource = document.getElementById('video-source');
|
||||
this.videoOverlay = document.getElementById('video-overlay');
|
||||
this.videoTitle = document.getElementById('video-title');
|
||||
this.videoInfo = document.getElementById('video-info');
|
||||
this.playOverlay = document.getElementById('play-overlay');
|
||||
this.playButtonLarge = document.getElementById('play-button-large');
|
||||
this.videoLoading = document.getElementById('video-loading');
|
||||
/**
|
||||
* Attach cinema-specific event listeners (extends BaseVideoPlayer listeners)
|
||||
*/
|
||||
attachCinemaEventListeners() {
|
||||
// Call parent event listeners first
|
||||
super.attachEventListeners();
|
||||
|
||||
// Control elements
|
||||
this.controls.container = document.getElementById('video-controls');
|
||||
this.controls.playPause = document.getElementById('play-pause-btn');
|
||||
this.controls.prevVideo = document.getElementById('prev-video-btn');
|
||||
this.controls.nextVideo = document.getElementById('next-video-btn');
|
||||
this.controls.mute = document.getElementById('mute-btn');
|
||||
this.controls.volume = document.getElementById('volume-slider');
|
||||
this.controls.volumePercentage = document.getElementById('volume-percentage');
|
||||
this.controls.progressBar = document.getElementById('progress-bar');
|
||||
this.controls.progressFilled = document.getElementById('progress-filled');
|
||||
this.controls.progressThumb = document.getElementById('progress-thumb');
|
||||
this.controls.currentTime = document.getElementById('current-time');
|
||||
this.controls.totalTime = document.getElementById('total-time');
|
||||
this.controls.quality = document.getElementById('quality-select');
|
||||
this.controls.speed = document.getElementById('speed-select');
|
||||
this.controls.addToPlaylist = document.getElementById('add-to-playlist-btn');
|
||||
this.controls.theater = document.getElementById('theater-mode-btn');
|
||||
this.controls.fullscreen = document.getElementById('fullscreen-btn');
|
||||
// Cinema-specific control buttons
|
||||
if (this.controls.prevVideo) {
|
||||
this.controls.prevVideo.addEventListener('click', () => this.previousVideo());
|
||||
}
|
||||
if (this.controls.nextVideo) {
|
||||
this.controls.nextVideo.addEventListener('click', () => this.nextVideo());
|
||||
}
|
||||
if (this.controls.addToPlaylist) {
|
||||
this.controls.addToPlaylist.addEventListener('click', () => this.addCurrentToPlaylist());
|
||||
}
|
||||
if (this.controls.theater) {
|
||||
this.controls.theater.addEventListener('click', () => this.toggleTheaterMode());
|
||||
}
|
||||
|
||||
// Playlist elements
|
||||
this.playlistContent = document.getElementById('playlist-content');
|
||||
this.shuffleBtn = document.getElementById('shuffle-playlist');
|
||||
this.clearPlaylistBtn = document.getElementById('clear-playlist');
|
||||
this.savePlaylistBtn = document.getElementById('save-playlist');
|
||||
this.loadPlaylistBtn = document.getElementById('load-playlist');
|
||||
// Playlist management buttons
|
||||
if (this.shuffleBtn) {
|
||||
this.shuffleBtn.addEventListener('click', () => this.shufflePlaylist());
|
||||
}
|
||||
if (this.clearPlaylistBtn) {
|
||||
this.clearPlaylistBtn.addEventListener('click', () => this.clearPlaylist());
|
||||
}
|
||||
if (this.savePlaylistBtn) {
|
||||
this.savePlaylistBtn.addEventListener('click', () => this.savePlaylist());
|
||||
}
|
||||
if (this.loadPlaylistBtn) {
|
||||
this.loadPlaylistBtn.addEventListener('click', () => this.loadPlaylist());
|
||||
}
|
||||
|
||||
// Large play button overlay (cinema-specific)
|
||||
if (this.playButtonLarge) {
|
||||
this.playButtonLarge.addEventListener('click', () => this.togglePlayPause());
|
||||
}
|
||||
|
||||
// Override video ended event for playlist functionality
|
||||
if (this.videoElement) {
|
||||
this.videoElement.addEventListener('ended', () => this.onCinemaVideoEnded());
|
||||
}
|
||||
|
||||
console.log('🎬 Cinema event listeners attached');
|
||||
}
|
||||
|
||||
attachEventListeners() {
|
||||
// Video events
|
||||
this.videoElement.addEventListener('loadstart', () => this.onLoadStart());
|
||||
this.videoElement.addEventListener('loadedmetadata', () => this.onLoadedMetadata());
|
||||
this.videoElement.addEventListener('loadeddata', () => this.onLoadedData());
|
||||
this.videoElement.addEventListener('canplay', () => this.onCanPlay());
|
||||
this.videoElement.addEventListener('play', () => this.onPlay());
|
||||
this.videoElement.addEventListener('pause', () => this.onPause());
|
||||
this.videoElement.addEventListener('ended', () => this.onEnded());
|
||||
this.videoElement.addEventListener('timeupdate', () => this.onTimeUpdate());
|
||||
this.videoElement.addEventListener('volumechange', () => this.onVolumeChange());
|
||||
this.videoElement.addEventListener('error', (e) => this.onError(e));
|
||||
|
||||
// Large play button
|
||||
this.playButtonLarge.addEventListener('click', () => this.togglePlayPause());
|
||||
|
||||
// Control buttons
|
||||
this.controls.playPause.addEventListener('click', () => this.togglePlayPause());
|
||||
this.controls.prevVideo.addEventListener('click', () => this.previousVideo());
|
||||
this.controls.nextVideo.addEventListener('click', () => this.nextVideo());
|
||||
this.controls.mute.addEventListener('click', () => this.toggleMute());
|
||||
this.controls.addToPlaylist.addEventListener('click', () => this.addCurrentToPlaylist());
|
||||
this.controls.theater.addEventListener('click', () => this.toggleTheaterMode());
|
||||
this.controls.fullscreen.addEventListener('click', () => this.toggleFullscreen());
|
||||
|
||||
// Volume control
|
||||
this.controls.volume.addEventListener('input', (e) => this.setVolume(e.target.value / 100));
|
||||
/**
|
||||
* Handle video ended event with playlist progression
|
||||
*/
|
||||
onCinemaVideoEnded() {
|
||||
console.log('🎬 Video ended in cinema mode');
|
||||
|
||||
// Auto-play next video in playlist if available
|
||||
if (this.playlist.length > 0 && this.currentPlaylistIndex < this.playlist.length - 1) {
|
||||
console.log('🎬 Auto-playing next video in playlist');
|
||||
this.nextVideo();
|
||||
} else {
|
||||
// Call parent ended handler
|
||||
super.onEnded();
|
||||
}
|
||||
}
|
||||
|
||||
// Progress bar
|
||||
this.controls.progressBar.addEventListener('click', (e) => this.seekToPosition(e));
|
||||
Loading…
Reference in New Issue