@quicktvui/ai 1.0.9 → 1.1.1

package/rules/.source/hellotv/src/pages/activity/adapter/interface.ts

@@ -0,0 +1,173 @@
+import { IMediaUrl } from "../../../components/media/build-data/media-imp";
+import { LaunchParams } from "../../../tools/launch";
+/**
+ * tabContent
+ */
+export interface TabContent {
+  //板块总数
+  total?: number;
+  //二屏背景图
+  backgroundImage?: string;
+  //板块列表
+  sections: Array<Section>;
+  //自定义参数
+  customParams?: any;
+}
+
+/**
+ * 板块类型
+ */
+export enum SectionType {
+  //普通板块
+  TYPE_DEFAULT = 1,
+  //一行滚动板块
+  TYPE_LINE_SCROLL = 2,
+  //放映厅板块
+  TYPE_SWIPER_PLAY = 3,
+}
+
+/**
+ * 板块数据
+ */
+export interface Section {
+  id: string;
+  //板块类型 1：普通类型，2：一行滚动, 3:轮播播放（小 4K）
+  type: SectionType;
+  //板块标题
+  title: {
+    text?: string;
+    image?: string;
+    style?: {
+      width: number;
+      height: number;
+    };
+  };
+  floatTitle?: string;
+  subTitle?: string;
+  //是否展示板块标题
+  showTitle: boolean;
+  //板块高度样式
+  style: {
+    height: number;
+  };
+  //板块中数据列表
+  items: Array<SectionItem>;
+  //自定义参数
+  customParams?: any;
+  contentId?: string;
+  contentType?: string;
+}
+
+/**
+ * 格子类型
+ */
+export enum SectionItemType {
+  //无标题
+  TYPE_DEFAULT = 0,
+  //内标题
+  TYPE_INNER = 1,
+  //外表体
+  TYPE_OUT = 2,
+  //占位
+  TYPE_PLACE_HOLDER = 3,
+  //文字历史格子
+  TYPE_TEXT_HISTORY = 4,
+  //图片历史格子
+  TYPE_IMG_HISTORY = 5,
+  //焦点变图
+  TYPE_FOCUS_CHANGE_IMG = 6,
+  //小窗播放格子
+  TYPE_SMALL_PLAY = 7,
+  //小窗列表播放格子
+  TYPE_SMALL_LIST_PLAY = 8,
+  //轮播图片格子
+  TYPE_LOOP_IMAGE = 9,
+}
+
+/**
+ * 格子数据
+ */
+export interface SectionItem {
+  id: string;
+  //格子类型：0：无标题，1：内标题，2：外标题，3：占位，4：文字历史，5：图片历史，6：焦点变图，7：小窗播放，8：小窗列表播放
+  type: SectionItemType;
+  //X坐标
+  posX: number;
+  //Y坐标
+  posY: number;
+  //标题
+  title: string;
+  //副标题
+  subTitle?: string;
+  //封面图
+  image: string;
+  //封面图图片宽
+  width: number;
+  //封面图图片高
+  height: number;
+  //焦点图
+  imageFocus?: string;
+  //焦点背景图
+  imageFocusBackground?: string;
+  corner: Corner;
+  //背景播放内容Id
+  playBackgroundId?: string;
+  //背景播放url
+  playBackgroundUrl?: string;
+  //小窗播放、小窗列表播放数据
+  playData?: Array<PlayData>;
+  //跳转数据
+  jumpParams: LaunchParams;
+}
+
+export interface Section4KItem {
+  id: string;
+  //标题
+  title: string;
+  //副标题
+  subTitle: string;
+  //封面图
+  image: string;
+  //播放数据
+  playData: Array<PlayData>;
+  //跳转数据
+  jumpParams: LaunchParams;
+}
+
+interface Corner {
+  text: string;
+  textGradient?: Array<string>;
+  image: string;
+  imageStyle: {
+    width: number;
+    height: number;
+  };
+}
+
+/**
+ * 视频类型
+ */
+export enum PlayType {
+  //正片长视频类型
+  TYPE_LONG = 1,
+  //短视频类型
+  TYPE_SHORT = 2,
+}
+
+/**
+ * 播放内容
+ */
+export interface PlayData {
+  id: string;
+  type: PlayType;
+  //标题
+  title: string;
+  //封面图
+  cover: string;
+  //缩略图
+  thumbnail?: string;
+  //是否请求播放地址
+  isRequestUrl: boolean;
+  //播放地址
+  url?: Array<IMediaUrl>;
+}

package/rules/.source/hellotv/src/pages/activity/api/index.ts

@@ -0,0 +1,36 @@
+import { QTTab, QTTabPageData, QTWaterfallItem } from "@quicktvui/quicktvui3";
+import requestManager from "../../../tools/request";
+import { tabContentUrl, activityPlayUrl } from "./request-url";
+import { ActivityApi } from "./interface";
+import BuildConfig from "../../../config/build-config";
+import { replacePlaceholders } from "../../../tools/common";
+
+class ActivityManager implements ActivityApi {
+  getTabContent(
+    tabId: string,
+    pageNo: number,
+    limit: number,
+  ): Promise<QTTabPageData> {
+    const replacements = {
+      id: tabId,
+      packageName: BuildConfig.packageName,
+      page: pageNo,
+      limit: limit,
+    };
+    const url = replacePlaceholders(tabContentUrl, replacements);
+    return requestManager.get(url);
+  }
+
+  getHomePlayUrl(id: string, type: number): Promise<object> {
+    const replacements = {
+      id: id,
+      packageName: BuildConfig.packageName,
+      type: type,
+    };
+    const url = replacePlaceholders(activityPlayUrl, replacements);
+    return requestManager.get(url);
+  }
+}
+
+const activityManager = new ActivityManager();
+export default activityManager;

package/rules/.source/hellotv/src/pages/activity/api/interface.ts

@@ -0,0 +1,11 @@
+import { QTTabPageData } from "@quicktvui/quicktvui3";
+
+export interface ActivityApi {
+  getTabContent(
+    tabId: string,
+    pageNo: number,
+    limit: number,
+  ): Promise<QTTabPageData>;
+
+  getHomePlayUrl(id: string, type: number): Promise<object>;
+}

package/rules/.source/hellotv/src/pages/activity/api/request-url.ts

@@ -0,0 +1,10 @@
+import BuildConfig from "../../../config/build-config";
+
+//导航下内容接口
+export const tabContentUrl =
+  BuildConfig.requestBaseUrl +
+  "/home/tabs/${id}?packageName=${packageName}&page=${page}&limit=${limit}";
+//获取首页视频播放地址接口
+export const activityPlayUrl =
+  BuildConfig.requestBaseUrl +
+  "/streams/${id}?packageName=${packageName}&type=${type}";

package/rules/.source/hellotv/src/pages/activity/components/item/focus-change-img-item.vue

@@ -0,0 +1,40 @@
+<template>
+  <item-frame
+    class="focus-change-img-root-css"
+    layout="${layout}"
+    flexStyle="${style}"
+    :focusable="true"
+    :clipChildren="false"
+    eventClick
+    eventFocus
+    itemShowShimmer="${shimmer.enable}"
+    shimmerSize="${shimmer.size}"
+  >
+    <img
+      class="focus-change-img-css"
+      flexStyle="${image.style}"
+      :showOnState="['normal', 'selected']"
+      :postDelay="100"
+      :focusable="false"
+      :duplicateParentState="true"
+      :enableFocusBorder="false"
+      src="${image.normal}"
+    />
+    <img
+      class="focus-change-img-css"
+      flexStyle="${style}"
+      showOnState="focused"
+      :postDelay="100"
+      :focusable="false"
+      :duplicateParentState="true"
+      :enableFocusBorder="false"
+      src="${image.focused}"
+    />
+  </item-frame>
+</template>
+
+<script lang="ts" setup name="focus-change-img-item">
+defineExpose({});
+</script>
+
+<style lang="scss" src="../../scss/item.scss"></style>

package/rules/.source/hellotv/src/pages/activity/components/item/inner-out-title-item.vue

@@ -0,0 +1,59 @@
+<template>
+  <item-frame
+    class="inner-out-title-root-css"
+    layout="${layout}"
+    flexStyle="${style}"
+    :focusable="true"
+    :clipChildren="false"
+    name="innerItem"
+    itemShowShimmer="${shimmer.enable}"
+    shimmerSize="${shimmer.size}"
+    eventClick
+    eventFocus
+  >
+    <img
+      class="inner-out-title-img"
+      :postDelay="100"
+      :duplicateParentState="true"
+      :focusable="false"
+      :enableFocusBorder="true"
+      flexStyle="${image.style}"
+      src="${image.normal}"
+    />
+    <qt-text
+      class="inner-out-title-text"
+      flexStyle="${title.style}"
+      enablePostTask
+      :postDelay="100"
+      :duplicateParentState="true"
+      :focusable="false"
+      :textSize="28"
+      :paddingRect="[12, 16, 0, 0]"
+      :ellipsizeMode="4"
+      :lines="1"
+      gravity="left"
+      gradientBackground="${title.background}"
+      text="${title.text}"
+    />
+    <qt-text
+      showIf="${corner.enable==true}"
+      class="item-corner"
+      gradientBackground="${corner.background}"
+      autoWidth
+      typeface="bold"
+      gravity="center"
+      :focusable="false"
+      :postDelay="100"
+      :textSize="20"
+      :ellipsizeMode="2"
+      :lines="1"
+      text="${corner.text}"
+    />
+  </item-frame>
+</template>
+
+<script lang="ts" setup name="inner-out-title-item">
+defineExpose({});
+</script>
+
+<style lang="scss" src="../../scss/item.scss"></style>

package/rules/.source/hellotv/src/pages/activity/components/item/no-title-item.vue

@@ -0,0 +1,45 @@
+<template>
+  <item-frame
+    class="no-title-item-root-css"
+    layout="${layout}"
+    flexStyle="${style}"
+    :focusable="true"
+    :clipChildren="false"
+    eventClick
+    eventFocus
+    itemShowShimmer="${shimmer.enable}"
+    shimmerSize="${shimmer.size}"
+  >
+    <!-- 海报图-->
+    <img
+      class="no-title-item-img"
+      flexStyle="${image.style}"
+      :enableFocusBorder="true"
+      :duplicateParentState="true"
+      :postDelay="100"
+      :focusable="false"
+      src="${image.normal}"
+    />
+    <!-- 文字角标-->
+    <qt-text
+      showIf="${corner.enable==true}"
+      class="item-corner"
+      gradientBackground="${corner.background}"
+      autoWidth
+      typeface="bold"
+      gravity="center"
+      :focusable="false"
+      :postDelay="100"
+      :textSize="20"
+      :ellipsizeMode="2"
+      :lines="1"
+      text="${corner.text}"
+    />
+  </item-frame>
+</template>
+
+<script lang="ts" setup name="no-title-item">
+defineExpose({});
+</script>
+
+<style lang="scss" src="../../scss/item.scss"></style>

package/rules/.source/hellotv/src/pages/activity/components/item/placeholder-item.vue

@@ -0,0 +1,25 @@
+<template>
+  <div
+    class="placeholder-root-css"
+    layout="${layout}"
+    flexStyle="${style}"
+    :focusable="false"
+    :disablePlaceholder="false"
+    :enableFocusBorder="false"
+  >
+    <img
+      class="placeholder-img"
+      flexStyle="${image.style}"
+      :postDelay="100"
+      :focusable="false"
+      :enableFocusBorder="false"
+      src="${image.normal}"
+    />
+  </div>
+</template>
+
+<script lang="ts" setup name="place-holder-item">
+defineExpose({});
+</script>
+
+<style lang="scss" src="../../scss/item.scss"></style>

package/rules/.source/hellotv/src/pages/activity/index.vue

@@ -0,0 +1,219 @@
+<template>
+  <div
+    class="activity-root-css"
+    ref="activityRef"
+    :clipChildren="false"
+    :clipPadding="false"
+  >
+    <!-- 背景图 -->
+    <bg-animation
+      ref="waterfallBgRef"
+      style="position: absolute"
+      :focusable="false"
+    />
+    <!-- waterfall -->
+    <qt-tabs
+      ref="tabRef"
+      sid="homeTabsSid"
+      class="waterfall-qt-tabs-css"
+      tabNavBarClass="waterfall-tab-bar-css"
+      tabPageClass="waterfall-content-css"
+      :tabContentBlockFocusDirections="['left', 'right', 'down', 'top']"
+      :autoHandleBackKey="true"
+      :useDiff="false"
+      :customPool="{ name: 'home' }"
+      :customItemPool="{ name: 'homeItems' }"
+      :outOfDateTime="5 * 60 * 1000"
+      :qtTabSectionEnable="qtTabSectionEnable"
+      @onTabEvent="onTabEvent"
+      @onTabPageItemClick="onTabPageItemClick"
+      @onTabPageItemFocused="onTabPageItemFocused"
+      @onTabPageLoadData="onTabPageLoadData"
+      @onTabMoveToTopStart="onTabMoveToTopStart"
+      @onTabMoveToBottomEnd="onTabMoveToBottomEnd"
+    >
+      <template v-slot:waterfall-shared-item>
+        <!-- 带边框无标题格子-->
+        <no-title-item :type="TabContentItemType.TYPE_ITEM_SECTION_NO_TITLE" />
+        <!-- 带标题格子(图片上/图片下)-->
+        <inner-out-title-item
+          :type="TabContentItemType.TYPE_ITEM_SECTION_HAS_TITLE"
+        />
+        <!-- 占位格子-->
+        <placeholder-item
+          :type="TabContentItemType.TYPE_ITEM_SECTION_PLACEHOLDER"
+        />
+        <!-- 焦点变图格子-->
+        <focus-change-img-item
+          :type="TabContentItemType.TYPE_ITEM_SECTION_FOCUS_CHANGE_IMG"
+        />
+      </template>
+    </qt-tabs>
+  </div>
+</template>
+
+<script setup lang="ts" name="index">
+import { ref } from "vue";
+import { useESRouter } from "@extscreen/es3-router";
+import { ESKeyEvent, useESToast } from "@extscreen/es3-core";
+import {
+  QTITab,
+  QTTabPageData,
+  QTTabPageState,
+  QTWaterfallItem,
+} from "@quicktvui/quicktvui3";
+import ActivityManager from "./api/index";
+import { buildTab, buildTabContentAdapter } from "./adapter/index";
+import { TabContentConfig, TabContentItemType } from "./adapter/config";
+import launch from "../../tools/launch";
+import BgAnimation from "../../components/bg-animation.vue";
+import NoTitleItem from "./components/item/no-title-item.vue";
+import InnerOutTitleItem from "./components/item/inner-out-title-item.vue";
+import PlaceholderItem from "./components/item/placeholder-item.vue";
+import FocusChangeImgItem from "./components/item/focus-change-img-item.vue";
+
+const toast = useESToast();
+const router = useESRouter();
+const activityRef = ref();
+const waterfallBgRef = ref();
+const tabRef = ref<QTITab>();
+let curBg = "";
+let bgTimer: any = -1;
+//控制qt-tabs  section是否初始化
+const qtTabSectionEnable = {
+  tabEnable: true,
+  flexSectionEnable: true,
+  flexSection: {
+    qtPosterEnable: false,
+    qtPluginItemEnable: false,
+    cardItemEnable: false,
+  },
+  listSectionEnable: true,
+  listSection: {
+    qtPosterEnable: true,
+    cardItemEnable: true,
+  },
+  loadingSectionEnable: true,
+  endSectionEnable: true,
+  blankSectionEnable: false,
+  cardSectionEnable: false,
+  pluginSectionEnable: false,
+  vueSectionEnable: false,
+  //共享功能waterfall-shared-item使用需设置 itemStoreEnable 为true
+  itemStoreEnable: true,
+};
+
+const onESCreate = (params) => {
+  tabRef.value?.initTab(buildTab());
+};
+
+const onTabPageLoadData = (pageIndex: number, pageNo: number) => {
+  let tabId = "35d2f5pg";
+  ActivityManager.getTabContent(
+    tabId,
+    pageNo,
+    TabContentConfig.sectionLoadLimit,
+  ).then(
+    async (tabContent: any) => {
+      const tabPage: QTTabPageData = await buildTabContentAdapter(
+        tabContent,
+        pageNo,
+        tabId,
+        pageIndex,
+      );
+      if (tabPage.data.length > 0) {
+        if (pageNo <= 1) {
+          tabRef.value?.setPageData(pageIndex, tabPage);
+        } else {
+          tabRef.value?.addPageData(pageIndex, tabPage, 0);
+        }
+      }
+      if (tabPage.isLoadPageEnd || tabPage.data.length === 0) {
+        tabRef.value?.setPageState(
+          pageIndex,
+          QTTabPageState.QT_TAB_PAGE_STATE_COMPLETE,
+        );
+      }
+    },
+    () => {
+      toast.showToast("加载数据失败，稍后重试！");
+    },
+  );
+};
+const onTabPageItemClick = (
+  pageIndex: number,
+  sectionIndex: number,
+  itemIndex: number,
+  item: QTWaterfallItem,
+  e,
+) => {
+  launch.launch(item.jumpParams);
+};
+const onTabEvent = (tabIndex: number, eventName: string, params: any) => {
+  if (eventName === "onPageBringToFront") {
+    let sectionData = tabRef.value?.getPageSection(0, 0);
+    if (
+      sectionData &&
+      sectionData.itemList &&
+      sectionData.itemList.length > 0 &&
+      sectionData.itemList[0]?.imageFocusBackground
+    ) {
+      const firstBgUrl = sectionData.itemList[0]?.imageFocusBackground;
+      setWTabBg(firstBgUrl);
+    }
+  }
+};
+//吸顶开始
+const onTabMoveToTopStart = () => {};
+//恢复吸顶结束
+const onTabMoveToBottomEnd = () => {
+  setWTabBg(curBg);
+};
+//设置背景图
+const setWTabBg = (bg: string, isLoad: boolean = false) => {
+  clearTimeout(bgTimer);
+  if (curBg == bg && !isLoad) return;
+  bgTimer = setTimeout(() => {
+    if (curBg == bg) return;
+    curBg = bg;
+    if (bg) {
+      waterfallBgRef.value?.setImg(bg);
+    } else {
+      waterfallBgRef.value?.clearImg();
+    }
+  }, 400);
+};
+
+const onTabPageItemFocused = (
+  tabPageIndex: number,
+  sectionIndex: number,
+  sectionItemIndex: number,
+  isFocused: boolean,
+  item: QTWaterfallItem,
+) => {
+  if (sectionIndex === 0 && item.imageFocusBackground) {
+    setWTabBg(item.imageFocusBackground);
+  }
+};
+const onESPause = () => {};
+const onESStop = () => {};
+const onESResume = () => {};
+const onESDestroy = () => {};
+const onKeyDown = (keyEvent: ESKeyEvent) => {};
+const onKeyUp = (keyEvent: ESKeyEvent) => {};
+const onBackPressed = () => {
+  router.back();
+};
+defineExpose({
+  onESCreate,
+  onESPause,
+  onESStop,
+  onESResume,
+  onESDestroy,
+  onKeyDown,
+  onKeyUp,
+  onBackPressed,
+});
+</script>
+
+<style lang="scss" src="./scss/index.scss"></style>

package/rules/.source/hellotv/src/pages/activity/scss/index.scss

@@ -0,0 +1,46 @@
+$home-width:1920px;
+$home-height:1080px;
+
+.activity-root-css{
+  width: $home-width;
+  height: $home-height;
+  background-color: $theme-bg-color;
+}
+
+$nav-bar-margin-top: 114px;
+%full-screen {
+  width: 1920px;
+  height: 1080px;
+}
+
+.waterfall-tabs-root-css {
+  @extend %full-screen;
+  background-color: red;
+}
+
+.waterfall-tabs-bg-player{
+  position: absolute;
+  background-color: transparent;
+}
+
+.waterfall-qt-tabs-css {
+  @extend %full-screen;
+  position: absolute;
+  background-color: transparent;
+}
+
+.waterfall-tab-bar-css {
+  width: 1920px;
+  height: 80px;
+  background-color: transparent;
+  margin-top: $nav-bar-margin-top;
+  z-index: 100;
+  clip-children: false;
+}
+
+.waterfall-content-css {
+  @extend %full-screen;
+  position: absolute;
+  background-color: transparent;
+  clip-children: false;
+}