@quicktvui/ai 1.0.9 → 1.1.0

package/rules/.source/hellotv/src/pages/my/poster/index.vue

@@ -0,0 +1,98 @@
+<template>
+  <item-frame
+    class="qt-ui-poster-root-css"
+    :type="101"
+    layout="${layout}"
+    flexStyle="${style}"
+    :focusable="true"
+    :clipChildren="false"
+    name="innerItem"
+    itemShowShimmer="${shimmer.enable}"
+    shimmerSize="${shimmer.size}"
+    eventClick
+    eventFocus
+  >
+    <img
+      class="my-poster-img-css"
+      :duplicateParentState="true"
+      :postDelay="300"
+      :focusable="false"
+      :enableFocusBorder="true"
+      flexStyle="${image.style}"
+      src="${image.src}"
+    />
+    <div
+      class="poster-title"
+      flexStyle="${titleBoxStyle}"
+      :duplicateParentState="true"
+      :focusable="false"
+    >
+      <text-view
+        :duplicateParentState="true"
+        :focusable="false"
+        textSize="${title.style.fontSize}"
+        :ellipsizeMode="4"
+        :lines="1"
+        :postDelay="200"
+        gravity="center|left"
+        flexStyle="${title.style}"
+        text="${title.text}"
+        showIf="${title.enable}"
+        :paddingRect="[5, 0, 0, 0]"
+        class="poster-title-text"
+      />
+      <text-view
+        class="poster-subtitle"
+        :focusable="false"
+        fontSize="${subTitle.style.fontSize}"
+        :ellipsizeMode="2"
+        :lines="1"
+        gravity="centerVertical|left"
+        flexStyle="${subTitle.style}"
+        :duplicateParentState="true"
+        text="${subTitle.text}"
+        visibility="${subTitle}"
+        :paddingRect="[5, 0, 0, 0]"
+      />
+    </div>
+  </item-frame>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+export default defineComponent({
+  name: "my-poster",
+  setup() {
+    return {};
+  },
+});
+</script>
+
+<style scoped>
+.qt-ui-poster-root-css {
+  position: relative;
+  background-color: transparent;
+  overflow: hidden;
+}
+.my-poster-img-css {
+  background-color: transparent;
+  z-index: 1;
+  border-radius: 9px;
+}
+.poster-title {
+  position: absolute;
+  left: 0;
+  top: 0;
+  background-color: transparent;
+  z-index: 1;
+}
+.poster-title-text {
+  color: rgba(255, 255, 255, 0.55);
+  focus-color: #ffffff;
+  background-color: transparent;
+}
+.poster-subtitle {
+  color: rgba(255, 255, 255, 0.55);
+  background-color: transparent;
+}
+</style>

package/rules/.source/hellotv/src/pages/my/poster/my-card2.vue

@@ -0,0 +1,90 @@
+<template>
+  <div
+    :type="106"
+    layout="${layout}"
+    flexStyle="${style}"
+    :enableFocusBorder="true"
+    :focusable="true"
+    eventClick
+    :clipChildren="false"
+    eventFocus
+    class="my-poster-card2"
+    sid="${_id}"
+  >
+    <text-view
+      class="my-poster-card2-text"
+      :focusable="false"
+      autoWidth
+      autoHeight
+      textSize="${title.style.fontSize}"
+      textColor="${titleFontColor}"
+      :ellipsizeMode="2"
+      :lines="1"
+      gravity="center"
+      text="${title.text}"
+    />
+    <div class="my-poster-card2-icon" :duplicateParentState="true">
+      <img
+        class="my-poster-card2-icon-inner"
+        flexStyle="${icon.style}"
+        :duplicateParentState="true"
+        :showOnState="['normal', 'selected']"
+        :focusable="false"
+        src="${image.src}"
+      />
+      <img
+        class="my-poster-card2-icon-inner"
+        flexStyle="${icon.style}"
+        :duplicateParentState="true"
+        :showOnState="'focused'"
+        :focusable="false"
+        src="${focusedImageSrc}"
+      />
+    </div>
+
+    <text-view
+      class="my-poster-card2-tip"
+      :focusable="false"
+      autoWidth
+      autoHeight
+      :ellipsizeMode="2"
+      :lines="1"
+      gravity="center"
+      text="${tip}"
+    />
+  </div>
+</template>
+<script lang="ts" setup></script>
+<style scoped>
+.my-poster-card2 {
+  position: absolute;
+  align-items: center;
+  justify-content: center;
+  background-color: rgba(255, 255, 255, 0.06);
+  flex-direction: column;
+  border-radius: 16px;
+  focus-border-radius: 16px;
+}
+.my-poster-card2-text {
+  margin-top: 30px;
+  background-color: transparent;
+  font-weight: 500;
+}
+.my-poster-card2-icon {
+  margin-top: 40px;
+  background-color: transparent;
+  width: 100px;
+  height: 80px;
+}
+.my-poster-card2-icon-inner {
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+.my-poster-card2-tip {
+  margin-top: 31px;
+  color: rgba(255, 255, 255, 0.55);
+  font-size: 24px;
+  height: 24px;
+}
+</style>

package/rules/.source/hellotv/src/pages/my/poster/my-icon-title-col.vue

@@ -0,0 +1,72 @@
+<template>
+  <div
+    :type="105"
+    layout="${layout}"
+    flexStyle="${style}"
+    :enableFocusBorder="true"
+    :focusable="true"
+    eventClick
+    :clipChildren="false"
+    eventFocus
+    class="my-icon-title-col"
+    sid="${_id}"
+  >
+    <div class="my-icon-title-col-icon" :duplicateParentState="true">
+      <img
+        class="my-icon-title-col-icon-inner"
+        flexStyle="${icon.style}"
+        :duplicateParentState="true"
+        :showOnState="['normal', 'selected']"
+        :focusable="false"
+        src="${image.src}"
+      />
+      <img
+        class="my-icon-title-col-icon-inner"
+        flexStyle="${icon.style}"
+        :duplicateParentState="true"
+        :showOnState="'focused'"
+        :focusable="false"
+        src="${focusedImageSrc}"
+      />
+    </div>
+    <text-view
+      class="my-icon-title-col-text"
+      :focusable="false"
+      autoWidth
+      autoHeight
+      textSize="${title.style.fontSize}"
+      textColor="${title.style.color}"
+      :ellipsizeMode="2"
+      :lines="1"
+      gravity="center"
+      text="${title.text}"
+    />
+  </div>
+</template>
+<script lang="ts" setup></script>
+<style scoped>
+.my-icon-title-col {
+  position: absolute;
+  align-items: center;
+  justify-content: center;
+  background-color: rgba(255, 255, 255, 0.06);
+  flex-direction: column;
+  border-radius: 16px;
+  focus-border-radius: 16px;
+}
+.my-icon-title-col-text {
+  background-color: transparent;
+  font-weight: 500;
+}
+.my-icon-title-col-icon {
+  background-color: transparent;
+  width: 80px;
+  height: 80px;
+  margin-bottom: 30px;
+}
+.my-icon-title-col-icon-inner {
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+</style>

package/rules/.source/hellotv/src/pages/my/poster/my-icon-title-row.vue

@@ -0,0 +1,72 @@
+<template>
+  <div
+    :type="102"
+    layout="${layout}"
+    flexStyle="${style}"
+    :enableFocusBorder="true"
+    :focusable="true"
+    eventClick
+    :clipChildren="false"
+    eventFocus
+    class="my-icon-title-row"
+    sid="${_id}"
+  >
+    <div class="my-icon-title-row-icon" :duplicateParentState="true">
+      <img
+        class="my-icon-title-row-icon-inner"
+        flexStyle="${icon.style}"
+        :duplicateParentState="true"
+        :showOnState="['normal', 'selected']"
+        :focusable="false"
+        src="${image.src}"
+      />
+      <img
+        class="my-icon-title-row-icon-inner"
+        flexStyle="${icon.style}"
+        :duplicateParentState="true"
+        :showOnState="'focused'"
+        :focusable="false"
+        src="${focusedImageSrc}"
+      />
+    </div>
+    <text-view
+      class="my-icon-title-row-text"
+      :focusable="false"
+      autoWidth
+      autoHeight
+      textSize="${title.style.fontSize}"
+      textColor="${title.style.color}"
+      :ellipsizeMode="2"
+      :lines="1"
+      gravity="center"
+      text="${title.text}"
+    />
+  </div>
+</template>
+<script lang="ts" setup></script>
+<style scoped>
+.my-icon-title-row {
+  position: absolute;
+  align-items: center;
+  justify-content: center;
+  background-color: rgba(255, 255, 255, 0.06);
+  flex-direction: row;
+  border-radius: 16px;
+  focus-border-radius: 16px;
+}
+.my-icon-title-row-text {
+  margin-left: 30px;
+  background-color: transparent;
+  font-weight: 500;
+}
+.my-icon-title-row-icon {
+  background-color: transparent;
+  width: 80px;
+  height: 80px;
+}
+.my-icon-title-row-icon-inner {
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+</style>

package/rules/.source/hellotv/src/pages/my/poster/my-info.vue

@@ -0,0 +1,50 @@
+<template>
+  <div
+    :type="103"
+    layout="${layout}"
+    flexStyle="${style}"
+    :focusScale="false"
+    :focusable="true"
+    eventClick
+    :enableFocusBorder="true"
+    eventFocus
+    class="my-poster-into"
+    :clipChildren="false"
+    sid="${_id}"
+  >
+    <text-view
+      class="poster-into-title"
+      :focusable="false"
+      autoWidth
+      duplicateParentState
+      textSize="${title.style.fontSize}"
+      :ellipsizeMode="2"
+      :lines="1"
+      gravity="center"
+      text="${title.text}"
+      showIf="${title.enable}"
+    />
+  </div>
+</template>
+<script lang="ts" setup></script>
+<style scoped>
+.my-poster-into {
+  position: relative;
+  background-color: rgba(255, 255, 255, 0.06);
+  border-width: 1px;
+  border-radius: 20px;
+  focus-border-radius: 20px;
+  border-color: rgba(255, 255, 255, 0.1);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.poster-into-title {
+  background-color: transparent;
+  height: 50px;
+  color: rgba(255, 255, 255, 0.55);
+  focus-color: #ffffff;
+  font-weight: 500;
+}
+</style>

package/rules/.source/hellotv/src/pages/my/poster/my-user.vue

@@ -0,0 +1,126 @@
+<template>
+  <div
+    :type="104"
+    layout="${layout}"
+    :focusable="true"
+    eventClick
+    eventFocus
+    :clipChildren="true"
+    :enableFocusBorder="true"
+    class="poster-user-content-box"
+    flexStyle="${image.style}"
+    sid="${_id}"
+  >
+    <div class="poster-user-icon-container">
+      <img
+        class="poster-user-icon-bg"
+        :focusable="false"
+        src="../../../assets/my/ic_user.png"
+      />
+      <img
+        class="poster-user-icon"
+        :focusable="false"
+        src="${image.src}"
+        showIf="${image.enable}"
+      />
+    </div>
+
+    <div
+      class="poster-user-content-box-info"
+      :focusable="false"
+      duplicateParentState
+    >
+      <text-view
+        class="poster-user-title"
+        style="margin-top: 40px; color: #ffffff"
+        :focusable="false"
+        :ellipsizeMode="4"
+        :fontSize="36"
+        :lines="1"
+        gravity="centerVertical|start"
+        text="${title.text}"
+        showIf="${title.enable}"
+      />
+      <div class="poster-user-title-tip" duplicateParentState>
+        <text-view
+          class="poster-user-title-tip-txt"
+          :focusable="false"
+          :ellipsizeMode="2"
+          duplicateParentState
+          :lines="1"
+          gravity="center"
+          text="${subTitle.text}"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+<script lang="ts" setup></script>
+<style scoped>
+.poster-user-content-box {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: flex-start;
+  background-color: rgba(255, 255, 255, 0.06);
+  border-radius: 16px;
+  focus-border-radius: 16px;
+}
+
+.poster-user-icon-container {
+  width: 160px;
+  height: 160px;
+  margin-left: 40px;
+  background-color: rgba(255, 255, 255, 0.06);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 80px;
+}
+.poster-user-icon-bg {
+  position: absolute;
+  top: 41px;
+  left: 47px;
+  width: 66px;
+  height: 78px;
+}
+.poster-user-icon {
+  width: 160px;
+  height: 160px;
+  border-radius: 80px;
+}
+
+.poster-user-content-box-info {
+  margin-top: 20px;
+  margin-left: 30px;
+  width: 288px;
+  height: 237px;
+  border-top-right-radius: 42px;
+  border-bottom-right-radius: 42px;
+  display: flex;
+  flex-direction: column;
+  background-color: transparent;
+}
+
+.poster-user-title {
+  width: 288px;
+  background-color: transparent;
+  height: 44px;
+}
+
+.poster-user-title-tip {
+  width: 210px;
+  height: 60px;
+  background-color: rgba(255, 255, 255, 0.06);
+  focus-background-color: white;
+  margin-top: 30px;
+  border-radius: 30px;
+}
+.poster-user-title-tip-txt {
+  font-size: 26px;
+  color: rgba(255, 255, 255, 0.55);
+  focus-color: #000000;
+  width: 210px;
+  height: 60px;
+}
+</style>

package/rules/.source/hellotv/src/pages/play-test.vue

@@ -0,0 +1,95 @@
+<template>
+  <div style="width: 1920px; height: 1080px; background-color: #669940">
+    <media-player-view
+      ref="mediaPlayerViewRef"
+      style="position: absolute; background-color: transparent"
+      :initPlayerWindowType="2"
+      :isShowPlayerController="true"
+      @onPlayerPlaying="onVideoPlayerPlaying"
+    />
+    <bg-animation ref="itemCellBgImgRef" :focusable="false" />
+  </div>
+</template>
+
+<script lang="ts" setup name="play-test">
+import { ESKeyEvent } from "@extscreen/es3-core";
+import { ref } from "vue";
+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 launch from "../tools/launch";
+import { PlayType } from "./home/adapter/tab-content/tab-content-imp.ts";
+
+const mediaPlayerViewRef = ref();
+const itemCellBgImgRef = ref();
+
+const playData: Array<IMediaList> = [
+  {
+    id: "1532310053293928449",
+    type: PlayType.TYPE_LONG,
+    title: "111特斯拉自动驾驶遭遇“水土不服”？懂车帝原创全面评测Model 3",
+    cover:
+      "http://cms.hmon.tv/common/static/file/2024/05/31/ce5b63bc-5f2f-4171-871c-b709b9cb822a.png",
+    url: [
+      {
+        playUrl:
+          "http://extcdn.hsrc.tv/channelzero/2024/02/05/d477660a-3eb6-4c7f-b82b-0b61c035505c.mp4",
+        definition: "1",
+      },
+    ],
+    isRequestUrl: false,
+  },
+  {
+    id: "1532309801724030977",
+    type: PlayType.TYPE_LONG,
+    title: "222特斯拉自动驾驶遭遇“水土不服”？懂车帝原创全面评测Model 3",
+    cover:
+      "http://cms.hmon.tv/common/static/file/2024/05/31/ce5b63bc-5f2f-4171-871c-b709b9cb822a.png",
+    url: [
+      {
+        playUrl:
+          "http://extcdn.hsrc.tv/channelzero/2024/02/05/5fc2d6dd-0566-4c70-a4ba-be6e47e39252.mp4",
+        definition: "1",
+      },
+    ],
+    isRequestUrl: false,
+  },
+];
+
+const onESCreate = () => {
+  let imgBg = playData[0].cover;
+  setBgImage(imgBg);
+  const list = mediaPlayerViewRef.value.initPlayData(playData);
+  mediaPlayerViewRef.value.playMediaList(list);
+};
+
+const onVideoPlayerPlaying = () => {
+  setBgImage("");
+};
+const setBgImage = (imgUrl: string) => {
+  if (imgUrl) itemCellBgImgRef.value.setImg(imgUrl);
+  else itemCellBgImgRef.value.clearImg();
+};
+const onKeyDown = (keyEvent: ESKeyEvent): boolean => {
+  if (mediaPlayerViewRef.value?.onKeyDown(keyEvent)) {
+    return true;
+  }
+  return false;
+};
+const onKeyUp = (keyEvent: ESKeyEvent): boolean => {
+  if (mediaPlayerViewRef.value?.onKeyUp(keyEvent)) {
+    return true;
+  }
+  return false;
+};
+const onBackPressed = (): boolean => {
+  if (mediaPlayerViewRef.value?.onBackPressed()) {
+    return true;
+  }
+  launch.launchBack();
+  return true;
+};
+defineExpose({ onESCreate, onKeyDown, onKeyUp, onBackPressed });
+</script>
+
+<style lang="scss"></style>

package/rules/.source/hellotv/src/pages/search/README.md

@@ -0,0 +1,57 @@
+# 搜索
+
+## 页面功能
+
+    页面支持两种布局方式，通过页面级配置文件config.ts中layoutMode来控制。
+
+    layoutMode: 2 # 两栏布局，左侧键盘区域、右侧搜索关键词或搜索结果
+                3 # 三栏布局，左侧键盘区域、中间搜索关键词、右侧搜索结果
+
+## 页面布局
+
+![image](../../../doc/search/design.png)
+
+### 两栏页面（two-columns.vue）
+
+    左侧键盘区域、右侧关键词或搜索结果。当右侧展示搜索结果时，页面支持横向滚动。
+
+![image](../../../doc/search/two-columns.png)
+
+![image](../../../doc/search/two-columns-2.png)
+
+### 三栏页面（three-columns.vue）
+
+    左侧键盘区域、中间搜索关键词、右侧搜索结果，页面支持横向滚动。
+
+![image](../../../doc/search/three-columns.png)
+
+## 目录结构
+
+```bash
+src/pages/search
+├── README.md                               // 自述文件
+├── adapter                                 // 数据转换及类型定义
+│   ├── index.ts
+│   └── interface.ts
+├── api                                     // 网络请求
+│   ├── index.ts
+│   ├── interface.ts
+│   └── request-url.ts
+├── components                              // 页面组件
+│   ├── search-content-item-h.vue
+│   ├── search-content-item-v.vue
+│   ├── search-content-tabs.vue
+│   ├── search-content.vue
+│   ├── search-keyboard.vue
+│   ├── search-keyword-grid.vue
+│   └── search-keyword.vue
+├── scss                                    // 样式文件
+│   ├── search-content.scss
+│   ├── search-keyboard.scss
+│   ├── search-keyword-grid.scss
+│   ├── search-keyword.scss
+│   └── search.scss
+├── config.ts                               // 页面配置
+├── three-columns.vue
+└── two-columns.vue
+```