@neurodyn/react-model-viewer 0.1.0 → 0.2.0

package/dist/index.d.ts

@@ -3,15 +3,50 @@ import { JSX } from 'react/jsx-runtime';
 import type { default as React_2 } from 'react';
 import * as React_3 from 'react';
 
+/**
+ * How long a tap may wait on a host's own AR before the native launch goes
+ * ahead instead.
+ *
+ * Chrome lets a page navigate on behalf of a tap for about five seconds, and
+ * the Scene Viewer intent is such a navigation: sent any later, the browser
+ * drops it as one nobody asked for. A host that loads its AR on the tap races
+ * the load against this, so a slow connection gets Scene Viewer for this tap
+ * and the host's AR for the next, the download having gone on meanwhile.
+ */
+export declare const AR_TAP_WINDOW_MS = 3000;
+
 /** What the host needs to open its own AR experience for the shown model. */
 export declare interface ArLaunchTarget {
+    /**
+     * The API the viewer's widget session was issued by, when the host set one.
+     * A host continuing that session has to refresh it there.
+     */
+    apiBaseUrl?: string;
+    /**
+     * The public key the viewer runs on — including one a QR handoff code
+     * resolved, which the host page never saw.
+     */
+    apiKey?: string;
     /** Material collection currently shown, which may differ from the entry url. */
     hid?: string;
+    /** The viewer's UI language, so the host's AR speaks the same one. */
+    lang?: 'en' | 'ru';
+    /** The object's display name, for the host AR's accessible label. */
+    name?: string;
     tinuuid: string;
+    /**
+     * A live token of the viewer's widget session, so the host's AR continues
+     * that session instead of activating a second one.
+     */
+    widgetSessionToken?: string;
 }
 
 declare type DialogProps = React_3.ComponentProps<typeof DialogPrimitive.Root>
 
+export declare function isIOSDevice(): boolean;
+
+export declare function isMobileArDevice(): boolean;
+
 /**
  * Lets the host open its own AR experience instead of the native one.
  *
@@ -27,9 +62,9 @@ export declare type ModelViewerArExperience = 'advanced' | 'standard';
 
 declare type ModelViewerBackground = 'default' | 'transparent';
 
-export declare function ModelViewerDialog({ tinuuid, apiKey, apiBaseUrl, appClipBundleId, initialWidgetSessionToken, handoffUrl, hid, lang, mode, sizeType, dimensionAxes, cameraOrbit, minCameraOrbit, maxCameraOrbit, ...props }: ModelViewerDialogProps): JSX.Element;
+export declare function ModelViewerDialog({ tinuuid, apiKey, apiBaseUrl, appClipBundleId, initialWidgetSessionToken, handoffUrl, hid, lang, launchAr, mode, sizeType, dimensionAxes, cameraOrbit, minCameraOrbit, maxCameraOrbit, ...props }: ModelViewerDialogProps): JSX.Element;
 
-export declare interface ModelViewerDialogProps extends Pick<ModelViewerRootProps, 'apiBaseUrl' | 'apiKey' | 'appClipBundleId' | 'cameraOrbit' | 'dimensionAxes' | 'handoffUrl' | 'hid' | 'initialWidgetSessionToken' | 'lang' | 'maxCameraOrbit' | 'minCameraOrbit' | 'mode' | 'sizeType' | 'tinuuid'>, Omit<DialogProps, 'children' | 'open' | 'defaultOpen' | 'onOpenChange' | 'modal'> {
+export declare interface ModelViewerDialogProps extends Pick<ModelViewerRootProps, 'apiBaseUrl' | 'apiKey' | 'appClipBundleId' | 'cameraOrbit' | 'dimensionAxes' | 'handoffUrl' | 'hid' | 'initialWidgetSessionToken' | 'lang' | 'launchAr' | 'maxCameraOrbit' | 'minCameraOrbit' | 'mode' | 'sizeType' | 'tinuuid'>, Omit<DialogProps, 'children' | 'open' | 'defaultOpen' | 'onOpenChange' | 'modal'> {
     /** The controlled open state of the dialog. Use with `onOpenChange`. */
     open?: DialogProps['open'];
     /** The initial open state when the dialog is uncontrolled. */
@@ -99,4 +134,7 @@ export declare type SizeAxis = 'x' | 'y' | 'z';
 
 export declare type SizeType = 'cm' | 'inch';
 
+/** The value, or `null` once the tap's window has passed; a rejection still rejects. */
+export declare function withinTapWindow<T>(promise: Promise<T>, windowMs?: number): Promise<T | null>;
+
 export { }

package/dist/index.js

@@ -478,6 +478,10 @@ var __webpack_modules__ = {
     position: static;
   }
 
+  .sticky {
+    position: sticky;
+  }
+
   .inset-0 {
     inset: calc(var(--spacing) * 0);
   }
@@ -6365,12 +6369,18 @@ function shouldRetryViewerQuery(failureCount, error) {
     return failureCount < 2;
 }
 const WIDGET_SESSION_TOKEN_HEADER = 'x-widget-session-token';
+const APP_TYPE_HEADER = 'x-app-type';
 const DEFAULT_REFRESH_THRESHOLD_MS = 30000;
 const ALLOWED_PRODUCT_TYPES = new Set([
     'core-ar',
     'core-ar-shopify'
 ]);
 const ASSUMED_HANDOFF_SESSION_TTL_SECONDS = 900;
+function getAppTypeHeaders(appType) {
+    return appType ? {
+        [APP_TYPE_HEADER]: appType
+    } : {};
+}
 async function activateCoreArWidgetSession(mode, requestConfig) {
     const activation = await publicApiControllerActivateCoreAR({
         mode
@@ -6381,6 +6391,7 @@ async function activateCoreArWidgetSession(mode, requestConfig) {
 class ModelViewerWidgetSession {
     apiBaseUrl;
     apiKey;
+    appTypeHeaders;
     issueWidgetToken;
     mode;
     now;
@@ -6390,6 +6401,7 @@ class ModelViewerWidgetSession {
     constructor(activationData, options){
         this.apiBaseUrl = options.apiBaseUrl;
         this.apiKey = options.apiKey;
+        this.appTypeHeaders = getAppTypeHeaders(options.appType);
         this.issueWidgetToken = options.issueWidgetToken ?? publicApiControllerIssueWidgetToken;
         this.mode = options.mode;
         this.now = options.now ?? Date.now;
@@ -6415,6 +6427,7 @@ class ModelViewerWidgetSession {
         return {
             baseURL: this.apiBaseUrl,
             headers: {
+                ...this.appTypeHeaders,
                 [WIDGET_SESSION_TOKEN_HEADER]: await this.getTokenForRequest()
             },
             signal
@@ -6427,6 +6440,7 @@ class ModelViewerWidgetSession {
             this.session = this.toSnapshot(await activateCoreArWidgetSession(this.mode, {
                 baseURL: this.apiBaseUrl,
                 headers: {
+                    ...this.appTypeHeaders,
                     'x-api-key': this.apiKey
                 },
                 signal
@@ -6441,6 +6455,7 @@ class ModelViewerWidgetSession {
         }, {
             baseURL: this.apiBaseUrl,
             headers: {
+                ...this.appTypeHeaders,
                 'x-api-key': this.apiKey
             }
         }).then((data)=>this.toSnapshot(parseWidgetSession(data))).then((session)=>{
@@ -6458,7 +6473,7 @@ class ModelViewerWidgetSession {
         };
     }
 }
-async function createModelViewerWidgetSession({ apiBaseUrl, apiKey, initialWidgetSessionToken, mode, signal }) {
+async function createModelViewerWidgetSession({ apiBaseUrl, apiKey, appType, initialWidgetSessionToken, mode, signal }) {
     if (initialWidgetSessionToken) return new ModelViewerWidgetSession({
         expiresIn: ASSUMED_HANDOFF_SESSION_TTL_SECONDS,
         sid: initialWidgetSessionToken,
@@ -6466,11 +6481,13 @@ async function createModelViewerWidgetSession({ apiBaseUrl, apiKey, initialWidge
     }, {
         apiBaseUrl,
         apiKey,
+        appType,
         mode
     });
     const activationData = await activateCoreArWidgetSession(mode, {
         baseURL: apiBaseUrl,
         headers: {
+            ...getAppTypeHeaders(appType),
             'x-api-key': apiKey
         },
         signal
@@ -6478,6 +6495,7 @@ async function createModelViewerWidgetSession({ apiBaseUrl, apiKey, initialWidge
     return new ModelViewerWidgetSession(activationData, {
         apiBaseUrl,
         apiKey,
+        appType,
         mode
     });
 }
@@ -6533,12 +6551,13 @@ async function issueWidgetHandoffCode(session, params) {
         expiresIn: data.expiresIn
     };
 }
-async function resolveWidgetHandoffCode(apiBaseUrl, code) {
+async function resolveWidgetHandoffCode(apiBaseUrl, code, appType) {
     try {
         const data = await widgetHandoffControllerResolveHandoff({
             code
         }, {
-            baseURL: apiBaseUrl
+            baseURL: apiBaseUrl,
+            headers: getAppTypeHeaders(appType)
         });
         if (!data?.apiKey || !data.token) return null;
         return {
@@ -6593,6 +6612,7 @@ function useObjectData(tinuuid, initialHid, options) {
             {
                 apiBaseUrl: options.apiBaseUrl ?? null,
                 apiKey: options.apiKey,
+                appType: options.appType ?? null,
                 handoffCode: options.handoffCode ?? null,
                 initialHid: initialHid ?? null,
                 initialWidgetSessionToken: options.initialWidgetSessionToken ?? null,
@@ -6605,12 +6625,13 @@ function useObjectData(tinuuid, initialHid, options) {
         refetchOnMount: 'always',
         queryFn: async ({ signal })=>{
             if (options.handoffCode) {
-                const resolved = readHandoffResolution(options.handoffCode) ?? await resolveWidgetHandoffCode(options.apiBaseUrl ?? window.location.origin, options.handoffCode);
+                const resolved = readHandoffResolution(options.handoffCode) ?? await resolveWidgetHandoffCode(options.apiBaseUrl ?? window.location.origin, options.handoffCode, options.appType);
                 if (!resolved) throw new WidgetHandoffExpiredError();
                 rememberHandoffResolution(options.handoffCode, resolved);
                 const widgetSession = await createModelViewerWidgetSession({
                     apiBaseUrl: options.apiBaseUrl,
                     apiKey: resolved.apiKey,
+                    appType: options.appType,
                     initialWidgetSessionToken: resolved.token,
                     mode: options.mode,
                     signal
@@ -6626,6 +6647,7 @@ function useObjectData(tinuuid, initialHid, options) {
                     tinuuid
                 }, {
                     baseURL: options.apiBaseUrl,
+                    headers: getAppTypeHeaders(options.appType),
                     signal
                 });
                 return {
@@ -6636,6 +6658,7 @@ function useObjectData(tinuuid, initialHid, options) {
             const widgetSession = await createModelViewerWidgetSession({
                 apiBaseUrl: options.apiBaseUrl,
                 apiKey: options.apiKey,
+                appType: options.appType,
                 initialWidgetSessionToken: options.initialWidgetSessionToken,
                 mode: options.mode,
                 signal
@@ -6712,6 +6735,7 @@ function ModelViewerProvider({ children, tinuuid, apiKey, appClipBundleId, arExp
     const { object, material, error, isLoading, setMaterialHid: setObjectMaterialHid, widgetSession } = useObjectData(tinuuid, hid, {
         apiBaseUrl,
         apiKey,
+        appType: 'ru' === lang ? 'arizo' : 'vizbl',
         handoffCode,
         initialWidgetSessionToken,
         mode
@@ -6830,6 +6854,7 @@ function ModelViewerProvider({ children, tinuuid, apiKey, appClipBundleId, arExp
         widgetSession
     ]);
     const contextValue = external_react_useMemo(()=>({
+            apiBaseUrl,
             apiKey,
             appClipBundleId,
             arExperience,
@@ -6861,6 +6886,7 @@ function ModelViewerProvider({ children, tinuuid, apiKey, appClipBundleId, arExp
             setModelViewerEl,
             trackEvent
         }), [
+        apiBaseUrl,
         apiKey,
         appClipBundleId,
         arExperience,
@@ -6974,7 +7000,20 @@ async function launchArOverride(launchAr, target) {
         return false;
     }
 }
-function buildModelViewerHandoffUrl({ apiKey, arExperience, baseUrl, hid, mode, tinuuid, widgetSessionToken }) {
+const AR_TAP_WINDOW_MS = 3000;
+function withinTapWindow(promise, windowMs = AR_TAP_WINDOW_MS) {
+    return new Promise((resolve, reject)=>{
+        const timer = setTimeout(()=>resolve(null), windowMs);
+        promise.then((value)=>{
+            clearTimeout(timer);
+            resolve(value);
+        }, (error)=>{
+            clearTimeout(timer);
+            reject(error);
+        });
+    });
+}
+function buildModelViewerHandoffUrl({ apiKey, arExperience, baseUrl, hid, lang, mode, tinuuid, widgetSessionToken }) {
     if (!baseUrl || !tinuuid) return null;
     let url;
     try {
@@ -6988,6 +7027,7 @@ function buildModelViewerHandoffUrl({ apiKey, arExperience, baseUrl, hid, mode,
     else url.searchParams.delete('ar-experience');
     if (hid) url.searchParams.set('hid', hid);
     else url.searchParams.delete('hid');
+    setLang(url, lang);
     const fragment = new URLSearchParams(url.hash.slice(1));
     if (apiKey) fragment.set('api-key', apiKey);
     else fragment.delete('api-key');
@@ -6996,7 +7036,7 @@ function buildModelViewerHandoffUrl({ apiKey, arExperience, baseUrl, hid, mode,
     url.hash = fragment.toString();
     return url.toString();
 }
-function buildModelViewerHandoffCodeUrl({ arExperience, baseUrl, code, hid, mode, tinuuid }) {
+function buildModelViewerHandoffCodeUrl({ arExperience, baseUrl, code, hid, lang, mode, tinuuid }) {
     if (!baseUrl || !tinuuid) return null;
     let url;
     try {
@@ -7010,6 +7050,7 @@ function buildModelViewerHandoffCodeUrl({ arExperience, baseUrl, code, hid, mode
     else url.searchParams.delete('ar-experience');
     if (hid) url.searchParams.set('hid', hid);
     else url.searchParams.delete('hid');
+    setLang(url, lang);
     const fragment = new URLSearchParams(url.hash.slice(1));
     if (code) fragment.set('code', code);
     else fragment.delete('code');
@@ -7019,9 +7060,14 @@ function buildModelViewerHandoffCodeUrl({ arExperience, baseUrl, code, hid, mode
 function handoffCodeReissueDelayMs(expiresInSeconds) {
     return Math.round(1000 * expiresInSeconds * 2 / 3);
 }
+function setLang(url, lang) {
+    if (lang) url.searchParams.set('lang', lang);
+    else url.searchParams.delete('lang');
+}
 const EVENT_FLUSH_TIMEOUT_MS = 300;
+const LAUNCH_TOKEN_TIMEOUT_MS = 800;
 const HANDOFF_CODE_RETRY_MS = 15000;
-async function issueHandoffQrCode(widgetSession, { arExperience, baseUrl, hid, mode, tinuuid }) {
+async function issueHandoffQrCode(widgetSession, { arExperience, baseUrl, hid, lang, mode, tinuuid }) {
     const { code, expiresIn } = await issueWidgetHandoffCode(widgetSession, {
         arExperience,
         hid,
@@ -7032,6 +7078,7 @@ async function issueHandoffQrCode(widgetSession, { arExperience, baseUrl, hid, m
         baseUrl,
         code,
         hid,
+        lang,
         mode,
         tinuuid
     });
@@ -7050,7 +7097,7 @@ async function flushWidgetEvent(eventRequest) {
     });
 }
 function AR({ disabled, onClick, onBeforeActivateAr, size = 'lg', ...props }) {
-    const { apiKey, appClipBundleId, arExperience, containerEl, handoffUrl, isLoading, isModelLoading, lang, launchAr, material, mode, modelViewerEl, object, tinuuid, trackEvent, widgetSession } = useModelViewer();
+    const { apiBaseUrl, apiKey, appClipBundleId, arExperience, containerEl, handoffUrl, isLoading, isModelLoading, lang, launchAr, material, mode, modelViewerEl, object, tinuuid, trackEvent, widgetSession } = useModelViewer();
     const [open, setOpen] = useState(false);
     const [qrState, setQrState] = useState({
         status: 'loading'
@@ -7059,12 +7106,33 @@ function AR({ disabled, onClick, onBeforeActivateAr, size = 'lg', ...props }) {
     const widgetSessionSid = widgetSession?.sid;
     const isDisabled = isLoading || isModelLoading || null === material;
     const arTarget = external_react_useMemo(()=>({
+            apiBaseUrl,
+            apiKey: widgetSession?.apiKey || apiKey || void 0,
             hid: material?.hid,
+            lang,
+            name: object?.name ?? void 0,
             tinuuid: object?.tinuuid ?? tinuuid
         }), [
+        apiBaseUrl,
+        apiKey,
+        lang,
         material?.hid,
+        object?.name,
         object?.tinuuid,
-        tinuuid
+        tinuuid,
+        widgetSession
+    ]);
+    const launchHostAr = useCallback(async ()=>{
+        if (!launchAr) return false;
+        const widgetSessionToken = widgetSession ? await withinTapWindow(widgetSession.getTokenForRequest(), LAUNCH_TOKEN_TIMEOUT_MS).catch(()=>null) ?? widgetSession.token : void 0;
+        return launchArOverride(launchAr, {
+            ...arTarget,
+            widgetSessionToken
+        });
+    }, [
+        arTarget,
+        launchAr,
+        widgetSession
     ]);
     const directArExperience = resolveDirectArExperience(mode, arExperience);
     const directArLaunchOptions = external_react_useMemo(()=>{
@@ -7112,7 +7180,7 @@ function AR({ disabled, onClick, onBeforeActivateAr, size = 'lg', ...props }) {
         const timer = window.setTimeout(()=>{
             (async ()=>{
                 if (autoLaunchKeyRef.current !== launchKey) return;
-                if (await launchArOverride(launchAr, arTarget)) return;
+                if (await launchHostAr()) return;
                 await flushWidgetEvent(trackEvent('ar_launched'));
                 if (autoLaunchKeyRef.current === launchKey) launchDirectAr(directArLaunchOptions);
             })();
@@ -7122,10 +7190,9 @@ function AR({ disabled, onClick, onBeforeActivateAr, size = 'lg', ...props }) {
             if (autoLaunchKeyRef.current === launchKey) autoLaunchKeyRef.current = null;
         };
     }, [
-        arTarget,
         directArLaunchOptions,
         isLoading,
-        launchAr,
+        launchHostAr,
         material?.hid,
         mode,
         trackEvent,
@@ -7145,6 +7212,7 @@ function AR({ disabled, onClick, onBeforeActivateAr, size = 'lg', ...props }) {
                 arExperience,
                 baseUrl,
                 hid: material?.hid,
+                lang,
                 mode,
                 tinuuid: resolvedTinuuid
             });
@@ -7161,6 +7229,7 @@ function AR({ disabled, onClick, onBeforeActivateAr, size = 'lg', ...props }) {
                 arExperience,
                 baseUrl,
                 hid: material?.hid,
+                lang,
                 mode,
                 tinuuid: resolvedTinuuid
             });
@@ -7175,6 +7244,7 @@ function AR({ disabled, onClick, onBeforeActivateAr, size = 'lg', ...props }) {
             arExperience,
             baseUrl,
             hid: material?.hid,
+            lang,
             mode,
             tinuuid: resolvedTinuuid,
             widgetSessionToken: sessionToken
@@ -7198,6 +7268,7 @@ function AR({ disabled, onClick, onBeforeActivateAr, size = 'lg', ...props }) {
                         arExperience,
                         baseUrl: handoffUrl || MODEL_VIEWER_URL,
                         hid: material?.hid,
+                        lang,
                         mode,
                         tinuuid: object?.tinuuid ?? tinuuid
                     });
@@ -7219,6 +7290,7 @@ function AR({ disabled, onClick, onBeforeActivateAr, size = 'lg', ...props }) {
     }, [
         arExperience,
         handoffUrl,
+        lang,
         material?.hid,
         mode,
         object?.tinuuid,
@@ -7229,7 +7301,7 @@ function AR({ disabled, onClick, onBeforeActivateAr, size = 'lg', ...props }) {
     ]);
     const handleClick = async ()=>{
         if (!modelViewerEl || isDisabled) return;
-        if (await launchArOverride(launchAr, arTarget)) return void onBeforeActivateAr?.();
+        if (await launchHostAr()) return void onBeforeActivateAr?.();
         if (directArLaunchOptions && isMobileArDevice()) {
             onBeforeActivateAr?.();
             await flushWidgetEvent(trackEvent('ar_launched'));
@@ -8066,7 +8138,7 @@ function ModelViewerRoot({ tinuuid, apiKey, appClipBundleId = 'com.us.vizbl.Clip
         })
     });
 }
-function ModelViewerDialog({ tinuuid, apiKey, apiBaseUrl, appClipBundleId, initialWidgetSessionToken, handoffUrl, hid, lang = 'en', mode = 'ar-viewer', sizeType, dimensionAxes, cameraOrbit, minCameraOrbit, maxCameraOrbit, ...props }) {
+function ModelViewerDialog({ tinuuid, apiKey, apiBaseUrl, appClipBundleId, initialWidgetSessionToken, handoffUrl, hid, lang = 'en', launchAr, mode = 'ar-viewer', sizeType, dimensionAxes, cameraOrbit, minCameraOrbit, maxCameraOrbit, ...props }) {
     const [container, setContainer] = useState(null);
     return /*#__PURE__*/ jsxs(Fragment, {
         children: [
@@ -8107,6 +8179,7 @@ function ModelViewerDialog({ tinuuid, apiKey, apiBaseUrl, appClipBundleId, initi
                                 lang: lang,
                                 handoffUrl: handoffUrl,
                                 hid: hid,
+                                launchAr: launchAr,
                                 sizeType: sizeType,
                                 dimensionAxes: dimensionAxes,
                                 cameraOrbit: cameraOrbit,
@@ -8123,6 +8196,7 @@ function ModelViewerDialog({ tinuuid, apiKey, apiBaseUrl, appClipBundleId, initi
                 style: {
                     display: 'block',
                     letterSpacing: 'normal',
+                    position: 'relative',
                     zIndex: 2147483647
                 },
                 children: [
@@ -8197,4 +8271,5 @@ function ModelViewer({ tinuuid, apiKey, appClipBundleId, arExperience, hid, apiB
         ]
     });
 }
-export { ModelViewer, ModelViewerDialog };
+var __webpack_exports__AR_TAP_WINDOW_MS = 3000;
+export { ModelViewer, ModelViewerDialog, isIOSDevice, isMobileArDevice, withinTapWindow, __webpack_exports__AR_TAP_WINDOW_MS as AR_TAP_WINDOW_MS };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@neurodyn/react-model-viewer",
   "type": "module",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "publishConfig": {
     "access": "public"
   },