205 lines
7.6 KiB
HTML
205 lines
7.6 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Video Player Test</title>
|
|
<link rel="stylesheet" href="src/styles/base-video-player.css">
|
|
<style>
|
|
body {
|
|
background: #1a1a1a;
|
|
color: #fff;
|
|
font-family: Arial, sans-serif;
|
|
padding: 20px;
|
|
}
|
|
.test-container {
|
|
max-width: 800px;
|
|
margin: 0 auto;
|
|
}
|
|
.test-section {
|
|
margin: 20px 0;
|
|
padding: 20px;
|
|
border: 1px solid #333;
|
|
border-radius: 8px;
|
|
}
|
|
.video-container {
|
|
width: 100%;
|
|
height: 400px;
|
|
background: #000;
|
|
border-radius: 8px;
|
|
position: relative;
|
|
}
|
|
.test-log {
|
|
background: #222;
|
|
padding: 10px;
|
|
border-radius: 4px;
|
|
font-family: monospace;
|
|
font-size: 12px;
|
|
height: 200px;
|
|
overflow-y: scroll;
|
|
white-space: pre-wrap;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="test-container">
|
|
<h1>🎬 Video Player Integration Test</h1>
|
|
|
|
<div class="test-section">
|
|
<h2>BaseVideoPlayer Test</h2>
|
|
<div id="base-video-container" class="video-container">
|
|
<video id="base-video-element" style="width: 100%; height: 100%;">
|
|
<source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
|
|
Your browser does not support the video tag.
|
|
</video>
|
|
</div>
|
|
<div style="margin-top: 10px;">
|
|
<button onclick="testBasePlayer()">Test BaseVideoPlayer</button>
|
|
<button onclick="clearLog()">Clear Log</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="test-section">
|
|
<h2>FocusVideoPlayer Test</h2>
|
|
<div id="focus-video-container" class="video-container" style="display: none;">
|
|
<div class="video-player-container">
|
|
<video id="focus-video-player" style="width: 100%; height: 90%;">
|
|
Your browser does not support the video tag.
|
|
</video>
|
|
<div class="video-controls" style="display: flex; align-items: center; gap: 15px; margin-top: 10px;">
|
|
<button class="play-pause-btn" style="background: none; border: none; color: #ff6b9d; font-size: 18px; cursor: pointer;">⏸️</button>
|
|
<label for="focus-video-volume" style="color: #bbb; font-size: 14px;">🔊</label>
|
|
<input type="range"
|
|
id="focus-video-volume"
|
|
min="0" max="100" value="50"
|
|
style="flex: 1; accent-color: #ff6b9d;">
|
|
<span id="focus-volume-display" style="color: #bbb; font-size: 14px; min-width: 40px;">50%</span>
|
|
</div>
|
|
</div>
|
|
<div class="video-info" id="video-info" style="color: #bbb; font-size: 12px; margin-top: 5px; text-align: center;">
|
|
Ready to play videos
|
|
</div>
|
|
</div>
|
|
<div style="margin-top: 10px;">
|
|
<button onclick="testFocusPlayer()">Test FocusVideoPlayer</button>
|
|
<button onclick="stopFocusPlayer()">Stop Focus Player</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="test-section">
|
|
<h2>Test Log</h2>
|
|
<div id="test-log" class="test-log"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Load our video player scripts -->
|
|
<script src="src/features/media/baseVideoPlayer.js"></script>
|
|
<script src="src/features/media/focusVideoPlayer.js"></script>
|
|
|
|
<script>
|
|
let basePlayer = null;
|
|
let focusPlayer = null;
|
|
|
|
// Mock video manager for testing
|
|
window.videoPlayerManager = {
|
|
videoLibrary: {
|
|
task: [
|
|
{ name: "Test Video 1", path: "https://www.w3schools.com/html/mov_bbb.mp4" },
|
|
{ name: "Test Video 2", path: "https://www.w3schools.com/html/movie.mp4" }
|
|
],
|
|
background: [
|
|
{ name: "Background Test", path: "https://www.w3schools.com/html/mov_bbb.mp4" }
|
|
]
|
|
},
|
|
getVideosByCategory: function(category) {
|
|
return this.videoLibrary[category] || [];
|
|
}
|
|
};
|
|
|
|
function log(message) {
|
|
const logElement = document.getElementById('test-log');
|
|
const timestamp = new Date().toLocaleTimeString();
|
|
logElement.textContent += `[${timestamp}] ${message}\n`;
|
|
logElement.scrollTop = logElement.scrollHeight;
|
|
console.log(message);
|
|
}
|
|
|
|
function clearLog() {
|
|
document.getElementById('test-log').textContent = '';
|
|
}
|
|
|
|
function testBasePlayer() {
|
|
try {
|
|
log('🎬 Testing BaseVideoPlayer...');
|
|
|
|
if (!window.BaseVideoPlayer) {
|
|
log('❌ BaseVideoPlayer class not found!');
|
|
return;
|
|
}
|
|
|
|
basePlayer = new BaseVideoPlayer('#base-video-container', {
|
|
showControls: true,
|
|
autoHide: false,
|
|
showProgress: true,
|
|
showVolume: true,
|
|
showFullscreen: true,
|
|
keyboardShortcuts: true
|
|
});
|
|
|
|
log('✅ BaseVideoPlayer instance created successfully');
|
|
|
|
// Try to load a test video
|
|
basePlayer.loadVideo('https://www.w3schools.com/html/mov_bbb.mp4', false);
|
|
log('📺 Test video loaded');
|
|
|
|
} catch (error) {
|
|
log(`❌ BaseVideoPlayer test failed: ${error.message}`);
|
|
console.error(error);
|
|
}
|
|
}
|
|
|
|
function testFocusPlayer() {
|
|
try {
|
|
log('🧘 Testing FocusVideoPlayer...');
|
|
|
|
if (!window.FocusVideoPlayer) {
|
|
log('❌ FocusVideoPlayer class not found!');
|
|
return;
|
|
}
|
|
|
|
focusPlayer = new FocusVideoPlayer('#focus-video-container');
|
|
log('✅ FocusVideoPlayer instance created successfully');
|
|
|
|
// Initialize with mock video manager
|
|
focusPlayer.initializeVideoLibrary(window.videoPlayerManager);
|
|
log('📚 Video library initialized');
|
|
|
|
// Start focus session
|
|
focusPlayer.startFocusSession();
|
|
log('🎬 Focus session started');
|
|
|
|
} catch (error) {
|
|
log(`❌ FocusVideoPlayer test failed: ${error.message}`);
|
|
console.error(error);
|
|
}
|
|
}
|
|
|
|
function stopFocusPlayer() {
|
|
if (focusPlayer) {
|
|
focusPlayer.stopFocusSession();
|
|
log('🛑 Focus session stopped');
|
|
} else {
|
|
log('⚠️ No focus player to stop');
|
|
}
|
|
}
|
|
|
|
// Initialize on page load
|
|
window.addEventListener('load', () => {
|
|
log('🚀 Video Player Test Page Loaded');
|
|
log('📋 Available classes:');
|
|
log(` - BaseVideoPlayer: ${window.BaseVideoPlayer ? '✅' : '❌'}`);
|
|
log(` - FocusVideoPlayer: ${window.FocusVideoPlayer ? '✅' : '❌'}`);
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |