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

Compare commits

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

No commits in common. "53a29d27ea05736f3384a283acd470f44e4054cc" and "82482b87784515bbb698ca2ec46e2f2b45f23788" have entirely different histories.
53a29d27ea ... 82482b8778

2 changed files with 36 additions and 10 deletions
Show stats Expand all files Collapse all files

4
index.html
View file

@ -99,7 +99,9 @@
</style> </style>
</head> </head>
<body> <body>
<div id="videoContainer" class="video-container"></div> <div id="videoContainer" class="video-container">
<!-- 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>

36
src/main.ts
View file

@ -168,10 +168,13 @@ function syncAllVideos(
relativeTime + videos[Number(videoElement.dataset.index)].syncPoint; relativeTime + videos[Number(videoElement.dataset.index)].syncPoint;
if (syncedTime < 0) { if (syncedTime < 0) {
videoElement.pause();
videoElement.currentTime = 0; videoElement.currentTime = 0;
} else if (syncedTime > videoElement.duration) {
videoElement.pause(); videoElement.pause();
} else if (
syncedTime >
videoElement.duration -
videos[Number(videoElement.dataset.index)].syncPoint
) {
videoElement.currentTime = videoElement.duration; videoElement.currentTime = videoElement.duration;
} else { } else {
videoElement.currentTime = syncedTime; videoElement.currentTime = syncedTime;
@ -191,8 +194,7 @@ 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",
@ -204,23 +206,29 @@ 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; if (!isMaximizedView) return; // Already in grid view
// 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);
} }
videoElements.forEach((video) => { // Re-add all videos directly to the container
videoElements.forEach(video => {
container.appendChild(video); container.appendChild(video);
}); });
@ -229,24 +237,33 @@ 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";
@ -268,21 +285,28 @@ 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);