diff --git a/packages/griffith-utils/src/__tests__/ua.spec.ts b/packages/griffith-utils/src/__tests__/ua.spec.ts index 4db8c4b7..15784c58 100644 --- 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 index 9d21803c..31f0faf2 100644 --- 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 index 6aa53992..d93fc2fb 100644 --- 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 = ({ 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 = ({ const videoDataLoaded = !isLoading || currentTime !== 0 const renderController = videoDataLoaded && isPlaybackStarted - const controlsOverlay = !isMobile && ( + const controlsOverlay = !ua.isMobile && (
{isPlaybackStarted && isLoading && (
@@ -610,7 +609,7 @@ const InnerPlayer: React.FC = ({