@quicktvui/ai 1.0.0

package/rules/.docs/examples/component/player-manager/media-item-list.vue

@@ -0,0 +1,268 @@
+<template>
+  <div class="es-sdk-root-css">
+    <es-player-manager
+      ref="playerManager"
+      :initPlayerWindowType="2"
+      :playMediaAuto="false"
+      :playerList="playerListRef"
+      class="es-video-player-manager-page-css"
+      @onPlayerPlayMediaList="onPlayerPlayMediaList"
+      @onPlayerPlayMedia="onPlayerPlayMedia"
+      @onPlayerNoMediaCanPlay="onPlayerNoMediaCanPlay"
+      @onPlayerPlayMediaSource="onPlayerPlayMediaSource"
+      @onPlayerNoMediaSourceCanPlay="onPlayerNoMediaSourceCanPlay"
+    />
+    <s-title-view class="es-sdk-content-title-css" :text="$options.name" />
+    <div class="es-sdk-content-divider-css" />
+    <div class="es-sdk-content-row-css">
+      <s-text-button
+        text="向前添加MediaItem"
+        @onButtonClicked="addMediaToFirst"
+      />
+      <s-text-button
+        text="向后添加MediaItem"
+        @onButtonClicked="addMediaToLast"
+      />
+      <s-text-button
+        text="指定位置添加MediaItem"
+        @onButtonClicked="addMediaToIndex"
+      />
+      <s-text-button text="替换MediaItem" @onButtonClicked="replaceMedia" />
+      <s-text-button text="重新设置播放列表" @onButtonClicked="playMediaList" />
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { markRaw, ref } from "vue";
+import { defineComponent } from "@vue/runtime-core";
+
+import { ESPlayerManager } from "@extscreen/es3-player-manager";
+import { ESLogLevel, useESLog } from "@extscreen/es3-core";
+import { ESVideoPlayer } from "@extscreen/es3-video-player";
+import type {
+  ESIPlayerManager,
+  ESMediaItem,
+  ESMediaItemList,
+} from "@extscreen/es3-player-manager";
+import type { ESMediaSource, ESMediaSourceList } from "@extscreen/es3-player";
+
+const TAG = "ESVideoPlayerManagerPage";
+
+export default defineComponent({
+  name: "操作播放列表",
+  components: {
+    "es-player-manager": ESPlayerManager,
+  },
+  setup() {
+    const log = useESLog();
+    const playerManager = ref<ESIPlayerManager>();
+
+    const playerList = [markRaw(ESVideoPlayer)];
+    const playerListRef = ref(playerList);
+
+    let isPaused = false;
+
+    let index = 10;
+    let firstIndex = 10;
+
+    //----------------------------------------------------------
+
+    function buildMediaItemList(id: string): Array<ESMediaItem> {
+      const mediaSource: ESMediaSource = {
+        uri: "http://qcloudcdn.a311.ottcn.com/data_center/videos/SHORT/DEFAULT/2023/08/25/7d3623ae-c002-4929-b5a2-fe10bca06bfc.mp4",
+      };
+      const mediaSourceList: ESMediaSourceList = {
+        index: 0,
+        list: [mediaSource],
+      };
+      const mediaItem: ESMediaItem = {
+        id,
+        mediaSourceList,
+      };
+      const mediaItemList: Array<ESMediaItem> = [mediaItem];
+      return mediaItemList;
+    }
+
+    //----------------------------------------------------------
+    const onESCreate = () => {
+      if (log.isLoggable(ESLogLevel.DEBUG)) {
+        log.e(TAG, "-------onESCreate---------->>>>>");
+      }
+      isPaused = false;
+      const playList: ESMediaItemList = {
+        index: 0,
+        list: [],
+      };
+      playerManager.value?.initialize();
+      playerManager.value?.playMediaList(playList);
+    };
+
+    //---------------------------------------------------------------------
+    function addMediaToFirst() {
+      firstIndex--;
+      const itemList = buildMediaItemList(`${firstIndex}`);
+      if (log.isLoggable(ESLogLevel.DEBUG)) {
+        log.e(TAG, "-------addMediaToFirst---START------->>>>>", itemList);
+      }
+      playerManager.value?.addMediaToFirst(itemList);
+      if (log.isLoggable(ESLogLevel.DEBUG)) {
+        log.e(
+          TAG,
+          "-------addMediaToFirst---END------->>>>>",
+          playerManager.value?.getMediaList(),
+        );
+      }
+    }
+
+    function addMediaToLast() {
+      index++;
+      const itemList = buildMediaItemList(`${index}`);
+      if (log.isLoggable(ESLogLevel.DEBUG)) {
+        log.e(TAG, "-------addMediaToLast-----START----->>>>>", itemList);
+      }
+      playerManager.value?.addMediaToLast(itemList);
+      if (log.isLoggable(ESLogLevel.DEBUG)) {
+        log.e(
+          TAG,
+          "-------addMediaToLast------END---->>>>>",
+          playerManager.value?.getMediaList(),
+        );
+      }
+    }
+
+    function addMediaToIndex() {
+      const itemList = buildMediaItemList("3");
+      if (log.isLoggable(ESLogLevel.DEBUG)) {
+        log.e(TAG, "-------addMediaToIndex------START---->>>>>", itemList);
+      }
+      playerManager.value?.addMediaToIndex(1, itemList);
+      if (log.isLoggable(ESLogLevel.DEBUG)) {
+        log.e(
+          TAG,
+          "-------addMediaToIndex------END---->>>>>",
+          playerManager.value?.getMediaList(),
+        );
+      }
+    }
+
+    function replaceMedia() {
+      const itemList = buildMediaItemList("2000");
+      if (log.isLoggable(ESLogLevel.DEBUG)) {
+        log.e(TAG, "-------replaceMedia------START---->>>>>", itemList);
+      }
+      playerManager.value?.replaceMedia(0, itemList);
+      if (log.isLoggable(ESLogLevel.DEBUG)) {
+        log.e(
+          TAG,
+          "-------replaceMedia------END---->>>>>",
+          playerManager.value?.getMediaList(),
+        );
+      }
+    }
+
+    function playMediaList() {
+      const itemList = buildMediaItemList("5000");
+      if (log.isLoggable(ESLogLevel.DEBUG)) {
+        log.e(TAG, "-------playMediaList------START---->>>>>", itemList);
+      }
+      const playList: ESMediaItemList = {
+        index: 0,
+        list: itemList,
+      };
+      playerManager.value?.playMediaList(playList);
+      if (log.isLoggable(ESLogLevel.DEBUG)) {
+        log.e(
+          TAG,
+          "-------playMediaList------END---->>>>>",
+          playerManager.value?.getMediaList(),
+        );
+      }
+    }
+
+    //---------------------------------------------------------------------
+    const onPlayerPlayMediaList = (playList: ESMediaItemList) => {
+      if (log.isLoggable(ESLogLevel.DEBUG)) {
+        log.d(
+          TAG,
+          "-----------onPlayerPlayMediaList------------->>>>",
+          playList,
+        );
+      }
+    };
+
+    const onPlayerPlayMedia = (mediaItem: ESMediaItem) => {
+      if (log.isLoggable(ESLogLevel.DEBUG)) {
+        log.d(TAG, "-----------onPlayerPlayMedia------------->>>>", mediaItem);
+      }
+    };
+    const onPlayerNoMediaCanPlay = (next: boolean) => {
+      if (log.isLoggable(ESLogLevel.DEBUG)) {
+        log.d(TAG, "-----------onPlayerNoMediaCanPlay------------->>>>", next);
+      }
+    };
+
+    function onPlayerPlayMediaSource(mediaSource: ESMediaSource): void {
+      if (log.isLoggable(ESLogLevel.DEBUG)) {
+        log.d(
+          TAG,
+          "-----------onPlayerPlayMediaSource------------->>>>",
+          mediaSource,
+        );
+      }
+    }
+
+    function onPlayerNoMediaSourceCanPlay(next: boolean): void {
+      if (log.isLoggable(ESLogLevel.DEBUG)) {
+        log.d(
+          TAG,
+          "-----------onPlayerNoMediaSourceCanPlay------------->>>>",
+          next,
+        );
+      }
+    }
+
+    const onESResume = () => {
+      log.e(TAG, "-------onESResume---------->>>>>");
+      if (isPaused) {
+        playerManager.value?.resume();
+      }
+      isPaused = false;
+    };
+    const onESPause = () => {
+      log.e(TAG, "-------onESPause---------->>>>>");
+      isPaused = true;
+      playerManager.value?.stop();
+    };
+    const onESDestroy = () => {
+      log.e(TAG, "-------onESDestroy---------->>>>>");
+      playerManager.value?.release();
+    };
+
+    return {
+      onESCreate,
+      onESResume,
+      onESPause,
+      onESDestroy,
+      playerListRef,
+      playerManager,
+      addMediaToFirst,
+      addMediaToLast,
+      addMediaToIndex,
+      replaceMedia,
+      playMediaList,
+      onPlayerPlayMediaList,
+      onPlayerPlayMedia,
+      onPlayerNoMediaCanPlay,
+      onPlayerPlayMediaSource,
+      onPlayerNoMediaSourceCanPlay,
+    };
+  },
+});
+</script>
+
+<style>
+.es-video-player-manager-page-css {
+  position: absolute;
+}
+</style>

package/rules/.docs/examples/component/player-manager/media-source-interceptor.vue

@@ -0,0 +1,115 @@
+<template>
+  <div class="es-sdk-root-css">
+    <es-player-manager
+      ref="playerManager"
+      :initPlayerWindowType="2"
+      :playerList="playerListRef"
+      class="es-video-player-manager-page-css"
+    />
+    <s-title-view class="es-sdk-content-title-css" :text="$options.name" />
+    <div class="es-sdk-content-divider-css" />
+  </div>
+</template>
+
+<script lang="ts">
+import { markRaw, ref } from "vue";
+import { defineComponent } from "@vue/runtime-core";
+
+import { useESPlayerInterceptorManager } from "@extscreen/es3-player";
+import { ESPlayerManager } from "@extscreen/es3-player-manager";
+import { ESLogLevel, useESLog } from "@extscreen/es3-core";
+import { ESVideoPlayer } from "@extscreen/es3-video-player";
+import { createESPlayerMediaSourceInterceptor } from "./interceptor/ESPlayerMediaSourceInterceptor";
+import { createESPlayerMediaSourceGlobalInterceptor } from "./interceptor/ESPlayerMediaSourceGlobalInterceptor";
+import type { ESMediaSource, ESMediaSourceList } from "@extscreen/es3-player";
+import type {
+  ESIPlayerManager,
+  ESMediaItem,
+  ESMediaItemList,
+} from "@extscreen/es3-player-manager";
+
+const TAG = "ESVideoPlayerManagerPage";
+
+/**
+ * 优先执行，全局拦截器
+ * 其次再执行局部拦截器
+ */
+export default defineComponent({
+  name: "MediaSource拦截器",
+  components: {
+    "es-player-manager": ESPlayerManager,
+  },
+  setup() {
+    const log = useESLog();
+    const playerManager = ref<ESIPlayerManager>();
+
+    const playerList = [markRaw(ESVideoPlayer)];
+    const playerListRef = ref(playerList);
+
+    let isPaused = false;
+
+    //优先执行，全局拦截器
+    const globalInterceptorManager = useESPlayerInterceptorManager();
+    const globalInterceptor = createESPlayerMediaSourceGlobalInterceptor();
+    globalInterceptorManager.addInterceptor(globalInterceptor);
+
+    const onESCreate = () => {
+      if (log.isLoggable(ESLogLevel.DEBUG)) {
+        log.e(TAG, "-------onESCreate---------->>>>>");
+      }
+      isPaused = false;
+
+      //其次再执行局部拦截器
+      const interceptor = createESPlayerMediaSourceInterceptor();
+
+      const mediaSource: ESMediaSource = {
+        interceptors: [interceptor],
+        uri: null,
+      };
+      const mediaSourceList: ESMediaSourceList = {
+        index: 0,
+        list: [mediaSource],
+      };
+      const mediaItem: ESMediaItem = {
+        mediaSourceList,
+      };
+      const playList: ESMediaItemList = {
+        index: 0,
+        list: [mediaItem],
+      };
+      playerManager.value?.initialize();
+      playerManager.value?.playMediaList(playList);
+    };
+    const onESResume = () => {
+      log.e(TAG, "-------onESResume---------->>>>>");
+      if (isPaused) {
+        playerManager.value?.resume();
+      }
+      isPaused = false;
+    };
+    const onESPause = () => {
+      log.e(TAG, "-------onESPause---------->>>>>");
+      isPaused = true;
+      playerManager.value?.stop();
+    };
+    const onESDestroy = () => {
+      log.e(TAG, "-------onESDestroy---------->>>>>");
+      playerManager.value?.release();
+    };
+    return {
+      onESCreate,
+      onESResume,
+      onESPause,
+      onESDestroy,
+      playerListRef,
+      playerManager,
+    };
+  },
+});
+</script>
+
+<style>
+.es-video-player-manager-page-css {
+  position: absolute;
+}
+</style>

package/rules/.docs/examples/component/player-manager/media-source-list-interceptor.vue

@@ -0,0 +1,111 @@
+<template>
+  <div class="es-sdk-root-css">
+    <es-player-manager
+      ref="playerManager"
+      :initPlayerWindowType="2"
+      :playerList="playerListRef"
+      class="es-video-player-manager-page-css"
+    />
+    <s-title-view class="es-sdk-content-title-css" :text="$options.name" />
+    <div class="es-sdk-content-divider-css" />
+  </div>
+</template>
+
+<script lang="ts">
+import { markRaw, ref } from "vue";
+import { defineComponent } from "@vue/runtime-core";
+
+import { useESPlayerInterceptorManager } from "@extscreen/es3-player";
+import { ESPlayerManager } from "@extscreen/es3-player-manager";
+import { ESLogLevel, useESLog } from "@extscreen/es3-core";
+import { ESVideoPlayer } from "@extscreen/es3-video-player";
+import { createESPlayerMediaSourceListGlobalInterceptor } from "./interceptor/ESPlayerMediaSourceListGlobalInterceptor";
+import { createESPlayerMediaSourceListInterceptor } from "./interceptor/ESPlayerMediaSourceListInterceptor";
+import type { ESMediaSourceList } from "@extscreen/es3-player";
+import type {
+  ESIPlayerManager,
+  ESMediaItem,
+  ESMediaItemList,
+} from "@extscreen/es3-player-manager";
+
+const TAG = "ESVideoPlayerManagerPage";
+
+/**
+ * 优先执行，全局拦截器
+ * 其次再执行局部拦截器
+ */
+export default defineComponent({
+  name: "MediaSourceList拦截器",
+  components: {
+    "es-player-manager": ESPlayerManager,
+  },
+  setup() {
+    const log = useESLog();
+    const playerManager = ref<ESIPlayerManager>();
+
+    const playerList = [markRaw(ESVideoPlayer)];
+    const playerListRef = ref(playerList);
+
+    let isPaused = false;
+
+    //优先执行，全局拦截器
+    const globalInterceptorManager = useESPlayerInterceptorManager();
+    const globalInterceptor = createESPlayerMediaSourceListGlobalInterceptor();
+    globalInterceptorManager.addInterceptor(globalInterceptor);
+
+    const onESCreate = () => {
+      if (log.isLoggable(ESLogLevel.DEBUG)) {
+        log.e(TAG, "-------onESCreate---------->>>>>");
+      }
+      isPaused = false;
+
+      //其次再执行局部拦截器
+      const interceptor = createESPlayerMediaSourceListInterceptor();
+      const mediaSourceList: ESMediaSourceList = {
+        index: 0,
+        list: [],
+        interceptors: [interceptor],
+      };
+      const mediaItem: ESMediaItem = {
+        mediaSourceList,
+      };
+      const playList: ESMediaItemList = {
+        index: 0,
+        list: [mediaItem],
+      };
+      playerManager.value?.initialize();
+      playerManager.value?.playMediaList(playList);
+    };
+    const onESResume = () => {
+      log.e(TAG, "-------onESResume---------->>>>>");
+      if (isPaused) {
+        playerManager.value?.resume();
+      }
+      isPaused = false;
+    };
+    const onESPause = () => {
+      log.e(TAG, "-------onESPause---------->>>>>");
+      isPaused = true;
+      playerManager.value?.stop();
+    };
+    const onESDestroy = () => {
+      log.e(TAG, "-------onESDestroy---------->>>>>");
+      playerManager.value?.release();
+    };
+    return {
+      onESCreate,
+      onESResume,
+      onESPause,
+      onESDestroy,
+      playerListRef,
+      playerManager,
+    };
+  },
+});
+</script>
+
+<style>
+.es-video-player-manager-page-css {
+  position: absolute;
+}
+</style>

package/rules/.docs/examples/component/player-manager/multi-player.vue

@@ -0,0 +1,130 @@
+<template>
+  <div class="es-sdk-root-css">
+    <es-player-manager
+      ref="playerManager"
+      :initPlayerWindowType="2"
+      :playerList="playerListRef"
+      class="es-video-player-manager-page-css"
+    />
+    <s-title-view class="es-sdk-content-title-css" :text="$options.name" />
+    <div class="es-sdk-content-divider-css" />
+    <div class="es-sdk-content-row-css">
+      <s-text-button text="上一个" @onButtonClicked="onPreviousButtonClicked" />
+      <s-text-button text="下一个" @onButtonClicked="onNextButtonClicked" />
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { markRaw, ref } from "vue";
+import { defineComponent } from "@vue/runtime-core";
+
+import { ESPlayerManager } from "@extscreen/es3-player-manager";
+import { ESLogLevel, useESLog } from "@extscreen/es3-core";
+import ESTextLeftPlayer from "./player/ESTextLeftPlayer.vue";
+import ESTextRightPlayer from "./player/ESTextRightPlayer.vue";
+import type {
+  ESIPlayerManager,
+  ESMediaItem,
+  ESMediaItemList,
+} from "@extscreen/es3-player-manager";
+import type { ESMediaSource, ESMediaSourceList } from "@extscreen/es3-player";
+
+const TAG = "ESVideoPlayerManagerPage";
+
+export default defineComponent({
+  name: "多类型播放",
+  components: {
+    "es-player-manager": ESPlayerManager,
+  },
+  setup() {
+    const log = useESLog();
+    const playerManager = ref<ESIPlayerManager>();
+
+    const playerList = [markRaw(ESTextLeftPlayer), markRaw(ESTextRightPlayer)];
+    const playerListRef = ref(playerList);
+
+    let isPaused = false;
+
+    const onESCreate = () => {
+      if (log.isLoggable(ESLogLevel.DEBUG)) {
+        log.e(TAG, "-------onESCreate---------->>>>>");
+      }
+      isPaused = false;
+      //-----------------------------------------------------------------
+      const leftMediaSource: ESMediaSource = {
+        uri: "左文本",
+      };
+      const leftMediaSourceList: ESMediaSourceList = {
+        index: 0,
+        list: [leftMediaSource],
+      };
+      const leftMediaItem: ESMediaItem = {
+        mediaSourceList: leftMediaSourceList,
+        playerType: 10,
+      };
+
+      //-----------------------------------------------------------------
+      const rightMediaSource: ESMediaSource = {
+        uri: "右文本",
+      };
+      const rightMediaSourceList: ESMediaSourceList = {
+        index: 0,
+        list: [rightMediaSource],
+      };
+      const rightMediaItem: ESMediaItem = {
+        mediaSourceList: rightMediaSourceList,
+        playerType: 11,
+      };
+      //-----------------------------------------------------------------
+      const playList: ESMediaItemList = {
+        index: 0,
+        list: [leftMediaItem, rightMediaItem],
+      };
+      playerManager.value?.initialize();
+      playerManager.value?.playMediaList(playList);
+    };
+
+    const onNextButtonClicked = () => {
+      playerManager.value?.playNextMedia();
+    };
+    const onPreviousButtonClicked = () => {
+      playerManager.value?.playPreviousMedia();
+    };
+
+    const onESResume = () => {
+      log.e(TAG, "-------onESResume---------->>>>>");
+      if (isPaused) {
+        playerManager.value?.resume();
+      }
+      isPaused = false;
+    };
+    const onESPause = () => {
+      log.e(TAG, "-------onESPause---------->>>>>");
+      isPaused = true;
+      playerManager.value?.stop();
+    };
+    const onESDestroy = () => {
+      log.e(TAG, "-------onESDestroy---------->>>>>");
+      playerManager.value?.release();
+    };
+
+    return {
+      onESCreate,
+      onESResume,
+      onESPause,
+      onESDestroy,
+      playerListRef,
+      playerManager,
+      onNextButtonClicked,
+      onPreviousButtonClicked,
+    };
+  },
+});
+</script>
+
+<style>
+.es-video-player-manager-page-css {
+  position: absolute;
+}
+</style>