refactor: platform device logic

src/common/Platform/Platform.tsx

@@ -1,11 +1,11 @@
 import React, { createContext, useContext } from 'react';
 import { WHITELISTED_HOSTS } from 'stremio/common/CONSTANTS';
 import useShell from './useShell';
-import Bowser from 'bowser';
+import { name, isMobile } from './device';
 
 interface PlatformContext {
     name: string;
-    isMobile: () => boolean;
+    isMobile: boolean;
     openExternal: (url: string) => void;
 }
 
@@ -18,52 +18,11 @@ type Props = {
 const PlatformProvider = ({ children }: Props) => {
     const shell = useShell();
 
-    // this detects ipad properly in safari
-    // while bowser does not
-    const iOS = () => {
-        return (
-            [
-                'iPad Simulator',
-                'iPhone Simulator',
-                'iPod Simulator',
-                'iPad',
-                'iPhone',
-                'iPod',
-            ].includes(navigator.platform) ||
-            (navigator.userAgent.includes('Mac') && 'ontouchend' in document)
-        );
-    };
-
-    // Edge case: iPad is included in this function
-    // Keep in mind maxTouchPoints for Vision Pro might change in the future
-    const isVisionProUser = () => {
-        const isMacintosh = navigator.userAgent.includes('Macintosh');
-        const hasFiveTouchPoints = navigator.maxTouchPoints === 5;
-        return isMacintosh && hasFiveTouchPoints;
-    };
-
-    const browser = Bowser.getParser(window.navigator?.userAgent || '');
-    const osName = browser.getOSName().toLowerCase();
-
-    const name = isVisionProUser()
-        ? 'visionos'
-        : iOS()
-            ? 'ios'
-            : osName || 'unknown';
-
-    const isMobile = () => {
-        return name === 'ios' || name === 'android';
-    };
-
     const openExternal = (url: string) => {
         try {
             const { hostname } = new URL(url);
-            const isWhitelisted = WHITELISTED_HOSTS.some((host: string) =>
-                hostname.endsWith(host)
-            );
-            const finalUrl = !isWhitelisted
-                ? 'https://www.stremio.com/warning#' + encodeURIComponent(url)
-                : url;
+            const isWhitelisted = WHITELISTED_HOSTS.some((host: string) => hostname.endsWith(host));
+            const finalUrl = !isWhitelisted ? `https://www.stremio.com/warning#${encodeURIComponent(url)}` : url;
 
             if (shell.active) {
                 shell.send('open-external', finalUrl);

src/common/Platform/device.ts

@@ -0,0 +1,31 @@
+import Bowser from 'bowser';
+
+const APPLE_MOBILE_DEVICES = [
+    'iPad Simulator',
+    'iPhone Simulator',
+    'iPod Simulator',
+    'iPad',
+    'iPhone',
+    'iPod',
+];
+
+const { userAgent, platform, maxTouchPoints } = globalThis.navigator;
+
+// this detects ipad properly in safari
+// while bowser does not
+const isIOS = APPLE_MOBILE_DEVICES.includes(platform) || (userAgent.includes('Mac') && 'ontouchend' in document);
+
+// Edge case: iPad is included in this function
+// Keep in mind maxTouchPoints for Vision Pro might change in the future
+const isVisionOS = userAgent.includes('Macintosh') || maxTouchPoints === 5;
+
+const bowser = Bowser.getParser(userAgent);
+const os = bowser.getOSName().toLowerCase();
+
+const name = isVisionOS ? 'visionos' : isIOS ? 'ios' : os || 'unknown';
+const isMobile = ['ios', 'android'].includes(name);
+
+export {
+    name,
+    isMobile,
+};

src/common/index.js

@@ -46,7 +46,6 @@ const useProfile = require('./useProfile');
 const useStreamingServer = require('./useStreamingServer');
 const useTorrent = require('./useTorrent');
 const useTranslate = require('./useTranslate');
-const platform = require('./platform');
 const EventModal = require('./EventModal');
 
 module.exports = {
@@ -101,6 +100,5 @@ module.exports = {
     useStreamingServer,
     useTorrent,
     useTranslate,
-    platform,
     EventModal,
 };