refactor: use hooks in Player

ljl11 · Jan 29, 2022 · dff731b · dff731b
1 parent b8e5b60
commit dff731b
Show file tree

Hide file tree

Showing 7 changed files with 461 additions and 596 deletions.
diff --git a/example/src/App.tsx b/example/src/App.tsx
@@ -20,6 +20,8 @@ const NavLinks = () => {
           <Link to="/mp4?loop">/mp4?loop</Link>
           <br />
           <Link to="/mp4?hls">/mp4?hls</Link>
+          <br />
+          <Link to="/mp4?autoplay=0">/mp4?autoplay=0</Link>
         </li>
         <li>
           <Link to="/mp4-mse">/mp4-mse</Link>

diff --git a/example/src/MP4Page.tsx b/example/src/MP4Page.tsx
@@ -4,7 +4,7 @@ import Player, {
   PlayerProps,
   useMessageContextRef,
 } from 'griffith'
-import React, {useState} from 'react'
+import React, {useState, useMemo} from 'react'
 import Logo from './Logo'
 import {logEvent} from './utils'
 import useQuery from './utils/useQuery'
@@ -40,7 +40,6 @@ const props: PlayerProps = {
   cover: 'https://zhstatic.zhihu.com/cfe/griffith/zhihu2018.jpg',
   duration,
   sources,
-  autoplay: true,
   shouldObserveResize: true,
 }
 
@@ -57,11 +56,16 @@ const App = () => {
       messageContextRef.dispatchAction(ACTIONS.PLAY)
     }
   })
+  const children = useMemo(
+    () => 'logo' in query && isLogoVisible && <Logo />,
+    [isLogoVisible, query]
+  )
 
   return (
     <>
       <Player
         {...props}
+        autoplay={query.autoplay !== '0'}
         sources={'hls' in query ? hlsSources : props.sources}
         localeConfig={{
           'zh-Hans': {
@@ -87,7 +91,7 @@ const App = () => {
         messageContextRef={messageContextRef}
         onEvent={logEvent}
       >
-        {'logo' in query && isLogoVisible && <Logo />}
+        {children}
       </Player>
       <button
         onClick={() => {