@quicktvui/ai 1.0.9 → 1.1.0

package/rules/.source/hellotv/src/pages/home/scss/world-four-section.scss

@@ -0,0 +1,106 @@
+$world-4k-item-width: 1413px;
+
+.world-4k-section-root-css {
+  position: absolute;
+  background-color: transparent;
+}
+
+.world-4k-section-list-css {
+  background-color: transparent;
+}
+
+.world-4k-item-root-css {
+  width: $world-4k-item-width;
+  height: 860px;
+  padding-bottom: 65px;
+  background-color: transparent;
+  justify-content: flex-end;
+}
+
+.world-4k-item-bg {
+  position: absolute;
+  width: $world-4k-item-width;
+  height: 795px;
+  border-radius: $theme-img-border;
+  background-color: rgba(255, 255, 255, 0.3);
+}
+
+.world-4k-item-focused-bg {
+  position: absolute;
+  width: 1920px;
+  height: 592px;
+  bottom: -0.01px;
+  left: -253.5px;
+  background-color: transparent;
+}
+
+.world-4k-item-title {
+  width: 1300px;
+  margin-left: 60px;
+  flex-direction: row;
+  align-items: center;
+  background-color: transparent;
+}
+
+.world-4k-item-main-title {
+  height: 60px;
+  margin-bottom: 20px;
+  background-color: transparent;
+}
+
+.world-4k-item-txt-icon {
+  width: 35px;
+  height: 34px;
+}
+
+.world-4k-item-txt {
+  width: 1200px;
+  height: 60px;
+  margin-left: 12px;
+  color: #EDEDED;
+  background-color: transparent;
+}
+
+.world-4k-item-sub-title {
+  margin-bottom: 26px;
+  height: 40px;
+  background-color: transparent;
+}
+
+.world-4k-item-sub-txt-icon {
+  width: 91px;
+  height: 33px;
+}
+
+.world-4k-item-sub-txt {
+  width: 1200px;
+  height: 40px;
+  margin-left: 18px;
+  color: #EDEDED;
+}
+.world-4k-item-btn {
+  width: 219px;
+  height:72px;
+  margin-left: 60px;
+  margin-bottom: 60px;
+  border-radius: 45px;
+  flex-direction: row;
+  background-color: rgba(255,255,255,0.2);
+  focus-background-color: #FFFFFF
+}
+.world-4k-item-btn-icon {
+  position: absolute;
+  width: 25px;
+  height:29px;
+  margin-left: 30px;
+  margin-top: 21px;
+}
+
+.world-4k-item-btn-txt {
+  position: absolute;
+  width: 120px;
+  height: 72px;
+  margin-left: 70px;
+  color: #EDEDED;
+  focus-color:black;
+}

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

@@ -0,0 +1,227 @@
+<template>
+  <qt-view class="introduction-root">
+    <qt-column class="introduction">
+      <img class="introduction-bg" :src="introductionBg" :focusable="false" />
+      <!-- 标题 -->
+      <qt-text
+        class="title"
+        :duplicateParentState="true"
+        :focusable="false"
+        :fontSize="60"
+        :ellipsizeMode="2"
+        enablePostTask
+        postDelay="200"
+        :lines="1"
+        typeFace="bold"
+        gravity="left|top"
+        :text="title"
+      />
+      <!-- 底部介绍 -->
+      <qt-column
+        class="introduction-box"
+        :clipChildren="false"
+        :focusScale="1.03"
+      >
+        <!-- 第一行 -->
+        <qt-row :duplicateParentState="true">
+          <div
+            class="item-vip"
+            v-if="!isFree"
+            :gradientBackground="{
+              colors: ['#A06419', '#CDA048'],
+              orientation: 6,
+              cornerRadii4: [4, 4, 4, 4],
+            }"
+          >
+            <qt-text
+              class="item-vip-text"
+              :duplicateParentState="true"
+              :focusable="false"
+              :textSize="24"
+              :ellipsizeMode="2"
+              enablePostTask
+              postDelay="200"
+              :lines="1"
+              gravity="center"
+              text="影视VIP"
+            />
+          </div>
+          <div class="item-score" v-if="score">
+            <text-view
+              class="item-score-text"
+              :duplicateParentState="true"
+              :focusable="false"
+              :textSize="24"
+              :ellipsizeMode="2"
+              enablePostTask
+              postDelay="200"
+              :lines="1"
+              gravity="center"
+              :text="score"
+            />
+          </div>
+        </qt-row>
+        <!-- 第二行 -->
+        <qt-text
+          class="item-tag-text"
+          :duplicateParentState="true"
+          :focusable="false"
+          :fontSize="24"
+          :ellipsizeMode="2"
+          enablePostTask
+          postDelay="200"
+          :lines="1"
+          gravity="left|center"
+          :text="tag"
+        />
+        <!-- 第三行 -->
+        <qt-text
+          v-if="actors"
+          class="item-actors-text"
+          :duplicateParentState="true"
+          :focusable="false"
+          :textSize="24"
+          :ellipsizeMode="2"
+          enablePostTask
+          postDelay="200"
+          :lines="1"
+          gravity="left|center"
+          :text="actors"
+        />
+        <!-- 第四行 -->
+        <qt-text
+          class="item-desc-text"
+          :duplicateParentState="true"
+          :focusable="false"
+          :fontSize="24"
+          :ellipsizeMode="2"
+          enablePostTask
+          postDelay="200"
+          :lines="10"
+          :lineHeight="42"
+          gravity="left"
+          :text="description"
+        />
+      </qt-column>
+    </qt-column>
+  </qt-view>
+</template>
+
+<script setup lang="ts" name="introduction">
+import { ref } from "vue";
+import { IMedia } from "../detail/adapter/interface";
+import introductionBg from "../../assets/detail/ic_introduction_bg.png";
+let title = ref<string>("");
+let score = ref<string>("");
+let tag = ref<string>("");
+let actors = ref<string>("");
+let description = ref<string>("");
+let isFree = ref<boolean>(true);
+let media: IMedia;
+
+const onESCreate = (params: IMedia) => {
+  if (!params) return;
+  media = params;
+  isFree.value = media.vipType == "0" ? true : false;
+  title.value = media.title;
+  score.value = media.score;
+  tag.value = media.tags;
+  actors.value = media.actors;
+  description.value = media.description;
+};
+defineExpose({
+  onESCreate,
+});
+</script>
+<style lang="scss" scoped>
+.introduction-root {
+  width: 1920px;
+  height: 1080px;
+  background-color: transparent;
+  .introduction {
+    width: 935px;
+    height: 1080px;
+    background-color: #0e0e0e;
+    position: absolute;
+    right: 0px;
+    .introduction-bg {
+      width: 1012px;
+      height: 1080px;
+      background-color: transparent;
+      position: absolute;
+      right: 20px;
+    }
+    .title {
+      width: 768px;
+      height: 90px;
+      background-color: transparent;
+      margin-top: 112px;
+      margin-left: 100px;
+      color: white;
+    }
+    .introduction-box {
+      width: 768px;
+      height: 800px;
+      margin-left: 100px;
+      margin-top: 10px;
+      padding-bottom: 10px;
+      background-color: transparent;
+      .item-vip {
+        margin-right: 20px;
+        border-color: #f7b500;
+        align-items: center;
+        display: flex;
+        height: 36px;
+        width: 100px;
+        flex-direction: row;
+        justify-content: center;
+      }
+      .item-vip-text {
+        font-size: 24px;
+        color: #ffffff;
+        margin-left: 12px;
+        margin-right: 12px;
+        height: 36px;
+        width: 100px;
+      }
+      .item-score {
+        border-radius: 4px;
+        margin-right: 20px;
+        border-color: #ffffff;
+        border-width: 1px;
+        align-items: center;
+        display: flex;
+        width: 60px;
+        height: 32px;
+        flex-direction: row;
+        justify-content: center;
+        background-color: rgba(255, 255, 255, 0.06);
+      }
+      .item-score-text {
+        top: -1px;
+        font-size: 24px;
+        color: #ffffff;
+        width: 60px;
+        height: 32px;
+      }
+      .item-tag-text {
+        color: rgba(255, 255, 255, 0.6);
+        height: 34px;
+        width: 668px;
+        margin-top: 15px;
+        margin-bottom: 8px;
+      }
+      .item-actors-text {
+        height: 28px;
+        width: 814px;
+        color: rgba(255, 255, 255, 0.6);
+      }
+      .item-desc-text {
+        color: rgba(255, 255, 255, 0.6);
+        width: 768px;
+        height: 700px;
+      }
+    }
+  }
+}
+</style>

package/rules/.source/hellotv/src/pages/live/components/menu/first-list-item-icon-text.vue

@@ -0,0 +1,35 @@
+<template>
+  <qt-view class="menu-body-list-item" :type="3" :focusable="true" eventFocus>
+    <qt-view
+      style="
+        background-color: transparent;
+        flex-direction: row;
+        align-items: center;
+      "
+      :focusable="false"
+      duplicateParentState
+    >
+      <qt-image
+        class="menu-body-list-item-icon"
+        :src="icMine"
+        :postDelay="100"
+        :focusable="false"
+      ></qt-image>
+      <qt-text
+        class="menu-body-list-item-text"
+        style="width: 144px"
+        text="${name}"
+        typeface="bold"
+        gravity="center"
+        :focusable="false"
+        duplicateParentState
+      ></qt-text>
+    </qt-view>
+  </qt-view>
+</template>
+
+<script setup lang="ts">
+import icMine from "../../../../assets/live/ic-mine.png";
+</script>
+
+<style scoped src="../../css/menu.css"></style>

package/rules/.source/hellotv/src/pages/live/components/menu/first-list-item-img.vue

@@ -0,0 +1,16 @@
+<template>
+  <qt-view class="menu-body-list-item" :type="1" :focusable="true" eventFocus>
+    <qt-image
+      class="menu-body-list-item-img"
+      :src="icService"
+      :postDelay="100"
+      :focusable="false"
+    ></qt-image>
+  </qt-view>
+</template>
+
+<script setup lang="ts">
+import icService from "../../../../assets/live/ic-service.png";
+</script>
+
+<style scoped src="../../css/menu.css"></style>

package/rules/.source/hellotv/src/pages/live/components/menu/first-list-item-text.vue

@@ -0,0 +1,16 @@
+<template>
+  <qt-view class="menu-body-list-item" :type="2" :focusable="true" eventFocus>
+    <qt-text
+      class="menu-body-list-item-text"
+      text="${name}"
+      typeface="bold"
+      gravity="center"
+      :focusable="false"
+      :lines="1"
+      :ellipsizeMode="2"
+      duplicateParentState
+    ></qt-text>
+  </qt-view>
+</template>
+
+<style scoped src="../../css/menu.css"></style>

package/rules/.source/hellotv/src/pages/live/components/menu/index.vue

@@ -0,0 +1,266 @@
+<template>
+  <qt-view class="menu">
+    <!-- 菜单 -->
+    <qt-view class="menu-body">
+      <!-- 一级菜单 -->
+      <qt-list-view
+        class="menu-body-list"
+        style="width: 309px"
+        ref="firstListRef"
+        padding="52,72,17,0"
+        :focusable="false"
+        :skipRequestFocus="true"
+        :singleSelectPosition="autoselectPosition"
+        :blockFocusDirections="['up', 'down']"
+        @item-focused="onFirstListFocus"
+      >
+        <!-- 图片 -->
+        <firstListItemImg />
+        <!-- 文字 -->
+        <firstListItemText />
+        <!-- 图标、文字 -->
+        <firstListItemIconText />
+      </qt-list-view>
+
+      <!-- 二级菜单 -->
+      <qt-list-view
+        :visibility="showSecondList ? 'visible' : 'invisible'"
+        class="menu-body-list"
+        style="width: 400px"
+        name="secondList"
+        ref="secondListRef"
+        padding="0,72,0,0"
+        :skipRequestFocus="true"
+        :enableSelectOnFocus="false"
+        :autofocusPosition="autofocusPosition"
+        :autoscroll="[secondListScrollPos, 432]"
+        :singleSelectPosition="secondListSelectPos"
+        :blockFocusDirections="['up', 'down']"
+        @item-focused="onSecondListFocus"
+        @item-click="onSecondListClick"
+      >
+        <!-- 综合 -->
+        <secondListItem />
+      </qt-list-view>
+
+      <!-- 三级菜单 -->
+      <qt-view v-if="showThirdList">
+        <!-- 数据列表 -->
+        <qt-list-view
+          v-if="thirdListData"
+          class="menu-body-list"
+          style="width: 417px"
+          ref="thirdListRef"
+          padding="17,72,0,0"
+          :enableSelectOnFocus="false"
+          :blockFocusDirections="['up', 'down']"
+          :nextFocusName="{ left: 'secondList' }"
+          @item-focused="onThirdListFocus"
+          @item-click="onThirdListClick"
+        >
+          <!-- 综合 -->
+          <thirdListItem />
+        </qt-list-view>
+
+        <!-- 暂无数据 -->
+        <qt-view
+          v-else
+          class="menu-body-list"
+          style="width: 417px; align-items: center; justify-content: center"
+        >
+          <qt-text
+            class="menu-body-list-nodata"
+            text="暂无节目信息"
+            gravity="center"
+          ></qt-text>
+        </qt-view>
+      </qt-view>
+
+      <!-- 向右扩展 -->
+      <qt-view v-show="showSecondList && !showThirdList" class="menu-body-ext">
+        <qt-image
+          style="width: 132px; height: 1080px"
+          :src="icMenuExt"
+          :focusable="false"
+        ></qt-image>
+        <qt-image
+          style="
+            width: 24px;
+            height: 24px;
+            position: absolute;
+            top: 528px;
+            right: 8px;
+          "
+          :src="icMenuExtArrow"
+          :focusable="false"
+        ></qt-image>
+        <qt-text
+          style="
+            width: 36px;
+            height: 184px;
+            color: #ffffff;
+            font-size: 36px;
+            position: absolute;
+            top: 448px;
+            left: 28px;
+          "
+          text="节目信息"
+          :focusable="false"
+        ></qt-text>
+      </qt-view>
+    </qt-view>
+
+    <!-- 返回提示 -->
+    <qt-view class="menu-back">
+      <span>按</span>
+      <img class="menu-back-icon" :src="icBack" :focusable="false" />
+      <span>键可全屏观看</span>
+    </qt-view>
+  </qt-view>
+</template>
+
+<script setup lang="ts" name="channelMenu">
+import { onMounted, onUnmounted, ref } from "vue";
+import {
+  useESToast,
+  ESKeyEvent,
+  ESKeyCode,
+  useESEventBus,
+} from "@extscreen/es3-core";
+import { QTIListView, QTListViewItem } from "@quicktvui/quicktvui3";
+import firstListItemImg from "./first-list-item-img.vue";
+import firstListItemText from "./first-list-item-text.vue";
+import firstListItemIconText from "./first-list-item-icon-text.vue";
+import secondListItem from "./second-list-item.vue";
+import thirdListItem from "./third-list-item.vue";
+import icMenuExt from "../../../../assets/live/ic-menu-ext.png";
+import icMenuExtArrow from "../../../../assets/live/ic-menu-ext-arrow.png";
+import icBack from "../../../../assets/live/ic-back.png";
+
+const emits = defineEmits(["loadPrograms", "playMediaByIndex", "closeMenu"]);
+
+const toast = useESToast();
+const eventBus = useESEventBus();
+onMounted(() => {
+  eventBus.on("setPlayIndex", (index: number) => {
+    secondListData.forEach((el, elIndex) => {
+      if (elIndex === index) {
+        el.isPlaying = true;
+        autoselectPosition.value = el.categoryIndex;
+        autofocusPosition.value = elIndex;
+        secondListSelectPos.value = elIndex;
+      } else {
+        el.isPlaying = false;
+      }
+    });
+  });
+});
+onUnmounted(() => {
+  eventBus.off("setPlayIndex");
+});
+
+const autoselectPosition = ref(1);
+const autofocusPosition = ref(0);
+const firstListRef = ref<QTIListView>();
+const secondListRef = ref<QTIListView>();
+const secondListScrollPos = ref(0);
+const secondListSelectPos = ref(0);
+const thirdListRef = ref<QTIListView>();
+
+const showSecondList = ref(true);
+const showThirdList = ref(false);
+
+let secondListData: QTListViewItem[] = [];
+let thirdListData: QTListViewItem[] = [];
+
+function init(params: {
+  categories: QTListViewItem[];
+  channels: QTListViewItem[];
+}) {
+  firstListRef.value?.init(params.categories);
+  secondListData = secondListRef.value?.init(
+    params.channels,
+  ) as QTListViewItem[];
+}
+
+let closeTimer: any = -1;
+function close() {
+  clearTimeout(closeTimer);
+  closeTimer = setTimeout(() => emits("closeMenu"), 8000);
+}
+
+function onFirstListFocus(e) {
+  if (e.isFocused) {
+    close();
+    showThirdList.value = false;
+    switch (e.item.type) {
+      case 1:
+      case 3:
+        showSecondList.value = false;
+        break;
+      default:
+        showSecondList.value = true;
+        secondListScrollPos.value = e.item.startIndex;
+    }
+  }
+}
+
+let secondListActive = false;
+let curChannel: QTListViewItem = {} as QTListViewItem;
+let secondListTimer: any = -1;
+function onSecondListFocus(e) {
+  close();
+  clearTimeout(secondListTimer);
+  secondListTimer = setTimeout(() => {
+    if (e.isFocused) {
+      secondListActive = true;
+      curChannel = e.item;
+      firstListRef.value?.setItemSelected(curChannel.categoryIndex, true);
+      showThirdList.value = false;
+    } else {
+      secondListActive = false;
+    }
+  }, 300);
+}
+
+function onSecondListClick(e) {
+  emits("playMediaByIndex", e.index);
+}
+
+function onThirdListFocus(e) {
+  if (e.isFocused) close();
+}
+
+function onThirdListClick(e) {
+  if (e.item.isPlaying) {
+    emits("closeMenu");
+  } else {
+    toast.showToast("节目尚未开始，请您稍后再看");
+  }
+}
+
+function onKeyDown(keyEvent: ESKeyEvent) {
+  switch (keyEvent.keyCode) {
+    case ESKeyCode.ES_KEYCODE_DPAD_RIGHT:
+      if (secondListActive && !showThirdList.value) {
+        emits("loadPrograms", curChannel.id, (programs: QTListViewItem[]) => {
+          thirdListData = programs;
+        });
+        showThirdList.value = true;
+        if (thirdListData) {
+          setTimeout(() => thirdListRef.value?.init(thirdListData), 300);
+        }
+      }
+      break;
+  }
+}
+
+function onBackPressed() {
+  showSecondList.value = true;
+  showThirdList.value = false;
+}
+
+defineExpose({ init, onKeyDown, onBackPressed });
+</script>
+
+<style scoped src="../../css/menu.css"></style>