diff --git a/packages/griffith/README-zh-Hans.md b/packages/griffith/README-zh-Hans.md index 136a9723..70b76c68 100644 --- a/packages/griffith/README-zh-Hans.md +++ b/packages/griffith/README-zh-Hans.md @@ -25,6 +25,7 @@ render() | `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 index effb4374..c406a4e3 100644 --- a/packages/griffith/README.md +++ b/packages/griffith/README.md @@ -26,6 +26,7 @@ render() | `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 index 86841dfb..35a3b4a0 100644 --- 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 initialObjectFit?: ObjectFit defaultQuality?: RealQuality + defaultQualityOrder?: QualityOrder playbackRates?: PlaybackRate[] defaultPlaybackRate?: PlaybackRate shouldObserveResize?: boolean @@ -740,6 +742,7 @@ const Player: React.FC = ({ locale = defaultLocale, localeConfig, defaultQuality, + defaultQualityOrder = 'asc', defaultPlaybackRate = DEFAULT_PLAYBACK_RATE, playbackRates = DEFAULT_PLAYBACK_RATES, useAutoQuality = false, @@ -761,6 +764,7 @@ const Player: React.FC = ({ defaultQuality={defaultQuality} useAutoQuality={useAutoQuality} defaultPlaybackRate={defaultPlaybackRate} + defaultQualityOrder={defaultQualityOrder} playbackRates={playbackRates} > diff --git a/packages/griffith/src/components/items/QualityMenuItem.tsx b/packages/griffith/src/components/items/QualityMenuItem.tsx index 705e4414..b126dc68 100644 --- 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 { )} > - {reverseArray(qualities).map((q) => ( + {qualities.map((q) => ( = ({ 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 = ({ 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 = ({ const contextValue = useMemo( () => ({ - qualities, + qualities: isDescOrder ? qualities : reverseArray(qualities), playbackRates, format: format!, sources, @@ -116,6 +126,7 @@ const VideoSourceProvider: React.FC = ({ format, playbackRates, qualities, + isDescOrder, setCurrentPlaybackRate, setCurrentQuality, sources, diff --git a/packages/griffith/src/contexts/parsePlaylist.ts b/packages/griffith/src/contexts/parsePlaylist.ts index 91ec562e..210fc381 100644 --- 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 index 4901dde7..23f4b40f 100644 --- 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