@quicktvui/ai 1.0.9 → 1.1.1

package/rules/.source/hellotv/src/pages/home/components/tab-content/short-video/short-video-section-item.vue

@@ -0,0 +1,80 @@
+<template>
+  <qt-view
+    class="short-video-section-list-item-root-css"
+    flexStyle="${style}"
+    :focusable="true"
+    eventClick
+    eventFocus
+    :enableFocusBorder="true"
+  >
+    <img
+      class="short-video-section-list-item-img"
+      :focusable="false"
+      :postDelay="300"
+      src="${image.normal}"
+    />
+    <qt-view
+      class="short-video-section-list-item-content-div"
+      :duplicateParentState="true"
+      :focusable="false"
+    >
+      <qt-text
+        class="short-video-section-list-item-text"
+        :focusable="false"
+        :showOnState="['normal']"
+        :fontSize="28"
+        :ellipsizeMode="2"
+        :paddingRect="[16, 12, 12, 0]"
+        gravity="start|top"
+        :lines="2"
+        :duplicateParentState="true"
+        text="${title.text}"
+      />
+      <qt-text
+        class="short-video-section-list-item-text"
+        :focusable="false"
+        :showOnState="['selected', 'focused']"
+        :fontSize="28"
+        :ellipsizeMode="2"
+        :paddingRect="[16, 12, 12, 0]"
+        gravity="start|top"
+        :lines="2"
+        :duplicateParentState="true"
+        text="${title.textFocus}"
+      />
+      <qt-view
+        class="short-video-section-list-item-play-mark"
+        :duplicateParentState="true"
+        :focusable="false"
+        :showOnState="['selected', 'focused']"
+      >
+        <play-mark
+          style="width: 25px; height: 20px; margin-left: 16px"
+          :focusable="false"
+          :markColor="'#FFFFFF'"
+          :gap="3"
+        />
+      </qt-view>
+
+      <qt-text
+        class="short-video-section-list-item-sub-title"
+        :duplicateParentState="true"
+        :fontSize="24"
+        :lines="1"
+        :paddingRect="[16, 0, 12, 0]"
+        :ellipsizeMode="2"
+        gravity="start|center"
+        text="${title.sub}"
+      />
+    </qt-view>
+  </qt-view>
+</template>
+
+<script lang="ts" setup>
+defineOptions({
+  name: "short-video-section-item",
+});
+defineExpose({});
+</script>
+
+<style lang="scss" src="../../../scss/short-video-section.scss"></style>

package/rules/.source/hellotv/src/pages/home/components/tab-content/short-video/short-video-section.vue

@@ -0,0 +1,70 @@
+<template>
+  <tv-item
+    class="short-video-section-root-css"
+    flexStyle="${style}"
+    layout="${layout}"
+    :clipChildren="true"
+    :clipPadding="false"
+    @item-bind="onItemBind"
+  >
+    <qt-list-view
+      class="short-video-section-list-css"
+      sid="${shortList.sid}"
+      flexStyle="${shortList.style}"
+      list="${itemList}"
+      :clipChildren="false"
+      :resetOnDetach="true"
+      :enablePlaceholder="false"
+      :pauseTaskOnHide="true"
+      :blockFocusDirections="['left', 'right', 'down']"
+      :autoSelectPosition="0"
+      @loadMore="loadMore"
+    >
+      <short-video-section-item
+        :type="TabContentType.TYPE_WATERFALL_SECTION_SHORT_SCREEN_ITEM"
+      />
+    </qt-list-view>
+  </tv-item>
+</template>
+
+<script lang="ts" setup>
+import ShortVideoSectionItem from "./short-video-section-item.vue";
+import TabContentType from "../../../adapter/tab-content/tab-content-item-type";
+
+defineOptions({
+  name: "short-video-section",
+});
+const emits = defineEmits(["loadMore"]);
+const props = defineProps({
+  getTabRef: {
+    type: Function,
+  },
+});
+let tabPageIndex = -1;
+let shortVideoId = "";
+let pageNo = 1;
+let loadMoreTimer: any = -1;
+const onItemBind = (e) => {
+  if (e.item) {
+    const tabRef = props.getTabRef!();
+    const tabDataManager = tabRef.getDataManager();
+    tabPageIndex = e.pageIndex;
+    const curSection = tabDataManager.getSection(tabPageIndex, e.position);
+    if (curSection.itemList.length < 1) {
+      shortVideoId = e.item.shortVideoId;
+      emits("loadMore", tabPageIndex, shortVideoId, pageNo);
+    }
+  }
+};
+const loadMore = (e) => {
+  clearTimeout(loadMoreTimer);
+  loadMoreTimer = setTimeout(() => {
+    pageNo++;
+    emits("loadMore", tabPageIndex, shortVideoId, pageNo);
+  }, 500);
+};
+
+defineExpose({});
+</script>
+
+<style lang="scss" src="../../../scss/short-video-section.scss"></style>

package/rules/.source/hellotv/src/pages/home/components/tab-content/small-4k/small-four-section.vue

@@ -0,0 +1,76 @@
+<template>
+  <tv-item
+    class="small-four-section-root-css"
+    flexStyle="${style}"
+    layout="${layout}"
+    :clipChildren="false"
+    :clipPadding="false"
+  >
+    <text-view
+      style="color: #ffffff; background-color: transparent; width: 1000px"
+      :lines="1"
+      flexStyle="${titleStyle}"
+      :focusable="false"
+      textSize="${titleStyle.fontSize}"
+      text="${title}"
+    />
+    <qt-list-view
+      class="small-4k-section-list"
+      horizontal
+      :infiniteParams="{
+        scrollOffset: 530,
+        minChildScale: 0.86,
+      }"
+      flexStyle="${listStyle}"
+      list="${itemList}"
+      :blockFocusDirections="['left', 'right']"
+      :clipChildren="false"
+      :clipPadding="false"
+      makeChildVisibleType="center"
+      :enableSelectOnFocus="true"
+      :autoSelectPosition="1000000000"
+    >
+      <qt-view
+        :type="TabContentItemType.TYPE_WATERFALL_SECTION_SMALL_4K_ITEM"
+        class="small-4k-list-item-root-css"
+        name="${name}"
+        flexStyle="${style}"
+        :clipChildren="false"
+        :focusable="true"
+        :enableFocusBorder="true"
+        eventClick
+        eventFocus
+      >
+        <img
+          class="small-4k-list-item-img"
+          sid="${sid}"
+          postDelay="100"
+          :focusable="false"
+          flexStyle="${image.style}"
+          src="${image.normal}"
+        />
+      </qt-view>
+    </qt-list-view>
+    <qt-replace-child
+      style="background-color: transparent; position: absolute"
+      layout="${mLayout}"
+      flexStyle="${replaceChildStyle}"
+      :postDelay="300"
+      sid="sectionSmall4kReplaceChildSid"
+      :markChildSID="TabContentConfig.homeBgPlaySid"
+      :focusable="false"
+      :clipChildren="false"
+      :replaceOnVisibilityChanged="false"
+    >
+    </qt-replace-child>
+  </tv-item>
+</template>
+
+<script lang="ts" setup name="small-four-section">
+import TabContentItemType from "../../../adapter/tab-content/tab-content-item-type.ts";
+import TabContentConfig from "../../../adapter/tab-content/tab-content-config.ts";
+
+defineExpose({});
+</script>
+
+<style lang="scss" src="../../../scss/small-four-section.scss"></style>

package/rules/.source/hellotv/src/pages/home/components/tab-content/world-4k/world-four-section-item.vue

@@ -0,0 +1,90 @@
+<template>
+  <div
+    class="world-4k-item-root-css"
+    name="${name}"
+    :clipChildren="false"
+    :focusable="true"
+    eventClick
+    eventFocus
+  >
+    <!-- 背景图-->
+    <img
+      class="world-4k-item-bg"
+      sid="${sid}"
+      :postDelay="100"
+      :focusable="false"
+      flexStyle="${image.style}"
+      src="${image.normal}"
+    />
+    <!-- 焦点阴影-->
+    <div
+      class="world-4k-item-focused-bg"
+      :showOnState="['selected', 'focused']"
+      duplicateParentState
+      :gradientBackground="{
+        colors: ['#d91C2745', '#00000000'],
+        orientation: 4,
+      }"
+    />
+    <!-- 主标题-->
+    <qt-view class="world-4k-item-title world-4k-item-main-title">
+      <img class="world-4k-item-txt-icon" :src="xuanJiIcon" />
+      <qt-text
+        class="world-4k-item-txt"
+        :fontSize="36"
+        text="${title}"
+        gravity="start|center"
+        :lines="1"
+      />
+    </qt-view>
+    <!-- 副标题-->
+    <qt-view
+      class="world-4k-item-title world-4k-item-sub-title"
+      showIf="${subTitleShow==true}"
+    >
+      <img class="world-4k-item-sub-txt-icon" :src="ic4KSub" />
+      <qt-text
+        class="world-4k-item-sub-txt"
+        :fontSize="24"
+        text="${subTitle}"
+        gravity="start|center"
+      />
+    </qt-view>
+    <!--底部按钮-->
+    <qt-view class="world-4k-item-btn" duplicateParentState :focusable="false">
+      <img
+        class="world-4k-item-btn-icon"
+        duplicateParentState
+        :showOnState="['normal', 'selected']"
+        :src="playIcon"
+        :focusable="false"
+      />
+      <img
+        class="world-4k-item-btn-icon"
+        duplicateParentState
+        showOnState="focused"
+        :src="playIconFocus"
+        :focusable="false"
+      />
+      <qt-text
+        class="world-4k-item-btn-txt"
+        :fontSize="30"
+        :focusable="false"
+        duplicateParentState
+        gravity="start|center"
+        text="进入详情"
+      />
+    </qt-view>
+  </div>
+</template>
+
+<script lang="ts" setup name="world-four-section-item">
+import xuanJiIcon from "../../../../../assets/component-media/ic_media_menu_xuanji_normal.png";
+import playIcon from "../../../../../assets/component-media/ic_media_btn_play.png";
+import playIconFocus from "../../../../../assets/home/ic_4k_play_focused.png";
+import ic4KSub from "../../../../../assets/home/ic_4k_subtitle_normal.png";
+
+defineExpose({});
+</script>
+
+<style lang="scss" src="../../../scss/world-four-section.scss"></style>

package/rules/.source/hellotv/src/pages/home/components/tab-content/world-4k/world-four-section.vue

@@ -0,0 +1,57 @@
+<template>
+  <tv-item
+    class="world-4k-section-root-css"
+    flexStyle="${style}"
+    layout="${layout}"
+    :clipChildren="false"
+    :clipPadding="false"
+    @item-bind="onItemBind"
+  >
+    <qt-list-view
+      class="world-4k-section-list-css"
+      horizontal
+      :infiniteParams="{ scrollOffset: 253, minChildScale: 0.86 }"
+      sid="${list4KSid}"
+      flexStyle="${style}"
+      list="${itemList}"
+      padding="0,30,0,30"
+      :blockFocusDirections="['left', 'right']"
+      :clipChildren="false"
+      :clipPadding="false"
+      makeChildVisibleType="center"
+      :enableSelectOnFocus="true"
+      :autoSelectPosition="1000000000"
+    >
+      <world-four-section-item
+        :type="TabContentItemType.TYPE_WATERFALL_SECTION_4K_ITEM"
+      />
+    </qt-list-view>
+  </tv-item>
+</template>
+
+<script lang="ts" setup name="world-four-section">
+import WorldFourSectionItem from "./world-four-section-item.vue";
+import TabContentItemType from "../../../adapter/tab-content/tab-content-item-type.ts";
+
+const emits = defineEmits(["loadMore"]);
+const props = defineProps({
+  getTabRef: {
+    type: Function,
+  },
+});
+
+const onItemBind = (e) => {
+  if (e.item) {
+    const tabRef = props.getTabRef!();
+    const tabDataManager = tabRef.getDataManager();
+    const curSection = tabDataManager.getSection(e.pageIndex, e.position);
+    if (curSection.itemList.length < 1) {
+      const content4kId = e.item.content4kId;
+      emits("loadMore", e.pageIndex, content4kId);
+    }
+  }
+};
+defineExpose({});
+</script>
+
+<style lang="scss" src="../../../scss/world-four-section.scss"></style>