From 83c857a47638e96745939760deaefe6e528a31ed Mon Sep 17 00:00:00 2001 From: xiabaoying Date: Thu, 13 Oct 2022 15:35:34 +0800 Subject: [PATCH] feat: enableCrossWindowMessage split away from standalone --- packages/griffith/README-zh-Hans.md | 57 +++++++++++---------- packages/griffith/README.md | 55 ++++++++++---------- packages/griffith/src/components/Player.tsx | 8 ++- 3 files changed, 64 insertions(+), 56 deletions(-) diff --git a/packages/griffith/README-zh-Hans.md b/packages/griffith/README-zh-Hans.md index 70b76c68..430952fb 100644 --- a/packages/griffith/README-zh-Hans.md +++ b/packages/griffith/README-zh-Hans.md @@ -17,34 +17,35 @@ render() ### `props` -| 字段 | 类型 | 默认值 | 说明 | -| ------------------------- | ------------------------------------------------- | --------- | --------------------------------------------------- | -| `id` | `string` | | 播放器实例唯一标识 | -| `title` | `string` | | 视频标题 | -| `cover` | `string` | | 视频封面图片 URL | -| `duration` | `number` | | 初始视频时长。在视频元数据载入后使用实际值 | -| `sources` | `sources` | | 视频播放数据。具体见下, | -| `defaultQuality` | `ld \| sd \| hd \| fhd` | | 视频默认播放清晰度 | -| `defaultQualityOrder` | `asc \| desc` | `asc` | 视频默认选择清晰度的顺序 | -| `useAutoQuality` | `boolean` | `false` | 是否启用自动清晰度功能 | -| `standalone` | `boolean` | `false` | 是否启用 standalone 模式 | -| `onBeforePlay` | `function` | `void` | 视频播放之前回调函数 | -| `onEvent` | `(type: string) => void` | `void` | 公共事件的回调函数 | -| `shouldObserveResize` | `boolean` | `false` | 是否监听窗口 resize | -| `initialObjectFit` | `fill \| \contain \| cover \| none \| scale-down` | `contain` | object-fit 参数 | -| `useMSE` | `boolean` | `false` | 是否启用 MSE | -| `locale` | `en \| ja \| zh-Hans \| zh-Hant` | `en` | 界面语言 | -| `autoplay` | `boolean` | `false` | 自动播放 | -| `muted` | `boolean` | `false` | 静音 | -| `disablePictureInPicture` | `boolean` | `false` | 禁用画中画功能 | -| `hiddenPlayButton` | `boolean` | `false` | 隐藏播放按钮 | -| `hiddenTimeline` | `boolean` | `false` | 隐藏进度条 | -| `hiddenTime` | `boolean` | `false` | 隐藏播放时间 | -| `hiddenQualityMenu` | `boolean` | `false` | 隐藏质量选择菜单（如果展示的话） | -| `hiddenVolume` | `boolean` | `false` | 隐藏音量调节 | -| `hiddenFullScreenButton` | `boolean` | `false` | 隐藏全屏按钮 | -| `progressDots` | `ProgressDotItem[]` | `[]` | 进度条节点信息 | -| `noWriteDocTitle` | `boolean` | `false` | standalone 模式，是否使用 title 覆盖 document.title | +| 字段 | 类型 | 默认值 | 说明 | +| -------------------------- | ------------------------------------------------- | --------- | -------------------------------------------------------------------------------------------------- | +| `id` | `string` | | 播放器实例唯一标识 | +| `title` | `string` | | 视频标题 | +| `cover` | `string` | | 视频封面图片 URL | +| `duration` | `number` | | 初始视频时长。在视频元数据载入后使用实际值 | +| `sources` | `sources` | | 视频播放数据。具体见下, | +| `defaultQuality` | `ld \| sd \| hd \| fhd` | | 视频默认播放清晰度 | +| `defaultQualityOrder` | `asc \| desc` | `asc` | 视频默认选择清晰度的顺序 | +| `useAutoQuality` | `boolean` | `false` | 是否启用自动清晰度功能 | +| `standalone` | `boolean` | `false` | 是否启用 standalone 模式 | +| `enableCrossWindowMessage` | `boolean` | `false` | 是否会向父级页面发送 message,iframe 所在的页面可以监听这些事件，与播放器进行通信。具备最高优先级。 | +| `onBeforePlay` | `function` | `void` | 视频播放之前回调函数 | +| `onEvent` | `(type: string) => void` | `void` | 公共事件的回调函数 | +| `shouldObserveResize` | `boolean` | `false` | 是否监听窗口 resize | +| `initialObjectFit` | `fill \| \contain \| cover \| none \| scale-down` | `contain` | object-fit 参数 | +| `useMSE` | `boolean` | `false` | 是否启用 MSE | +| `locale` | `en \| ja \| zh-Hans \| zh-Hant` | `en` | 界面语言 | +| `autoplay` | `boolean` | `false` | 自动播放 | +| `muted` | `boolean` | `false` | 静音 | +| `disablePictureInPicture` | `boolean` | `false` | 禁用画中画功能 | +| `hiddenPlayButton` | `boolean` | `false` | 隐藏播放按钮 | +| `hiddenTimeline` | `boolean` | `false` | 隐藏进度条 | +| `hiddenTime` | `boolean` | `false` | 隐藏播放时间 | +| `hiddenQualityMenu` | `boolean` | `false` | 隐藏质量选择菜单（如果展示的话） | +| `hiddenVolume` | `boolean` | `false` | 隐藏音量调节 | +| `hiddenFullScreenButton` | `boolean` | `false` | 隐藏全屏按钮 | +| `progressDots` | `ProgressDotItem[]` | `[]` | 进度条节点信息 | +| `noWriteDocTitle` | `boolean` | `false` | standalone 模式，是否使用 title 覆盖 document.title | `sources` 字段： diff --git a/packages/griffith/README.md b/packages/griffith/README.md index c406a4e3..418d8353 100644 --- a/packages/griffith/README.md +++ b/packages/griffith/README.md @@ -18,33 +18,34 @@ render() ### `Props` -| Name | Type | Default | Description | -| ------------------------- | ------------------------------------------------ | --------- | ------------------------------------------------------------------------ | -| `id` | `string` | | Unique identifier of the player instance | -| `title` | `string` | | Video title | -| `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 | -| `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 | -| `onEvent` | `(type: string) => void` | `void` | Callback function when common event is triggered | -| `shouldObserveResize` | `boolean` | `false` | Listen to the window resize | -| `initialObjectFit` | `fill \| contain \| cover \| none \| scale-down` | `contain` | object-fit | -| `useMSE` | `boolean` | `false` | Enable Media Source Extensions™ | -| `locale` | `en \| ja \| zh-Hans \| zh-Hant` | `en` | UI Locale | -| `autoplay` | `boolean` | `false` | Autoplay | -| `muted` | `boolean` | `false` | Muted | -| `disablePictureInPicture` | `boolean` | `false` | Disable Picture in Picture feature | -| `hiddenPlayButton` | `boolean` | `false` | Hide play button | -| `hiddenTimeline` | `boolean` | `false` | Hide progress bar | -| `hiddenTime` | `boolean` | `false` | Hide duration and total time | -| `hiddenQualityMenu` | `boolean` | `false` | Hide quality menu (if it is shown) | -| `hiddenVolume` | `boolean` | `false` | Hide volume | -| `hiddenFullScreenButton` | `boolean` | `false` | Hide full screen button | -| `progressDots` | `ProgressDotItem[]` | `[]` | Node information on the progress bar | +| Name | Type | Default | Description | +| -------------------------- | ------------------------------------------------ | --------- | ----------------------------------------------------------------------------------------------------------------------- | +| `id` | `string` | | Unique identifier of the player instance | +| `title` | `string` | | Video title | +| `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 | +| `defaultQualityOrder` | `asc \| desc` | `asc` | the order for selecting default quality | +| `useAutoQuality` | `boolean` | `false` | Enable auto quality | +| `standalone` | `boolean` | `false` | Enable standalone mode | +| `enableCrossWindowMessage` | `boolean` | `false` | Enable send messages cross window, the parent page can communicate with player in iframe.Has the highest priority-first | +| `onBeforePlay` | `function` | `void` | Callback function before video playback | +| `onEvent` | `(type: string) => void` | `void` | Callback function when common event is triggered | +| `shouldObserveResize` | `boolean` | `false` | Listen to the window resize | +| `initialObjectFit` | `fill \| contain \| cover \| none \| scale-down` | `contain` | object-fit | +| `useMSE` | `boolean` | `false` | Enable Media Source Extensions™ | +| `locale` | `en \| ja \| zh-Hans \| zh-Hant` | `en` | UI Locale | +| `autoplay` | `boolean` | `false` | Autoplay | +| `muted` | `boolean` | `false` | Muted | +| `disablePictureInPicture` | `boolean` | `false` | Disable Picture in Picture feature | +| `hiddenPlayButton` | `boolean` | `false` | Hide play button | +| `hiddenTimeline` | `boolean` | `false` | Hide progress bar | +| `hiddenTime` | `boolean` | `false` | Hide duration and total time | +| `hiddenQualityMenu` | `boolean` | `false` | Hide quality menu (if it is shown) | +| `hiddenVolume` | `boolean` | `false` | Hide volume | +| `hiddenFullScreenButton` | `boolean` | `false` | Hide full screen button | +| `progressDots` | `ProgressDotItem[]` | `[]` | Node information on the progress bar | `sources`: diff --git a/packages/griffith/src/components/Player.tsx b/packages/griffith/src/components/Player.tsx index 7aafa6df..89389dc5 100644 --- a/packages/griffith/src/components/Player.tsx +++ b/packages/griffith/src/components/Player.tsx @@ -58,6 +58,7 @@ const CONTROLLER_HIDE_DELAY = 3000 type InnerPlayerProps = { children?: React.ReactNode standalone?: boolean + enableCrossWindowMessage?: boolean error?: { message?: string } @@ -742,6 +743,7 @@ const Player: React.FC = ({ sources, onEvent, dispatchRef, + enableCrossWindowMessage, messageContextRef, shouldObserveResize, initialObjectFit, @@ -760,7 +762,11 @@ const Player: React.FC = ({