@quicktvui/ai 1.0.9 → 1.1.0

package/rules/.source/hellotv/src/pages/home/adapter/tab-content/tab-content-config.ts

@@ -0,0 +1,30 @@
+import { CellListItemType } from "../media/home-media-imp";
+
+export default {
+  //首页播放器sid
+  homeBgPlaySid: "bg-player",
+  //4k section item 名称
+  world4kSectionItemName: "home-4k-list-section-item",
+  worldSmall4kSectionItemName: "home-small-4k-list-section-item",
+  shortVideoSectionItemName: "short-video-section-item",
+  cellListSectionItemName: "cell-list-section-item",
+  cellListItemType: CellListItemType.TYPE_TEXT,
+  //首页内容请求数量
+  sectionLoadLimit: 10,
+  //板块间距
+  sectionGap: 40,
+  //板块标题字体大小
+  sectionTitleFontSize: 42,
+  //板块标题默认高度,后台如果是图片标题，高度从后台获取
+  sectionTitleHeightDefault: 60,
+  //格子和板块标题，格子之间间距
+  sectionItemGap: 40,
+  //格子标题高度
+  sectionItemHeight: 60,
+  //整体距离左侧距离
+  decorationLeftGap: 80,
+  //首个板块距离顶部距离
+  firstSectionTop: 219,
+  //单 tab 时，首个section 距离顶部的偏移量
+  firstSectionOffsetY: -80,
+};

package/rules/.source/hellotv/src/pages/home/adapter/tab-content/tab-content-imp.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/home/adapter/tab-content/tab-content-item-type.ts

@@ -0,0 +1,17 @@
+export default {
+  TYPE_ITEM_SECTION_NO_TITLE: 0, //带边框无标题格子
+  TYPE_ITEM_SECTION_HAS_TITLE: 1, //带标题格子(上方/下方)
+  TYPE_ITEM_SECTION_PLACEHOLDER: 3, //占位格子
+  TYPE_ITEM_HISTORY_TEXT: 4, //历史格子-文字
+  TYPE_ITEM_HISTORY_IMG: 5, //历史格子-图片
+  TYPE_ITEM_SECTION_FOCUS_CHANGE_IMG: 6, //焦点变图格子
+  TYPE_ITEM_SECTION_CELL_PLAYER: 7, //小窗播放
+  TYPE_ITEM_SECTION_CELL_PLAYER_LIST: 8, //小窗列表播放
+  TYPE_ITEM_SECTION_LOOP_IMG: 9, //轮播图片格子
+  TYPE_WATERFALL_SECTION_4K: 101, //4K section
+  TYPE_WATERFALL_SECTION_4K_ITEM: 10, //4K item格子
+  TYPE_WATERFALL_SECTION_SMALL_4K: 102, //放映厅 小 4K section
+  TYPE_WATERFALL_SECTION_SMALL_4K_ITEM: 11, //放映厅 小 4K item格子
+  TYPE_WATERFALL_SECTION_SHORT_SCREEN: 103, //短视频全屏背景播放
+  TYPE_WATERFALL_SECTION_SHORT_SCREEN_ITEM: 12, //短视频 item格子
+};

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

@@ -0,0 +1,157 @@
+import { QTTab, QTTabPageData, QTWaterfallItem } from "@quicktvui/quicktvui3";
+import barsDataManager from "../adapter/tab-bar/tab-bar-adapter";
+import {
+  build4KSectionData,
+  buildShortVideoSectionData,
+  buildSmall4KSectionData,
+} from "../adapter/tab-content/tab-content-adapter";
+import requestManager from "../../../tools/request";
+import { Section4KItem } from "../adapter/tab-content/tab-content-imp";
+import TabContentItemType from "../adapter/tab-content/tab-content-item-type";
+import {
+  home4KUrl,
+  homePlayUrl,
+  homeResources,
+  homeRetention,
+  tabContentUrl,
+  tabListUrl,
+} from "./request-url";
+import { HomeApi } from "./interface";
+import BuildConfig from "../../../config/build-config";
+import { replacePlaceholders } from "../../../tools/common";
+import { Records } from "../../history/api/interface";
+import { historyRecordsUrl } from "../../history/api/request-url";
+
+class HomeManager implements HomeApi {
+  /**
+   * 获取导航数据
+   *
+   */
+  getTabList(): Promise<QTTab> {
+    const url = tabListUrl + BuildConfig.packageName;
+    return requestManager.get(url);
+  }
+
+  /**
+   * 获取导航对应内容
+   * @param tabId
+   * @param pageNo
+   * @param limit
+   */
+  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(homePlayUrl, replacements);
+    return requestManager.get(url);
+  }
+
+  getTabBg(tabId): string | undefined {
+    return barsDataManager.barsBgUrls.get(tabId);
+  }
+
+  async get4KSection(
+    content4kId: string,
+    size: number,
+    type: number,
+  ): Promise<Array<QTWaterfallItem>> {
+    const replacements = {
+      id: content4kId,
+      packageName: BuildConfig.packageName,
+    };
+    const url = replacePlaceholders(home4KUrl, replacements);
+    return requestManager.get(url).then(
+      (res: Array<Section4KItem>) => {
+        let dealRes = res;
+        if (res && res.length > size) {
+          dealRes = res.slice(0, size);
+        }
+        if (type === TabContentItemType.TYPE_WATERFALL_SECTION_SMALL_4K) {
+          return buildSmall4KSectionData(dealRes);
+        }
+        return build4KSectionData(dealRes);
+      },
+      () => {
+        if (type === TabContentItemType.TYPE_WATERFALL_SECTION_SMALL_4K) {
+          return buildSmall4KSectionData([]);
+        }
+        return build4KSectionData([]);
+      },
+    );
+  }
+
+  getHomeResource(): Promise<object> {
+    const url = homeResources + BuildConfig.packageName;
+    return requestManager.get(url);
+  }
+
+  getHomeRetention(): Promise<any> {
+    const url = homeRetention + BuildConfig.packageName;
+    return requestManager.get(url);
+  }
+
+  getShortVideoSection(
+    shortVideoId: string,
+    type: number,
+    pageNo: number,
+    pageSize: number,
+  ): Promise<Array<QTWaterfallItem>> {
+    const replacements = {
+      id: shortVideoId,
+      packageName: BuildConfig.packageName,
+    };
+    const url = replacePlaceholders(home4KUrl, replacements);
+    return requestManager.get(url).then(
+      (res: Array<Section4KItem>) => {
+        if (type === TabContentItemType.TYPE_WATERFALL_SECTION_SHORT_SCREEN) {
+          return buildShortVideoSectionData(res);
+        }
+        return buildShortVideoSectionData([]);
+      },
+      () => {
+        if (type === TabContentItemType.TYPE_WATERFALL_SECTION_SHORT_SCREEN) {
+          return buildShortVideoSectionData([]);
+        }
+        return buildShortVideoSectionData([]);
+      },
+    );
+  }
+
+  // 获取历史/收藏列表
+  getRecords(
+    deviceId: string,
+    type: "history" | "favorite",
+    page?: number,
+    limit?: number,
+  ): Promise<Records> {
+    return requestManager.get(
+      replacePlaceholders(historyRecordsUrl, {
+        deviceId,
+        type,
+        page,
+        limit,
+        sort: "desc",
+      }),
+    );
+  }
+}
+
+const homeManager = new HomeManager();
+export default homeManager;

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

@@ -0,0 +1,56 @@
+import { QTTab, QTTabPageData, QTWaterfallItem } from "@quicktvui/quicktvui3";
+
+export interface HomeApi {
+  /**
+   * 获取瀑布流Tab数据
+   */
+  getTabList(): Promise<QTTab>;
+
+  /**
+   * 获取Tab 背景
+   * @param tabId
+   */
+  getTabBg(tabId): string | undefined;
+
+  /**
+   * 获取首页瀑布流指定Tab对应内容
+   * @param tabId tab ID
+   * @param pageNo 分页值
+   * @param pageSize 每页请求个数
+   */
+  getTabContent(
+    tabId: string,
+    pageNo: number,
+    limit: number,
+  ): Promise<QTTabPageData>;
+
+  /**
+   * 获取首页背景播放请求地址
+   * @param id
+   * @param type 1 长视频、2 短视频
+   */
+  getHomePlayUrl(id: string, type: number): Promise<object>;
+
+  /**
+   * 获取 4K 世界数据
+   * @param content4kId
+   * @param size
+   * @param type WATERFALL_SECTION type
+   */
+  get4KSection(
+    content4kId: string,
+    size: number,
+    type: number,
+  ): Promise<Array<QTWaterfallItem>>;
+
+  getShortVideoSection(
+    shortVideoId: string,
+    type: number,
+    pageNo: number,
+    pageSize: number,
+  ): Promise<Array<QTWaterfallItem>>;
+
+  getHomeResource(): Promise<object>;
+
+  getHomeRetention(): Promise<any>;
+}

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

@@ -0,0 +1,22 @@
+import BuildConfig from "../../../config/build-config";
+
+//导航数据接口
+export const tabListUrl =
+  BuildConfig.requestBaseUrl + "/home/tabs?packageName="; //tab
+//导航下内容接口
+export const tabContentUrl =
+  BuildConfig.requestBaseUrl +
+  "/home/tabs/${id}?packageName=${packageName}&page=${page}&limit=${limit}";
+//获取首页视频播放地址接口
+export const homePlayUrl =
+  BuildConfig.requestBaseUrl +
+  "/streams/${id}?packageName=${packageName}&type=${type}";
+//获取 4K世界 数据
+export const home4KUrl =
+  BuildConfig.requestBaseUrl + "/home/tabs/4k/${id}?packageName=${packageName}";
+//获取首页推荐位
+export const homeResources =
+  BuildConfig.requestBaseUrl + "/resources?packageName=";
+//获取首页退出挽留
+export const homeRetention =
+  BuildConfig.requestBaseUrl + "/retention?packageName=";

package/rules/.source/hellotv/src/pages/home/components/exit-dialog.vue

@@ -0,0 +1,148 @@
+<template>
+  <qt-view class="exit-dialog-root-css" :clipChildren="false">
+    <!--    头部信息-->
+    <qt-view
+      class="exit-dialog-content-top"
+      :gradientBackground="{
+        colors: ['#142A38', '#402E3C'],
+        orientation: 6,
+        cornerRadii4: [42, 42, 0, 0],
+      }"
+    >
+      <img class="exit-dialog-content-top-icon" :src="ic_exit_header" />
+      <span class="exit-dialog-content-top-tip"
+        >别走别走，这些精彩内容别错过～</span
+      >
+      <qt-view class="exit-dialog-content-top-corner">
+        <img class="img-corner" :src="ic_exit_corner" />
+      </qt-view>
+    </qt-view>
+    <!-- 挽留内容-->
+    <qt-view class="exit-dialog-content-bottom" :clipChildren="true">
+      <qt-list-view
+        class="exit-dialog-list-view"
+        ref="listRef"
+        :padding="'0,60,0,0'"
+        :clipPadding="false"
+        :clipChildren="false"
+        horizontal
+        @itemClick="onItemClick"
+      >
+        <qt-view
+          class="exit-dialog-list-item"
+          :type="1"
+          :clipPadding="false"
+          :focusScale="ThemeConfig.placeHolderFocusScale"
+          eventClick
+          :focusable="true"
+        >
+          <qt-view
+            class="exit-dialog-list-item-img"
+            :duplicateParentState="true"
+            :enableFocusBorder="true"
+          >
+            <img
+              class="exit-dialog-list-item-img"
+              src="${image.normal}"
+              :postDelay="100"
+              :focusable="false"
+            />
+          </qt-view>
+
+          <qt-text
+            class="exit-dialog-list-item-text"
+            :fontSize="28"
+            :maxLines="2"
+            :ellipsizeMode="2"
+            :focusable="false"
+            text="${title}"
+            :duplicateParentState="true"
+          />
+        </qt-view>
+      </qt-list-view>
+    </qt-view>
+    <!--按钮-->
+    <qt-view class="exit-dialog-btn-root-css">
+      <qt-button
+        name="exitDialogBtn"
+        :marginRight="20"
+        :focusable="true"
+        :autofocus="true"
+        :buttonStyle="{
+          width: '330',
+          height: '90',
+          backgroundColor: '#1C222B',
+          focusBackgroundColor: '#FFFFFF',
+          borderRadius: '300px',
+        }"
+        :textStyle="{
+          color: 'rgba(255,255,255,0.55)',
+          focusColor: '#13161B',
+          fontSize: '36px',
+        }"
+        text="残忍退出"
+        @click="onClick('exitDialogBtn')"
+      ></qt-button>
+      <qt-button
+        name="lookBtn"
+        :marginLeft="20"
+        :focusable="true"
+        :buttonStyle="{
+          width: '330',
+          height: '90',
+          backgroundColor: '#1C222B',
+          focusBackgroundColor: '#FFFFFF',
+          borderRadius: '300px',
+        }"
+        :textStyle="{
+          color: 'rgba(255,255,255,0.55)',
+          focusColor: '#13161B',
+          fontSize: '36px',
+        }"
+        text="再逛逛"
+        @click="onClick('lookBtn')"
+      ></qt-button>
+    </qt-view>
+  </qt-view>
+</template>
+
+<script lang="ts" setup name="exit-dialog">
+import { ref } from "vue";
+import ic_exit_header from "../../../assets/home/ic_exit_header.png";
+import ic_exit_corner from "../../../assets/home/ic_exit_corner.png";
+import launch from "../../../tools/launch";
+import { buildExitList } from "../adapter/exit/home-exit-adapter";
+import { ExitListItem } from "../adapter/exit/home-exit-imp";
+import homeManager from "../api";
+import ThemeConfig from "../../../config/theme-config";
+
+const listRef = ref();
+const onESCreate = () => {
+  homeManager.getHomeRetention().then((res: Array<ExitListItem>) => {
+    const list = buildExitList(res);
+    listRef.value?.init(list);
+  });
+};
+
+const onClick = (name) => {
+  switch (name) {
+    case "exitDialogBtn":
+      launch.launchGo();
+      break;
+    case "lookBtn":
+      launch.launchBack();
+      break;
+  }
+};
+const onItemClick = (e) => {
+  const params = e.item.jumpParams;
+  launch.launch(params, true);
+};
+const onBackPressed = () => {
+  launch.launchBack();
+};
+
+defineExpose({ onBackPressed, onESCreate });
+</script>
+
+<style lang="scss" src="../scss/exit-dialog.scss"></style>