@car-cutter/react-webplayer 0.10.0 → 0.12.0

package/dist/index.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("./shared-QPXPDOqW.cjs");require("react/jsx-runtime");const g=require("react"),W=require("react-dom/client");var S=Object.defineProperty,L=(e,t,o)=>t in e?S(e,t,{enumerable:!0,configurable:!0,writable:!0,value:o}):e[t]=o,T=(e,t,o)=>(L(e,typeof t!="symbol"?t+"":t,o),o);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,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)},N={string:I,number:V,boolean:M,function:R,json:D};function w(e){return e.replace(/([a-z0-9])([A-Z])/g,(t,o,i)=>`${o}-${i.toLowerCase()}`)}const b=Symbol.for("r2wc.render"),m=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 f=Array.isArray(t.props)?t.props.slice():Object.keys(t.props),p={},h={},d={};for(const s of f){p[s]=Array.isArray(t.props)?"string":t.props[s];const r=w(s);h[s]=r,d[r]=s}class P extends HTMLElement{constructor(){super(),T(this,i,!0),T(this,O),T(this,A,{}),T(this,"container"),t.shadow?this.container=this.attachShadow({mode:t.shadow}):this.container=this,this[l].container=this.container;for(const r of f){const _=h[r],c=this.getAttribute(_),a=p[r],E=a?N[a]:null;E!=null&&E.parse&&c&&(this[l][r]=E.parse(c,_,this))}}static get observedAttributes(){return Object.keys(d)}connectedCallback(){this[m]=!0,this[b]()}disconnectedCallback(){this[m]=!1,this[u]&&o.unmount(this[u]),delete this[u]}attributeChangedCallback(r,_,c){const a=d[r],E=p[a],y=E?N[E]:null;a in p&&y!=null&&y.parse&&c&&(this[l][a]=y.parse(c,r,this),this[b]())}[(i=m,O=u,A=l,b)](){this[m]&&(this[u]?o.update(this[u],this[l]):this[u]=o.mount(this.container,e,this[l]))}}for(const s of f){const r=h[s],_=p[s];Object.defineProperty(P.prototype,s,{enumerable:!0,configurable:!0,get(){return this[l][s]},set(c){this[l][s]=c;const a=_?N[_]:null;if(a!=null&&a.stringify){const E=a.stringify(c,r,this);this.getAttribute(r)!==E&&this.setAttribute(r,E)}else this[b]()}})}return P}function F(e,t,o){const i=W.createRoot(e),O=g.createElement(t,o);return i.render(O),{root:i,ReactComponent:t}}function v({root:e,ReactComponent:t},o){const i=g.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:"open",props:{compositionUrl:"string",hideCategories:"boolean",infiniteCarrousel:"boolean",permanentGallery:"boolean",minMediaWidth:"number",maxMediaWidth:"number",mediaLoadStrategy:"string",preventFullScreen:"boolean",eventPrefix:"string",reverse360:"boolean"}}),k=C(n.WebPlayerCustomMedia,{shadow:"closed",props:{index:"number",thumbnailSrc:"string"}}),B=C(n.WebPlayerIcon,{shadow:"closed",props:{name:"string"}});function H(){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()||H()}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 n=require("./shared-Cs2DFbEI.cjs");require("react/jsx-runtime");const g=require("react"),W=require("react-dom/client");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,b=(e,t,r)=>(L(e,typeof t!="symbol"?t+"":t,r),r);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,r)=>{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(r):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,r,i)=>`${r}-${i.toLowerCase()}`)}const T=Symbol.for("r2wc.render"),m=Symbol.for("r2wc.connected"),u=Symbol.for("r2wc.context"),l=Symbol.for("r2wc.props");function G(e,t,r){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 o=w(s);f[s]=o,h[o]=s}class P 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 o of d){const _=f[o],c=this.getAttribute(_),a=p[o],E=a?y[a]:null;E!=null&&E.parse&&c&&(this[l][o]=E.parse(c,_,this))}}static get observedAttributes(){return Object.keys(h)}connectedCallback(){this[m]=!0,this[T]()}disconnectedCallback(){this[m]=!1,this[u]&&r.unmount(this[u]),delete this[u]}attributeChangedCallback(o,_,c){const a=h[o],E=p[a],N=E?y[E]:null;a in p&&N!=null&&N.parse&&c&&(this[l][a]=N.parse(c,o,this),this[T]())}[(i=m,O=u,A=l,T)](){this[m]&&(this[u]?r.update(this[u],this[l]):this[u]=r.mount(this.container,e,this[l]))}}for(const s of d){const o=f[s],_=p[s];Object.defineProperty(P.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,o,this);this.getAttribute(o)!==E&&this.setAttribute(o,E)}else this[T]()}})}return P}function F(e,t,r){const i=W.createRoot(e),O=g.createElement(t,r);return i.render(O),{root:i,ReactComponent:t}}function v({root:e,ReactComponent:t},r){const i=g.createElement(t,r);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,{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 x(){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 H(){n.checkCustomElementsDefinition()||x()}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;

package/dist/index.d.ts

@@ -38,18 +38,20 @@ export declare const EVENT_HOTSPOTS_ON = "hotspots-on";
 
 export declare const EVENT_ITEM_CHANGE = "item-change";
 
+declare type ExtendBehavior = "full_screen" | "event" | "none";
+
 /**
  * Generates a URL for fetching the composition JSON for a given customer and vehicle.
  *
- * @param {string} hashedCustomerId - The ID of the customer (hashed with SHA-256).
+ * @param {string} customerToken - The CarCutter Customer Token (computed by hasing the Customer ID with SHA-256).
  * @param {string} vin - The Vehicle Identification Number.
  * @returns {string} The URL to fetch the composition JSON.
  */
 export declare function generateCompositionUrl(
-hashedCustomerId: string,
+customerToken: string,
 vin: string
 ): string {
-    return `https://cdn.car-cutter.com/gallery/${hashedCustomerId}/${vin}/composition_v3.json`;
+    return `https://cdn.car-cutter.com/gallery/${customerToken}/${vin}/composition_v3.json`;
 }
 
 declare type Hotspot = {
@@ -73,7 +75,16 @@ declare type ImageWithHotspots = {
     hotspots?: Hotspot[];
 };
 
-export declare type Item = ImageItem | VideoItem | ThreeSixtyItem;
+declare type InteriorThreeSixtyItem = {
+    type: "interior-360";
+    poster?: string;
+} & ImageWithHotspots;
+
+export declare type Item =
+| ImageItem
+| VideoItem
+| ThreeSixtyItem
+| InteriorThreeSixtyItem;
 
 export declare type MediaLoadStrategy = "quality" | "balanced" | "speed";
 
@@ -119,6 +130,7 @@ declare type WebPlayerIconName =
 | "UI_PLUS" // Increase zoom
 | "UI_REDUCE" // Reducing an extended view
 | "UI_360" // 360-degree view
+| "UI_INTERIOR_360" // interior 360 view
 | "UI_VOLUME" // Video volume
 | "UI_VOLUME_OFF" // Muted video
 | "CONTROLS_PREV" // Go to previous media
@@ -150,7 +162,7 @@ declare type WebPlayerProps_2 = {
     compositionUrl: string;
 
     // Layout
-    hideCategories?: boolean;
+    hideCategoriesNav?: boolean;
     infiniteCarrousel?: boolean;
     permanentGallery?: boolean;
 
@@ -159,10 +171,14 @@ declare type WebPlayerProps_2 = {
     minMediaWidth?: MediaWidth;
     maxMediaWidth?: MediaWidth;
     preloadRange?: number;
+    autoLoad360?: boolean;
+    autoLoadInterior360?: boolean;
 
-    // Miscelaneous
-    preventFullScreen?: boolean;
+    // Miscellaneous
+    categoriesFilter?: string;
+    extendBehavior?: ExtendBehavior;
     eventPrefix?: string;
+    demoSpin?: boolean;
     reverse360?: boolean;
 };
 

package/dist/index.js

@@ -1,9 +1,9 @@
-import { W as P, a as W, b as S, c as w, d as I, e as L, f as M } from "./shared-DQuprS5K.js";
-import { D as oe, j as se, E as re, k as ie, n as ae, m as ce, r as le, q as ue, p as pe, o as me, l as fe, g as Ee, h as be, i as he, s as de } from "./shared-DQuprS5K.js";
+import { W as P, a as W, b as S, c as w, d as L, e as I, f as M } from "./shared-DKvJSb9q.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 fe, g as be, h as Ee, i as de, s as he } from "./shared-DKvJSb9q.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, E = (e, t, n) => (V(e, typeof t != "symbol" ? t + "" : t, n), n);
+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, b = (e, t, n) => (V(e, typeof t != "symbol" ? t + "" : t, n), n);
 const v = {
   stringify: (e) => e,
   parse: (e) => e
@@ -16,18 +16,18 @@ const v = {
 }, x = {
   stringify: (e) => e.name,
   parse: (e, t, n) => {
-    const s = (() => {
+    const r = (() => {
       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(n) : void 0;
+    return typeof r == "function" ? r.bind(n) : void 0;
   }
 }, F = {
   stringify: (e) => JSON.stringify(e),
   parse: (e) => JSON.parse(e)
-}, g = {
+}, O = {
   string: v,
   number: j,
   boolean: k,
@@ -37,26 +37,26 @@ const v = {
 function G(e) {
   return e.replace(
     /([a-z0-9])([A-Z])/g,
-    (t, n, s) => `${n}-${s.toLowerCase()}`
+    (t, n, r) => `${n}-${r.toLowerCase()}`
   );
 }
-const b = Symbol.for("r2wc.render"), h = Symbol.for("r2wc.connected"), u = Symbol.for("r2wc.context"), l = Symbol.for("r2wc.props");
+const E = Symbol.for("r2wc.render"), d = Symbol.for("r2wc.connected"), u = Symbol.for("r2wc.context"), l = Symbol.for("r2wc.props");
 function Y(e, t, n) {
-  var s, f, C;
+  var r, f, C;
   t.props || (t.props = e.propTypes ? Object.keys(e.propTypes) : []);
-  const d = Array.isArray(t.props) ? t.props.slice() : Object.keys(t.props), m = {}, y = {}, _ = {};
-  for (const r of d) {
-    m[r] = Array.isArray(t.props) ? "string" : t.props[r];
-    const o = G(r);
-    y[r] = o, _[o] = r;
+  const h = Array.isArray(t.props) ? t.props.slice() : Object.keys(t.props), m = {}, y = {}, _ = {};
+  for (const s of h) {
+    m[s] = Array.isArray(t.props) ? "string" : t.props[s];
+    const o = G(s);
+    y[s] = o, _[o] = s;
   }
   class N extends HTMLElement {
     constructor() {
-      super(), E(this, s, !0), E(this, f), E(this, C, {}), E(this, "container"), t.shadow ? this.container = this.attachShadow({
+      super(), b(this, r, !0), b(this, f), b(this, C, {}), b(this, "container"), t.shadow ? this.container = this.attachShadow({
         mode: t.shadow
       }) : this.container = this, this[l].container = this.container;
-      for (const o of d) {
-        const p = y[o], c = this.getAttribute(p), i = m[o], a = i ? g[i] : null;
+      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));
       }
     }
@@ -64,75 +64,82 @@ function Y(e, t, n) {
       return Object.keys(_);
     }
     connectedCallback() {
-      this[h] = !0, this[b]();
+      this[d] = !0, this[E]();
     }
     disconnectedCallback() {
-      this[h] = !1, this[u] && n.unmount(this[u]), delete this[u];
+      this[d] = !1, this[u] && n.unmount(this[u]), delete this[u];
     }
     attributeChangedCallback(o, p, c) {
-      const i = _[o], a = m[i], O = a ? g[a] : null;
-      i in m && O != null && O.parse && c && (this[l][i] = O.parse(c, o, this), this[b]());
+      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]());
     }
-    [(s = h, f = u, C = l, b)]() {
-      this[h] && (this[u] ? n.update(this[u], this[l]) : this[u] = n.mount(
+    [(r = d, f = u, C = l, E)]() {
+      this[d] && (this[u] ? n.update(this[u], this[l]) : this[u] = n.mount(
         this.container,
         e,
         this[l]
       ));
     }
   }
-  for (const r of d) {
-    const o = y[r], p = m[r];
-    Object.defineProperty(N.prototype, r, {
+  for (const s of h) {
+    const o = y[s], p = m[s];
+    Object.defineProperty(N.prototype, s, {
       enumerable: !0,
       configurable: !0,
       get() {
-        return this[l][r];
+        return this[l][s];
       },
       set(c) {
-        this[l][r] = c;
-        const i = p ? g[p] : null;
+        this[l][s] = c;
+        const i = p ? O[p] : null;
         if (i != null && i.stringify) {
           const a = i.stringify(c, o, this);
           this.getAttribute(o) !== a && this.setAttribute(o, a);
         } else
-          this[b]();
+          this[E]();
       }
     });
   }
   return N;
 }
-function H(e, t, n) {
-  const s = D(e), f = A.createElement(t, n);
-  return s.render(f), {
-    root: s,
+function B(e, t, n) {
+  const r = D(e), f = A.createElement(t, n);
+  return r.render(f), {
+    root: r,
     ReactComponent: t
   };
 }
-function U({ root: e, ReactComponent: t }, n) {
-  const s = A.createElement(t, n);
-  e.render(s);
+function H({ root: e, ReactComponent: t }, n) {
+  const r = A.createElement(t, n);
+  e.render(r);
 }
-function $({ root: e }) {
+function U({ root: e }) {
   setTimeout(() => {
     e.unmount();
   }, 0);
 }
 function T(e, t = {}) {
-  return Y(e, t, { mount: H, update: U, unmount: $ });
+  return Y(e, t, { mount: B, update: H, unmount: U });
 }
-const B = T(P, {
-  shadow: "open",
+const $ = T(P, {
   props: {
     compositionUrl: "string",
-    hideCategories: "boolean",
+    // Layout
+    hideCategoriesNav: "boolean",
     infiniteCarrousel: "boolean",
     permanentGallery: "boolean",
+    // Medias loading
     minMediaWidth: "number",
     maxMediaWidth: "number",
     mediaLoadStrategy: "string",
-    preventFullScreen: "boolean",
+    preloadRange: "number",
+    autoLoad360: "boolean",
+    autoLoadInterior360: "boolean",
+    // Miscellaneous
+    categoriesFilter: "string",
+    extendBehavior: "string",
     eventPrefix: "string",
+    demoSpin: "boolean",
     reverse360: "boolean"
   }
 }), J = T(W, {
@@ -148,8 +155,8 @@ const B = T(P, {
   }
 });
 function q() {
-  customElements.define(I, B), customElements.define(
-    L,
+  customElements.define(L, $), customElements.define(
+    I,
     J
   ), customElements.define(M, X);
 }
@@ -159,8 +166,8 @@ function z() {
 z();
 export {
   oe as DEFAULT_EVENT_PREFIX,
-  se as EVENT_COMPOSITION_LOADED,
-  re as EVENT_COMPOSITION_LOADING,
+  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,
@@ -170,9 +177,9 @@ export {
   me as EVENT_HOTSPOTS_ON,
   fe as EVENT_ITEM_CHANGE,
   M as WEB_PLAYER_ICON_WC_TAG,
-  I as WEB_PLAYER_WC_TAG,
-  Ee as WebPlayer,
-  be as WebPlayerCustomMedia,
-  he as WebPlayerIcon,
-  de as generateCompositionUrl
+  L as WEB_PLAYER_WC_TAG,
+  be as WebPlayer,
+  Ee as WebPlayerCustomMedia,
+  de as WebPlayerIcon,
+  he as generateCompositionUrl
 };

package/dist/legacy.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("./shared-QPXPDOqW.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)},D={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}},R={stringify:e=>JSON.stringify(e),parse:e=>JSON.parse(e)},N={string:I,number:V,boolean:M,function:D,json:R};function w(e){return e.replace(/([a-z0-9])([A-Z])/g,(t,r,s)=>`${r}-${s.toLowerCase()}`)}const b=Symbol.for("r2wc.render"),T=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 m=Array.isArray(t.props)?t.props.slice():Object.keys(t.props),p={},f={},d={};for(const i of m){p[i]=Array.isArray(t.props)?"string":t.props[i];const o=w(i);f[i]=o,d[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 m){const _=f[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(d)}connectedCallback(){this[T]=!0,this[b]()}disconnectedCallback(){this[T]=!1,this[u]&&r.unmount(this[u]),delete this[u]}attributeChangedCallback(o,_,c){const a=d[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=T,A=u,P=l,b)](){this[T]&&(this[u]?r.update(this[u],this[l]):this[u]=r.mount(this.container,e,this[l]))}}for(const i of m){const o=f[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:"open",props:{compositionUrl:"string",hideCategories:"boolean",infiniteCarrousel:"boolean",permanentGallery:"boolean",minMediaWidth:"number",maxMediaWidth:"number",mediaLoadStrategy:"string",preventFullScreen:"boolean",eventPrefix:"string",reverse360:"boolean"}}),k=C(n.WebPlayerCustomMedia,{shadow:"closed",props:{index:"number",thumbnailSrc:"string"}}),$=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,$)}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 n=require("./shared-Cs2DFbEI.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"),T=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 d=Array.isArray(t.props)?t.props.slice():Object.keys(t.props),p={},m={},f={};for(const i of d){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 d){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[T]=!0,this[b]()}disconnectedCallback(){this[T]=!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=T,A=u,P=l,b)](){this[T]&&(this[u]?r.update(this[u],this[l]):this[u]=r.mount(this.container,e,this[l]))}}for(const i of d){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:"open",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;

package/dist/legacy.d.ts

@@ -38,18 +38,20 @@ export declare const EVENT_HOTSPOTS_ON = "hotspots-on";
 
 export declare const EVENT_ITEM_CHANGE = "item-change";
 
+declare type ExtendBehavior = "full_screen" | "event" | "none";
+
 /**
  * Generates a URL for fetching the composition JSON for a given customer and vehicle.
  *
- * @param {string} hashedCustomerId - The ID of the customer (hashed with SHA-256).
+ * @param {string} customerToken - The CarCutter Customer Token (computed by hasing the Customer ID with SHA-256).
  * @param {string} vin - The Vehicle Identification Number.
  * @returns {string} The URL to fetch the composition JSON.
  */
 export declare function generateCompositionUrl(
-hashedCustomerId: string,
+customerToken: string,
 vin: string
 ): string {
-    return `https://cdn.car-cutter.com/gallery/${hashedCustomerId}/${vin}/composition_v3.json`;
+    return `https://cdn.car-cutter.com/gallery/${customerToken}/${vin}/composition_v3.json`;
 }
 
 declare type Hotspot = {
@@ -73,7 +75,16 @@ declare type ImageWithHotspots = {
     hotspots?: Hotspot[];
 };
 
-export declare type Item = ImageItem | VideoItem | ThreeSixtyItem;
+declare type InteriorThreeSixtyItem = {
+    type: "interior-360";
+    poster?: string;
+} & ImageWithHotspots;
+
+export declare type Item =
+| ImageItem
+| VideoItem
+| ThreeSixtyItem
+| InteriorThreeSixtyItem;
 
 export declare type MediaLoadStrategy = "quality" | "balanced" | "speed";
 
@@ -119,6 +130,7 @@ declare type WebPlayerIconName =
 | "UI_PLUS" // Increase zoom
 | "UI_REDUCE" // Reducing an extended view
 | "UI_360" // 360-degree view
+| "UI_INTERIOR_360" // interior 360 view
 | "UI_VOLUME" // Video volume
 | "UI_VOLUME_OFF" // Muted video
 | "CONTROLS_PREV" // Go to previous media
@@ -150,7 +162,7 @@ declare type WebPlayerProps_2 = {
     compositionUrl: string;
 
     // Layout
-    hideCategories?: boolean;
+    hideCategoriesNav?: boolean;
     infiniteCarrousel?: boolean;
     permanentGallery?: boolean;
 
@@ -159,10 +171,14 @@ declare type WebPlayerProps_2 = {
     minMediaWidth?: MediaWidth;
     maxMediaWidth?: MediaWidth;
     preloadRange?: number;
+    autoLoad360?: boolean;
+    autoLoadInterior360?: boolean;
 
-    // Miscelaneous
-    preventFullScreen?: boolean;
+    // Miscellaneous
+    categoriesFilter?: string;
+    extendBehavior?: ExtendBehavior;
     eventPrefix?: string;
+    demoSpin?: boolean;
     reverse360?: boolean;
 };
 

package/dist/legacy.js

@@ -1,9 +1,9 @@
-import { W, a as S, b as w, c as I, d as L, e as M, f as D } from "./shared-DQuprS5K.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 pe, p as ue, o as me, l as fe, g as Ee, h as be, i as he, s as de } from "./shared-DQuprS5K.js";
+import { W, a as S, b as w, c as L, d as I, e as M, f as D } from "./shared-DKvJSb9q.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 fe, g as be, h as Ee, i as de, s as he } from "./shared-DKvJSb9q.js";
 import "react/jsx-runtime";
 import P from "react";
-import g from "react-dom";
-var V = Object.defineProperty, R = (e, t, n) => t in e ? V(e, t, { enumerable: !0, configurable: !0, writable: !0, value: n }) : e[t] = n, f = (e, t, n) => (R(e, typeof t != "symbol" ? t + "" : t, n), n);
+import O from "react-dom";
+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);
 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 = {
+}, g = {
   string: v,
   number: j,
   boolean: k,
@@ -40,49 +40,49 @@ function G(e) {
     (t, n, s) => `${n}-${s.toLowerCase()}`
   );
 }
-const E = Symbol.for("r2wc.render"), b = Symbol.for("r2wc.connected"), p = Symbol.for("r2wc.context"), l = Symbol.for("r2wc.props");
+const b = Symbol.for("r2wc.render"), E = Symbol.for("r2wc.connected"), u = Symbol.for("r2wc.context"), l = Symbol.for("r2wc.props");
 function $(e, t, n) {
   var s, T, N;
   t.props || (t.props = e.propTypes ? Object.keys(e.propTypes) : []);
-  const h = Array.isArray(t.props) ? t.props.slice() : Object.keys(t.props), m = {}, d = {}, y = {};
-  for (const r of h) {
+  const d = Array.isArray(t.props) ? t.props.slice() : Object.keys(t.props), m = {}, h = {}, y = {};
+  for (const r of d) {
     m[r] = Array.isArray(t.props) ? "string" : t.props[r];
     const o = G(r);
-    d[r] = o, y[o] = r;
+    h[r] = o, y[o] = r;
   }
   class A extends HTMLElement {
     constructor() {
       super(), f(this, s, !0), f(this, T), f(this, N, {}), f(this, "container"), t.shadow ? this.container = this.attachShadow({
         mode: t.shadow
       }) : this.container = this, this[l].container = this.container;
-      for (const o of h) {
-        const u = d[o], c = this.getAttribute(u), i = m[o], a = i ? O[i] : null;
-        a != null && a.parse && c && (this[l][o] = a.parse(c, u, this));
+      for (const o of d) {
+        const p = h[o], c = this.getAttribute(p), i = m[o], a = i ? g[i] : null;
+        a != null && a.parse && c && (this[l][o] = a.parse(c, p, this));
       }
     }
     static get observedAttributes() {
       return Object.keys(y);
     }
     connectedCallback() {
-      this[b] = !0, this[E]();
+      this[E] = !0, this[b]();
     }
     disconnectedCallback() {
-      this[b] = !1, this[p] && n.unmount(this[p]), delete this[p];
+      this[E] = !1, this[u] && n.unmount(this[u]), delete this[u];
     }
-    attributeChangedCallback(o, u, c) {
-      const i = y[o], a = m[i], _ = a ? O[a] : null;
-      i in m && _ != null && _.parse && c && (this[l][i] = _.parse(c, o, this), this[E]());
+    attributeChangedCallback(o, p, c) {
+      const i = y[o], a = m[i], _ = a ? g[a] : null;
+      i in m && _ != null && _.parse && c && (this[l][i] = _.parse(c, o, this), this[b]());
     }
-    [(s = b, T = p, N = l, E)]() {
-      this[b] && (this[p] ? n.update(this[p], this[l]) : this[p] = n.mount(
+    [(s = E, T = u, N = l, b)]() {
+      this[E] && (this[u] ? n.update(this[u], this[l]) : this[u] = n.mount(
         this.container,
         e,
         this[l]
       ));
     }
   }
-  for (const r of h) {
-    const o = d[r], u = m[r];
+  for (const r of d) {
+    const o = h[r], p = m[r];
     Object.defineProperty(A.prototype, r, {
       enumerable: !0,
       configurable: !0,
@@ -91,12 +91,12 @@ function $(e, t, n) {
       },
       set(c) {
         this[l][r] = c;
-        const i = u ? O[u] : null;
+        const i = p ? g[p] : null;
         if (i != null && i.stringify) {
           const a = i.stringify(c, o, this);
           this.getAttribute(o) !== a && this.setAttribute(o, a);
         } else
-          this[E]();
+          this[b]();
       }
     });
   }
@@ -104,33 +104,41 @@ function $(e, t, n) {
 }
 function Y(e, t, n) {
   const s = P.createElement(t, n);
-  return g.render(s, e), {
+  return O.render(s, e), {
     container: e,
     ReactComponent: t
   };
 }
-function H({ container: e, ReactComponent: t }, n) {
+function B({ container: e, ReactComponent: t }, n) {
   const s = P.createElement(t, n);
-  g.render(s, e);
+  O.render(s, e);
 }
-function U({ container: e }) {
-  g.unmountComponentAtNode(e);
+function H({ container: e }) {
+  O.unmountComponentAtNode(e);
 }
 function C(e, t = {}) {
-  return $(e, t, { mount: Y, update: H, unmount: U });
+  return $(e, t, { mount: Y, update: B, unmount: H });
 }
-const B = C(W, {
+const U = C(W, {
   shadow: "open",
   props: {
     compositionUrl: "string",
-    hideCategories: "boolean",
+    // Layout
+    hideCategoriesNav: "boolean",
     infiniteCarrousel: "boolean",
     permanentGallery: "boolean",
+    // Medias loading
     minMediaWidth: "number",
     maxMediaWidth: "number",
     mediaLoadStrategy: "string",
-    preventFullScreen: "boolean",
+    preloadRange: "number",
+    autoLoad360: "boolean",
+    autoLoadInterior360: "boolean",
+    // Miscellaneous
+    categoriesFilter: "string",
+    extendBehavior: "string",
     eventPrefix: "string",
+    demoSpin: "boolean",
     reverse360: "boolean"
   }
 }), J = C(S, {
@@ -146,13 +154,13 @@ const B = C(W, {
   }
 });
 function q() {
-  customElements.define(L, B), customElements.define(
+  customElements.define(I, U), customElements.define(
     M,
     J
   ), customElements.define(D, X);
 }
 function z() {
-  I() || q();
+  L() || q();
 }
 z();
 export {
@@ -163,14 +171,14 @@ export {
   ae as EVENT_EXTEND_MODE_OFF,
   ce as EVENT_EXTEND_MODE_ON,
   le as EVENT_GALLERY_CLOSE,
-  pe as EVENT_GALLERY_OPEN,
-  ue as EVENT_HOTSPOTS_OFF,
+  ue as EVENT_GALLERY_OPEN,
+  pe as EVENT_HOTSPOTS_OFF,
   me as EVENT_HOTSPOTS_ON,
   fe as EVENT_ITEM_CHANGE,
   D as WEB_PLAYER_ICON_WC_TAG,
-  L as WEB_PLAYER_WC_TAG,
-  Ee as WebPlayer,
-  be as WebPlayerCustomMedia,
-  he as WebPlayerIcon,
-  de as generateCompositionUrl
+  I as WEB_PLAYER_WC_TAG,
+  be as WebPlayer,
+  Ee as WebPlayerCustomMedia,
+  de as WebPlayerIcon,
+  he as generateCompositionUrl
 };