@quicktvui/ai 1.0.0

package/rules/.docs/examples/component/video-player/render.vue

@@ -0,0 +1,187 @@
+<template>
+  <div class="es-sdk-root-css">
+    <es-video-player
+      ref="videoPlayer"
+      :playerWidth="playerWidth"
+      :playerHeight="playerHeight"
+      class="es-video-player-page-css"
+      @onPlayerRenderListChanged="onPlayerRenderListChanged"
+      @onPlayerRenderChanged="onPlayerRenderChanged"
+      @onPlayerPlayMediaSource="onPlayerPlayMediaSource"
+      @onPlayerInitialized="onPlayerInitialized"
+    />
+    <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">
+      <span class="es-video-player-text-css" text="渲染方式列表：" />
+      <span class="es-video-player-text-css" :text="renderList + ''" />
+      <span class="es-video-player-text-css" text="渲染方式：" />
+      <span class="es-video-player-text-css" :text="render + ''" />
+      <span class="es-video-player-text-css" text="          " />
+      <span class="es-video-player-text-css" text="播放索引：" />
+      <span class="es-video-player-text-css" :text="playingMediaIndex + ''" />
+    </div>
+    <div class="es-sdk-content-row-css">
+      <s-text-button text="播放上一源" @onButtonClicked="playPreviousMedia" />
+      <s-text-button text="播放下一源" @onButtonClicked="playNextMedia" />
+    </div>
+    <div class="es-sdk-content-row-css">
+      <s-text-button
+        text="SURFACE_VIEW"
+        @onButtonClicked="setSurfaceViewRender"
+      />
+      <s-text-button
+        text="TEXTURE_VIEW"
+        @onButtonClicked="setTextureViewRender"
+      />
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { ref } from "vue";
+import { defineComponent } from "@vue/runtime-core";
+import { useESLog } from "@extscreen/es3-core";
+import { ESPlayerRender } from "@extscreen/es3-player";
+import { ESVideoPlayer } from "@extscreen/es3-video-player";
+import { useESRouter } from "@extscreen/es3-router";
+import type {
+  ESIPlayer,
+  ESMediaSource,
+  ESMediaSourceList,
+} from "@extscreen/es3-player";
+
+const TAG = "ESVideoPlayerPage";
+
+export default defineComponent({
+  name: "渲染方式",
+  components: {
+    "es-video-player": ESVideoPlayer,
+  },
+  setup() {
+    const log = useESLog();
+    const router = useESRouter();
+    const videoPlayer = ref<ESIPlayer>();
+    const playerWidth = 1920;
+    const playerHeight = 1080;
+
+    const renderList = ref([]);
+    const render = ref("");
+    const playingMediaIndex = ref(-1);
+
+    function onPlayerPlayMediaSource(mediaSource: ESMediaSource) {
+      log.e(TAG, "-------onPlayerPlayMediaSource--------->>>>>", mediaSource);
+      playingMediaIndex.value =
+        videoPlayer.value?.getPlayingMediaSourceIndex() ?? -1;
+    }
+
+    function onPlayerRenderListChanged(list: Array<ESPlayerRender>): void {
+      renderList.value = list;
+    }
+
+    function onPlayerRenderChanged(r: ESPlayerRender): void {
+      switch (r) {
+        case ESPlayerRender.ES_PLAYER_RENDER_NONE:
+          render.value = "NONE";
+          break;
+        case ESPlayerRender.ES_PLAYER_RENDER_TEXTURE_VIEW:
+          render.value = "TEXTURE_VIEW";
+          break;
+        case ESPlayerRender.ES_PLAYER_RENDER_SURFACE_VIEW:
+          render.value = "SURFACE_VIEW";
+          break;
+      }
+    }
+
+    function playPreviousMedia() {
+      videoPlayer.value?.playPreviousMediaSource();
+    }
+
+    function playNextMedia() {
+      videoPlayer.value?.playNextMediaSource();
+    }
+
+    //
+    function setSurfaceViewRender() {
+      videoPlayer.value?.setRender(
+        ESPlayerRender.ES_PLAYER_RENDER_SURFACE_VIEW,
+      );
+    }
+
+    function setTextureViewRender() {
+      videoPlayer.value?.setRender(
+        ESPlayerRender.ES_PLAYER_RENDER_TEXTURE_VIEW,
+      );
+    }
+
+    const onESCreate = () => {
+      log.e(TAG, "-------onESCreate------start---->>>>>");
+      videoPlayer.value?.initialize();
+    };
+    const onPlayerInitialized = (playerType) => {
+      log.e(TAG, "-------onESCreate------onPlayerInitialized---->>>>>");
+      const mediaSourceList: ESMediaSourceList = {
+        index: 0,
+        list: [
+          {
+            uri: "http://qcloudcdn.a311.ottcn.com/data_center/videos/SHORT/DEFAULT/2022/10/27/d4e29cbf-5b15-4523-b9c8-80f18fa76275.mp4",
+          },
+          {
+            uri: "http://qcloudcdn.a311.ottcn.com/data_center/videos/SHORT/DEFAULT/2022/01/27/85a658d6-d0ce-4721-adea-f8e2e0b263a7.mp4",
+          },
+          {
+            uri: "http://qcloudcdn.a311.ottcn.com/data_center/videos/SHORT/DEFAULT/2023/09/17/22edb94d-8ffc-4736-a633-3f9e38c096e8.mp4",
+          },
+          {
+            uri: "http://qcloudcdn.a311.ottcn.com/data_center/videos/LIB/VARIETY/2022/03/10/2877b7e1-fda6-4591-aff3-3fd3ba4151cf_transcode_1137855.mp4",
+          },
+        ],
+      };
+      log.e(TAG, "-------onPlayerInitialized---------->>>>>", playerType);
+      videoPlayer.value?.playMediaSourceList(mediaSourceList);
+      videoPlayer.value?.start(0);
+    };
+
+    function onBackPressed() {
+      videoPlayer.value?.stop();
+      videoPlayer.value?.release();
+      router.back();
+    }
+
+    return {
+      renderList,
+      render,
+      playingMediaIndex,
+      onESCreate,
+      onPlayerInitialized,
+      playerWidth,
+      playerHeight,
+      videoPlayer,
+      onBackPressed,
+      playPreviousMedia,
+      playNextMedia,
+      setSurfaceViewRender,
+      setTextureViewRender,
+      onPlayerPlayMediaSource,
+      onPlayerRenderListChanged,
+      onPlayerRenderChanged,
+    };
+  },
+});
+</script>
+
+<style>
+.es-video-player-page-css {
+  position: absolute;
+}
+
+.es-video-player-text-css {
+  color: white;
+  font-size: 30px;
+  margin-left: 20px;
+  margin-right: 20px;
+  text-align: center;
+  padding-top: 5px;
+  padding-bottom: 5px;
+}
+</style>

package/rules/.docs/examples/component/video-player/type.vue

@@ -0,0 +1,133 @@
+<template>
+  <div class="es-sdk-root-css">
+    <es-video-player
+      ref="videoPlayer"
+      :playerWidth="playerWidth"
+      :playerHeight="playerHeight"
+      class="es-video-player-page-css"
+      @onPlayerPlayMediaSource="onPlayerPlayMediaSource"
+      @onPlayerInitialized="onPlayerInitialized"
+    />
+    <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">
+      <span class="es-video-player-text-css" text="播放器类型：" />
+      <span class="es-video-player-text-css" :text="playerTypeText + ''" />
+    </div>
+    <div class="es-sdk-content-row-css">
+      <s-text-button text="System" @onButtonClicked="setPlayerTypeSystem" />
+      <s-text-button text="Ijk" @onButtonClicked="setPlayerTypeIjk" />
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { ref } from "vue";
+import { defineComponent } from "@vue/runtime-core";
+import { useESLog } from "@extscreen/es3-core";
+import { ESPlayerType, useESPlayerTypeManager } from "@extscreen/es3-player";
+import { ESVideoPlayer } from "@extscreen/es3-video-player";
+import { useESRouter } from "@extscreen/es3-router";
+import type {
+  ESIPlayer,
+  ESMediaSource,
+  ESMediaSourceList,
+} from "@extscreen/es3-player";
+
+const TAG = "ESVideoPlayerPage";
+
+export default defineComponent({
+  name: "播放器类型",
+  components: {
+    "es-video-player": ESVideoPlayer,
+  },
+  emits: [],
+  setup() {
+    const log = useESLog();
+    const router = useESRouter();
+    const videoPlayer = ref<ESIPlayer>();
+    const playerWidth = 1920;
+    const playerHeight = 1080;
+
+    const playingMediaIndex = ref(0);
+
+    const playerTypeManager = useESPlayerTypeManager();
+    const playerTypeText = ref<string>(
+      playerTypeManager.getPlayerType().toString(),
+    );
+
+    function onPlayerPlayMediaSource(mediaSource: ESMediaSource) {
+      playingMediaIndex.value =
+        videoPlayer.value?.getPlayingMediaSourceIndex() ?? -1;
+    }
+
+    //
+    function setPlayerTypeSystem() {
+      videoPlayer.value?.stop();
+      playerTypeManager.setPlayerType(ESPlayerType.ES_PLAYER_TYPE_SYSTEM);
+      videoPlayer.value?.playMediaSourceByIndex(playingMediaIndex.value);
+      playerTypeText.value = playerTypeManager.getPlayerType().toString();
+    }
+
+    function setPlayerTypeIjk() {
+      videoPlayer.value?.stop();
+      playerTypeManager.setPlayerType(ESPlayerType.ES_PLAYER_TYPE_IJK);
+      videoPlayer.value?.playMediaSourceByIndex(playingMediaIndex.value);
+      playerTypeText.value = playerTypeManager.getPlayerType().toString();
+    }
+
+    const onESCreate = () => {
+      videoPlayer.value?.initialize();
+    };
+    const onPlayerInitialized = (playerType) => {
+      const mediaSourceList: ESMediaSourceList = {
+        index: 0,
+        list: [
+          {
+            uri: "http://extcdn.hsrc.tv/channelzero/2024/02/05/d477660a-3eb6-4c7f-b82b-0b61c035505c.mp4",
+          },
+        ],
+      };
+      log.e(TAG, "-------onPlayerInitialized---------->>>>>", playerType);
+      videoPlayer.value?.playMediaSourceList(mediaSourceList);
+      videoPlayer.value?.start(0);
+    };
+
+    function onBackPressed() {
+      videoPlayer.value?.stop();
+      videoPlayer.value?.release();
+      router.back();
+    }
+
+    return {
+      playerTypeText,
+      playingMediaIndex,
+      onESCreate,
+      onPlayerInitialized,
+      playerWidth,
+      playerHeight,
+      videoPlayer,
+      onBackPressed,
+      setPlayerTypeSystem,
+      setPlayerTypeIjk,
+      onPlayerPlayMediaSource,
+    };
+  },
+});
+</script>
+
+<style>
+.es-video-player-page-css {
+  position: absolute;
+}
+
+.es-video-player-text-css {
+  color: white;
+  font-size: 30px;
+  margin-left: 20px;
+  margin-right: 20px;
+  text-align: center;
+  padding-top: 5px;
+  padding-bottom: 5px;
+}
+</style>

package/rules/.docs/examples/component/view/background-img.vue

@@ -0,0 +1,49 @@
+<template>
+  <qt-view class="es-sdk-root-css" :clipChildren="false">
+    <s-title-view class="es-sdk-content-title-css" :text="$options.name" />
+    <qt-view class="es-sdk-content-divider-css" />
+    <qt-row class="qt-sdk-content-row-css">
+      <qt-view class="qt-view-background-css">
+        <qt-image
+          class="qt-view-background-img-css"
+          src="https://img1.baidu.com/it/u=2666955302,2339578501&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=750"
+        />
+        <qt-text
+          class="qt-view-background-text-css"
+          text="文字文字文字文字文字"
+        />
+      </qt-view>
+    </qt-row>
+  </qt-view>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "@vue/runtime-core";
+
+export default defineComponent({
+  name: "背景图片",
+});
+</script>
+
+<style>
+.qt-view-background-css {
+  width: 192px;
+  height: 108px;
+  background-color: transparent;
+  flex-direction: column;
+  align-items: center;
+  margin: 20px;
+}
+
+.qt-view-background-img-css {
+  width: 192px;
+  height: 108px;
+  position: absolute;
+}
+
+.qt-view-background-text-css {
+  width: 192px;
+  height: 108px;
+  color: red;
+}
+</style>

package/rules/.docs/examples/component/view/background.vue

@@ -0,0 +1,28 @@
+<template>
+  <qt-view class="es-sdk-root-css" :clipChildren="false">
+    <s-title-view class="es-sdk-content-title-css" :text="$options.name" />
+    <qt-view class="es-sdk-content-divider-css" />
+    <qt-row class="qt-sdk-content-row-css">
+      <qt-view class="qt-view-background-css" />
+    </qt-row>
+  </qt-view>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "@vue/runtime-core";
+
+export default defineComponent({
+  name: "背景色",
+});
+</script>
+
+<style>
+.qt-view-background-css {
+  width: 192px;
+  height: 108px;
+  background-color: darkgoldenrod;
+  flex-direction: column;
+  align-items: center;
+  margin: 20px;
+}
+</style>

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

@@ -0,0 +1,28 @@
+<template>
+  <qt-view class="es-sdk-root-css" :clipChildren="false">
+    <s-title-view class="es-sdk-content-title-css" :text="$options.name" />
+    <qt-view class="es-sdk-content-divider-css" />
+    <qt-view class="qt-view-start-page" />
+  </qt-view>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "@vue/runtime-core";
+
+export default defineComponent({
+  name: "使用初探",
+  setup() {
+    return {};
+  },
+});
+</script>
+
+<style>
+.qt-view-start-page {
+  width: 192px;
+  height: 108px;
+  background-color: darkgoldenrod;
+  flex-direction: column;
+  align-items: center;
+}
+</style>

package/rules/.docs/examples/component/view/border.vue

@@ -0,0 +1,72 @@
+<template>
+  <qt-view class="es-sdk-root-css" :clipChildren="false">
+    <s-title-view class="es-sdk-content-title-css" :text="$options.name" />
+    <qt-view class="es-sdk-content-divider-css" />
+    <qt-row class="qt-sdk-content-row-css">
+      <qt-view
+        class="qt-view-focus-one"
+        :focusable="true"
+        :enableFocusBorder="false"
+        :focusScale="1.1"
+        @focus="onFocus"
+      />
+      <qt-view
+        class="qt-view-focus-two"
+        :focusable="true"
+        :enableFocusBorder="false"
+        :focusScale="1.1"
+        @focus="onFocus"
+      />
+    </qt-row>
+  </qt-view>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "@vue/runtime-core";
+
+export default defineComponent({
+  name: "边框",
+  setup() {
+    const onFocus = (e) => {
+      //
+    };
+    return {
+      onFocus,
+    };
+  },
+});
+</script>
+
+<style>
+.qt-view-focus-one {
+  width: 192px;
+  height: 108px;
+  background-color: darkgoldenrod;
+  flex-direction: column;
+  align-items: center;
+  margin: 20px;
+  border-color: blueviolet;
+  border-width: 5px;
+  border-radius: 40px;
+  focus-border-width: 5px;
+  focus-border-color: blue;
+  focus-border-style: solid;
+  focus-border-radius: 40px;
+}
+
+.qt-view-focus-two {
+  width: 192px;
+  height: 108px;
+  background-color: red;
+  flex-direction: column;
+  align-items: center;
+  margin: 20px;
+  border-color: purple;
+  border-width: 2px;
+  border-radius: 20px;
+  focus-border-width: 5px;
+  focus-border-radius: 40px;
+  focus-border-color: blue;
+  focus-border-style: solid;
+}
+</style>

package/rules/.docs/examples/component/view/click.vue

@@ -0,0 +1,66 @@
+<template>
+  <qt-view class="es-sdk-root-css" :clipChildren="false">
+    <s-title-view class="es-sdk-content-title-css" :text="$options.name" />
+    <qt-view class="es-sdk-content-divider-css" />
+    <qt-row class="qt-sdk-content-row-css">
+      <qt-view
+        class="qt-view-focus-one"
+        :focusable="true"
+        :enableFocusBorder="true"
+        :focusScale="1.1"
+        @focus="onFocus"
+        @click="onClick"
+      />
+      <qt-view
+        class="qt-view-focus-two"
+        :focusable="true"
+        :enableFocusBorder="true"
+        :focusScale="1.1"
+        @focus="onFocus"
+        @click="onClick"
+      />
+    </qt-row>
+  </qt-view>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "@vue/runtime-core";
+import { useESToast } from "@extscreen/es3-core";
+
+export default defineComponent({
+  name: "点击事件",
+  setup() {
+    const toast = useESToast();
+    const onFocus = (e) => {
+      const focused = e.isFocused;
+    };
+    const onClick = (e) => {
+      toast.showToast("点击了~");
+    };
+    return {
+      onFocus,
+      onClick,
+    };
+  },
+});
+</script>
+
+<style>
+.qt-view-focus-one {
+  width: 192px;
+  height: 108px;
+  background-color: darkgoldenrod;
+  flex-direction: column;
+  align-items: center;
+  margin: 20px;
+}
+
+.qt-view-focus-two {
+  width: 192px;
+  height: 108px;
+  background-color: red;
+  flex-direction: column;
+  align-items: center;
+  margin: 20px;
+}
+</style>

package/rules/.docs/examples/component/view/focus-background.vue

@@ -0,0 +1,60 @@
+<template>
+  <qt-view class="es-sdk-root-css" :clipChildren="false">
+    <s-title-view class="es-sdk-content-title-css" :text="$options.name" />
+    <qt-view class="es-sdk-content-divider-css" />
+    <qt-row class="qt-sdk-content-row-css">
+      <qt-view
+        class="qt-view-focus-one"
+        :focusable="true"
+        :enableFocusBorder="true"
+        :focusScale="1.1"
+        @focus="onFocus"
+      />
+      <qt-view
+        class="qt-view-focus-two"
+        :focusable="true"
+        :enableFocusBorder="true"
+        :focusScale="1.1"
+        @focus="onFocus"
+      />
+    </qt-row>
+  </qt-view>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "@vue/runtime-core";
+
+export default defineComponent({
+  name: "焦点背景色",
+  setup() {
+    const onFocus = (e) => {
+      //
+    };
+    return {
+      onFocus,
+    };
+  },
+});
+</script>
+
+<style>
+.qt-view-focus-one {
+  width: 192px;
+  height: 108px;
+  background-color: darkgoldenrod;
+  flex-direction: column;
+  align-items: center;
+  margin: 20px;
+  focus-background-color: #40b883;
+}
+
+.qt-view-focus-two {
+  width: 192px;
+  height: 108px;
+  background-color: red;
+  flex-direction: column;
+  align-items: center;
+  margin: 20px;
+  focus-background-color: #40b883;
+}
+</style>

package/rules/.docs/examples/component/view/focus.vue

@@ -0,0 +1,58 @@
+<template>
+  <qt-view class="es-sdk-root-css" :clipChildren="false">
+    <s-title-view class="es-sdk-content-title-css" :text="$options.name" />
+    <qt-view class="es-sdk-content-divider-css" />
+    <qt-row class="qt-sdk-content-row-css">
+      <qt-view
+        class="qt-view-focus-one"
+        :focusable="true"
+        :enableFocusBorder="true"
+        :focusScale="1.1"
+        @focus="onFocus"
+      />
+      <qt-view
+        class="qt-view-focus-two"
+        :focusable="true"
+        :enableFocusBorder="true"
+        :focusScale="1.1"
+        @focus="onFocus"
+      />
+    </qt-row>
+  </qt-view>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "@vue/runtime-core";
+
+export default defineComponent({
+  name: "焦点事件",
+  setup() {
+    const onFocus = (e) => {
+      const focused = e.isFocused;
+    };
+    return {
+      onFocus,
+    };
+  },
+});
+</script>
+
+<style>
+.qt-view-focus-one {
+  width: 192px;
+  height: 108px;
+  background-color: darkgoldenrod;
+  flex-direction: column;
+  align-items: center;
+  margin: 20px;
+}
+
+.qt-view-focus-two {
+  width: 192px;
+  height: 108px;
+  background-color: red;
+  flex-direction: column;
+  align-items: center;
+  margin: 20px;
+}
+</style>