@car-cutter/react-webplayer 3.0.0 → 3.0.2

package/dist/index.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("./shared-Bps5mZ-a.cjs");require("react/jsx-runtime");const P=require("react"),S=require("react-dom/client");var W=Object.defineProperty,L=(e,t,o)=>t in e?W(e,t,{enumerable:!0,configurable:!0,writable:!0,value:o}):e[t]=o,b=(e,t,o)=>(L(e,typeof t!="symbol"?t+"":t,o),o);const I={stringify:e=>e,parse:e=>e},R={stringify:e=>`${e}`,parse:e=>parseFloat(e)},V={stringify:e=>e?"true":"false",parse:e=>/^[ty1-9]/i.test(e)},M={stringify:e=>e.name,parse:(e,t,o)=>{const i=(()=>{if(typeof window<"u"&&e in window)return window[e];if(typeof global<"u"&&e in global)return global[e]})();return typeof i=="function"?i.bind(o):void 0}},D={stringify:e=>JSON.stringify(e),parse:e=>JSON.parse(e)},y={string:I,number:R,boolean:V,function:M,json:D};function w(e){return e.replace(/([a-z0-9])([A-Z])/g,(t,o,i)=>`${o}-${i.toLowerCase()}`)}const m=Symbol.for("r2wc.render"),T=Symbol.for("r2wc.connected"),u=Symbol.for("r2wc.context"),l=Symbol.for("r2wc.props");function G(e,t,o){var i,O,A;t.props||(t.props=e.propTypes?Object.keys(e.propTypes):[]);const d=Array.isArray(t.props)?t.props.slice():Object.keys(t.props),p={},f={},h={};for(const s of d){p[s]=Array.isArray(t.props)?"string":t.props[s];const r=w(s);f[s]=r,h[r]=s}class g extends HTMLElement{constructor(){super(),b(this,i,!0),b(this,O),b(this,A,{}),b(this,"container"),t.shadow?this.container=this.attachShadow({mode:t.shadow}):this.container=this,this[l].container=this.container;for(const r of d){const _=f[r],c=this.getAttribute(_),a=p[r],E=a?y[a]:null;E!=null&&E.parse&&c&&(this[l][r]=E.parse(c,_,this))}}static get observedAttributes(){return Object.keys(h)}connectedCallback(){this[T]=!0,this[m]()}disconnectedCallback(){this[T]=!1,this[u]&&o.unmount(this[u]),delete this[u]}attributeChangedCallback(r,_,c){const a=h[r],E=p[a],N=E?y[E]:null;a in p&&N!=null&&N.parse&&c&&(this[l][a]=N.parse(c,r,this),this[m]())}[(i=T,O=u,A=l,m)](){this[T]&&(this[u]?o.update(this[u],this[l]):this[u]=o.mount(this.container,e,this[l]))}}for(const s of d){const r=f[s],_=p[s];Object.defineProperty(g.prototype,s,{enumerable:!0,configurable:!0,get(){return this[l][s]},set(c){this[l][s]=c;const a=_?y[_]:null;if(a!=null&&a.stringify){const E=a.stringify(c,r,this);this.getAttribute(r)!==E&&this.setAttribute(r,E)}else this[m]()}})}return g}function F(e,t,o){const i=S.createRoot(e),O=P.createElement(t,o);return i.render(O),{root:i,ReactComponent:t}}function v({root:e,ReactComponent:t},o){const i=P.createElement(t,o);e.render(i)}function Y({root:e}){setTimeout(()=>{e.unmount()},0)}function C(e,t={}){return G(e,t,{mount:F,update:v,unmount:Y})}const j=C(n.WebPlayerWithInjectedStyles,{shadow:"closed",props:{compositionUrl:"string",hideCategoriesNav:"boolean",infiniteCarrousel:"boolean",permanentGallery:"boolean",integration:"boolean",maxItemsShown:"number",minMediaWidth:"number",maxMediaWidth:"number",mediaLoadStrategy:"string",preloadRange:"number",autoLoad360:"boolean",autoLoadInterior360:"boolean",categoriesFilter:"string",extendBehavior:"string",eventPrefix:"string",demoSpin:"boolean",reverse360:"boolean"}}),k=C(n.WebPlayerCustomMedia,{shadow:"closed",props:{index:"number",thumbnailSrc:"string"}}),x=C(n.WebPlayerIcon,{shadow:"closed",props:{name:"string"}});function B(){customElements.define(n.WEB_PLAYER_WC_TAG,j),customElements.define(n.WEB_PLAYER_CUSTOM_MEDIA_WC_TAG,k),customElements.define(n.WEB_PLAYER_ICON_WC_TAG,x)}function H(){n.checkCustomElementsDefinition()||B()}H();exports.DEFAULT_EVENT_PREFIX=n.DEFAULT_EVENT_PREFIX;exports.EVENT_COMPOSITION_LOADED=n.EVENT_COMPOSITION_LOADED;exports.EVENT_COMPOSITION_LOADING=n.EVENT_COMPOSITION_LOADING;exports.EVENT_COMPOSITION_LOAD_ERROR=n.EVENT_COMPOSITION_LOAD_ERROR;exports.EVENT_EXTEND_MODE_OFF=n.EVENT_EXTEND_MODE_OFF;exports.EVENT_EXTEND_MODE_ON=n.EVENT_EXTEND_MODE_ON;exports.EVENT_GALLERY_CLOSE=n.EVENT_GALLERY_CLOSE;exports.EVENT_GALLERY_OPEN=n.EVENT_GALLERY_OPEN;exports.EVENT_HOTSPOTS_OFF=n.EVENT_HOTSPOTS_OFF;exports.EVENT_HOTSPOTS_ON=n.EVENT_HOTSPOTS_ON;exports.EVENT_ITEM_CHANGE=n.EVENT_ITEM_CHANGE;exports.WEB_PLAYER_ICON_WC_TAG=n.WEB_PLAYER_ICON_WC_TAG;exports.WEB_PLAYER_WC_TAG=n.WEB_PLAYER_WC_TAG;exports.WebPlayer=n.WebPlayer;exports.WebPlayerCustomMedia=n.WebPlayerCustomMedia$1;exports.WebPlayerIcon=n.WebPlayerIcon$1;exports.generateCompositionUrl=n.generateCompositionUrl;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("./shared-BWLUv51h.cjs");require("react/jsx-runtime");const P=require("react"),I=require("react-dom/client");var S=Object.defineProperty,L=(e,n,o)=>n in e?S(e,n,{enumerable:!0,configurable:!0,writable:!0,value:o}):e[n]=o,p=(e,n,o)=>(L(e,typeof n!="symbol"?n+"":n,o),o);const W={stringify:e=>e,parse:e=>e},V={stringify:e=>`${e}`,parse:e=>parseFloat(e)},R={stringify:e=>e?"true":"false",parse:e=>/^[ty1-9]/i.test(e)},D={stringify:e=>e.name,parse:(e,n,o)=>{const i=(()=>{if(typeof window<"u"&&e in window)return window[e];if(typeof global<"u"&&e in global)return global[e]})();return typeof i=="function"?i.bind(o):void 0}},M={stringify:e=>JSON.stringify(e),parse:e=>JSON.parse(e)},f={string:W,number:V,boolean:R,function:D,json:M};function w(e){return e.replace(/([a-z0-9])([A-Z])/g,(n,o,i)=>`${o}-${i.toLowerCase()}`)}const O=Symbol.for("r2wc.render"),N=Symbol.for("r2wc.connected"),u=Symbol.for("r2wc.context"),c=Symbol.for("r2wc.props");function Y(e,n,o){var i,b,C;n.props||(n.props=e.propTypes?Object.keys(e.propTypes):[]);const m=Array.isArray(n.props)?n.props.slice():Object.keys(n.props),T={},d={},y={};for(const s of m){T[s]=Array.isArray(n.props)?"string":n.props[s];const r=w(s);d[s]=r,y[r]=s}class g extends HTMLElement{constructor(){super(),p(this,i,!0),p(this,b),p(this,C,{}),p(this,"container"),n.shadow?this.container=this.attachShadow({mode:n.shadow}):this.container=this,this[c].container=this.container;for(const r of m){const _=d[r],l=this.getAttribute(_),a=T[r],E=a?f[a]:null;E!=null&&E.parse&&l&&(this[c][r]=E.parse(l,_,this))}}static get observedAttributes(){return Object.keys(y)}connectedCallback(){this[N]=!0,this[O]()}disconnectedCallback(){this[N]=!1,this[u]&&o.unmount(this[u]),delete this[u]}attributeChangedCallback(r,_,l){const a=y[r],E=T[a],A=E?f[E]:null;a in T&&A!=null&&A.parse&&l&&(this[c][a]=A.parse(l,r,this),this[O]())}[(i=N,b=u,C=c,O)](){this[N]&&(this[u]?o.update(this[u],this[c]):this[u]=o.mount(this.container,e,this[c]))}}for(const s of m){const r=d[s],_=T[s];Object.defineProperty(g.prototype,s,{enumerable:!0,configurable:!0,get(){return this[c][s]},set(l){this[c][s]=l;const a=_?f[_]:null;if(a!=null&&a.stringify){const E=a.stringify(l,r,this);this.getAttribute(r)!==E&&this.setAttribute(r,E)}else this[O]()}})}return g}function G(e,n,o){const i=I.createRoot(e),b=P.createElement(n,o);return i.render(b),{root:i,ReactComponent:n}}function F({root:e,ReactComponent:n},o){const i=P.createElement(n,o);e.render(i)}function v({root:e}){setTimeout(()=>{e.unmount()},0)}function h(e,n={}){return Y(e,n,{mount:G,update:F,unmount:v})}const j=h(t.WebPlayerWithInjectedStyles,{shadow:"closed",props:{compositionUrl:"string",hideCategoriesNav:"boolean",infiniteCarrousel:"boolean",permanentGallery:"boolean",integration:"boolean",maxItemsShown:"number",minMediaWidth:"number",maxMediaWidth:"number",mediaLoadStrategy:"string",preloadRange:"number",autoLoad360:"boolean",autoLoadInterior360:"boolean",categoriesFilter:"string",extendBehavior:"string",eventPrefix:"string",demoSpin:"boolean",reverse360:"boolean",analyticsEventPrefix:"string",analyticsUrl:"string",analyticsBearer:"string",analyticsSimpleRequestsOnly:"boolean",analyticsDryRun:"boolean",analyticsDebug:"boolean"}}),x=h(t.WebPlayerCustomMedia,{shadow:"closed",props:{index:"number",thumbnailSrc:"string"}}),B=h(t.WebPlayerIcon,{shadow:"closed",props:{name:"string"}});function k(){customElements.define(t.WEB_PLAYER_WC_TAG,j),customElements.define(t.WEB_PLAYER_CUSTOM_MEDIA_WC_TAG,x),customElements.define(t.WEB_PLAYER_ICON_WC_TAG,B)}function H(){t.checkCustomElementsDefinition()||k()}H();exports.ANALYTICS_EVENT_IDENTIFY=t.ANALYTICS_EVENT_IDENTIFY;exports.ANALYTICS_EVENT_PAGE=t.ANALYTICS_EVENT_PAGE;exports.ANALYTICS_EVENT_TRACK=t.ANALYTICS_EVENT_TRACK;exports.DEFAULT_EVENT_PREFIX=t.DEFAULT_EVENT_PREFIX;exports.EVENT_COMPOSITION_LOADED=t.EVENT_COMPOSITION_LOADED;exports.EVENT_COMPOSITION_LOADING=t.EVENT_COMPOSITION_LOADING;exports.EVENT_COMPOSITION_LOAD_ERROR=t.EVENT_COMPOSITION_LOAD_ERROR;exports.EVENT_EXTEND_MODE_OFF=t.EVENT_EXTEND_MODE_OFF;exports.EVENT_EXTEND_MODE_ON=t.EVENT_EXTEND_MODE_ON;exports.EVENT_GALLERY_CLOSE=t.EVENT_GALLERY_CLOSE;exports.EVENT_GALLERY_OPEN=t.EVENT_GALLERY_OPEN;exports.EVENT_HOTSPOTS_OFF=t.EVENT_HOTSPOTS_OFF;exports.EVENT_HOTSPOTS_ON=t.EVENT_HOTSPOTS_ON;exports.EVENT_ITEM_CHANGE=t.EVENT_ITEM_CHANGE;exports.WEB_PLAYER_ICON_WC_TAG=t.WEB_PLAYER_ICON_WC_TAG;exports.WEB_PLAYER_WC_TAG=t.WEB_PLAYER_WC_TAG;exports.WebPlayer=t.WebPlayer;exports.WebPlayerCustomMedia=t.WebPlayerCustomMedia$1;exports.WebPlayerIcon=t.WebPlayerIcon$1;exports.generateCompositionUrl=t.generateCompositionUrl;

package/dist/index.d.ts

@@ -1,6 +1,107 @@
 import { FC } from 'react';
 import { PropsWithChildren } from 'react';
 
+export declare const ANALYTICS_EVENT_IDENTIFY = "analytics-identify";
+
+export declare const ANALYTICS_EVENT_PAGE = "analytics-page";
+
+export declare const ANALYTICS_EVENT_TRACK = "analytics-track";
+
+declare type AnalyticsEventBase = {
+    type: AnalyticsEventType;
+    timestamp: string;
+    instance_id: string;
+};
+
+declare type AnalyticsEventType =
+| AnalyticsEventTypeIdentify
+| AnalyticsEventTypePage
+| AnalyticsEventTypeTrack;
+
+declare type AnalyticsEventTypeIdentify = "identify";
+
+declare type AnalyticsEventTypePage = "page";
+
+declare type AnalyticsEventTypeTrack = "track";
+
+declare type AnalyticsIdentifyEvent = Omit<AnalyticsEventBase, "type"> &
+AnalyticsIdentifyEventProps;
+
+declare type AnalyticsIdentifyEventProps = {
+    type: AnalyticsEventTypeIdentify;
+    browser_id: string;
+    session_id: string;
+    referrer: string;
+    origin: string;
+    page_url: string;
+    user_agent: string;
+    wp_properties: {
+        composition_url: string;
+
+        // Integration mode
+        integration: boolean;
+        max_items_shown: number;
+
+        // Layout
+        hide_categories_nav: boolean;
+        infinite_carrousel: boolean;
+        permanent_gallery: boolean;
+
+        // Medias loading
+        media_load_strategy: string;
+        min_media_width: number;
+        max_media_width: number;
+        preload_range: number;
+        auto_load_360: boolean;
+        auto_load_interior_360: boolean;
+
+        // Miscellaneous
+        categories_filter: string;
+        extend_behavior: string;
+        event_prefix: string;
+        demo_spin: boolean;
+        reverse_360: boolean;
+    };
+};
+
+declare type AnalyticsPageEvent = Omit<AnalyticsEventBase, "type"> &
+AnalyticsPageEventProps;
+
+declare type AnalyticsPageEventProps = {
+    type: AnalyticsEventTypePage;
+    category_id: string;
+    category_name: string;
+    items_count: number;
+    page_properties: {
+        item_type: string;
+        item_position: number;
+    };
+};
+
+declare type AnalyticsTrackEvent = Omit<AnalyticsEventBase, "type"> &
+AnalyticsTrackEventProps;
+
+declare type AnalyticsTrackEventProps = {
+    type: AnalyticsEventTypeTrack;
+    category_id: string;
+    category_name: string;
+    item_type: string;
+    item_position: number;
+    action_properties: {
+        action_name: string;
+        action_field: string;
+        action_value:
+        | bigint
+        | boolean
+        | null
+        | number
+        | string
+        | symbol
+        | undefined
+        | object;
+    };
+};
+
 declare type AspectRatio = `${number}:${number}`;
 
 declare type Category = {
@@ -43,7 +144,7 @@ declare type ExtendBehavior = "full_screen" | "event" | "none";
 /**
  * Generates a URL for fetching the composition JSON for a given customer and vehicle.
  *
- * @param {string} customerToken - The CarCutter Customer Token (computed by hasing the Customer ID with SHA-256).
+ * @param {string} customerToken - The CarCutter Customer Token (computed by hashing the Customer ID with SHA-256).
  * @param {string} vin - The Vehicle Identification Number.
  * @returns {string} The URL to fetch the composition JSON.
  */
@@ -58,6 +159,7 @@ declare type Hotspot = {
     title: string;
     icon?: string;
     description?: string;
+    type?: "damage" | "feature";
     position: {
         x: number;
         y: number;
@@ -129,8 +231,10 @@ declare type WebPlayerIconName =
 | "UI_PLAY" // Play video
 | "UI_PLUS" // Increase zoom
 | "UI_REDUCE" // Reducing an extended view
-| "UI_360" // 360-degree view
-| "UI_INTERIOR_360" // interior 360 view
+| "UI_360" // Exterior 360 view
+| "UI_360_PLAY" // Play exterior 360
+| "UI_INTERIOR_360" // Interior 360 view
+| "UI_INTERIOR_360_PLAY" // Play interior 360 view
 | "UI_VOLUME" // Video volume
 | "UI_VOLUME_OFF" // Muted video
 | "CONTROLS_PREV" // Go to previous media
@@ -156,6 +260,9 @@ export declare type WebPlayerProps = PropsWithChildren<WebPlayerProps_2> & {
     onHotspotsOff?: () => void;
     onGalleryOpen?: () => void;
     onGalleryClose?: () => void;
+    onAnalyticsIdentify?: (event: AnalyticsIdentifyEvent) => void;
+    onAnalyticsPage?: (event: AnalyticsPageEvent) => void;
+    onAnalyticsTrack?: (event: AnalyticsTrackEvent) => void;
 } & Pick<React.HTMLAttributes<HTMLElement>, "className" | "style">;
 
 declare type WebPlayerProps_2 = {
@@ -184,6 +291,14 @@ declare type WebPlayerProps_2 = {
     eventPrefix?: string;
     demoSpin?: boolean;
     reverse360?: boolean;
+
+    // Analytics
+    analyticsEventPrefix?: string;
+    analyticsUrl?: string;
+    analyticsBearer?: string;
+    analyticsSimpleRequestsOnly?: boolean;
+    analyticsDryRun?: boolean;
+    analyticsDebug?: boolean;
 };
 
 export { }

package/dist/index.js

@@ -1,9 +1,9 @@
-import { W as P, a as S, b as W, c as w, d as I, e as L, f as M } from "./shared-BOKJghvy.js";
-import { D as oe, j as re, E as se, k as ie, n as ae, m as ce, r as le, q as ue, p as pe, o as me, l as be, g as fe, h as Ee, i as de, s as he } from "./shared-BOKJghvy.js";
+import { W as S, a as P, b as I, c as W, d as w, e as L, f as D } from "./shared-nW6KBfyK.js";
+import { A as oe, s as re, t as se, D as ie, j as ae, E as le, k as ce, n as ue, m as pe, r as me, q as Ee, p as be, o as fe, l as de, g as he, h as ye, i as _e, u as ge } from "./shared-nW6KBfyK.js";
 import "react/jsx-runtime";
-import A from "react";
-import { createRoot as D } from "react-dom/client";
-var R = Object.defineProperty, V = (e, t, n) => t in e ? R(e, t, { enumerable: !0, configurable: !0, writable: !0, value: n }) : e[t] = n, f = (e, t, n) => (V(e, typeof t != "symbol" ? t + "" : t, n), n);
+import N from "react";
+import { createRoot as R } from "react-dom/client";
+var V = Object.defineProperty, M = (e, t, n) => t in e ? V(e, t, { enumerable: !0, configurable: !0, writable: !0, value: n }) : e[t] = n, b = (e, t, n) => (M(e, typeof t != "symbol" ? t + "" : t, n), n);
 const v = {
   stringify: (e) => e,
   parse: (e) => e
@@ -27,7 +27,7 @@ const v = {
 }, F = {
   stringify: (e) => JSON.stringify(e),
   parse: (e) => JSON.parse(e)
-}, O = {
+}, T = {
   string: v,
   number: x,
   boolean: j,
@@ -40,9 +40,9 @@ function G(e) {
     (t, n, r) => `${n}-${r.toLowerCase()}`
   );
 }
-const E = Symbol.for("r2wc.render"), d = Symbol.for("r2wc.connected"), u = Symbol.for("r2wc.context"), l = Symbol.for("r2wc.props");
+const f = Symbol.for("r2wc.render"), d = Symbol.for("r2wc.connected"), u = Symbol.for("r2wc.context"), c = Symbol.for("r2wc.props");
 function Y(e, t, n) {
-  var r, b, C;
+  var r, E, C;
   t.props || (t.props = e.propTypes ? Object.keys(e.propTypes) : []);
   const h = Array.isArray(t.props) ? t.props.slice() : Object.keys(t.props), m = {}, y = {}, _ = {};
   for (const s of h) {
@@ -50,78 +50,78 @@ function Y(e, t, n) {
     const o = G(s);
     y[s] = o, _[o] = s;
   }
-  class N extends HTMLElement {
+  class A extends HTMLElement {
     constructor() {
-      super(), f(this, r, !0), f(this, b), f(this, C, {}), f(this, "container"), t.shadow ? this.container = this.attachShadow({
+      super(), b(this, r, !0), b(this, E), b(this, C, {}), b(this, "container"), t.shadow ? this.container = this.attachShadow({
         mode: t.shadow
-      }) : this.container = this, this[l].container = this.container;
+      }) : this.container = this, this[c].container = this.container;
       for (const o of h) {
-        const p = y[o], c = this.getAttribute(p), i = m[o], a = i ? O[i] : null;
-        a != null && a.parse && c && (this[l][o] = a.parse(c, p, this));
+        const p = y[o], l = this.getAttribute(p), i = m[o], a = i ? T[i] : null;
+        a != null && a.parse && l && (this[c][o] = a.parse(l, p, this));
       }
     }
     static get observedAttributes() {
       return Object.keys(_);
     }
     connectedCallback() {
-      this[d] = !0, this[E]();
+      this[d] = !0, this[f]();
     }
     disconnectedCallback() {
       this[d] = !1, this[u] && n.unmount(this[u]), delete this[u];
     }
-    attributeChangedCallback(o, p, c) {
-      const i = _[o], a = m[i], g = a ? O[a] : null;
-      i in m && g != null && g.parse && c && (this[l][i] = g.parse(c, o, this), this[E]());
+    attributeChangedCallback(o, p, l) {
+      const i = _[o], a = m[i], g = a ? T[a] : null;
+      i in m && g != null && g.parse && l && (this[c][i] = g.parse(l, o, this), this[f]());
     }
-    [(r = d, b = u, C = l, E)]() {
-      this[d] && (this[u] ? n.update(this[u], this[l]) : this[u] = n.mount(
+    [(r = d, E = u, C = c, f)]() {
+      this[d] && (this[u] ? n.update(this[u], this[c]) : this[u] = n.mount(
         this.container,
         e,
-        this[l]
+        this[c]
       ));
     }
   }
   for (const s of h) {
     const o = y[s], p = m[s];
-    Object.defineProperty(N.prototype, s, {
+    Object.defineProperty(A.prototype, s, {
       enumerable: !0,
       configurable: !0,
       get() {
-        return this[l][s];
+        return this[c][s];
       },
-      set(c) {
-        this[l][s] = c;
-        const i = p ? O[p] : null;
+      set(l) {
+        this[c][s] = l;
+        const i = p ? T[p] : null;
         if (i != null && i.stringify) {
-          const a = i.stringify(c, o, this);
+          const a = i.stringify(l, o, this);
           this.getAttribute(o) !== a && this.setAttribute(o, a);
         } else
-          this[E]();
+          this[f]();
       }
     });
   }
-  return N;
+  return A;
 }
 function B(e, t, n) {
-  const r = D(e), b = A.createElement(t, n);
-  return r.render(b), {
+  const r = R(e), E = N.createElement(t, n);
+  return r.render(E), {
     root: r,
     ReactComponent: t
   };
 }
-function H({ root: e, ReactComponent: t }, n) {
-  const r = A.createElement(t, n);
+function U({ root: e, ReactComponent: t }, n) {
+  const r = N.createElement(t, n);
   e.render(r);
 }
-function U({ root: e }) {
+function H({ root: e }) {
   setTimeout(() => {
     e.unmount();
   }, 0);
 }
-function T(e, t = {}) {
-  return Y(e, t, { mount: B, update: H, unmount: U });
+function O(e, t = {}) {
+  return Y(e, t, { mount: B, update: U, unmount: H });
 }
-const $ = T(P, {
+const $ = O(S, {
   shadow: "closed",
   props: {
     compositionUrl: "string",
@@ -143,46 +143,56 @@ const $ = T(P, {
     extendBehavior: "string",
     eventPrefix: "string",
     demoSpin: "boolean",
-    reverse360: "boolean"
+    reverse360: "boolean",
+    // Analytics
+    analyticsEventPrefix: "string",
+    analyticsUrl: "string",
+    analyticsBearer: "string",
+    analyticsSimpleRequestsOnly: "boolean",
+    analyticsDryRun: "boolean",
+    analyticsDebug: "boolean"
   }
-}), J = T(S, {
+}), J = O(P, {
   shadow: "closed",
   props: {
     index: "number",
     thumbnailSrc: "string"
   }
-}), X = T(W, {
+}), X = O(I, {
   shadow: "closed",
   props: {
     name: "string"
   }
 });
 function q() {
-  customElements.define(I, $), customElements.define(
+  customElements.define(w, $), customElements.define(
     L,
     J
-  ), customElements.define(M, X);
+  ), customElements.define(D, X);
 }
 function z() {
-  w() || q();
+  W() || q();
 }
 z();
 export {
-  oe as DEFAULT_EVENT_PREFIX,
-  re as EVENT_COMPOSITION_LOADED,
-  se as EVENT_COMPOSITION_LOADING,
-  ie as EVENT_COMPOSITION_LOAD_ERROR,
-  ae as EVENT_EXTEND_MODE_OFF,
-  ce as EVENT_EXTEND_MODE_ON,
-  le as EVENT_GALLERY_CLOSE,
-  ue as EVENT_GALLERY_OPEN,
-  pe as EVENT_HOTSPOTS_OFF,
-  me as EVENT_HOTSPOTS_ON,
-  be as EVENT_ITEM_CHANGE,
-  M as WEB_PLAYER_ICON_WC_TAG,
-  I as WEB_PLAYER_WC_TAG,
-  fe as WebPlayer,
-  Ee as WebPlayerCustomMedia,
-  de as WebPlayerIcon,
-  he as generateCompositionUrl
+  oe as ANALYTICS_EVENT_IDENTIFY,
+  re as ANALYTICS_EVENT_PAGE,
+  se as ANALYTICS_EVENT_TRACK,
+  ie as DEFAULT_EVENT_PREFIX,
+  ae as EVENT_COMPOSITION_LOADED,
+  le as EVENT_COMPOSITION_LOADING,
+  ce as EVENT_COMPOSITION_LOAD_ERROR,
+  ue as EVENT_EXTEND_MODE_OFF,
+  pe as EVENT_EXTEND_MODE_ON,
+  me as EVENT_GALLERY_CLOSE,
+  Ee as EVENT_GALLERY_OPEN,
+  be as EVENT_HOTSPOTS_OFF,
+  fe as EVENT_HOTSPOTS_ON,
+  de as EVENT_ITEM_CHANGE,
+  D as WEB_PLAYER_ICON_WC_TAG,
+  w as WEB_PLAYER_WC_TAG,
+  he as WebPlayer,
+  ye as WebPlayerCustomMedia,
+  _e as WebPlayerIcon,
+  ge as generateCompositionUrl
 };

package/dist/legacy.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("./shared-Bps5mZ-a.cjs");require("react/jsx-runtime");const W=require("react"),y=require("react-dom");var S=Object.defineProperty,L=(e,t,r)=>t in e?S(e,t,{enumerable:!0,configurable:!0,writable:!0,value:r}):e[t]=r,O=(e,t,r)=>(L(e,typeof t!="symbol"?t+"":t,r),r);const I={stringify:e=>e,parse:e=>e},V={stringify:e=>`${e}`,parse:e=>parseFloat(e)},M={stringify:e=>e?"true":"false",parse:e=>/^[ty1-9]/i.test(e)},R={stringify:e=>e.name,parse:(e,t,r)=>{const s=(()=>{if(typeof window<"u"&&e in window)return window[e];if(typeof global<"u"&&e in global)return global[e]})();return typeof s=="function"?s.bind(r):void 0}},D={stringify:e=>JSON.stringify(e),parse:e=>JSON.parse(e)},N={string:I,number:V,boolean:M,function:R,json:D};function w(e){return e.replace(/([a-z0-9])([A-Z])/g,(t,r,s)=>`${r}-${s.toLowerCase()}`)}const b=Symbol.for("r2wc.render"),d=Symbol.for("r2wc.connected"),u=Symbol.for("r2wc.context"),l=Symbol.for("r2wc.props");function G(e,t,r){var s,A,P;t.props||(t.props=e.propTypes?Object.keys(e.propTypes):[]);const T=Array.isArray(t.props)?t.props.slice():Object.keys(t.props),p={},m={},f={};for(const i of T){p[i]=Array.isArray(t.props)?"string":t.props[i];const o=w(i);m[i]=o,f[o]=i}class g extends HTMLElement{constructor(){super(),O(this,s,!0),O(this,A),O(this,P,{}),O(this,"container"),t.shadow?this.container=this.attachShadow({mode:t.shadow}):this.container=this,this[l].container=this.container;for(const o of T){const _=m[o],c=this.getAttribute(_),a=p[o],E=a?N[a]:null;E!=null&&E.parse&&c&&(this[l][o]=E.parse(c,_,this))}}static get observedAttributes(){return Object.keys(f)}connectedCallback(){this[d]=!0,this[b]()}disconnectedCallback(){this[d]=!1,this[u]&&r.unmount(this[u]),delete this[u]}attributeChangedCallback(o,_,c){const a=f[o],E=p[a],h=E?N[E]:null;a in p&&h!=null&&h.parse&&c&&(this[l][a]=h.parse(c,o,this),this[b]())}[(s=d,A=u,P=l,b)](){this[d]&&(this[u]?r.update(this[u],this[l]):this[u]=r.mount(this.container,e,this[l]))}}for(const i of T){const o=m[i],_=p[i];Object.defineProperty(g.prototype,i,{enumerable:!0,configurable:!0,get(){return this[l][i]},set(c){this[l][i]=c;const a=_?N[_]:null;if(a!=null&&a.stringify){const E=a.stringify(c,o,this);this.getAttribute(o)!==E&&this.setAttribute(o,E)}else this[b]()}})}return g}function F(e,t,r){const s=W.createElement(t,r);return y.render(s,e),{container:e,ReactComponent:t}}function v({container:e,ReactComponent:t},r){const s=W.createElement(t,r);y.render(s,e)}function Y({container:e}){y.unmountComponentAtNode(e)}function C(e,t={}){return G(e,t,{mount:F,update:v,unmount:Y})}const j=C(n.WebPlayerWithInjectedStyles,{shadow:"closed",props:{compositionUrl:"string",hideCategoriesNav:"boolean",infiniteCarrousel:"boolean",permanentGallery:"boolean",minMediaWidth:"number",maxMediaWidth:"number",mediaLoadStrategy:"string",preloadRange:"number",autoLoad360:"boolean",autoLoadInterior360:"boolean",categoriesFilter:"string",extendBehavior:"string",eventPrefix:"string",demoSpin:"boolean",reverse360:"boolean"}}),k=C(n.WebPlayerCustomMedia,{shadow:"closed",props:{index:"number",thumbnailSrc:"string"}}),B=C(n.WebPlayerIcon,{shadow:"closed",props:{name:"string"}});function $(){customElements.define(n.WEB_PLAYER_WC_TAG,j),customElements.define(n.WEB_PLAYER_CUSTOM_MEDIA_WC_TAG,k),customElements.define(n.WEB_PLAYER_ICON_WC_TAG,B)}function x(){n.checkCustomElementsDefinition()||$()}x();exports.DEFAULT_EVENT_PREFIX=n.DEFAULT_EVENT_PREFIX;exports.EVENT_COMPOSITION_LOADED=n.EVENT_COMPOSITION_LOADED;exports.EVENT_COMPOSITION_LOADING=n.EVENT_COMPOSITION_LOADING;exports.EVENT_COMPOSITION_LOAD_ERROR=n.EVENT_COMPOSITION_LOAD_ERROR;exports.EVENT_EXTEND_MODE_OFF=n.EVENT_EXTEND_MODE_OFF;exports.EVENT_EXTEND_MODE_ON=n.EVENT_EXTEND_MODE_ON;exports.EVENT_GALLERY_CLOSE=n.EVENT_GALLERY_CLOSE;exports.EVENT_GALLERY_OPEN=n.EVENT_GALLERY_OPEN;exports.EVENT_HOTSPOTS_OFF=n.EVENT_HOTSPOTS_OFF;exports.EVENT_HOTSPOTS_ON=n.EVENT_HOTSPOTS_ON;exports.EVENT_ITEM_CHANGE=n.EVENT_ITEM_CHANGE;exports.WEB_PLAYER_ICON_WC_TAG=n.WEB_PLAYER_ICON_WC_TAG;exports.WEB_PLAYER_WC_TAG=n.WEB_PLAYER_WC_TAG;exports.WebPlayer=n.WebPlayer;exports.WebPlayerCustomMedia=n.WebPlayerCustomMedia$1;exports.WebPlayerIcon=n.WebPlayerIcon$1;exports.generateCompositionUrl=n.generateCompositionUrl;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("./shared-BWLUv51h.cjs");require("react/jsx-runtime");const I=require("react"),f=require("react-dom");var S=Object.defineProperty,L=(e,n,r)=>n in e?S(e,n,{enumerable:!0,configurable:!0,writable:!0,value:r}):e[n]=r,p=(e,n,r)=>(L(e,typeof n!="symbol"?n+"":n,r),r);const W={stringify:e=>e,parse:e=>e},V={stringify:e=>`${e}`,parse:e=>parseFloat(e)},R={stringify:e=>e?"true":"false",parse:e=>/^[ty1-9]/i.test(e)},D={stringify:e=>e.name,parse:(e,n,r)=>{const s=(()=>{if(typeof window<"u"&&e in window)return window[e];if(typeof global<"u"&&e in global)return global[e]})();return typeof s=="function"?s.bind(r):void 0}},M={stringify:e=>JSON.stringify(e),parse:e=>JSON.parse(e)},A={string:W,number:V,boolean:R,function:D,json:M};function w(e){return e.replace(/([a-z0-9])([A-Z])/g,(n,r,s)=>`${r}-${s.toLowerCase()}`)}const b=Symbol.for("r2wc.render"),N=Symbol.for("r2wc.connected"),u=Symbol.for("r2wc.context"),c=Symbol.for("r2wc.props");function Y(e,n,r){var s,C,g;n.props||(n.props=e.propTypes?Object.keys(e.propTypes):[]);const O=Array.isArray(n.props)?n.props.slice():Object.keys(n.props),T={},d={},m={};for(const i of O){T[i]=Array.isArray(n.props)?"string":n.props[i];const o=w(i);d[i]=o,m[o]=i}class P extends HTMLElement{constructor(){super(),p(this,s,!0),p(this,C),p(this,g,{}),p(this,"container"),n.shadow?this.container=this.attachShadow({mode:n.shadow}):this.container=this,this[c].container=this.container;for(const o of O){const _=d[o],l=this.getAttribute(_),a=T[o],E=a?A[a]:null;E!=null&&E.parse&&l&&(this[c][o]=E.parse(l,_,this))}}static get observedAttributes(){return Object.keys(m)}connectedCallback(){this[N]=!0,this[b]()}disconnectedCallback(){this[N]=!1,this[u]&&r.unmount(this[u]),delete this[u]}attributeChangedCallback(o,_,l){const a=m[o],E=T[a],y=E?A[E]:null;a in T&&y!=null&&y.parse&&l&&(this[c][a]=y.parse(l,o,this),this[b]())}[(s=N,C=u,g=c,b)](){this[N]&&(this[u]?r.update(this[u],this[c]):this[u]=r.mount(this.container,e,this[c]))}}for(const i of O){const o=d[i],_=T[i];Object.defineProperty(P.prototype,i,{enumerable:!0,configurable:!0,get(){return this[c][i]},set(l){this[c][i]=l;const a=_?A[_]:null;if(a!=null&&a.stringify){const E=a.stringify(l,o,this);this.getAttribute(o)!==E&&this.setAttribute(o,E)}else this[b]()}})}return P}function G(e,n,r){const s=I.createElement(n,r);return f.render(s,e),{container:e,ReactComponent:n}}function F({container:e,ReactComponent:n},r){const s=I.createElement(n,r);f.render(s,e)}function v({container:e}){f.unmountComponentAtNode(e)}function h(e,n={}){return Y(e,n,{mount:G,update:F,unmount:v})}const j=h(t.WebPlayerWithInjectedStyles,{shadow:"closed",props:{compositionUrl:"string",hideCategoriesNav:"boolean",infiniteCarrousel:"boolean",permanentGallery:"boolean",minMediaWidth:"number",maxMediaWidth:"number",mediaLoadStrategy:"string",preloadRange:"number",autoLoad360:"boolean",autoLoadInterior360:"boolean",categoriesFilter:"string",extendBehavior:"string",eventPrefix:"string",demoSpin:"boolean",reverse360:"boolean",analyticsEventPrefix:"string",analyticsUrl:"string",analyticsBearer:"string",analyticsSimpleRequestsOnly:"boolean",analyticsDryRun:"boolean",analyticsDebug:"boolean"}}),B=h(t.WebPlayerCustomMedia,{shadow:"closed",props:{index:"number",thumbnailSrc:"string"}}),k=h(t.WebPlayerIcon,{shadow:"closed",props:{name:"string"}});function x(){customElements.define(t.WEB_PLAYER_WC_TAG,j),customElements.define(t.WEB_PLAYER_CUSTOM_MEDIA_WC_TAG,B),customElements.define(t.WEB_PLAYER_ICON_WC_TAG,k)}function $(){t.checkCustomElementsDefinition()||x()}$();exports.ANALYTICS_EVENT_IDENTIFY=t.ANALYTICS_EVENT_IDENTIFY;exports.ANALYTICS_EVENT_PAGE=t.ANALYTICS_EVENT_PAGE;exports.ANALYTICS_EVENT_TRACK=t.ANALYTICS_EVENT_TRACK;exports.DEFAULT_EVENT_PREFIX=t.DEFAULT_EVENT_PREFIX;exports.EVENT_COMPOSITION_LOADED=t.EVENT_COMPOSITION_LOADED;exports.EVENT_COMPOSITION_LOADING=t.EVENT_COMPOSITION_LOADING;exports.EVENT_COMPOSITION_LOAD_ERROR=t.EVENT_COMPOSITION_LOAD_ERROR;exports.EVENT_EXTEND_MODE_OFF=t.EVENT_EXTEND_MODE_OFF;exports.EVENT_EXTEND_MODE_ON=t.EVENT_EXTEND_MODE_ON;exports.EVENT_GALLERY_CLOSE=t.EVENT_GALLERY_CLOSE;exports.EVENT_GALLERY_OPEN=t.EVENT_GALLERY_OPEN;exports.EVENT_HOTSPOTS_OFF=t.EVENT_HOTSPOTS_OFF;exports.EVENT_HOTSPOTS_ON=t.EVENT_HOTSPOTS_ON;exports.EVENT_ITEM_CHANGE=t.EVENT_ITEM_CHANGE;exports.WEB_PLAYER_ICON_WC_TAG=t.WEB_PLAYER_ICON_WC_TAG;exports.WEB_PLAYER_WC_TAG=t.WEB_PLAYER_WC_TAG;exports.WebPlayer=t.WebPlayer;exports.WebPlayerCustomMedia=t.WebPlayerCustomMedia$1;exports.WebPlayerIcon=t.WebPlayerIcon$1;exports.generateCompositionUrl=t.generateCompositionUrl;

package/dist/legacy.d.ts

@@ -1,6 +1,107 @@
 import { FC } from 'react';
 import { PropsWithChildren } from 'react';
 
+export declare const ANALYTICS_EVENT_IDENTIFY = "analytics-identify";
+
+export declare const ANALYTICS_EVENT_PAGE = "analytics-page";
+
+export declare const ANALYTICS_EVENT_TRACK = "analytics-track";
+
+declare type AnalyticsEventBase = {
+    type: AnalyticsEventType;
+    timestamp: string;
+    instance_id: string;
+};
+
+declare type AnalyticsEventType =
+| AnalyticsEventTypeIdentify
+| AnalyticsEventTypePage
+| AnalyticsEventTypeTrack;
+
+declare type AnalyticsEventTypeIdentify = "identify";
+
+declare type AnalyticsEventTypePage = "page";
+
+declare type AnalyticsEventTypeTrack = "track";
+
+declare type AnalyticsIdentifyEvent = Omit<AnalyticsEventBase, "type"> &
+AnalyticsIdentifyEventProps;
+
+declare type AnalyticsIdentifyEventProps = {
+    type: AnalyticsEventTypeIdentify;
+    browser_id: string;
+    session_id: string;
+    referrer: string;
+    origin: string;
+    page_url: string;
+    user_agent: string;
+    wp_properties: {
+        composition_url: string;
+
+        // Integration mode
+        integration: boolean;
+        max_items_shown: number;
+
+        // Layout
+        hide_categories_nav: boolean;
+        infinite_carrousel: boolean;
+        permanent_gallery: boolean;
+
+        // Medias loading
+        media_load_strategy: string;
+        min_media_width: number;
+        max_media_width: number;
+        preload_range: number;
+        auto_load_360: boolean;
+        auto_load_interior_360: boolean;
+
+        // Miscellaneous
+        categories_filter: string;
+        extend_behavior: string;
+        event_prefix: string;
+        demo_spin: boolean;
+        reverse_360: boolean;
+    };
+};
+
+declare type AnalyticsPageEvent = Omit<AnalyticsEventBase, "type"> &
+AnalyticsPageEventProps;
+
+declare type AnalyticsPageEventProps = {
+    type: AnalyticsEventTypePage;
+    category_id: string;
+    category_name: string;
+    items_count: number;
+    page_properties: {
+        item_type: string;
+        item_position: number;
+    };
+};
+
+declare type AnalyticsTrackEvent = Omit<AnalyticsEventBase, "type"> &
+AnalyticsTrackEventProps;
+
+declare type AnalyticsTrackEventProps = {
+    type: AnalyticsEventTypeTrack;
+    category_id: string;
+    category_name: string;
+    item_type: string;
+    item_position: number;
+    action_properties: {
+        action_name: string;
+        action_field: string;
+        action_value:
+        | bigint
+        | boolean
+        | null
+        | number
+        | string
+        | symbol
+        | undefined
+        | object;
+    };
+};
+
 declare type AspectRatio = `${number}:${number}`;
 
 declare type Category = {
@@ -43,7 +144,7 @@ declare type ExtendBehavior = "full_screen" | "event" | "none";
 /**
  * Generates a URL for fetching the composition JSON for a given customer and vehicle.
  *
- * @param {string} customerToken - The CarCutter Customer Token (computed by hasing the Customer ID with SHA-256).
+ * @param {string} customerToken - The CarCutter Customer Token (computed by hashing the Customer ID with SHA-256).
  * @param {string} vin - The Vehicle Identification Number.
  * @returns {string} The URL to fetch the composition JSON.
  */
@@ -58,6 +159,7 @@ declare type Hotspot = {
     title: string;
     icon?: string;
     description?: string;
+    type?: "damage" | "feature";
     position: {
         x: number;
         y: number;
@@ -129,8 +231,10 @@ declare type WebPlayerIconName =
 | "UI_PLAY" // Play video
 | "UI_PLUS" // Increase zoom
 | "UI_REDUCE" // Reducing an extended view
-| "UI_360" // 360-degree view
-| "UI_INTERIOR_360" // interior 360 view
+| "UI_360" // Exterior 360 view
+| "UI_360_PLAY" // Play exterior 360
+| "UI_INTERIOR_360" // Interior 360 view
+| "UI_INTERIOR_360_PLAY" // Play interior 360 view
 | "UI_VOLUME" // Video volume
 | "UI_VOLUME_OFF" // Muted video
 | "CONTROLS_PREV" // Go to previous media
@@ -156,6 +260,9 @@ export declare type WebPlayerProps = PropsWithChildren<WebPlayerProps_2> & {
     onHotspotsOff?: () => void;
     onGalleryOpen?: () => void;
     onGalleryClose?: () => void;
+    onAnalyticsIdentify?: (event: AnalyticsIdentifyEvent) => void;
+    onAnalyticsPage?: (event: AnalyticsPageEvent) => void;
+    onAnalyticsTrack?: (event: AnalyticsTrackEvent) => void;
 } & Pick<React.HTMLAttributes<HTMLElement>, "className" | "style">;
 
 declare type WebPlayerProps_2 = {
@@ -184,6 +291,14 @@ declare type WebPlayerProps_2 = {
     eventPrefix?: string;
     demoSpin?: boolean;
     reverse360?: boolean;
+
+    // Analytics
+    analyticsEventPrefix?: string;
+    analyticsUrl?: string;
+    analyticsBearer?: string;
+    analyticsSimpleRequestsOnly?: boolean;
+    analyticsDryRun?: boolean;
+    analyticsDebug?: boolean;
 };
 
 export { }