@car-cutter/vue-webplayer 0.10.0 → 0.11.0

package/dist/index.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("vue"),e=require("./utils-CbTbWQZC.cjs"),O=require("@car-cutter/wc-webplayer"),C=t.defineComponent({__name:"WebPlayer",props:{compositionUrl:{},hideCategories:{type:Boolean},infiniteCarrousel:{type:Boolean},permanentGallery:{type:Boolean},mediaLoadStrategy:{},minMediaWidth:{},maxMediaWidth:{},preloadRange:{},preventFullScreen:{type:Boolean},eventPrefix:{},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=o=>`${p}${o}`,m={[e.EVENT_COMPOSITION_LOADING]:o=>E("compositionLoading",o),[e.EVENT_COMPOSITION_LOADED]:o=>E("compositionLoaded",o),[e.EVENT_COMPOSITION_LOAD_ERROR]:o=>E("compositionLoadError",o),[e.EVENT_ITEM_CHANGE]:o=>E("itemChange",o),[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(([o,n])=>{if(!n)return;const P=d(o),u=L=>n(L.detail);T.set(P,u)}),t.onMounted(()=>{T.forEach((o,n)=>{document.addEventListener(n,o)})}),t.onUnmounted(()=>{T.forEach((o,n)=>{document.removeEventListener(n,o)})}),(o,n)=>(t.openBlock(),t.createElementBlock("cc-webplayer",t.mergeProps(t.unref(N),{class:t.unref(a),style:l}),[t.renderSlot(o.$slots,"default")],16))}}),A=t.defineComponent({__name:"WebPlayerCustomMedia",props:{index:{},thumbnailSrc:{}},setup(_){const s=_,r=O.webPlayerCustomMediaPropsToAttributes(s);return(a,i)=>(t.openBlock(),t.createElementBlock("cc-webplayer-custom-media",t.normalizeProps(t.guardReactiveProps(t.unref(r))),[t.renderSlot(a.$slots,"default")],16))}}),M=t.defineComponent({__name:"WebPlayerIcon",props:{name:{}},setup(_){const s=_,r=O.webPlayerIconPropsToAttributes(s);return(a,i)=>(t.openBlock(),t.createElementBlock("cc-webplayer-icon",t.normalizeProps(t.guardReactiveProps(t.unref(r))),[t.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=M;
+"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:{},hideCategoriesNav:{type:Boolean},infiniteCarrousel:{type:Boolean},permanentGallery:{type:Boolean},mediaLoadStrategy:{},minMediaWidth:{},maxMediaWidth:{},preloadRange:{},autoLoad360:{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))}}),M=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=M;

package/dist/index.d.ts

@@ -122,18 +122,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 = {
@@ -241,7 +243,7 @@ declare type WebPlayerProps_2 = {
     compositionUrl: string;
 
     // Layout
-    hideCategories?: boolean;
+    hideCategoriesNav?: boolean;
     infiniteCarrousel?: boolean;
     permanentGallery?: boolean;
 
@@ -250,10 +252,13 @@ declare type WebPlayerProps_2 = {
     minMediaWidth?: MediaWidth;
     maxMediaWidth?: MediaWidth;
     preloadRange?: number;
+    autoLoad360?: boolean;
 
     // Miscelaneous
-    preventFullScreen?: boolean;
+    categoriesFilter?: string;
+    extendBehavior?: ExtendBehavior;
     eventPrefix?: string;
+    demoSpin?: boolean;
     reverse360?: boolean;
 };
 

package/dist/index.js

@@ -1,20 +1,23 @@
-import { defineComponent as l, onMounted as M, onUnmounted as h, openBlock as E, createElementBlock as _, mergeProps as A, unref as r, renderSlot as m, normalizeProps as d, guardReactiveProps as O } from "vue";
-import { D as g, E as W, a as v, b as I, c as S, d as D, e as x, f as R, g as V, h as B, i as w } from "./utils-_R5huBBV.js";
+import { defineComponent as l, onMounted as M, onUnmounted as h, openBlock as E, createElementBlock as _, mergeProps as g, unref as r, renderSlot as m, normalizeProps as d, guardReactiveProps as O } from "vue";
+import { D as A, E as v, a as W, b as I, c as S, d as x, e as B, f as D, g as R, h as V, i as w } from "./utils-_R5huBBV.js";
 import { j as K, k as Q, W as Z, l as ee } from "./utils-_R5huBBV.js";
 import { ensureCustomElementsDefinition as G, webPlayerPropsToAttributes as F, webPlayerCustomMediaPropsToAttributes as $, webPlayerIconPropsToAttributes as U } from "@car-cutter/wc-webplayer";
 const X = /* @__PURE__ */ l({
   __name: "WebPlayer",
   props: {
     compositionUrl: {},
-    hideCategories: { type: Boolean },
+    hideCategoriesNav: { type: Boolean },
     infiniteCarrousel: { type: Boolean },
     permanentGallery: { type: Boolean },
     mediaLoadStrategy: {},
     minMediaWidth: {},
     maxMediaWidth: {},
     preloadRange: {},
-    preventFullScreen: { type: Boolean },
+    autoLoad360: { type: Boolean },
+    categoriesFilter: {},
+    extendBehavior: {},
     eventPrefix: {},
+    demoSpin: { type: Boolean },
     reverse360: { type: Boolean },
     class: {},
     style: {}
@@ -22,23 +25,23 @@ const X = /* @__PURE__ */ l({
   emits: ["compositionLoading", "compositionLoaded", "compositionLoadError", "itemChange", "extendModeOn", "extendModeOff", "hotspotsOn", "hotspotsOff", "galleryOpen", "galleryClose"],
   setup(n, { emit: i }) {
     G();
-    const s = n, { class: a, style: c, ...u } = s, f = { display: "block", ...c ?? {} }, P = F(u), o = i, T = s.eventPrefix ?? g, y = (e) => `${T}${e}`, N = {
-      [W]: (e) => o("compositionLoading", e),
-      [v]: (e) => o("compositionLoaded", e),
+    const s = n, { class: a, style: c, ...u } = s, f = { display: "block", ...c ?? {} }, y = F(u), o = i, P = s.eventPrefix ?? A, T = (e) => `${P}${e}`, N = {
+      [v]: (e) => o("compositionLoading", e),
+      [W]: (e) => o("compositionLoaded", e),
       [I]: (e) => o("compositionLoadError", e),
       [S]: (e) => o("itemChange", e),
-      [D]: () => o("extendModeOn"),
-      [x]: () => o("extendModeOff"),
-      [R]: () => o("hotspotsOn"),
-      [V]: () => o("hotspotsOff"),
-      [B]: () => o("galleryOpen"),
+      [x]: () => o("extendModeOn"),
+      [B]: () => o("extendModeOff"),
+      [D]: () => o("hotspotsOn"),
+      [R]: () => o("hotspotsOff"),
+      [V]: () => o("galleryOpen"),
       [w]: () => o("galleryClose")
     }, p = /* @__PURE__ */ new Map();
     return Object.entries(N).forEach(([e, t]) => {
       if (!t)
         return;
-      const b = y(e), C = (L) => t(L.detail);
-      p.set(b, C);
+      const L = T(e), b = (C) => t(C.detail);
+      p.set(L, b);
     }), M(() => {
       p.forEach((e, t) => {
         document.addEventListener(t, e);
@@ -47,7 +50,7 @@ const X = /* @__PURE__ */ l({
       p.forEach((e, t) => {
         document.removeEventListener(t, e);
       });
-    }), (e, t) => (E(), _("cc-webplayer", A(r(P), {
+    }), (e, t) => (E(), _("cc-webplayer", g(r(y), {
       class: r(a),
       style: f
     }), [
@@ -79,16 +82,16 @@ const X = /* @__PURE__ */ l({
   }
 });
 export {
-  g as DEFAULT_EVENT_PREFIX,
-  v as EVENT_COMPOSITION_LOADED,
-  W as EVENT_COMPOSITION_LOADING,
+  A as DEFAULT_EVENT_PREFIX,
+  W as EVENT_COMPOSITION_LOADED,
+  v as EVENT_COMPOSITION_LOADING,
   I as EVENT_COMPOSITION_LOAD_ERROR,
-  x as EVENT_EXTEND_MODE_OFF,
-  D as EVENT_EXTEND_MODE_ON,
+  B as EVENT_EXTEND_MODE_OFF,
+  x as EVENT_EXTEND_MODE_ON,
   w as EVENT_GALLERY_CLOSE,
-  B as EVENT_GALLERY_OPEN,
-  V as EVENT_HOTSPOTS_OFF,
-  R as EVENT_HOTSPOTS_ON,
+  V as EVENT_GALLERY_OPEN,
+  R as EVENT_HOTSPOTS_OFF,
+  D as EVENT_HOTSPOTS_ON,
   S as EVENT_ITEM_CHANGE,
   K as WEB_PLAYER_CUSTOM_MEDIA_WC_TAG,
   Q as WEB_PLAYER_ICON_WC_TAG,

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},hideCategories:Boolean,infiniteCarrousel:Boolean,permanentGallery:Boolean,mediaLoadStrategy:String,minMediaWidth:Number,maxMediaWidth:Number,preloadRange:Number,preventFullScreen:Boolean,eventPrefix:String,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,E])=>{if(!E)return;const n=this.generateEventName(o),i=s=>E(s.detail);this.eventCbMap.set(n,i),document.addEventListener(n,i)})}},mounted(){this.setupEventListeners()},beforeDestroy(){this.eventCbMap.forEach((r,o)=>{document.removeEventListener(o,r)})}}),a=(r,o)=>{const E=r.__vccOpts||r;for(const[n,i]of o)E[n]=i;return E};function T(r,o,E,n,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,E,n,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]]),l=t.defineComponent({props:{name:{type:String,required:!0}},computed:{attributes(){return _.webPlayerIconPropsToAttributes(this.$props)}}});function d(r,o,E,n,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(l,[["render",d]]);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 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,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;

package/dist/vue2.d.ts

@@ -45,18 +45,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 = {
@@ -116,15 +118,18 @@ compositionUrl: {
 type: StringConstructor;
 required: true;
 };
-hideCategories: BooleanConstructor;
+hideCategoriesNav: BooleanConstructor;
 infiniteCarrousel: BooleanConstructor;
 permanentGallery: BooleanConstructor;
 mediaLoadStrategy: StringConstructor;
 minMediaWidth: NumberConstructor;
 maxMediaWidth: NumberConstructor;
 preloadRange: NumberConstructor;
-preventFullScreen: BooleanConstructor;
+autoLoad360: BooleanConstructor;
+categoriesFilter: StringConstructor;
+extendBehavior: StringConstructor;
 eventPrefix: StringConstructor;
+demoSpin: BooleanConstructor;
 reverse360: BooleanConstructor;
 }>, {}, {
 eventCbMap: Map<string, EventListener>;
@@ -138,21 +143,25 @@ compositionUrl: {
 type: StringConstructor;
 required: true;
 };
-hideCategories: BooleanConstructor;
+hideCategoriesNav: BooleanConstructor;
 infiniteCarrousel: BooleanConstructor;
 permanentGallery: BooleanConstructor;
 mediaLoadStrategy: StringConstructor;
 minMediaWidth: NumberConstructor;
 maxMediaWidth: NumberConstructor;
 preloadRange: NumberConstructor;
-preventFullScreen: BooleanConstructor;
+autoLoad360: BooleanConstructor;
+categoriesFilter: StringConstructor;
+extendBehavior: StringConstructor;
 eventPrefix: StringConstructor;
+demoSpin: BooleanConstructor;
 reverse360: BooleanConstructor;
 }>> & Readonly<{}>, {
-hideCategories: boolean;
+hideCategoriesNav: boolean;
 infiniteCarrousel: boolean;
 permanentGallery: boolean;
-preventFullScreen: boolean;
+autoLoad360: boolean;
+demoSpin: boolean;
 reverse360: boolean;
 }, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
 
@@ -220,7 +229,7 @@ export declare type WebPlayerProps = {
     compositionUrl: string;
 
     // Layout
-    hideCategories?: boolean;
+    hideCategoriesNav?: boolean;
     infiniteCarrousel?: boolean;
     permanentGallery?: boolean;
 
@@ -229,10 +238,13 @@ export declare type WebPlayerProps = {
     minMediaWidth?: MediaWidth;
     maxMediaWidth?: MediaWidth;
     preloadRange?: number;
+    autoLoad360?: boolean;
 
     // Miscelaneous
-    preventFullScreen?: boolean;
+    categoriesFilter?: string;
+    extendBehavior?: ExtendBehavior;
     eventPrefix?: string;
+    demoSpin?: boolean;
     reverse360?: boolean;
 };
 

package/dist/vue2.js

@@ -1,20 +1,23 @@
-import { defineComponent as i, openBlock as a, createElementBlock as p, normalizeProps as E, guardReactiveProps as c, renderSlot as m } from "vue";
-import { D as _, E as d, a as l, b as f, c as O, d as $, e as h, f as b, g as N, h as T, i as P } from "./utils-_R5huBBV.js";
+import { defineComponent as i, openBlock as a, createElementBlock 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-_R5huBBV.js";
 import { j as Y, k, W as U, l as q } from "./utils-_R5huBBV.js";
-import { ensureCustomElementsDefinition as v, webPlayerPropsToAttributes as C, webPlayerCustomMediaPropsToAttributes as L, webPlayerIconPropsToAttributes as M } from "@car-cutter/wc-webplayer";
+import { ensureCustomElementsDefinition as v, webPlayerPropsToAttributes as L, webPlayerCustomMediaPropsToAttributes as C, webPlayerIconPropsToAttributes as g } from "@car-cutter/wc-webplayer";
 v();
-const g = i({
+const S = i({
   props: {
     compositionUrl: { type: String, required: !0 },
-    hideCategories: Boolean,
+    hideCategoriesNav: Boolean,
     infiniteCarrousel: Boolean,
     permanentGallery: Boolean,
     mediaLoadStrategy: String,
     minMediaWidth: Number,
     maxMediaWidth: Number,
     preloadRange: Number,
-    preventFullScreen: Boolean,
+    autoLoad360: Boolean,
+    categoriesFilter: String,
+    extendBehavior: String,
     eventPrefix: String,
+    demoSpin: Boolean,
     reverse360: Boolean
   },
   data() {
@@ -24,23 +27,23 @@ const g = i({
   },
   computed: {
     attributes() {
-      return C(this.$props);
+      return L(this.$props);
     }
   },
   methods: {
     generateEventName(e) {
-      return `${this.eventPrefix || _}${e}`;
+      return `${this.eventPrefix || d}${e}`;
     },
     setupEventListeners() {
       const e = {
-        [d]: (t) => this.$emit("compositionLoading", t),
+        [_]: (t) => this.$emit("compositionLoading", t),
         [l]: (t) => this.$emit("compositionLoaded", t),
         [f]: (t) => this.$emit("compositionLoadError", t),
         [O]: (t) => this.$emit("itemChange", t),
         [$]: () => this.$emit("extendModeOn"),
         [h]: () => this.$emit("extendModeOff"),
-        [b]: () => this.$emit("hotspotsOn"),
-        [N]: () => this.$emit("hotspotsOff"),
+        [N]: () => this.$emit("hotspotsOn"),
+        [b]: () => this.$emit("hotspotsOff"),
         [T]: () => this.$emit("galleryOpen"),
         [P]: () => this.$emit("galleryClose")
       };
@@ -65,59 +68,59 @@ const g = i({
     r[o] = s;
   return r;
 };
-function y(e, t, r, o, s, n) {
-  return a(), p("cc-webplayer", E(c(e.attributes)), [
-    m(e.$slots, "default")
+function M(e, t, r, o, s, n) {
+  return a(), p("cc-webplayer", m(E(e.attributes)), [
+    c(e.$slots, "default")
   ], 16);
 }
-const B = /* @__PURE__ */ u(g, [["render", y]]), S = i({
+const V = /* @__PURE__ */ u(S, [["render", M]]), y = i({
   props: {
     index: { type: Number, required: !0 },
     thumbnailSrc: String
   },
   computed: {
     attributes() {
-      return L(this.$props);
+      return C(this.$props);
     }
   }
 });
 function A(e, t, r, o, s, n) {
-  return a(), p("cc-webplayer-custom-media", E(c(e.attributes)), [
-    m(e.$slots, "default")
+  return a(), p("cc-webplayer-custom-media", m(E(e.attributes)), [
+    c(e.$slots, "default")
   ], 16);
 }
-const x = /* @__PURE__ */ u(S, [["render", A]]), D = i({
+const x = /* @__PURE__ */ u(y, [["render", A]]), D = i({
   props: {
     name: { type: String, required: !0 }
   },
   computed: {
     attributes() {
-      return M(this.$props);
+      return g(this.$props);
     }
   }
 });
 function I(e, t, r, o, s, n) {
-  return a(), p("cc-webplayer-icon", E(c(e.attributes)), [
-    m(e.$slots, "default")
+  return a(), p("cc-webplayer-icon", m(E(e.attributes)), [
+    c(e.$slots, "default")
   ], 16);
 }
 const G = /* @__PURE__ */ u(D, [["render", I]]);
 export {
-  _ as DEFAULT_EVENT_PREFIX,
+  d as DEFAULT_EVENT_PREFIX,
   l as EVENT_COMPOSITION_LOADED,
-  d as EVENT_COMPOSITION_LOADING,
+  _ as EVENT_COMPOSITION_LOADING,
   f as EVENT_COMPOSITION_LOAD_ERROR,
   h as EVENT_EXTEND_MODE_OFF,
   $ as EVENT_EXTEND_MODE_ON,
   P as EVENT_GALLERY_CLOSE,
   T as EVENT_GALLERY_OPEN,
-  N as EVENT_HOTSPOTS_OFF,
-  b as EVENT_HOTSPOTS_ON,
+  b as EVENT_HOTSPOTS_OFF,
+  N as EVENT_HOTSPOTS_ON,
   O 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,
-  B as WebPlayer,
+  V as WebPlayer,
   x as WebPlayerCustomMedia,
   G as WebPlayerIcon,
   q as generateCompositionUrl

package/package.json

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