@shopify/hydrogen-react/dist/browser-prod/ModelViewer.mjs

React components, hooks, and utilities for creating custom Shopify storefronts

import { jsx } from "react/jsx-runtime";
import { useState, useCallback, useEffect } from "react";
import { useLoadScript } from "./load-script.mjs";
function ModelViewer(props) {
  var _a, _b, _c;
  const [modelViewer, setModelViewer] = useState(
    void 0
  );
  const callbackRef = useCallback((node) => {
    setModelViewer(node);
  }, []);
  const { data, children, className, ...passthroughProps } = props;
  const modelViewerLoadedStatus = useLoadScript(
    "https://unpkg.com/@google/model-viewer@v1.12.1/dist/model-viewer.min.js",
    {
      module: true
    }
  );
  useEffect(() => {
    const hydrogenEventListener = {
      error: passthroughProps.onError,
      load: passthroughProps.onLoad,
      preload: passthroughProps.onPreload,
      "model-visibility": passthroughProps.onModelVisibility,
      progress: passthroughProps.onProgress,
      "ar-status": passthroughProps.onArStatus,
      "ar-tracking": passthroughProps.onArTracking,
      "quick-look-button-tapped": passthroughProps.onQuickLookButtonTapped,
      "camera-change": passthroughProps.onCameraChange,
      "environment-change": passthroughProps.onEnvironmentChange,
      play: passthroughProps.onPlay,
      pause: passthroughProps.onPause,
      "scene-graph-ready": passthroughProps.onSceneGraphReady
    };
    if (!modelViewer) {
      return;
    }
    Object.entries(hydrogenEventListener).forEach(
      ([eventName, callbackFunc]) => {
        if (callbackFunc) {
          modelViewer.addEventListener(eventName, callbackFunc);
        }
      }
    );
    return () => {
      if (modelViewer == null) {
        return;
      }
      Object.entries(hydrogenEventListener).forEach(
        ([eventName, callbackFunc]) => {
          if (callbackFunc) {
            modelViewer.removeEventListener(eventName, callbackFunc);
          }
        }
      );
    };
  }, [
    modelViewer,
    passthroughProps.onArStatus,
    passthroughProps.onArTracking,
    passthroughProps.onCameraChange,
    passthroughProps.onEnvironmentChange,
    passthroughProps.onError,
    passthroughProps.onLoad,
    passthroughProps.onModelVisibility,
    passthroughProps.onPause,
    passthroughProps.onPlay,
    passthroughProps.onPreload,
    passthroughProps.onProgress,
    passthroughProps.onQuickLookButtonTapped,
    passthroughProps.onSceneGraphReady
  ]);
  if (modelViewerLoadedStatus !== "done") {
    return null;
  }
  if (!((_b = (_a = data.sources) == null ? void 0 : _a[0]) == null ? void 0 : _b.url)) {
    const sourcesUrlError = `<ModelViewer/> requires 'data.sources' prop to be an array, with an object that has a property 'url' on it. Rendering 'null'`;
    {
      console.error(sourcesUrlError);
      return null;
    }
  }
  return /* @__PURE__ */ jsx(
    "model-viewer",
    {
      ref: callbackRef,
      ...passthroughProps,
      class: className,
      id: passthroughProps.id ?? data.id,
      src: data.sources[0].url,
      alt: data.alt ?? null,
      "camera-controls": passthroughProps.cameraControls ?? true,
      poster: (passthroughProps.poster || ((_c = data.previewImage) == null ? void 0 : _c.url)) ?? null,
      autoplay: passthroughProps.autoplay ?? true,
      loading: passthroughProps.loading,
      reveal: passthroughProps.reveal,
      ar: passthroughProps.ar,
      "ar-modes": passthroughProps.arModes,
      "ar-scale": passthroughProps.arScale,
      "ar-placement": passthroughProps.arPlacement,
      "ios-src": passthroughProps.iosSrc,
      "touch-action": passthroughProps.touchAction,
      "disable-zoom": passthroughProps.disableZoom,
      "orbit-sensitivity": passthroughProps.orbitSensitivity,
      "auto-rotate": passthroughProps.autoRotate,
      "auto-rotate-delay": passthroughProps.autoRotateDelay,
      "rotation-per-second": passthroughProps.rotationPerSecond,
      "interaction-policy": passthroughProps.interactionPolicy,
      "interaction-prompt": passthroughProps.interactionPrompt,
      "interaction-prompt-style": passthroughProps.interactionPromptStyle,
      "interaction-prompt-threshold": passthroughProps.interactionPromptThreshold,
      "camera-orbit": passthroughProps.cameraOrbit,
      "camera-target": passthroughProps.cameraTarget,
      "field-of-view": passthroughProps.fieldOfView,
      "max-camera-orbit": passthroughProps.maxCameraOrbit,
      "min-camera-orbit": passthroughProps.minCameraOrbit,
      "max-field-of-view": passthroughProps.maxFieldOfView,
      "min-field-of-view": passthroughProps.minFieldOfView,
      bounds: passthroughProps.bounds,
      "interpolation-decay": passthroughProps.interpolationDecay ?? 100,
      "skybox-image": passthroughProps.skyboxImage,
      "environment-image": passthroughProps.environmentImage,
      exposure: passthroughProps.exposure,
      "shadow-intensity": passthroughProps.shadowIntensity ?? 0,
      "shadow-softness": passthroughProps.shadowSoftness ?? 0,
      "animation-name": passthroughProps.animationName,
      "animation-crossfade-duration": passthroughProps.animationCrossfadeDuration,
      "variant-name": passthroughProps.variantName,
      orientation: passthroughProps.orientation,
      scale: passthroughProps.scale,
      children
    }
  );
}
export {
  ModelViewer
};
//# sourceMappingURL=ModelViewer.mjs.map