feat: 修复 UI 样式以及增加 shouldShowPageFullScreenButton prop (#219)

Co-authored-by: zuoxiaofei <zuoxiaofei@zhihu.com>

example/src/MP4Page.tsx

@@ -73,13 +73,25 @@ const App = () => {
         {...props}
         localeConfig={{
           'zh-Hans': {
-            'quality-ld': '流畅 360P',
-            'quality-sd': '清晰 480P',
-            'quality-hd': '高清 720P',
-            'quality-fhd': '超清 1080P',
+            'quality-ld': {
+              text: '流畅 360P',
+              narrow: '流畅',
+            },
+            'quality-sd': {
+              text: '清晰 480P',
+              narrow: '清晰',
+            },
+            'quality-hd': {
+              text: '高清 720P',
+              narrow: '高清',
+            },
+            'quality-fhd': {
+              text: '超清 1080P',
+              narrow: '超清',
+            },
           },
         }}
-        locale={'ja'}
+        locale={'zh-Hans'}
         messageContextRef={messageContextRef}
         onEvent={logEvent}
       >

packages/griffith/package.json

@@ -1,6 +1,6 @@
 {
   "name": "griffith",
-  "version": "1.18.4",
+  "version": "1.18.5",
   "description": "Zhihu Video Player",
   "homepage": "https://github.com/zhihu/griffith/tree/master/packages/griffith",
   "license": "MIT",

packages/griffith/src/components/Controller.styles.ts

@@ -2,7 +2,6 @@ import {StyleSheet} from 'aphrodite/no-important'
 
 export default StyleSheet.create({
   root: {
-    height: '5em',
     padding: '0 0.5em',
   },
   rootTop: {

packages/griffith/src/components/Controller.tsx

@@ -12,6 +12,8 @@ import VolumeItem from './items/VolumeItem'
 import FullScreenButtonItem from './items/FullScreenButtonItem'
 import PipButtonItem from './items/PipButtonItem'
 import styles from './Controller.styles'
+import PlaybackRateMenuItem from './items/PlaybackRateMenuItem'
+import PageFullScreenButtonItem from './items/PageFullScreenButtonItem'
 
 export type ToggleType = 'button' | 'keyCode' | 'video' | null
 
@@ -33,7 +35,7 @@ type ControllerProps = {
   onQualityChange?: (...args: any[]) => any
   onVolumeChange?: (volume: number) => void
   onToggleFullScreen?: () => void
-  onTogglePageFullScreen: (...args: void[]) => void
+  onTogglePageFullScreen?: () => void
   onTogglePip?: (...args: any[]) => void
   onProgressDotHover?: (...args: any[]) => any
   onProgressDotLeave?: (...args: any[]) => any
@@ -47,6 +49,7 @@ type ControllerProps = {
   hiddenVolumeItem?: boolean
   hiddenFullScreenButton?: boolean
   hiddenPlaybackRateItem?: boolean
+  shouldShowPageFullScreenButton?: boolean
 }
 
 type State = {
@@ -66,6 +69,7 @@ class Controller extends Component<ControllerProps, State> {
     volume: 0.5,
     buffered: 0,
     isFullScreen: false,
+    isPageFullScreen: false,
     showPip: false,
     hiddenPlayButton: false,
     hiddenTimeline: false,
@@ -178,7 +182,15 @@ class Controller extends Component<ControllerProps, State> {
   }
 
   handleKeyDown = (event: KeyboardEvent) => {
-    const {duration, currentTime, volume, show, onToggleFullScreen} = this.props
+    const {
+      duration,
+      currentTime,
+      volume,
+      show,
+      onToggleFullScreen,
+      onTogglePageFullScreen,
+      isPageFullScreen,
+    } = this.props
     let handled = true
     switch (event.keyCode) {
       case KeyCode.SPACE:
@@ -194,7 +206,11 @@ class Controller extends Component<ControllerProps, State> {
           onToggleFullScreen?.()
         }
         break
-
+      case KeyCode.ESC:
+        if (this.firstKey && isPageFullScreen) {
+          onTogglePageFullScreen?.()
+        }
+        break
       case KeyCode.LEFT:
         this.handleSeek(currentTime - 5)
         break
@@ -287,10 +303,12 @@ class Controller extends Component<ControllerProps, State> {
       currentTime,
       volume,
       isFullScreen,
+      isPageFullScreen,
       isPip,
       onDragStart,
       onDragEnd,
       onToggleFullScreen,
+      onTogglePageFullScreen,
       onTogglePip,
       showPip,
       progressDots,
@@ -299,7 +317,9 @@ class Controller extends Component<ControllerProps, State> {
       hiddenTime,
       hiddenQualityMenu,
       hiddenVolumeItem,
+      hiddenPlaybackRateItem,
       hiddenFullScreenButton,
+      shouldShowPageFullScreenButton,
       onProgressDotHover,
       onProgressDotLeave,
     } = this.props
@@ -347,11 +367,15 @@ class Controller extends Component<ControllerProps, State> {
             )}
           </div>
           <div className={css(styles.rootBottomRight)}>
-            {/* TODO: 倍速按钮暂时删除 */}
-            {/* {!hiddenPlaybackRateItem && <PlaybackRateMenuItem />} */}
+            {!hiddenPlaybackRateItem && <PlaybackRateMenuItem />}
             {!hiddenQualityMenu && <QualityMenuItem />}
             {showPip && <PipButtonItem isPip={isPip} onClick={onTogglePip} />}
-            {/* TODO: 网页全屏暂时删除 */}
+            {shouldShowPageFullScreenButton && (
+              <PageFullScreenButtonItem
+                isFullScreen={isPageFullScreen}
+                onClick={onTogglePageFullScreen}
+              />
+            )}
             {!hiddenFullScreenButton && (
               <FullScreenButtonItem
                 isFullScreen={isFullScreen!}

packages/griffith/src/components/Player.tsx

@@ -36,7 +36,6 @@ import storage from '../utils/storage'
 import Pip from '../utils/pip'
 
 import styles, {hiddenOrShownStyle} from './Player.styles'
-
 const CONTROLLER_HIDE_DELAY = 3000
 const {isMobile} = ua
 
@@ -72,6 +71,7 @@ type InnerPlayerProps = ProviderOnlyProps & {
   hiddenVolume?: boolean
   hiddenFullScreenButton?: boolean
   hiddenPlaybackRateItem?: boolean
+  shouldShowPageFullScreenButton?: boolean
 }
 
 // 仅供 Provider 使用的属性
@@ -432,12 +432,16 @@ class InnerPlayer extends Component<InnerPlayerProps, State> {
       const onExit = () => {
         return onEvent(EVENTS.EXIT_FULLSCREEN)
       }
-      BigScreen.toggle(this.playerRef.current!, onEnter, onExit)
+      BigScreen?.toggle(this.playerRef.current!, onEnter, onExit)
     }
   }
 
   handleTogglePageFullScreen = () => {
     const {onEvent} = this.props
+    // 如果当前正在全屏就先关闭全屏
+    if (Boolean(BigScreen.element) && !Pip.pictureInPictureElement) {
+      this.handleToggleFullScreen()
+    }
     if (this.state.isEnterPageFullScreen) {
       this.setState({isEnterPageFullScreen: false})
       onEvent(EVENTS.EXIT_PAGE_FULLSCREEN)
@@ -448,6 +452,11 @@ class InnerPlayer extends Component<InnerPlayerProps, State> {
   }
 
   handleTogglePip = () => {
+    const {onEvent} = this.props
+    if (this.state.isEnterPageFullScreen) {
+      this.setState({isEnterPageFullScreen: false})
+      onEvent(EVENTS.EXIT_PAGE_FULLSCREEN)
+    }
     Pip.toggle()
   }
 
@@ -542,6 +551,7 @@ class InnerPlayer extends Component<InnerPlayerProps, State> {
       hiddenQualityMenu,
       hiddenVolume,
       hiddenFullScreenButton,
+      shouldShowPageFullScreenButton,
       children,
       hiddenPlaybackRateItem,
     } = this.props
@@ -777,6 +787,9 @@ class InnerPlayer extends Component<InnerPlayerProps, State> {
                   hiddenVolumeItem={hiddenVolume}
                   hiddenPlaybackRateItem={hiddenPlaybackRateItem}
                   hiddenFullScreenButton={hiddenFullScreenButton}
+                  shouldShowPageFullScreenButton={
+                    shouldShowPageFullScreenButton
+                  }
                 />
               </div>
             )}
@@ -817,6 +830,7 @@ const Player: React.FC<PlayerProps> = ({
   initialObjectFit,
   locale = defaultLocale,
   localeConfig,
+  shouldShowPageFullScreenButton = false, // 默认不展示网页全屏，防止页面被嵌入到iframe时候无法达到效果
   defaultQuality,
   defaultPlaybackRate = DEFAULT_PLAYBACK_RATE,
   playbackRates = DEFAULT_PLAYBACK_RATES,
@@ -847,6 +861,9 @@ const Player: React.FC<PlayerProps> = ({
               >
                 <LocaleProvider locale={locale} localeConfig={localeConfig}>
                   <InnerPlayer
+                    shouldShowPageFullScreenButton={
+                      shouldShowPageFullScreenButton
+                    }
                     {...restProps}
                     useAutoQuality={useAutoQuality}
                     standalone={standalone}

packages/griffith/src/components/Timeline.styles.ts

@@ -5,9 +5,7 @@ export default StyleSheet.create({
 })
 
 export const slider = StyleSheet.create({
-  root: {
-    height: 40,
-  },
+  root: {},
 
   track: {
     transition: 'transform 300ms',

packages/griffith/src/components/TranslatedText.tsx

@@ -1,11 +1,18 @@
-import React from 'react'
-import {LocaleConfigKey} from '../constants/locales'
+import React, {ReactElement} from 'react'
+import {LocaleConfig, LocaleConfigKey} from '../constants/locales'
 import LocaleContext from '../contexts/LocaleContext'
 
-const TranslatedText = ({name}: {name: LocaleConfigKey}) => {
+const TranslatedText: React.FC<{
+  name: LocaleConfigKey
+  style?: 'narrow' | 'text' // narrow 简短的文本展示，text 正常文本展示，两种展示格式满足长短文案需求
+}> = ({name, style = 'text'}): ReactElement => {
   return (
     <LocaleContext.Consumer>
       {(locale) => {
+        if (typeof locale[name] === 'object')
+          return (
+            locale[name] as Exclude<LocaleConfig[keyof LocaleConfig], string>
+          )[style]
         return locale[name]
       }}
     </LocaleContext.Consumer>

packages/griffith/src/components/Video.tsx

@@ -232,6 +232,7 @@ class Video extends Component<VideoProps> {
     this.applyPendingAction()
     if (this.isSwitchDefinition) {
       this.isSwitchDefinition = false
+      this.setRate(this.props.currentPlaybackRate)
       this.props.onEvent(
         EVENTS.CHANGE_QUALITY_SUCCESS,
         (this.props as any).currentQuality
@@ -320,6 +321,7 @@ class Video extends Component<VideoProps> {
 
     if (this.isSwitchDefinition) {
       this.isSwitchDefinition = false
+      this.setRate(this.props.currentPlaybackRate)
       this.props.onEvent(EVENTS.CHANGE_QUALITY_FAIL, this.props.currentQuality)
     }
     this.props.onError(error)

packages/griffith/src/components/__tests__/__snapshots__/MinimalTimeline.spec.tsx.snap

@@ -3,7 +3,7 @@
 exports[`MinimalTimeline get MinimalTimeline component 1`] = `
 <div>
   <div
-    class="root_17bkmwy-o_O-root_1u52a97-o_O-root_1pr59fm-o_O-root_qckecg"
+    class="root_17bkmwy-o_O-root_1u52a97-o_O-root_3hmsj-o_O-root_qckecg"
     role="slider"
   >
     <div class="inner_9gm5i8-o_O-inner_qb00m9">
@@ -26,7 +26,7 @@ exports[`MinimalTimeline get MinimalTimeline component 1`] = `
 exports[`MinimalTimeline get MinimalTimeline component 2`] = `
 <div>
   <div
-    class="root_17bkmwy-o_O-root_1u52a97-o_O-root_1pr59fm-o_O-root_qckecg"
+    class="root_17bkmwy-o_O-root_1u52a97-o_O-root_3hmsj-o_O-root_qckecg"
     role="slider"
   >
     <div class="inner_9gm5i8-o_O-inner_qb00m9">

packages/griffith/src/components/items/PageFullScreenButtonItem.tsx

@@ -11,7 +11,7 @@ const {isMobile} = ua
 
 const PageFullScreenButtonItem: React.FC<{
   isFullScreen: boolean
-  onClick: React.HTMLAttributes<HTMLButtonElement>['onClick']
+  onClick: React.HTMLAttributes<HTMLButtonElement>['onClick'] | (() => void)
 }> = ({isFullScreen, onClick}) => (
   <Hover className={css(styles.menuContainer)}>
     {(isFullScreenHovered) => (

packages/griffith/src/components/items/QualityMenuItem.tsx

@@ -44,7 +44,12 @@ class QualityMenuItem extends React.PureComponent<QualityMenuItemProps, State> {
               onMouseLeave={this.handleQualityPointerLeave}
             >
               <ControllerButton
-                label={<TranslatedText name={QUALITIES[currentQuality]} />}
+                label={
+                  <TranslatedText
+                    style="narrow"
+                    name={QUALITIES[currentQuality]}
+                  />
+                }
               />
               <div
                 className={css(

packages/griffith/src/components/items/__tests__/__snapshots__/TimelineItem.spec.tsx.snap

@@ -5,7 +5,7 @@ exports[`TimelineItem get TimelineItem component 1`] = `
   <div class="timeline_bc4egv">
     <div class="root_3hmsj">
       <div
-        class="root_17bkmwy-o_O-root_1u52a97-o_O-root_1pr59fm"
+        class="root_17bkmwy-o_O-root_1u52a97-o_O-root_3hmsj"
         tabindex="0"
         role="slider"
       >

packages/griffith/src/constants/KeyCode.ts

@@ -1,6 +1,7 @@
 export default {
   ENTER: 13,
   SPACE: 32,
+  ESC: 27,
   LEFT: 37,
   UP: 38,
   RIGHT: 39,

packages/griffith/src/constants/locales.ts

@@ -14,9 +14,10 @@ const en = {
   'playback-rate': 'Speed',
   replay: 'Replay',
 }
-
 export type LocaleCode = 'en' | 'ja' | 'zh-Hans' | 'zh-Hant'
-export type LocaleConfig = typeof en
+export type LocaleConfig = {
+  [K in keyof typeof en]: {narrow: string; text: string} | string
+}
 export type LocaleConfigKey = keyof LocaleConfig
 export type LocaleConfigMap = Record<LocaleCode, LocaleConfig>
 export type PartialLocaleConfigMap = Partial<