vidply 1.0.28 → 1.0.30

package/src/utils/MenuFactory.js

@@ -0,0 +1,374 @@
+/**
+ * Menu Factory - Centralized menu creation and management
+ * Reduces code duplication across ControlBar menu methods
+ */
+
+import { DOMUtils } from './DOMUtils.js';
+import { createIconElement } from '../icons/Icons.js';
+import { i18n } from '../i18n/i18n.js';
+import { attachMenuKeyboardNavigation, focusFirstMenuItem } from './MenuUtils.js';
+
+/**
+ * Create and show a menu with standard positioning and behavior
+ * @param {Object} options - Menu configuration
+ * @returns {HTMLElement} The created menu element
+ */
+export function createMenu({
+    player,
+    button,
+    menuClass,
+    ariaLabel,
+    items = [],
+    activeIndex = -1,
+    onClose = null,
+    insertIntoDOM = null,
+    positionMenu = null,
+    attachCloseHandler = null
+}) {
+    const classPrefix = player.options.classPrefix;
+    
+    // Remove existing menu (toggle behavior)
+    const existingMenu = document.querySelector(`.${classPrefix}-${menuClass}`);
+    if (existingMenu) {
+        existingMenu.remove();
+        button.setAttribute('aria-expanded', 'false');
+        return null;
+    }
+
+    // Create menu container
+    const menu = DOMUtils.createElement('div', {
+        className: `${classPrefix}-${menuClass} ${classPrefix}-menu`,
+        attributes: {
+            'role': 'menu',
+            'aria-label': ariaLabel
+        }
+    });
+
+    let activeItem = null;
+
+    // Create menu items
+    items.forEach((itemConfig, index) => {
+        if (itemConfig.type === 'divider') {
+            const divider = DOMUtils.createElement('div', {
+                className: `${classPrefix}-menu-divider`,
+                attributes: { 'role': 'separator' }
+            });
+            menu.appendChild(divider);
+            return;
+        }
+
+        if (itemConfig.type === 'header') {
+            const header = DOMUtils.createElement('div', {
+                className: `${classPrefix}-menu-header`,
+                textContent: itemConfig.text
+            });
+            menu.appendChild(header);
+            return;
+        }
+
+        if (itemConfig.disabled) {
+            const disabledItem = DOMUtils.createElement('div', {
+                className: `${classPrefix}-menu-item`,
+                textContent: itemConfig.text,
+                attributes: { 'role': 'menuitem' },
+                style: { opacity: '0.5', cursor: 'default' }
+            });
+            menu.appendChild(disabledItem);
+            return;
+        }
+
+        const item = DOMUtils.createElement('button', {
+            className: `${classPrefix}-menu-item`,
+            attributes: {
+                'type': 'button',
+                'role': 'menuitem',
+                'tabindex': '-1'
+            }
+        });
+
+        // Add content based on item type
+        if (itemConfig.icon) {
+            item.appendChild(createIconElement(itemConfig.icon));
+        }
+
+        if (itemConfig.timeLabel) {
+            const timeSpan = DOMUtils.createElement('span', {
+                className: `${classPrefix}-chapter-time`,
+                textContent: itemConfig.timeLabel,
+                attributes: itemConfig.timeAriaLabel 
+                    ? { 'aria-label': itemConfig.timeAriaLabel }
+                    : {}
+            });
+            item.appendChild(timeSpan);
+            item.appendChild(document.createTextNode(' '));
+        }
+
+        if (itemConfig.text) {
+            const textSpan = DOMUtils.createElement('span', {
+                className: itemConfig.textClass || `${classPrefix}-menu-item-text`,
+                textContent: itemConfig.text
+            });
+            item.appendChild(textSpan);
+        }
+
+        // Mark as active
+        const isActive = itemConfig.active || index === activeIndex;
+        if (isActive) {
+            item.classList.add(`${classPrefix}-menu-item-active`);
+            item.appendChild(createIconElement('check'));
+            activeItem = item;
+        }
+
+        // Click handler
+        if (itemConfig.onClick) {
+            item.addEventListener('click', () => {
+                itemConfig.onClick(itemConfig.value, index);
+                closeMenuAndReturnFocus(menu, button, onClose);
+            });
+        }
+
+        menu.appendChild(item);
+    });
+
+    // Position menu (hide first to prevent jumping)
+    menu.style.visibility = 'hidden';
+    menu.style.display = 'block';
+    
+    // Insert into DOM
+    if (insertIntoDOM) {
+        insertIntoDOM(menu, button);
+    } else {
+        button.insertAdjacentElement('afterend', menu);
+    }
+    
+    // Position
+    if (positionMenu) {
+        positionMenu(menu, button, true);
+    }
+    
+    // Show menu
+    requestAnimationFrame(() => {
+        menu.style.visibility = 'visible';
+    });
+
+    // Add keyboard navigation
+    attachMenuKeyboardNavigation(menu, button, `.${classPrefix}-menu-item`, () => {
+        closeMenuAndReturnFocus(menu, button, onClose);
+    });
+    
+    // Focus active or first item
+    setTimeout(() => {
+        const focusTarget = activeItem || menu.querySelector(`.${classPrefix}-menu-item`);
+        if (focusTarget) {
+            focusTarget.focus({ preventScroll: true });
+        }
+    }, 0);
+
+    // Attach close handler
+    if (attachCloseHandler) {
+        attachCloseHandler(menu, button);
+    }
+
+    button.setAttribute('aria-expanded', 'true');
+
+    return menu;
+}
+
+/**
+ * Close menu and return focus to button
+ */
+function closeMenuAndReturnFocus(menu, button, onClose) {
+    if (menu) {
+        menu.remove();
+    }
+    button.setAttribute('aria-expanded', 'false');
+    button.focus({ preventScroll: true });
+    if (onClose) {
+        onClose();
+    }
+}
+
+/**
+ * Create a speed menu
+ */
+export function createSpeedMenu({
+    player,
+    button,
+    currentSpeed,
+    speeds = [0.25, 0.5, 0.75, 1, 1.25, 1.5, 1.75, 2],
+    onSpeedChange,
+    insertIntoDOM,
+    positionMenu,
+    attachCloseHandler
+}) {
+    const items = speeds.map(speed => ({
+        text: speed === 1 ? i18n.t('player.normalSpeed') : `${speed}x`,
+        value: speed,
+        active: Math.abs(currentSpeed - speed) < 0.01,
+        onClick: (value) => onSpeedChange(value)
+    }));
+
+    return createMenu({
+        player,
+        button,
+        menuClass: 'speed-menu',
+        ariaLabel: i18n.t('player.speed'),
+        items,
+        insertIntoDOM,
+        positionMenu,
+        attachCloseHandler
+    });
+}
+
+/**
+ * Create a captions menu
+ */
+export function createCaptionsMenu({
+    player,
+    button,
+    tracks,
+    currentTrackIndex,
+    captionsEnabled,
+    onTrackSelect,
+    onDisable,
+    insertIntoDOM,
+    positionMenu,
+    attachCloseHandler
+}) {
+    const classPrefix = player.options.classPrefix;
+    
+    const items = [
+        {
+            text: i18n.t('player.captionsOff'),
+            active: !captionsEnabled,
+            onClick: () => onDisable()
+        }
+    ];
+
+    tracks.forEach((track, index) => {
+        items.push({
+            text: track.label || track.language,
+            value: index,
+            active: captionsEnabled && currentTrackIndex === index,
+            onClick: () => onTrackSelect(index)
+        });
+    });
+
+    return createMenu({
+        player,
+        button,
+        menuClass: 'captions-menu',
+        ariaLabel: i18n.t('player.captions'),
+        items,
+        insertIntoDOM,
+        positionMenu,
+        attachCloseHandler
+    });
+}
+
+/**
+ * Create a chapters menu
+ */
+export function createChaptersMenu({
+    player,
+    button,
+    chapters,
+    onChapterSelect,
+    formatTime,
+    formatDuration,
+    insertIntoDOM,
+    positionMenu,
+    attachCloseHandler
+}) {
+    if (!chapters || chapters.length === 0) {
+        return createMenu({
+            player,
+            button,
+            menuClass: 'chapters-menu',
+            ariaLabel: i18n.t('player.chapters'),
+            items: [{
+                text: i18n.t('player.noChapters'),
+                disabled: true
+            }],
+            insertIntoDOM,
+            positionMenu,
+            attachCloseHandler
+        });
+    }
+
+    const items = chapters.map(chapter => ({
+        timeLabel: formatTime(chapter.startTime),
+        timeAriaLabel: formatDuration(chapter.startTime),
+        text: chapter.text,
+        textClass: `${player.options.classPrefix}-chapter-title`,
+        value: chapter.startTime,
+        onClick: (value) => onChapterSelect(value)
+    }));
+
+    return createMenu({
+        player,
+        button,
+        menuClass: 'chapters-menu',
+        ariaLabel: i18n.t('player.chapters'),
+        items,
+        insertIntoDOM,
+        positionMenu,
+        attachCloseHandler
+    });
+}
+
+/**
+ * Create a quality menu
+ */
+export function createQualityMenu({
+    player,
+    button,
+    qualities,
+    currentQuality,
+    isHLS,
+    onQualitySelect,
+    insertIntoDOM,
+    positionMenu,
+    attachCloseHandler
+}) {
+    const items = [];
+
+    // Auto option for HLS
+    if (isHLS) {
+        items.push({
+            text: i18n.t('player.auto'),
+            value: -1,
+            active: currentQuality === -1,
+            onClick: () => onQualitySelect(-1)
+        });
+    }
+
+    // Quality options
+    qualities.forEach(quality => {
+        items.push({
+            text: quality.name || `${quality.height}p`,
+            value: quality.index,
+            active: quality.index === currentQuality,
+            onClick: () => onQualitySelect(quality.index)
+        });
+    });
+
+    if (items.length === 0) {
+        items.push({
+            text: i18n.t('player.autoQuality'),
+            disabled: true
+        });
+    }
+
+    return createMenu({
+        player,
+        button,
+        menuClass: 'quality-menu',
+        ariaLabel: i18n.t('player.quality'),
+        items,
+        insertIntoDOM,
+        positionMenu,
+        attachCloseHandler
+    });
+}
+

package/src/utils/VideoFrameCapture.js

@@ -0,0 +1,110 @@
+/**
+ * Utility for capturing frames from video elements
+ */
+
+/**
+ * Capture a frame from a video element at a specific time
+ * @param {HTMLVideoElement} video - Video element to capture from
+ * @param {number} time - Time in seconds to capture
+ * @param {Object} options - Options for frame capture
+ * @param {boolean} [options.restoreState=true] - Whether to restore video state after capture
+ * @param {number} [options.quality=0.9] - JPEG quality (0-1)
+ * @param {number} [options.maxWidth] - Maximum width for thumbnail
+ * @param {number} [options.maxHeight] - Maximum height for thumbnail
+ * @returns {Promise<string|null>} Data URL of the captured frame or null if failed
+ */
+export async function captureVideoFrame(video, time, options = {}) {
+    if (!video || video.tagName !== 'VIDEO') {
+        return null;
+    }
+
+    const {
+        restoreState = true,
+        quality = 0.9,
+        maxWidth,
+        maxHeight
+    } = options;
+
+    // Save original state if we need to restore it
+    const wasPlaying = !video.paused;
+    const originalTime = video.currentTime;
+    const originalMuted = video.muted;
+
+    // Ensure video is muted during capture to avoid audio playback
+    if (restoreState) {
+        video.muted = true;
+    }
+
+    return new Promise((resolve) => {
+        const captureFrame = () => {
+            try {
+                // Get video dimensions
+                let width = video.videoWidth || 640;
+                let height = video.videoHeight || 360;
+
+                // Scale down if max dimensions specified
+                if (maxWidth && width > maxWidth) {
+                    const ratio = maxWidth / width;
+                    width = maxWidth;
+                    height = Math.round(height * ratio);
+                }
+                if (maxHeight && height > maxHeight) {
+                    const ratio = maxHeight / height;
+                    height = maxHeight;
+                    width = Math.round(width * ratio);
+                }
+
+                // Create canvas to capture frame
+                const canvas = document.createElement('canvas');
+                canvas.width = width;
+                canvas.height = height;
+                
+                const ctx = canvas.getContext('2d');
+                ctx.drawImage(video, 0, 0, width, height);
+                
+                const dataURL = canvas.toDataURL('image/jpeg', quality);
+                
+                // Restore original state if needed
+                if (restoreState) {
+                    video.currentTime = originalTime;
+                    video.muted = originalMuted;
+                    if (wasPlaying && !video.paused) {
+                        video.play().catch(() => {});
+                    }
+                }
+                
+                resolve(dataURL);
+            } catch (error) {
+                // Restore original state on error
+                if (restoreState) {
+                    video.currentTime = originalTime;
+                    video.muted = originalMuted;
+                    if (wasPlaying && !video.paused) {
+                        video.play().catch(() => {});
+                    }
+                }
+                resolve(null);
+            }
+        };
+
+        const onSeeked = () => {
+            video.removeEventListener('seeked', onSeeked);
+            // Wait for frame to be ready (double RAF for better frame quality)
+            requestAnimationFrame(() => {
+                requestAnimationFrame(captureFrame);
+            });
+        };
+
+        // Check if video is already at the right time and ready
+        const timeDiff = Math.abs(video.currentTime - time);
+        if (timeDiff < 0.1 && video.readyState >= 2) {
+            // Video is already at the right position, capture immediately
+            captureFrame();
+        } else {
+            // Seek to the desired time
+            video.addEventListener('seeked', onSeeked);
+            video.currentTime = time;
+        }
+    });
+}
+