@car-cutter/vanilla-webplayer 3.0.0 → 3.0.2

package/dist/index.d.ts

@@ -1,3 +1,9 @@
+export declare const ANALYTICS_EVENT_IDENTIFY = "analytics-identify";
+
+export declare const ANALYTICS_EVENT_PAGE = "analytics-page";
+
+export declare const ANALYTICS_EVENT_TRACK = "analytics-track";
+
 export declare function appendWebPlayer(parentElement: HTMLElement, webPlayerProps: WebPlayerProps, customization?: {
     customMedias?: (WebPlayerCustomMediaProps & {
         element: HTMLElement;
@@ -49,7 +55,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.
  */
@@ -64,6 +70,7 @@ declare type Hotspot = {
     title: string;
     icon?: string;
     description?: string;
+    type?: "damage" | "feature";
     position: {
         x: number;
         y: number;
@@ -131,8 +138,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
@@ -170,6 +179,14 @@ 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/index.js

@@ -1,45 +1,48 @@
-import { ensureCustomElementsDefinition as T, WEB_PLAYER_WC_TAG as A, webPlayerPropsToAttributes as l, WEB_PLAYER_CUSTOM_MEDIA_WC_TAG as p, webPlayerCustomMediaPropsToAttributes as O, WEB_PLAYER_ICON_WC_TAG as m, webPlayerIconPropsToAttributes as d } from "@car-cutter/wc-webplayer";
-function P(_, s, i) {
-  const c = (t, e) => {
-    Object.entries(e).forEach(
-      ([o, n]) => t.setAttribute(o, n)
+import { ensureCustomElementsDefinition as i, WEB_PLAYER_WC_TAG as A, webPlayerPropsToAttributes as l, WEB_PLAYER_CUSTOM_MEDIA_WC_TAG as p, webPlayerCustomMediaPropsToAttributes as C, WEB_PLAYER_ICON_WC_TAG as O, webPlayerIconPropsToAttributes as N } from "@car-cutter/wc-webplayer";
+function m(_, c, a) {
+  const s = (e, t) => {
+    Object.entries(t).forEach(
+      ([o, E]) => e.setAttribute(o, E)
     );
   };
-  T();
-  const E = document.createElement(A), a = l(s);
-  c(E, a), i?.customMedias?.forEach((t) => {
-    const e = document.createElement(
+  i();
+  const n = document.createElement(A), T = l(c);
+  s(n, T), a?.customMedias?.forEach((e) => {
+    const t = document.createElement(
       p
-    ), { element: o, ...n } = t;
-    e.appendChild(o);
-    const r = O(n);
-    c(e, r), E.appendChild(e);
-  }), i?.icons?.forEach((t) => {
-    const e = document.createElement(m), { element: o, ...n } = t;
-    e.appendChild(o);
-    const r = d(n);
-    c(e, r), E.appendChild(e);
-  }), _.appendChild(E);
+    ), { element: o, ...E } = e;
+    t.appendChild(o);
+    const r = C(E);
+    s(t, r), n.appendChild(t);
+  }), a?.icons?.forEach((e) => {
+    const t = document.createElement(O), { element: o, ...E } = e;
+    t.appendChild(o);
+    const r = N(E);
+    s(t, r), n.appendChild(t);
+  }), _.appendChild(n);
 }
-const N = "cc-webplayer", u = "cc-webplayer-custom-media", b = "cc-webplayer-icon", W = "composition-loading", L = "composition-loaded", I = "composition-load-error", M = "item-change", R = "extend-mode-on", y = "extend-mode-off", D = "hotspots-on", G = "hotspots-off", h = "gallery-open", f = "gallery-close", S = "cc-webplayer:";
-function V(_, s) {
-  return `https://cdn.car-cutter.com/gallery/${_}/${s}/composition_v3.json`;
+const P = "cc-webplayer", I = "cc-webplayer-custom-media", L = "cc-webplayer-icon", u = "composition-loading", b = "composition-loaded", W = "composition-load-error", y = "item-change", R = "extend-mode-on", M = "extend-mode-off", Y = "hotspots-on", D = "hotspots-off", G = "gallery-open", S = "gallery-close", V = "analytics-identify", f = "analytics-page", h = "analytics-track", w = "cc-webplayer:";
+function B(_, c) {
+  return `https://cdn.car-cutter.com/gallery/${_}/${c}/composition_v3.json`;
 }
 export {
-  S as DEFAULT_EVENT_PREFIX,
-  L as EVENT_COMPOSITION_LOADED,
-  W as EVENT_COMPOSITION_LOADING,
-  I as EVENT_COMPOSITION_LOAD_ERROR,
-  y as EVENT_EXTEND_MODE_OFF,
+  V as ANALYTICS_EVENT_IDENTIFY,
+  f as ANALYTICS_EVENT_PAGE,
+  h as ANALYTICS_EVENT_TRACK,
+  w as DEFAULT_EVENT_PREFIX,
+  b as EVENT_COMPOSITION_LOADED,
+  u as EVENT_COMPOSITION_LOADING,
+  W as EVENT_COMPOSITION_LOAD_ERROR,
+  M as EVENT_EXTEND_MODE_OFF,
   R as EVENT_EXTEND_MODE_ON,
-  f as EVENT_GALLERY_CLOSE,
-  h as EVENT_GALLERY_OPEN,
-  G as EVENT_HOTSPOTS_OFF,
-  D as EVENT_HOTSPOTS_ON,
-  M as EVENT_ITEM_CHANGE,
-  u as WEB_PLAYER_CUSTOM_MEDIA_WC_TAG,
-  b as WEB_PLAYER_ICON_WC_TAG,
-  N as WEB_PLAYER_WC_TAG,
-  P as appendWebPlayer,
-  V as generateCompositionUrl
+  S as EVENT_GALLERY_CLOSE,
+  G as EVENT_GALLERY_OPEN,
+  D as EVENT_HOTSPOTS_OFF,
+  Y as EVENT_HOTSPOTS_ON,
+  y as EVENT_ITEM_CHANGE,
+  I as WEB_PLAYER_CUSTOM_MEDIA_WC_TAG,
+  L as WEB_PLAYER_ICON_WC_TAG,
+  P as WEB_PLAYER_WC_TAG,
+  m as appendWebPlayer,
+  B as generateCompositionUrl
 };

package/dist/index.umd.cjs

@@ -1 +1 @@
-(function(e,E){typeof exports=="object"&&typeof module<"u"?E(exports,require("@car-cutter/wc-webplayer")):typeof define=="function"&&define.amd?define(["exports","@car-cutter/wc-webplayer"],E):(e=typeof globalThis<"u"?globalThis:e||self,E(e.CarCutterWebplayerVanilla={},e.CarCutterWebplayerWC))})(this,function(e,E){"use strict";function r(T,O,N){const i=(n,t)=>{Object.entries(t).forEach(([_,o])=>n.setAttribute(_,o))};E.ensureCustomElementsDefinition();const c=document.createElement(E.WEB_PLAYER_WC_TAG),R=E.webPlayerPropsToAttributes(O);i(c,R),N?.customMedias?.forEach(n=>{const t=document.createElement(E.WEB_PLAYER_CUSTOM_MEDIA_WC_TAG),{element:_,...o}=n;t.appendChild(_);const s=E.webPlayerCustomMediaPropsToAttributes(o);i(t,s),c.appendChild(t)}),N?.icons?.forEach(n=>{const t=document.createElement(E.WEB_PLAYER_ICON_WC_TAG),{element:_,...o}=n;t.appendChild(_);const s=E.webPlayerIconPropsToAttributes(o);i(t,s),c.appendChild(t)}),T.appendChild(c)}const A="cc-webplayer",a="cc-webplayer-custom-media",d="cc-webplayer-icon",l="composition-loading",C="composition-loaded",u="composition-load-error",P="item-change",m="extend-mode-on",L="extend-mode-off",p="hotspots-on",I="hotspots-off",V="gallery-open",f="gallery-close",D="cc-webplayer:";function M(T,O){return`https://cdn.car-cutter.com/gallery/${T}/${O}/composition_v3.json`}e.DEFAULT_EVENT_PREFIX=D,e.EVENT_COMPOSITION_LOADED=C,e.EVENT_COMPOSITION_LOADING=l,e.EVENT_COMPOSITION_LOAD_ERROR=u,e.EVENT_EXTEND_MODE_OFF=L,e.EVENT_EXTEND_MODE_ON=m,e.EVENT_GALLERY_CLOSE=f,e.EVENT_GALLERY_OPEN=V,e.EVENT_HOTSPOTS_OFF=I,e.EVENT_HOTSPOTS_ON=p,e.EVENT_ITEM_CHANGE=P,e.WEB_PLAYER_CUSTOM_MEDIA_WC_TAG=a,e.WEB_PLAYER_ICON_WC_TAG=d,e.WEB_PLAYER_WC_TAG=A,e.appendWebPlayer=r,e.generateCompositionUrl=M,Object.defineProperty(e,Symbol.toStringTag,{value:"Module"})});
+(function(E,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("@car-cutter/wc-webplayer")):typeof define=="function"&&define.amd?define(["exports","@car-cutter/wc-webplayer"],e):(E=typeof globalThis<"u"?globalThis:E||self,e(E.CarCutterWebplayerVanilla={},E.CarCutterWebplayerWC))})(this,function(E,e){"use strict";function s(c,i,O){const A=(_,t)=>{Object.entries(t).forEach(([n,o])=>_.setAttribute(n,o))};e.ensureCustomElementsDefinition();const T=document.createElement(e.WEB_PLAYER_WC_TAG),b=e.webPlayerPropsToAttributes(i);A(T,b),O?.customMedias?.forEach(_=>{const t=document.createElement(e.WEB_PLAYER_CUSTOM_MEDIA_WC_TAG),{element:n,...o}=_;t.appendChild(n);const N=e.webPlayerCustomMediaPropsToAttributes(o);A(t,N),T.appendChild(t)}),O?.icons?.forEach(_=>{const t=document.createElement(e.WEB_PLAYER_ICON_WC_TAG),{element:n,...o}=_;t.appendChild(n);const N=e.webPlayerIconPropsToAttributes(o);A(t,N),T.appendChild(t)}),c.appendChild(T)}const a="cc-webplayer",C="cc-webplayer-custom-media",l="cc-webplayer-icon",d="composition-loading",r="composition-loaded",P="composition-load-error",I="item-change",u="extend-mode-on",L="extend-mode-off",m="hotspots-on",V="hotspots-off",S="gallery-open",D="gallery-close",f="analytics-identify",p="analytics-page",R="analytics-track",M="cc-webplayer:";function Y(c,i){return`https://cdn.car-cutter.com/gallery/${c}/${i}/composition_v3.json`}E.ANALYTICS_EVENT_IDENTIFY=f,E.ANALYTICS_EVENT_PAGE=p,E.ANALYTICS_EVENT_TRACK=R,E.DEFAULT_EVENT_PREFIX=M,E.EVENT_COMPOSITION_LOADED=r,E.EVENT_COMPOSITION_LOADING=d,E.EVENT_COMPOSITION_LOAD_ERROR=P,E.EVENT_EXTEND_MODE_OFF=L,E.EVENT_EXTEND_MODE_ON=u,E.EVENT_GALLERY_CLOSE=D,E.EVENT_GALLERY_OPEN=S,E.EVENT_HOTSPOTS_OFF=V,E.EVENT_HOTSPOTS_ON=m,E.EVENT_ITEM_CHANGE=I,E.WEB_PLAYER_CUSTOM_MEDIA_WC_TAG=C,E.WEB_PLAYER_ICON_WC_TAG=l,E.WEB_PLAYER_WC_TAG=a,E.appendWebPlayer=s,E.generateCompositionUrl=Y,Object.defineProperty(E,Symbol.toStringTag,{value:"Module"})});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@car-cutter/vanilla-webplayer",
-  "version": "3.0.0",
+  "version": "3.0.2",
   "license": "Apache-2.0",
   "author": {
     "name": "CarCutter",
@@ -31,7 +31,7 @@
     "analyze": "vite-bundle-visualizer"
   },
   "dependencies": {
-    "@car-cutter/wc-webplayer": "3.0.0"
+    "@car-cutter/wc-webplayer": "3.0.2"
   },
   "devDependencies": {
     "@car-cutter/eslint-config": "*",