Compare commits
2 commits
82482b8778
...
53a29d27ea
| Author | SHA1 | Date | |
|---|---|---|---|
| 53a29d27ea | |||
| 3fd24a16f8 |
2 changed files with 11 additions and 37 deletions
|
|
@ -99,9 +99,7 @@
|
|||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="videoContainer" class="video-container">
|
||||
<!-- Videos will be added here by JavaScript -->
|
||||
</div>
|
||||
<div id="videoContainer" class="video-container"></div>
|
||||
<script type="module" src="/src/main.ts"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
44
src/main.ts
44
src/main.ts
|
|
@ -168,13 +168,10 @@ function syncAllVideos(
|
|||
relativeTime + videos[Number(videoElement.dataset.index)].syncPoint;
|
||||
|
||||
if (syncedTime < 0) {
|
||||
videoElement.currentTime = 0;
|
||||
videoElement.pause();
|
||||
} else if (
|
||||
syncedTime >
|
||||
videoElement.duration -
|
||||
videos[Number(videoElement.dataset.index)].syncPoint
|
||||
) {
|
||||
videoElement.currentTime = 0;
|
||||
} else if (syncedTime > videoElement.duration) {
|
||||
videoElement.pause();
|
||||
videoElement.currentTime = videoElement.duration;
|
||||
} else {
|
||||
videoElement.currentTime = syncedTime;
|
||||
|
|
@ -194,7 +191,8 @@ function onTimeUpdate(event: Event) {
|
|||
for (const videoElement of videoElements) {
|
||||
if (
|
||||
videoElement.paused &&
|
||||
relativeTime + videos[Number(videoElement.dataset.index)].syncPoint > 0
|
||||
relativeTime + videos[Number(videoElement.dataset.index)].syncPoint > 0 &&
|
||||
videoElement.currentTime < videoElement.duration - 1
|
||||
) {
|
||||
console.log(
|
||||
"Reached sync point for",
|
||||
|
|
@ -206,29 +204,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 +229,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 +268,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);
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue