@shopify/hydrogen-react
Version:
React components, hooks, and utilities for creating custom Shopify storefronts
144 lines (143 loc) • 7.56 kB
JavaScript
;
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
const require$$0 = require("react");
const loadScript = require("./load-script.js");
const jsxRuntime = require("react/jsx-runtime");
function ModelViewer(props) {
var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k;
const [modelViewer, setModelViewer] = require$$0.useState(void 0);
const callbackRef = require$$0.useCallback((node) => {
setModelViewer(node);
}, []);
const {
data,
children,
className,
...passthroughProps
} = props;
const modelViewerLoadedStatus = loadScript.useLoadScript("https://unpkg.com/@google/model-viewer@v1.12.1/dist/model-viewer.min.js", {
module: true
});
require$$0.useEffect(() => {
if (!modelViewer) {
return;
}
if (passthroughProps.onError)
modelViewer.addEventListener("error", passthroughProps.onError);
if (passthroughProps.onLoad)
modelViewer.addEventListener("load", passthroughProps.onLoad);
if (passthroughProps.onPreload)
modelViewer.addEventListener("preload", passthroughProps.onPreload);
if (passthroughProps.onModelVisibility)
modelViewer.addEventListener("model-visibility", passthroughProps.onModelVisibility);
if (passthroughProps.onProgress)
modelViewer.addEventListener("progress", passthroughProps.onProgress);
if (passthroughProps.onArStatus)
modelViewer.addEventListener("ar-status", passthroughProps.onArStatus);
if (passthroughProps.onArTracking)
modelViewer.addEventListener("ar-tracking", passthroughProps.onArTracking);
if (passthroughProps.onQuickLookButtonTapped)
modelViewer.addEventListener("quick-look-button-tapped", passthroughProps.onQuickLookButtonTapped);
if (passthroughProps.onCameraChange)
modelViewer.addEventListener("camera-change", passthroughProps.onCameraChange);
if (passthroughProps.onEnvironmentChange)
modelViewer.addEventListener("environment-change", passthroughProps.onEnvironmentChange);
if (passthroughProps.onPlay)
modelViewer.addEventListener("play", passthroughProps.onPlay);
if (passthroughProps.onPause)
modelViewer.addEventListener("ar-status", passthroughProps.onPause);
if (passthroughProps.onSceneGraphReady)
modelViewer.addEventListener("scene-graph-ready", passthroughProps.onSceneGraphReady);
return () => {
if (modelViewer == null) {
return;
}
if (passthroughProps.onError)
modelViewer.removeEventListener("error", passthroughProps.onError);
if (passthroughProps.onLoad)
modelViewer.removeEventListener("load", passthroughProps.onLoad);
if (passthroughProps.onPreload)
modelViewer.removeEventListener("preload", passthroughProps.onPreload);
if (passthroughProps.onModelVisibility)
modelViewer.removeEventListener("model-visibility", passthroughProps.onModelVisibility);
if (passthroughProps.onProgress)
modelViewer.removeEventListener("progress", passthroughProps.onProgress);
if (passthroughProps.onArStatus)
modelViewer.removeEventListener("ar-status", passthroughProps.onArStatus);
if (passthroughProps.onArTracking)
modelViewer.removeEventListener("ar-tracking", passthroughProps.onArTracking);
if (passthroughProps.onQuickLookButtonTapped)
modelViewer.removeEventListener("quick-look-button-tapped", passthroughProps.onQuickLookButtonTapped);
if (passthroughProps.onCameraChange)
modelViewer.removeEventListener("camera-change", passthroughProps.onCameraChange);
if (passthroughProps.onEnvironmentChange)
modelViewer.removeEventListener("environment-change", passthroughProps.onEnvironmentChange);
if (passthroughProps.onPlay)
modelViewer.removeEventListener("play", passthroughProps.onPlay);
if (passthroughProps.onPause)
modelViewer.removeEventListener("ar-status", passthroughProps.onPause);
if (passthroughProps.onSceneGraphReady)
modelViewer.removeEventListener("scene-graph-ready", passthroughProps.onSceneGraphReady);
};
}, [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__ */ jsxRuntime.jsx("model-viewer", {
ref: callbackRef,
...passthroughProps,
className,
id: (_c = passthroughProps.id) != null ? _c : data.id,
src: data.sources[0].url,
alt: (_d = data.alt) != null ? _d : null,
"camera-controls": (_e = passthroughProps.cameraControls) != null ? _e : true,
poster: (_g = passthroughProps.poster || ((_f = data.previewImage) == null ? void 0 : _f.url)) != null ? _g : null,
autoplay: (_h = passthroughProps.autoplay) != null ? _h : 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": (_i = passthroughProps.interpolationDecay) != null ? _i : 100,
"skybox-image": passthroughProps.skyboxImage,
"environment-image": passthroughProps.environmentImage,
exposure: passthroughProps.exposure,
"shadow-intensity": (_j = passthroughProps.shadowIntensity) != null ? _j : 0,
"shadow-softness": (_k = passthroughProps.shadowSoftness) != null ? _k : 0,
"animation-name": passthroughProps.animationName,
"animation-crossfade-duration": passthroughProps.animationCrossfadeDuration,
"variant-name": passthroughProps.variantName,
orientation: passthroughProps.orientation,
scale: passthroughProps.scale,
children
});
}
exports.ModelViewer = ModelViewer;
//# sourceMappingURL=ModelViewer.js.map