@quicktvui/ai 1.0.9 → 1.1.1

package/rules/.source/hellotv/src/pages/filter/scss/filter.scss

@@ -0,0 +1,21 @@
+.filter {
+  width: 1920px;
+  height: 1080px;
+  background-color: transparent;
+}
+
+.filter-focus-placeholder {
+  width: 1px;
+  height: 1px;
+  background-color: transparent;
+  position: absolute;
+  top: 0px;
+  left: 0px;
+}
+
+.filter-body {
+  width: 2130px;
+  height: 960px;
+  background-color: transparent;
+  flex-direction: row;
+}

package/rules/.source/hellotv/src/pages/filter/sidebar-contents.vue

@@ -0,0 +1,145 @@
+<template>
+  <qt-view
+    class="filter"
+    :gradientBackground="{
+      colors: themeConfig.bgGradientColor,
+      orientation: 4,
+    }"
+  >
+    <!-- 焦点占位, 解决页面跳焦的问题 -->
+    <qt-view class="filter-focus-placeholder" :focusable="true"></qt-view>
+    <!-- 顶部按钮 -->
+    <qt-view
+      style="background-color: transparent"
+      :blockFocusDirections="['up', 'left']"
+    >
+      <top-view
+        name="topView"
+        :logoRight="true"
+        :nextFocusName="{ down: 'sidebarList' }"
+      />
+    </qt-view>
+    <!-- 内容主体 -->
+    <qt-view class="filter-body" :clipChildren="true">
+      <!-- 筛选列表 -->
+      <filter-sidebar
+        ref="sidebarRef"
+        :blockFocusDir="sidebarBlockFocusDir"
+        :singleSelectPos="sidebarSinglePos"
+        :listItemTextGravity="'center|end'"
+        @onListItemFocused="onListItemFocused"
+      />
+      <!-- 筛选内容 -->
+      <filter-content
+        ref="contentRef"
+        :descendantFocusability="contentDeny"
+        @setNextFocusNameRight="setNextFocusNameRight"
+      />
+    </qt-view>
+  </qt-view>
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue";
+import { useESRouter } from "@extscreen/es3-router";
+import { buildFilters } from "./adapter/index";
+import { SecondaryType } from "./adapter/interface";
+import themeConfig from "../../config/theme-config";
+import TopView from "../../components/top-view.vue";
+import FilterSidebar from "./components/sidebar/index.vue";
+import FilterContent from "./components/content/index.vue";
+import filterManager from "./api/index";
+
+const router = useESRouter();
+
+// 筛选列表
+const sidebarRef = ref();
+const sidebarSinglePos = ref<number>(-1);
+const sidebarBlockFocusDir = ref();
+// 筛选内容
+const contentRef = ref();
+const contentDeny = ref<1 | 2>(1);
+
+function onESCreate(params: {
+  screenId: string;
+  defaultSecondaryId?: string;
+  defaultTags?: string;
+}) {
+  params.screenId = "1848555233454727169";
+  // params.defaultSecondaryId = '1848554924032532482' // 默认选中的二级筛选项ID
+  loadFilters(
+    params.screenId,
+    params.defaultSecondaryId || "",
+    params.defaultTags || "",
+  );
+}
+
+function loadFilters(
+  primaryId: string,
+  defaultSecondaryId: string,
+  defaultTags: string,
+) {
+  filterManager.getFilters(primaryId).then((filters) => {
+    const { secondaries, tertiaries } = buildFilters(
+      primaryId,
+      filters,
+      defaultTags.split(","),
+    );
+    // 设置左侧列表默认选中
+    const index = secondaries.findIndex(
+      (item) => item.id === defaultSecondaryId,
+    );
+    sidebarSinglePos.value = index !== -1 ? index : 1;
+    lastPosition = sidebarSinglePos.value;
+    // 初始化二级列表
+    sidebarRef.value?.init(secondaries);
+    // 初始化三级列表
+    contentRef.value?.init(primaryId, tertiaries, defaultSecondaryId);
+  });
+}
+
+let lastPosition = sidebarSinglePos.value;
+let listTimer: any = -1;
+let locked = false;
+function onListItemFocused(evt) {
+  if (evt.isFocused && evt.position != lastPosition) {
+    // 禁止解锁
+    locked = true;
+    // 禁止焦点向右
+    setNextFocusNameRight("");
+    clearTimeout(listTimer);
+    listTimer = setTimeout(() => {
+      // 允许解锁
+      locked = false;
+      lastPosition = evt.position;
+      sidebarSinglePos.value = lastPosition;
+      contentRef.value?.loadContents(
+        evt.item.id,
+        evt.item.type === SecondaryType.FILTER,
+        evt.item.type === SecondaryType.TEXT,
+      );
+    }, 300);
+  }
+}
+
+function setNextFocusNameRight(s: string) {
+  // 解锁条件
+  if (!locked && s !== "") {
+    contentDeny.value = 1;
+    sidebarRef.value?.setNextFocusNameRight(s);
+  } else {
+    contentDeny.value = 2;
+    sidebarRef.value?.setNextFocusNameRight("");
+  }
+}
+
+function onBackPressed() {
+  if (contentRef.value?.onBackPressed()) {
+    router.back();
+  }
+}
+
+defineExpose({ onESCreate, onBackPressed });
+</script>
+
+<style scoped lang="scss" src="./scss/filter.scss"></style>

package/rules/.source/hellotv/src/pages/filter/single-contents.vue

@@ -0,0 +1,61 @@
+<template>
+  <qt-view
+    class="filter"
+    :gradientBackground="{
+      colors: themeConfig.bgGradientColor,
+      orientation: 4,
+    }"
+  >
+    <!-- 顶部按钮 -->
+    <top-view name="topView" :logoRight="true" />
+    <!-- 内容主体 -->
+    <qt-view class="filter-body" :clipChildren="true">
+      <!-- 筛选内容 -->
+      <filter-content ref="contentRef" />
+    </qt-view>
+  </qt-view>
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue";
+import { useESRouter } from "@extscreen/es3-router";
+import { buildFilters } from "./adapter/index";
+import themeConfig from "../../config/theme-config";
+import TopView from "../../components/top-view.vue";
+import FilterContent from "./components/content/index.vue";
+import filterManager from "./api/index";
+
+const router = useESRouter();
+
+// 筛选内容
+const contentRef = ref();
+
+function onESCreate(params: { screenId: string; defaultTags?: string }) {
+  loadFilters(
+    params.screenId || "1848555233454727169",
+    params.defaultTags || "不存在标签,美国,动作",
+  );
+}
+
+function loadFilters(primaryId: string, defaultTags: string) {
+  filterManager.getFilters(primaryId).then((filters) => {
+    const { tertiaries } = buildFilters(
+      primaryId,
+      filters,
+      defaultTags.split(","),
+    );
+    // 初始化三级列表
+    contentRef.value?.init(primaryId, tertiaries);
+  });
+}
+
+function onBackPressed() {
+  if (contentRef.value?.onBackPressed()) {
+    router.back();
+  }
+}
+
+defineExpose({ onESCreate, onBackPressed });
+</script>
+
+<style scoped lang="scss" src="./scss/filter.scss"></style>

package/rules/.source/hellotv/src/pages/history/adapter/index.ts

@@ -0,0 +1,51 @@
+import { Records, Item } from "../api/interface";
+import { Content, ContentType } from "./interface";
+import config from "../config";
+
+export const calculateProgress = (item: Item): string => {
+  if (!item.episode) {
+    return "";
+  }
+  return item.viewedDuration > 60000
+    ? `看至 ${Math.floor(item.viewedDuration / 60000)} 分钟`
+    : "不足 1 分钟";
+};
+
+export const buildContent = (item: Item, recordType: number): Content => {
+  return {
+    type:
+      config.gridItemMode === 1 ? ContentType.HORIZONTAL : ContentType.VERTICAL,
+    itemSize: 266,
+    id: item.id,
+    title: item.title,
+    progress: calculateProgress(item),
+    showProgress: recordType === 0 ? true : false,
+    cover: item.coverH,
+    showDeleteCover: false,
+    decoration: { left: 20, top: 20, right: 20, bottom: 20 },
+  };
+};
+
+export const buildContents = (
+  records: Records,
+  recordType: number,
+): Content[] => {
+  if (records.items.length === 0) {
+    return [];
+  }
+
+  const contents: Content[] = records.items.map((item) =>
+    buildContent(item, recordType),
+  );
+
+  return contents;
+};
+
+export const buildEndContent = (): Content => {
+  return {
+    type: ContentType.End,
+    itemSize: 100,
+    id: "",
+    decoration: { top: 20, bottom: 30 },
+  };
+};

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

@@ -0,0 +1,22 @@
+import { QTListViewItemDecoration } from "@quicktvui/quicktvui3";
+
+export enum ContentType {
+  // 横图
+  HORIZONTAL = 1,
+  // 竖图
+  VERTICAL = 2,
+  // 到底提示
+  End = 1003,
+}
+
+export interface Content {
+  type: ContentType;
+  itemSize: number;
+  id: string;
+  title?: string;
+  progress?: string;
+  showProgress?: boolean;
+  cover?: string;
+  showDeleteCover?: boolean;
+  decoration?: QTListViewItemDecoration;
+}

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

@@ -0,0 +1,54 @@
+import { replacePlaceholders } from "../../../tools/common";
+import { HistoryApi, Records } from "./interface";
+import {
+  DelHistoryRecordsUrl,
+  generateRecordsUrl,
+  historyRecordsUrl,
+} from "./request-url";
+import requestManager from "../../../tools/request";
+
+class HistoryManager implements HistoryApi {
+  // 获取历史/收藏列表
+  getRecords(
+    deviceId: string,
+    type: "history" | "favorite",
+    page?: number,
+    limit?: number,
+  ): Promise<Records> {
+    return requestManager.get(
+      replacePlaceholders(historyRecordsUrl, {
+        deviceId,
+        type,
+        page,
+        limit,
+      }),
+    );
+  }
+  // 删除/清空历史、收藏记录
+  delRecords(
+    deviceId: string,
+    type: "history" | "favorite",
+    recordId?: string,
+  ): Promise<any> {
+    return requestManager.delete(
+      replacePlaceholders(DelHistoryRecordsUrl, {
+        deviceId,
+        type,
+        recordId,
+      }),
+    );
+  }
+  // 生成数据
+  generateRecords(
+    deviceId: string,
+    type: "history" | "favorite",
+  ): Promise<any> {
+    return requestManager.post(generateRecordsUrl, {
+      deviceId,
+      recordType: type,
+    });
+  }
+}
+
+const historyManager = new HistoryManager();
+export default historyManager;

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

@@ -0,0 +1,41 @@
+export interface Item {
+  id: string;
+  title: string;
+  coverH: string;
+  coverV: string;
+  episodeId: string;
+  episode: number;
+  totalDuration: number;
+  viewedDuration: number;
+  jumpParams: {
+    type: number;
+    options: object;
+  };
+
+  // 内部私有
+  _timestamp: number;
+  _type?: "history" | "favorite";
+  _action?: "add" | "del";
+  _delOptions?: { platformId: string; metaId: string; assetLongId: string };
+}
+
+export interface Records {
+  total: number;
+  items: Item[];
+}
+
+export interface HistoryApi {
+  // 获取历史/收藏列表
+  getRecords(
+    deviceId: string,
+    type: "history" | "favorite",
+    page?: number,
+    limit?: number,
+  ): Promise<Records>;
+  // 删除/清空历史、收藏记录
+  delRecords(
+    deviceId: string,
+    type: "history" | "favorite",
+    recordId?: string,
+  ): Promise<any>;
+}

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

@@ -0,0 +1,10 @@
+import BuildConfig from "../../../config/build-config";
+
+export const historyRecordsUrl =
+  BuildConfig.requestBaseUrl +
+  "/records?id=${deviceId}&type=${type}&page=${page}&limit=${limit}&sort=${sort}";
+export const DelHistoryRecordsUrl =
+  BuildConfig.requestBaseUrl +
+  "/records/${deviceId}?recordId=${recordId}&recordType=${type}";
+export const generateRecordsUrl =
+  BuildConfig.requestBaseUrl + "/records/generate";

package/rules/.source/hellotv/src/pages/history/components/confirm-dialog.vue

@@ -0,0 +1,155 @@
+<template>
+  <qt-view class="history-confirm" :focusable="false">
+    <qt-view class="history-confirm-box" :focusable="false">
+      <qt-text
+        class="history-confirm-box-top-text"
+        :text="content.text"
+        gravity="center"
+        :focusable="false"
+      ></qt-text>
+      <qt-view class="history-confirm-box-btn" :focusable="false">
+        <qt-button
+          :buttonStyle="btnStyle"
+          :textStyle="btnTextStyle"
+          style="margin-right: 40px"
+          :autofocus="true"
+          :text="content.btnL"
+          @click="onClick('delete')"
+        ></qt-button>
+        <qt-button
+          :buttonStyle="btnStyle"
+          :textStyle="btnTextStyle"
+          :text="content.btnR"
+          @click="onClick('cancel')"
+        ></qt-button>
+      </qt-view>
+    </qt-view>
+  </qt-view>
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue";
+import { useESToast, useESEventBus } from "@extscreen/es3-core";
+import { useESRouter } from "@extscreen/es3-router";
+import historyManager from "../api/index";
+
+const toast = useESToast();
+const router = useESRouter();
+const eventBus = useESEventBus();
+const btnStyle = {
+  width: "260px",
+  height: "80px",
+  backgroundColor: "rgba(255, 255, 255, 0.1)",
+  focusBackgroundColor: "#FFFFFF",
+  borderRadius: "40px",
+};
+const btnTextStyle = {
+  color: "rgba(202, 203, 204, 1)",
+  focusColor: "rgba(0, 0, 0, 1)",
+  fontSize: "36px",
+};
+
+type Options = {
+  text: string;
+  btnL: string;
+  btnR: string;
+  [prop: string]: any;
+};
+
+const content = ref<Options>({
+  text: "",
+  btnL: "",
+  btnR: "",
+});
+
+function onESCreate(params: Options) {
+  content.value = params;
+}
+
+let btnClickCounter = 0;
+function onClick(btn: string) {
+  if (++btnClickCounter > 1) return;
+  switch (btn) {
+    case "delete":
+      if (content.value.clearHistory) {
+        historyManager
+          .delRecords(
+            "xxx",
+            content.value.menuIndex == 0 ? "history" : "favorite",
+          )
+          .then(() => {
+            eventBus.emit("clearPageData");
+            router.back();
+          })
+          .catch(() => {
+            toast.showToast("清空失败");
+          });
+      } else {
+        // historyApi
+        //   .deleteContent({ menuIndex: content.value.menuIndex, cid: content.value.cid, userId: content.value.userId })
+        //   .then((ok) => {
+        //     if (ok) {
+        //       eventBus.emit('deletePageData', content.value.cid, content.value.menuIndex == 0)
+        //       router.back()
+        //     } else {
+        //       toast.showToast('删除失败！！！')
+        //     }
+        //     btnClickCounter = 0
+        //   })
+      }
+      break;
+    case "cancel":
+      onBackPressed();
+      break;
+  }
+}
+
+function onBackPressed() {
+  btnClickCounter = 0;
+  if (!content.value.clearHistory) {
+    if (content.value.menuIndex == 0) {
+      eventBus.emit("setGridItemImgBorder", content.value.cid, false);
+    } else {
+      eventBus.emit("setGridItemDeleteCoverBtn", content.value.cid, false);
+    }
+  }
+  router.back();
+}
+
+defineExpose({ onESCreate, onBackPressed });
+</script>
+
+<style scoped>
+.history-confirm {
+  width: 1920px;
+  height: 1080px;
+  background-color: rgba(0, 0, 0, 0.8);
+  align-items: center;
+  justify-content: center;
+}
+
+.history-confirm-box {
+  width: 1000px;
+  height: 575px;
+  background-color: rgba(28, 34, 43, 1);
+  border-radius: 8px;
+}
+
+.history-confirm-box-top-text {
+  width: 1000px;
+  height: 50px;
+  background-color: transparent;
+  margin-top: 175px;
+  color: white;
+  font-size: 40px;
+}
+
+.history-confirm-box-btn {
+  width: 1000px;
+  height: 80px;
+  background-color: transparent;
+  margin-top: 190px;
+  flex-direction: row;
+  justify-content: center;
+}
+</style>

package/rules/.source/hellotv/src/pages/history/config.ts

@@ -0,0 +1,8 @@
+export default {
+  // 内容Item样式, 1 横图、2 竖图
+  gridItemMode: 1,
+  // 筛选内容区域一行展示个数
+  gridSpanCount: 4,
+  // 分页大小
+  contentsLimit: 24,
+};