@car-cutter/vue-webplayer 0.10.0 → 0.12.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},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))}}),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 = {
@@ -157,7 +159,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";
 
@@ -221,6 +232,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
@@ -241,7 +253,7 @@ declare type WebPlayerProps_2 = {
     compositionUrl: string;
 
     // Layout
-    hideCategories?: boolean;
+    hideCategoriesNav?: boolean;
     infiniteCarrousel?: boolean;
     permanentGallery?: boolean;
 
@@ -250,10 +262,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,20 +1,24 @@
-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 { j as K, k as Q, W as Z, l as ee } from "./utils-_R5huBBV.js";
+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 v, a as I, 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({
   __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 },
+    autoLoadInterior360: { type: Boolean },
+    categoriesFilter: {},
+    extendBehavior: {},
     eventPrefix: {},
+    demoSpin: { type: Boolean },
     reverse360: { type: Boolean },
     class: {},
     style: {}
@@ -22,23 +26,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),
-      [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"),
-      [w]: () => o("galleryClose")
+    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}`, 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"),
+      [I]: () => o("galleryOpen"),
+      [v]: () => o("galleryClose")
     }, p = /* @__PURE__ */ new Map();
-    return Object.entries(N).forEach(([e, t]) => {
+    return Object.entries(L).forEach(([e, t]) => {
       if (!t)
         return;
-      const b = y(e), C = (L) => t(L.detail);
-      p.set(b, C);
+      const N = T(e), b = (C) => t(C.detail);
+      p.set(N, b);
     }), M(() => {
       p.forEach((e, t) => {
         document.addEventListener(t, e);
@@ -47,7 +51,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
     }), [
@@ -62,7 +66,7 @@ const X = /* @__PURE__ */ l({
   },
   setup(n) {
     const s = $(n);
-    return (a, c) => (E(), _("cc-webplayer-custom-media", d(O(r(s))), [
+    return (a, c) => (_(), E("cc-webplayer-custom-media", d(O(r(s))), [
       m(a.$slots, "default")
     ], 16));
   }
@@ -73,23 +77,23 @@ const X = /* @__PURE__ */ l({
   },
   setup(n) {
     const s = U(n);
-    return (a, c) => (E(), _("cc-webplayer-icon", d(O(r(s))), [
+    return (a, c) => (_(), E("cc-webplayer-icon", d(O(r(s))), [
       m(a.$slots, "default")
     ], 16));
   }
 });
 export {
-  g as DEFAULT_EVENT_PREFIX,
-  v as EVENT_COMPOSITION_LOADED,
-  W as EVENT_COMPOSITION_LOADING,
-  I as EVENT_COMPOSITION_LOAD_ERROR,
-  x as EVENT_EXTEND_MODE_OFF,
-  D 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,
-  S as EVENT_ITEM_CHANGE,
+  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,
+  v as EVENT_GALLERY_CLOSE,
+  I 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,

package/dist/{utils-_R5huBBV.js → utils-TWVtfImY.js}

@@ -4,17 +4,17 @@ function A(o, E) {
 }
 export {
   p as D,
-  t as E,
+  l as E,
   s as W,
-  n as a,
-  e as b,
-  a as c,
-  O as d,
-  T as e,
-  N as f,
-  r as g,
-  i as h,
-  l as i,
+  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

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,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;

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 = {
@@ -80,7 +82,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";
 
@@ -116,15 +127,19 @@ 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;
+autoLoadInterior360: BooleanConstructor;
+categoriesFilter: StringConstructor;
+extendBehavior: StringConstructor;
 eventPrefix: StringConstructor;
+demoSpin: BooleanConstructor;
 reverse360: BooleanConstructor;
 }>, {}, {
 eventCbMap: Map<string, EventListener>;
@@ -138,21 +153,27 @@ 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;
+autoLoadInterior360: BooleanConstructor;
+categoriesFilter: StringConstructor;
+extendBehavior: StringConstructor;
 eventPrefix: StringConstructor;
+demoSpin: BooleanConstructor;
 reverse360: BooleanConstructor;
 }>> & Readonly<{}>, {
-hideCategories: boolean;
+hideCategoriesNav: boolean;
 infiniteCarrousel: boolean;
 permanentGallery: boolean;
-preventFullScreen: boolean;
+autoLoad360: boolean;
+autoLoadInterior360: boolean;
+demoSpin: boolean;
 reverse360: boolean;
 }, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
 
@@ -205,6 +226,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
@@ -220,7 +242,7 @@ export declare type WebPlayerProps = {
     compositionUrl: string;
 
     // Layout
-    hideCategories?: boolean;
+    hideCategoriesNav?: boolean;
     infiniteCarrousel?: boolean;
     permanentGallery?: boolean;
 
@@ -229,10 +251,14 @@ export declare type WebPlayerProps = {
     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/vue2.js

@@ -1,20 +1,24 @@
-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 { 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";
-v();
-const g = i({
+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({
   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,
+    autoLoadInterior360: Boolean,
+    categoriesFilter: String,
+    extendBehavior: String,
     eventPrefix: String,
+    demoSpin: Boolean,
     reverse360: Boolean
   },
   data() {
@@ -24,30 +28,30 @@ const g = i({
   },
   computed: {
     attributes() {
-      return C(this.$props);
+      return v(this.$props);
     }
   },
   methods: {
     generateEventName(e) {
-      return `${this.eventPrefix || _}${e}`;
+      return `${this.eventPrefix || d}${e}`;
     },
     setupEventListeners() {
       const e = {
-        [d]: (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"),
-        [T]: () => this.$emit("galleryOpen"),
-        [P]: () => this.$emit("galleryClose")
+        [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")
       };
       Object.entries(e).forEach(([t, r]) => {
         if (!r) return;
-        const o = this.generateEventName(t), s = (n) => r(n.detail);
-        this.eventCbMap.set(o, s), document.addEventListener(o, s);
+        const o = this.generateEventName(t), n = (s) => r(s.detail);
+        this.eventCbMap.set(o, n), document.addEventListener(o, n);
       });
     }
   },
@@ -61,63 +65,63 @@ const g = i({
   }
 }), u = (e, t) => {
   const r = e.__vccOpts || e;
-  for (const [o, s] of t)
-    r[o] = s;
+  for (const [o, n] of t)
+    r[o] = n;
   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, n, s) {
+  return p(), a("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")
+function A(e, t, r, o, n, s) {
+  return p(), a("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]]), I = 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")
+function B(e, t, r, o, n, s) {
+  return p(), a("cc-webplayer-icon", m(E(e.attributes)), [
+    c(e.$slots, "default")
   ], 16);
 }
-const G = /* @__PURE__ */ u(D, [["render", I]]);
+const G = /* @__PURE__ */ u(I, [["render", B]]);
 export {
-  _ as DEFAULT_EVENT_PREFIX,
-  l as EVENT_COMPOSITION_LOADED,
-  d 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,
-  O as EVENT_ITEM_CHANGE,
+  d as DEFAULT_EVENT_PREFIX,
+  T 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,
-  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.12.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.12.0"
   },
   "peerDependencies": {
     "vue": ">=2"
@@ -54,7 +54,7 @@
     "browserslist-to-esbuild": "^2.1.1",
     "eslint": "^8.57.0",
     "typescript": "^5.5.4",
-    "vite": "^5.4.1",
+    "vite": "^5.4.18",
     "vite-bundle-visualizer": "^1.2.1",
     "vite-plugin-dts": "^4.2.1",
     "vue": "^3.5.6",