@car-cutter/wc-webplayer 0.4.2 → 0.6.0

package/dist/index.d.ts

@@ -1,11 +1,26 @@
+declare type AspectRatio = `${number}:${number}`;
+
 declare type CamelToKebab<S extends string> = S extends `${infer T}${infer U}` ? `${T extends Lowercase<T> ? "" : "-"}${Lowercase<T>}${CamelToKebab<U>}` : S;
 
+declare type Category = {
+    id: string;
+    title: string;
+    items: Item[];
+};
+
 /**
  * Checks if WebPlayer's custom elements are defined and usable in the DOM.
  */
 export declare function checkCustomElementsDefinition(): boolean;
 
-export declare const DEFAULT_EVENT_PREFIX = "cc-webplayer:";
+export declare type Composition = {
+    aspectRatio: AspectRatio;
+    imageHdWidth: ImageWidth;
+    imageSubWidths: ImageWidth[];
+    categories: Category[];
+};
+
+export declare const DEFAULT_EVENT_PREFIX: string = "cc-webplayer:";
 
 /**
  * Defines WebPlayer's custom elements in the DOM.
@@ -36,10 +51,60 @@ export declare const EVENT_HOTSPOTS_OFF = "hotspots-off";
 
 export declare const EVENT_HOTSPOTS_ON = "hotspots-on";
 
+/**
+ * Generates a URL for fetching the composition JSON for a given customer and vehicle.
+ *
+ * @param {string} customerId - The ID of the customer.
+ * @param {string} vin - The Vehicle Identification Number.
+ * @returns {string} The URL to fetch the composition JSON.
+ */
+export declare function generateCompositionUrl(
+customerId: string,
+vin: string
+): string {
+    return `https://cdn.car-cutter.com/gallery/${customerId}/${vin}/composition_v3.json`;
+}
+
+declare type Hotspot = {
+    title: string;
+    icon?: string;
+    description?: string;
+    position: {
+        x: number;
+        y: number;
+    };
+    detail?: {
+        type: "image" | "link" | "pdf";
+        src: string;
+    };
+};
+
+declare type ImageItem = { type: "image" } & ImageWithHotspots;
+
 declare type ImageLoadStrategy = "quality" | "speed";
 
 declare type ImageLoadStrategy_2 = "quality" | "speed";
 
+declare type ImageWidth = number;
+
+declare type ImageWithHotspots = {
+    src: string;
+    hotspots?: Hotspot[];
+};
+
+declare type Item = ImageItem | VideoItem | ThreeSixtyItem;
+
+declare type ThreeSixtyItem = {
+    type: "360";
+    images: ImageWithHotspots[];
+};
+
+declare type VideoItem = {
+    type: "video";
+    src: string;
+    poster: string;
+};
+
 export declare const WEB_PLAYER_ICON_WC_TAG = "cc-webplayer-icon";
 
 export declare const WEB_PLAYER_WC_TAG = "cc-webplayer";
@@ -62,7 +127,7 @@ export declare const webPlayerIconPropsToAttributes: (props: WebPlayerIconProps_
 
 export declare type WebPlayerProps = {
     compositionUrl: string;
-    flatten?: boolean;
+    hideCategories?: boolean;
     infiniteCarrousel?: boolean;
     permanentGallery?: boolean;
     imageLoadStrategy?: ImageLoadStrategy;
@@ -75,7 +140,7 @@ export declare type WebPlayerProps = {
 
 declare type WebPlayerProps_2 = {
     compositionUrl: string;
-    flatten?: boolean;
+    hideCategories?: boolean;
     infiniteCarrousel?: boolean;
     permanentGallery?: boolean;
     imageLoadStrategy?: ImageLoadStrategy_2;