fix: add isIE in ua

zhihu#18 zhihu#158
ambar · Jan 29, 2022 · 0bb4463 · 0bb4463
1 parent 99ae812
commit 0bb4463
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)}>
@@ -609,7 +608,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}
@@ -655,7 +654,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),
+ }
+}