feat: add defaultQualityOrder prop (#283)

Co-authored-by: xiabaoying <xiabaoying@zhihu.com>
zhihu · Sep 27, 2022 · 2c306be · 2c306be
1 parent d1bda55
commit 2c306be
Show file tree

Hide file tree

Showing 7 changed files with 35 additions and 12 deletions.
diff --git a/packages/griffith/README-zh-Hans.md b/packages/griffith/README-zh-Hans.md
@@ -25,6 +25,7 @@ render(<Player {...props} />)
 | `duration`                | `number`                                          |           | 初始视频时长。在视频元数据载入后使用实际值          |
 | `sources`                 | `sources`                                         |           | 视频播放数据。具体见下,                             |
 | `defaultQuality`          | `ld \| sd \| hd \| fhd`                           |           | 视频默认播放清晰度                                  |
+| `defaultQualityOrder`     | `asc \| desc`                                     | `asc`     | 视频默认选择清晰度的顺序                            |
 | `useAutoQuality`          | `boolean`                                         | `false`   | 是否启用自动清晰度功能                              |
 | `standalone`              | `boolean`                                         | `false`   | 是否启用 standalone 模式                            |
 | `onBeforePlay`            | `function`                                        | `void`    | 视频播放之前回调函数                                |

diff --git a/packages/griffith/README.md b/packages/griffith/README.md
@@ -26,6 +26,7 @@ render(<Player {...props} />)
 | `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                                                    |
+| `defaultQualityOrder`     | `asc \| desc`                                    | `asc`     | the order for selecting default quality                                  |
 | `useAutoQuality`          | `boolean`                                        | `false`   | Enable auto quality                                                      |
 | `standalone`              | `boolean`                                        | `false`   | Enable standalone mode                                                   |
 | `onBeforePlay`            | `function`                                       | `void`    | Callback function before video playback                                  |

diff --git a/packages/griffith/src/components/Player.tsx b/packages/griffith/src/components/Player.tsx
@@ -29,6 +29,7 @@ import {
   ProgressDot,
   ProgressValue,
   RealQuality,
+  QualityOrder,
 } from '../types'
 import formatDuration from '../utils/formatDuration'
 import getBufferedTime from '../utils/getBufferedTime'
@@ -99,6 +100,7 @@ type OuterPlayerProps = {
   messageContextRef?: React.MutableRefObject<MessageContextValue | void>
   initialObjectFit?: ObjectFit
   defaultQuality?: RealQuality
+  defaultQualityOrder?: QualityOrder
   playbackRates?: PlaybackRate[]
   defaultPlaybackRate?: PlaybackRate
   shouldObserveResize?: boolean
@@ -740,6 +742,7 @@ const Player: React.FC<PlayerProps> = ({
   locale = defaultLocale,
   localeConfig,
   defaultQuality,
+  defaultQualityOrder = 'asc',
   defaultPlaybackRate = DEFAULT_PLAYBACK_RATE,
   playbackRates = DEFAULT_PLAYBACK_RATES,
   useAutoQuality = false,
@@ -761,6 +764,7 @@ const Player: React.FC<PlayerProps> = ({
             defaultQuality={defaultQuality}
             useAutoQuality={useAutoQuality}
             defaultPlaybackRate={defaultPlaybackRate}
+            defaultQualityOrder={defaultQualityOrder}
             playbackRates={playbackRates}
           >
             <LocaleProvider locale={locale} localeConfig={localeConfig}>

diff --git a/packages/griffith/src/components/items/QualityMenuItem.tsx b/packages/griffith/src/components/items/QualityMenuItem.tsx
@@ -2,7 +2,6 @@ import React from 'react'
 import {css} from 'aphrodite/no-important'
 import {Quality} from '../../types'
 import VideoSourceContext from '../../contexts/VideoSourceContext'
-import reverseArray from '../../utils/reverseArray'
 import TranslatedText from '../TranslatedText'
 import ControllerButton from './ControllerButton'
 import styles from '../Controller.styles'
@@ -58,7 +57,7 @@ class QualityMenuItem extends React.PureComponent<QualityMenuItemProps, State> {
                 )}
               >
                 <div className={css(styles.qualityMenu)}>
-                  {reverseArray(qualities).map((q) => (
+                  {qualities.map((q) => (
                     <button
                       key={q}
                       className={css(

diff --git a/packages/griffith/src/contexts/VideoSourceProvider.tsx b/packages/griffith/src/contexts/VideoSourceProvider.tsx
@@ -1,9 +1,16 @@
 import React, {useContext, useEffect, useMemo, useState} from 'react'
-import {PlaySourceMap, PlaybackRate, RealQuality, Quality} from '../types'
+import {
+  PlaySourceMap,
+  PlaybackRate,
+  RealQuality,
+  Quality,
+  QualityOrder,
+} from '../types'
 import VideoSourceContext from './VideoSourceContext'
 import {getQualities, getSources} from './parsePlaylist'
 import {EVENTS} from 'griffith-message'
 import {ua} from 'griffith-utils'
+import reverseArray from '../utils/reverseArray'
 import useHandler from '../hooks/useHandler'
 import useChanged from '../hooks/useChanged'
 import {InternalMessageContext} from './MessageContext'
@@ -14,6 +21,7 @@ const {isMobile} = ua
 type VideoSourceProviderProps = {
   sources: PlaySourceMap
   defaultQuality?: RealQuality
+  defaultQualityOrder?: QualityOrder
   useAutoQuality?: boolean
   playbackRates: PlaybackRate[]
   defaultPlaybackRate?: PlaybackRate
@@ -25,17 +33,19 @@ const VideoSourceProvider: React.FC<VideoSourceProviderProps> = ({
   playbackRates,
   defaultPlaybackRate,
   defaultQuality,
+  defaultQualityOrder,
   children,
 }) => {
   const {emitEvent} = useContext(InternalMessageContext)
   const lastSourceMap = useChanged(sourceMap)
-  const {qualities, sources, format} = useMemo(() => {
+  const {qualities, sources, format, isDescOrder} = useMemo(() => {
     // 其实视频源应当是必需参数
     if (!lastSourceMap) {
       return {qualities: [], sources: []}
     }
     const {format} = Object.values(lastSourceMap)[0]!
-    const qualities = getQualities(lastSourceMap, isMobile)
+    const isDescOrder = defaultQualityOrder === 'desc'
+    const qualities = getQualities(lastSourceMap, isMobile, isDescOrder)
     const sources = getSources(qualities, lastSourceMap)
 
     // 目前只有直播流实现了手动拼接 auto 清晰度的功能
@@ -48,11 +58,11 @@ const VideoSourceProvider: React.FC<VideoSourceProviderProps> = ({
       qualities.unshift('auto')
     }
 
-    return {qualities, sources, format}
-  }, [useAutoQuality, lastSourceMap])
+    return {qualities, sources, format, isDescOrder}
+  }, [useAutoQuality, lastSourceMap, defaultQualityOrder])
 
   const [currentQuality, setCurrentQualityRaw] = useState(
-    defaultQuality && (qualities as Quality[]).indexOf(defaultQuality) !== -1
+    defaultQuality && (qualities as Quality[]).includes(defaultQuality)
       ? defaultQuality
       : qualities[0]
   )
@@ -99,7 +109,7 @@ const VideoSourceProvider: React.FC<VideoSourceProviderProps> = ({
 
   const contextValue = useMemo(
     () => ({
-      qualities,
+      qualities: isDescOrder ? qualities : reverseArray(qualities),
       playbackRates,
       format: format!,
       sources,
@@ -116,6 +126,7 @@ const VideoSourceProvider: React.FC<VideoSourceProviderProps> = ({
       format,
       playbackRates,
       qualities,
+      isDescOrder,
       setCurrentPlaybackRate,
       setCurrentQuality,
       sources,

diff --git a/packages/griffith/src/contexts/parsePlaylist.ts b/packages/griffith/src/contexts/parsePlaylist.ts
@@ -1,9 +1,15 @@
 import {Quality, FormattedPlaySource, PlaySourceMap} from '../types'
 const QUALITY_ORDER: Quality[] = ['auto', 'ld', 'sd', 'hd', 'fhd']
 
-export const getQualities = (sources: PlaySourceMap, isMobile: any) => {
-  const qualities = (Object.keys(sources) as Quality[]).sort(
-    (a, b) => QUALITY_ORDER.indexOf(a) - QUALITY_ORDER.indexOf(b)
+export const getQualities = (
+  sources: PlaySourceMap,
+  isMobile: any,
+  isDescOrder: boolean
+) => {
+  const qualities = (Object.keys(sources) as Quality[]).sort((a, b) =>
+    isDescOrder
+      ? QUALITY_ORDER.indexOf(b) - QUALITY_ORDER.indexOf(a)
+      : QUALITY_ORDER.indexOf(a) - QUALITY_ORDER.indexOf(b)
   )
 
   if (qualities.length > 1) {

diff --git a/packages/griffith/src/types.ts b/packages/griffith/src/types.ts
@@ -6,6 +6,7 @@
 
 export type RealQuality = 'ld' | 'sd' | 'hd' | 'fhd'
 export type Quality = 'auto' | RealQuality
+export type QualityOrder = 'asc' | 'desc'
 
 export interface PlaySource {
   bitrate?: number