unified-video-framework 1.4.151 → 1.4.154

package/packages/web/src/chapters/types/ChapterTypes.ts

@@ -0,0 +1,236 @@
+/**
+ * Types and interfaces for video chapters and skip functionality
+ */
+
+export type SegmentType = 'intro' | 'recap' | 'content' | 'credits' | 'ad';
+
+export type SkipButtonPosition = 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left';
+
+/**
+ * Represents a video segment/chapter
+ */
+export interface VideoSegment {
+  /** Unique identifier for the segment */
+  id: string;
+  
+  /** Type of segment */
+  type: SegmentType;
+  
+  /** Start time in seconds */
+  startTime: number;
+  
+  /** End time in seconds */
+  endTime: number;
+  
+  /** Display title for the segment */
+  title?: string;
+  
+  /** Description of the segment */
+  description?: string;
+  
+  /** Custom text for the skip button */
+  skipLabel?: string;
+  
+  /** Whether to auto-skip after a delay */
+  autoSkip?: boolean;
+  
+  /** Delay in seconds before auto-skip */
+  autoSkipDelay?: number;
+  
+  /** Whether to show skip button for this segment */
+  showSkipButton?: boolean;
+}
+
+/**
+ * Complete chapter data for a video
+ */
+export interface VideoChapters {
+  /** Video identifier */
+  videoId: string;
+  
+  /** Total video duration in seconds */
+  duration: number;
+  
+  /** Array of video segments */
+  segments: VideoSegment[];
+  
+  /** Metadata about the chapters */
+  metadata?: {
+    version?: string;
+    createdAt?: string;
+    updatedAt?: string;
+    source?: 'manual' | 'auto-detected' | 'crowdsourced';
+  };
+}
+
+/**
+ * Configuration for chapter functionality
+ */
+export interface ChapterConfig {
+  /** Enable/disable chapter functionality */
+  enabled: boolean;
+  
+  /** Chapter data object */
+  data?: VideoChapters;
+  
+  /** URL to fetch chapter data from */
+  dataUrl?: string;
+  
+  /** Auto-hide skip button after showing */
+  autoHide?: boolean;
+  
+  /** Delay before auto-hiding skip button (ms) */
+  autoHideDelay?: number;
+  
+  /** Show chapter markers on progress bar */
+  showChapterMarkers?: boolean;
+  
+  /** Position of skip button */
+  skipButtonPosition?: SkipButtonPosition;
+  
+  /** Custom CSS styles */
+  customStyles?: {
+    skipButton?: Partial<CSSStyleDeclaration>;
+    chapterMarkers?: Partial<CSSStyleDeclaration>;
+  };
+  
+  /** User preferences */
+  userPreferences?: ChapterPreferences;
+}
+
+/**
+ * User preferences for chapter behavior
+ */
+export interface ChapterPreferences {
+  /** Auto-skip intro segments */
+  autoSkipIntro?: boolean;
+  
+  /** Auto-skip recap segments */
+  autoSkipRecap?: boolean;
+  
+  /** Auto-skip credits segments */
+  autoSkipCredits?: boolean;
+  
+  /** Show skip buttons */
+  showSkipButtons?: boolean;
+  
+  /** Skip button timeout in milliseconds */
+  skipButtonTimeout?: number;
+  
+  /** Remember user choices */
+  rememberChoices?: boolean;
+}
+
+/**
+ * Events emitted by the chapter system
+ */
+export interface ChapterEvents {
+  /** When entering a new segment */
+  segmentEntered: {
+    segment: VideoSegment;
+    currentTime: number;
+    previousSegment?: VideoSegment;
+  };
+  
+  /** When exiting a segment */
+  segmentExited: {
+    segment: VideoSegment;
+    currentTime: number;
+    nextSegment?: VideoSegment;
+  };
+  
+  /** When a segment is skipped */
+  segmentSkipped: {
+    fromSegment: VideoSegment;
+    toSegment?: VideoSegment;
+    skipMethod: 'button' | 'auto' | 'manual';
+    currentTime: number;
+  };
+  
+  /** When skip button is shown */
+  skipButtonShown: {
+    segment: VideoSegment;
+    currentTime: number;
+  };
+  
+  /** When skip button is hidden */
+  skipButtonHidden: {
+    segment: VideoSegment;
+    currentTime: number;
+    reason: 'timeout' | 'segment-end' | 'user-action' | 'manual';
+  };
+  
+  /** When chapters are loaded */
+  chaptersLoaded: {
+    chapters: VideoChapters;
+    segmentCount: number;
+  };
+  
+  /** When chapter loading fails */
+  chaptersLoadError: {
+    error: Error;
+    url?: string;
+  };
+}
+
+/**
+ * Skip button state
+ */
+export interface SkipButtonState {
+  visible: boolean;
+  segment: VideoSegment | null;
+  autoSkipCountdown?: number;
+  position: SkipButtonPosition;
+}
+
+/**
+ * Chapter marker data for progress bar
+ */
+export interface ChapterMarker {
+  segment: VideoSegment;
+  position: number; // Percentage position on progress bar (0-100)
+  color?: string;
+  label?: string;
+}
+
+/**
+ * Default configuration values
+ */
+export const DEFAULT_CHAPTER_CONFIG: ChapterConfig = {
+  enabled: false,
+  autoHide: true,
+  autoHideDelay: 5000,
+  showChapterMarkers: true,
+  skipButtonPosition: 'bottom-right',
+  customStyles: {},
+  userPreferences: {
+    autoSkipIntro: false,
+    autoSkipRecap: false,
+    autoSkipCredits: false,
+    showSkipButtons: true,
+    skipButtonTimeout: 5000,
+    rememberChoices: true
+  }
+};
+
+/**
+ * Default skip button labels for different segment types
+ */
+export const DEFAULT_SKIP_LABELS: Record<SegmentType, string> = {
+  intro: 'Skip Intro',
+  recap: 'Skip Recap',
+  content: 'Skip',
+  credits: 'Skip Credits',
+  ad: 'Skip Ad'
+};
+
+/**
+ * Colors for different segment types in chapter markers
+ */
+export const SEGMENT_COLORS: Record<SegmentType, string> = {
+  intro: '#ff5722',    // Orange-red
+  recap: '#ffc107',    // Amber
+  content: '#4caf50',  // Green
+  credits: '#9c27b0',  // Purple
+  ad: '#f44336'        // Red
+};

package/packages/web/src/index.ts

@@ -4,7 +4,7 @@
  */
 
 // Re-export core interfaces for convenience
-export * from '@unified-video/core';
+export * from '../../core/src/index';
 
 // Export web player implementation
 export { WebPlayer } from './WebPlayer';

package/packages/web/src/react/EPG.ts

@@ -47,4 +47,4 @@ export {
   calculateScrollPosition,
   debounce,
   throttle,
-} from './utils/EPGUtils';
+} from './utils/EPGUtils';

package/packages/web/src/react/WebPlayerView.tsx

@@ -1,7 +1,7 @@
 // @ts-nocheck
 import React, { useEffect, useRef, useState, useCallback } from 'react';
 import type { CSSProperties } from 'react';
-import type { VideoSource, SubtitleTrack, VideoMetadata, PlayerConfig } from '@unified-video/core';
+import type { VideoSource, SubtitleTrack, VideoMetadata, PlayerConfig } from '../../core/src';
 import { WebPlayer } from '../WebPlayer';
 // EPG imports - conditionally loaded
 import type { EPGData, EPGConfig, EPGProgram, EPGProgramRow } from './types/EPGTypes';
@@ -67,7 +67,7 @@ export type WebPlayerViewProps = {
     };
   };
   // Paywall with Email Authentication
-  paywall?: import('@unified-video/core').PaywallConfig;
+  paywall?: import('../../core/src').PaywallConfig;
   paywallConfigUrl?: string; // optional endpoint returning PaywallConfig JSON
   
   // Email Authentication (will be merged into paywall config)

package/packages/web/src/react/WebPlayerViewWithEPG.tsx

@@ -1,7 +1,7 @@
 // @ts-nocheck
 import React, { useEffect, useRef, useState, useCallback } from 'react';
 import type { CSSProperties } from 'react';
-import type { VideoSource, SubtitleTrack, VideoMetadata, PlayerConfig } from '@unified-video/core';
+import type { VideoSource, SubtitleTrack, VideoMetadata, PlayerConfig } from '../../core/src';
 import { WebPlayer } from '../WebPlayer';
 import EPGOverlay from './components/EPGOverlay';
 import type { EPGData, EPGConfig, EPGProgram, EPGProgramRow, EPGAction } from './types/EPGTypes';
@@ -13,7 +13,7 @@ export interface WebPlayerViewWithEPGProps {
   enableAdaptiveBitrate?: boolean;
   debug?: boolean;
   freeDuration?: number;
-  paywall?: import('@unified-video/core').PaywallConfig;
+  paywall?: import('../../core/src').PaywallConfig;
   paywallConfigUrl?: string;
   
   emailAuth?: {
@@ -473,4 +473,4 @@ export const WebPlayerViewWithEPG: React.FC<WebPlayerViewWithEPGProps> = (props)
   );
 };
 
-export default WebPlayerViewWithEPG;
+export default WebPlayerViewWithEPG;

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

@@ -0,0 +1,207 @@
+/**
+ * React component for progress bar with chapter markers
+ */
+
+import React, { useMemo } from 'react';
+import {
+  VideoSegment,
+  VideoChapters,
+  SEGMENT_COLORS
+} from '../../chapters/types/ChapterTypes';
+
+export interface ChapterMarker {
+  segment: VideoSegment;
+  position: number; // Percentage position (0-100)
+  color: string;
+  label: string;
+}
+
+export interface ChapterProgressProps {
+  /** Chapter data */
+  chapters: VideoChapters | null;
+  
+  /** Current playback progress (0-100) */
+  progress?: number;
+  
+  /** Buffered progress (0-100) */
+  buffered?: number;
+  
+  /** Whether to show chapter markers */
+  showMarkers?: boolean;
+  
+  /** Custom marker colors */
+  markerColors?: Partial<typeof SEGMENT_COLORS>;
+  
+  /** Callback when marker is clicked */
+  onMarkerClick?: (segment: VideoSegment) => void;
+  
+  /** Callback when progress bar is clicked */
+  onProgressClick?: (percentage: number) => void;
+  
+  /** Custom CSS class name */
+  className?: string;
+  
+  /** Custom styles */
+  style?: React.CSSProperties;
+  
+  /** Whether progress bar is interactive */
+  interactive?: boolean;
+}
+
+export const ChapterProgress: React.FC<ChapterProgressProps> = ({
+  chapters,
+  progress = 0,
+  buffered = 0,
+  showMarkers = true,
+  markerColors = {},
+  onMarkerClick,
+  onProgressClick,
+  className = '',
+  style = {},
+  interactive = true
+}) => {
+  /**
+   * Generate chapter markers
+   */
+  const markers = useMemo((): ChapterMarker[] => {
+    if (!chapters || !showMarkers) return [];
+
+    const colors = { ...SEGMENT_COLORS, ...markerColors };
+
+    return chapters.segments
+      .filter(segment => segment.type !== 'content') // Don't show markers for content
+      .map(segment => ({
+        segment,
+        position: (segment.startTime / chapters.duration) * 100,
+        color: colors[segment.type] || '#ffffff',
+        label: segment.title || segment.type
+      }))
+      .sort((a, b) => a.position - b.position);
+  }, [chapters, showMarkers, markerColors]);
+
+  /**
+   * Handle progress bar click
+   */
+  const handleProgressClick = (event: React.MouseEvent<HTMLDivElement>) => {
+    if (!interactive || !onProgressClick) return;
+
+    const rect = event.currentTarget.getBoundingClientRect();
+    const x = event.clientX - rect.left;
+    const percentage = (x / rect.width) * 100;
+    
+    onProgressClick(Math.max(0, Math.min(100, percentage)));
+  };
+
+  /**
+   * Handle marker click
+   */
+  const handleMarkerClick = (event: React.MouseEvent, segment: VideoSegment) => {
+    event.stopPropagation(); // Prevent progress bar click
+    onMarkerClick?.(segment);
+  };
+
+  // Combine classes
+  const progressClasses = [
+    'uvf-chapter-progress',
+    interactive ? 'interactive' : '',
+    className
+  ].filter(Boolean).join(' ');
+
+  return (
+    <div
+      className={progressClasses}
+      style={{
+        position: 'relative',
+        width: '100%',
+        height: '4px',
+        backgroundColor: 'rgba(255, 255, 255, 0.2)',
+        borderRadius: '2px',
+        cursor: interactive ? 'pointer' : 'default',
+        ...style
+      }}
+      onClick={handleProgressClick}
+    >
+      {/* Buffered progress */}
+      <div
+        className="uvf-chapter-progress-buffered"
+        style={{
+          position: 'absolute',
+          top: 0,
+          left: 0,
+          height: '100%',
+          width: `${Math.max(0, Math.min(100, buffered))}%`,
+          backgroundColor: 'rgba(255, 255, 255, 0.4)',
+          borderRadius: 'inherit',
+          transition: 'width 0.3s ease'
+        }}
+      />
+
+      {/* Current progress */}
+      <div
+        className="uvf-chapter-progress-current"
+        style={{
+          position: 'absolute',
+          top: 0,
+          left: 0,
+          height: '100%',
+          width: `${Math.max(0, Math.min(100, progress))}%`,
+          background: 'linear-gradient(90deg, var(--uvf-accent-1, #ff5722) 0%, var(--uvf-accent-2, #ff8a50) 100%)',
+          borderRadius: 'inherit',
+          transition: 'width 0.1s ease'
+        }}
+      />
+
+      {/* Chapter markers */}
+      {markers.map((marker, index) => (
+        <div
+          key={`${marker.segment.id}-${index}`}
+          className={`uvf-chapter-progress-marker uvf-marker-${marker.segment.type}`}
+          style={{
+            position: 'absolute',
+            top: '50%',
+            left: `${marker.position}%`,
+            width: '3px',
+            height: '150%',
+            backgroundColor: marker.color,
+            transform: 'translate(-50%, -50%)',
+            cursor: 'pointer',
+            borderRadius: '1px',
+            zIndex: 10,
+            transition: 'all 0.2s ease'
+          }}
+          title={`${marker.label} (${formatTime(marker.segment.startTime)})`}
+          onClick={(e) => handleMarkerClick(e, marker.segment)}
+          onMouseEnter={(e) => {
+            const element = e.currentTarget as HTMLElement;
+            element.style.width = '4px';
+            element.style.height = '200%';
+            element.style.boxShadow = `0 0 8px ${marker.color}`;
+          }}
+          onMouseLeave={(e) => {
+            const element = e.currentTarget as HTMLElement;
+            element.style.width = '3px';
+            element.style.height = '150%';
+            element.style.boxShadow = 'none';
+          }}
+        />
+      ))}
+    </div>
+  );
+};
+
+/**
+ * Format time in MM:SS or HH:MM:SS format
+ */
+function formatTime(seconds: number): string {
+  if (!seconds || 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')}`;
+  } else {
+    return `${minutes}:${secs.toString().padStart(2, '0')}`;
+  }
+}

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

@@ -313,4 +313,4 @@ export const EPGNavigationControls: React.FC<EPGNavigationControlsProps> = ({
   );
 };
 
-export default EPGNavigationControls;
+export default EPGNavigationControls;

package/packages/web/src/react/components/EPGOverlay-improved-positioning.tsx

@@ -592,4 +592,4 @@ export const EPGOverlay: React.FC<EPGProps> = ({
   );
 };
 
-export default EPGOverlay;
+export default EPGOverlay;

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

@@ -564,4 +564,4 @@ export const EPGOverlay: React.FC<EPGProps> = ({
   );
 };
 
-export default EPGOverlay;
+export default EPGOverlay;

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

@@ -506,4 +506,4 @@ export const EPGProgramGrid: React.FC<EPGProgramGridProps> = ({
   );
 };
 
-export default EPGProgramGrid;
+export default EPGProgramGrid;

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

@@ -266,4 +266,4 @@ export const EPGTimelineHeader: React.FC<EPGTimelineHeaderProps> = ({
   );
 };
 
-export default EPGTimelineHeader;
+export default EPGTimelineHeader;