@car-cutter/react-webplayer 0.8.0 → 0.10.0

package/dist/legacy.cjs

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

package/dist/legacy.d.ts

@@ -0,0 +1,169 @@
+import { FC } from 'react';
+import { PropsWithChildren } from 'react';
+
+declare type AspectRatio = `${number}:${number}`;
+
+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 ThreeSixtyItem = {
+    type: "360";
+    images: ImageWithHotspots[];
+};
+
+declare type VideoItem = {
+    type: "video";
+    src: string;
+    poster?: string;
+};
+
+export declare const WEB_PLAYER_ICON_WC_TAG = "cc-webplayer-icon";
+
+export declare const WEB_PLAYER_WC_TAG = "cc-webplayer";
+
+export declare const WebPlayer: FC<WebPlayerProps>;
+
+export declare const WebPlayerCustomMedia: FC<PropsWithChildren<WebPlayerCustomMediaProps>>;
+
+export declare type WebPlayerCustomMediaProps = {
+    index: number;
+    thumbnailSrc?: string;
+};
+
+export declare const WebPlayerIcon: FC<PropsWithChildren<WebPlayerIconProps>>;
+
+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 = PropsWithChildren<WebPlayerProps_2> & {
+    onCompositionLoading?: (url: string) => void;
+    onCompositionLoaded?: (composition: Composition) => void;
+    onCompositionLoadError?: (error: unknown) => void;
+    onItemChange?: (props: {
+        index: number;
+        item: Item;
+    }) => void;
+    onExtendModeOn?: () => void;
+    onExtendModeOff?: () => void;
+    onHotspotsOn?: () => void;
+    onHotspotsOff?: () => void;
+    onGalleryOpen?: () => void;
+    onGalleryClose?: () => void;
+} & Pick<React.HTMLAttributes<HTMLElement>, "className" | "style">;
+
+declare type WebPlayerProps_2 = {
+    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/legacy.js

@@ -0,0 +1,176 @@
+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 "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);
+const v = {
+  stringify: (e) => e,
+  parse: (e) => e
+}, j = {
+  stringify: (e) => `${e}`,
+  parse: (e) => parseFloat(e)
+}, k = {
+  stringify: (e) => e ? "true" : "false",
+  parse: (e) => /^[ty1-9]/i.test(e)
+}, x = {
+  stringify: (e) => e.name,
+  parse: (e, t, n) => {
+    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(n) : void 0;
+  }
+}, F = {
+  stringify: (e) => JSON.stringify(e),
+  parse: (e) => JSON.parse(e)
+}, O = {
+  string: v,
+  number: j,
+  boolean: k,
+  function: x,
+  json: F
+};
+function G(e) {
+  return e.replace(
+    /([a-z0-9])([A-Z])/g,
+    (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");
+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) {
+    m[r] = Array.isArray(t.props) ? "string" : t.props[r];
+    const o = G(r);
+    d[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));
+      }
+    }
+    static get observedAttributes() {
+      return Object.keys(y);
+    }
+    connectedCallback() {
+      this[b] = !0, this[E]();
+    }
+    disconnectedCallback() {
+      this[b] = !1, this[p] && n.unmount(this[p]), delete this[p];
+    }
+    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]());
+    }
+    [(s = b, T = p, N = l, E)]() {
+      this[b] && (this[p] ? n.update(this[p], this[l]) : this[p] = n.mount(
+        this.container,
+        e,
+        this[l]
+      ));
+    }
+  }
+  for (const r of h) {
+    const o = d[r], u = m[r];
+    Object.defineProperty(A.prototype, r, {
+      enumerable: !0,
+      configurable: !0,
+      get() {
+        return this[l][r];
+      },
+      set(c) {
+        this[l][r] = c;
+        const i = u ? O[u] : null;
+        if (i != null && i.stringify) {
+          const a = i.stringify(c, o, this);
+          this.getAttribute(o) !== a && this.setAttribute(o, a);
+        } else
+          this[E]();
+      }
+    });
+  }
+  return A;
+}
+function Y(e, t, n) {
+  const s = P.createElement(t, n);
+  return g.render(s, e), {
+    container: e,
+    ReactComponent: t
+  };
+}
+function H({ container: e, ReactComponent: t }, n) {
+  const s = P.createElement(t, n);
+  g.render(s, e);
+}
+function U({ container: e }) {
+  g.unmountComponentAtNode(e);
+}
+function C(e, t = {}) {
+  return $(e, t, { mount: Y, update: H, unmount: U });
+}
+const B = C(W, {
+  shadow: "open",
+  props: {
+    compositionUrl: "string",
+    hideCategories: "boolean",
+    infiniteCarrousel: "boolean",
+    permanentGallery: "boolean",
+    minMediaWidth: "number",
+    maxMediaWidth: "number",
+    mediaLoadStrategy: "string",
+    preventFullScreen: "boolean",
+    eventPrefix: "string",
+    reverse360: "boolean"
+  }
+}), J = C(S, {
+  shadow: "closed",
+  props: {
+    index: "number",
+    thumbnailSrc: "string"
+  }
+}), X = C(w, {
+  shadow: "closed",
+  props: {
+    name: "string"
+  }
+});
+function q() {
+  customElements.define(L, B), customElements.define(
+    M,
+    J
+  ), customElements.define(D, X);
+}
+function z() {
+  I() || q();
+}
+z();
+export {
+  oe as DEFAULT_EVENT_PREFIX,
+  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,
+  le as EVENT_GALLERY_CLOSE,
+  pe as EVENT_GALLERY_OPEN,
+  ue 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
+};