@quicktvui/ai 1.0.0

package/rules/.docs/examples/component/player-manager/text-right-player.vue

@@ -0,0 +1,306 @@
+<template>
+  <div class="es-text-right-player-root-css">
+    <span
+      v-show="visible"
+      v-if="playerInitialized"
+      ref="textPlayerRef"
+      class="es-text-player-css"
+      >{{ textRef }}</span
+    >
+  </div>
+</template>
+
+<script lang="ts">
+import { ref, watch } from "vue";
+import { defineComponent } from "@vue/runtime-core";
+import { ESPlayerLogLevel, useESPlayerLog } from "@extscreen/es3-player";
+import type {
+  ESIPlayer,
+  ESMediaSource,
+  ESMediaSourceList,
+  ESPlayerAspectRatio,
+  ESPlayerDecode,
+  ESPlayerDefinition,
+  ESPlayerDurationCallback,
+  ESPlayerProgressCallback,
+  ESPlayerRate,
+} from "@extscreen/es3-player";
+
+const TAG = "ESTextRightPlayer";
+
+export default defineComponent({
+  name: "ESTextRightPlayer",
+  props: {
+    playerType: {
+      type: Number,
+      default: 11,
+    },
+    playMediaSourceAuto: {
+      type: Boolean,
+      default: true,
+    },
+    playMediaSourceListMode: {
+      type: Number,
+      default: 0,
+    },
+    playerWidth: {
+      type: Number,
+      default: 1920,
+    },
+    playerHeight: {
+      type: Number,
+      default: 1080,
+    },
+    playerZIndex: {
+      type: Number,
+      default: 1,
+    },
+    backgroundColor: {
+      type: String,
+      default: "transparent",
+    },
+  },
+  type: 11, //自定义播放器的类型为11
+  setup(props, context) {
+    const textPlayerRef = ref<ESIPlayer>();
+    const textRef = ref<string>("");
+    const log = useESPlayerLog();
+    const playerInitialized = ref(false);
+    const visible = ref<boolean>(true);
+
+    watch(
+      () => [textPlayerRef.value] as const,
+      ([instance], [oldInstance]) => {
+        if (instance) {
+          onPlayerInitializeSuccess();
+        }
+      },
+      { flush: "post" },
+    );
+
+    let mediaSourceList: ESMediaSourceList;
+    let mediaSourceIndex = 0;
+    let mediaSource: ESMediaSource;
+
+    function onPlayerInitializeSuccess(): void {
+      if (log.isLoggable(ESPlayerLogLevel.DEBUG)) {
+        log.d(TAG, "-----onPlayerInitializeSuccess----->>>");
+      }
+      context.emit("onPlayerInitialized", getType());
+    }
+
+    function getType(): number {
+      return 11;
+    }
+
+    function getComponentInfo(): void {
+      //do nothing
+    }
+
+    function initComponent(...params: Array<any>): void {
+      //do nothing
+    }
+
+    function setVisible(value: boolean): void {
+      visible.value = value;
+    }
+
+    function initialize(): void {
+      playerInitialized.value = true;
+    }
+
+    function isInitialized(): boolean {
+      return playerInitialized.value;
+    }
+
+    function playMediaSourceList(list: ESMediaSourceList): void {
+      mediaSourceList = list;
+      playMediaSourceByIndex(list.index);
+    }
+
+    function playMediaSourceByIndex(index: number): void {
+      mediaSourceIndex = index;
+      playMediaSource(mediaSourceList.list[mediaSourceIndex]);
+    }
+
+    function playMediaSourceById(id: string): void {
+      //do nothing
+    }
+
+    function playMediaSource(source: ESMediaSource): void {
+      mediaSource = source;
+      if (log.isLoggable(ESPlayerLogLevel.DEBUG)) {
+        log.d(TAG, "-----playMediaSource----->>>", source);
+      }
+      play();
+    }
+
+    function playNextMediaSource(): void {
+      //do nothing
+    }
+
+    function playPreviousMediaSource(): void {
+      //do nothing
+    }
+
+    function play(...params: Array<any>): void {
+      textRef.value = mediaSource.uri;
+    }
+
+    function start(position: number): void {
+      //do nothing
+    }
+
+    function pause(): void {
+      //do nothing
+    }
+
+    function resume(): void {
+      //do nothing
+    }
+
+    function stop(): void {
+      //
+    }
+
+    function reset(): void {
+      //do nothing
+    }
+
+    function release(): void {
+      //do nothing
+    }
+
+    function seekTo(progress: number): void {
+      //do nothing
+    }
+
+    function getDuration(): void {
+      //do nothing
+    }
+
+    function getCurrentPosition(): void {
+      //do nothing
+    }
+
+    function setSize(width: number, height: number): void {
+      //
+    }
+
+    function setPlayRate(playRate: ESPlayerRate): void {
+      //do nothing
+    }
+
+    function setDefinition(definition: ESPlayerDefinition): void {
+      //do nothing
+    }
+
+    function setDecode(decode: ESPlayerDecode): void {
+      //do nothing
+    }
+
+    function setAspectRatio(aspectRatio: ESPlayerAspectRatio): void {
+      //do nothing
+    }
+
+    function getLeftVolume(): void {
+      //do nothing
+    }
+
+    function getRightVolume(): void {
+      //do nothing
+    }
+
+    function setLeftVolume(leftVolume: number): void {
+      //do nothing
+    }
+
+    function setRightVolume(rightVolume: number): void {
+      //do nothing
+    }
+
+    function setStopped(stopped: boolean): void {
+      //do nothing
+    }
+
+    function setEnabled(enabled: boolean): void {
+      //do nothing
+    }
+
+    function setProgressCallback(callback: ESPlayerProgressCallback): void {
+      //do nothing
+    }
+
+    function setDurationCallback(callback: ESPlayerDurationCallback): void {
+      //do nothing
+    }
+
+    function invalidate(): void {
+      //do nothing
+    }
+
+    return {
+      textRef,
+      textPlayerRef,
+      playerInitialized,
+      visible,
+      getType,
+      getComponentInfo,
+      initComponent,
+      setVisible,
+      initialize,
+      isInitialized,
+      playMediaSourceList,
+      playMediaSourceByIndex,
+      playMediaSourceById,
+      playMediaSource,
+      playNextMediaSource,
+      playPreviousMediaSource,
+      play,
+      start,
+      pause,
+      resume,
+      stop,
+      reset,
+      release,
+      seekTo,
+      getDuration,
+      getCurrentPosition,
+      setSize,
+      setPlayRate,
+      setDefinition,
+      setDecode,
+      setAspectRatio,
+      getLeftVolume,
+      getRightVolume,
+      setLeftVolume,
+      setRightVolume,
+      setStopped,
+      setEnabled,
+      setProgressCallback,
+      setDurationCallback,
+      invalidate,
+    };
+  },
+});
+</script>
+
+<style scoped>
+.es-text-right-player-root-css {
+  width: 960px;
+  height: 1080px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  background-color: green;
+  position: absolute;
+  right: 0;
+}
+
+.es-text-player-css {
+  width: 960px;
+  height: 1080px;
+  font-size: 200px;
+}
+</style>

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

@@ -0,0 +1,140 @@
+<template>
+  <div class="es-sdk-root-css">
+    <es-player-manager
+      ref="playerManager"
+      :smallWindowWidth="570"
+      :smallWindowHeight="324"
+      :fullWindowWidth="1920"
+      :fullWindowHeight="1080"
+      :floatWindowWidth="192"
+      :floatWindowHeight="108"
+      :initPlayerWindowType="1"
+      :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="changeToFullWindow"
+      />
+      <s-text-button
+        text="切换小屏窗口"
+        @onButtonClicked="changeToSmallWindow"
+      />
+      <s-text-button
+        text="切换浮动窗口"
+        @onButtonClicked="changeToFloatWindow"
+      />
+      <s-text-button text="切换尺寸" @onButtonClicked="changeWindowSize" />
+    </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;
+
+    function changeToFullWindow() {
+      playerManager.value?.setFullWindow();
+    }
+
+    function changeToSmallWindow() {
+      playerManager.value?.setSmallWindow();
+    }
+
+    function changeToFloatWindow() {
+      playerManager.value?.setFloatWindow();
+    }
+
+    function changeWindowSize() {
+      playerManager.value?.setSize(192, 108);
+    }
+
+    const onESCreate = () => {
+      if (log.isLoggable(ESLogLevel.DEBUG)) {
+        log.e(TAG, "-------onESCreate---------->>>>>");
+      }
+      isPaused = false;
+      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 = {
+        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,
+      changeToFullWindow,
+      changeToSmallWindow,
+      changeToFloatWindow,
+      changeWindowSize,
+    };
+  },
+});
+</script>
+
+<style>
+.es-video-player-manager-page-css {
+  position: absolute;
+}
+</style>

package/rules/.docs/examples/component/poster/basic.vue

@@ -0,0 +1,144 @@
+<template>
+  <div class="es-sdk-root-css">
+    <div class="es-sdk-content-row-css">
+      <tv-list
+        ref="listViewRef"
+        class="qt_tv_list_view_root_css"
+        horizontal="true"
+        :clipChildren="false"
+        :clipPadding="false"
+        @item-click="onItemClick"
+        @item-bind="onItemBind"
+      >
+        <qt-poster />
+      </tv-list>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { ref } from "vue";
+import { defineComponent } from "@vue/runtime-core";
+import type {
+  QTIListView,
+  QTListViewItem,
+  QTPoster,
+} from "@quicktvui/quicktvui3";
+
+export default defineComponent({
+  name: "使用初探",
+  setup() {
+    const listViewRef = ref<QTIListView>();
+
+    const onESCreate = () => {
+      const data: Array<QTListViewItem> = [];
+      const imgURL =
+        "https://img1.baidu.com/it/u=2666955302,2339578501&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=750";
+      for (let i = 0; i < 2; i++) {
+        const poster: QTPoster = {
+          type: 10001,
+          focus: {
+            enable: true,
+            scale: 1.1,
+            border: false,
+          },
+          decoration: {
+            top: 20,
+            left: 20,
+            right: 20,
+            bottom: 20,
+          },
+          title: {
+            text: "主标题",
+            enable: true,
+            style: {
+              width: 260,
+            },
+          },
+          subTitle: {
+            text: "副标题",
+            enable: true,
+            style: {
+              width: 260,
+            },
+          },
+          floatTitle: {
+            text: "浮动标题",
+            enable: true,
+            style: {
+              width: 260,
+            },
+            background: { colors: ["#e5000000", "#00000000"], orientation: 4 },
+          },
+          shimmer: {
+            enable: true,
+          },
+          ripple: {
+            enable: true,
+            style: {
+              right: 0,
+              bottom: 0,
+              marginRight: -12,
+            },
+          },
+          image: {
+            src: imgURL,
+            enable: true,
+            style: {
+              width: 30,
+              height: 30,
+            },
+          },
+          corner: {
+            text: "角标",
+            enable: true,
+            style: {
+              width: 260,
+              height: 30,
+            },
+            background: {
+              colors: ["#FE3824", "#F0051E"],
+              cornerRadii4: [0, 8, 0, 8],
+              orientation: 2,
+            },
+          },
+          style: {
+            width: 260,
+            height: 320,
+          },
+          titleStyle: {
+            width: 260,
+            height: 120,
+            marginTop: 320 - 60,
+          },
+          titleFocusStyle: { width: 260, marginTop: 320 - 100 },
+        };
+        data.push(poster);
+      }
+      listViewRef.value?.setListData(data);
+    };
+
+    function onItemClick() {
+      //
+    }
+
+    function onItemBind() {
+      //
+    }
+
+    return {
+      listViewRef,
+      onESCreate,
+      onItemClick,
+      onItemBind,
+    };
+  },
+});
+</script>
+
+<style>
+.qt_tv_list_view_root_css {
+  width: 1920px;
+  height: 1080px;
+}
+</style>

package/rules/.docs/examples/component/poster/corner.vue

@@ -0,0 +1,123 @@
+<template>
+  <div class="es-sdk-root-css">
+    <div class="es-sdk-content-row-css">
+      <tv-list
+        ref="listViewRef"
+        class="qt_tv_list_view_root_css"
+        horizontal="true"
+        :clipChildren="false"
+        :clipPadding="false"
+        @item-click="onItemClick"
+        @item-bind="onItemBind"
+      >
+        <qt-poster />
+      </tv-list>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { ref } from "vue";
+import { defineComponent } from "@vue/runtime-core";
+import type {
+  QTIListView,
+  QTListViewItem,
+  QTPoster,
+} from "@quicktvui/quicktvui3";
+
+export default defineComponent({
+  name: "角标",
+  setup() {
+    const listViewRef = ref<QTIListView>();
+
+    const onESCreate = () => {
+      const data: Array<QTListViewItem> = [];
+      for (let i = 0; i < 2; i++) {
+        const poster: QTPoster = {
+          type: 10001,
+          focus: {
+            enable: true,
+            scale: 1.1,
+            border: false,
+          },
+          decoration: {
+            top: 20,
+            left: 20,
+            right: 20,
+            bottom: 20,
+          },
+          title: {
+            text: "主标题",
+            enable: true,
+            style: {
+              width: 260,
+            },
+          },
+          subTitle: {
+            text: "副标题",
+            enable: true,
+            style: {
+              width: 260,
+            },
+          },
+          floatTitle: {
+            text: "浮动标题",
+            enable: true,
+            style: {
+              width: 260,
+            },
+            background: { colors: ["#e5000000", "#00000000"], orientation: 4 },
+          },
+          corner: {
+            text: "角标",
+            enable: true,
+            style: {
+              width: 260,
+              height: 30,
+            },
+            background: {
+              colors: ["#FE3824", "#F0051E"],
+              cornerRadii4: [0, 8, 0, 8],
+              orientation: 2,
+            },
+          },
+          style: {
+            width: 260,
+            height: 320,
+          },
+          titleStyle: {
+            width: 260,
+            height: 120,
+            marginTop: 320 - 60,
+          },
+          titleFocusStyle: { width: 260, marginTop: 320 - 100 },
+        };
+        data.push(poster);
+      }
+      listViewRef.value?.setListData(data);
+    };
+
+    function onItemClick() {
+      //
+    }
+
+    function onItemBind() {
+      //
+    }
+
+    return {
+      listViewRef,
+      onESCreate,
+      onItemClick,
+      onItemBind,
+    };
+  },
+});
+</script>
+
+<style>
+.qt_tv_list_view_root_css {
+  width: 1920px;
+  height: 1080px;
+}
+</style>