thm/syncvid
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Compare commits

base: thm:82482b87784515bbb698ca2ec46e2f2b45f23788
Branches Tags
thm:main
..
compare: thm:53a29d27ea05736f3384a283acd470f44e4054cc
Branches Tags
thm:main

2 commits
82482b8778 ... 53a29d27ea

Author SHA1 Message Date
Tomáš Mládek
53a29d27ea fix various syncing issues 2025-05-23 16:13:06 +02:00
Tomáš Mládek
3fd24a16f8 remove unnecessary comments 2025-05-22 23:54:11 +02:00
2 changed files with 11 additions and 37 deletions
Show stats Expand all files Collapse all files

4
index.html
View file

@ -99,9 +99,7 @@
</style> </style>
</head> </head>
<body> <body>
<div id="videoContainer" class="video-container"> <div id="videoContainer" class="video-container"></div>
<!-- Videos will be added here by JavaScript -->
</div>
<script type="module" src="/src/main.ts"></script> <script type="module" src="/src/main.ts"></script>
</body> </body>
</html> </html>

44
src/main.ts
View file

@ -168,13 +168,10 @@ function syncAllVideos(
relativeTime + videos[Number(videoElement.dataset.index)].syncPoint; relativeTime + videos[Number(videoElement.dataset.index)].syncPoint;
if (syncedTime < 0) { if (syncedTime < 0) {
videoElement.currentTime = 0;
videoElement.pause(); videoElement.pause();
} else if ( videoElement.currentTime = 0;
syncedTime > } else if (syncedTime > videoElement.duration) {
videoElement.duration - videoElement.pause();
videos[Number(videoElement.dataset.index)].syncPoint
) {
videoElement.currentTime = videoElement.duration; videoElement.currentTime = videoElement.duration;
} else { } else {
videoElement.currentTime = syncedTime; videoElement.currentTime = syncedTime;
@ -194,7 +191,8 @@ function onTimeUpdate(event: Event) {
for (const videoElement of videoElements) { for (const videoElement of videoElements) {
if ( if (
videoElement.paused && 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( console.log(
"Reached sync point for", "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) { function toggleMaximizedView(index: number) {
const container = document.getElementById("videoContainer"); const container = document.getElementById("videoContainer");
if (!container) return; 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 (isMaximizedView && maximizedVideoIndex === index) return;
// If we're trying to restore grid view (index === -1)
if (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.remove("maximized");
container.classList.add(`count-${videos.length}`); container.classList.add(`count-${videos.length}`);
// Remove any wrapper divs and restore original structure
while (container.firstChild) { while (container.firstChild) {
container.removeChild(container.firstChild); container.removeChild(container.firstChild);
} }
// Re-add all videos directly to the container videoElements.forEach((video) => {
videoElements.forEach(video => {
container.appendChild(video); container.appendChild(video);
}); });
@ -237,45 +229,36 @@ function toggleMaximizedView(index: number) {
return; return;
} }
// If the index is out of range, do nothing
if (index < 0 || index >= videoElements.length) return; if (index < 0 || index >= videoElements.length) return;
// Switch to maximized view
container.classList.remove(`count-${videos.length}`); container.classList.remove(`count-${videos.length}`);
container.classList.add("maximized"); container.classList.add("maximized");
// Clear the container
while (container.firstChild) { while (container.firstChild) {
container.removeChild(container.firstChild); container.removeChild(container.firstChild);
} }
// Create main video div
const mainVideoDiv = document.createElement("div"); const mainVideoDiv = document.createElement("div");
mainVideoDiv.className = "main-video"; mainVideoDiv.className = "main-video";
mainVideoDiv.appendChild(videoElements[index]); mainVideoDiv.appendChild(videoElements[index]);
container.appendChild(mainVideoDiv); container.appendChild(mainVideoDiv);
// Create side videos div
const sideVideosDiv = document.createElement("div"); const sideVideosDiv = document.createElement("div");
sideVideosDiv.className = "side-videos"; sideVideosDiv.className = "side-videos";
container.appendChild(sideVideosDiv); container.appendChild(sideVideosDiv);
// Add all other videos to side videos div with number labels
videoElements.forEach((video, i) => { videoElements.forEach((video, i) => {
if (i !== index) { if (i !== index) {
// Create a wrapper for the video and label
const videoWrapper = document.createElement("div"); const videoWrapper = document.createElement("div");
videoWrapper.className = "video-wrapper"; videoWrapper.className = "video-wrapper";
// Add the video to the wrapper // Add the video to the wrapper
videoWrapper.appendChild(video); videoWrapper.appendChild(video);
// Create and add the number label // Create and add the number label
const numberLabel = document.createElement("div"); const numberLabel = document.createElement("div");
numberLabel.className = "video-number-label"; numberLabel.className = "video-number-label";
numberLabel.textContent = String(i + 1); // 1-based indexing for display numberLabel.textContent = String(i + 1); // 1-based indexing for display
videoWrapper.appendChild(numberLabel); videoWrapper.appendChild(numberLabel);
// Add the wrapper to the side videos div // Add the wrapper to the side videos div
sideVideosDiv.appendChild(videoWrapper); sideVideosDiv.appendChild(videoWrapper);
} }
@ -285,28 +268,21 @@ function toggleMaximizedView(index: number) {
maximizedVideoIndex = index; maximizedVideoIndex = index;
} }
// Handle keyboard events
function handleKeyPress(event: KeyboardEvent) { function handleKeyPress(event: KeyboardEvent) {
// Check if the key pressed is a number
const key = event.key; const key = event.key;
if (/^[0-9]$/.test(key)) { if (/^[0-9]$/.test(key)) {
const num = parseInt(key, 10); const num = parseInt(key, 10);
if (num === 0) { if (num === 0) {
// Restore grid view
toggleMaximizedView(-1); toggleMaximizedView(-1);
} else if (num <= videoElements.length) { } else if (num <= videoElements.length) {
// Maximize the corresponding video (1-based indexing for user, 0-based for array)
toggleMaximizedView(num - 1); toggleMaximizedView(num - 1);
} }
} }
} }
// Initialize everything when the page loads
document.addEventListener("DOMContentLoaded", async () => { document.addEventListener("DOMContentLoaded", async () => {
try { try {
await initialize("content/data.json"); await initialize("content/data.json");
// Add keyboard event listener
document.addEventListener("keydown", handleKeyPress); document.addEventListener("keydown", handleKeyPress);
} catch (err) { } catch (err) {
console.error("Failed to initialize:", err); console.error("Failed to initialize:", err);