chore: update example

zhihu · Jan 20, 2022 · 8f27cd1 · 8f27cd1
1 parent b1fff62
commit 8f27cd1
Show file tree

Hide file tree

Showing 5 changed files with 62 additions and 35 deletions.
diff --git a/example/src/App.tsx b/example/src/App.tsx
@@ -1,10 +1,10 @@
 import React from 'react'
-import {BrowserRouter as Router, Switch, Route, Link} from 'react-router-dom'
-import MP4Page from './MP4Page'
+import {BrowserRouter as Router, Link, Route, Switch} from 'react-router-dom'
 import FMP4Page from './FMP4Page'
 import HLSPage from './HLSPage'
-import InlinePage from './InlinePage'
 import IframePage from './IframePage'
+import InlinePage from './InlinePage'
+import MP4Page from './MP4Page'
 
 const nonav = new URLSearchParams(location.search).has('nonav')
 
@@ -13,15 +13,20 @@ const NavLinks = () => {
     <nav>
       <ul>
         <li>
-          <Link to="/mp4">mp4</Link>{' '}
-          <Link to="/mp4?logo">mp4 (with logo) </Link>{' '}
-          <Link to="/mp4?loop">mp4 (loop)</Link>
+          <Link to="/mp4">/mp4</Link>
+          <br />
+          <Link to="/mp4?logo">/mp4?logo</Link>
+          <br />
+          <Link to="/mp4?loop">/mp4?loop</Link>
+          <br />
         </li>
         <li>
-          <Link to="/fmp4">mp4 (MSE)</Link>
+          <Link to="/mp4-mse">/mp4-mse</Link>
         </li>
         <li>
-          <Link to="/hls">hls (MSE)</Link>
+          <Link to="/hls">/hls</Link>
+          <br />
+          <Link to="/hls?autoplay">/hls?autoplay</Link>
         </li>
         <li>
           <Link to="/inline">inline</Link>
@@ -43,7 +48,7 @@ function App() {
         <Route path="/mp4">
           <MP4Page />
         </Route>
-        <Route path="/fmp4">
+        <Route path="/mp4-mse">
           <FMP4Page />
         </Route>
         <Route path="/hls">

diff --git a/example/src/FMP4Page.tsx b/example/src/FMP4Page.tsx
@@ -1,5 +1,5 @@
+import Player, {PlayerProps} from 'griffith'
 import React from 'react'
-import Player from 'griffith'
 import {logEvent} from './utils'
 
 const duration = 182
@@ -25,16 +25,17 @@ const sources = {
   },
 }
 
-const props = {
+const props: PlayerProps = {
   id: 'zhihu2018',
   standalone: true,
   title: '2018 我们如何与世界相处？',
   cover: 'https://zhstatic.zhihu.com/cfe/griffith/zhihu2018.jpg',
   duration,
   sources,
   shouldObserveResize: true,
-  src: 'https://zhstatic.zhihu.com/cfe/griffith/zhihu2018_sd.mp4',
   useMSE: true,
+  // FIXME: 有无 autoplay 都有 bug
+  autoplay: true,
   onEvent: logEvent,
 }
 

diff --git a/example/src/HLSPage.tsx b/example/src/HLSPage.tsx
@@ -1,6 +1,7 @@
+import Player, {PlayerProps} from 'griffith'
 import React from 'react'
-import Player from 'griffith'
 import {logEvent} from './utils'
+import useQuery from './utils/useQuery'
 
 const sources = {
   // 注意，这里手动提供了 auto 品质的 source，因此会无视 useAutoQuality 的配置
@@ -15,19 +16,31 @@ const sources = {
   },
 }
 
-const props = {
+const props: PlayerProps = {
   id: 'test-hls-video',
   title: 'Test HLS Video',
   standalone: true,
   cover: 'https://zhstatic.zhihu.com/cfe/griffith/player.png',
   sources,
   shouldObserveResize: true,
-  autoplay: true,
   hiddenTimeline: true,
   hiddenTime: true,
   onEvent: logEvent,
 }
 
-const App = () => <Player {...props} />
+const App = () => {
+  const query = useQuery()
+  const autoplay = 'autoplay' in query
+
+  return (
+    <Player
+      {...props}
+      // FIXME: 无 autoplay 播放中正常，https://github.com/zhihu/griffith/issues/231
+      autoplay={autoplay}
+      // Player 没有响应 autoplay
+      key={String(autoplay)}
+    />
+  )
+}
 
 export default App
diff --git a/example/src/MP4Page.tsx b/example/src/MP4Page.tsx
@@ -1,8 +1,13 @@
-import React, {useState, useEffect} from 'react'
-import Player, {useMessageContextRef, ACTIONS, EVENTS} from 'griffith'
-import {useLocation} from 'react-router-dom'
+import Player, {
+  ACTIONS,
+  EVENTS,
+  PlayerProps,
+  useMessageContextRef,
+} from 'griffith'
+import React, {useState} from 'react'
 import Logo from './Logo'
 import {logEvent} from './utils'
+import useQuery from './utils/useQuery'
 
 const duration = 182
 
@@ -27,7 +32,7 @@ const sources = {
   },
 }
 
-const props = {
+const props: PlayerProps = {
   id: 'zhihu2018',
   standalone: true,
   title: '2018 我们如何与世界相处？',
@@ -36,21 +41,6 @@ const props = {
   sources,
   autoplay: true,
   shouldObserveResize: true,
-  src: 'https://zhstatic.zhihu.com/cfe/griffith/zhihu2018_sd.mp4',
-}
-
-const parseQuery = (search: string) =>
-  Object.fromEntries(
-    new URLSearchParams(search) as unknown as Iterable<[string, string]>
-  )
-
-const useQuery = () => {
-  const location = useLocation<null>()
-  const [query, setQuery] = useState(() => parseQuery(location.search))
-  useEffect(() => {
-    setQuery(parseQuery(location.search))
-  }, [location.search])
-  return query
 }
 
 const App = () => {

diff --git a/example/src/utils/useQuery.ts b/example/src/utils/useQuery.ts
@@ -0,0 +1,18 @@
+import {useState, useEffect} from 'react'
+import {useLocation} from 'react-router-dom'
+
+const parseQuery = (search: string) =>
+  Object.fromEntries(
+    new URLSearchParams(search) as unknown as Iterable<[string, string]>
+  )
+
+const useQuery = () => {
+  const location = useLocation<null>()
+  const [query, setQuery] = useState(() => parseQuery(location.search))
+  useEffect(() => {
+    setQuery(parseQuery(location.search))
+  }, [location.search])
+  return query
+}
+
+export default useQuery