@car-cutter/vue-webplayer 0.13.0 → 3.0.1

package/README.md

@@ -10,4 +10,4 @@ Use CarCutter WebPlayer in your Vue.js app
 
 ### Next Steps
 
-For more customisation, take a look at the **[Online Documentation](https://carcutter.github.io/cars-webplayer-js/)**
+For more customization, take a look at the **[Online Documentation](https://carcutter.github.io/cars-webplayer-js/)**

package/dist/index.cjs

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

package/dist/index.d.ts

@@ -231,8 +231,10 @@ declare type WebPlayerIconName =
 | "UI_PLAY" // Play video
 | "UI_PLUS" // Increase zoom
 | "UI_REDUCE" // Reducing an extended view
-| "UI_360" // 360-degree view
-| "UI_INTERIOR_360" // interior 360 view
+| "UI_360" // Exterior 360 view
+| "UI_360_PLAY" // Play exterior 360
+| "UI_INTERIOR_360" // Interior 360 view
+| "UI_INTERIOR_360_PLAY" // Play interior 360 view
 | "UI_VOLUME" // Video volume
 | "UI_VOLUME_OFF" // Muted video
 | "CONTROLS_PREV" // Go to previous media
@@ -252,6 +254,10 @@ export declare type WebPlayerProps = WebPlayerProps_2 & {
 declare type WebPlayerProps_2 = {
     compositionUrl: string;
 
+    // Integration mode
+    integration?: boolean;
+    maxItemsShown?: number;
+
     // Layout
     hideCategoriesNav?: boolean;
     infiniteCarrousel?: boolean;

package/dist/index.js

@@ -1,11 +1,13 @@
 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 { D as A, E as I, a as v, b as W, c as B, d as S, e as x, f as D, g as R, h as V, i as w } from "./utils-TWVtfImY.js";
 import { j as K, k as Q, W as Z, l as ee } from "./utils-TWVtfImY.js";
 import { ensureCustomElementsDefinition as G, webPlayerPropsToAttributes as F, webPlayerCustomMediaPropsToAttributes as $, webPlayerIconPropsToAttributes as U } from "@car-cutter/wc-webplayer";
 const X = /* @__PURE__ */ l({
   __name: "WebPlayer",
   props: {
     compositionUrl: {},
+    integration: { type: Boolean },
+    maxItemsShown: {},
     hideCategoriesNav: { type: Boolean },
     infiniteCarrousel: { type: Boolean },
     permanentGallery: { type: Boolean },
@@ -26,7 +28,7 @@ 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 ?? {} }, y = F(u), o = i, P = s.eventPrefix ?? A, T = (e) => `${P}${e}`, L = {
+    const s = n, { class: a, style: p, ...u } = s, y = { display: "block", ...p ?? {} }, f = F(u), o = i, P = s.eventPrefix ?? A, T = (e) => `${P}${e}`, L = {
       [w]: (e) => o("compositionLoading", e),
       [V]: (e) => o("compositionLoaded", e),
       [R]: (e) => o("compositionLoadError", e),
@@ -35,25 +37,25 @@ const X = /* @__PURE__ */ l({
       [S]: () => o("extendModeOff"),
       [B]: () => o("hotspotsOn"),
       [W]: () => o("hotspotsOff"),
-      [I]: () => o("galleryOpen"),
-      [v]: () => o("galleryClose")
-    }, p = /* @__PURE__ */ new Map();
+      [v]: () => o("galleryOpen"),
+      [I]: () => o("galleryClose")
+    }, c = /* @__PURE__ */ new Map();
     return Object.entries(L).forEach(([e, t]) => {
       if (!t)
         return;
       const N = T(e), b = (C) => t(C.detail);
-      p.set(N, b);
+      c.set(N, b);
     }), M(() => {
-      p.forEach((e, t) => {
+      c.forEach((e, t) => {
         document.addEventListener(t, e);
       });
     }), h(() => {
-      p.forEach((e, t) => {
+      c.forEach((e, t) => {
         document.removeEventListener(t, e);
       });
-    }), (e, t) => (_(), E("cc-webplayer", g(r(y), {
+    }), (e, t) => (_(), E("cc-webplayer", g(r(f), {
       class: r(a),
-      style: f
+      style: y
     }), [
       m(e.$slots, "default")
     ], 16));
@@ -66,7 +68,7 @@ const X = /* @__PURE__ */ l({
   },
   setup(n) {
     const s = $(n);
-    return (a, c) => (_(), E("cc-webplayer-custom-media", d(O(r(s))), [
+    return (a, p) => (_(), E("cc-webplayer-custom-media", d(O(r(s))), [
       m(a.$slots, "default")
     ], 16));
   }
@@ -77,7 +79,7 @@ const X = /* @__PURE__ */ l({
   },
   setup(n) {
     const s = U(n);
-    return (a, c) => (_(), E("cc-webplayer-icon", d(O(r(s))), [
+    return (a, p) => (_(), E("cc-webplayer-icon", d(O(r(s))), [
       m(a.$slots, "default")
     ], 16));
   }
@@ -89,8 +91,8 @@ export {
   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,
+  I as EVENT_GALLERY_CLOSE,
+  v as EVENT_GALLERY_OPEN,
   W as EVENT_HOTSPOTS_OFF,
   B as EVENT_HOTSPOTS_ON,
   D as EVENT_ITEM_CHANGE,

package/dist/vue2.d.ts

@@ -225,8 +225,10 @@ declare type WebPlayerIconName =
 | "UI_PLAY" // Play video
 | "UI_PLUS" // Increase zoom
 | "UI_REDUCE" // Reducing an extended view
-| "UI_360" // 360-degree view
-| "UI_INTERIOR_360" // interior 360 view
+| "UI_360" // Exterior 360 view
+| "UI_360_PLAY" // Play exterior 360
+| "UI_INTERIOR_360" // Interior 360 view
+| "UI_INTERIOR_360_PLAY" // Play interior 360 view
 | "UI_VOLUME" // Video volume
 | "UI_VOLUME_OFF" // Muted video
 | "CONTROLS_PREV" // Go to previous media
@@ -241,6 +243,10 @@ export declare type WebPlayerIconProps = {
 export declare type WebPlayerProps = {
     compositionUrl: string;
 
+    // Integration mode
+    integration?: boolean;
+    maxItemsShown?: number;
+
     // Layout
     hideCategoriesNav?: boolean;
     infiniteCarrousel?: boolean;

package/package.json

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