add clickable video timestamps

This commit is contained in:
2026-06-08 13:43:28 +02:00
parent 219cab1b03
commit a6997bc4b4
2 changed files with 38 additions and 2 deletions

View File

@@ -3258,15 +3258,18 @@ body.layout-legacy .scroll-to-bottom svg {
margin: 0;
}
.comment-context-link {
.comment-context-link,
.comment-timestamp {
color: var(--accent);
text-decoration: none;
font-family: 'VCR', monospace;
font-size: 0.9em;
opacity: 1;
cursor: pointer;
}
.comment-context-link:hover {
.comment-context-link:hover,
.comment-timestamp:hover {
opacity: 1;
text-decoration: underline;
}

View File

@@ -1727,6 +1727,16 @@ class CommentSystem {
return `<a href="#c${id}" class="comment-context-link" data-id="${id}">>>${id}</a>`;
});
// Handle Timestamps (e.g., 2:20, 1:02:20)
const timestampRegex = /\b(?<![\.\/:])(?:(\d{1,2}):)?(\d{1,3}):([0-5]\d)\b/g;
processedLine = processedLine.replace(timestampRegex, (match, hrs, mins, secs) => {
const h = hrs ? parseInt(hrs, 10) : 0;
const m = parseInt(mins, 10);
const s = parseInt(secs, 10);
const totalSeconds = h * 3600 + m * 60 + s;
return `<a href="#" class="comment-timestamp" data-time="${totalSeconds}">${match}</a>`;
});
// Handle Image Embeds
processedLine = processedLine.replace(imageRegex, (match, url) => {
let fullUrl = url;
@@ -3667,6 +3677,29 @@ class CommentSystem {
}
}
});
// Global timestamp seek & scroll listener
document.addEventListener('click', (e) => {
const timestampLink = e.target.closest('.comment-timestamp');
if (timestampLink) {
e.preventDefault();
e.stopPropagation();
const seconds = parseFloat(timestampLink.dataset.time);
if (!isNaN(seconds)) {
const mediaElement = document.querySelector('#my-video') || document.querySelector('audio#my-video');
if (mediaElement) {
mediaElement.currentTime = seconds;
if (mediaElement.paused) {
mediaElement.play().catch(() => {});
}
const playerContainer = mediaElement.closest('.v0ck') || mediaElement;
if (playerContainer) {
playerContainer.scrollIntoView({ behavior: 'smooth', block: 'center' });
}
}
}
}
});
}
toggleComments() {