@quicktvui/ai 1.0.0

package/rules/.docs/zh-CN/component/player-manager/custom-control.md

@@ -0,0 +1,105 @@
+---
+title: PlayerManager
+lang: zh-CN
+---
+
+# 自定义播放控制
+
+播放器中`play()`, `pause()`, `stop()`, `seekTo(time: number)`等是播放控制的标准方法。
+
+除了这些标准的控制方法，还可以自定义播放控制，尤其是在自定义非标准的播放器中使用。
+
+例如：在图片播放器中，可以控制图片放大、缩小，滚动。
+
+## 步骤：
+
+### 一、播放器实现方法`control(options: ESPlayerControlOptions): void;`
+
+在播放器组件中声明实现`control`方法，处理自定义控制逻辑。
+
+```ts
+//声明并实现自定义播放控制逻辑
+function control(options: ESPlayerControlOptions): void {
+  //控制图片播放器播放图片的尺寸
+  playerWidth.value = options.payload?.width ?? "1920";
+  playerHeight.value = options.payload?.height ?? "1080";
+
+  //发送控制播放完毕事件，通知事件管理器和视图管理器
+  //ESPlayerControlOptions 可根据需求自定义命令和参数
+  onPlayerControlled(options);
+}
+```
+
+### 二、播放器发送事件`onPlayerControlled(options: ESPlayerControlOptions): void;`
+
+在播放器组件中发送`onPlayerControlled`事件，通知事件管理器和页面管理器。
+
+```ts
+
+//发送控制播放完毕事件，通知事件管理器和视图管理器
+function onPlayerControlled(options: ESPlayerControlOptions): void {
+  //1、发送事件
+  context.emit("onPlayerControlled", options);
+  //2、通知事件管理器
+  playerEventManager.onPlayerPaused();
+  //3、通知视图管理器
+  playerViewManager.onPlayerPaused();
+}
+```
+
+### 三、播放管理器上监听事件
+
+在`ESPlayerManager`组件上监听`onPlayerControlled`实现更多业务逻辑。
+
+```vue
+
+<es-player-manager
+  ref='playerManager'
+  :initPlayerWindowType='2'
+  :playerList='playerListRef'
+  @onPlayerPlaying='onPlayerPlaying'
+  @onPlayerControlled='onPlayerControlled'
+  class='es-video-player-manager-page-css'
+/>
+
+```
+
+```ts
+function onPlayerControlled(options: ESPlayerControlOptions): void {
+  //处理更多业务逻辑
+}
+```
+
+### 四、调用播放管理器
+
+调用`ESPlayerManager`组件的`control`方法，此方法会直接调用到播放器中的`control`方法。
+
+```ts
+function zoomIn() {
+  const options = {
+    action: "zoomIn",
+    payload: {
+      width: 1920,
+      height: 1080,
+    },
+  };
+  playerManager.value?.control(options);
+}
+
+function zoomOut() {
+  const options = {
+    action: "zoomOut",
+    payload: {
+      width: 500,
+      height: 500,
+    },
+  };
+  playerManager.value?.control(options);
+}
+```
+
+:::demo ## 完整示例
+
+component/player-manager/image-player
+
+:::

package/rules/.docs/zh-CN/component/player-manager/data-structure.md

@@ -0,0 +1,29 @@
+---
+title: PlayerManager
+lang: zh-CN
+---
+
+# 数据结构
+
+## ESPlayerManager中数据结构
+
+* [`ESMediaItemList`](/zh-CN/component/player-manager/introduction)：媒资分集列表
+* [`ESMediaItemt`](/zh-CN/component/player-manager/introduction)：媒资分集
+
+## ESIPlayer中数据结构
+
+* [`ESMediaSourceList`](/zh-CN/component/player/player)：媒资数据源列表
+* [`ESMediaSource`](/zh-CN/component/player/player)：媒资数据源
+
+## 整体数据结构图
+### 一、数据示意图
+<img src="/component/player-manager/data-structure.png" />
+
+### 二、数据对象图
+
+* 红色框：`ESMediaItemList`
+* 绿色框：`ESMediaItemt`
+* 蓝色框：`ESMediaSourceList`
+* 灰色框：`ESMediaSource`
+
+<img src="/component/player-manager/object-data.jpg" />

package/rules/.docs/zh-CN/component/player-manager/decode.md

@@ -0,0 +1,46 @@
+---
+title: PlayerManager
+lang: zh-CN
+---
+
+# 解码方式
+
+内置解码方式如下：
+
+* `ES_PLAYER_DECODE_HARDWARE = 0`
+* `ES_PLAYER_DECODE_SOFTWARE = 1`
+
+## 监听解码方式事件
+
+* 支持的解码方式列表：`onPlayerDecodeListChanged`
+* 当解码方式发生变化：`onPlayerDecodeChanged`
+
+::: tip 播放器事件
+[点击查看详细事件说明](/zh-CN/component/player/player#Events)
+:::
+
+## 获取当前解码方式
+
+```ts
+const playerDecodeManager = useESPlayerDecodeManager()
+playerDecodeManager.getDecode()
+```
+
+## 设置解码方式
+
+```ts
+playerManager.value?.setDecode(ESPlayerDecode.ES_PLAYER_DECODE_HARDWARE)
+```
+
+或者
+
+```ts
+const playerDecodeManager = useESPlayerDecodeManager()
+playerDecodeManager.setDecode(ESPlayerDecode.ES_PLAYER_DECODE_HARDWARE)
+```
+
+:::demo ## 完整示例
+
+component/player-manager/decode
+
+:::

package/rules/.docs/zh-CN/component/player-manager/definition.md

@@ -0,0 +1,85 @@
+---
+title: PlayerManager
+lang: zh-CN
+---
+
+# 清晰度
+
+内置清晰度如下：
+
+* `ES_PLAYER_DEFINITION_UNKNOWN = 0`
+* `ES_PLAYER_DEFINITION_SD = 1`
+* `ES_PLAYER_DEFINITION_HD = 2`
+* `ES_PLAYER_DEFINITION_FULL_HD = 3`
+* `ES_PLAYER_DEFINITION_ORIGINAL = 4`
+* `ES_PLAYER_DEFINITION_BLUERAY = 5`
+* `ES_PLAYER_DEFINITION_FOURK = 6`
+* `ES_PLAYER_DEFINITION_2K = 7`
+
+## 设置不同清晰度的视频地址
+
+仅支持通过不同的视频地址设置清晰度。
+
+```ts
+const mediaSourceList: ESMediaSourceList = {
+  index: 0,
+  list: [
+    {
+      //表明此地址为SD清晰度
+      definition: ESPlayerDefinition.ES_PLAYER_DEFINITION_SD,
+      uri: 'http://qcloudcdn.a311.ottcn.com/data_center/videos/SHORT/DEFAULT/2022/10/27/d4e29cbf-5b15-4523-b9c8-80f18fa76275.mp4',
+    },
+    {
+      //表明此地址为HD清晰度
+      definition: ESPlayerDefinition.ES_PLAYER_DEFINITION_HD,
+      uri: 'http://qcloudcdn.a311.ottcn.com/data_center/videos/SHORT/DEFAULT/2022/01/27/85a658d6-d0ce-4721-adea-f8e2e0b263a7.mp4',
+    },
+    {
+      //表明此地址为FULL_HD清晰度
+      definition: ESPlayerDefinition.ES_PLAYER_DEFINITION_FULL_HD,
+      uri: 'http://qcloudcdn.a311.ottcn.com/data_center/videos/SHORT/DEFAULT/2023/09/17/22edb94d-8ffc-4736-a633-3f9e38c096e8.mp4',
+    },
+    {
+      //表明此地址为4k清晰度
+      definition: ESPlayerDefinition.ES_PLAYER_DEFINITION_FOURK,
+      uri: 'http://qcloudcdn.a311.ottcn.com/data_center/videos/LIB/VARIETY/2022/03/10/2877b7e1-fda6-4591-aff3-3fd3ba4151cf_transcode_1137855.mp4',
+    },
+  ],
+}
+```
+
+## 监听清晰度事件
+
+* 支持的清晰度列表：`onPlayerDefinitionListChanged`
+* 当清晰度发生变化：`onPlayerDefinitionChanged`
+
+::: tip 播放器事件
+[点击查看详细事件说明](/zh-CN/component/player/player#Events)
+:::
+
+## 获取当前清晰度
+
+```ts
+const playerDefinitionManager = useESPlayerDefinitionManager()
+playerDefinitionManager.getDefinition()
+```
+
+## 设置清晰度
+
+```ts
+playerManager.value?.setDefinition(ESPlayerDefinition.ES_PLAYER_DEFINITION_SD)
+
+```
+
+或者
+
+```ts
+const playerDefinitionManager = useESPlayerDefinitionManager()
+playerDefinitionManager.setDefinition(ESPlayerDefinition.ES_PLAYER_DEFINITION_2K)
+```
+
+:::demo ## 完整示例
+
+component/player-manager/definition
+
+:::

package/rules/.docs/zh-CN/component/player-manager/event.md

@@ -0,0 +1,16 @@
+---
+title: PlayerManager
+lang: zh-CN
+---
+
+# 播放事件页面监听
+
+::: tip 播放器事件
+[点击查看详细事件说明](/zh-CN/component/player/player#Events)
+:::
+
+:::demo ## 完整示例
+
+component/player-manager/event
+
+:::

package/rules/.docs/zh-CN/component/player-manager/global-event.md

@@ -0,0 +1,304 @@
+---
+title: PlayerManager
+lang: zh-CN
+---
+
+# 全局监听播放事件
+
+#### 第一步、创建实现`ESPlayerManagerEventListener`接口的类型对象
+
+::: warning 注意：getId 方法需要返回应用唯一ID
+:::
+
+```ts
+export function createESPlayerManagerEventListener(): ESPlayerManagerEventListener {
+
+  let enabled = true
+  let player: ESIPlayer
+
+  const log = useESLog()
+  const TAG = 'PlayerManagerEventListener'
+
+  function getId(): string {
+    return 'ESPlayerManagerEventListener'
+  }
+
+  function setEnabled(value: boolean): void {
+    enabled = value
+  }
+
+  function isEnabled(): boolean {
+    return enabled
+  }
+
+  function setPlayer(p: ESIPlayer): void {
+    player = p
+  }
+
+  function getPlayer(): ESIPlayer {
+    return player
+  }
+
+  function onPlayerInitialized(playerType: number): void {
+    //
+  }
+
+  function onPlayerPlayMediaSourceList(playUriInfo: ESMediaSourceList): void {
+    //
+  }
+
+  function onPlayerPlayMediaSource(mediaSource: ESMediaSource): void {
+    //
+  }
+
+  function onPlayerSizeChanged(width: number, height: number): void {
+    //
+  }
+
+  function onPlayerPreparing(): void {
+    //
+  }
+
+  function onPlayerPrepared(): void {
+    //
+  }
+
+  function onPlayerBufferStart(): void {
+    //
+  }
+
+  function onPlayerBufferEnd(): void {
+    //
+  }
+
+  function onPlayerPlaying(): void {
+    //
+  }
+
+  function onPlayerProgressChanged(progress: number): void {
+    //
+  }
+
+  function onPlayerDurationChanged(duration: number): void {
+    //
+  }
+
+  function onPlayerSeekStart(): void {
+    //
+  }
+
+  function onPlayerSeekCompleted(): void {
+    //
+  }
+
+  function onPlayerPaused(): void {
+    //
+  }
+
+  function onPlayerResumed(): void {
+    //
+  }
+
+  function onPlayerStopped(): void {
+    //
+  }
+
+  function onPlayerCompleted(): void {
+    //
+  }
+
+  function onPlayerError(error: ESPlayerError): void {
+    //
+  }
+
+  function onPlayerInfo(info: ESPlayerInfo): void {
+    //
+  }
+
+  function onPlayerNoMediaSourceCanPlay(next: boolean): void {
+    //
+  }
+
+  function onPlayerVolumeChanged(leftVolume: number, rightVolume: number): void {
+    //
+  }
+
+  function onPlayerLeftVolumeChanged(leftVolume: number): void {
+    //
+  }
+
+  function onPlayerRightVolumeChanged(rightVolume: number): void {
+    //
+  }
+
+  function onPlayerDefinitionListChanged(definitionList: Array<ESPlayerDefinition>): void {
+    //
+  }
+
+  function onPlayerDefinitionChanged(definition: ESPlayerDefinition): void {
+    //
+  }
+
+  function onPlayerPlayRateListChanged(rateList: Array<ESPlayerRate>): void {
+    //
+  }
+
+  function onPlayerPlayRateChanged(rate: ESPlayerRate): void {
+    //
+  }
+
+  function onPlayerDecodeListChanged(decodeList: Array<ESPlayerDecode>): void {
+    //
+  }
+
+  function onPlayerDecodeChanged(decode: ESPlayerDecode): void {
+    //
+  }
+
+  function onPlayerAspectRatioListChanged(aspectRatioList: Array<ESPlayerAspectRatio>): void {
+    //
+  }
+
+  function onPlayerAspectRatioChanged(aspectRatio: ESPlayerAspectRatio): void {
+    //
+  }
+
+  function onPlayerPlayMediaSourceListModeListChanged(modeList: Array<ESPlayerPlayMode>): void {
+    //
+  }
+
+  function onPlayerPlayMediaSourceListModeChanged(mode: ESPlayerPlayMode): void {
+    //
+  }
+
+  function onPlayerPlayMediaListModeListChanged(modeList: Array<ESPlayerPlayMode>): void {
+    //
+  }
+
+  function onPlayerPlayMediaListModeChanged(mode: ESPlayerPlayMode): void {
+    //
+  }
+
+  function onPlayerViewChanged(): void {
+    //
+  }
+
+  function onPlayerViewSizeChanged(playerWidth: number, playerHeight: number): void {
+    //
+  }
+
+  function onPlayerViewClickable(playerClickable: boolean): void {
+    //
+  }
+
+  function onPlayerPlayMediaList(playList: ESMediaItemList): void {
+    //
+  }
+
+  function onPlayerPlayMedia(mediaItem: ESMediaItem): void {
+    //
+  }
+
+  function onPlayerInterceptSuccess(value: ESPlayerInterceptResult): void {
+    //
+  }
+
+  function onPlayerInterceptError(value: ESPlayerInterceptError): void {
+    //
+  }
+
+  function onPlayerNoMediaCanPlay(next: boolean): void {
+    //
+  }
+
+  function onPlayerWindowTypeChanged(windowType: ESPlayerWindowType): void {
+    //
+  }
+
+  function onPlayerWindowSizeChanged(playerWidth: number, playerHeight: number): void {
+    //
+  }
+
+  function onPlayerClickable(playerClickable: boolean): void {
+    //
+  }
+
+  function onPlayerRenderChanged(render: ESPlayerRender): void {
+    //
+  }
+
+  function onPlayerRenderListChanged(renderList: Array<ESPlayerRender>): void {
+    //
+  }
+
+  return {
+    getId,
+    setEnabled,
+    isEnabled,
+    onPlayerInitialized,
+    onPlayerPlayMediaSourceList,
+    onPlayerPlayMediaSource,
+    onPlayerSizeChanged,
+    onPlayerPreparing,
+    onPlayerPrepared,
+    onPlayerBufferStart,
+    onPlayerBufferEnd,
+    onPlayerPlaying,
+    onPlayerProgressChanged,
+    onPlayerDurationChanged,
+    onPlayerSeekStart,
+    onPlayerSeekCompleted,
+    onPlayerPaused,
+    onPlayerResumed,
+    onPlayerStopped,
+    onPlayerCompleted,
+    onPlayerError,
+    onPlayerInfo,
+    onPlayerNoMediaSourceCanPlay,
+    onPlayerVolumeChanged,
+    onPlayerLeftVolumeChanged,
+    onPlayerRightVolumeChanged,
+    onPlayerDefinitionListChanged,
+    onPlayerDefinitionChanged,
+    onPlayerPlayRateListChanged,
+    onPlayerPlayRateChanged,
+    onPlayerDecodeListChanged,
+    onPlayerDecodeChanged,
+    onPlayerAspectRatioListChanged,
+    onPlayerAspectRatioChanged,
+    onPlayerPlayMediaSourceListModeListChanged,
+    onPlayerPlayMediaSourceListModeChanged,
+    onPlayerPlayMediaListModeListChanged,
+    onPlayerPlayMediaListModeChanged,
+    onPlayerViewChanged,
+    onPlayerPlayMediaList,
+    onPlayerPlayMedia,
+    onPlayerInterceptSuccess,
+    onPlayerInterceptError,
+    onPlayerNoMediaCanPlay,
+    onPlayerWindowTypeChanged,
+    onPlayerWindowSizeChanged,
+    onPlayerClickable,
+    onPlayerRenderChanged,
+    onPlayerRenderListChanged
+  }
+}
+```
+
+#### 第二步、注册监听
+
+```ts
+import {
+  useESPlayerManagerEventManager
+} from "@extscreen/es3-player-manager";
+
+const playerManagerEventListener = createESPlayerManagerEventListener()
+const playerManagerEventManager = useESPlayerManagerEventManager()
+playerManagerEventManager.addListener(playerManagerEventListener)
+```
+
+:::demo ## 完整示例
+
+component/player-manager/event-global
+
+:::

package/rules/.docs/zh-CN/component/player-manager/installation.md

@@ -0,0 +1,33 @@
+---
+title: PlayerManager
+lang: zh-CN
+---
+
+# 集成
+
+## 第一步、`package.json`添加依赖库
+
+* `@extscreen/es3-player`![NPM Version](https://img.shields.io/npm/v/@extscreen/es3-player)
+* `@extscreen/es3-player-manager`![NPM Version](https://img.shields.io/npm/v/@extscreen/es3-player-manager)
+
+## 第二步、集成`ESPlayer`
+
+[点击查看详细](/zh-CN/component/player/player#集成)
+
+## 第三步、集成`ESPlayerManager`
+
+在`main.ts`中集成
+
+```ts
+import { createESPlayerManager } from "@extscreen/es3-player-manager";
+
+const playerManager = createESPlayerManager()
+app.use(playerManager);
+```
+
+## 示例
+
+你可以在[quicktvui-playground](https://github.com/quicktvui/quicktvui-playground/tree/master/es-player-manager) 上查看示例。
+
+你可以在[quicktvui-api-demo-vue3](https://github.com/quicktvui/quicktvui-api-demo-vue3/tree/main/src/components/es-player-manager)
+上查看API Demo。