@car-cutter/vue-webplayer 0.8.0 → 0.10.0

package/dist/utils-CbTbWQZC.cjs

@@ -0,0 +1 @@
+"use strict";const O="cc-webplayer",o="cc-webplayer-custom-media",T="cc-webplayer-icon",N="composition-loading",t="composition-loaded",c="composition-load-error",n="item-change",e="extend-mode-on",s="extend-mode-off",A="hotspots-on",L="hotspots-off",C="gallery-open",I="gallery-close",V="cc-webplayer:";function D(E,_){return`https://cdn.car-cutter.com/gallery/${E}/${_}/composition_v3.json`}exports.DEFAULT_EVENT_PREFIX=V;exports.EVENT_COMPOSITION_LOADED=t;exports.EVENT_COMPOSITION_LOADING=N;exports.EVENT_COMPOSITION_LOAD_ERROR=c;exports.EVENT_EXTEND_MODE_OFF=s;exports.EVENT_EXTEND_MODE_ON=e;exports.EVENT_GALLERY_CLOSE=I;exports.EVENT_GALLERY_OPEN=C;exports.EVENT_HOTSPOTS_OFF=L;exports.EVENT_HOTSPOTS_ON=A;exports.EVENT_ITEM_CHANGE=n;exports.WEB_PLAYER_CUSTOM_MEDIA_WC_TAG=o;exports.WEB_PLAYER_ICON_WC_TAG=T;exports.WEB_PLAYER_WC_TAG=O;exports.generateCompositionUrl=D;

package/dist/utils-_R5huBBV.js

@@ -0,0 +1,21 @@
+const s = "cc-webplayer", _ = "cc-webplayer-custom-media", c = "cc-webplayer-icon", t = "composition-loading", n = "composition-loaded", e = "composition-load-error", a = "item-change", O = "extend-mode-on", T = "extend-mode-off", N = "hotspots-on", r = "hotspots-off", i = "gallery-open", l = "gallery-close", p = "cc-webplayer:";
+function A(o, E) {
+  return `https://cdn.car-cutter.com/gallery/${o}/${E}/composition_v3.json`;
+}
+export {
+  p as D,
+  t 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,
+  _ as j,
+  c as k,
+  A as l
+};

package/dist/vue2.cjs

@@ -0,0 +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;

package/dist/vue2.d.ts

@@ -0,0 +1,239 @@
+import { ComponentOptionsMixin } from 'vue';
+import { ComponentProvideOptions } from 'vue';
+import { DefineComponent } from 'vue';
+import { ExtractPropTypes } from 'vue';
+import { PublicProps } from 'vue';
+
+declare type AspectRatio = `${number}:${number}`;
+
+declare type CamelToDashed<S extends string> = S extends `${infer T}${infer U}`
+? `${T extends Lowercase<T> ? "" : "-"}${Lowercase<T>}${CamelToDashed<U>}`
+: S;
+
+declare type Category = {
+    id: string;
+    title: string;
+    items: Item[];
+};
+
+export declare type Composition = {
+    aspectRatio: AspectRatio;
+    imageHdWidth: MediaWidth;
+    imageSubWidths: MediaWidth[];
+    categories: Category[];
+};
+
+export declare const DEFAULT_EVENT_PREFIX = "cc-webplayer:" satisfies string;
+
+export declare const EVENT_COMPOSITION_LOAD_ERROR = "composition-load-error";
+
+export declare const EVENT_COMPOSITION_LOADED = "composition-loaded";
+
+export declare const EVENT_COMPOSITION_LOADING = "composition-loading";
+
+export declare const EVENT_EXTEND_MODE_OFF = "extend-mode-off";
+
+export declare const EVENT_EXTEND_MODE_ON = "extend-mode-on";
+
+export declare const EVENT_GALLERY_CLOSE = "gallery-close";
+
+export declare const EVENT_GALLERY_OPEN = "gallery-open";
+
+export declare const EVENT_HOTSPOTS_OFF = "hotspots-off";
+
+export declare const EVENT_HOTSPOTS_ON = "hotspots-on";
+
+export declare const EVENT_ITEM_CHANGE = "item-change";
+
+/**
+ * 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} vin - The Vehicle Identification Number.
+ * @returns {string} The URL to fetch the composition JSON.
+ */
+export declare function generateCompositionUrl(
+hashedCustomerId: string,
+vin: string
+): string {
+    return `https://cdn.car-cutter.com/gallery/${hashedCustomerId}/${vin}/composition_v3.json`;
+}
+
+declare type Hotspot = {
+    title: string;
+    icon?: string;
+    description?: string;
+    position: {
+        x: number;
+        y: number;
+    };
+    detail?: {
+        type: "image" | "link" | "pdf";
+        src: string;
+    };
+};
+
+declare type ImageItem = { type: "image" } & ImageWithHotspots;
+
+declare type ImageWithHotspots = {
+    src: string;
+    hotspots?: Hotspot[];
+};
+
+export declare type Item = ImageItem | VideoItem | ThreeSixtyItem;
+
+export declare type MediaLoadStrategy = "quality" | "balanced" | "speed";
+
+declare type MediaWidth = number;
+
+declare type PropsToAttributes<T> = {
+    [K in keyof T as CamelToDashed<string & K>]: ToStringOrOptional<T[K]>;
+};
+
+declare type ThreeSixtyItem = {
+    type: "360";
+    images: ImageWithHotspots[];
+};
+
+declare type ToStringOrOptional<T> = T extends undefined
+? string | undefined
+: string;
+
+declare type VideoItem = {
+    type: "video";
+    src: string;
+    poster?: string;
+};
+
+export declare const WEB_PLAYER_CUSTOM_MEDIA_WC_TAG = "cc-webplayer-custom-media";
+
+export declare const WEB_PLAYER_ICON_WC_TAG = "cc-webplayer-icon";
+
+export declare const WEB_PLAYER_WC_TAG = "cc-webplayer";
+
+export declare const WebPlayer: DefineComponent<ExtractPropTypes<    {
+compositionUrl: {
+type: StringConstructor;
+required: true;
+};
+hideCategories: BooleanConstructor;
+infiniteCarrousel: BooleanConstructor;
+permanentGallery: BooleanConstructor;
+mediaLoadStrategy: StringConstructor;
+minMediaWidth: NumberConstructor;
+maxMediaWidth: NumberConstructor;
+preloadRange: NumberConstructor;
+preventFullScreen: BooleanConstructor;
+eventPrefix: StringConstructor;
+reverse360: BooleanConstructor;
+}>, {}, {
+eventCbMap: Map<string, EventListener>;
+}, {
+attributes(): PropsToAttributes<WebPlayerProps>;
+}, {
+generateEventName(event: string): string;
+setupEventListeners(): void;
+}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<ExtractPropTypes<    {
+compositionUrl: {
+type: StringConstructor;
+required: true;
+};
+hideCategories: BooleanConstructor;
+infiniteCarrousel: BooleanConstructor;
+permanentGallery: BooleanConstructor;
+mediaLoadStrategy: StringConstructor;
+minMediaWidth: NumberConstructor;
+maxMediaWidth: NumberConstructor;
+preloadRange: NumberConstructor;
+preventFullScreen: BooleanConstructor;
+eventPrefix: StringConstructor;
+reverse360: BooleanConstructor;
+}>> & Readonly<{}>, {
+hideCategories: boolean;
+infiniteCarrousel: boolean;
+permanentGallery: boolean;
+preventFullScreen: boolean;
+reverse360: boolean;
+}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
+
+export declare const WebPlayerCustomMedia: DefineComponent<ExtractPropTypes<    {
+index: {
+type: NumberConstructor;
+required: true;
+};
+thumbnailSrc: StringConstructor;
+}>, {}, {}, {
+attributes(): PropsToAttributes<WebPlayerCustomMediaProps>;
+}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<ExtractPropTypes<    {
+index: {
+type: NumberConstructor;
+required: true;
+};
+thumbnailSrc: StringConstructor;
+}>> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
+
+export declare type WebPlayerCustomMediaProps = {
+    index: number;
+    thumbnailSrc?: string;
+};
+
+export declare const WebPlayerIcon: DefineComponent<ExtractPropTypes<    {
+name: {
+type: StringConstructor;
+required: true;
+};
+}>, {}, {}, {
+attributes(): PropsToAttributes<WebPlayerIconProps>;
+}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<ExtractPropTypes<    {
+name: {
+type: StringConstructor;
+required: true;
+};
+}>> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
+
+declare type WebPlayerIconName =
+| "UI_ARROW_RIGHT" // Right arrow navigation (is mirrored on X axis for left arrow)
+| "UI_BURGER" // Toggle Burger menu
+| "UI_CLOSE" // Exit zoom, details or full screen
+| "UI_EXTEND" // Extend the view (and go full screen if possible)
+| "UI_GALLERY" // Toggle gallery view
+| "UI_HOTSPOTS" // Toggle Hotspots
+| "UI_IMAGE" // Hotspot with detail image
+| "UI_MINUS" // Reduce zoom
+| "UI_PAUSE" // Pause video
+| "UI_PLAY" // Play video
+| "UI_PLUS" // Increase zoom
+| "UI_REDUCE" // Reducing an extended view
+| "UI_360" // 360-degree view
+| "UI_VOLUME" // Video volume
+| "UI_VOLUME_OFF" // Muted video
+| "CONTROLS_PREV" // Go to previous media
+| "CONTROLS_NEXT" // Go to next media
+// eslint-disable-next-line @typescript-eslint/ban-types
+| (string & {});
+
+export declare type WebPlayerIconProps = {
+    name: WebPlayerIconName;
+};
+
+export declare type WebPlayerProps = {
+    compositionUrl: string;
+
+    // Layout
+    hideCategories?: boolean;
+    infiniteCarrousel?: boolean;
+    permanentGallery?: boolean;
+
+    // Medias loading
+    mediaLoadStrategy?: MediaLoadStrategy;
+    minMediaWidth?: MediaWidth;
+    maxMediaWidth?: MediaWidth;
+    preloadRange?: number;
+
+    // Miscelaneous
+    preventFullScreen?: boolean;
+    eventPrefix?: string;
+    reverse360?: boolean;
+};
+
+export { }

package/dist/vue2.js

@@ -0,0 +1,124 @@
+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({
+  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: /* @__PURE__ */ new Map()
+    };
+  },
+  computed: {
+    attributes() {
+      return C(this.$props);
+    }
+  },
+  methods: {
+    generateEventName(e) {
+      return `${this.eventPrefix || _}${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")
+      };
+      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);
+      });
+    }
+  },
+  mounted() {
+    this.setupEventListeners();
+  },
+  beforeDestroy() {
+    this.eventCbMap.forEach((e, t) => {
+      document.removeEventListener(t, e);
+    });
+  }
+}), u = (e, t) => {
+  const r = e.__vccOpts || e;
+  for (const [o, s] of t)
+    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")
+  ], 16);
+}
+const B = /* @__PURE__ */ u(g, [["render", y]]), S = i({
+  props: {
+    index: { type: Number, required: !0 },
+    thumbnailSrc: String
+  },
+  computed: {
+    attributes() {
+      return L(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")
+  ], 16);
+}
+const x = /* @__PURE__ */ u(S, [["render", A]]), D = i({
+  props: {
+    name: { type: String, required: !0 }
+  },
+  computed: {
+    attributes() {
+      return M(this.$props);
+    }
+  }
+});
+function I(e, t, r, o, s, n) {
+  return a(), p("cc-webplayer-icon", E(c(e.attributes)), [
+    m(e.$slots, "default")
+  ], 16);
+}
+const G = /* @__PURE__ */ u(D, [["render", I]]);
+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,
+  Y as WEB_PLAYER_CUSTOM_MEDIA_WC_TAG,
+  k as WEB_PLAYER_ICON_WC_TAG,
+  U as WEB_PLAYER_WC_TAG,
+  B as WebPlayer,
+  x as WebPlayerCustomMedia,
+  G as WebPlayerIcon,
+  q as generateCompositionUrl
+};

package/package.json

@@ -1,11 +1,12 @@
 {
   "name": "@car-cutter/vue-webplayer",
-  "version": "0.8.0",
-  "license": "UNLICENSED",
+  "version": "0.10.0",
+  "license": "Apache-2.0",
   "author": {
     "name": "CarCutter",
     "url": "https://www.car-cutter.com/"
   },
+  "homepage": "https://carcutter.github.io/cars-webplayer-js/",
   "description": "Use CarCutter WebPlayer in your Vue app",
   "keywords": [
     "car-cutter",
@@ -13,26 +14,41 @@
     "vue"
   ],
   "type": "module",
-  "main": "dist/index.umd.cjs",
+  "main": "dist/index.cjs",
   "module": "dist/index.js",
   "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    },
+    "./vue2": {
+      "types": "./dist/vue2.d.ts",
+      "import": "./dist/vue2.js",
+      "require": "./dist/vue2.cjs"
+    }
+  },
   "files": [
     "dist",
     "package.json",
-    "README.md"
+    "README.md",
+    "LICENSE"
   ],
   "scripts": {
     "build": "vue-tsc -b && vite build",
     "lint": "eslint . --ext ts --max-warnings 0",
     "analyze": "vite-bundle-visualizer"
   },
+  "dependencies": {
+    "@car-cutter/wc-webplayer": "0.10.0"
+  },
   "peerDependencies": {
-    "vue": ">=3"
+    "vue": ">=2"
   },
   "devDependencies": {
     "@car-cutter/eslint-config": "*",
     "@car-cutter/typescript-config": "*",
-    "@car-cutter/wc-webplayer": "0.8.0",
     "@vitejs/plugin-vue": "^5.1.3",
     "browserslist": "^4.23.3",
     "browserslist-to-esbuild": "^2.1.1",