unified-video-framework 1.4.150 → 1.4.153

package/packages/web/src/react/components/SkipButton.tsx

@@ -0,0 +1,278 @@
+/**
+ * React component for skip button
+ */
+
+import React, { useState, useEffect, useRef } from 'react';
+import {
+  VideoSegment,
+  SkipButtonPosition,
+  DEFAULT_SKIP_LABELS
+} from '../../chapters/types/ChapterTypes';
+
+export interface SkipButtonProps {
+  /** Current segment to show skip button for */
+  segment: VideoSegment | null;
+  
+  /** Whether button is visible */
+  visible?: boolean;
+  
+  /** Button position */
+  position?: SkipButtonPosition;
+  
+  /** Auto-hide delay in milliseconds */
+  autoHideDelay?: number;
+  
+  /** Custom skip button text */
+  skipLabel?: string;
+  
+  /** Callback when skip button is clicked */
+  onSkip?: (segment: VideoSegment) => void;
+  
+  /** Callback when button is shown */
+  onShow?: (segment: VideoSegment) => void;
+  
+  /** Callback when button is hidden */
+  onHide?: (segment: VideoSegment, reason: string) => void;
+  
+  /** Custom CSS class name */
+  className?: string;
+  
+  /** Custom styles */
+  style?: React.CSSProperties;
+  
+  /** Enable auto-skip countdown */
+  enableAutoSkip?: boolean;
+  
+  /** Auto-skip delay in seconds */
+  autoSkipDelay?: number;
+}
+
+export const SkipButton: React.FC<SkipButtonProps> = ({
+  segment,
+  visible = false,
+  position = 'bottom-right',
+  autoHideDelay = 5000,
+  skipLabel,
+  onSkip,
+  onShow,
+  onHide,
+  className = '',
+  style = {},
+  enableAutoSkip = false,
+  autoSkipDelay = 10
+}) => {
+  // State
+  const [isVisible, setIsVisible] = useState(visible);
+  const [isAutoSkip, setIsAutoSkip] = useState(false);
+  const [countdown, setCountdown] = useState<number | null>(null);
+  
+  // Refs
+  const autoHideTimeoutRef = useRef<NodeJS.Timeout | null>(null);
+  const autoSkipTimeoutRef = useRef<NodeJS.Timeout | null>(null);
+  const countdownIntervalRef = useRef<NodeJS.Timeout | null>(null);
+  const previousSegmentRef = useRef<VideoSegment | null>(null);
+
+  /**
+   * Clear all timeouts
+   */
+  const clearTimeouts = () => {
+    if (autoHideTimeoutRef.current) {
+      clearTimeout(autoHideTimeoutRef.current);
+      autoHideTimeoutRef.current = null;
+    }
+    if (autoSkipTimeoutRef.current) {
+      clearTimeout(autoSkipTimeoutRef.current);
+      autoSkipTimeoutRef.current = null;
+    }
+    if (countdownIntervalRef.current) {
+      clearInterval(countdownIntervalRef.current);
+      countdownIntervalRef.current = null;
+    }
+  };
+
+  /**
+   * Start auto-skip countdown
+   */
+  const startAutoSkip = (segment: VideoSegment, delay: number) => {
+    setIsAutoSkip(true);
+    setCountdown(delay);
+
+    // Start countdown interval
+    countdownIntervalRef.current = setInterval(() => {
+      setCountdown((prev) => {
+        if (prev === null || prev <= 1) {
+          // Auto-skip triggered
+          clearTimeouts();
+          onSkip?.(segment);
+          handleHide('timeout');
+          return null;
+        }
+        return prev - 1;
+      });
+    }, 1000);
+
+    // Set backup timeout
+    autoSkipTimeoutRef.current = setTimeout(() => {
+      clearTimeouts();
+      onSkip?.(segment);
+      handleHide('timeout');
+    }, delay * 1000);
+  };
+
+  /**
+   * Handle button click
+   */
+  const handleSkip = () => {
+    if (!segment) return;
+    
+    clearTimeouts();
+    onSkip?.(segment);
+    handleHide('user-action');
+  };
+
+  /**
+   * Handle button show
+   */
+  const handleShow = () => {
+    if (!segment) return;
+    
+    setIsVisible(true);
+    onShow?.(segment);
+
+    // Start auto-hide timer
+    if (autoHideDelay > 0) {
+      autoHideTimeoutRef.current = setTimeout(() => {
+        handleHide('timeout');
+      }, autoHideDelay);
+    }
+
+    // Start auto-skip if enabled
+    if (enableAutoSkip && segment.autoSkip && segment.autoSkipDelay) {
+      startAutoSkip(segment, segment.autoSkipDelay);
+    }
+  };
+
+  /**
+   * Handle button hide
+   */
+  const handleHide = (reason: string = 'manual') => {
+    if (!segment) return;
+    
+    clearTimeouts();
+    setIsVisible(false);
+    setIsAutoSkip(false);
+    setCountdown(null);
+    onHide?.(segment, reason);
+  };
+
+  // Effect to handle visibility changes
+  useEffect(() => {
+    if (visible && segment && segment !== previousSegmentRef.current) {
+      previousSegmentRef.current = segment;
+      handleShow();
+    } else if (!visible || !segment) {
+      if (previousSegmentRef.current) {
+        handleHide('segment-end');
+      }
+      previousSegmentRef.current = null;
+    }
+  }, [visible, segment]);
+
+  // Cleanup on unmount
+  useEffect(() => {
+    return () => {
+      clearTimeouts();
+    };
+  }, []);
+
+  // Don't render if no segment or not visible
+  if (!segment || !isVisible) {
+    return null;
+  }
+
+  // Get skip label
+  const buttonText = skipLabel || segment.skipLabel || DEFAULT_SKIP_LABELS[segment.type];
+  const displayText = isAutoSkip && countdown !== null 
+    ? `${buttonText} (${countdown})`
+    : buttonText;
+
+  // Get position classes
+  const positionClass = `uvf-skip-button-${position}`;
+  const segmentClass = `uvf-skip-${segment.type}`;
+  const autoSkipClass = isAutoSkip ? 'auto-skip' : '';
+  const countdownClass = isAutoSkip && countdown !== null ? 'countdown' : '';
+
+  // Combine classes
+  const buttonClasses = [
+    'uvf-skip-button',
+    'visible',
+    positionClass,
+    segmentClass,
+    autoSkipClass,
+    countdownClass,
+    className
+  ].filter(Boolean).join(' ');
+
+  // Default styles based on position
+  const defaultStyles: React.CSSProperties = {
+    position: 'absolute',
+    zIndex: 1000,
+    ...style
+  };
+
+  switch (position) {
+    case 'bottom-right':
+      Object.assign(defaultStyles, {
+        bottom: '100px',
+        right: '30px'
+      });
+      break;
+    case 'bottom-left':
+      Object.assign(defaultStyles, {
+        bottom: '100px',
+        left: '30px'
+      });
+      break;
+    case 'top-right':
+      Object.assign(defaultStyles, {
+        top: '30px',
+        right: '30px'
+      });
+      break;
+    case 'top-left':
+      Object.assign(defaultStyles, {
+        top: '30px',
+        left: '30px'
+      });
+      break;
+  }
+
+  return (
+    <button
+      type="button"
+      className={buttonClasses}
+      style={defaultStyles}
+      onClick={handleSkip}
+      aria-label={`${buttonText} - ${segment.title || segment.type}`}
+    >
+      {displayText}
+      
+      {/* Progress bar for auto-skip countdown */}
+      {isAutoSkip && countdown !== null && (
+        <div 
+          className="uvf-skip-countdown-progress"
+          style={{
+            position: 'absolute',
+            bottom: 0,
+            left: 0,
+            height: '3px',
+            backgroundColor: 'currentColor',
+            width: `${((autoSkipDelay - countdown) / autoSkipDelay) * 100}%`,
+            transition: 'width 1s linear',
+            borderRadius: '0 0 6px 6px'
+          }}
+        />
+      )}
+    </button>
+  );
+};

package/packages/web/src/react/hooks/useChapters.ts

@@ -0,0 +1,308 @@
+/**
+ * React hook for video chapters and skip functionality
+ */
+
+import { useState, useEffect, useCallback, useRef } from 'react';
+import {
+  VideoSegment,
+  VideoChapters,
+  ChapterConfig,
+  ChapterEvents,
+  SegmentType
+} from '../../chapters/types/ChapterTypes';
+
+export interface UseChaptersOptions {
+  videoElement?: HTMLVideoElement | null;
+  chapters?: VideoChapters;
+  config?: ChapterConfig;
+  onSegmentEntered?: (segment: VideoSegment) => void;
+  onSegmentSkipped?: (fromSegment: VideoSegment, toSegment?: VideoSegment) => void;
+  onSkipButtonShown?: (segment: VideoSegment) => void;
+  onSkipButtonHidden?: (segment: VideoSegment) => void;
+}
+
+export interface UseChaptersResult {
+  // State
+  currentSegment: VideoSegment | null;
+  chapters: VideoChapters | null;
+  isSkipButtonVisible: boolean;
+  
+  // Actions
+  loadChapters: (chapters: VideoChapters) => Promise<void>;
+  skipToSegment: (segmentId: string) => void;
+  skipCurrentSegment: () => void;
+  
+  // Queries
+  getSegmentsByType: (type: SegmentType) => VideoSegment[];
+  hasSegmentType: (type: SegmentType) => boolean;
+  getChapterMarkers: () => Array<{
+    position: number;
+    segment: VideoSegment;
+    color: string;
+  }>;
+  
+  // Utils
+  formatTime: (seconds: number) => string;
+  isInSegment: (segmentId: string) => boolean;
+}
+
+export function useChapters(options: UseChaptersOptions = {}): UseChaptersResult {
+  const {
+    videoElement,
+    chapters: initialChapters,
+    config = { enabled: true },
+    onSegmentEntered,
+    onSegmentSkipped,
+    onSkipButtonShown,
+    onSkipButtonHidden
+  } = options;
+
+  // State
+  const [currentSegment, setCurrentSegment] = useState<VideoSegment | null>(null);
+  const [chapters, setChapters] = useState<VideoChapters | null>(initialChapters || null);
+  const [isSkipButtonVisible, setIsSkipButtonVisible] = useState(false);
+
+  // Refs
+  const timeUpdateHandlerRef = useRef<(() => void) | null>(null);
+  const previousSegmentRef = useRef<VideoSegment | null>(null);
+
+  /**
+   * Get current segment at given time
+   */
+  const getCurrentSegment = useCallback((currentTime: number): VideoSegment | null => {
+    if (!chapters) return null;
+
+    return chapters.segments.find(segment => 
+      currentTime >= segment.startTime && currentTime < segment.endTime
+    ) || null;
+  }, [chapters]);
+
+  /**
+   * Handle time update
+   */
+  const handleTimeUpdate = useCallback(() => {
+    if (!videoElement || !chapters) return;
+
+    const newSegment = getCurrentSegment(videoElement.currentTime);
+    
+    if (newSegment !== currentSegment) {
+      // Segment changed
+      if (currentSegment) {
+        // Exiting current segment
+        setIsSkipButtonVisible(false);
+        onSkipButtonHidden?.(currentSegment);
+      }
+
+      previousSegmentRef.current = currentSegment;
+      setCurrentSegment(newSegment);
+
+      if (newSegment) {
+        // Entering new segment
+        onSegmentEntered?.(newSegment);
+
+        // Show skip button for skippable segments
+        if (shouldShowSkipButton(newSegment)) {
+          setIsSkipButtonVisible(true);
+          onSkipButtonShown?.(newSegment);
+        }
+      }
+    }
+  }, [videoElement, chapters, currentSegment, onSegmentEntered, onSkipButtonShown, onSkipButtonHidden, getCurrentSegment]);
+
+  /**
+   * Check if segment should show skip button
+   */
+  const shouldShowSkipButton = useCallback((segment: VideoSegment): boolean => {
+    if (!config.userPreferences?.showSkipButtons) {
+      return false;
+    }
+
+    // Don't show for content segments by default
+    if (segment.type === 'content') {
+      return segment.showSkipButton === true;
+    }
+
+    // Show for other segment types unless explicitly disabled
+    return segment.showSkipButton !== false;
+  }, [config]);
+
+  /**
+   * Set up time update listener
+   */
+  useEffect(() => {
+    if (!videoElement) return;
+
+    const handler = () => handleTimeUpdate();
+    timeUpdateHandlerRef.current = handler;
+    
+    videoElement.addEventListener('timeupdate', handler);
+    
+    return () => {
+      videoElement.removeEventListener('timeupdate', handler);
+    };
+  }, [videoElement, handleTimeUpdate]);
+
+  /**
+   * Load chapters
+   */
+  const loadChapters = useCallback(async (newChapters: VideoChapters): Promise<void> => {
+    // Validate chapters
+    if (!newChapters.videoId || !newChapters.duration || !Array.isArray(newChapters.segments)) {
+      throw new Error('Invalid chapters data');
+    }
+
+    // Sort segments by start time
+    const sortedChapters = {
+      ...newChapters,
+      segments: [...newChapters.segments].sort((a, b) => a.startTime - b.startTime)
+    };
+
+    setChapters(sortedChapters);
+    
+    // Check current segment if video is playing
+    if (videoElement) {
+      const segment = getCurrentSegment(videoElement.currentTime);
+      setCurrentSegment(segment);
+    }
+  }, [videoElement, getCurrentSegment]);
+
+  /**
+   * Skip to specific segment
+   */
+  const skipToSegment = useCallback((segmentId: string) => {
+    if (!chapters || !videoElement) return;
+
+    const segment = chapters.segments.find(s => s.id === segmentId);
+    if (!segment) return;
+
+    const fromSegment = currentSegment;
+    
+    // Emit skip event
+    if (fromSegment) {
+      onSegmentSkipped?.(fromSegment, segment);
+    }
+
+    // Seek to segment start
+    videoElement.currentTime = segment.startTime;
+  }, [chapters, videoElement, currentSegment, onSegmentSkipped]);
+
+  /**
+   * Skip current segment
+   */
+  const skipCurrentSegment = useCallback(() => {
+    if (!currentSegment || !chapters || !videoElement) return;
+
+    // Find next content segment
+    const sortedSegments = [...chapters.segments].sort((a, b) => a.startTime - b.startTime);
+    const currentIndex = sortedSegments.findIndex(s => s.id === currentSegment.id);
+    
+    if (currentIndex === -1) return;
+
+    // Find next content segment
+    let nextSegment: VideoSegment | undefined;
+    for (let i = currentIndex + 1; i < sortedSegments.length; i++) {
+      if (sortedSegments[i].type === 'content') {
+        nextSegment = sortedSegments[i];
+        break;
+      }
+    }
+
+    const targetTime = nextSegment ? nextSegment.startTime : currentSegment.endTime;
+
+    // Emit skip event
+    onSegmentSkipped?.(currentSegment, nextSegment);
+
+    // Seek to target time
+    videoElement.currentTime = targetTime;
+  }, [currentSegment, chapters, videoElement, onSegmentSkipped]);
+
+  /**
+   * Get segments by type
+   */
+  const getSegmentsByType = useCallback((type: SegmentType): VideoSegment[] => {
+    if (!chapters) return [];
+    return chapters.segments.filter(segment => segment.type === type);
+  }, [chapters]);
+
+  /**
+   * Check if has segment type
+   */
+  const hasSegmentType = useCallback((type: SegmentType): boolean => {
+    return getSegmentsByType(type).length > 0;
+  }, [getSegmentsByType]);
+
+  /**
+   * Get chapter markers for progress bar
+   */
+  const getChapterMarkers = useCallback(() => {
+    if (!chapters) return [];
+
+    const segmentColors: Record<SegmentType, string> = {
+      intro: '#ff5722',
+      recap: '#ffc107',
+      content: '#4caf50',
+      credits: '#9c27b0',
+      ad: '#f44336'
+    };
+
+    return chapters.segments
+      .filter(segment => segment.type !== 'content')
+      .map(segment => ({
+        position: (segment.startTime / chapters.duration) * 100,
+        segment,
+        color: segmentColors[segment.type]
+      }));
+  }, [chapters]);
+
+  /**
+   * Format time as MM:SS or HH:MM:SS
+   */
+  const formatTime = useCallback((seconds: number): string => {
+    if (!seconds || isNaN(seconds)) return '00: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')}`;
+    } else {
+      return `${minutes.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;
+    }
+  }, []);
+
+  /**
+   * Check if currently in specific segment
+   */
+  const isInSegment = useCallback((segmentId: string): boolean => {
+    return currentSegment?.id === segmentId;
+  }, [currentSegment]);
+
+  // Load initial chapters
+  useEffect(() => {
+    if (initialChapters) {
+      loadChapters(initialChapters);
+    }
+  }, [initialChapters, loadChapters]);
+
+  return {
+    // State
+    currentSegment,
+    chapters,
+    isSkipButtonVisible,
+    
+    // Actions
+    loadChapters,
+    skipToSegment,
+    skipCurrentSegment,
+    
+    // Queries
+    getSegmentsByType,
+    hasSegmentType,
+    getChapterMarkers,
+    
+    // Utils
+    formatTime,
+    isInSegment
+  };
+}

package/packages/web/src/react/types/EPGTypes.ts

@@ -122,4 +122,4 @@ export interface ProgramBlock extends TimeRange {
 
 export type EPGViewMode = 'grid' | 'list' | 'compact';
 export type EPGSortBy = 'time' | 'channel' | 'category' | 'rating';
-export type EPGFilterType = 'all' | 'favorites' | 'recordings' | 'reminders' | 'category';
+export type EPGFilterType = 'all' | 'favorites' | 'recordings' | 'reminders' | 'category';

package/packages/web/src/react/utils/EPGUtils.ts

@@ -285,4 +285,4 @@ export const throttle = <T extends (...args: any[]) => any>(
       setTimeout(() => inThrottle = false, limit);
     }
   };
-};
+};

package/packages/web/src/test/epg-test.ts

@@ -119,4 +119,4 @@ export { runEPGTests };
 // Run tests if this file is executed directly
 if (typeof window === 'undefined') {
   runEPGTests();
-}
+}