@quicktvui/ai 1.0.8 → 1.1.0

package/rules/.source/hellotv/src/pages/detail/components/recommend-item.vue

@@ -0,0 +1,167 @@
+<template>
+  <qt-view
+    class="recommend-item-root"
+    flexStyle="${style}"
+    layout="${layout}"
+    name="detail-recommend-item"
+    :focusable="true"
+    :focusScale="ThemeConfig.placeHolderFocusScale"
+    eventFocus
+    eventClick
+  >
+    <!-- 海报图 -->
+    <qt-view
+      class="recommend-item-img"
+      :focusable="false"
+      :enableFocusBorder="true"
+      duplicateParentState
+    >
+      <qt-image
+        class="recommend-item-img"
+        flexStyle="${image.style}"
+        src="${image.src}"
+        :focusable="false"
+        :postDelay="300"
+      />
+    </qt-view>
+    <!-- 角标 -->
+    <img
+      class="recommend-item-corner-img"
+      :postDelay="300"
+      flexStyle="${corner.style}"
+      src="${recommend-item}"
+      :focusable="false"
+    />
+    <div
+      class="recommend-item-corner-text-box"
+      :focusable="false"
+      showIf="${corner.enable==true}"
+    >
+      <qt-text
+        class="recommend-item-corner-text"
+        :focusable="false"
+        :textSize="20"
+        :ellipsizeMode="2"
+        :lines="1"
+        typeface="bold"
+        gravity="center"
+        :postDelay="100"
+        gradientBackground="${corner.background}"
+        autoWidth
+        text="${corner.text}"
+      />
+    </div>
+    <!-- 评分 -->
+    <qt-view
+      class="recommend-item-score"
+      :focusable="false"
+      :gradientBackground="{
+        colors: ['#00000000', '#E5000000'],
+        cornerRadii4: [0, 0, 16, 16],
+        orientation: 0,
+      }"
+    >
+      <qt-text
+        class="recommend-item-score-text"
+        :fontSize="24"
+        :paddingRect="[15, 0, 0, 6]"
+        text="${score}"
+        :focusable="false"
+      />
+    </qt-view>
+    <!-- 标题 -->
+    <qt-text
+      class="recommend-item-title-text"
+      :fontSize="30"
+      :ellipsizeMode="2"
+      :showOnState="['normal', 'selected']"
+      :lines="1"
+      :duplicateParentState="true"
+      :paddingRect="[12, 14, 12, 0]"
+      text="${title.text}"
+      :focusable="false"
+      :horizontalFadingEdgeEnabled="true"
+    />
+    <qt-text
+      class="recommend-item-title-text"
+      :fontSize="30"
+      :ellipsizeMode="3"
+      showOnState="focused"
+      typeface="bold"
+      :lines="1"
+      :duplicateParentState="true"
+      :paddingRect="[12, 14, 12, 0]"
+      text="${title.text}"
+      :focusable="false"
+      :horizontalFadingEdgeEnabled="true"
+    />
+  </qt-view>
+</template>
+
+<script setup lang="ts" name="RecommendItem">
+import ThemeConfig from "../../../config/theme-config";
+</script>
+
+<style lang="scss" scoped>
+.recommend-item-root {
+  background-color: transparent;
+  .recommend-item-img {
+    border-radius: $theme-img-border;
+    focus-border-color: $theme-focus-border-color;
+    focus-border-style: solid;
+    z-index: 1;
+    background-color: rgba(255, 255, 255, 0.1);
+  }
+  .recommend-item-corner-img {
+    position: absolute;
+    z-index: 1000;
+    top: 6px;
+    right: 6px;
+  }
+  .recommend-item-corner-text-box {
+    width: 260px;
+    height: 36px;
+    background-color: transparent;
+    position: absolute;
+    left: 0;
+    right: 0.1;
+    flex-direction: row-reverse;
+    z-index: 99999;
+    .recommend-item-corner-text {
+      padding: 4px 8px;
+      margin: 4px;
+      z-index: 1000;
+      height: 36px;
+      color: #ffffff;
+    }
+  }
+  .recommend-item-score {
+    background-color: transparent;
+    z-index: 1000;
+    height: 65px;
+    width: 260px;
+    position: absolute;
+    left: 0;
+    bottom: 54px;
+    .recommend-item-score-text {
+      width: 260px;
+      height: 32px;
+      top: 28px;
+      color: #fc5e1b;
+      z-index: 1000;
+      background-color: transparent;
+      position: absolute;
+    }
+  }
+  .recommend-item-title-text {
+    position: absolute;
+    width: 260px;
+    height: 54px;
+    top: 368px;
+    z-index: 110;
+    background-color: transparent;
+    color: rgba(255, 255, 255, 0.5);
+    focus-color: rgba(255, 255, 255, 1);
+  }
+}
+</style>

package/rules/.source/hellotv/src/pages/detail/components/section/basic-section.vue

@@ -0,0 +1,218 @@
+<template>
+  <qt-column
+    class="basic-section-root"
+    :style="{ height: sectionHeight }"
+    :scrollOverride="{ down: 0, up: -1080 }"
+    :clipChildren="false"
+    :clipPadding="false"
+  >
+    <qt-row class="basic-section-top">
+      <!-- 播放器占位 -->
+      <player-placeholder
+        ref="playerPlaceholderRef"
+        @onPlaceholderFocus="onPlayerPlaceholderFocus"
+        @onPlaceholderClick="onPlayerPlaceholderClick"
+      >
+      </player-placeholder>
+      <qt-column class="basic-section-top-info">
+        <!-- 简介-->
+        <media-introduction
+          :blockFocusDirections="['up']"
+          ref="mediaIntroductionRef"
+          @onIntroductionFocus="onIntroductionFocus"
+        >
+        </media-introduction>
+        <!-- 资源位 -->
+        <qt-view
+          class="resource-placeholder"
+          :focusable="true"
+          v-if="isShowResourcePlaceholder"
+          :focusScale="ThemeConfig.placeHolderFocusScale"
+          @click="onMediaResourceClicked"
+        >
+          <qt-image
+            class="resource-placeholder-img"
+            :src="resourcePlaceholderUrl"
+          />
+        </qt-view>
+        <!-- 按钮菜单 -->
+        <button-menu ref="menuRef" :isCollected="isCollected"></button-menu>
+      </qt-column>
+    </qt-row>
+    <!-- 选集 -->
+    <media-series
+      ref="mediaSeiresRef"
+      nextFocusDownSID="releatedFirstId"
+      :blockFocusDirections="['left', 'right']"
+      @onMediaSeriesItemLoad="onMediaSeriesItemLoad"
+      @onMediaSeriesItemFocus="onMediaSeriesItemFocus"
+      @onMediaSeriesItemClick="onMediaSeriesItemClick"
+      @onMediaSeriesGroupItemFocus="onMediaSeriesGroupItemFocus"
+    >
+    </media-series>
+  </qt-column>
+</template>
+
+<script setup lang="ts" name="BasicSection">
+import { ref } from "vue";
+import { useESRuntime } from "@extscreen/es3-core";
+import { QTMediaSeries } from "@quicktvui/quicktvui3";
+import { IMedia, IMediaSeriesType, IMediaItem } from "../../adapter/interface";
+import MediaIntroduction from "./item/media-introduction.vue";
+import PlayerPlaceholder from "./item/player-placeholder.vue";
+import ButtonMenu from "./item/button-menu.vue";
+import MediaSeries from "./item/media-series.vue";
+import detailManager from "../../api/index";
+import ThemeConfig from "../../../../config/theme-config";
+import config from "./config";
+const emits = defineEmits([
+  "onIntroductionFocus",
+  "onMediaSeriesItemLoad",
+  "onMediaSeriesItemFocus",
+  "onMediaSeriesItemClick",
+  "onMediaSeriesGroupItemFocus",
+  "onPlayerPlaceholderFocus",
+  "onPlayerPlaceholderClick",
+]);
+const runtime = useESRuntime();
+// 简介
+let sectionHeight = ref<number>(896);
+const onIntroductionFocus = (focused: boolean) =>
+  emits("onIntroductionFocus", focused);
+// 资源位
+const mediaIntroductionRef = ref();
+const isShowResourcePlaceholder = config.showResourcePlaceholder;
+const resourcePlaceholderUrl =
+  "http://qcloudimg.moss.huan.tv/project/lexue_education/lexue/2023/08/29/ed22d94f6a674b9c99cbda74f0db5fd1.png";
+const onMediaResourceClicked = () => {};
+//按钮菜单
+const menuRef = ref();
+const isCollected = ref(false);
+//播放器占位
+const playerPlaceholderRef = ref();
+const onPlayerPlaceholderFocus = (focused: boolean) => {
+  emits("onPlayerPlaceholderFocus", focused);
+};
+const onPlayerPlaceholderClick = () => {
+  emits("onPlayerPlaceholderClick");
+};
+//选集
+const mediaSeiresRef = ref();
+const onMediaSeriesItemLoad = (page: number, data: Array<IMediaItem>) => {
+  emits("onMediaSeriesItemLoad", page, data);
+};
+const onMediaSeriesItemFocus = (position: number) => {
+  emits("onMediaSeriesItemFocus", position);
+};
+const onMediaSeriesItemClick = (position: number, data: QTMediaSeries) => {
+  emits("onMediaSeriesItemClick", position, data);
+};
+const onMediaSeriesGroupItemFocus = (position: number) => {
+  emits("onMediaSeriesGroupItemFocus", position);
+};
+//**************************初始化入口**************************
+const init = async (media: IMedia) => {
+  if (media.mediaSeriesType > -1 && media.episodes > 1) {
+    switch (media.mediaSeriesType) {
+      case IMediaSeriesType.MEDIA_ITEM_LIST_TYPE_NUMBER: //数字
+        sectionHeight.value = 815;
+        break;
+      case IMediaSeriesType.MEDIA_ITEM_LIST_TYPE_LEFT_RIGHT: //左图右文
+        sectionHeight.value = 896;
+        break;
+      case IMediaSeriesType.MEDIA_ITEM_LIST_TYPE_TEXT: //文本
+        sectionHeight.value = 835;
+        break;
+      case IMediaSeriesType.MEDIA_ITEM_LIST_TYPE_TOP_DOWN: //上图下文
+        sectionHeight.value = 945;
+        break;
+    }
+  } else {
+    sectionHeight.value = 550;
+  }
+  let devicedId = runtime.getRuntimeDeviceId() ?? "";
+  await detailManager
+    .getRecordData(media.id, devicedId, "favorite")
+    .then((res) => {
+      isCollected.value = res && res.id ? true : false;
+    });
+  mediaIntroductionRef.value?.init(media);
+  playerPlaceholderRef.value?.init(media);
+  menuRef.value?.init(media);
+  mediaSeiresRef.value?.init(media);
+};
+const showPlayerPlaceholderImg = (value: boolean) => {
+  playerPlaceholderRef.value?.showPlayerPlaceholderImg(value);
+};
+const scrollMediaSeriesTo = (position: number): void => {
+  mediaSeiresRef.value?.scrollTo(position);
+};
+const setMediaSeriesSelected = (position: number): void => {
+  mediaSeiresRef.value?.setSelected(position);
+};
+const requestPlayerPlaceholderFocus = (): void => {
+  playerPlaceholderRef.value?.requestFocus();
+};
+const requestFullButtonFocus = (): void => {
+  menuRef.value?.requestFullButtonFocus();
+};
+const release = (): void => {
+  mediaSeiresRef.value?.release();
+};
+const setAutofocus = (enable: boolean) => {
+  playerPlaceholderRef.value?.setAutofocus(enable);
+};
+const requestCurrentMediaFocus = () => {
+  mediaSeiresRef.value?.requestFocus(
+    mediaSeiresRef.value?.getSelectedPosition() ?? -1,
+  );
+};
+const getMediaSelectedPosition = (): number => {
+  return mediaSeiresRef.value?.getSelectedPosition() ?? -1;
+};
+
+defineExpose({
+  init,
+  showPlayerPlaceholderImg,
+  scrollMediaSeriesTo,
+  setMediaSeriesSelected,
+  requestPlayerPlaceholderFocus,
+  requestFullButtonFocus,
+  release,
+  setAutofocus,
+  requestCurrentMediaFocus,
+  getMediaSelectedPosition,
+});
+</script>
+
+<style lang="scss" scoped>
+.basic-section-root {
+  width: 1920px;
+  background-color: transparent;
+  .basic-section-top {
+    width: 1920px;
+    height: 504px;
+    margin-top: 15px;
+    background-color: transparent;
+    .basic-section-top-info {
+      width: 810px;
+      height: 500px;
+      background-color: transparent;
+      margin-left: 60px;
+      .resource-placeholder {
+        width: 790px;
+        height: 95px;
+        background-color: transparent;
+        border-radius: 10px;
+        margin-left: 20px;
+        margin-top: 12px;
+        .resource-placeholder-img {
+          width: 790px;
+          height: 95px;
+          border-radius: 10px;
+        }
+      }
+    }
+  }
+}
+</style>

package/rules/.source/hellotv/src/pages/detail/components/section/config.ts

@@ -0,0 +1,6 @@
+export default {
+  // 菜单大小, default、small
+  buttonMenuSize: "default",
+  // 是否展示资源位
+  showResourcePlaceholder: false,
+};

package/rules/.source/hellotv/src/pages/detail/components/section/header-section.vue

@@ -0,0 +1,15 @@
+<template>
+  <qt-vue-section>
+    <top-view :logoRight="true" @focus="onFocus"></top-view>
+  </qt-vue-section>
+</template>
+
+<script setup lang="ts" name="HeaderSection">
+import TopView from "../../../../components/top-view.vue";
+const emits = defineEmits(["onTopButtonFocus"]);
+const onFocus = (e) => {
+  emits("onTopButtonFocus", e);
+};
+</script>
+
+<style lang="scss" scoped></style>

package/rules/.source/hellotv/src/pages/detail/components/section/item/button-menu.vue

@@ -0,0 +1,259 @@
+<template>
+  <qt-view class="button-menu-root" :style="bmStyle">
+    <qt-list-view
+      class="menu-list"
+      :style="bmlStyle"
+      ref="listRef"
+      horizontal
+      padding="0,0,0,0"
+      @item-click="onItemClick"
+      :enableSelectOnFocus="false"
+    >
+      <qt-view
+        class="menu-list-item"
+        :style="bmliStyle"
+        flexStyle="${style}"
+        :type="1"
+        :focusable="true"
+        :focusScale="ThemeConfig.placeHolderFocusScale"
+        eventFocus
+        eventClick
+      >
+        <div
+          showOnState="focused"
+          flexStyle="${style}"
+          class="menu-list-item-bg"
+          duplicateParentState
+          gradientBackground="${gradientBackground}"
+        />
+        <qt-view
+          duplicateParentState
+          class="menu-list-item-img"
+          flexStyle="${iconStyle}"
+        >
+          <img
+            src="${focusIcon}"
+            duplicateParentState
+            showOnState="focused"
+            flexStyle="${iconStyle}"
+            :focusable="false"
+          />
+          <img
+            src="${icon}"
+            duplicateParentState
+            :showOnState="['normal', 'selected']"
+            flexStyle="${iconStyle}"
+            :focusable="false"
+          />
+        </qt-view>
+        <div
+          duplicateParentState
+          class="menu-list-item-text-box"
+          :focusable="false"
+          :style="bmlitStyle"
+          autoWidth
+        >
+          <qt-text
+            class="menu-list-item-text"
+            autoWidth
+            text="${text}"
+            :focusable="false"
+            :showOnState="['normal', 'selected']"
+            duplicateParentState
+          />
+          <qt-text
+            class="menu-list-item-text"
+            autoWidth
+            text="${text}"
+            typeface="bold"
+            showOnState="focused"
+            :focusable="false"
+            duplicateParentState
+          />
+        </div>
+      </qt-view>
+    </qt-list-view>
+  </qt-view>
+</template>
+
+<script setup lang="ts" name="ButtonMenu">
+import { ref } from "vue";
+import { QTIListView, QTListViewItem } from "@quicktvui/quicktvui3";
+import { useESEventBus } from "@extscreen/es3-core";
+import { IMedia } from "../../../adapter/interface";
+import ThemeConfig from "../../../../../config/theme-config";
+import ic_full_normal from "../../../../../assets/detail/ic_full_normal.png";
+import ic_full_focused from "../../../../../assets/detail/ic_full_focused.png";
+import ic_collect_normal from "../../../../../assets/detail/ic_collect_normal.png";
+import ic_collect_focused from "../../../../../assets/detail/ic_collect_focused.png";
+import ic_vip_normal from "../../../../../assets/detail/ic_vip_normal.png";
+import ic_vip_focused from "../../../../../assets/detail/ic_vip_focused.png";
+import config from "../config";
+const props = defineProps({
+  isCollected: Boolean,
+});
+const eventbus = useESEventBus();
+let bmStyle =
+  config.buttonMenuSize == "default"
+    ? { height: "140px", marginTop: 50 }
+    : { height: "70px", marginTop: 20 };
+let bmlStyle =
+  config.buttonMenuSize == "default" ? { height: "140px" } : { height: "70px" };
+let bmliStyle =
+  config.buttonMenuSize == "default" ? {} : { "flex-direction": "row" };
+let bmlitStyle =
+  config.buttonMenuSize == "default"
+    ? { marginTop: 15 }
+    : { marginLeft: 10, marginTop: -5 };
+const listRef = ref<QTIListView>();
+let m: IMedia;
+let isCollect = ref(false);
+let listData: QTListViewItem[] = [];
+const init = (media: IMedia) => {
+  isCollect.value = props.isCollected;
+  m = media;
+  listData = [
+    {
+      type: 1,
+      text: "全屏",
+      decoration: { right: 30 },
+      menuType: "full",
+      gradientBackground: {
+        colors: ThemeConfig.btnGradientFocusColor,
+        orientation: 6,
+        cornerRadius: ThemeConfig.focusBorderCorner,
+      },
+      icon: "file://" + ic_full_normal,
+      focusIcon: "file://" + ic_full_focused,
+      style:
+        config.buttonMenuSize == "default"
+          ? { width: 140, height: 140 }
+          : { width: 160, height: 70 },
+      iconStyle:
+        config.buttonMenuSize == "default"
+          ? { width: 50, height: 50 }
+          : { width: 30, height: 30 },
+    },
+    {
+      type: 1,
+      menuType: "collect",
+      decoration: { right: 30 },
+      gradientBackground: {
+        colors: ThemeConfig.btnGradientFocusColor,
+        orientation: 6,
+        cornerRadius: ThemeConfig.focusBorderCorner,
+      },
+      text: isCollect.value ? "已收藏" : "收藏",
+      icon: "file://" + ic_collect_normal,
+      focusIcon: "file://" + ic_collect_focused,
+      style:
+        config.buttonMenuSize == "default"
+          ? { width: 140, height: 140 }
+          : { width: 160, height: 70 },
+      iconStyle:
+        config.buttonMenuSize == "default"
+          ? { width: 50, height: 50 }
+          : { width: 30, height: 30 },
+    },
+    {
+      type: 1,
+      text: "付费观看",
+      menuType: "vip",
+      gradientBackground: {
+        colors: ["#FFE398", "#EEB364"],
+        orientation: 6,
+        cornerRadius: ThemeConfig.focusBorderCorner,
+      },
+      icon: "file://" + ic_vip_normal,
+      focusIcon: "file://" + ic_vip_focused,
+      style:
+        config.buttonMenuSize == "default"
+          ? { width: 226, height: 140 }
+          : { width: 226, height: 70 },
+      iconStyle:
+        config.buttonMenuSize == "default"
+          ? { width: 50, height: 50 }
+          : { width: 30, height: 30 },
+    },
+  ];
+  if (media.vipType == "0") listData = listData.splice(0, 2);
+  listRef.value?.setListData(listData);
+};
+const onItemClick = (e) => {
+  if (e.position == 0) eventbus.emit("onMenuFullButtonClick");
+  if (e.position == 2) eventbus.emit("onMenuVIPButtonClick");
+  if (e.position == 1) {
+    isCollect.value = !isCollect.value;
+    let item: QTListViewItem = {
+      type: 1,
+      menuType: "collect",
+      text: isCollect.value ? "已收藏" : "收藏",
+      decoration: { right: 30 },
+      gradientBackground: {
+        colors: ThemeConfig.btnGradientFocusColor,
+        orientation: 6,
+        cornerRadius: ThemeConfig.focusBorderCorner,
+      },
+      icon: "file://" + ic_collect_normal,
+      focusIcon: "file://" + ic_collect_focused,
+      style:
+        config.buttonMenuSize == "default"
+          ? { width: 140, height: 140 }
+          : { width: 160, height: 70 },
+      iconStyle:
+        config.buttonMenuSize == "default"
+          ? { width: 50, height: 50 }
+          : { width: 30, height: 30 },
+    };
+    listRef.value?.updateItemRange(1, 1, [item]);
+    eventbus.emit("onMenuFavouriteButtonClick", isCollect.value);
+  }
+};
+defineExpose({
+  init,
+});
+</script>
+
+<style lang="scss" scoped>
+.button-menu-root {
+  width: 790px;
+  background-color: transparent;
+  margin-left: 20px;
+  .menu-list {
+    width: 790px;
+    background-color: transparent;
+    .menu-list-item {
+      border-radius: 16px;
+      background-color: $theme-btn-normal-color;
+      align-items: center;
+      justify-content: center;
+      .menu-list-item-bg {
+        position: absolute;
+        background-color: transparent;
+      }
+      .menu-list-item-img {
+        background-color: transparent;
+        img {
+          background-color: transparent;
+          position: absolute;
+          top: 0;
+          left: 0;
+        }
+      }
+      .menu-list-item-text-box {
+        height: 34px;
+        position: relative;
+        background-color: transparent;
+        .menu-list-item-text {
+          height: 34px;
+          font-size: 28px;
+          color: $theme-text-normal-color;
+          focus-color: $theme-text-focus-color;
+          font-size: 28px;
+          position: absolute;
+        }
+      }
+    }
+  }
+}
+</style>