Add HLS support to multi-audio
This commit is contained in:
375
youtube/static/js/storyboard-preview.js
Normal file
375
youtube/static/js/storyboard-preview.js
Normal file
@@ -0,0 +1,375 @@
|
||||
/**
|
||||
* YouTube Storyboard Preview Thumbnails
|
||||
* Shows preview thumbnails when hovering over the progress bar
|
||||
* Works with native HTML5 video player
|
||||
*
|
||||
* Fetches the proxied WebVTT storyboard from backend and extracts image URLs
|
||||
*/
|
||||
(function() {
|
||||
'use strict';
|
||||
|
||||
console.log('Storyboard Preview Thumbnails loaded');
|
||||
|
||||
// Storyboard configuration
|
||||
let storyboardImages = []; // Array of {time, imageUrl, x, y, width, height}
|
||||
let previewElement = null;
|
||||
let tooltipElement = null;
|
||||
let video = null;
|
||||
let progressBarRect = null;
|
||||
|
||||
/**
|
||||
* Fetch and parse the storyboard VTT file
|
||||
* The backend generates a VTT with proxied image URLs
|
||||
*/
|
||||
function fetchStoryboardVTT(vttUrl) {
|
||||
return fetch(vttUrl)
|
||||
.then(response => {
|
||||
if (!response.ok) throw new Error('Failed to fetch storyboard VTT');
|
||||
return response.text();
|
||||
})
|
||||
.then(vttText => {
|
||||
console.log('Fetched storyboard VTT, length:', vttText.length);
|
||||
|
||||
const lines = vttText.split('\n');
|
||||
const images = [];
|
||||
let currentEntry = null;
|
||||
|
||||
for (let i = 0; i < lines.length; i++) {
|
||||
const line = lines[i].trim();
|
||||
|
||||
// Parse timestamp line: 00:00:00.000 --> 00:00:10.000
|
||||
if (line.includes('-->')) {
|
||||
const timeMatch = line.match(/^(\d{2}):(\d{2}):(\d{2})\.(\d{3})/);
|
||||
if (timeMatch) {
|
||||
const hours = parseInt(timeMatch[1]);
|
||||
const minutes = parseInt(timeMatch[2]);
|
||||
const seconds = parseInt(timeMatch[3]);
|
||||
const ms = parseInt(timeMatch[4]);
|
||||
currentEntry = {
|
||||
time: hours * 3600 + minutes * 60 + seconds + ms / 1000
|
||||
};
|
||||
}
|
||||
}
|
||||
// Parse image URL with crop parameters: /url#xywh=x,y,w,h
|
||||
else if (line.includes('#xywh=') && currentEntry) {
|
||||
const [urlPart, paramsPart] = line.split('#xywh=');
|
||||
const [x, y, width, height] = paramsPart.split(',').map(Number);
|
||||
|
||||
currentEntry.imageUrl = urlPart;
|
||||
currentEntry.x = x;
|
||||
currentEntry.y = y;
|
||||
currentEntry.width = width;
|
||||
currentEntry.height = height;
|
||||
|
||||
images.push(currentEntry);
|
||||
currentEntry = null;
|
||||
}
|
||||
}
|
||||
|
||||
console.log('Parsed', images.length, 'storyboard frames');
|
||||
return images;
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Format time as MM:SS or H:MM:SS
|
||||
*/
|
||||
function formatTime(seconds) {
|
||||
if (isNaN(seconds)) return '0:00';
|
||||
|
||||
const hours = Math.floor(seconds / 3600);
|
||||
const minutes = Math.floor((seconds % 3600) / 60);
|
||||
const secs = Math.floor(seconds % 60);
|
||||
|
||||
if (hours > 0) {
|
||||
return `${hours}:${minutes.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;
|
||||
}
|
||||
return `${minutes}:${secs.toString().padStart(2, '0')}`;
|
||||
}
|
||||
|
||||
/**
|
||||
* Find the closest storyboard frame for a given time
|
||||
*/
|
||||
function findFrameAtTime(time) {
|
||||
if (!storyboardImages.length) return null;
|
||||
|
||||
// Binary search for efficiency
|
||||
let left = 0;
|
||||
let right = storyboardImages.length - 1;
|
||||
|
||||
while (left <= right) {
|
||||
const mid = Math.floor((left + right) / 2);
|
||||
const frame = storyboardImages[mid];
|
||||
|
||||
if (time >= frame.time && time < (storyboardImages[mid + 1]?.time || Infinity)) {
|
||||
return frame;
|
||||
} else if (time < frame.time) {
|
||||
right = mid - 1;
|
||||
} else {
|
||||
left = mid + 1;
|
||||
}
|
||||
}
|
||||
|
||||
// Return closest frame
|
||||
return storyboardImages[Math.min(left, storyboardImages.length - 1)];
|
||||
}
|
||||
|
||||
/**
|
||||
* Detect browser
|
||||
*/
|
||||
function getBrowser() {
|
||||
const ua = navigator.userAgent;
|
||||
if (ua.indexOf('Firefox') > -1) return 'firefox';
|
||||
if (ua.indexOf('Chrome') > -1) return 'chrome';
|
||||
if (ua.indexOf('Safari') > -1) return 'safari';
|
||||
return 'other';
|
||||
}
|
||||
|
||||
/**
|
||||
* Detect the progress bar position in native video element
|
||||
* Different browsers have different control layouts
|
||||
*/
|
||||
function detectProgressBar() {
|
||||
if (!video) return null;
|
||||
|
||||
const rect = video.getBoundingClientRect();
|
||||
const browser = getBrowser();
|
||||
|
||||
let progressBarArea;
|
||||
|
||||
switch(browser) {
|
||||
case 'firefox':
|
||||
// Firefox: La barra de progreso está en la parte inferior pero más delgada
|
||||
// Normalmente ocupa solo unos 20-25px de altura y está centrada
|
||||
progressBarArea = {
|
||||
top: rect.bottom - 30, // Área más pequeña para Firefox
|
||||
bottom: rect.bottom - 5, // Dejamos espacio para otros controles
|
||||
left: rect.left + 60, // Firefox tiene botones a la izquierda (play, volumen)
|
||||
right: rect.right - 10, // Y a la derecha (fullscreen, etc)
|
||||
height: 25
|
||||
};
|
||||
break;
|
||||
|
||||
case 'chrome':
|
||||
default:
|
||||
// Chrome: La barra de progreso ocupa un área más grande
|
||||
progressBarArea = {
|
||||
top: rect.bottom - 50,
|
||||
bottom: rect.bottom,
|
||||
left: rect.left,
|
||||
right: rect.right,
|
||||
height: 50
|
||||
};
|
||||
break;
|
||||
}
|
||||
|
||||
return progressBarArea;
|
||||
}
|
||||
|
||||
/**
|
||||
* Check if mouse is over the progress bar area
|
||||
*/
|
||||
function isOverProgressBar(mouseX, mouseY) {
|
||||
if (!progressBarRect) return false;
|
||||
|
||||
return mouseX >= progressBarRect.left &&
|
||||
mouseX <= progressBarRect.right &&
|
||||
mouseY >= progressBarRect.top &&
|
||||
mouseY <= progressBarRect.bottom;
|
||||
}
|
||||
|
||||
/**
|
||||
* Initialize preview elements
|
||||
*/
|
||||
function initPreviewElements() {
|
||||
video = document.getElementById('js-video-player');
|
||||
if (!video) {
|
||||
console.error('Video element not found');
|
||||
return;
|
||||
}
|
||||
|
||||
console.log('Video element found, browser:', getBrowser());
|
||||
|
||||
// Create preview element
|
||||
previewElement = document.createElement('div');
|
||||
previewElement.className = 'storyboard-preview';
|
||||
previewElement.style.cssText = `
|
||||
position: fixed;
|
||||
display: none;
|
||||
pointer-events: none;
|
||||
z-index: 10000;
|
||||
background: #000;
|
||||
border: 2px solid #fff;
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 4px 12px rgba(0,0,0,0.5);
|
||||
`;
|
||||
|
||||
// Create tooltip element
|
||||
tooltipElement = document.createElement('div');
|
||||
tooltipElement.className = 'storyboard-tooltip';
|
||||
tooltipElement.style.cssText = `
|
||||
position: absolute;
|
||||
bottom: -25px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
background: rgba(0,0,0,0.8);
|
||||
color: #fff;
|
||||
padding: 2px 6px;
|
||||
border-radius: 3px;
|
||||
font-size: 12px;
|
||||
font-family: Arial, sans-serif;
|
||||
white-space: nowrap;
|
||||
pointer-events: none;
|
||||
`;
|
||||
|
||||
previewElement.appendChild(tooltipElement);
|
||||
document.body.appendChild(previewElement);
|
||||
|
||||
// Update progress bar position on mouse move
|
||||
video.addEventListener('mousemove', updateProgressBarPosition);
|
||||
}
|
||||
|
||||
/**
|
||||
* Update progress bar position detection
|
||||
*/
|
||||
function updateProgressBarPosition() {
|
||||
progressBarRect = detectProgressBar();
|
||||
}
|
||||
|
||||
/**
|
||||
* Handle mouse move - only show preview when over progress bar area
|
||||
*/
|
||||
function handleMouseMove(e) {
|
||||
if (!video || !storyboardImages.length) return;
|
||||
|
||||
// Update progress bar position on each move
|
||||
progressBarRect = detectProgressBar();
|
||||
|
||||
// Only show preview if mouse is over the progress bar area
|
||||
if (!isOverProgressBar(e.clientX, e.clientY)) {
|
||||
if (previewElement) previewElement.style.display = 'none';
|
||||
return;
|
||||
}
|
||||
|
||||
// Calculate position within the progress bar
|
||||
const progressBarWidth = progressBarRect.right - progressBarRect.left;
|
||||
let xInProgressBar = e.clientX - progressBarRect.left;
|
||||
|
||||
// Adjust for Firefox's left offset
|
||||
const browser = getBrowser();
|
||||
if (browser === 'firefox') {
|
||||
// Ajustar el rango para que coincida mejor con la barra real
|
||||
xInProgressBar = Math.max(0, Math.min(xInProgressBar, progressBarWidth));
|
||||
}
|
||||
|
||||
const percentage = Math.max(0, Math.min(1, xInProgressBar / progressBarWidth));
|
||||
const time = percentage * video.duration;
|
||||
const frame = findFrameAtTime(time);
|
||||
|
||||
if (!frame) return;
|
||||
|
||||
// Preview dimensions
|
||||
const previewWidth = 160;
|
||||
const previewHeight = 90;
|
||||
const offsetFromCursor = 10;
|
||||
|
||||
// Position above the cursor
|
||||
let previewTop = e.clientY - previewHeight - offsetFromCursor;
|
||||
|
||||
// If preview would go above the video, position below the cursor
|
||||
const videoRect = video.getBoundingClientRect();
|
||||
if (previewTop < videoRect.top) {
|
||||
previewTop = e.clientY + offsetFromCursor;
|
||||
}
|
||||
|
||||
// Keep preview within horizontal bounds
|
||||
let left = e.clientX - (previewWidth / 2);
|
||||
|
||||
// Ajustes específicos para Firefox
|
||||
if (browser === 'firefox') {
|
||||
// En Firefox, la barra no llega hasta los extremos
|
||||
const minLeft = progressBarRect.left + 10;
|
||||
const maxLeft = progressBarRect.right - previewWidth - 10;
|
||||
left = Math.max(minLeft, Math.min(left, maxLeft));
|
||||
} else {
|
||||
left = Math.max(videoRect.left, Math.min(left, videoRect.right - previewWidth));
|
||||
}
|
||||
|
||||
// Apply all styles
|
||||
previewElement.style.cssText = `
|
||||
display: block;
|
||||
position: fixed;
|
||||
left: ${left}px;
|
||||
top: ${previewTop}px;
|
||||
width: ${previewWidth}px;
|
||||
height: ${previewHeight}px;
|
||||
background-image: url('${frame.imageUrl}');
|
||||
background-position: -${frame.x}px -${frame.y}px;
|
||||
background-size: auto;
|
||||
background-repeat: no-repeat;
|
||||
border: 2px solid #fff;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 4px 12px rgba(0,0,0,0.5);
|
||||
z-index: 10000;
|
||||
pointer-events: none;
|
||||
`;
|
||||
|
||||
tooltipElement.textContent = formatTime(time);
|
||||
}
|
||||
|
||||
/**
|
||||
* Handle mouse leave video
|
||||
*/
|
||||
function handleMouseLeave() {
|
||||
if (previewElement) {
|
||||
previewElement.style.display = 'none';
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Initialize storyboard preview
|
||||
*/
|
||||
function init() {
|
||||
console.log('Initializing storyboard preview...');
|
||||
|
||||
// Check if storyboard URL is available
|
||||
if (typeof storyboard_url === 'undefined' || !storyboard_url) {
|
||||
console.log('No storyboard URL available');
|
||||
return;
|
||||
}
|
||||
|
||||
console.log('Storyboard URL:', storyboard_url);
|
||||
|
||||
// Fetch the proxied VTT file from backend
|
||||
fetchStoryboardVTT(storyboard_url)
|
||||
.then(images => {
|
||||
storyboardImages = images;
|
||||
console.log('Loaded', images.length, 'storyboard images');
|
||||
|
||||
if (images.length === 0) {
|
||||
console.log('No storyboard images parsed');
|
||||
return;
|
||||
}
|
||||
|
||||
initPreviewElements();
|
||||
|
||||
// Add event listeners to video
|
||||
video.addEventListener('mousemove', handleMouseMove);
|
||||
video.addEventListener('mouseleave', handleMouseLeave);
|
||||
|
||||
console.log('Storyboard preview initialized for', getBrowser());
|
||||
})
|
||||
.catch(err => {
|
||||
console.error('Failed to load storyboard:', err);
|
||||
});
|
||||
}
|
||||
|
||||
// Initialize when DOM is ready
|
||||
if (document.readyState === 'loading') {
|
||||
document.addEventListener('DOMContentLoaded', init);
|
||||
} else {
|
||||
init();
|
||||
}
|
||||
|
||||
})();
|
||||
Reference in New Issue
Block a user