@car-cutter/react-webplayer 0.6.1 → 0.8.0

package/dist/index.d.ts

@@ -1,4 +1,5 @@
 import { FC } from 'react';
+import { PropsWithChildren } from 'react';
 
 declare type AspectRatio = `${number}:${number}`;
 
@@ -10,12 +11,12 @@ declare type Category = {
 
 export declare type Composition = {
     aspectRatio: AspectRatio;
-    imageHdWidth: ImageWidth;
-    imageSubWidths: ImageWidth[];
+    imageHdWidth: MediaWidth_2;
+    imageSubWidths: MediaWidth_2[];
     categories: Category[];
 };
 
-export declare const DEFAULT_EVENT_PREFIX: string = "cc-webplayer:";
+export declare const DEFAULT_EVENT_PREFIX = "cc-webplayer:" satisfies string;
 
 export declare const EVENT_COMPOSITION_LOAD_ERROR = "composition-load-error";
 
@@ -35,6 +36,8 @@ export declare const EVENT_HOTSPOTS_OFF = "hotspots-off";
 
 export declare const EVENT_HOTSPOTS_ON = "hotspots-on";
 
+export declare const EVENT_ITEM_CHANGE = "item-change";
+
 /**
  * Generates a URL for fetching the composition JSON for a given customer and vehicle.
  *
@@ -65,16 +68,20 @@ declare type Hotspot = {
 
 declare type ImageItem = { type: "image" } & ImageWithHotspots;
 
-declare type ImageLoadStrategy = "quality" | "speed";
-
-declare type ImageWidth = number;
-
 declare type ImageWithHotspots = {
     src: string;
     hotspots?: Hotspot[];
 };
 
-declare type Item = ImageItem | VideoItem | ThreeSixtyItem;
+export declare type Item = ImageItem | VideoItem | ThreeSixtyItem;
+
+export declare type MediaLoadStrategy = "quality" | "balanced" | "speed";
+
+declare type MediaLoadStrategy_2 = "quality" | "balanced" | "speed";
+
+declare type MediaWidth = number;
+
+declare type MediaWidth_2 = number;
 
 declare type ThreeSixtyItem = {
     type: "360";
@@ -84,7 +91,7 @@ declare type ThreeSixtyItem = {
 declare type VideoItem = {
     type: "video";
     src: string;
-    poster: string;
+    poster?: string;
 };
 
 export declare const WEB_PLAYER_ICON_WC_TAG = "cc-webplayer-icon";
@@ -93,33 +100,46 @@ export declare const WEB_PLAYER_WC_TAG = "cc-webplayer";
 
 export declare const WebPlayer: FC<WebPlayerProps>;
 
-export declare const WebPlayerIcon: FC<WebPlayerIconProps>;
+export declare const WebPlayerCustomMedia: FC<PropsWithChildren<WebPlayerCustomMediaProps>>;
+
+export declare type WebPlayerCustomMediaProps = {
+    index: number;
+    thumbnailSrc?: string;
+};
+
+export declare const WebPlayerIcon: FC<PropsWithChildren<WebPlayerIconProps>>;
+
+declare type WebPlayerIconName = "UI_ARROW_RIGHT" | "UI_BURGER" | "UI_CLOSE" | "UI_EXTEND" | "UI_GALLERY" | "UI_HOTSPOTS" | "UI_IMAGE" | "UI_MINUS" | "UI_PAUSE" | "UI_PLAY" | "UI_PLUS" | "UI_REDUCE" | "UI_360" | "UI_VOLUME" | "UI_VOLUME_OFF" | "CONTROLS_PREV" | "CONTROLS_NEXT" | (string & {});
 
 export declare type WebPlayerIconProps = {
-    name: string;
-    color?: string;
+    name: WebPlayerIconName;
 };
 
-export declare type WebPlayerProps = WebPlayerProps_2 & {
+export declare type WebPlayerProps = PropsWithChildren<WebPlayerProps_2> & {
     onCompositionLoading?: (url: string) => void;
     onCompositionLoaded?: (composition: Composition) => void;
     onCompositionLoadError?: (error: unknown) => void;
+    onItemChange?: (props: {
+        index: number;
+        item: Item;
+    }) => void;
     onExtendModeOn?: () => void;
     onExtendModeOff?: () => void;
     onHotspotsOn?: () => void;
     onHotspotsOff?: () => void;
     onGalleryOpen?: () => void;
     onGalleryClose?: () => void;
-};
+} & Pick<React.HTMLAttributes<HTMLElement>, "className" | "style">;
 
 declare type WebPlayerProps_2 = {
     compositionUrl: string;
     hideCategories?: boolean;
     infiniteCarrousel?: boolean;
     permanentGallery?: boolean;
-    imageLoadStrategy?: ImageLoadStrategy;
-    minImageWidth?: number;
-    maxImageWidth?: number;
+    mediaLoadStrategy?: MediaLoadStrategy_2;
+    minMediaWidth?: MediaWidth;
+    maxMediaWidth?: MediaWidth;
+    preloadRange?: number;
     preventFullScreen?: boolean;
     eventPrefix?: string;
     reverse360?: boolean;