fix: add isIE in ua

zhihu#18 zhihu#158
ambar · Jan 29, 2022 · 98323c5 · 98323c5
1 parent 4540e0e
commit 98323c5
Show file tree

Hide file tree

Showing 4 changed files with 48 additions and 25 deletions.
diff --git a/packages/griffith-utils/src/__tests__/ua.spec.ts b/packages/griffith-utils/src/__tests__/ua.spec.ts
@@ -2,14 +2,30 @@
  * @jest-environment jsdom
  */
 
+import ua, {parseUA} from '../ua'
+
 test('ua', () => {
-  Object.defineProperty(window.navigator, 'userAgent', {
-    value:
-      'Mozilla/5.0 (Linux; Android 5.0; SM-G900P Build/LRX21T) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/71.0.3578.98 Mobile Safari/537.36',
-  })
-  // eslint-disable-next-line @typescript-eslint/no-var-requires
-  const {isMobile, isAndroid, isSafari} = require('../ua')
-  expect(isMobile).toBe(true)
-  expect(isAndroid).toBe(true)
-  expect(isSafari).toBe(false)
+  expect(ua).toMatchInlineSnapshot(`
+    Object {
+      "isAndroid": false,
+      "isIE": false,
+      "isMobile": false,
+      "isSafari": false,
+    }
+  `)
+})
+
+test('parse', () => {
+  expect(
+    parseUA(
+      'Mozilla/5.0 (Linux; Android 5.0; SM-G900P Build/LRX21T) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/71.0.3578.98 Mobile Safari/537.36'
+    )
+  ).toMatchInlineSnapshot(`
+    Object {
+      "isAndroid": true,
+      "isIE": false,
+      "isMobile": true,
+      "isSafari": false,
+    }
+  `)
 })
diff --git a/packages/griffith-utils/src/ua.ts b/packages/griffith-utils/src/ua.ts
@@ -1,13 +1,13 @@
-export const isMobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent)
-
-export const isAndroid = /(android)/i.test(navigator.userAgent)
+export function parseUA(userAgent: string) {
+  return {
+    isIE: /MSIE|Trident/i.test(userAgent),
+    isMobile: /iPhone|iPad|iPod|Android/i.test(userAgent),
+    isAndroid: /(android)/i.test(userAgent),
+    isSafari: /^((?!chrome|android).)*safari/i.test(userAgent),
+  }
+}
 
-export const isSafari = /^((?!chrome|android).)*safari/i.test(
-  navigator.userAgent
+export default parseUA(
+  // TODO: 加一个 context 让各处访问更好
+  typeof navigator !== 'undefined' ? navigator.userAgent : ''
 )
-
-export default {
-  isMobile,
-  isAndroid,
-  isSafari,
-}
diff --git a/packages/griffith/src/components/Player.tsx b/packages/griffith/src/components/Player.tsx
@@ -49,7 +49,6 @@ import useMount from '../hooks/useMount'
 import useHandler from '../hooks/useHandler'
 import usePlayerShortcuts from './usePlayerShortcuts'
 const CONTROLLER_HIDE_DELAY = 3000
-const {isMobile} = ua
 
 // 被 Provider 包装后的属性
 type InnerPlayerProps = {
@@ -273,7 +272,7 @@ const InnerPlayer: React.FC<InnerPlayerProps> = ({
             isLoadingSwitch.on()
           }
           // workaround a bug in IE about replaying a video.
-          if (currentTime !== 0) {
+          if (ua.isIE && currentTime !== 0) {
             handleSeek(0)
           }
         }
@@ -488,7 +487,7 @@ const InnerPlayer: React.FC<InnerPlayerProps> = ({
   const videoDataLoaded = !isLoading || currentTime !== 0
   const renderController = videoDataLoaded && isPlaybackStarted
 
-  const controlsOverlay = !isMobile && (
+  const controlsOverlay = !ua.isMobile && (
     <div className={css(styles.overlay, isNeverPlayed && styles.overlayMask)}>
       {isPlaybackStarted && isLoading && (
         <div className={css(styles.loader)}>
@@ -610,7 +609,7 @@ const InnerPlayer: React.FC<InnerPlayerProps> = ({
       <div className={css(styles.video)}>
         <Video
           ref={videoRef}
-          controls={isMobile && isPlaybackStarted && !hideMobileControls}
+          controls={ua.isMobile && isPlaybackStarted && !hideMobileControls}
           paused={!isPlaying}
           volume={volume}
           loop={loop}
@@ -656,7 +655,7 @@ const InnerPlayer: React.FC<InnerPlayerProps> = ({
             <div
               className={css(
                 styles.coverTime,
-                isMobile && styles.coverTimeMobile
+                ua.isMobile && styles.coverTimeMobile
               )}
             >
               {formatDuration(duration)}

diff --git a/packages/griffith/src/utils/parseUA.ts b/packages/griffith/src/utils/parseUA.ts
@@ -0,0 +1,8 @@
+export default function parseUA(userAgent: string) {
+  return {
+    isIE: /MSIE|Trident/i.test(userAgent),
+    isMobile: /iPhone|iPad|iPod|Android/i.test(userAgent),
+    isAndroid: /(android)/i.test(userAgent),
+    isSafari: /^((?!chrome|android).)*safari/i.test(userAgent),
+  }
+}