@car-cutter/vue-webplayer 3.0.0 → 3.0.2

package/dist/index.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("vue"),e=require("./utils-CbTbWQZC.cjs"),O=require("@car-cutter/wc-webplayer"),C=o.defineComponent({__name:"WebPlayer",props:{compositionUrl:{},integration:{type:Boolean},maxItemsShown:{},hideCategoriesNav:{type:Boolean},infiniteCarrousel:{type:Boolean},permanentGallery:{type:Boolean},mediaLoadStrategy:{},minMediaWidth:{},maxMediaWidth:{},preloadRange:{},autoLoad360:{type:Boolean},autoLoadInterior360:{type:Boolean},categoriesFilter:{},extendBehavior:{},eventPrefix:{},demoSpin:{type:Boolean},reverse360:{type:Boolean},class:{},style:{}},emits:["compositionLoading","compositionLoaded","compositionLoadError","itemChange","extendModeOn","extendModeOff","hotspotsOn","hotspotsOff","galleryOpen","galleryClose"],setup(_,{emit:s}){O.ensureCustomElementsDefinition();const r=_,{class:a,style:i,...c}=r,l={display:"block",...i??{}},N=O.webPlayerPropsToAttributes(c),E=s,p=r.eventPrefix??e.DEFAULT_EVENT_PREFIX,d=t=>`${p}${t}`,m={[e.EVENT_COMPOSITION_LOADING]:t=>E("compositionLoading",t),[e.EVENT_COMPOSITION_LOADED]:t=>E("compositionLoaded",t),[e.EVENT_COMPOSITION_LOAD_ERROR]:t=>E("compositionLoadError",t),[e.EVENT_ITEM_CHANGE]:t=>E("itemChange",t),[e.EVENT_EXTEND_MODE_ON]:()=>E("extendModeOn"),[e.EVENT_EXTEND_MODE_OFF]:()=>E("extendModeOff"),[e.EVENT_HOTSPOTS_ON]:()=>E("hotspotsOn"),[e.EVENT_HOTSPOTS_OFF]:()=>E("hotspotsOff"),[e.EVENT_GALLERY_OPEN]:()=>E("galleryOpen"),[e.EVENT_GALLERY_CLOSE]:()=>E("galleryClose")},T=new Map;return Object.entries(m).forEach(([t,n])=>{if(!n)return;const P=d(t),u=L=>n(L.detail);T.set(P,u)}),o.onMounted(()=>{T.forEach((t,n)=>{document.addEventListener(n,t)})}),o.onUnmounted(()=>{T.forEach((t,n)=>{document.removeEventListener(n,t)})}),(t,n)=>(o.openBlock(),o.createElementBlock("cc-webplayer",o.mergeProps(o.unref(N),{class:o.unref(a),style:l}),[o.renderSlot(t.$slots,"default")],16))}}),A=o.defineComponent({__name:"WebPlayerCustomMedia",props:{index:{},thumbnailSrc:{}},setup(_){const s=_,r=O.webPlayerCustomMediaPropsToAttributes(s);return(a,i)=>(o.openBlock(),o.createElementBlock("cc-webplayer-custom-media",o.normalizeProps(o.guardReactiveProps(o.unref(r))),[o.renderSlot(a.$slots,"default")],16))}}),I=o.defineComponent({__name:"WebPlayerIcon",props:{name:{}},setup(_){const s=_,r=O.webPlayerIconPropsToAttributes(s);return(a,i)=>(o.openBlock(),o.createElementBlock("cc-webplayer-icon",o.normalizeProps(o.guardReactiveProps(o.unref(r))),[o.renderSlot(a.$slots,"default")],16))}});exports.DEFAULT_EVENT_PREFIX=e.DEFAULT_EVENT_PREFIX;exports.EVENT_COMPOSITION_LOADED=e.EVENT_COMPOSITION_LOADED;exports.EVENT_COMPOSITION_LOADING=e.EVENT_COMPOSITION_LOADING;exports.EVENT_COMPOSITION_LOAD_ERROR=e.EVENT_COMPOSITION_LOAD_ERROR;exports.EVENT_EXTEND_MODE_OFF=e.EVENT_EXTEND_MODE_OFF;exports.EVENT_EXTEND_MODE_ON=e.EVENT_EXTEND_MODE_ON;exports.EVENT_GALLERY_CLOSE=e.EVENT_GALLERY_CLOSE;exports.EVENT_GALLERY_OPEN=e.EVENT_GALLERY_OPEN;exports.EVENT_HOTSPOTS_OFF=e.EVENT_HOTSPOTS_OFF;exports.EVENT_HOTSPOTS_ON=e.EVENT_HOTSPOTS_ON;exports.EVENT_ITEM_CHANGE=e.EVENT_ITEM_CHANGE;exports.WEB_PLAYER_CUSTOM_MEDIA_WC_TAG=e.WEB_PLAYER_CUSTOM_MEDIA_WC_TAG;exports.WEB_PLAYER_ICON_WC_TAG=e.WEB_PLAYER_ICON_WC_TAG;exports.WEB_PLAYER_WC_TAG=e.WEB_PLAYER_WC_TAG;exports.generateCompositionUrl=e.generateCompositionUrl;exports.WebPlayer=C;exports.WebPlayerCustomMedia=A;exports.WebPlayerIcon=I;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("vue"),e=require("./utils-Bfc4MSUL.cjs"),i=require("@car-cutter/wc-webplayer"),S=n.defineComponent({__name:"WebPlayer",props:{compositionUrl:{},integration:{type:Boolean},maxItemsShown:{},hideCategoriesNav:{type:Boolean},infiniteCarrousel:{type:Boolean},permanentGallery:{type:Boolean},mediaLoadStrategy:{},minMediaWidth:{},maxMediaWidth:{},preloadRange:{},autoLoad360:{type:Boolean},autoLoadInterior360:{type:Boolean},categoriesFilter:{},extendBehavior:{},eventPrefix:{},demoSpin:{type:Boolean},reverse360:{type:Boolean},analyticsEventPrefix:{},analyticsUrl:{},analyticsBearer:{},analyticsSimpleRequestsOnly:{type:Boolean},analyticsDryRun:{type:Boolean},analyticsDebug:{type:Boolean},class:{},style:{}},emits:["compositionLoading","compositionLoaded","compositionLoadError","itemChange","extendModeOn","extendModeOff","hotspotsOn","hotspotsOff","galleryOpen","galleryClose","analyticsIdentify","analyticsPage","analyticsTrack"],setup(r,{emit:s}){i.ensureCustomElementsDefinition();const a=r,{class:_,style:c,...A}=a,d={display:"block",...c??{}},L=i.webPlayerPropsToAttributes(A),E=s,m=a.eventPrefix??e.DEFAULT_EVENT_PREFIX,y=a.analyticsEventPrefix??e.DEFAULT_ANALYTICS_EVENT_PREFIX,P=t=>`${m}${t}`,C=t=>`${y}${t}`,I={[e.EVENT_COMPOSITION_LOADING]:t=>E("compositionLoading",t),[e.EVENT_COMPOSITION_LOADED]:t=>E("compositionLoaded",t),[e.EVENT_COMPOSITION_LOAD_ERROR]:t=>E("compositionLoadError",t),[e.EVENT_ITEM_CHANGE]:t=>E("itemChange",t),[e.EVENT_EXTEND_MODE_ON]:()=>E("extendModeOn"),[e.EVENT_EXTEND_MODE_OFF]:()=>E("extendModeOff"),[e.EVENT_HOTSPOTS_ON]:()=>E("hotspotsOn"),[e.EVENT_HOTSPOTS_OFF]:()=>E("hotspotsOff"),[e.EVENT_GALLERY_OPEN]:()=>E("galleryOpen"),[e.EVENT_GALLERY_CLOSE]:()=>E("galleryClose")},u={[e.ANALYTICS_EVENT_IDENTIFY]:t=>E("analyticsIdentify",t),[e.ANALYTICS_EVENT_PAGE]:t=>E("analyticsPage",t),[e.ANALYTICS_EVENT_TRACK]:t=>E("analyticsTrack",t)},T=new Map,l=new Map;return Object.entries(I).forEach(([t,o])=>{if(!o)return;const N=P(t),O=p=>o(p.detail);T.set(N,O)}),Object.entries(u).forEach(([t,o])=>{if(!o)return;const N=C(t),O=p=>o(p.detail);l.set(N,O)}),n.onMounted(()=>{T.forEach((t,o)=>{document.addEventListener(o,t)}),l.forEach((t,o)=>{document.addEventListener(o,t)})}),n.onUnmounted(()=>{T.forEach((t,o)=>{document.removeEventListener(o,t)}),l.forEach((t,o)=>{document.removeEventListener(o,t)})}),(t,o)=>(n.openBlock(),n.createElementBlock("cc-webplayer",n.mergeProps(n.unref(L),{class:n.unref(_),style:d}),[n.renderSlot(t.$slots,"default")],16))}}),V=n.defineComponent({__name:"WebPlayerCustomMedia",props:{index:{},thumbnailSrc:{}},setup(r){const s=r,a=i.webPlayerCustomMediaPropsToAttributes(s);return(_,c)=>(n.openBlock(),n.createElementBlock("cc-webplayer-custom-media",n.normalizeProps(n.guardReactiveProps(n.unref(a))),[n.renderSlot(_.$slots,"default")],16))}}),f=n.defineComponent({__name:"WebPlayerIcon",props:{name:{}},setup(r){const s=r,a=i.webPlayerIconPropsToAttributes(s);return(_,c)=>(n.openBlock(),n.createElementBlock("cc-webplayer-icon",n.normalizeProps(n.guardReactiveProps(n.unref(a))),[n.renderSlot(_.$slots,"default")],16))}});exports.ANALYTICS_EVENT_IDENTIFY=e.ANALYTICS_EVENT_IDENTIFY;exports.ANALYTICS_EVENT_PAGE=e.ANALYTICS_EVENT_PAGE;exports.ANALYTICS_EVENT_TRACK=e.ANALYTICS_EVENT_TRACK;exports.DEFAULT_EVENT_PREFIX=e.DEFAULT_EVENT_PREFIX;exports.EVENT_COMPOSITION_LOADED=e.EVENT_COMPOSITION_LOADED;exports.EVENT_COMPOSITION_LOADING=e.EVENT_COMPOSITION_LOADING;exports.EVENT_COMPOSITION_LOAD_ERROR=e.EVENT_COMPOSITION_LOAD_ERROR;exports.EVENT_EXTEND_MODE_OFF=e.EVENT_EXTEND_MODE_OFF;exports.EVENT_EXTEND_MODE_ON=e.EVENT_EXTEND_MODE_ON;exports.EVENT_GALLERY_CLOSE=e.EVENT_GALLERY_CLOSE;exports.EVENT_GALLERY_OPEN=e.EVENT_GALLERY_OPEN;exports.EVENT_HOTSPOTS_OFF=e.EVENT_HOTSPOTS_OFF;exports.EVENT_HOTSPOTS_ON=e.EVENT_HOTSPOTS_ON;exports.EVENT_ITEM_CHANGE=e.EVENT_ITEM_CHANGE;exports.WEB_PLAYER_CUSTOM_MEDIA_WC_TAG=e.WEB_PLAYER_CUSTOM_MEDIA_WC_TAG;exports.WEB_PLAYER_ICON_WC_TAG=e.WEB_PLAYER_ICON_WC_TAG;exports.WEB_PLAYER_WC_TAG=e.WEB_PLAYER_WC_TAG;exports.generateCompositionUrl=e.generateCompositionUrl;exports.WebPlayer=S;exports.WebPlayerCustomMedia=V;exports.WebPlayerIcon=f;

package/dist/index.d.ts

@@ -17,6 +17,9 @@ hotspotsOn: () => any;
 hotspotsOff: () => any;
 galleryOpen: () => any;
 galleryClose: () => any;
+analyticsIdentify: (event: AnalyticsIdentifyEvent) => any;
+analyticsPage: (event: AnalyticsPageEvent) => any;
+analyticsTrack: (event: AnalyticsTrackEvent) => any;
 }, string, PublicProps, Readonly<WebPlayerProps> & Readonly<{
 onCompositionLoading?: ((url: string) => any) | undefined;
 onCompositionLoaded?: ((composition: Composition) => any) | undefined;
@@ -31,6 +34,9 @@ onHotspotsOn?: (() => any) | undefined;
 onHotspotsOff?: (() => any) | undefined;
 onGalleryOpen?: (() => any) | undefined;
 onGalleryClose?: (() => any) | undefined;
+onAnalyticsIdentify?: ((event: AnalyticsIdentifyEvent) => any) | undefined;
+onAnalyticsPage?: ((event: AnalyticsPageEvent) => any) | undefined;
+onAnalyticsTrack?: ((event: AnalyticsTrackEvent) => any) | undefined;
 }>, {}, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>;
 
 declare const __VLS_component_2: DefineComponent<WebPlayerCustomMediaProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<WebPlayerCustomMediaProps> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>;
@@ -85,6 +91,107 @@ declare type __VLS_WithTemplateSlots_3<T, S> = T & {
     };
 };
 
+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 = {
@@ -127,7 +234,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.
  */
@@ -142,6 +249,7 @@ declare type Hotspot = {
     title: string;
     icon?: string;
     description?: string;
+    type?: "damage" | "feature";
     position: {
         x: number;
         y: number;
@@ -214,6 +322,9 @@ export declare type WebPlayerEvents = {
     hotspotsOff: [];
     galleryOpen: [];
     galleryClose: [];
+    analyticsIdentify: [event: AnalyticsIdentifyEvent];
+    analyticsPage: [event: AnalyticsPageEvent];
+    analyticsTrack: [event: AnalyticsTrackEvent];
 };
 
 export declare const WebPlayerIcon: __VLS_WithTemplateSlots_3<typeof __VLS_component_3, __VLS_TemplateResult_3["slots"]>;
@@ -231,8 +342,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
@@ -275,6 +388,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,8 +1,8 @@
-import { defineComponent as l, onMounted as M, onUnmounted as h, createElementBlock as E, openBlock as _, mergeProps as g, unref as r, renderSlot as m, normalizeProps as d, guardReactiveProps as O } from "vue";
-import { D as A, E as I, a as v, b as W, c as B, d as S, e as x, f as D, g as R, h as V, i as w } from "./utils-TWVtfImY.js";
-import { j as K, k as Q, W as Z, l as ee } from "./utils-TWVtfImY.js";
-import { ensureCustomElementsDefinition as G, webPlayerPropsToAttributes as F, webPlayerCustomMediaPropsToAttributes as $, webPlayerIconPropsToAttributes as U } from "@car-cutter/wc-webplayer";
-const X = /* @__PURE__ */ l({
+import { defineComponent as d, onMounted as g, onUnmounted as h, createElementBlock as y, openBlock as T, mergeProps as S, unref as r, renderSlot as u, normalizeProps as O, guardReactiveProps as f } from "vue";
+import { D as B, a as x, E as D, b as R, c as V, d as W, e as w, f as F, g as Y, h as G, i as $, j as U, A as k, k as X, l as j } from "./utils-BfR5YfQn.js";
+import { m as se, n as re, W as ie, o as ce } from "./utils-BfR5YfQn.js";
+import { ensureCustomElementsDefinition as H, webPlayerPropsToAttributes as q, webPlayerCustomMediaPropsToAttributes as z, webPlayerIconPropsToAttributes as K } from "@car-cutter/wc-webplayer";
+const ee = /* @__PURE__ */ d({
   __name: "WebPlayer",
   props: {
     compositionUrl: {},
@@ -22,85 +22,107 @@ const X = /* @__PURE__ */ l({
     eventPrefix: {},
     demoSpin: { type: Boolean },
     reverse360: { type: Boolean },
+    analyticsEventPrefix: {},
+    analyticsUrl: {},
+    analyticsBearer: {},
+    analyticsSimpleRequestsOnly: { type: Boolean },
+    analyticsDryRun: { type: Boolean },
+    analyticsDebug: { type: Boolean },
     class: {},
     style: {}
   },
-  emits: ["compositionLoading", "compositionLoaded", "compositionLoadError", "itemChange", "extendModeOn", "extendModeOff", "hotspotsOn", "hotspotsOff", "galleryOpen", "galleryClose"],
+  emits: ["compositionLoading", "compositionLoaded", "compositionLoadError", "itemChange", "extendModeOn", "extendModeOff", "hotspotsOn", "hotspotsOff", "galleryOpen", "galleryClose", "analyticsIdentify", "analyticsPage", "analyticsTrack"],
   setup(n, { emit: i }) {
-    G();
-    const s = n, { class: a, style: p, ...u } = s, y = { display: "block", ...p ?? {} }, f = F(u), o = i, P = s.eventPrefix ?? A, T = (e) => `${P}${e}`, L = {
-      [w]: (e) => o("compositionLoading", e),
-      [V]: (e) => o("compositionLoaded", e),
-      [R]: (e) => o("compositionLoadError", e),
-      [D]: (e) => o("itemChange", e),
-      [x]: () => o("extendModeOn"),
-      [S]: () => o("extendModeOff"),
-      [B]: () => o("hotspotsOn"),
-      [W]: () => o("hotspotsOff"),
-      [v]: () => o("galleryOpen"),
-      [I]: () => o("galleryClose")
-    }, c = /* @__PURE__ */ new Map();
-    return Object.entries(L).forEach(([e, t]) => {
+    H();
+    const a = n, { class: s, style: c, ...N } = a, P = { display: "block", ...c ?? {} }, L = q(N), o = i, A = a.eventPrefix ?? B, C = a.analyticsEventPrefix ?? x, b = (e) => `${A}${e}`, v = (e) => `${C}${e}`, I = {
+      [U]: (e) => o("compositionLoading", e),
+      [$]: (e) => o("compositionLoaded", e),
+      [G]: (e) => o("compositionLoadError", e),
+      [Y]: (e) => o("itemChange", e),
+      [F]: () => o("extendModeOn"),
+      [w]: () => o("extendModeOff"),
+      [W]: () => o("hotspotsOn"),
+      [V]: () => o("hotspotsOff"),
+      [R]: () => o("galleryOpen"),
+      [D]: () => o("galleryClose")
+    }, M = {
+      [j]: (e) => o("analyticsIdentify", e),
+      [X]: (e) => o("analyticsPage", e),
+      [k]: (e) => o("analyticsTrack", e)
+    }, l = /* @__PURE__ */ new Map(), E = /* @__PURE__ */ new Map();
+    return Object.entries(I).forEach(([e, t]) => {
       if (!t)
         return;
-      const N = T(e), b = (C) => t(C.detail);
-      c.set(N, b);
-    }), M(() => {
-      c.forEach((e, t) => {
+      const p = b(e), _ = (m) => t(m.detail);
+      l.set(p, _);
+    }), Object.entries(M).forEach(([e, t]) => {
+      if (!t)
+        return;
+      const p = v(e), _ = (m) => t(m.detail);
+      E.set(p, _);
+    }), g(() => {
+      l.forEach((e, t) => {
+        document.addEventListener(t, e);
+      }), E.forEach((e, t) => {
         document.addEventListener(t, e);
       });
     }), h(() => {
-      c.forEach((e, t) => {
+      l.forEach((e, t) => {
+        document.removeEventListener(t, e);
+      }), E.forEach((e, t) => {
         document.removeEventListener(t, e);
       });
-    }), (e, t) => (_(), E("cc-webplayer", g(r(f), {
-      class: r(a),
-      style: y
+    }), (e, t) => (T(), y("cc-webplayer", S(r(L), {
+      class: r(s),
+      style: P
     }), [
-      m(e.$slots, "default")
+      u(e.$slots, "default")
     ], 16));
   }
-}), j = /* @__PURE__ */ l({
+}), te = /* @__PURE__ */ d({
   __name: "WebPlayerCustomMedia",
   props: {
     index: {},
     thumbnailSrc: {}
   },
   setup(n) {
-    const s = $(n);
-    return (a, p) => (_(), E("cc-webplayer-custom-media", d(O(r(s))), [
-      m(a.$slots, "default")
+    const a = z(n);
+    return (s, c) => (T(), y("cc-webplayer-custom-media", O(f(r(a))), [
+      u(s.$slots, "default")
     ], 16));
   }
-}), z = /* @__PURE__ */ l({
+}), oe = /* @__PURE__ */ d({
   __name: "WebPlayerIcon",
   props: {
     name: {}
   },
   setup(n) {
-    const s = U(n);
-    return (a, p) => (_(), E("cc-webplayer-icon", d(O(r(s))), [
-      m(a.$slots, "default")
+    const a = K(n);
+    return (s, c) => (T(), y("cc-webplayer-icon", O(f(r(a))), [
+      u(s.$slots, "default")
     ], 16));
   }
 });
 export {
-  A as DEFAULT_EVENT_PREFIX,
-  V as EVENT_COMPOSITION_LOADED,
-  w as EVENT_COMPOSITION_LOADING,
-  R as EVENT_COMPOSITION_LOAD_ERROR,
-  S as EVENT_EXTEND_MODE_OFF,
-  x as EVENT_EXTEND_MODE_ON,
-  I as EVENT_GALLERY_CLOSE,
-  v as EVENT_GALLERY_OPEN,
-  W as EVENT_HOTSPOTS_OFF,
-  B as EVENT_HOTSPOTS_ON,
-  D as EVENT_ITEM_CHANGE,
-  K as WEB_PLAYER_CUSTOM_MEDIA_WC_TAG,
-  Q as WEB_PLAYER_ICON_WC_TAG,
-  Z as WEB_PLAYER_WC_TAG,
-  X as WebPlayer,
-  j as WebPlayerCustomMedia,
-  z as WebPlayerIcon,
-  ee as generateCompositionUrl
+  j as ANALYTICS_EVENT_IDENTIFY,
+  X as ANALYTICS_EVENT_PAGE,
+  k as ANALYTICS_EVENT_TRACK,
+  B as DEFAULT_EVENT_PREFIX,
+  $ as EVENT_COMPOSITION_LOADED,
+  U as EVENT_COMPOSITION_LOADING,
+  G as EVENT_COMPOSITION_LOAD_ERROR,
+  w as EVENT_EXTEND_MODE_OFF,
+  F as EVENT_EXTEND_MODE_ON,
+  D as EVENT_GALLERY_CLOSE,
+  R as EVENT_GALLERY_OPEN,
+  V as EVENT_HOTSPOTS_OFF,
+  W as EVENT_HOTSPOTS_ON,
+  Y as EVENT_ITEM_CHANGE,
+  se as WEB_PLAYER_CUSTOM_MEDIA_WC_TAG,
+  re as WEB_PLAYER_ICON_WC_TAG,
+  ie as WEB_PLAYER_WC_TAG,
+  ee as WebPlayer,
+  te as WebPlayerCustomMedia,
+  oe as WebPlayerIcon,
+  ce as generateCompositionUrl
 };

package/dist/utils-BfR5YfQn.js

@@ -0,0 +1,25 @@
+const s = "cc-webplayer", c = "cc-webplayer-custom-media", _ = "cc-webplayer-icon", t = "composition-loading", a = "composition-loaded", n = "composition-load-error", T = "item-change", e = "extend-mode-on", N = "extend-mode-off", O = "hotspots-on", A = "hotspots-off", i = "gallery-open", l = "gallery-close", r = "analytics-identify", I = "analytics-page", L = "analytics-track", C = "cc-webplayer:", p = "cc-analytics:";
+function V(E, o) {
+  return `https://cdn.car-cutter.com/gallery/${E}/${o}/composition_v3.json`;
+}
+export {
+  L as A,
+  C as D,
+  l as E,
+  s as W,
+  p as a,
+  i as b,
+  A as c,
+  O as d,
+  N as e,
+  e as f,
+  T as g,
+  n as h,
+  a as i,
+  t as j,
+  I as k,
+  r as l,
+  c as m,
+  _ as n,
+  V as o
+};

package/dist/utils-Bfc4MSUL.cjs

@@ -0,0 +1 @@
+"use strict";const T="cc-webplayer",N="cc-webplayer-custom-media",o="cc-webplayer-icon",O="composition-loading",A="composition-loaded",t="composition-load-error",c="item-change",n="extend-mode-on",s="extend-mode-off",I="hotspots-on",e="hotspots-off",L="gallery-open",C="gallery-close",V="analytics-identify",S="analytics-page",a="analytics-track",i="cc-webplayer:",D="cc-analytics:";function P(E,_){return`https://cdn.car-cutter.com/gallery/${E}/${_}/composition_v3.json`}exports.ANALYTICS_EVENT_IDENTIFY=V;exports.ANALYTICS_EVENT_PAGE=S;exports.ANALYTICS_EVENT_TRACK=a;exports.DEFAULT_ANALYTICS_EVENT_PREFIX=D;exports.DEFAULT_EVENT_PREFIX=i;exports.EVENT_COMPOSITION_LOADED=A;exports.EVENT_COMPOSITION_LOADING=O;exports.EVENT_COMPOSITION_LOAD_ERROR=t;exports.EVENT_EXTEND_MODE_OFF=s;exports.EVENT_EXTEND_MODE_ON=n;exports.EVENT_GALLERY_CLOSE=C;exports.EVENT_GALLERY_OPEN=L;exports.EVENT_HOTSPOTS_OFF=e;exports.EVENT_HOTSPOTS_ON=I;exports.EVENT_ITEM_CHANGE=c;exports.WEB_PLAYER_CUSTOM_MEDIA_WC_TAG=N;exports.WEB_PLAYER_ICON_WC_TAG=o;exports.WEB_PLAYER_WC_TAG=T;exports.generateCompositionUrl=P;

package/dist/vue2.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("vue"),e=require("./utils-CbTbWQZC.cjs"),_=require("@car-cutter/wc-webplayer");_.ensureCustomElementsDefinition();const O=t.defineComponent({props:{compositionUrl:{type:String,required:!0},hideCategoriesNav:Boolean,infiniteCarrousel:Boolean,permanentGallery:Boolean,mediaLoadStrategy:String,minMediaWidth:Number,maxMediaWidth:Number,preloadRange:Number,autoLoad360:Boolean,autoLoadInterior360:Boolean,categoriesFilter:String,extendBehavior:String,eventPrefix:String,demoSpin:Boolean,reverse360:Boolean},data(){return{eventCbMap:new Map}},computed:{attributes(){return _.webPlayerPropsToAttributes(this.$props)}},methods:{generateEventName(r){return`${this.eventPrefix||e.DEFAULT_EVENT_PREFIX}${r}`},setupEventListeners(){const r={[e.EVENT_COMPOSITION_LOADING]:o=>this.$emit("compositionLoading",o),[e.EVENT_COMPOSITION_LOADED]:o=>this.$emit("compositionLoaded",o),[e.EVENT_COMPOSITION_LOAD_ERROR]:o=>this.$emit("compositionLoadError",o),[e.EVENT_ITEM_CHANGE]:o=>this.$emit("itemChange",o),[e.EVENT_EXTEND_MODE_ON]:()=>this.$emit("extendModeOn"),[e.EVENT_EXTEND_MODE_OFF]:()=>this.$emit("extendModeOff"),[e.EVENT_HOTSPOTS_ON]:()=>this.$emit("hotspotsOn"),[e.EVENT_HOTSPOTS_OFF]:()=>this.$emit("hotspotsOff"),[e.EVENT_GALLERY_OPEN]:()=>this.$emit("galleryOpen"),[e.EVENT_GALLERY_CLOSE]:()=>this.$emit("galleryClose")};Object.entries(r).forEach(([o,n])=>{if(!n)return;const E=this.generateEventName(o),i=s=>n(s.detail);this.eventCbMap.set(E,i),document.addEventListener(E,i)})}},mounted(){this.setupEventListeners()},beforeDestroy(){this.eventCbMap.forEach((r,o)=>{document.removeEventListener(o,r)})}}),a=(r,o)=>{const n=r.__vccOpts||r;for(const[E,i]of o)n[E]=i;return n};function T(r,o,n,E,i,s){return t.openBlock(),t.createElementBlock("cc-webplayer",t.normalizeProps(t.guardReactiveProps(r.attributes)),[t.renderSlot(r.$slots,"default")],16)}const N=a(O,[["render",T]]),p=t.defineComponent({props:{index:{type:Number,required:!0},thumbnailSrc:String},computed:{attributes(){return _.webPlayerCustomMediaPropsToAttributes(this.$props)}}});function c(r,o,n,E,i,s){return t.openBlock(),t.createElementBlock("cc-webplayer-custom-media",t.normalizeProps(t.guardReactiveProps(r.attributes)),[t.renderSlot(r.$slots,"default")],16)}const u=a(p,[["render",c]]),d=t.defineComponent({props:{name:{type:String,required:!0}},computed:{attributes(){return _.webPlayerIconPropsToAttributes(this.$props)}}});function l(r,o,n,E,i,s){return t.openBlock(),t.createElementBlock("cc-webplayer-icon",t.normalizeProps(t.guardReactiveProps(r.attributes)),[t.renderSlot(r.$slots,"default")],16)}const m=a(d,[["render",l]]);exports.DEFAULT_EVENT_PREFIX=e.DEFAULT_EVENT_PREFIX;exports.EVENT_COMPOSITION_LOADED=e.EVENT_COMPOSITION_LOADED;exports.EVENT_COMPOSITION_LOADING=e.EVENT_COMPOSITION_LOADING;exports.EVENT_COMPOSITION_LOAD_ERROR=e.EVENT_COMPOSITION_LOAD_ERROR;exports.EVENT_EXTEND_MODE_OFF=e.EVENT_EXTEND_MODE_OFF;exports.EVENT_EXTEND_MODE_ON=e.EVENT_EXTEND_MODE_ON;exports.EVENT_GALLERY_CLOSE=e.EVENT_GALLERY_CLOSE;exports.EVENT_GALLERY_OPEN=e.EVENT_GALLERY_OPEN;exports.EVENT_HOTSPOTS_OFF=e.EVENT_HOTSPOTS_OFF;exports.EVENT_HOTSPOTS_ON=e.EVENT_HOTSPOTS_ON;exports.EVENT_ITEM_CHANGE=e.EVENT_ITEM_CHANGE;exports.WEB_PLAYER_CUSTOM_MEDIA_WC_TAG=e.WEB_PLAYER_CUSTOM_MEDIA_WC_TAG;exports.WEB_PLAYER_ICON_WC_TAG=e.WEB_PLAYER_ICON_WC_TAG;exports.WEB_PLAYER_WC_TAG=e.WEB_PLAYER_WC_TAG;exports.generateCompositionUrl=e.generateCompositionUrl;exports.WebPlayer=N;exports.WebPlayerCustomMedia=u;exports.WebPlayerIcon=m;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("vue"),e=require("./utils-Bfc4MSUL.cjs"),a=require("@car-cutter/wc-webplayer");a.ensureCustomElementsDefinition();const T=r.defineComponent({props:{compositionUrl:{type:String,required:!0},hideCategoriesNav:Boolean,infiniteCarrousel:Boolean,permanentGallery:Boolean,mediaLoadStrategy:String,minMediaWidth:Number,maxMediaWidth:Number,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},data(){return{eventCbMap:new Map,analyticsEventCbMap:new Map}},computed:{attributes(){return a.webPlayerPropsToAttributes(this.$props)}},methods:{generateEventName(n){return`${this.eventPrefix||e.DEFAULT_EVENT_PREFIX}${n}`},setupEventListeners(){const n={[e.EVENT_COMPOSITION_LOADING]:t=>this.$emit("compositionLoading",t),[e.EVENT_COMPOSITION_LOADED]:t=>this.$emit("compositionLoaded",t),[e.EVENT_COMPOSITION_LOAD_ERROR]:t=>this.$emit("compositionLoadError",t),[e.EVENT_ITEM_CHANGE]:t=>this.$emit("itemChange",t),[e.EVENT_EXTEND_MODE_ON]:()=>this.$emit("extendModeOn"),[e.EVENT_EXTEND_MODE_OFF]:()=>this.$emit("extendModeOff"),[e.EVENT_HOTSPOTS_ON]:()=>this.$emit("hotspotsOn"),[e.EVENT_HOTSPOTS_OFF]:()=>this.$emit("hotspotsOff"),[e.EVENT_GALLERY_OPEN]:()=>this.$emit("galleryOpen"),[e.EVENT_GALLERY_CLOSE]:()=>this.$emit("galleryClose")};Object.entries(n).forEach(([t,E])=>{if(!E)return;const i=this.generateEventName(t),o=s=>E(s.detail);this.eventCbMap.set(i,o),document.addEventListener(i,o)})},generateAnalyticsEventName(n){return`${this.analyticsEventPrefix||e.DEFAULT_ANALYTICS_EVENT_PREFIX}${n}`},setupAnalyticsEventListeners(){const n={[e.ANALYTICS_EVENT_IDENTIFY]:t=>this.$emit("analyticsIdentify",t),[e.ANALYTICS_EVENT_PAGE]:t=>this.$emit("analyticsPage",t),[e.ANALYTICS_EVENT_TRACK]:t=>this.$emit("analyticsTrack",t)};Object.entries(n).forEach(([t,E])=>{if(!E)return;const i=this.generateAnalyticsEventName(t),o=s=>E(s.detail);this.analyticsEventCbMap.set(i,o),document.addEventListener(i,o)})}},mounted(){this.setupEventListeners(),this.setupAnalyticsEventListeners()},beforeDestroy(){this.eventCbMap.forEach((n,t)=>{document.removeEventListener(t,n)}),this.analyticsEventCbMap.forEach((n,t)=>{document.removeEventListener(t,n)})}}),_=(n,t)=>{const E=n.__vccOpts||n;for(const[i,o]of t)E[i]=o;return E};function N(n,t,E,i,o,s){return r.openBlock(),r.createElementBlock("cc-webplayer",r.normalizeProps(r.guardReactiveProps(n.attributes)),[r.renderSlot(n.$slots,"default")],16)}const c=_(T,[["render",N]]),O=r.defineComponent({props:{index:{type:Number,required:!0},thumbnailSrc:String},computed:{attributes(){return a.webPlayerCustomMediaPropsToAttributes(this.$props)}}});function l(n,t,E,i,o,s){return r.openBlock(),r.createElementBlock("cc-webplayer-custom-media",r.normalizeProps(r.guardReactiveProps(n.attributes)),[r.renderSlot(n.$slots,"default")],16)}const p=_(O,[["render",l]]),u=r.defineComponent({props:{name:{type:String,required:!0}},computed:{attributes(){return a.webPlayerIconPropsToAttributes(this.$props)}}});function m(n,t,E,i,o,s){return r.openBlock(),r.createElementBlock("cc-webplayer-icon",r.normalizeProps(r.guardReactiveProps(n.attributes)),[r.renderSlot(n.$slots,"default")],16)}const A=_(u,[["render",m]]);exports.ANALYTICS_EVENT_IDENTIFY=e.ANALYTICS_EVENT_IDENTIFY;exports.ANALYTICS_EVENT_PAGE=e.ANALYTICS_EVENT_PAGE;exports.ANALYTICS_EVENT_TRACK=e.ANALYTICS_EVENT_TRACK;exports.DEFAULT_EVENT_PREFIX=e.DEFAULT_EVENT_PREFIX;exports.EVENT_COMPOSITION_LOADED=e.EVENT_COMPOSITION_LOADED;exports.EVENT_COMPOSITION_LOADING=e.EVENT_COMPOSITION_LOADING;exports.EVENT_COMPOSITION_LOAD_ERROR=e.EVENT_COMPOSITION_LOAD_ERROR;exports.EVENT_EXTEND_MODE_OFF=e.EVENT_EXTEND_MODE_OFF;exports.EVENT_EXTEND_MODE_ON=e.EVENT_EXTEND_MODE_ON;exports.EVENT_GALLERY_CLOSE=e.EVENT_GALLERY_CLOSE;exports.EVENT_GALLERY_OPEN=e.EVENT_GALLERY_OPEN;exports.EVENT_HOTSPOTS_OFF=e.EVENT_HOTSPOTS_OFF;exports.EVENT_HOTSPOTS_ON=e.EVENT_HOTSPOTS_ON;exports.EVENT_ITEM_CHANGE=e.EVENT_ITEM_CHANGE;exports.WEB_PLAYER_CUSTOM_MEDIA_WC_TAG=e.WEB_PLAYER_CUSTOM_MEDIA_WC_TAG;exports.WEB_PLAYER_ICON_WC_TAG=e.WEB_PLAYER_ICON_WC_TAG;exports.WEB_PLAYER_WC_TAG=e.WEB_PLAYER_WC_TAG;exports.generateCompositionUrl=e.generateCompositionUrl;exports.WebPlayer=c;exports.WebPlayerCustomMedia=p;exports.WebPlayerIcon=A;

package/dist/vue2.d.ts

@@ -4,6 +4,12 @@ import { DefineComponent } from 'vue';
 import { ExtractPropTypes } from 'vue';
 import { PublicProps } from 'vue';
 
+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 AspectRatio = `${number}:${number}`;
 
 declare type CamelToDashed<S extends string> = S extends `${infer T}${infer U}`
@@ -50,7 +56,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.
  */
@@ -65,6 +71,7 @@ declare type Hotspot = {
     title: string;
     icon?: string;
     description?: string;
+    type?: "damage" | "feature";
     position: {
         x: number;
         y: number;
@@ -141,13 +148,22 @@ extendBehavior: StringConstructor;
 eventPrefix: StringConstructor;
 demoSpin: BooleanConstructor;
 reverse360: BooleanConstructor;
+analyticsEventPrefix: StringConstructor;
+analyticsUrl: StringConstructor;
+analyticsBearer: StringConstructor;
+analyticsSimpleRequestsOnly: BooleanConstructor;
+analyticsDryRun: BooleanConstructor;
+analyticsDebug: BooleanConstructor;
 }>, {}, {
 eventCbMap: Map<string, EventListener>;
+analyticsEventCbMap: Map<string, EventListener>;
 }, {
 attributes(): PropsToAttributes<WebPlayerProps>;
 }, {
 generateEventName(event: string): string;
 setupEventListeners(): void;
+generateAnalyticsEventName(event: string): string;
+setupAnalyticsEventListeners(): void;
 }, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<ExtractPropTypes<    {
 compositionUrl: {
 type: StringConstructor;
@@ -167,6 +183,12 @@ extendBehavior: StringConstructor;
 eventPrefix: StringConstructor;
 demoSpin: BooleanConstructor;
 reverse360: BooleanConstructor;
+analyticsEventPrefix: StringConstructor;
+analyticsUrl: StringConstructor;
+analyticsBearer: StringConstructor;
+analyticsSimpleRequestsOnly: BooleanConstructor;
+analyticsDryRun: BooleanConstructor;
+analyticsDebug: BooleanConstructor;
 }>> & Readonly<{}>, {
 hideCategoriesNav: boolean;
 infiniteCarrousel: boolean;
@@ -175,6 +197,9 @@ autoLoad360: boolean;
 autoLoadInterior360: boolean;
 demoSpin: boolean;
 reverse360: boolean;
+analyticsSimpleRequestsOnly: boolean;
+analyticsDryRun: boolean;
+analyticsDebug: boolean;
 }, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
 
 export declare const WebPlayerCustomMedia: DefineComponent<ExtractPropTypes<    {
@@ -225,8 +250,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
@@ -264,6 +291,14 @@ export declare type WebPlayerProps = {
     eventPrefix?: string;
     demoSpin?: boolean;
     reverse360?: boolean;
+
+    // Analytics
+    analyticsEventPrefix?: string;
+    analyticsUrl?: string;
+    analyticsBearer?: string;
+    analyticsSimpleRequestsOnly?: boolean;
+    analyticsDryRun?: boolean;
+    analyticsDebug?: boolean;
 };
 
 export { }

package/dist/vue2.js

@@ -1,9 +1,9 @@
-import { defineComponent as i, createElementBlock as a, openBlock as p, normalizeProps as m, guardReactiveProps as E, renderSlot as c } from "vue";
-import { D as d, E as _, a as l, b as f, c as O, d as $, e as h, f as N, g as b, h as T, i as P } from "./utils-TWVtfImY.js";
-import { j as Y, k, W as U, l as q } from "./utils-TWVtfImY.js";
-import { ensureCustomElementsDefinition as L, webPlayerPropsToAttributes as v, webPlayerCustomMediaPropsToAttributes as C, webPlayerIconPropsToAttributes as g } from "@car-cutter/wc-webplayer";
-L();
-const S = i({
+import { defineComponent as i, createElementBlock as o, openBlock as c, normalizeProps as E, guardReactiveProps as p, renderSlot as m } from "vue";
+import { a as u, D as _, A as d, k as h, l as f, E as N, b as T, c as v, d as $, e as y, f as O, g as L, h as b, i as A, j as P } from "./utils-BfR5YfQn.js";
+import { m as X, n as j, W as H, o as z } from "./utils-BfR5YfQn.js";
+import { ensureCustomElementsDefinition as C, webPlayerPropsToAttributes as g, webPlayerCustomMediaPropsToAttributes as S, webPlayerIconPropsToAttributes as M } from "@car-cutter/wc-webplayer";
+C();
+const I = i({
   props: {
     compositionUrl: { type: String, required: !0 },
     hideCategoriesNav: Boolean,
@@ -19,110 +19,139 @@ const S = i({
     extendBehavior: String,
     eventPrefix: String,
     demoSpin: Boolean,
-    reverse360: Boolean
+    reverse360: Boolean,
+    analyticsEventPrefix: String,
+    analyticsUrl: String,
+    analyticsBearer: String,
+    analyticsSimpleRequestsOnly: Boolean,
+    analyticsDryRun: Boolean,
+    analyticsDebug: Boolean
   },
   data() {
     return {
-      eventCbMap: /* @__PURE__ */ new Map()
+      eventCbMap: /* @__PURE__ */ new Map(),
+      analyticsEventCbMap: /* @__PURE__ */ new Map()
     };
   },
   computed: {
     attributes() {
-      return v(this.$props);
+      return g(this.$props);
     }
   },
   methods: {
-    generateEventName(e) {
-      return `${this.eventPrefix || d}${e}`;
+    // Functional events
+    generateEventName(t) {
+      return `${this.eventPrefix || _}${t}`;
     },
     setupEventListeners() {
-      const e = {
-        [P]: (t) => this.$emit("compositionLoading", t),
-        [T]: (t) => this.$emit("compositionLoaded", t),
-        [b]: (t) => this.$emit("compositionLoadError", t),
-        [N]: (t) => this.$emit("itemChange", t),
-        [h]: () => this.$emit("extendModeOn"),
-        [$]: () => this.$emit("extendModeOff"),
-        [O]: () => this.$emit("hotspotsOn"),
-        [f]: () => this.$emit("hotspotsOff"),
-        [l]: () => this.$emit("galleryOpen"),
-        [_]: () => this.$emit("galleryClose")
+      const t = {
+        [P]: (e) => this.$emit("compositionLoading", e),
+        [A]: (e) => this.$emit("compositionLoaded", e),
+        [b]: (e) => this.$emit("compositionLoadError", e),
+        [L]: (e) => this.$emit("itemChange", e),
+        [O]: () => this.$emit("extendModeOn"),
+        [y]: () => this.$emit("extendModeOff"),
+        [$]: () => this.$emit("hotspotsOn"),
+        [v]: () => this.$emit("hotspotsOff"),
+        [T]: () => this.$emit("galleryOpen"),
+        [N]: () => this.$emit("galleryClose")
+      };
+      Object.entries(t).forEach(([e, n]) => {
+        if (!n) return;
+        const r = this.generateEventName(e), s = (a) => n(a.detail);
+        this.eventCbMap.set(r, s), document.addEventListener(r, s);
+      });
+    },
+    // Analytics events
+    generateAnalyticsEventName(t) {
+      return `${this.analyticsEventPrefix || u}${t}`;
+    },
+    setupAnalyticsEventListeners() {
+      const t = {
+        [f]: (e) => this.$emit("analyticsIdentify", e),
+        [h]: (e) => this.$emit("analyticsPage", e),
+        [d]: (e) => this.$emit("analyticsTrack", e)
       };
-      Object.entries(e).forEach(([t, r]) => {
-        if (!r) return;
-        const o = this.generateEventName(t), n = (s) => r(s.detail);
-        this.eventCbMap.set(o, n), document.addEventListener(o, n);
+      Object.entries(t).forEach(([e, n]) => {
+        if (!n) return;
+        const r = this.generateAnalyticsEventName(e), s = (a) => n(a.detail);
+        this.analyticsEventCbMap.set(r, s), document.addEventListener(r, s);
       });
     }
   },
   mounted() {
-    this.setupEventListeners();
+    this.setupEventListeners(), this.setupAnalyticsEventListeners();
   },
   beforeDestroy() {
-    this.eventCbMap.forEach((e, t) => {
-      document.removeEventListener(t, e);
+    this.eventCbMap.forEach((t, e) => {
+      document.removeEventListener(e, t);
+    }), this.analyticsEventCbMap.forEach((t, e) => {
+      document.removeEventListener(e, t);
     });
   }
-}), u = (e, t) => {
-  const r = e.__vccOpts || e;
-  for (const [o, n] of t)
-    r[o] = n;
-  return r;
+}), l = (t, e) => {
+  const n = t.__vccOpts || t;
+  for (const [r, s] of e)
+    n[r] = s;
+  return n;
 };
-function M(e, t, r, o, n, s) {
-  return p(), a("cc-webplayer", m(E(e.attributes)), [
-    c(e.$slots, "default")
+function B(t, e, n, r, s, a) {
+  return c(), o("cc-webplayer", E(p(t.attributes)), [
+    m(t.$slots, "default")
   ], 16);
 }
-const V = /* @__PURE__ */ u(S, [["render", M]]), y = i({
+const G = /* @__PURE__ */ l(I, [["render", B]]), D = i({
   props: {
     index: { type: Number, required: !0 },
     thumbnailSrc: String
   },
   computed: {
     attributes() {
-      return C(this.$props);
+      return S(this.$props);
     }
   }
 });
-function A(e, t, r, o, n, s) {
-  return p(), a("cc-webplayer-custom-media", m(E(e.attributes)), [
-    c(e.$slots, "default")
+function R(t, e, n, r, s, a) {
+  return c(), o("cc-webplayer-custom-media", E(p(t.attributes)), [
+    m(t.$slots, "default")
   ], 16);
 }
-const x = /* @__PURE__ */ u(y, [["render", A]]), I = i({
+const w = /* @__PURE__ */ l(D, [["render", R]]), V = i({
   props: {
     name: { type: String, required: !0 }
   },
   computed: {
     attributes() {
-      return g(this.$props);
+      return M(this.$props);
     }
   }
 });
-function B(e, t, r, o, n, s) {
-  return p(), a("cc-webplayer-icon", m(E(e.attributes)), [
-    c(e.$slots, "default")
+function x(t, e, n, r, s, a) {
+  return c(), o("cc-webplayer-icon", E(p(t.attributes)), [
+    m(t.$slots, "default")
   ], 16);
 }
-const G = /* @__PURE__ */ u(I, [["render", B]]);
+const U = /* @__PURE__ */ l(V, [["render", x]]);
 export {
-  d as DEFAULT_EVENT_PREFIX,
-  T as EVENT_COMPOSITION_LOADED,
+  f as ANALYTICS_EVENT_IDENTIFY,
+  h as ANALYTICS_EVENT_PAGE,
+  d as ANALYTICS_EVENT_TRACK,
+  _ as DEFAULT_EVENT_PREFIX,
+  A as EVENT_COMPOSITION_LOADED,
   P as EVENT_COMPOSITION_LOADING,
   b as EVENT_COMPOSITION_LOAD_ERROR,
-  $ as EVENT_EXTEND_MODE_OFF,
-  h as EVENT_EXTEND_MODE_ON,
-  _ as EVENT_GALLERY_CLOSE,
-  l as EVENT_GALLERY_OPEN,
-  f as EVENT_HOTSPOTS_OFF,
-  O as EVENT_HOTSPOTS_ON,
-  N as EVENT_ITEM_CHANGE,
-  Y as WEB_PLAYER_CUSTOM_MEDIA_WC_TAG,
-  k as WEB_PLAYER_ICON_WC_TAG,
-  U as WEB_PLAYER_WC_TAG,
-  V as WebPlayer,
-  x as WebPlayerCustomMedia,
-  G as WebPlayerIcon,
-  q as generateCompositionUrl
+  y as EVENT_EXTEND_MODE_OFF,
+  O as EVENT_EXTEND_MODE_ON,
+  N as EVENT_GALLERY_CLOSE,
+  T as EVENT_GALLERY_OPEN,
+  v as EVENT_HOTSPOTS_OFF,
+  $ as EVENT_HOTSPOTS_ON,
+  L as EVENT_ITEM_CHANGE,
+  X as WEB_PLAYER_CUSTOM_MEDIA_WC_TAG,
+  j as WEB_PLAYER_ICON_WC_TAG,
+  H as WEB_PLAYER_WC_TAG,
+  G as WebPlayer,
+  w as WebPlayerCustomMedia,
+  U as WebPlayerIcon,
+  z as generateCompositionUrl
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@car-cutter/vue-webplayer",
-  "version": "3.0.0",
+  "version": "3.0.2",
   "license": "Apache-2.0",
   "author": {
     "name": "CarCutter",
@@ -41,7 +41,7 @@
     "analyze": "vite-bundle-visualizer"
   },
   "dependencies": {
-    "@car-cutter/wc-webplayer": "3.0.0"
+    "@car-cutter/wc-webplayer": "3.0.2"
   },
   "peerDependencies": {
     "vue": ">=2"

package/dist/utils-CbTbWQZC.cjs

@@ -1 +0,0 @@
-"use strict";const O="cc-webplayer",o="cc-webplayer-custom-media",T="cc-webplayer-icon",N="composition-loading",t="composition-loaded",c="composition-load-error",n="item-change",e="extend-mode-on",s="extend-mode-off",A="hotspots-on",L="hotspots-off",C="gallery-open",I="gallery-close",V="cc-webplayer:";function D(E,_){return`https://cdn.car-cutter.com/gallery/${E}/${_}/composition_v3.json`}exports.DEFAULT_EVENT_PREFIX=V;exports.EVENT_COMPOSITION_LOADED=t;exports.EVENT_COMPOSITION_LOADING=N;exports.EVENT_COMPOSITION_LOAD_ERROR=c;exports.EVENT_EXTEND_MODE_OFF=s;exports.EVENT_EXTEND_MODE_ON=e;exports.EVENT_GALLERY_CLOSE=I;exports.EVENT_GALLERY_OPEN=C;exports.EVENT_HOTSPOTS_OFF=L;exports.EVENT_HOTSPOTS_ON=A;exports.EVENT_ITEM_CHANGE=n;exports.WEB_PLAYER_CUSTOM_MEDIA_WC_TAG=o;exports.WEB_PLAYER_ICON_WC_TAG=T;exports.WEB_PLAYER_WC_TAG=O;exports.generateCompositionUrl=D;

package/dist/utils-TWVtfImY.js

@@ -1,21 +0,0 @@
-const s = "cc-webplayer", _ = "cc-webplayer-custom-media", c = "cc-webplayer-icon", t = "composition-loading", n = "composition-loaded", e = "composition-load-error", a = "item-change", O = "extend-mode-on", T = "extend-mode-off", N = "hotspots-on", r = "hotspots-off", i = "gallery-open", l = "gallery-close", p = "cc-webplayer:";
-function A(o, E) {
-  return `https://cdn.car-cutter.com/gallery/${o}/${E}/composition_v3.json`;
-}
-export {
-  p as D,
-  l as E,
-  s as W,
-  i as a,
-  r as b,
-  N as c,
-  T as d,
-  O as e,
-  a as f,
-  e as g,
-  n as h,
-  t as i,
-  _ as j,
-  c as k,
-  A as l
-};