Local YouTube

Local YouTube

body { font-family: sans-serif; margin: 20px; } #video-player-container { max-width: 800px; margin-bottom: 20px; position: relative; /* Needed for overlay positioning */ } #video-player, #animation-canvas { width: 100%; height: auto; display: block; /* Prevent inline spacing issues */ } #animation-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0); /* Initially transparent */ pointer-events: none; /* Allow video controls to be clickable */ opacity: 0; /* Initially hidden */ transition: opacity 0.5s ease, background-color 0.5s ease; /* Smooth transition */ display: flex; justify-content: center; align-items: center; font-size: 2em; color: white; text-shadow: 2px 2px 4px #000000; } #controls button, .tool-options button { margin-right: 10px; padding: 8px 15px; cursor: pointer; } #video-list, #animation-frames-list, #animation-tools { margin-top: 20px; } #videos-ul, #animation-frames-ul { list-style-type: none; padding: 0; } #videos-ul li, #animation-frames-ul li { padding: 8px 0; border-bottom: 1px solid #eee; cursor: pointer; } #videos-ul li:last-child, #animation-frames-ul li:last-child { border-bottom: none; } .tool-options { margin-bottom: 10px; } .tool-btn.active { background-color: #007bff; color: white; } document.addEventListener('DOMContentLoaded', () => { const videoPlayer = document.getElementById('video-player'); const recordScreenButton = document.getElementById('record-screen'); const uploadVideoButton = document.getElementById('upload-video'); const videoUploadInput = document.getElementById('video-upload-input'); const videoListButton = document.getElementById('video-list-btn'); const videoListDiv = document.getElementById('video-list'); const videosUl = document.getElementById('videos-ul'); const animationOverlay = document.getElementById('animation-overlay'); const animationCanvas = document.getElementById('animation-canvas'); const animationModeButton = document.getElementById('animation-mode-btn'); const addFrameButton = document.getElementById('add-frame-btn'); const animationFramesListDiv = document.getElementById('animation-frames-list'); const animationFramesUl = document.getElementById('animation-frames-ul'); const playAnimationButton = document.getElementById('play-animation-btn'); const animationToolsDiv = document.getElementById('animation-tools'); const pencilToolButton = document.getElementById('pencil-tool'); const eraserToolButton = document.getElementById('eraser-tool'); const colorPicker = document.getElementById('color-picker'); const brushSizeInput = document.getElementById('brush-size'); const ctx = animationCanvas.getContext('2d'); let animationMode = false; let animationFrames = []; let animationInterval; let currentTool = 'pencil'; let drawingColor = colorPicker.value; let brushSize = brushSizeInput.value; let isDrawing = false; let lastX = 0; let lastY = 0; // Load videos and animations from local storage on start loadVideos(); loadAnimationFrames(); updateAnimationModeUI(); recordScreenButton.addEventListener('click', () => { if (animationMode) { playCanvasAnimation(); } else { playAnimation(); // Original animation function for video overlay } }); uploadVideoButton.addEventListener('click', () => { if (!animationMode) { videoUploadInput.click(); } else { alert("Switch to video mode to upload videos."); } }); videoUploadInput.addEventListener('change', handleVideoUpload); videoListButton.addEventListener('click', () => { videoListDiv.style.display = videoListDiv.style.display === 'none' ? 'block' : 'none'; animationFramesListDiv.style.display = 'none'; // Hide animation frames list animationToolsDiv.style.display = 'none'; // Hide animation tools }); animationModeButton.addEventListener('click', () => { animationMode = !animationMode; updateAnimationModeUI(); }); addFrameButton.addEventListener('click', addAnimationFrame); playAnimationButton.addEventListener('click', playCanvasAnimation); // Tool buttons event listeners pencilToolButton.addEventListener('click', () => { currentTool = 'pencil'; pencilToolButton.classList.add('active'); eraserToolButton.classList.remove('active'); }); eraserToolButton.addEventListener('click', () => { currentTool = 'eraser'; eraserToolButton.classList.add('active'); pencilToolButton.classList.remove('active'); }); colorPicker.addEventListener('change', (e) => { drawingColor = e.target.value; }); brushSizeInput.addEventListener('change', (e) => { brushSize = e.target.value; }); function updateAnimationModeUI() { if (animationMode) { animationModeButton.textContent = "Video Mode"; uploadVideoButton.style.display = 'none'; recordScreenButton.textContent = 'Play Canvas Animation'; videoPlayer.style.display = 'none'; animationCanvas.style.display = 'block'; addFrameButton.style.display = 'inline-block'; playAnimationButton.style.display = 'inline-block'; animationFramesListDiv.style.display = 'block'; videoListDiv.style.display = 'none'; // Hide video list animationToolsDiv.style.display = 'block'; // Show animation tools } else { animationModeButton.textContent = "Animation Mode"; uploadVideoButton.style.display = 'inline-block'; recordScreenButton.textContent = 'Play Animation'; videoPlayer.style.display = 'block'; animationCanvas.style.display = 'none'; addFrameButton.style.display = 'none'; playAnimationButton.style.display = 'none'; animationFramesListDiv.style.display = 'none'; animationToolsDiv.style.display = 'none'; // Hide animation tools } } function handleVideoUpload(event) { const file = event.target.files[0]; if (file && file.type === 'video/mp4') { const reader = new FileReader(); reader.onload = (e) => { saveVideo(file.name, e.target.result); }; reader.readAsDataURL(file); } else { alert('Please upload a valid MP4 video file.'); } } function playAnimation() { animationOverlay.textContent = "Animating..."; animationOverlay.style.opacity = 1; animationOverlay.style.backgroundColor = 'rgba(0, 123, 255, 0.5)'; // Example animation: blue overlay // Reset animation after a delay setTimeout(() => { animationOverlay.style.opacity = 0; animationOverlay.style.backgroundColor = 'rgba(0, 0, 0, 0)'; animationOverlay.textContent = ""; }, 2000); // Animation duration: 2 seconds } function saveVideo(name, dataUrl) { let videos = JSON.parse(localStorage.getItem('localVideos') || '[]'); videos.push({ name: name, url: dataUrl }); localStorage.setItem('localVideos', JSON.stringify(videos)); loadVideos(); // Reload video list } function loadVideos() { videosUl.innerHTML = ''; // Clear existing list const videos = JSON.parse(localStorage.getItem('localVideos') || '[]'); videos.forEach((video, index) => { const li = document.createElement('li'); li.textContent = video.name; li.addEventListener('click', () => playVideo(video.url)); videosUl.appendChild(li); }); } function playVideo(videoUrl) { videoPlayer.src = videoUrl; videoPlayer.style.display = 'block'; // Ensure video player is visible animationCanvas.style.display = 'none'; // Hide canvas videoPlayer.play(); videoListDiv.style.display = 'none'; // Hide video list after playing animationFramesListDiv.style.display = 'none'; // Hide animation frames list animationToolsDiv.style.display = 'none'; // Hide animation tools } // Animation Frame Functions function addAnimationFrame() { const frameData = animationCanvas.toDataURL(); // Get canvas image as data URL animationFrames.push(frameData); saveAnimationFrames(); loadAnimationFrames(); // Update UI list ctx.clearRect(0, 0, animationCanvas.width, animationCanvas.height); // Clear canvas for next frame isDrawing = false; // Reset drawing state } function loadAnimationFrames() { animationFramesUl.innerHTML = ''; // Clear existing list animationFrames = JSON.parse(localStorage.getItem('animationFrames') || '[]'); animationFrames.forEach((frameData, index) => { const li = document.createElement('li'); li.textContent = `Frame ${index + 1}`; li.addEventListener('click', () => displayAnimationFrame(frameData)); animationFramesUl.appendChild(li); }); } function saveAnimationFrames() { localStorage.setItem('animationFrames', JSON.stringify(animationFrames)); } function displayAnimationFrame(frameData) { const img = new Image(); img.onload = () => { ctx.clearRect(0, 0, animationCanvas.width, animationCanvas.height); ctx.drawImage(img, 0, 0, animationCanvas.width, animationCanvas.height); }; img.src = frameData; } function playCanvasAnimation() { if (animationFrames.length === 0) { alert("No animation frames to play. Add some frames!"); return; } let frameIndex = 0; videoPlayer.style.display = 'none'; // Hide video player animationCanvas.style.display = 'block'; // Show canvas animationToolsDiv.style.display = 'block'; // Show animation tools if (animationInterval) { clearInterval(animationInterval); // Clear any existing interval } animationInterval = setInterval(() => { displayAnimationFrame(animationFrames[frameIndex]); frameIndex = (frameIndex + 1) % animationFrames.length; // Loop animation }, 100); // 10 frames per second (adjust for speed) } // Canvas Drawing Functionality animationCanvas.addEventListener('mousedown', (e) => { isDrawing = true; lastX = e.offsetX; lastY = e.offsetY; }); animationCanvas.addEventListener('mousemove', draw); animationCanvas.addEventListener('mouseup', () => isDrawing = false); animationCanvas.addEventListener('mouseout', () => isDrawing = false); function draw(e) { if (!isDrawing) return; ctx.beginPath(); ctx.lineWidth = brushSize; ctx.lineCap = 'round'; if (currentTool === 'eraser') { ctx.strokeStyle = 'white'; // Or canvas background color ctx.globalCompositeOperation = 'destination-out'; // For erasing effect } else { ctx.strokeStyle = drawingColor; ctx.globalCompositeOperation = 'source-over'; // Default drawing mode } ctx.moveTo(lastX, lastY); ctx.lineTo(e.offsetX, e.offsetY); ctx.stroke(); lastX = e.offsetX; lastY = e.offsetY; } });