add clickable video timestamps
This commit is contained in:
@@ -3258,15 +3258,18 @@ body.layout-legacy .scroll-to-bottom svg {
|
|||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.comment-context-link {
|
.comment-context-link,
|
||||||
|
.comment-timestamp {
|
||||||
color: var(--accent);
|
color: var(--accent);
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
font-family: 'VCR', monospace;
|
font-family: 'VCR', monospace;
|
||||||
font-size: 0.9em;
|
font-size: 0.9em;
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
.comment-context-link:hover {
|
.comment-context-link:hover,
|
||||||
|
.comment-timestamp:hover {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
text-decoration: underline;
|
text-decoration: underline;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1727,6 +1727,16 @@ class CommentSystem {
|
|||||||
return `<a href="#c${id}" class="comment-context-link" data-id="${id}">>>${id}</a>`;
|
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
|
// Handle Image Embeds
|
||||||
processedLine = processedLine.replace(imageRegex, (match, url) => {
|
processedLine = processedLine.replace(imageRegex, (match, url) => {
|
||||||
let fullUrl = 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() {
|
toggleComments() {
|
||||||
|
|||||||
Reference in New Issue
Block a user