@halibegic/react-video-player 0.0.2 → 0.0.3

package/README.md

@@ -1,6 +1,6 @@
 # React Video Player
 
-A React video player supporting HLS / Dash protocol for VOD / live streaming.
+A React video player supporting HLS protocol for VOD / live streaming.
 
 ## Installation
 
@@ -20,16 +20,57 @@ function App() {
 }
 ```
 
+| Prop           | Type                                        | Description                                                                                       | Default |
+| -------------- | ------------------------------------------- | ------------------------------------------------------------------------------------------------- | ------- |
+| `url`          | `string`                                    | The vod stream URL                                                                                | -       |
+| `watchHistory` | `{ enabled: boolean; storageKey: string; }` | (Optional) Enable watch history and specify a **unique** storage key for each vod player instance | -       |
+
+**Example with `watchHistory`:**
+
+```tsx
+import { VodPlayer } from "@halibegic/react-video-player";
+
+function App() {
+  return (
+    <VodPlayer
+      url="https://example.com/vod.m3u8"
+      watchHistory={{ enabled: true, storageKey: "video-1" }}
+    />
+  );
+}
+```
+
 ### Live Player
 
 ```tsx
 import { LivePlayer } from "@halibegic/react-video-player";
 
 function App() {
-  return <LivePlayer url="https://example.com/live.m3u8" />;
+  return (
+    <LivePlayer
+      url="https://example.com/live.m3u8"
+      startDate="2025-09-03T00:00:00Z"
+      endDate="2025-10-03T23:59:59Z"
+      messages={{
+        eventNotStarted: "Live stream još nije počeo. Molimo pričekajte.",
+        eventFinished: "Live stream je završen.",
+        eventStartingSoon: "Počinje za nekoliko sekundi...",
+        live: "Uživo",
+      }}
+    />
+  );
 }
 ```
 
+| Prop        | Type                                                                                             | Description                                                                                | Default                                                                                                                                        |
+| ----------- | ------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------- |
+| `url`       | `string`                                                                                         | The live stream URL                                                                        | -                                                                                                                                              |
+| `startDate` | `string`                                                                                         | Start date for the live event in ISO 8601 format                                           | -                                                                                                                                              |
+| `endDate`   | `string`                                                                                         | End date for the live event in ISO 8601 format                                             | -                                                                                                                                              |
+| `messages`  | `{ eventNotStarted: string; eventFinished: string; eventStartingSoon?: string; live?: string; }` | (Optional) Custom messages for event not started, finished, starting soon, and live states | `{ eventNotStarted: "Event has not started yet.", eventFinished: "Event has finished.", eventStartingSoon: "Starting soon...", live: "Live" }` |
+
+**Example with `messages`:**
+
 ## Development
 
 ```bash

package/dist/components/live-player.d.ts

@@ -1,6 +1,14 @@
 type LivePlayerProps = {
     url: string;
+    startDate: Date | string;
+    endDate: Date | string;
+    messages?: {
+        eventFinished: string;
+        eventNotStarted: string;
+        eventStartingSoon: string;
+        live: string;
+    };
 };
-declare function LivePlayer(props: LivePlayerProps): import("react/jsx-runtime").JSX.Element;
+declare function LivePlayer({ url, startDate, endDate, messages }: LivePlayerProps): import("react/jsx-runtime").JSX.Element;
 export { LivePlayer };
 export type { LivePlayerProps };

package/dist/components/player/live-player/live-player-event-check.d.ts

@@ -0,0 +1,8 @@
+import { PropsWithChildren } from 'react';
+type LivePlayerEventCheckProps = PropsWithChildren & {
+    eventFinishedMessage?: string;
+    eventNotStartedMessage?: string;
+    eventStartingSoonMessage?: string;
+};
+declare function LivePlayerEventCheck({ children, eventFinishedMessage, eventNotStartedMessage, eventStartingSoonMessage, }: LivePlayerEventCheckProps): import("react/jsx-runtime").JSX.Element;
+export default LivePlayerEventCheck;

package/dist/components/player/live-player/live-player-go-live.d.ts

@@ -0,0 +1,6 @@
+import { PlayerButtonProps } from '../ui/player-button';
+type LivePlayerGoLiveProps = PlayerButtonProps & {
+    message?: string;
+};
+declare function LivePlayerGoLive({ message, ...props }: LivePlayerGoLiveProps): import("react/jsx-runtime").JSX.Element | null;
+export { LivePlayerGoLive };

package/dist/components/player/live-player/live-player-playback-indicator.d.ts

@@ -0,0 +1,2 @@
+declare function LivePlayerPlaybackIndicator(): import("react/jsx-runtime").JSX.Element;
+export { LivePlayerPlaybackIndicator };

package/dist/components/player/live-player/live-player-playback.d.ts

@@ -1,2 +1,2 @@
-declare function LivePlayerPlayback(): import("react/jsx-runtime").JSX.Element | null;
+declare function LivePlayerPlayback(): import("react/jsx-runtime").JSX.Element;
 export { LivePlayerPlayback };

package/dist/components/player/live-player/live-player-progress.d.ts

@@ -0,0 +1,2 @@
+declare function LivePlayerProgress(): import("react/jsx-runtime").JSX.Element;
+export { LivePlayerProgress };

package/dist/components/player/live-player/live-player-provider.d.ts

@@ -0,0 +1,7 @@
+import { PropsWithChildren } from 'react';
+type LivePlayerProviderProps = PropsWithChildren & {
+    startDate: Date;
+    endDate: Date;
+};
+declare function LivePlayerProvider({ children, startDate, endDate, }: LivePlayerProviderProps): import("react/jsx-runtime").JSX.Element;
+export { LivePlayerProvider };

package/dist/components/player/live-player/live-player-remaining-time.d.ts

@@ -0,0 +1,2 @@
+declare function LivePlayerRemainingTime(): import("react/jsx-runtime").JSX.Element | null;
+export { LivePlayerRemainingTime };

package/dist/components/player/live-player/live-player-tech.d.ts

@@ -0,0 +1,5 @@
+type LivePlayerTechProps = {
+    url: string;
+};
+declare function LivePlayerTech({ url }: LivePlayerTechProps): import("react/jsx-runtime").JSX.Element | null;
+export { LivePlayerTech };

package/dist/components/player/player-hls-engine.d.ts

@@ -0,0 +1,6 @@
+type PlayerHlsEngineProps = {
+    url: string;
+    isLive: boolean;
+};
+declare function PlayerHlsEngine({ url, isLive }: PlayerHlsEngineProps): null;
+export default PlayerHlsEngine;

package/dist/components/player/player-tech.d.ts

@@ -3,5 +3,5 @@ type PlayerTechProps = {
     isLive: boolean;
     isMuted?: boolean;
 };
-declare function PlayerTech({ url, isLive, isMuted }: PlayerTechProps): import("react/jsx-runtime").JSX.Element | null;
+declare function PlayerTech({ url, isLive, isMuted }: PlayerTechProps): import("react/jsx-runtime").JSX.Element;
 export { PlayerTech };

package/dist/components/player/ui/icons/arrow-right-icon.d.ts

@@ -0,0 +1,2 @@
+declare function ArrowRightIcon(): import("react/jsx-runtime").JSX.Element;
+export { ArrowRightIcon };

package/dist/components/player/ui/icons/fullscreen-enter-icon.d.ts

@@ -0,0 +1,2 @@
+declare function FullscreenEnterIcon(): import("react/jsx-runtime").JSX.Element;
+export { FullscreenEnterIcon };

package/dist/components/player/ui/icons/fullscreen-exit-icon.d.ts

@@ -0,0 +1,2 @@
+declare function FullscreenExitIcon(): import("react/jsx-runtime").JSX.Element;
+export { FullscreenExitIcon };

package/dist/components/player/ui/icons/pause-icon.d.ts

@@ -0,0 +1,2 @@
+declare function PauseIcon(): import("react/jsx-runtime").JSX.Element;
+export { PauseIcon };

package/dist/components/player/ui/icons/play-icon.d.ts

@@ -0,0 +1,2 @@
+declare function PlayIcon(): import("react/jsx-runtime").JSX.Element;
+export { PlayIcon };

package/dist/components/player/ui/icons/volume-max-icon.d.ts

@@ -0,0 +1,2 @@
+declare function VolumeMaxIcon(): import("react/jsx-runtime").JSX.Element;
+export { VolumeMaxIcon };

package/dist/components/player/ui/icons/volume-min-icon.d.ts

@@ -0,0 +1,2 @@
+declare function VolumeMinIcon(): import("react/jsx-runtime").JSX.Element;
+export { VolumeMinIcon };

package/dist/components/player/ui/icons/volume-mute-icon.d.ts

@@ -0,0 +1,2 @@
+declare function VolumeMuteIcon(): import("react/jsx-runtime").JSX.Element;
+export { VolumeMuteIcon };

package/dist/components/player/ui/player-button.d.ts

@@ -1,4 +1,7 @@
 import { HTMLAttributes } from 'react';
-type PlayerButtonProps = HTMLAttributes<HTMLButtonElement>;
-declare function PlayerButton({ ...props }: PlayerButtonProps): import("react/jsx-runtime").JSX.Element;
+type PlayerButtonProps = HTMLAttributes<HTMLButtonElement> & {
+    shape?: "square" | "circle";
+};
+declare function PlayerButton({ shape, ...props }: PlayerButtonProps): import("react/jsx-runtime").JSX.Element;
 export { PlayerButton };
+export type { PlayerButtonProps };

package/dist/components/player/ui/player-controls.styles.d.ts

@@ -0,0 +1,8 @@
+export declare const PlayerContainer: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const ControlsBottom: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const ControlsContainer: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const ControlsRow: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const ControlsSection: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const ControlsSectionStart: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>, never>> & string;
+export declare const ControlsSectionCenter: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>, never>> & string;
+export declare const ControlsSectionEnd: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>, never>> & string;

package/dist/components/player/ui/player-fullscreen.d.ts

@@ -1,2 +1,2 @@
-declare const PlayerFullscreen: () => import("react/jsx-runtime").JSX.Element;
+declare function PlayerFullscreen(): import("react/jsx-runtime").JSX.Element;
 export { PlayerFullscreen };

package/dist/components/player/ui/player-idle-check.d.ts

@@ -0,0 +1,3 @@
+import { PropsWithChildren } from 'react';
+declare function PlayerIdleCheck({ children }: PropsWithChildren): import("react/jsx-runtime").JSX.Element;
+export { PlayerIdleCheck };

package/dist/components/player/ui/player-playback-indicator.d.ts

@@ -0,0 +1,4 @@
+import { ButtonHTMLAttributes } from 'react';
+type PlayerPlaybackIndicatorProps = ButtonHTMLAttributes<HTMLButtonElement>;
+declare function PlayerPlaybackIndicator({ className, onClick, ...props }: PlayerPlaybackIndicatorProps): import("react/jsx-runtime").JSX.Element;
+export { PlayerPlaybackIndicator };

package/dist/components/player/ui/player-progress.styles.d.ts

@@ -0,0 +1,6 @@
+declare const ProgressSlider: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+declare const TipContainer: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    $isVisible: boolean;
+}>> & string;
+declare const TipContent: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, never>> & string;
+export { ProgressSlider, TipContainer, TipContent };

package/dist/components/player/ui/player-remaining-time.styles.d.ts

@@ -0,0 +1,6 @@
+declare const RemainingTime: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+declare const Time: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, never>> & string;
+declare const CurrentTime: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, never>, never>> & string;
+declare const Duration: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, never>, never>> & string;
+declare const Separator: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, never>> & string;
+export { CurrentTime, Duration, RemainingTime, Separator, Time };

package/dist/components/player/ui/player-slider.d.ts

@@ -1,6 +1,4 @@
-type PlayerSliderProps = {
-    step: number;
-    value: number;
-};
-declare function PlayerSlider(props: PlayerSliderProps): null;
+import { ComponentProps } from 'react';
+import * as Slider from "@radix-ui/react-slider";
+declare function PlayerSlider({ max, min, ...props }: ComponentProps<typeof Slider.Root>): import("react/jsx-runtime").JSX.Element;
 export { PlayerSlider };

package/dist/components/player/ui/player-spinner.d.ts

@@ -0,0 +1,3 @@
+import { HTMLAttributes } from 'react';
+declare function PlayerSpinner(props: HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+export { PlayerSpinner };

package/dist/components/player/ui/player-volume.d.ts

@@ -0,0 +1,2 @@
+declare function PlayerVolume(): import("react/jsx-runtime").JSX.Element;
+export { PlayerVolume };

package/dist/components/vod-player/vod-player-playback-indicator.d.ts

@@ -0,0 +1,2 @@
+declare function VodPlayerPlaybackIndicator(): import("react/jsx-runtime").JSX.Element;
+export { VodPlayerPlaybackIndicator };

package/dist/components/vod-player/vod-player-remaining-time.d.ts

@@ -0,0 +1,2 @@
+declare function VodPlayerRemainingTime(): import("react/jsx-runtime").JSX.Element;
+export { VodPlayerRemainingTime };

package/dist/components/vod-player/vod-player-watch-history.d.ts

@@ -0,0 +1,5 @@
+type VodPlayerWatchHistoryProps = {
+    storageKey: string;
+};
+declare function VodPlayerWatchHistory({ storageKey }: VodPlayerWatchHistoryProps): null;
+export default VodPlayerWatchHistory;

package/dist/components/vod-player.d.ts

@@ -1,6 +1,10 @@
 type VodPlayerProps = {
     url: string;
+    watchHistory?: {
+        enabled: boolean;
+        storageKey: string;
+    };
 };
-declare function VodPlayer(props: VodPlayerProps): import("react/jsx-runtime").JSX.Element;
+declare function VodPlayer({ url, watchHistory }: VodPlayerProps): import("react/jsx-runtime").JSX.Element;
 export { VodPlayer };
 export type { VodPlayerProps };

package/dist/config/player.d.ts

@@ -1,5 +1,3 @@
-declare const PlayerSourceType: {
-    readonly hls: "hls";
-    readonly dash: "dash";
-};
-export { PlayerSourceType };
+declare const WatchHistoryMinTime = 60;
+declare const WatchHistoryMaxPercent = 95;
+export { WatchHistoryMaxPercent, WatchHistoryMinTime };

package/dist/hooks/use-interval.d.ts

@@ -0,0 +1,2 @@
+declare function useInterval(callback: () => void, delay: number | null): void;
+export { useInterval };

package/dist/hooks/use-isomorphic-layout-effect.d.ts

@@ -0,0 +1,3 @@
+import { useLayoutEffect } from 'react';
+declare const useIsomorphicLayoutEffect: typeof useLayoutEffect;
+export { useIsomorphicLayoutEffect };

package/dist/hooks/use-state-refresh.d.ts

@@ -0,0 +1,2 @@
+declare function useStateRefresh(delay: number | null): void;
+export { useStateRefresh };