chore: update MP4Page

zmccc · Sep 15, 2021 · c017522 · c017522
1 parent fc88687
commit c017522
Show file tree

Hide file tree

Showing 6 changed files with 45 additions and 15 deletions.
diff --git a/example/package.json b/example/package.json
@@ -7,6 +7,7 @@
     "start": "vite"
   },
   "dependencies": {
+    "@types/react-router-dom": "^5.1.8",
     "griffith": "^1.17.0",
     "react": "^16.8",
     "react-dom": "^16.8",

diff --git a/example/src/App.tsx b/example/src/App.tsx
@@ -13,7 +13,9 @@ const NavLinks = () => {
     <nav>
       <ul>
         <li>
-          <Link to="/mp4">mp4</Link> <Link to="/mp4?logo">mp4 (with logo)</Link>
+          <Link to="/mp4">mp4</Link>{' '}
+          <Link to="/mp4?logo">mp4 (with logo) </Link>{' '}
+          <Link to="/mp4?loop">mp4 (loop)</Link>
         </li>
         <li>
           <Link to="/fmp4">mp4 (MSE)</Link>

diff --git a/example/src/MP4Page.tsx b/example/src/MP4Page.tsx
@@ -45,28 +45,37 @@ const props = {
   src: 'https://zhstatic.zhihu.com/cfe/griffith/zhihu2018_sd.mp4',
 }
 
-const shouldLoop = new URLSearchParams(location.search).has('loop')
-const getCanShowLogo = () => new URLSearchParams(location.search).has('logo')
+const parseQuery = (search: string) =>
+  Object.fromEntries(
+    new URLSearchParams(search) as unknown as Iterable<[string, string]>
+  )
 
-/** 常规通讯方式，建议直接使用 `onEvent` 替代 */
-const LogoListener = () => {
-  const location = useLocation()
-  const [canShowLogo, setCaShowLogo] = useState(getCanShowLogo)
+const useQuery = () => {
+  const location = useLocation<null>()
+  const [query, setQuery] = useState(() => parseQuery(location.search))
   useEffect(() => {
-    setCaShowLogo(getCanShowLogo())
-  }, [location])
+    setQuery(parseQuery(location.search))
+  }, [location.search])
+  return query
+}
+
+/** 常规通讯方式，建议直接使用 `onEvent` 替代 */
+const LogoListener: React.FC<{shouldShowLogo: boolean}> = ({
+  shouldShowLogo,
+}) => {
   const [isLogoVisible, setIsLogoVisible] = useState(false)
   const {subscribeEvent} = useContext(MessageContext)
   useLayoutEffect(() => {
     return subscribeEvent(EVENTS.PLAYER.PLAY_COUNT, () => {
       setIsLogoVisible(true)
     }).unsubscribe
   }, [subscribeEvent])
-  return canShowLogo && isLogoVisible ? <Logo /> : null
+  return shouldShowLogo && isLogoVisible ? <Logo /> : null
 }
 
 const App = () => {
   const dispatchRef = useRef(null)
+  const query = useQuery()
   return (
     <>
       <Player
@@ -82,13 +91,13 @@ const App = () => {
         locale={'ja'}
         dispatchRef={dispatchRef}
         onEvent={(e, data) => {
-          if (shouldLoop && e === EVENTS.DOM.ENDED) {
+          if ('loop' in query && e === EVENTS.DOM.ENDED) {
             dispatchRef.current?.(ACTIONS.PLAYER.PLAY)
           }
           logEvent(e, data)
         }}
       >
-        <LogoListener />
+        <LogoListener shouldShowLogo={'logo' in query} />
       </Player>
       <button onClick={() => dispatchRef.current?.(ACTIONS.PLAYER.PLAY)}>
         Play

diff --git a/example/src/utils.ts b/example/src/utils.ts
@@ -4,7 +4,7 @@ import throttle from 'lodash/throttle'
 import {EVENTS} from 'griffith'
 
 const createGroupedLogger = (label = 'Log', wait = 100) => {
-  const logs = []
+  const logs: any[] = []
   const flush = throttle(() => {
     console.groupCollapsed?.(`[Click to expand]: ${label}, ${logs.length} logs`)
     let log
@@ -13,15 +13,15 @@ const createGroupedLogger = (label = 'Log', wait = 100) => {
     }
     console.groupEnd?.()
   }, wait)
-  return (...args) => {
+  return (...args: any[]) => {
     logs.push(args)
     flush()
   }
 }
 
 const groupedLogger = createGroupedLogger('TIMEUPDATE', 2000)
 
-export const logEvent = (e, data) => {
+export const logEvent = (e: string, data: any) => {
   const args = ['onEvent', e, data]
   if (e === EVENTS.DOM.TIMEUPDATE) {
     groupedLogger(...args)

diff --git a/tsconfig.json b/tsconfig.json
@@ -4,6 +4,7 @@
     "target": "ES6",
     "jsx": "react",
     "module": "ESNext",
+    "lib": ["ESNext", "DOM"],
     "paths": {
       // link all packages without build step
       "griffith-mp4": ["./packages/griffith-mp4/src/index.ts"],

diff --git a/yarn.lock b/yarn.lock
@@ -2394,6 +2394,23 @@
   dependencies:
     "@types/react" "*"
 
+"@types/react-router-dom@^5.1.8":
+  version "5.1.8"
+  resolved "https://registry.yarnpkg.com/@types/react-router-dom/-/react-router-dom-5.1.8.tgz#bf3e1c8149b3d62eaa206d58599de82df0241192"
+  integrity sha512-03xHyncBzG0PmDmf8pf3rehtjY0NpUj7TIN46FrT5n1ZWHPZvXz32gUyNboJ+xsL8cpg8bQVLcllptcQHvocrw==
+  dependencies:
+    "@types/history" "*"
+    "@types/react" "*"
+    "@types/react-router" "*"
+
+"@types/react-router@*":
+  version "5.1.16"
+  resolved "https://registry.yarnpkg.com/@types/react-router/-/react-router-5.1.16.tgz#f3ba045fb96634e38b21531c482f9aeb37608a99"
+  integrity sha512-8d7nR/fNSqlTFGHti0R3F9WwIertOaaA1UEB8/jr5l5mDMOs4CidEgvvYMw4ivqrBK+vtVLxyTj2P+Pr/dtgzg==
+  dependencies:
+    "@types/history" "*"
+    "@types/react" "*"
+
 "@types/react@*":
   version "16.8.14"
   resolved "https://registry.yarnpkg.com/@types/react/-/react-16.8.14.tgz#b561bfabeb8f60d12e6d4766367e7a9ae927aa18"