feat: add defaultQuality prop (#141)

* feat: add defaultQuality prop * fix: readme Co-authored-by: zhangyue04 <zhangyue04@zhihu.com>
zhihu · Sep 23, 2020 · 084f2fa · 084f2fa
1 parent b8109f6
commit 084f2fa
Show file tree

Hide file tree

Showing 5 changed files with 18 additions and 3 deletions.
diff --git a/packages/griffith/README-zh-Hans.md b/packages/griffith/README-zh-Hans.md
@@ -24,6 +24,7 @@ render(<Player {...props} />)
 | `cover`                   | `string`                                          |           | 视频封面图片 URL                           |
 | `duration`                | `number`                                          |           | 初始视频时长。在视频元数据载入后使用实际值 |
 | `sources`                 | `sources`                                         |           | 视频播放数据。具体见下,                    |
+| `defaultQuality`          | `ld \| sd \| hd \| fhd`                           |           | 视频默认播放清晰度                         |
 | `standalone`              | `boolean`                                         | `false`   | 是否启用 standalone 模式                   |
 | `onBeforePlay`            | `function`                                        | `void`    | 视频播放之前回调函数                       |
 | `shouldObserveResize`     | `boolean`                                         | `false`   | 是否监听窗口 resize                        |

diff --git a/packages/griffith/README.md b/packages/griffith/README.md
@@ -25,6 +25,7 @@ render(<Player {...props} />)
 | `cover`                   | `string`                                         |           | Video cover image                                                        |
 | `duration`                | `number`                                         |           | Initial video duration. Use actual values after video metadata is loaded |
 | `sources`                 | `sources`                                        |           | Video playback data                                                      |
+| `defaultQuality`          | `ld \| sd \| hd \| fhd`                          |           | Video default quality                                                    |
 | `standalone`              | `boolean`                                        | `false`   | Enable standalone mode                                                   |
 | `onBeforePlay`            | `function`                                       | `void`    | Callback function before video playback                                  |
 | `shouldObserveResize`     | `boolean`                                        | `false`   | Listen to the window resize                                              |

diff --git a/packages/griffith/index.d.ts b/packages/griffith/index.d.ts
@@ -27,6 +27,7 @@ interface PlayerContainerProps {
   initialObjectFit?: 'fill' | 'contain' | 'cover' | 'none' | 'scale-down'
   useMSE?: boolean
   locale?: 'en' | 'ja' | 'zh-Hans' | 'zh-Hant'
+  defaultQuality?: RealQuality[]
 }
 
 interface Subscription {

diff --git a/packages/griffith/src/components/PlayerContainer/PlayerContainer.js b/packages/griffith/src/components/PlayerContainer/PlayerContainer.js
@@ -27,13 +27,19 @@ const PlayerContainer = ({
   locale = 'en',
   autoplay,
   disablePictureInPicture,
+  defaultQuality,
 }) => (
   <ObjectFitProvider initialObjectFit={initialObjectFit}>
     <PositionProvider shouldObserveResize={shouldObserveResize}>
       <MessageProvider id={id} enableCrossWindow={standalone}>
         <InternalContext.Consumer>
           {({emitEvent, subscribeAction}) => (
-            <VideoSourceProvider onEvent={emitEvent} sources={sources} id={id}>
+            <VideoSourceProvider
+              onEvent={emitEvent}
+              sources={sources}
+              id={id}
+              defaultQuality={defaultQuality}
+            >
               <LocaleContext.Provider value={locale}>
                 <VideoSourceContext.Consumer>
                   {({currentSrc}) => (
@@ -85,6 +91,7 @@ PlayerContainer.propTypes = {
   onBeforePlay: PropTypes.func,
   initialObjectFit: PropTypes.oneOf(VALID_FIT),
   useMSE: PropTypes.bool,
+  defaultQuality: PropTypes.oneOf(['ld', 'sd', 'hd', 'fhd']),
 }
 
 export default PlayerContainer
diff --git a/packages/griffith/src/contexts/VideoSource/VideoSourceProvider.js b/packages/griffith/src/contexts/VideoSource/VideoSourceProvider.js
@@ -24,7 +24,10 @@ export default class VideoSourceProvider extends React.Component {
     dataKey: null,
   }
 
-  static getDerivedStateFromProps = ({sources: videoSources, id}, state) => {
+  static getDerivedStateFromProps = (
+    {sources: videoSources, id, defaultQuality},
+    state
+  ) => {
     if (!videoSources) return null
     const {format, play_url} = Object.values(videoSources)[0]
     const {expiration} = parse(play_url)
@@ -39,7 +42,9 @@ export default class VideoSourceProvider extends React.Component {
     if (!isMobile && format === 'm3u8') {
       qualities.unshift('auto')
     }
-    const currentQuality = state.currentQuality || qualities[0]
+
+    const defaultCurrentQuality = defaultQuality || qualities[0]
+    const currentQuality = state.currentQuality || defaultCurrentQuality
 
     return {
       currentQuality,