@shopware-ag/dive 1.6.5 → 1.7.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shopware-ag/dive",
-  "version": "1.6.5",
+  "version": "1.7.0",
   "description": "Shopware Spatial Framework",
   "type": "module",
   "main": "./build/dive.cjs",

package/src/__test__/DIVE.test.ts

@@ -244,6 +244,11 @@ describe('dive/DIVE', () => {
         expect(dive.Communication).toBeDefined();
     });
 
+    it('should have Info', () => {
+        const dive = new DIVE();
+        expect(dive.Info).toBeDefined();
+    });
+
     it('should resize', () => {
         const dive = new DIVE();
         expect(() => dive.OnResize(800, 600)).not.toThrow();

package/src/dive.ts

@@ -12,6 +12,7 @@ import type { Actions } from './com/actions/index.ts';
 import type { COMPov, COMLight, COMModel, COMEntity } from './com/types.ts';
 import { DIVEMath } from './math/index.ts';
 import { generateUUID } from "three/src/math/MathUtils";
+import { DIVEInfo } from "./info/Info.ts";
 
 export type DIVESettings = {
     autoResize: boolean;
@@ -145,6 +146,10 @@ export default class DIVE {
         return this.renderer.domElement;
     }
 
+    public get Info(): DIVEInfo {
+        return DIVEInfo;
+    }
+
     // setters
     public set Settings(settings: Partial<DIVESettings>) {
         const settingsDelta = getObjectDelta(this._settings, settings);

package/src/info/Info.ts

@@ -0,0 +1,114 @@
+export class DIVEInfo {
+    private static _supportsWebXR: boolean | null = null;
+
+    /**
+     *
+     * @returns The system the user is using. Possible values are "Android", "iOS", "Windows", "MacOS", "Linux" or "Unknown".
+     */
+    public static GetSystem(): string {
+        const platform = navigator.platform;
+        if (/Android/.test(navigator.userAgent)) {
+            return "Android";
+        } else if (/iPhone|iPad|iPod/.test(navigator.userAgent)) {
+            return "iOS";
+        } else if (platform.startsWith("Win")) {
+            return "Windows";
+        } else if (platform.startsWith("Mac")) {
+            return "MacOS";
+        } else if (platform.startsWith("Linux")) {
+            return "Linux";
+        } else {
+            return "Unknown";
+        }
+    }
+
+    /**
+     * @returns A promise that resolves to a boolean indicating whether the user's device supports WebXR.
+     */
+    public static async GetSupportsWebXR(): Promise<boolean> {
+        if (this._supportsWebXR !== null) {
+            return this._supportsWebXR;
+        }
+
+        if (!navigator.xr) {
+            this._supportsWebXR = false;
+            return this._supportsWebXR;
+        }
+        // Check if immersive-vr session mode is supported
+        try {
+            const supported = await navigator.xr.isSessionSupported('immersive-ar');
+            this._supportsWebXR = supported;
+        } catch (error) {
+            this._supportsWebXR = false;
+        }
+        return this._supportsWebXR;
+    }
+
+    /**
+     * @returns A boolean indicating whether the user's device supports AR Quick Look.
+     */
+    public static GetSupportsARQuickLook(): boolean {
+        const a = document.createElement("a");
+        if (a.relList.supports("ar")) {
+            return true;
+        }
+
+        // fallback check
+        const userAgent = navigator.userAgent;
+
+        // Check if the device is running iOS
+        const isIOS = /iPad|iPhone|iPod/.test(userAgent) && !(window as unknown as Window & { MSStream?: string }).MSStream;
+        if (!isIOS) {
+            return false;
+        }
+
+        // Extract iOS version
+        const match = userAgent.match(/OS (\d+)_/);
+        if (!match || match.length < 2) {
+            return false;
+        }
+        const iOSVersion = parseInt(match[1], 10);
+
+        // Minimum iOS version for QuickLook support
+        const minQuickLookVersion = 12;
+
+        // Check if the iOS version is supported
+        if (iOSVersion < minQuickLookVersion) {
+            return false;
+        }
+
+        // Check for supported browser
+        const isSupportedBrowser = /^((?!chrome|android).)*safari|CriOS|FxiOS/i.test(userAgent);
+        if (isSupportedBrowser) {
+            return true;
+        }
+
+        // Default to false if none of the conditions are met
+        return false;
+    }
+
+    /**
+     * @returns A boolean indicating whether the user's device is a mobile device.
+     */
+    public static get isMobile(): boolean {
+        return this.GetSystem() === "Android" || this.GetSystem() === "iOS";
+    }
+
+    /**
+     * @returns A boolean indicating whether the user's device is a desktop device.
+     */
+    public static get isDesktop(): boolean {
+        return !this.isMobile;
+    }
+
+    /**
+     * @returns A promise that resolves to a boolean indicating whether the user's device is capable of AR.
+     */
+    public static async GetIsARCapable(): Promise<boolean> {
+        if (this.GetSupportsARQuickLook()) {
+            return true;
+        }
+
+        return await this.GetSupportsWebXR();
+    }
+}

package/src/info/__test__/Info.test.ts

@@ -0,0 +1,267 @@
+import { DIVEInfo } from '../Info';
+
+const mockNavigator = (navigator: any) => {
+    Object.defineProperty(global, 'navigator', {
+        value: navigator,
+        writable: true
+    });
+};
+
+describe('dive/info/DIVEInfo', () => {
+    beforeEach(() => {
+        DIVEInfo['_supportsWebXR'] = null;
+        jest.clearAllMocks();
+    });
+
+    it('should get system: Windows', () => {
+        mockNavigator({
+            platform: 'Win64'
+        });
+        expect(DIVEInfo.GetSystem()).toBe('Windows');
+    });
+
+    it('should get system: MacOS', () => {
+        mockNavigator({
+            platform: 'MacIntel'
+        });
+        expect(DIVEInfo.GetSystem()).toBe('MacOS');
+    });
+
+    it('should get system: Linux', () => {
+        mockNavigator({
+            platform: 'Linux'
+        });
+        expect(DIVEInfo.GetSystem()).toBe('Linux');
+    });
+
+    it('should get system: Android', () => {
+        mockNavigator({
+            userAgent: 'Mozilla/5.0 (Linux; Android 10; K) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/58.0.3029.110 Safari/537.3',
+            platform: 'Linux'
+        });
+        expect(DIVEInfo.GetSystem()).toBe('Android');
+    });
+
+    it('should get system: iOS', () => {
+        mockNavigator({
+            userAgent: 'Mozilla/5.0 (iPhone; CPU iPhone OS 17_0_1 like Mac OS X) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/58.0.3029.110 Safari/537.3',
+            platform: 'iPhone'
+        });
+        expect(DIVEInfo.GetSystem()).toBe('iOS');
+    });
+
+    it('should get system: Unknown', () => {
+        mockNavigator({
+            platform: 'Unknown'
+        });
+        expect(DIVEInfo.GetSystem()).toBe('Unknown');
+    });
+
+    it('should support webXR', async () => {
+        DIVEInfo['_supportsWebXR'] = null;
+        mockNavigator({
+            xr: {
+                isSessionSupported: jest.fn().mockResolvedValue(true),
+            }
+        });
+        const supports = await DIVEInfo.GetSupportsWebXR();
+        expect(supports).toBe(true);
+    });
+
+    it('should not support webXR (xr undefined)', async () => {
+        DIVEInfo['_supportsWebXR'] = null;
+        mockNavigator({
+            xr: undefined
+        });
+        const supports = await DIVEInfo.GetSupportsWebXR();
+        expect(supports).toBe(false);
+    });
+
+    it('should not support webXR', async () => {
+        DIVEInfo['_supportsWebXR'] = null;
+        mockNavigator({
+            xr: {
+                isSessionSupported: jest.fn().mockResolvedValue(false),
+            }
+        });
+        const supports = await DIVEInfo.GetSupportsWebXR();
+        expect(supports).toBe(false);
+    });
+
+    it('should not support webXR on error', async () => {
+        DIVEInfo['_supportsWebXR'] = null;
+        mockNavigator({
+            xr: {
+                isSessionSupported: jest.fn().mockRejectedValue('error'),
+            }
+        });
+        const supports = await DIVEInfo.GetSupportsWebXR();
+        expect(supports).toBe(false);
+    });
+
+    it('should return cached value', async () => {
+        DIVEInfo['_supportsWebXR'] = true;
+        mockNavigator({
+            xr: {
+                isSessionSupported: jest.fn().mockRejectedValue('error'),
+            }
+        });
+        const supports = await DIVEInfo.GetSupportsWebXR();
+        expect(supports).toBe(true);
+    });
+
+    it('should return cached value (false)', async () => {
+        DIVEInfo['_supportsWebXR'] = false;
+        mockNavigator({
+            xr: {
+                isSessionSupported: jest.fn().mockRejectedValue('error'),
+            }
+        });
+        const supports = await DIVEInfo.GetSupportsWebXR();
+        expect(supports).toBe(false);
+    });
+
+    it('should support ARQuickLook with feature detection', () => {
+        mockNavigator({
+            userAgent: 'Mozilla/5.0 (iPhone; CPU iPhone OS 15_1 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/15.1 Mobile/15E148 Safari/604.'
+        });
+        jest.spyOn(document, 'createElement').mockReturnValue({ relList: { supports: () => true } } as unknown as HTMLAnchorElement);
+        const supports = DIVEInfo.GetSupportsARQuickLook();
+        expect(supports).toBe(true);
+    });
+
+    it('should support ARQuickLook (iPhone, iOS 15, Safari)', () => {
+        mockNavigator({
+            userAgent: 'Mozilla/5.0 (iPhone; CPU iPhone OS 15_1 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/15.1 Mobile/15E148 Safari/604.'
+        });
+        jest.spyOn(document, 'createElement').mockReturnValue({ relList: { supports: () => false } } as unknown as HTMLAnchorElement);
+        const supports = DIVEInfo.GetSupportsARQuickLook();
+        expect(supports).toBe(true);
+    });
+
+    it('should support ARQuickLook (iPhone, iOS 17, Google)', () => {
+        mockNavigator({
+            userAgent: 'Mozilla/5.0 (iPhone; CPU iPhone OS 17_5 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) GSA/277.0.555192628 Mobile/15E148 Safari/604.'
+        });
+        jest.spyOn(document, 'createElement').mockReturnValue({ relList: { supports: () => false } } as unknown as HTMLAnchorElement);
+        const supports = DIVEInfo.GetSupportsARQuickLook();
+        expect(supports).toBe(true);
+    });
+
+    it('should support ARQuickLook (iPhone, iOS 17, Chrome)', () => {
+        mockNavigator({
+            userAgent: 'Mozilla/5.0 (iPhone; CPU iPhone OS 17_5 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) CriOS/126.0.6478.153 Mobile/15E148 Safari/604.'
+        });
+        jest.spyOn(document, 'createElement').mockReturnValue({ relList: { supports: () => false } } as unknown as HTMLAnchorElement);
+        const supports = DIVEInfo.GetSupportsARQuickLook();
+        expect(supports).toBe(true);
+    });
+
+    it('should support ARQuickLook (iPhone, iOS 17, Chrome)', () => {
+        mockNavigator({
+            userAgent: 'Mozilla/5.0 (iPhone; CPU iPhone OS 17_1 like Mac OS X) AppleWebKit/605.1.11 (KHTML, like Gecko) Version/11.1 Mobile/11E148 CriOS/604.'
+        });
+        jest.spyOn(document, 'createElement').mockReturnValue({ relList: { supports: () => false } } as unknown as HTMLAnchorElement);
+        const supports = DIVEInfo.GetSupportsARQuickLook();
+        expect(supports).toBe(true);
+    });
+
+    it('should support ARQuickLook (iPhone, iOS 17, Firefox)', () => {
+        mockNavigator({
+            userAgent: 'Mozilla/5.0 (iPhone; CPU iPhone OS 17_1 like Mac OS X) AppleWebKit/605.1.11 (KHTML, like Gecko) Version/11.1 Mobile/11E148 FxiOS/604.'
+        });
+        jest.spyOn(document, 'createElement').mockReturnValue({ relList: { supports: () => false } } as unknown as HTMLAnchorElement);
+        const supports = DIVEInfo.GetSupportsARQuickLook();
+        expect(supports).toBe(true);
+    });
+
+    it('should not support ARQuickLook (Android)', () => {
+        mockNavigator({
+            userAgent: 'Mozilla/5.0 (Linux; Android 10; K) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/126.0.0.0 Mobile Safari/537.3'
+        });
+        jest.spyOn(document, 'createElement').mockReturnValue({ relList: { supports: () => false } } as unknown as HTMLAnchorElement);
+        const supports = DIVEInfo.GetSupportsARQuickLook();
+        expect(supports).toBe(false);
+    });
+
+    it('should not support ARQuickLook (iPhone, no iOS version)', () => {
+        mockNavigator({
+            userAgent: 'Mozilla/5.0 (iPhone; CPU iPhone OS like Mac OS X) AppleWebKit/605.1.11 (KHTML, like Gecko) Version/11.1 Mobile/11E148 Safari/604.'
+        });
+        jest.spyOn(document, 'createElement').mockReturnValue({ relList: { supports: () => false } } as unknown as HTMLAnchorElement);
+        const supports = DIVEInfo.GetSupportsARQuickLook();
+        expect(supports).toBe(false);
+    });
+
+    it('should not support ARQuickLook (iPhone, iOS 17, no browser)', () => {
+        mockNavigator({
+            userAgent: 'Mozilla/5.0 (iPhone; CPU iPhone OS 17_1 like Mac OS X)'
+        });
+        jest.spyOn(document, 'createElement').mockReturnValue({ relList: { supports: () => false } } as unknown as HTMLAnchorElement);
+        const supports = DIVEInfo.GetSupportsARQuickLook();
+        expect(supports).toBe(false);
+    });
+
+    it('should not support ARQuickLook (iPhone, iOS <12, Safari)', () => {
+        mockNavigator({
+            userAgent: 'Mozilla/5.0 (iPhone; CPU iPhone OS 11_1 like Mac OS X) AppleWebKit/605.1.11 (KHTML, like Gecko) Version/11.1 Mobile/11E148 Safari/604.'
+        });
+        jest.spyOn(document, 'createElement').mockReturnValue({ relList: { supports: () => false } } as unknown as HTMLAnchorElement);
+        const supports = DIVEInfo.GetSupportsARQuickLook();
+        expect(supports).toBe(false);
+    });
+
+    it('should be mobile (iOS)', () => {
+        jest.spyOn(DIVEInfo, 'GetSystem').mockReturnValue('iOS');
+        expect(DIVEInfo.isMobile).toBe(true);
+        expect(DIVEInfo.isDesktop).toBe(false);
+    });
+
+    it('should be mobile (Android)', () => {
+        jest.spyOn(DIVEInfo, 'GetSystem').mockReturnValue('Android');
+        expect(DIVEInfo.isMobile).toBe(true);
+        expect(DIVEInfo.isDesktop).toBe(false);
+    });
+
+    it('should be desktop (Windows)', () => {
+        jest.spyOn(DIVEInfo, 'GetSystem').mockReturnValue('Windows');
+        expect(DIVEInfo.isMobile).toBe(false);
+        expect(DIVEInfo.isDesktop).toBe(true);
+    });
+
+    it('should be desktop (MacOS)', () => {
+        jest.spyOn(DIVEInfo, 'GetSystem').mockReturnValue('MacOS');
+        expect(DIVEInfo.isMobile).toBe(false);
+        expect(DIVEInfo.isDesktop).toBe(true);
+    });
+
+    it('should be desktop (Linux)', () => {
+        jest.spyOn(DIVEInfo, 'GetSystem').mockReturnValue('Linux');
+        expect(DIVEInfo.isMobile).toBe(false);
+        expect(DIVEInfo.isDesktop).toBe(true);
+    });
+
+    it('should be desktop (Unknown)', () => {
+        jest.spyOn(DIVEInfo, 'GetSystem').mockReturnValue('Unknown');
+        expect(DIVEInfo.isMobile).toBe(false);
+        expect(DIVEInfo.isDesktop).toBe(true);
+    });
+
+    it('should be capable of AR (ARQuickLook)', async () => {
+        jest.spyOn(DIVEInfo, 'GetSupportsARQuickLook').mockReturnValue(true);
+        jest.spyOn(DIVEInfo, 'GetSupportsWebXR').mockResolvedValue(false);
+        expect(await DIVEInfo.GetIsARCapable()).toBe(true);
+    });
+
+    it('should be capable of AR (WebXR)', async () => {
+        jest.spyOn(DIVEInfo, 'GetSupportsARQuickLook').mockReturnValue(false);
+        jest.spyOn(DIVEInfo, 'GetSupportsWebXR').mockResolvedValue(true);
+        expect(await DIVEInfo.GetIsARCapable()).toBe(true);
+    });
+
+    it('should not be capable of AR', async () => {
+        jest.spyOn(DIVEInfo, 'GetSupportsARQuickLook').mockReturnValue(false);
+        jest.spyOn(DIVEInfo, 'GetSupportsWebXR').mockResolvedValue(false);
+        expect(await DIVEInfo.GetIsARCapable()).toBe(false);
+    });
+});