diff --git a/index.html b/index.html index 348e41e..0b64332 100644 --- a/index.html +++ b/index.html @@ -99,9 +99,7 @@ -
- -
+
diff --git a/src/main.ts b/src/main.ts index 9a0a21f..a9b145e 100644 --- a/src/main.ts +++ b/src/main.ts @@ -206,29 +206,23 @@ function onTimeUpdate(event: Event) { } } -// Function to toggle maximized view for a specific video function toggleMaximizedView(index: number) { const container = document.getElementById("videoContainer"); if (!container) return; - // If we're already in maximized view and trying to maximize the same video, do nothing if (isMaximizedView && maximizedVideoIndex === index) return; - // If we're trying to restore grid view (index === -1) if (index === -1) { - if (!isMaximizedView) return; // Already in grid view + if (!isMaximizedView) return; - // Remove maximized class and restore grid class container.classList.remove("maximized"); container.classList.add(`count-${videos.length}`); - // Remove any wrapper divs and restore original structure while (container.firstChild) { container.removeChild(container.firstChild); } - // Re-add all videos directly to the container - videoElements.forEach(video => { + videoElements.forEach((video) => { container.appendChild(video); }); @@ -237,45 +231,36 @@ function toggleMaximizedView(index: number) { return; } - // If the index is out of range, do nothing if (index < 0 || index >= videoElements.length) return; - // Switch to maximized view container.classList.remove(`count-${videos.length}`); container.classList.add("maximized"); - - // Clear the container while (container.firstChild) { container.removeChild(container.firstChild); } - // Create main video div const mainVideoDiv = document.createElement("div"); mainVideoDiv.className = "main-video"; mainVideoDiv.appendChild(videoElements[index]); container.appendChild(mainVideoDiv); - // Create side videos div const sideVideosDiv = document.createElement("div"); sideVideosDiv.className = "side-videos"; container.appendChild(sideVideosDiv); - - // Add all other videos to side videos div with number labels videoElements.forEach((video, i) => { if (i !== index) { - // Create a wrapper for the video and label const videoWrapper = document.createElement("div"); videoWrapper.className = "video-wrapper"; - + // Add the video to the wrapper videoWrapper.appendChild(video); - + // Create and add the number label const numberLabel = document.createElement("div"); numberLabel.className = "video-number-label"; numberLabel.textContent = String(i + 1); // 1-based indexing for display videoWrapper.appendChild(numberLabel); - + // Add the wrapper to the side videos div sideVideosDiv.appendChild(videoWrapper); } @@ -285,28 +270,21 @@ function toggleMaximizedView(index: number) { maximizedVideoIndex = index; } -// Handle keyboard events function handleKeyPress(event: KeyboardEvent) { - // Check if the key pressed is a number const key = event.key; if (/^[0-9]$/.test(key)) { const num = parseInt(key, 10); if (num === 0) { - // Restore grid view toggleMaximizedView(-1); } else if (num <= videoElements.length) { - // Maximize the corresponding video (1-based indexing for user, 0-based for array) toggleMaximizedView(num - 1); } } } -// Initialize everything when the page loads document.addEventListener("DOMContentLoaded", async () => { try { await initialize("content/data.json"); - - // Add keyboard event listener document.addEventListener("keydown", handleKeyPress); } catch (err) { console.error("Failed to initialize:", err);