@quicktvui/ai 1.0.9 → 1.1.0

package/rules/.source/hellotv/src/pages/live/components/menu/second-list-item.vue

@@ -0,0 +1,80 @@
+<template>
+  <qt-view
+    class="menu-body-list-item"
+    style="width: 400px"
+    :type="1"
+    :focusable="true"
+    eventFocus
+    eventClick
+  >
+    <!-- 角标 -->
+    <qt-image
+      showIf="${isVip}"
+      class="menu-body-list-item-corner"
+      :src="icCornerVip"
+      :postDelay="100"
+      :focusable="false"
+    ></qt-image>
+    <!-- 主体 -->
+    <qt-view
+      style="
+        background-color: transparent;
+        flex-direction: row;
+        align-items: center;
+      "
+      :focusable="false"
+      duplicateParentState
+    >
+      <qt-text
+        class="menu-body-list-item-text"
+        style="width: 110px; height: 52px"
+        text="${id}"
+        gravity="center"
+        :focusable="false"
+        duplicateParentState
+      ></qt-text>
+      <qt-view
+        style="width: 270px; background-color: transparent"
+        :focusable="false"
+        duplicateParentState
+      >
+        <qt-text
+          class="menu-body-list-item-text"
+          style="width: 270px; height: 40px; font-size: 32px; line-height: 40px"
+          text="${name}"
+          gravity="center|start"
+          :focusable="false"
+          :lines="1"
+          :ellipsizeMode="2"
+          duplicateParentState
+        ></qt-text>
+        <qt-text
+          class="menu-body-list-item-text"
+          style="width: 230px; height: 40px; font-size: 24px"
+          text="${program}"
+          gravity="center|start"
+          :focusable="false"
+          :lines="1"
+          :ellipsizeMode="4"
+          :horizontalFadingEdgeEnabled="true"
+          :fadingEdgeLength="10"
+          duplicateParentState
+        ></qt-text>
+      </qt-view>
+    </qt-view>
+    <!-- 播放图标 -->
+    <play-mark
+      showIf="${isPlaying}"
+      class="menu-body-list-item-playmark"
+      :markColor="'#FFFFFF'"
+      :gap="-1"
+      :focusable="false"
+    />
+  </qt-view>
+</template>
+
+<script setup lang="ts">
+import icCornerVip from "../../../../assets/live/ic-corner-vip.png";
+</script>
+
+<style scoped src="../../css/menu.css"></style>

package/rules/.source/hellotv/src/pages/live/components/menu/third-list-item.vue

@@ -0,0 +1,68 @@
+<template>
+  <qt-view
+    class="menu-body-list-item"
+    style="width: 380px"
+    :type="1"
+    :focusable="true"
+  >
+    <qt-view
+      style="background-color: transparent"
+      :focusable="false"
+      duplicateParentState
+    >
+      <qt-text
+        class="menu-body-list-item-text"
+        style="width: 296px; font-size: 32px; height: 52px"
+        text="${program}"
+        gravity="center|start"
+        :focusable="false"
+        :lines="1"
+        :ellipsizeMode="4"
+        :horizontalFadingEdgeEnabled="true"
+        :fadingEdgeLength="10"
+        duplicateParentState
+      ></qt-text>
+      <qt-view
+        style="
+          background-color: transparent;
+          flex-direction: row;
+          align-items: center;
+        "
+        :focusable="false"
+        duplicateParentState
+      >
+        <qt-text
+          class="menu-body-list-item-text"
+          style="width: 154px; height: 40px; font-size: 24px"
+          text="${time}"
+          gravity="center|start"
+          :focusable="false"
+          duplicateParentState
+        ></qt-text>
+        <qt-text
+          class="menu-body-list-item-text"
+          style="width: 96px; height: 40px; font-size: 24px"
+          text="${tips}"
+          gravity="center|start"
+          :focusable="false"
+          duplicateParentState
+        ></qt-text>
+      </qt-view>
+    </qt-view>
+    <play-mark
+      showIf="${isPlaying}"
+      style="
+        width: 20px;
+        height: 20px;
+        position: absolute;
+        right: 14px;
+        bottom: 20px;
+      "
+      :markColor="'#FFFFFF'"
+      :gap="-1"
+      :focusable="false"
+    />
+  </qt-view>
+</template>
+
+<style scoped src="../../css/menu.css"></style>

package/rules/.source/hellotv/src/pages/live/components/player/index.vue

@@ -0,0 +1,168 @@
+<template>
+  <qt-view class="player">
+    <!-- 播放器 -->
+    <ESPlayerManager
+      ref="playerManager"
+      :playerList="playerListRef"
+      :initPlayerWindowType="2"
+      @onPlayerBufferStart="onPlayerBufferStart"
+      @onPlayerBufferEnd="onPlayerBufferEnd"
+      @onPlayerPlaying="onPlayerPlaying"
+      @onPlayerError="onPlayerError"
+    />
+    <!-- 加载中 -->
+    <player-loading :visibility="showLoading ? 'visible' : 'invisible'" />
+    <!-- 播放失败 -->
+    <player-error :visibility="playError ? 'visible' : 'invisible'" />
+    <!-- 切台提示 -->
+    <player-tips
+      :visibility="showTips ? 'visible' : 'invisible'"
+      ref="tipsRef"
+    />
+  </qt-view>
+</template>
+
+<script setup lang="ts">
+import { ref, watch, markRaw, nextTick } from "vue";
+import { Native } from "@extscreen/es3-vue";
+import { ESKeyEvent, ESKeyCode, useESEventBus } from "@extscreen/es3-core";
+import {
+  ESPlayerManager,
+  ESIPlayerManager,
+  ESMediaItem,
+} from "@extscreen/es3-player-manager";
+import { ESPlayerPlayMode } from "@extscreen/es3-player";
+import { ESVideoPlayer } from "@extscreen/es3-video-player";
+import playerLoading from "./player-loading.vue";
+import playerError from "./player-error.vue";
+import playerTips from "./player-tips.vue";
+
+const emits = defineEmits(["closeMenu"]);
+
+const eventBus = useESEventBus();
+
+const showLoading = ref(false);
+watch(
+  () => showLoading.value,
+  (b) => {
+    if (b) {
+      Native.callNative("ESNetworkSpeedModule", "showNetSpeed");
+    } else {
+      Native.callNative("ESNetworkSpeedModule", "stopNetSpeed");
+    }
+  },
+);
+
+const playError = ref(false);
+const playerManager = ref<ESIPlayerManager>();
+const playerListRef = ref([markRaw(ESVideoPlayer)]);
+const tipsRef = ref();
+const showTips = ref(false);
+
+let mediaList: ESMediaItem[] = [];
+let curPlayIndex: number = 0;
+
+function init(params: { mediaList: [] }) {
+  mediaList = params.mediaList;
+  // 初始化播放器
+  showLoading.value = true;
+  playerManager.value?.initialize();
+  playerManager.value?.setPlayMediaListMode(
+    ESPlayerPlayMode.ES_PLAYER_PLAY_MODE_LOOP,
+  );
+  playerManager.value?.playMediaList({ index: 0, list: mediaList });
+}
+
+let isPaused = false;
+function resume() {
+  if (isPaused) {
+    isPaused = false;
+    playerManager.value?.start(0);
+    // resume 会导致页面闪
+    // playerManager.value?.resume()
+  }
+}
+
+function pause() {
+  if (!isPaused) {
+    isPaused = true;
+    playerManager.value?.pause();
+  }
+}
+
+function stop() {
+  playerManager.value?.stop();
+}
+
+let showTipsTimer: any = -1;
+function setPlayInfo(playIndex: number) {
+  const nextMedia = mediaList[playIndex];
+  tipsRef.value?.setPlayInfo({
+    channelId: nextMedia.channelId,
+    channelName: nextMedia.channelName,
+    isVip: nextMedia.isVip,
+    program: nextMedia.program,
+    nextProgram: nextMedia.nextProgram,
+  });
+  nextTick(() => {
+    clearTimeout(showTipsTimer);
+    showTips.value = true;
+    showTipsTimer = setTimeout(() => (showTips.value = false), 10000);
+  });
+}
+
+function playMediaByIndex(index: number) {
+  if (index != curPlayIndex) {
+    showTips.value = false;
+    showLoading.value = true;
+    playError.value = false;
+    playerManager.value?.playMediaByIndex(index);
+  }
+  emits("closeMenu");
+  setPlayInfo(index);
+}
+
+function onPlayerBufferStart() {
+  showLoading.value = true;
+}
+
+function onPlayerBufferEnd() {
+  showLoading.value = false;
+}
+
+function onPlayerPlaying() {
+  showLoading.value = false;
+  curPlayIndex = playerManager.value?.getPlayingMediaIndex() || 0;
+  setPlayInfo(curPlayIndex);
+  eventBus.emit("setPlayIndex", curPlayIndex);
+}
+
+function onPlayerError() {
+  showLoading.value = false;
+  playError.value = true;
+  playerManager.value?.stop();
+}
+
+function onKeyDown(keyEvent: ESKeyEvent) {
+  let playIndex = playerManager.value?.getPlayingMediaIndex() || 0;
+  switch (keyEvent.keyCode) {
+    case ESKeyCode.ES_KEYCODE_DPAD_UP:
+      playMediaByIndex(--playIndex < 0 ? mediaList.length - 1 : playIndex);
+      break;
+    case ESKeyCode.ES_KEYCODE_DPAD_DOWN:
+      playMediaByIndex(++playIndex >= mediaList.length ? 0 : playIndex);
+      break;
+  }
+}
+
+defineExpose({ init, resume, pause, stop, playMediaByIndex, onKeyDown });
+</script>
+
+<style scoped>
+.player {
+  width: 1920px;
+  height: 1080px;
+  background-color: transparent;
+  position: absolute;
+}
+</style>

package/rules/.source/hellotv/src/pages/live/components/player/player-error.vue

@@ -0,0 +1,48 @@
+<template>
+  <qt-view class="player-error">
+    <qt-text
+      class="player-error-text"
+      style="width: 226px"
+      text="播放失败 请按"
+      gravity="center"
+    ></qt-text>
+    <qt-image
+      style="
+        width: 46px;
+        height: 46px;
+        margin-top: 4px;
+        margin-left: 4px;
+        margin-right: 4px;
+      "
+      :src="icKey"
+    ></qt-image>
+    <qt-text
+      class="player-error-text"
+      style="width: 216px"
+      text="切换其他节目"
+      gravity="center"
+    ></qt-text>
+  </qt-view>
+</template>
+
+<script setup lang="ts">
+import icKey from "../../../../assets/live/ic-key.png";
+</script>
+
+<style scoped>
+.player-error {
+  width: 1920px;
+  height: 1080px;
+  background-color: #0b0f10;
+  position: absolute;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+}
+
+.player-error-text {
+  height: 46px;
+  color: #ffffff;
+  font-size: 36px;
+}
+</style>

package/rules/.source/hellotv/src/pages/live/components/player/player-loading.vue

@@ -0,0 +1,50 @@
+<template>
+  <qt-view class="player-loading">
+    <qt-loading-view style="width: 100px; height: 100px"></qt-loading-view>
+    <qt-text
+      class="player-loading-text"
+      :text="netSpeed"
+      gravity="center"
+    ></qt-text>
+  </qt-view>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, onUnmounted } from "vue";
+import { EventBus } from "@extscreen/es3-vue";
+
+const netSpeed = ref("0.0KB/s 正在缓冲...");
+
+onMounted(() => {
+  EventBus.$on("NetSpeed", onNetWorkTipChanged);
+});
+onUnmounted(() => {
+  EventBus.$off("NetSpeed");
+});
+
+function onNetWorkTipChanged(e) {
+  const mb = Number(e.speedMbps);
+  const kb = Number(e.speedKbps);
+  netSpeed.value = (mb >= 1 ? mb + "MB/s" : kb + "KB/s") + " 正在缓冲...";
+}
+</script>
+
+<style scoped>
+.player-loading {
+  width: 1920px;
+  height: 1080px;
+  background-color: #0b0f10;
+  position: absolute;
+  align-items: center;
+  justify-content: center;
+}
+
+.player-loading-text {
+  width: 260px;
+  height: 30px;
+  background-color: transparent;
+  margin-top: 35px;
+  color: rgba(255, 255, 255, 0.5);
+  font-size: 24px;
+}
+</style>

package/rules/.source/hellotv/src/pages/live/components/player/player-tips.vue

@@ -0,0 +1,125 @@
+<template>
+  <qt-view
+    class="player-tips"
+    :gradientBackground="{
+      colors: ['#FF2C2C2C', '#FF0F1518'],
+      orientation: 0,
+      cornerRadius: 30,
+    }"
+  >
+    <!-- 角标 -->
+    <qt-image
+      v-show="playInfo.isVip"
+      class="player-tips-corner"
+      :src="icCornerVipTips"
+    ></qt-image>
+    <qt-view class="player-tips-left">
+      <qt-text
+        class="player-tips-text"
+        style="width: 234px; height: 120px; color: #ffffff; font-size: 100px"
+        :text="playInfo.channelId"
+        typeface="bold"
+        gravity="center"
+      ></qt-text>
+      <qt-text
+        class="player-tips-text"
+        style="width: 234px; font-size: 26px"
+        :text="playInfo.channelName"
+        gravity="center"
+        :lines="1"
+        :ellipsizeMode="2"
+        :select="true"
+      ></qt-text>
+    </qt-view>
+    <qt-view class="player-tips-right">
+      <qt-view class="player-tips-right-box" style="margin-bottom: 8px">
+        <qt-text
+          class="player-tips-text"
+          style="height: 48px; color: #ffffff; font-size: 38px"
+          :text="playInfo.program"
+          gravity="center|start"
+          :lines="1"
+          :ellipsizeMode="3"
+          :select="true"
+          :horizontalFadingEdgeEnabled="true"
+          :fadingEdgeLength="10"
+        ></qt-text>
+        <qt-text
+          class="player-tips-text"
+          style="width: 106px; font-size: 28px"
+          text="14:13"
+          gravity="center|end"
+        ></qt-text>
+      </qt-view>
+      <qt-view class="player-tips-right-box">
+        <qt-text
+          class="player-tips-text"
+          :text="playInfo.nextProgram"
+          gravity="center|start"
+          :lines="1"
+          :ellipsizeMode="3"
+          :select="true"
+          :horizontalFadingEdgeEnabled="true"
+          :fadingEdgeLength="10"
+        ></qt-text>
+        <qt-text
+          class="player-tips-text"
+          style="width: 106px"
+          text="16:30"
+          gravity="center|end"
+        ></qt-text>
+      </qt-view>
+      <qt-view class="player-tips-line"></qt-view>
+      <qt-view style="flex-direction: row; justify-content: space-between">
+        <tipsIconText
+          :icon="icOk"
+          :text="'频道导航'"
+          :textStyle="{ width: '88px' }"
+        />
+        <tipsIconText
+          :icon="icChange"
+          :text="'上下换台'"
+          :textStyle="{ width: '88px' }"
+        />
+        <tipsIconText
+          :icon="icArrowRight"
+          :text="'开通服务'"
+          :textStyle="{ width: '88px' }"
+        />
+      </qt-view>
+    </qt-view>
+  </qt-view>
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue";
+import tipsIconText from "./tips-icon-text.vue";
+import icCornerVipTips from "../../../../assets/live/ic-corner-vip-tips.png";
+import icOk from "../../../../assets/live/ic-ok.png";
+import icChange from "../../../../assets/live/ic-change.png";
+import icArrowRight from "../../../../assets/live/ic-arrow-right.png";
+
+type PlayInfo = {
+  channelId: string;
+  channelName: string;
+  isVip: boolean;
+  program: string;
+  nextProgram: string;
+};
+
+const playInfo = ref<PlayInfo>({
+  channelId: "",
+  channelName: "",
+  isVip: false,
+  program: "",
+  nextProgram: "",
+});
+
+function setPlayInfo(obj: PlayInfo) {
+  playInfo.value = obj;
+}
+
+defineExpose({ setPlayInfo });
+</script>
+
+<style scoped src="../../css/player.css"></style>

package/rules/.source/hellotv/src/pages/live/components/player/tips-icon-text.vue

@@ -0,0 +1,27 @@
+<template>
+  <qt-view style="flex-direction: row; align-items: center">
+    <qt-image
+      style="width: 28px; height: 28px; margin-right: 9px"
+      :src="props.icon"
+    ></qt-image>
+    <qt-text
+      class="player-tips-text"
+      :style="props.textStyle"
+      :text="props.text"
+      gravity="center|start"
+    ></qt-text>
+  </qt-view>
+</template>
+
+<script setup lang="ts">
+const props = defineProps({
+  icon: String,
+  text: {
+    type: String,
+    default: "",
+  },
+  textStyle: Object,
+});
+</script>
+
+<style scoped src="../../css/player.css"></style>

package/rules/.source/hellotv/src/pages/live/css/menu.css

@@ -0,0 +1,109 @@
+.menu {
+  width: 1920px;
+  height: 1080px;
+  background-color: transparent;
+  position: absolute;
+}
+
+.menu-body {
+  width: 1126px;
+  height: 1080px;
+  background-color: transparent;
+  flex-direction: row;
+}
+
+.menu-body-list {
+  width: 300px;
+  height: 1080px;
+  background-color: #1b1b1b99;
+}
+
+.menu-body-list-item {
+  width: 240px;
+  height: 108px;
+  background-color: transparent;
+  border-radius: 20px;
+  align-items: center;
+  justify-content: center;
+  focus-background-color: #3098ffff;
+}
+
+.menu-body-list-item-img {
+  width: 151px;
+  height: 37px;
+  background-color: transparent;
+}
+
+.menu-body-list-item-text {
+  width: 240px;
+  height: 108px;
+  background-color: transparent;
+  color: rgba(255, 255, 255, 0.7);
+  font-size: 36px;
+  focus-color: #ffffff;
+  select-color: #3098ffff;
+}
+
+.menu-body-list-item-icon {
+  width: 30px;
+  height: 38px;
+  background-color: transparent;
+  margin-right: 5px;
+}
+
+.menu-body-list-item-corner {
+  width: 60px;
+  height: 40px;
+  background-color: transparent;
+  position: absolute;
+  top: -6px;
+  left: 0.01px;
+}
+
+.menu-body-list-item-playmark {
+  width: 20px;
+  height: 20px;
+  background-color: transparent;
+  position: absolute;
+  right: 19px;
+  bottom: 26px;
+}
+
+.menu-body-list-nodata {
+  width: 300px;
+  height: 52px;
+  background-color: transparent;
+  color: #ffffff;
+  font-size: 36px;
+}
+
+.menu-body-ext {
+  width: 132px;
+  height: 1080px;
+  background-color: transparent;
+}
+
+.menu-back {
+  width: 293px;
+  height: 52px;
+  background-color: transparent;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  position: absolute;
+  right: 100px;
+  bottom: 80px;
+}
+
+.menu-back span {
+  font-size: 36px;
+  color: #ffffff;
+}
+
+.menu-back-icon {
+  width: 35px;
+  height: 35px;
+  margin-top: 4px;
+  margin-left: 2px;
+  margin-right: 2px;
+}