@zezosoft/react-player 0.0.7 → 0.0.9

package/dist/VideoPlayer/MediaControls/BottomControls.d.ts

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

package/dist/VideoPlayer/MediaControls/ControlsHeader.d.ts

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

package/dist/VideoPlayer/MediaControls/MiddleControls.d.ts

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

package/dist/VideoPlayer/MediaControls/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/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/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,5 @@ export { useVideoTracking } from "./useVideoTracking";
 export { useIntroSkip } from "./useIntroSkip";
 export { useEpisodes } from "./useEpisodes";
 export { useVideoEvents } from "./useVideoEvents";
+export { useAdManager } from "./useAdManager";
+export { usePrimaryVideoLifecycle } from "./usePrimaryVideoLifecycle";

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/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/useVideoEvents.d.ts

@@ -6,5 +6,5 @@ export declare const useVideoEvents: () => {
     onProgress: (e: React.SyntheticEvent<HTMLVideoElement>) => void;
     onPlay: () => void;
     onPause: () => void;
-    onEnded: () => void;
+    onEnded: (e: unknown) => void;
 };

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

@@ -1 +1 @@
-export declare const useVideoSource: (trackSrc: string, type?: "hls" | "mp4" | "other" | "youtube" | undefined) => void;
+export declare const useVideoSource: (trackSrc: string, type?: "hls" | "dash" | "mp4" | "other" | "youtube" | undefined) => void;

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

@@ -0,0 +1,36 @@
+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;
+    title?: string;
+    description?: string;
+    relevance?: "high" | "medium" | "low";
+}
+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,13 +1,18 @@
-import { TimeCode } from "../_components/TimeLine/TimeLine";
+import { TimeCode } from "../components/time-line/TimeLine";
 import { IOnWatchTimeUpdated } from "../../types";
 import { SubtitleStyleConfig } from "../hooks/useSubtitleStyling";
+import { AdConfig } from "./AdTypes";
 export interface VideoPlayerProps {
     trackSrc: string;
+    showControls?: boolean;
+    isMute?: boolean;
+    onEnded?: (e: React.SyntheticEvent<HTMLVideoElement>) => void;
+    onError?: (e?: React.SyntheticEvent<HTMLVideoElement, Event>) => void;
     trackTitle?: string;
     trackPoster?: string;
     isTrailer?: boolean;
     className?: string;
-    type?: "hls" | "mp4" | "other" | "youtube" | undefined;
+    type?: "hls" | "dash" | "mp4" | "other" | "youtube" | undefined;
     width?: string;
     height?: string;
     onClose?: () => void;
@@ -37,6 +42,7 @@ export interface VideoPlayerProps {
         showAtEnd?: boolean;
     };
     subtitleStyle?: SubtitleStyleConfig;
+    ads?: AdConfig;
 }
 export type { SubtitleTrack, Episode } from "../../store/types/StoreTypes";
 export interface IntroConfig {

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

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

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

@@ -0,0 +1,52 @@
+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
+     *
+     * Best practices implemented:
+     * 1. Use currentLevel for immediate quality change
+     * 2. Use autoLevelCapping to prevent ABR from switching back
+     * 3. Use nextLevel to ensure next segment uses selected quality
+     * 4. Handle edge cases and errors gracefully
+     *
+     * @param hlsInstance HLS.js instance (null for native HLS, undefined when not available)
+     * @param levelIndex Quality level index (-1 for auto)
+     */
+    static setHlsQuality(hlsInstance: Hls | null | undefined, levelIndex: number): void;
+    /**
+  
+     * @param dashInstance DASH.js instance
+     * @param qualityId Quality level ID (undefined/null for auto)
+     */
+    static setDashQuality(dashInstance: dashjs.MediaPlayerClass | undefined | null, qualityIndex: number | null | undefined): void;
+    /**
+     * @param hlsInstance HLS.js instance
+     * @returns Array of quality level objects
+     */
+    static getHlsQualityLevels(hlsInstance: Hls): Array<{
+        height: number;
+        bitrate?: number;
+        originalIndex: number;
+    }>;
+    /**
+     * @param dashInstance DASH.js instance
+     * @returns Array of quality level objects
+     */
+    static getDashQualityLevels(dashInstance: dashjs.MediaPlayerClass): Array<{
+        height: number;
+        bitrate?: number;
+        id: string;
+    }>;
+    /**
+     * @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): void;
+    /**
+     * @param streamType Type of stream (hls, dash, etc.)
+     */
+    static setAutoQuality(streamType: StreamType): void;
+}
+export default QualityManager;

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;