@quicktvui/ai 1.0.9 → 1.1.1

package/rules/.source/hellotv/src/pages/home/components/media/bg-player.vue

@@ -0,0 +1,440 @@
+<template>
+  <div class="bg-player-root-css" :clipChildren="false">
+    <qt-replace-child
+      class="bg-player-replace-child"
+      sid="bgPlayerReplaceChildSid"
+      :markChildSID="TabContentConfig.homeBgPlaySid"
+      :replaceOnVisibilityChanged="false"
+      :focusable="false"
+      :clipChildren="false"
+    >
+    </qt-replace-child>
+    <!--  此div的作用是让bg_player在一开始的时候不显示，否则如果瀑布流首屏配置了播放器，就会先闪现在左上角一下-->
+    <div class="bg-player-parent-css">
+      <div
+        class="bg-player-window"
+        v-if="playerWindowInit"
+        :sid="TabContentConfig.homeBgPlaySid"
+        :style="{
+          width: `${playerWindowWidth}px`,
+          height: `${playerWindowHeight}px`,
+        }"
+        :fillParent="true"
+        :clipChildren="false"
+        :focusable="false"
+      >
+        <media-player-view
+          class="bg-player-view"
+          ref="bgPlayerViewRef"
+          :clipChildren="false"
+          :playerLeft="playerLeft"
+          :playerTop="playerTop"
+          :isShowPlayerController="false"
+          @onPlayerPlayMedia="onPlayerPlayMedia"
+          @onPlayerPlaying="onPlayerPlaying"
+          @onPlayerCompleted="onPlayerCompleted"
+          @onPlayerError="onPlayerError"
+        />
+      </div>
+    </div>
+    <!-- 背景图-->
+    <bg-animation
+      class="bg-player-background-img"
+      :bgStyle="{
+        width: playerWidth,
+        height: playerHeight,
+        left: playerLeft,
+        top: playerTop,
+      }"
+      ref="bgPlayerBackgroundImgRef"
+      :visible="bgPlayerType !== HomePlayType.TYPE_4K"
+      :focusable="false"
+    />
+    <!-- 全屏背景遮罩-->
+    <div
+      class="bg-player-mask"
+      v-if="!isShowShadow"
+      :visible="bgPlayerType === HomePlayType.TYPE_BG"
+      :bgStyle="{
+        width: playerWidth,
+        height: playerHeight,
+        left: playerLeft,
+        top: playerTop,
+      }"
+      :focusable="false"
+    />
+    <!-- 背景阴影 -->
+    <img
+      class="bg-player-shadow"
+      v-if="isShowShadow && playerWidth && playerHeight"
+      :style="{
+        width: playerWidth + 'px',
+        height: playerHeight + 'px',
+        left: playerLeft,
+        top: playerTop,
+      }"
+      :focusable="false"
+      :src="bg_shadow"
+    />
+  </div>
+</template>
+
+<script lang="ts" setup name="bg-player">
+import { ESKeyEvent, useESEventBus } from "@extscreen/es3-core";
+import { ESPlayerPlayMode } from "@extscreen/es3-player";
+import { ESMediaItem } from "@extscreen/es3-player-manager";
+import {
+  qtRef,
+  QTIListView,
+  QTListViewItem,
+  VirtualView,
+} from "@quicktvui/quicktvui3";
+import { onMounted, ref } from "vue";
+import BgPlayerCellListItemText from "../tab-content/bg-player-cell-list-item-text.vue";
+import BgPlayerCellListItemImg from "../tab-content/bg-player-cell-list-item-img.vue";
+import bg_shadow from "../../../../assets/home/bg_shadow.png";
+import BgAnimation from "../../../../components/bg-animation.vue";
+import { IMediaList } from "../../../../components/media/build-data/media-imp";
+import MediaPlayerView from "../../../../components/media/view/media-player-view.vue";
+import BuildConfig from "../../../../config/build-config";
+import { createHomePlayerInterceptor } from "../../adapter/media/create-home-player-interceptor";
+import {
+  CellListItemType,
+  HomePlayData,
+  HomePlayType,
+  PlayerState,
+} from "../../adapter/media/home-media-imp";
+import TabContentConfig from "../../adapter/tab-content/tab-content-config";
+
+const emits = defineEmits(["setCellListIndex"]);
+const esEventBus = useESEventBus();
+const bgPlayerBackgroundImgRef = ref();
+const bgPlayerViewRef = ref();
+//播放窗口初始化
+const playerWindowInit = ref(false);
+//播放器窗口大小
+const playerWindowWidth = ref(0);
+const playerWindowHeight = ref(0);
+//播放器大小
+const playerWidth = ref(0);
+const playerHeight = ref(0);
+//播放器偏移量
+const playerLeft = ref<number>(0);
+const playerTop = ref<number>(0);
+//播放类型
+const bgPlayerType = ref(HomePlayType.TYPE_UNDEFINED);
+//播放拦截器
+const playerInterceptor = createHomePlayerInterceptor();
+//是否显示边框阴影
+const isShowShadow = ref(false);
+
+//播放状态
+let curPlayState = PlayerState.STATE_WAIT;
+//生命周期
+let lifeCycle = "";
+//延时器
+let delayInitPlayTimer: any = -1;
+let delayPlayTimer: any = -1;
+let dismissCoverTimer: any = -1;
+//当前已经加载的背景图
+let curCover = "";
+/********** 4K ************/
+let beforeSid = "";
+let sid = "";
+let nextSid = "";
+
+/********小窗列表**************/
+let cellListIndex = 0;
+
+onMounted(() => {
+  esEventBus.on("bg-player-life-cycle", updateLifeCycle);
+});
+/**
+ * 更新生命周期
+ * @param lifeCycleName
+ */
+const updateLifeCycle = (lifeCycleName: string) => {
+  lifeCycle = lifeCycleName;
+  if (lifeCycleName === "onESDestroy") {
+    esEventBus.off("bg-player-life-cycle");
+  }
+};
+/**
+ * 设置播放状态
+ * @param state
+ */
+const setPlayState = (state: PlayerState) => {
+  curPlayState = state;
+};
+/**
+ * 初始化播放
+ * @param playInfo
+ */
+const initPlay = (playInfo: HomePlayData) => {
+  if (!playInfo) return;
+  //初始化数据
+  resetPlayingData();
+  //解析基础数据
+  decodePlayInfo(playInfo);
+  //获取播放数据
+  const playerData = playInfo.playerData;
+  if (playerData && playerData.length > 0) {
+    //设置背景
+    const cover = playerData[0].cover || "";
+    setBgImage(cover);
+    //准备播放数据
+    let delayToPlay = 400;
+    if (!playerWindowInit.value) {
+      playerWindowInit.value = true;
+      delayToPlay += 800;
+    }
+    delayInitPlayTimer = setTimeout(() => {
+      if (curPlayState === PlayerState.STATE_STOP) {
+        return;
+      }
+      if (lifeCycle !== "onESStop") {
+        play(playerData, 0, true);
+      }
+    }, delayToPlay);
+  }
+};
+/**
+ * 重置数据
+ */
+const resetPlayingData = () => {
+  clearPlayTimer();
+  if (curPlayState === PlayerState.STATE_PLAYING) {
+    pause();
+    stop();
+  }
+};
+const clearPlayTimer = () => {
+  if (delayInitPlayTimer) clearTimeout(delayInitPlayTimer);
+};
+/**
+ * 解析播放尺寸数据
+ */
+const decodePlayInfo = (playInfo: HomePlayData) => {
+  //playerType类型赋值要放在设置图片之前
+  bgPlayerType.value = playInfo.type;
+  playerWindowWidth.value = playInfo.windowWidth;
+  playerWindowHeight.value = playInfo.windowHeight;
+  playerWidth.value = playInfo.playerWidth;
+  playerHeight.value = playInfo.playerHeight;
+  playerLeft.value = playInfo.playerLeft;
+  playerTop.value = playInfo.playerTop;
+};
+/**
+ * 设置背景图
+ * @param bgImg
+ * @param isLoadCur
+ */
+const setBgImage = (bgImg: string, isLoadCur: boolean = false) => {
+  if (
+    bgPlayerType.value === HomePlayType.TYPE_4K ||
+    bgPlayerType.value === HomePlayType.TYPE_CELL ||
+    bgPlayerType.value === HomePlayType.TYPE_CELL_LIST
+  ) {
+    //4k和小窗，小窗列表图片在格子上设置
+    bgPlayerBackgroundImgRef.value.clearImg();
+    return;
+  }
+  //防止即将播放的时候 切换背景播放导致背景出不来
+  clearTimeout(dismissCoverTimer);
+  if (isLoadCur) {
+    bgImg = curCover;
+  } else if (bgImg === curCover) {
+    return;
+  }
+  curCover = bgImg;
+  if (bgImg) {
+    bgPlayerBackgroundImgRef.value.setImg(bgImg);
+  } else {
+    bgPlayerBackgroundImgRef.value.clearImg();
+  }
+};
+
+const play = (
+  playerData: Array<IMediaList>,
+  index: number = 0,
+  isSetWindowChange: boolean = false,
+) => {
+  //低端机 且 非全屏播放 不播
+  if (BuildConfig.isLowEndDev && bgPlayerType.value !== HomePlayType.TYPE_BG)
+    return;
+  bgPlayerViewRef.value?.resetMediaList();
+  const list = bgPlayerViewRef.value?.initPlayData(
+    playerData,
+    index,
+    bgPlayerType.value === HomePlayType.TYPE_CELL_LIST
+      ? ESPlayerPlayMode.ES_PLAYER_PLAY_MODE_LOOP
+      : ESPlayerPlayMode.ES_PLAYER_PLAY_MODE_REPEAT,
+    [playerInterceptor],
+  );
+  clearTimeout(delayPlayTimer);
+  delayPlayTimer = setTimeout(() => {
+    bgPlayerViewRef.value.playMediaList(list);
+    bgPlayerViewRef.value.setSize(playerWidth.value, playerHeight.value);
+  }, 200);
+  if (isSetWindowChange) {
+    if (bgPlayerType.value == HomePlayType.TYPE_BG) {
+      bgPlayerViewRef.value?.setFullWindow();
+    } else {
+      bgPlayerViewRef.value?.setSmallWindow();
+    }
+  }
+};
+const playByIndex = (index) => {
+  bgPlayerViewRef.value?.playMediaItemByIndex(index);
+};
+const start = () => {
+  if (!BuildConfig.isLowEndDev || bgPlayerType.value == HomePlayType.TYPE_BG)
+    bgPlayerViewRef.value?.start(0);
+  curPlayState = PlayerState.STATE_START;
+};
+const pause = () => {
+  if (
+    (!BuildConfig.isLowEndDev || bgPlayerType.value == HomePlayType.TYPE_BG) &&
+    curPlayState === PlayerState.STATE_PLAYING
+  ) {
+    bgPlayerViewRef.value?.pause();
+  }
+  curPlayState = PlayerState.STATE_PAUSE;
+};
+const stop = () => {
+  if (!BuildConfig.isLowEndDev || bgPlayerType.value == HomePlayType.TYPE_BG) {
+    bgPlayerViewRef.value?.stop();
+  }
+  curPlayState = PlayerState.STATE_STOP;
+};
+const resume = () => {
+  if (!BuildConfig.isLowEndDev || bgPlayerType.value == HomePlayType.TYPE_BG)
+    bgPlayerViewRef.value?.resume();
+  curPlayState = PlayerState.STATE_RESUME;
+};
+const reset = () => {
+  if (!BuildConfig.isLowEndDev || bgPlayerType.value == HomePlayType.TYPE_BG)
+    bgPlayerViewRef.value?.reset();
+  curPlayState = PlayerState.STATE_RESET;
+};
+const release = () => {
+  if (!BuildConfig.isLowEndDev || bgPlayerType.value == HomePlayType.TYPE_BG)
+    bgPlayerViewRef.value?.release();
+  curPlayState = PlayerState.STATE_RELEASE;
+};
+const onPlayerPlayMedia = (mediaItem: ESMediaItem) => {
+  //4K 逻辑
+  if (bgPlayerType.value === HomePlayType.TYPE_4K) {
+    beforeSid = mediaItem.beforeSid;
+    sid = mediaItem.sid;
+    nextSid = mediaItem.nextSid;
+    change4KVisible(beforeSid, "visible");
+    change4KVisible(nextSid, "visible");
+  }
+  if (bgPlayerType.value === HomePlayType.TYPE_CELL_LIST) {
+    cellListIndex = mediaItem.index;
+    emits("setCellListIndex", cellListIndex);
+    VirtualView.call("cellPlayerListSid", "setSelectChildPosition", [
+      cellListIndex,
+      true,
+    ]);
+    if (cellListIndex > 2) {
+      const cellMode = TabContentConfig.cellListItemType;
+      const offset = cellMode === CellListItemType.TYPE_TEXT ? 58 : 80;
+      const y = 510 / 2 - offset;
+      VirtualView.call("cellPlayerListSid", "scrollToIndex", [
+        0,
+        cellListIndex,
+        false,
+        0,
+        y,
+      ]);
+    }
+  }
+};
+const onPlayerPlaying = () => {
+  clearTimeout(dismissCoverTimer);
+  //防止因用户操作过快导致视频切换后，还继续播放
+  if (
+    curPlayState === PlayerState.STATE_PAUSE ||
+    curPlayState === PlayerState.STATE_STOP
+  ) {
+    pause();
+    stop();
+    return;
+  }
+  curPlayState = PlayerState.STATE_PLAYING;
+  requestDismissCover(600);
+};
+
+const onPlayerCompleted = () => {
+  if (bgPlayerType.value === HomePlayType.TYPE_CELL_LIST) {
+    //设置背景图片
+  }
+};
+
+const cellListPlayNext = () => {
+  bgPlayerViewRef.value?.playNextMediaItem();
+};
+const onPlayerError = () => {
+  pause();
+  stop();
+};
+const change4KVisible = (sid: string, visible: string) => {
+  VirtualView.call(sid, "changeVisibility", [`${visible}`]);
+};
+const requestDismissCover = (delay = 1000) => {
+  if (bgPlayerType.value === HomePlayType.TYPE_4K) {
+    change4KVisible(sid, "invisible");
+    VirtualView.call(TabContentConfig.homeBgPlaySid, "changeAlpha", [1]);
+  }
+  if (bgPlayerType.value === HomePlayType.TYPE_CELL_LIST) {
+    VirtualView.call(TabContentConfig.homeBgPlaySid, "changeAlpha", [1]);
+    VirtualView.call("cellPlayerListBgSid", "setSrc", [""]);
+  }
+  clearTimeout(dismissCoverTimer);
+  dismissCoverTimer = setTimeout(() => {
+    bgPlayerBackgroundImgRef.value?.clearImg();
+  }, delay);
+};
+
+const destroy = () => {
+  clearPlayTimer();
+  pause();
+  stop();
+  release();
+};
+const onKeyDown = (keyEvent: ESKeyEvent): boolean => {
+  return bgPlayerViewRef.value?.onKeyDown(keyEvent);
+};
+const onKeyUp = (keyEvent: ESKeyEvent): boolean => {
+  return bgPlayerViewRef.value?.onKeyUp(keyEvent);
+};
+const onBackPressed = () => {
+  bgPlayerViewRef.value?.onBackPressed();
+};
+const changeShadow = (boo: boolean) => {
+  isShowShadow.value = boo;
+};
+defineExpose({
+  playerWindowInit,
+  initPlay,
+  play,
+  playByIndex,
+  start,
+  pause,
+  stop,
+  resume,
+  reset,
+  release,
+  setPlayState,
+  setBgImage,
+  onKeyDown,
+  onKeyUp,
+  onBackPressed,
+  changeShadow,
+  destroy,
+});
+</script>
+
+<style lang="scss" src="../../scss/bg-player.scss"></style>

package/rules/.source/hellotv/src/pages/home/components/nav-bar/bar-img-item.vue

@@ -0,0 +1,39 @@
+<template>
+  <div
+    class="bar-img-item-root-css"
+    flexStyle="${image.style}"
+    :focusable="true"
+    :clipChildren="false"
+    :focusScale="1.05"
+    eventClick
+    eventFocus
+  >
+    <img
+      class="bar-img-item-image-css"
+      flexStyle="${image.style}"
+      :duplicateParentState="true"
+      showOnState="normal"
+      src="${image.normal}"
+    />
+    <img
+      class="bar-img-item-image-css"
+      flexStyle="${image.style}"
+      :duplicateParentState="true"
+      showOnState="focused"
+      src="${image.focused}"
+    />
+    <img
+      class="bar-img-item-image-css"
+      flexStyle="${image.style}"
+      :duplicateParentState="true"
+      showOnState="selected"
+      src="${image.selected}"
+    />
+  </div>
+</template>
+
+<script lang="ts" setup name="bar-img-item">
+defineExpose({});
+</script>
+
+<style lang="scss" src="../../scss/bar-img-item.scss"></style>

package/rules/.source/hellotv/src/pages/home/components/nav-bar/bar-text-item.vue

@@ -0,0 +1,100 @@
+<template>
+  <div
+    class="bar-text-item-root-css"
+    :focusable="true"
+    autoWidth
+    :sateBackgroundPadding="[10, 10]"
+    :clipChildren="false"
+    eventFocus
+    eventClick
+  >
+    <!--    选中样式 如果高度相同可以直接在父view直接写选中背景-->
+    <div
+      class="bar-text-focus-bg"
+      :focusable="false"
+      :duplicateParentState="true"
+      showOnState="focused"
+      autoWidth
+    />
+    <!--    角标-->
+    <div
+      :duplicateParentState="true"
+      v-if="showCorner"
+      :class="[
+        'bar-text-corner-root-default',
+        {
+          'bar-text-corner-left': cornerLeft,
+          'bar-text-corner-right': cornerRight,
+        },
+      ]"
+      :focusable="false"
+    >
+      <img
+        class="bar-text-corner-img"
+        :duplicateParentState="true"
+        showOnState="normal"
+        src="${corner.normal}"
+      />
+      <img
+        class="bar-text-corner-img"
+        :duplicateParentState="true"
+        showOnState="focused"
+        src="${corner.focused}"
+      />
+      <img
+        class="bar-text-corner-img"
+        :duplicateParentState="true"
+        showOnState="selected"
+        src="${corner.selected}"
+      />
+    </div>
+    <!--    标题-->
+    <qt-text
+      class="bar-text-title-normal"
+      :duplicateParentState="true"
+      autoWidth
+      gravity="center"
+      showOnState="normal"
+      :lines="1"
+      fontSize="${titleSize}"
+      text="${text}"
+    />
+    <qt-text
+      class="bar-text-title-select-focus"
+      :duplicateParentState="true"
+      autoWidth
+      gravity="center"
+      :showOnState="['selected', 'focused']"
+      :lines="1"
+      fontSize="${titleSize}"
+      text="${text}"
+    />
+    <!--    选中下划线-->
+    <div
+      class="bar-text-select-line"
+      :duplicateParentState="true"
+      showOnState="selected"
+      :focusable="false"
+    />
+  </div>
+</template>
+
+<script lang="ts" setup name="bar-text-item">
+defineProps({
+  showCorner: {
+    type: Boolean,
+    default: false,
+  },
+  cornerLeft: {
+    type: Boolean,
+    default: false,
+  },
+  cornerRight: {
+    type: Boolean,
+    default: false,
+  },
+});
+defineExpose({});
+</script>
+
+<style lang="scss" src="../../scss/bar-text-item.scss"></style>

package/rules/.source/hellotv/src/pages/home/components/tab-content/bg-player-cell-list-item-img.vue

@@ -0,0 +1,54 @@
+<template>
+  <qt-view
+    class="bg-player-cell-list-item"
+    flexStyle="${itemStyle}"
+    name="${name}"
+    :focusable="true"
+    eventClick
+    eventFocus
+  >
+    <qt-image
+      class="bg-player-cell-list-item-img"
+      flexStyle="${itemStyle}"
+      :style="$props.imgStyle"
+      src="${cover}"
+      :focusable="false"
+    ></qt-image>
+    <qt-view
+      class="bg-player-cell-list-item-img-bg"
+      flexStyle="${itemStyle}"
+      gradientBackground="${gradientBackground}"
+      :showOnState="['normal', 'selected']"
+      :focusable="false"
+      :duplicateParentState="true"
+    ></qt-view>
+
+    <qt-view
+      style="background-color: transparent; position: absolute; z-index: 1000"
+      flexStyle="${markStyle}"
+      :showOnState="['focused', 'selected']"
+      :focusable="false"
+      :duplicateParentState="true"
+    >
+      <play-mark
+        style="width: 33px; height: 24px"
+        :markColor="'#FF0000'"
+        :gap="3"
+        :focusable="false"
+      />
+    </qt-view>
+  </qt-view>
+</template>
+
+<script setup lang="ts">
+import icPlay from "../../../../assets/home/ic_play.png";
+
+defineProps({
+  imgStyle: {
+    type: Object,
+    default: () => ({}),
+  },
+});
+</script>
+
+<style lang="scss" src="../../scss/bg-player-cell-list-item.scss"></style>

package/rules/.source/hellotv/src/pages/home/components/tab-content/bg-player-cell-list-item-text.vue

@@ -0,0 +1,67 @@
+<template>
+  <qt-view
+    class="bg-player-cell-list-item"
+    flexStyle="${itemStyle}"
+    name="${name}"
+    :focusable="true"
+    eventClick
+    eventFocus
+  >
+    <qt-view
+      style="background-color: transparent; position: absolute"
+      flexStyle="${itemStyle}"
+      gradientBackground="${gradientBackground}"
+      showOnState="focused"
+      :focusable="false"
+      :duplicateParentState="true"
+    ></qt-view>
+    <qt-text
+      class="bg-player-cell-list-item-text"
+      flexStyle="${itemStyle}"
+      :focusable="false"
+      :showOnState="['normal']"
+      text="${text}"
+      gravity="center|start"
+      :paddingRect="[20, 0, 20, 0]"
+      :fontSize="28"
+      :lines="2"
+      :ellipsizeMode="2"
+      :duplicateParentState="true"
+    ></qt-text>
+    <qt-text
+      class="bg-player-cell-list-item-text"
+      flexStyle="${itemStyle}"
+      :showOnState="['focused', 'selected']"
+      :focusable="false"
+      text="${textFocus}"
+      typeface="bold"
+      gravity="center|start"
+      :paddingRect="[20, 0, 20, 0]"
+      :fontSize="28"
+      :lines="2"
+      :ellipsizeMode="2"
+      :duplicateParentState="true"
+    ></qt-text>
+    <qt-view
+      style="
+        background-color: transparent;
+        position: absolute;
+        width: 42px;
+        height: 30px;
+        top: 30px;
+      "
+      :showOnState="['focused', 'selected']"
+      :focusable="false"
+      :duplicateParentState="true"
+    >
+      <play-mark
+        style="width: 25px; height: 20px; margin-left: 16px"
+        :markColor="'#FF0000'"
+        :gap="3"
+        :focusable="false"
+      />
+    </qt-view>
+  </qt-view>
+</template>
+
+<style lang="scss" src="../../scss/bg-player-cell-list-item.scss"></style>