@zezosoft/react-player 0.0.8 → 0.0.10

package/dist/VideoPlayer/VideoPlayer.d.ts

@@ -2,5 +2,6 @@ import React from "react";
 import { VideoPlayerProps } from "./types/VideoPlayerTypes";
 import "../index.css";
 import "./styles/subtitles.css";
+import "./styles/ads.css";
 declare const VideoPlayer: React.FC<VideoPlayerProps>;
 export default VideoPlayer;

package/dist/VideoPlayer/components/AdOverlay.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+import { AdBreak } from "../types/AdTypes";
+import { IPlayerConfig } from "../../types";
+interface AdOverlayProps {
+    adBreak: AdBreak;
+    onSkip?: () => void;
+    config?: IPlayerConfig;
+}
+declare const AdOverlay: React.FC<AdOverlayProps>;
+export default AdOverlay;

package/dist/VideoPlayer/components/ErrorOverlay.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+import { VideoError } from "../../store/types/StoreTypes";
+interface ErrorOverlayProps {
+    error: VideoError;
+    onRetry: () => void;
+}
+declare const ErrorOverlay: React.FC<ErrorOverlayProps>;
+export default ErrorOverlay;

package/dist/VideoPlayer/components/Overlay.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import { IPlayerConfig } from "../../types";
+declare const Overlay: React.FC<IPlayerConfig>;
+export default Overlay;

package/dist/VideoPlayer/components/SubtitleOverlay.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+import { SubtitleStyleConfig } from "../hooks/useSubtitleStyling";
+interface SubtitleOverlayProps {
+    styleConfig?: SubtitleStyleConfig;
+}
+declare const SubtitleOverlay: React.FC<SubtitleOverlayProps>;
+export default SubtitleOverlay;

package/dist/VideoPlayer/components/controls/BottomControls.d.ts

@@ -0,0 +1,5 @@
+import React from "react";
+import "../time-line/time-line.css";
+import { IControlsBottomProps } from "../../../types";
+declare const BottomControls: React.FC<IControlsBottomProps>;
+export default BottomControls;

package/dist/VideoPlayer/components/controls/ControlsHeader.d.ts

@@ -0,0 +1,5 @@
+import * as React from "react";
+import { IControlsHeaderProps } from "../../../types";
+import "../styles/video-controls.css";
+declare const ControlsHeader: React.FC<IControlsHeaderProps>;
+export default ControlsHeader;

package/dist/VideoPlayer/components/controls/MiddleControls.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+declare const MiddleControls: React.FC;
+export default MiddleControls;

package/dist/VideoPlayer/components/controls/VideoPlayerControls.d.ts

@@ -0,0 +1,4 @@
+import * as React from "react";
+import { IPlayerConfig } from "../../../types";
+declare const VideoPlayerControls: React.FC<IPlayerConfig>;
+export default VideoPlayerControls;

package/dist/VideoPlayer/components/controls/index.d.ts

@@ -0,0 +1,4 @@
+export { default as BottomControls } from "./BottomControls";
+export { default as ControlsHeader } from "./ControlsHeader";
+export { default as MiddleControls } from "./MiddleControls";
+export { default as VideoPlayerControls } from "./VideoPlayerControls";

package/dist/VideoPlayer/components/time-line/TimeLine.d.ts

@@ -0,0 +1,21 @@
+import React from "react";
+import "./time-line.css";
+export interface TimeCode {
+    fromMs: number;
+    description: string;
+}
+export interface TimeLineProps {
+    max: number;
+    currentTime: number;
+    bufferTime?: number;
+    offset?: number;
+    timeCodes?: TimeCode[];
+    hideThumbTooltip?: boolean;
+    limitTimeTooltipBySides?: boolean;
+    secondsPrefix?: string;
+    minutesPrefix?: string;
+    onChange: (time: number, offsetTime: number) => void;
+    getPreviewScreenUrl?: (hoverTimeValue: number) => string;
+    trackColor?: string;
+}
+export declare const VideoSeekSlider: React.FC<TimeLineProps>;

package/dist/VideoPlayer/components/time-line/components/HoverTimeWithPreview.d.ts

@@ -0,0 +1,16 @@
+import React from "react";
+interface HoverTimeWithPreviewProps {
+    max: number;
+    hoverTimeValue: number;
+    trackWidth: number;
+    seekHoverPosition: number;
+    offset: number;
+    isThumbActive: boolean;
+    limitTimeTooltipBySides: boolean;
+    label: string;
+    secondsPrefix?: string;
+    minutesPrefix?: string;
+    getPreviewScreenUrl?: (hoverTimeValue: number) => string;
+}
+export declare const HoverTimeWithPreview: React.FC<HoverTimeWithPreviewProps>;
+export {};

package/dist/VideoPlayer/components/time-line/components/Thumb.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+interface ThumbProps {
+    max: number;
+    currentTime: number;
+    isThumbActive: boolean;
+    trackColor?: string;
+}
+export declare const Thumb: React.FC<ThumbProps>;
+export {};

package/dist/VideoPlayer/components/time-line/components/TimeCodeItem.d.ts

@@ -0,0 +1,21 @@
+import React from "react";
+export interface TimeCode {
+    fromMs: number;
+    description: string;
+}
+export interface TimeCodeItemProps {
+    currentTime: number;
+    seekHoverTime: number;
+    bufferTime: number;
+    startTime: number;
+    endTime: number;
+    maxTime: number;
+    label?: string;
+    isTimePassed?: boolean;
+    isBufferPassed?: boolean;
+    isHoverPassed?: boolean;
+    onHover?: (label: string) => void;
+    withGap?: boolean;
+    trackColor?: string;
+}
+export declare const TimeCodeItem: React.FC<TimeCodeItemProps>;

package/dist/VideoPlayer/components/time-line/components/TimeCodes.d.ts

@@ -0,0 +1,15 @@
+import React from "react";
+import { TimeCode } from "./TimeCodeItem";
+export interface TimeCodesProps {
+    max: number;
+    currentTime: number;
+    bufferTime: number;
+    seekHoverPosition: number;
+    timeCodes: TimeCode[] | undefined;
+    trackWidth: number;
+    mobileSeeking: boolean;
+    label: string;
+    setLabel: React.Dispatch<React.SetStateAction<string>>;
+    trackColor?: string;
+}
+export declare const TimeCodes: React.FC<TimeCodesProps>;

package/dist/VideoPlayer/components/time-line/utils/getEndTimeByIndex.d.ts

@@ -0,0 +1,2 @@
+import { TimeCode } from "../components/TimeCodeItem";
+export declare const getEndTimeByIndex: (timeCodes: TimeCode[], index: number, max: number) => number;

package/dist/VideoPlayer/components/time-line/utils/getHoverTimePosition.d.ts

@@ -0,0 +1,3 @@
+export declare function getHoverTimePosition(seekHoverPosition: number, hoverTimeElement: HTMLDivElement | null, trackWidth: number, limitTimeTooltipBySides: boolean): {
+    transform: string;
+};

package/dist/VideoPlayer/components/time-line/utils/getPositionPercent.d.ts

@@ -0,0 +1 @@
+export declare function getPositionPercent(max: number, current: number): number;

package/dist/VideoPlayer/components/time-line/utils/getTimeScale.d.ts

@@ -0,0 +1 @@
+export declare function getTimeScale(currentTime: number, startTime: number, endTime: number, isTimePassed: boolean): number;

package/dist/VideoPlayer/components/time-line/utils/isInRange.d.ts

@@ -0,0 +1 @@
+export declare const isInRange: (time: number, start: number, end: number) => boolean;

package/dist/VideoPlayer/components/time-line/utils/positionToMs.d.ts

@@ -0,0 +1 @@
+export declare function positionToMs(max: number, position: number, trackWidth: number): number;

package/dist/VideoPlayer/components/time-line/utils/secondsToTime.d.ts

@@ -0,0 +1,6 @@
+export interface Time {
+    hh: string;
+    mm: string;
+    ss: string;
+}
+export declare function millisecondsToTime(ms: number, offset?: number): Time;

package/dist/VideoPlayer/components/time-line/utils/timeToTimeString.d.ts

@@ -0,0 +1 @@
+export declare function timeToTimeString(max: number, seekHoverTime: number, offset?: number, minutesPrefix?: string, secondsPrefix?: string): string;

package/dist/VideoPlayer/constants.d.ts

@@ -0,0 +1,3 @@
+export declare const CONTROL_INTERACTION_EVENT = "video-controls:interaction";
+export declare const CONTROLS_HIDE_DELAY_MS = 3000;
+export declare const SKIP_INTERVAL_SECONDS = 10;

package/dist/VideoPlayer/hooks/index.d.ts

@@ -5,3 +5,7 @@ export { useVideoTracking } from "./useVideoTracking";
 export { useIntroSkip } from "./useIntroSkip";
 export { useEpisodes } from "./useEpisodes";
 export { useVideoEvents } from "./useVideoEvents";
+export { useAdManager } from "./useAdManager";
+export { usePrimaryVideoLifecycle } from "./usePrimaryVideoLifecycle";
+export { useVideoError } from "./useVideoError";
+export { useNetworkSpeed } from "./useNetworkSpeed";

package/dist/VideoPlayer/hooks/useAdManager.d.ts

@@ -0,0 +1,8 @@
+import { AdConfig, AdBreak, AdType } from "../types/AdTypes";
+export declare const useAdManager: (adConfig?: AdConfig) => {
+    isAdPlaying: boolean;
+    currentAd: AdBreak | null;
+    adType: AdType | null;
+    skipAd: () => void;
+    endAd: () => void;
+};

package/dist/VideoPlayer/hooks/useNetworkSpeed.d.ts

@@ -0,0 +1,7 @@
+interface NetworkSpeedInfo {
+    speed: number;
+    quality: "slow" | "medium" | "fast" | "unknown";
+    message: string;
+}
+export declare const useNetworkSpeed: () => NetworkSpeedInfo | null;
+export {};

package/dist/VideoPlayer/hooks/usePrimaryVideoLifecycle.d.ts

@@ -0,0 +1,17 @@
+import { VideoState } from "../../store/types/StoreTypes";
+interface UsePrimaryVideoLifecycleParams {
+    hasPreRoll: boolean;
+    trackSrc: string;
+}
+interface PrimaryVideoLifecycleResult {
+    registerVideoRef: (node: HTMLVideoElement | null) => void;
+    videoRef: HTMLVideoElement | null;
+    isAdPlaying: boolean;
+    currentAd: VideoState["currentAd"];
+    adType: VideoState["adType"];
+    initialAdFinished: boolean;
+    shouldCoverMainVideo: boolean;
+    shouldShowPlaceholder: boolean;
+}
+export declare const usePrimaryVideoLifecycle: ({ hasPreRoll, trackSrc, }: UsePrimaryVideoLifecycleParams) => PrimaryVideoLifecycleResult;
+export {};

package/dist/VideoPlayer/hooks/useVideoError.d.ts

@@ -0,0 +1,7 @@
+import { VideoError } from "../../store/types/StoreTypes";
+export declare const useVideoError: () => {
+    error: VideoError | null;
+    handleVideoError: (e: React.SyntheticEvent<HTMLVideoElement, Event>) => void;
+    clearError: () => void;
+    retry: () => void;
+};

package/dist/VideoPlayer/hooks/useVideoSource.d.ts

@@ -1,14 +1 @@
-/**
- * Video Source Hook
- *
- * Manages video source loading and streaming technology detection
- * Supports HLS.js, DASH.js, and native HTML5 video
- *
- * Features:
- * - Automatic stream type detection
- * - HLS.js fallback for older browsers
- * - DASH.js support with proper initialization
- * - Quality level extraction for all stream types
- * - Error handling and cleanup
- */
-export declare const useVideoSource: (trackSrc: string, type?: "hls" | "mp4" | "dash" | "other" | "youtube" | undefined) => void;
+export declare const useVideoSource: (trackSrc: string, type?: "hls" | "dash" | "mp4" | "other" | "youtube" | undefined) => void;

package/dist/VideoPlayer/hooks/useVideoTracking.d.ts

@@ -1,2 +1,2 @@
-import { VideoPlayerProps } from "../types/VideoPlayerTypes";
-export declare const useVideoTracking: (tracking?: VideoPlayerProps["tracking"], episodeList?: VideoPlayerProps["episodeList"], currentEpisodeIndex?: number, onClose?: () => void) => void;
+import { FeatureProps } from "../types/VideoPlayerTypes";
+export declare const useVideoTracking: (tracking?: FeatureProps["tracking"], episodeList?: FeatureProps["episodeList"], currentEpisodeIndex?: number, onClose?: () => void) => void;

package/dist/VideoPlayer/types/AdTypes.d.ts

@@ -0,0 +1,33 @@
+export type AdType = "pre-roll" | "mid-roll" | "post-roll" | "overlay";
+export interface AdBreak {
+    id: string;
+    type: AdType;
+    time: number;
+    adUrl: string;
+    skipable?: boolean;
+    skipAfter?: number;
+    duration?: number;
+    sponsoredUrl?: string;
+}
+export interface AdConfig {
+    preRoll?: AdBreak;
+    midRoll?: AdBreak[];
+    postRoll?: AdBreak;
+    overlay?: {
+        imageUrl: string;
+        clickUrl?: string;
+        showDuration: number;
+        position?: "top-left" | "top-right" | "bottom-left" | "bottom-right";
+    };
+    smartPlacement?: {
+        enabled: boolean;
+        minVideoDuration?: number;
+        minGapBetweenAds?: number;
+        avoidNearEnd?: number;
+        preferNaturalBreaks?: boolean;
+    };
+    onAdStart?: (adBreak: AdBreak) => void;
+    onAdEnd?: (adBreak: AdBreak) => void;
+    onAdSkip?: (adBreak: AdBreak) => void;
+    onAdError?: (adBreak: AdBreak, error: Error) => void;
+}

package/dist/VideoPlayer/types/VideoPlayerTypes.d.ts

@@ -1,20 +1,38 @@
-import { TimeCode } from "../_components/TimeLine/TimeLine";
+import { TimeCode } from "../components/time-line/TimeLine";
 import { IOnWatchTimeUpdated } from "../../types";
 import { SubtitleStyleConfig } from "../hooks/useSubtitleStyling";
-export interface VideoPlayerProps {
-    trackSrc: string;
+import { AdConfig } from "./AdTypes";
+export interface WatchHistoryData {
+    currentTime: number;
+    duration: number;
+    progress: number;
+    isCompleted: boolean;
+    watchedAt: number;
+}
+export interface VideoProps {
+    src: string;
+    title?: string;
+    poster?: string;
+    type?: "hls" | "dash" | "mp4" | "other" | "youtube" | undefined;
+    isTrailer?: boolean;
     showControls?: boolean;
     isMute?: boolean;
-    onEnded?: (e: React.SyntheticEvent<HTMLVideoElement>) => void;
-    onError?: (e?: React.SyntheticEvent<HTMLVideoElement, Event>) => void;
-    trackTitle?: string;
-    trackPoster?: string;
-    isTrailer?: boolean;
+    startFrom?: number;
+}
+export interface StyleProps {
     className?: string;
-    type?: "hls" | "mp4" | "other" | "youtube" | undefined;
     width?: string;
     height?: string;
+    subtitleStyle?: SubtitleStyleConfig;
+}
+export interface EventProps {
+    onEnded?: (e: React.SyntheticEvent<HTMLVideoElement>) => void;
+    onError?: (e?: React.SyntheticEvent<HTMLVideoElement, Event>) => void;
     onClose?: () => void;
+    /** Called when player closes with watch progress data for history tracking */
+    onWatchHistoryUpdate?: (data: WatchHistoryData) => void;
+}
+export interface FeatureProps {
     timeCodes?: TimeCode[];
     getPreviewScreenUrl?: (hoverTimeValue: number) => string;
     tracking?: {
@@ -40,7 +58,13 @@ export interface VideoPlayerProps {
         showAtTime?: number;
         showAtEnd?: boolean;
     };
-    subtitleStyle?: SubtitleStyleConfig;
+    ads?: AdConfig;
+}
+export interface VideoPlayerProps {
+    video: VideoProps;
+    style?: StyleProps;
+    events?: EventProps;
+    features?: FeatureProps;
 }
 export type { SubtitleTrack, Episode } from "../../store/types/StoreTypes";
 export interface IntroConfig {

package/dist/VideoPlayer/utils/index.d.ts

@@ -27,4 +27,4 @@ export declare const millisecondsToSeconds: (milliseconds: number) => number;
  * @returns
  */
 export declare const getExtensionFromUrl: (url: string) => string | undefined;
-export { QualityManager } from './qualityManager';
+export { QualityManager } from "./qualityManager";

package/dist/VideoPlayer/utils/qualityManager.d.ts

@@ -1,16 +1,6 @@
-import Hls from 'hls.js';
-import * as dashjs from 'dashjs';
-export type StreamType = 'hls' | 'dash' | 'mp4' | 'other';
-/**
- * Video Quality Management Utility
- * Provides a unified interface for quality switching across HLS.js and DASH.js
- *
- * This utility follows OTT-grade best practices for smooth quality switching:
- * - Immediate quality changes without playback interruption
- * - Proper ABR (Adaptive Bitrate) control
- * - Error handling and fallback mechanisms
- * - Support for both manual and auto quality modes
- */
+import Hls from "hls.js";
+import * as dashjs from "dashjs";
+import { StreamType } from "../../store/types/StoreTypes";
 export declare class QualityManager {
     /**
      * Set video quality for HLS streams with OTT-grade smoothness
@@ -26,21 +16,12 @@ export declare class QualityManager {
      */
     static setHlsQuality(hlsInstance: Hls | null | undefined, levelIndex: number): void;
     /**
-     * Set video quality for DASH streams with OTT-grade smoothness
-     *
-     * Best practices implemented:
-     * 1. Use autoSwitchBitrate settings to control ABR behavior
-     * 2. Use setRepresentationForTypeById for immediate quality change
-     * 3. Handle representation discovery and selection properly
-     * 4. Provide visual feedback through console logs
-     *
+  
      * @param dashInstance DASH.js instance
      * @param qualityId Quality level ID (undefined/null for auto)
      */
-    static setDashQuality(dashInstance: dashjs.MediaPlayerClass, qualityId: string | null | undefined): void;
+    static setDashQuality(dashInstance: dashjs.MediaPlayerClass | undefined | null, qualityIndex: number | null | undefined): void;
     /**
-     * Get available quality levels for HLS with proper error handling
-     *
      * @param hlsInstance HLS.js instance
      * @returns Array of quality level objects
      */
@@ -50,8 +31,6 @@ export declare class QualityManager {
         originalIndex: number;
     }>;
     /**
-     * Get available quality levels for DASH with proper error handling
-     *
      * @param dashInstance DASH.js instance
      * @returns Array of quality level objects
      */
@@ -61,16 +40,11 @@ export declare class QualityManager {
         id: string;
     }>;
     /**
-     * Unified quality setting function that works with both HLS and DASH
-     * Provides a single interface for quality management across streaming technologies
-     *
      * @param streamType Type of stream (hls, dash, etc.)
      * @param qualityIdentifier Quality level identifier (index for HLS, ID for DASH)
      */
-    static setQuality(streamType: StreamType, qualityIdentifier: string | number): void;
+    static setQuality(streamType: StreamType, qualityIdentifier: string): void;
     /**
-     * Enable auto quality switching for the current stream type
-     *
      * @param streamType Type of stream (hls, dash, etc.)
      */
     static setAutoQuality(streamType: StreamType): void;

package/dist/components/ui/FullScreenToggle.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import "../../VideoPlayer/_components/styles/video-controls.css";
+import "../../VideoPlayer/components/styles/video-controls.css";
 interface FullScreenToggleProps {
     isFullScreen: boolean;
     onClick?: () => void;

package/dist/components/ui/PiPictureInPictureToggle.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import "../../VideoPlayer/_components/styles/video-controls.css";
+import "../../VideoPlayer/components/styles/video-controls.css";
 interface PiPictureInPictureToggleProps {
     onClick?: () => void;
     className?: string;

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 import "./index.css";
 export { default as VideoPlayer } from "./VideoPlayer/VideoPlayer";
 export { useVideoStore } from "./store/VideoState";
-export type { VideoPlayerProps, Episode, SubtitleTrack, IntroConfig, NextEpisodeConfig, } from "./VideoPlayer/types/VideoPlayerTypes";
+export type { VideoPlayerProps, Episode, SubtitleTrack, IntroConfig, NextEpisodeConfig, WatchHistoryData, } from "./VideoPlayer/types/VideoPlayerTypes";
 export type { SubtitleStyleConfig } from "./VideoPlayer/hooks/useSubtitleStyling";
 export type { VideoState, VideoRefsState, VideoPlaybackState, VideoTimingState, VideoControlsState, VideoQualityState, SubtitlesState, EpisodesState, IntroState, } from "./store/types/StoreTypes";