@quicktvui/ai 1.0.9 → 1.1.1

package/rules/.source/hellotv/src/pages/home/components/tab-content/cell-list-player-item.vue

@@ -0,0 +1,74 @@
+<template>
+  <tv-item
+    class="cell-player-item-root-css"
+    layout="${layout}"
+    flexStyle="${style}"
+    :enableFocusBorder="false"
+    :focusScale="1"
+    disablePlaceholderFocus
+    :focusable="false"
+    :clipChildren="true"
+    eventClick
+    eventFocus
+  >
+    <img
+      class="cell-player-list-item-bg"
+      sid="${image.sid}"
+      flexStyle="${image.style}"
+      src="${image.normal}"
+      :postDelay="100"
+      :duplicateParentState="true"
+      :enableFocusBorder="true"
+      :focusable="false"
+    />
+    <qt-replace-child
+      class="cell-player-item-replace"
+      flexStyle="${play.style}"
+      sid="${play.sid}"
+      eventReceiverSID="homeTabsSid"
+      :postDelay="300"
+      :focusable="false"
+      :clipChildren="false"
+      :replaceOnVisibilityChanged="false"
+      :markChildSID="TabContentConfig.homeBgPlaySid"
+    >
+    </qt-replace-child>
+    <qt-list-view
+      flexStyle="${listStyle}"
+      sid="${cellListSid}"
+      :clipChildren="true"
+      :clipPadding="true"
+      :singleSelectPosition="0"
+      list="${play.buildPlayData}"
+      :refocusType="'KeepPosition'"
+      :skipRequestFocus="true"
+      :resetOnDetach="true"
+      :endHintEnabled="false"
+      :verticalFadingEdgeEnabled="true"
+    >
+      <!-- 文字-->
+      <bg-player-cell-list-item-text :type="86" />
+      <bg-player-cell-list-item-img
+        :type="82"
+        :imgStyle="{ borderTopRightRadius: `${borderRadius}px` }"
+      />
+      <bg-player-cell-list-item-img :type="83" />
+      <bg-player-cell-list-item-img
+        :type="84"
+        :imgStyle="{ borderBottomRightRadius: `${borderRadius}px` }"
+      />
+    </qt-list-view>
+  </tv-item>
+</template>
+
+<script lang="ts" setup name="cell-list-player-item">
+import { ref } from "vue";
+import TabContentConfig from "../../adapter/tab-content/tab-content-config";
+import BgPlayerCellListItemImg from "./bg-player-cell-list-item-img.vue";
+import BgPlayerCellListItemText from "./bg-player-cell-list-item-text.vue";
+import ThemeConfig from "../../../../config/theme-config.ts";
+const borderRadius = ref(ThemeConfig.focusBorderCorner);
+defineExpose({});
+</script>
+
+<style lang="scss" src="../../scss/cell-player-item.scss"></style>

package/rules/.source/hellotv/src/pages/home/components/tab-content/cell-player-item.vue

@@ -0,0 +1,40 @@
+<template>
+  <tv-item
+    class="cell-player-item-root-css"
+    layout="${layout}"
+    flexStyle="${style}"
+    :focusable="true"
+    :clipChildren="false"
+    eventClick
+    eventFocus
+  >
+    <img
+      class="cell-player-item-bg"
+      flexStyle="${image.style}"
+      src="${image.normal}"
+      :postDelay="100"
+      :duplicateParentState="true"
+      :enableFocusBorder="true"
+      :focusable="false"
+    />
+    <qt-replace-child
+      class="cell-player-item-replace"
+      flexStyle="${play.style}"
+      sid="${play.sid}"
+      :postDelay="300"
+      eventReceiverSID="homeTabsSid"
+      :focusable="false"
+      :clipChildren="false"
+      :replaceOnVisibilityChanged="false"
+      :markChildSID="TabContentConfig.homeBgPlaySid"
+    >
+    </qt-replace-child>
+  </tv-item>
+</template>
+
+<script lang="ts" setup name="cell-player-item">
+import TabContentConfig from "../../adapter/tab-content/tab-content-config";
+defineExpose({});
+</script>
+
+<style lang="scss" src="../../scss/cell-player-item.scss"></style>

package/rules/.source/hellotv/src/pages/home/components/tab-content/focus-change-img-item.vue

@@ -0,0 +1,41 @@
+<template>
+  <item-frame
+    class="focus-change-img-root-css"
+    layout="${layout}"
+    flexStyle="${style}"
+    :focusable="true"
+    :clipChildren="false"
+    eventClick
+    eventFocus
+    itemShowShimmer="${shimmer.enable}"
+    shimmerSize="${shimmer.size}"
+  >
+    <img
+      class="focus-change-img-css"
+      flexStyle="${image.style}"
+      :showOnState="['normal', 'selected']"
+      :postDelay="100"
+      :focusable="false"
+      :duplicateParentState="true"
+      :enablePlaceholder="true"
+      :enableFocusBorder="false"
+      src="${image.normal}"
+    />
+    <img
+      class="focus-change-img-css"
+      flexStyle="${style}"
+      showOnState="focused"
+      :postDelay="100"
+      :focusable="false"
+      :duplicateParentState="true"
+      :enableFocusBorder="false"
+      src="${image.focused}"
+    />
+  </item-frame>
+</template>
+
+<script lang="ts" setup name="focus-change-img-item">
+defineExpose({});
+</script>
+
+<style lang="scss" src="../../scss/focus-change-img-item.scss"></style>

package/rules/.source/hellotv/src/pages/home/components/tab-content/history-item.vue

@@ -0,0 +1,362 @@
+<template>
+  <div
+    class="history-item-root-css"
+    eventClick
+    eventFocus
+    :focusable="false"
+    :enablePlaceholder="true"
+    :clipChildren="false"
+    flexStyle="${style}"
+    gradientBackground="${gradientBackground}"
+    layout="${layout}"
+  >
+    <qt-list-view
+      list="${historyList}"
+      :clipChildren="false"
+      :focusable="false"
+      class="h-list"
+      :refocusType="'KeepPosition'"
+      :skipRequestFocus="true"
+      :resetOnDetach="true"
+      :endHintEnabled="false"
+      flexStyle="${style}"
+    >
+      <!-- 无历史 item-->
+      <qt-view
+        :type="4001"
+        class="no-history-item"
+        flexStyle="${style}"
+        eventClick
+        eventFocus
+        :focusable="true"
+        :enableFocusBorder="true"
+        :focusScale="ThemeConfig.placeHolderFocusScale"
+        :clipChildren="false"
+      >
+        <img
+          class="no-history-item-img"
+          :src="bg_history_item"
+          :focusable="false"
+        />
+        <qt-text
+          class="no-history-item-title"
+          text="历史记录"
+          typeface="bold"
+          :fontSize="36"
+        />
+        <qt-text class="no-history-item-text" text="${text}" :fontSIze="28" />
+      </qt-view>
+      <!-- 历史 item -->
+      <qt-view
+        :type="4002"
+        name="history-item"
+        class="history-item"
+        :focusable="true"
+        flexStyle="${style}"
+        :clipChildren="false"
+        eventClick
+        eventFocus
+        :enableFocusBorder="true"
+        :focusScale="ThemeConfig.placeHolderFocusScale"
+      >
+        <div
+          duplicateParentState
+          class="history-item-text-box"
+          :focusable="false"
+        >
+          <qt-text
+            :focusable="false"
+            text="${text}"
+            :lines="1"
+            :maxLines="1"
+            :ellipsizeMode="2"
+            :fontSize="30"
+            gravity="start|center"
+            :showOnState="['normal', 'selected']"
+            class="history-item-text"
+            duplicateParentState
+          />
+          <qt-text
+            :focusable="false"
+            text="${text}"
+            :lines="1"
+            :maxLines="1"
+            :ellipsizeMode="4"
+            :horizontalFadingEdgeEnabled="true"
+            :fontSize="30"
+            gravity="start|center"
+            typeface="bold"
+            showOnState="focused"
+            style="color: #13161b"
+            class="history-item-text"
+            duplicateParentState
+          />
+        </div>
+        <qt-text
+          :focusable="false"
+          text="${progress}"
+          :lines="1"
+          :maxLines="1"
+          :ellipsizeMode="2"
+          :fontSize="24"
+          gravity="end|center"
+          class="history-item-progress"
+          duplicateParentState
+        />
+      </qt-view>
+      <!-- 历史 login-item -->
+      <qt-view
+        :type="4003"
+        name="history-login-item"
+        class="history-login-item"
+        :focusable="true"
+        flexStyle="${style}"
+        :clipChildren="false"
+        eventClick
+        eventFocus
+        :enableFocusBorder="true"
+        :focusScale="ThemeConfig.placeHolderFocusScale"
+      >
+        <div
+          duplicateParentState
+          class="history-login-item-text-box"
+          :focusable="false"
+        >
+          <qt-text
+            :focusable="false"
+            text="${text}"
+            :lines="1"
+            :maxLines="1"
+            :ellipsizeMode="2"
+            :fontSize="30"
+            gravity="start|center"
+            :showOnState="['normal', 'selected']"
+            class="history-login-item-text"
+            duplicateParentState
+          />
+          <qt-text
+            :focusable="false"
+            text="${text}"
+            :lines="1"
+            :maxLines="1"
+            :ellipsizeMode="2"
+            :fontSize="30"
+            gravity="start|center"
+            typeface="bold"
+            showOnState="focused"
+            style="color: #13161b"
+            class="history-login-item-text"
+            duplicateParentState
+          />
+        </div>
+        <div duplicateParentState class="history-login-item-icon">
+          <img
+            :src="ic_arrow_normal"
+            :focusable="false"
+            :showOnState="['normal', 'selected']"
+            duplicateParentState
+          />
+          <img
+            :src="ic_arrow_focused"
+            :focusable="false"
+            showOnState="focused"
+            duplicateParentState
+          />
+        </div>
+      </qt-view>
+      <!-- line -->
+      <div
+        :type="4004"
+        class="history-item-line"
+        :focusable="false"
+        flexStyle="${style}"
+        :clipChildren="false"
+      ></div>
+      <!-- 历史图片样式 -->
+      <qt-view
+        :type="4005"
+        style="background-color: transparent"
+        flexStyle="${style}"
+        :clipChildren="false"
+        :focusable="true"
+        :focusScale="ThemeConfig.placeHolderFocusScale"
+        :enableFocusBorder="true"
+        eventFocus
+        eventClick
+      >
+        <qt-image
+          style="
+            width: 410px;
+            height: 161px;
+            background-color: transparent;
+            border-top-left-radius: 16px;
+            border-top-right-radius: 16px;
+            position: absolute;
+          "
+          src="${cover}"
+          :showOnState="['normal', 'selected']"
+          :focusable="false"
+          :duplicateParentState="true"
+        ></qt-image>
+        <qt-image
+          style="
+            width: 410px;
+            height: 161px;
+            background-color: transparent;
+            border-radius: 16px;
+            position: absolute;
+          "
+          src="${cover}"
+          :showOnState="'focused'"
+          :focusable="false"
+          :duplicateParentState="true"
+        ></qt-image>
+        <qt-text
+          class="history-image-item-text"
+          text="${text}"
+          gravity="center|start"
+          typeface="bold"
+          :focusable="false"
+          :ellipsizeMode="4"
+          :duplicateParentState="true"
+        ></qt-text>
+        <qt-text
+          class="history-image-item-progress"
+          text="${progress}"
+          gravity="center|start"
+          :focusable="false"
+        ></qt-text>
+      </qt-view>
+    </qt-list-view>
+  </div>
+</template>
+
+<script lang="ts" setup name="history-text-item">
+import ThemeConfig from "../../../../config/theme-config";
+import bg_history_item from "../../../../assets/home/bg_history_item.png";
+import ic_arrow_normal from "../../../../assets/home/ic_arrow_normal.png";
+import ic_arrow_focused from "../../../../assets/home/ic_arrow_focused.png";
+
+defineExpose({});
+</script>
+
+<style lang="scss" scoped>
+.history-item-root-css {
+  background-color: transparent;
+  border-radius: $theme-img-border;
+  .h-list {
+    background-color: transparent;
+    .no-history-item {
+      background-color: rgba(255, 255, 255, 0.06);
+      border-radius: $theme-img-border;
+      .no-history-item-title {
+        margin-top: 26px;
+        margin-left: 36px;
+        color: white;
+        width: 144px;
+        height: 45px;
+        background-color: transparent;
+      }
+      .no-history-item-text {
+        width: 230px;
+        height: 36px;
+        color: rgba(255, 255, 255, 0.5);
+        margin-top: 14px;
+        margin-left: 36px;
+        background-color: transparent;
+      }
+    }
+    .no-history-item-img {
+      position: absolute;
+      left: 269px;
+      top: 116px;
+      width: 139px;
+      height: 115px;
+      border-bottom-right-radius: $theme-img-border;
+    }
+    .history-item {
+      flex-direction: row;
+      background-color: transparent;
+      border-radius: $theme-img-border;
+      padding-left: 20px;
+      padding-right: 20px;
+      focus-background-color: rgba(255, 255, 255, 0.95);
+      .history-item-text-box {
+        width: 280px;
+        height: 76px;
+        background-color: transparent;
+      }
+      .history-item-text {
+        position: absolute;
+        width: 280px;
+        height: 76px;
+        color: #fff;
+      }
+      .history-item-progress {
+        width: 70px;
+        margin-left: 23px;
+        background-color: transparent;
+        color: rgba(255, 255, 255, 0.55);
+        focus-color: #13161b;
+      }
+    }
+    .history-login-item {
+      flex-direction: row;
+      background-color: transparent;
+      border-radius: $theme-img-border;
+      padding-left: 20px;
+      padding-right: 20px;
+      focus-background-color: rgba(255, 255, 255, 0.95);
+      align-items: center;
+      .history-login-item-text-box {
+        width: 280px;
+        height: 76px;
+        background-color: transparent;
+      }
+      .history-login-item-text {
+        position: absolute;
+        width: 280px;
+        height: 76px;
+        color: #fff;
+      }
+      .history-login-item-icon {
+        width: 13px;
+        height: 76px;
+        background-color: transparent;
+        margin-left: 75px;
+        img {
+          width: 13px;
+          height: 22px;
+          margin-top: 27px;
+          position: absolute;
+        }
+      }
+    }
+    .history-item-line {
+      background-color: rgba(255, 255, 255, 0.1);
+    }
+
+    .history-image-item-text {
+      width: 200px;
+      height: 40px;
+      background-color: transparent;
+      position: absolute;
+      top: 41px;
+      left: 20px;
+      font-size: 30px;
+      color: white;
+    }
+
+    .history-image-item-progress {
+      width: 200px;
+      height: 34px;
+      background-color: transparent;
+      position: absolute;
+      top: 86px;
+      left: 20px;
+      font-size: 24px;
+      color: rgba(255, 255, 255, 0.55);
+    }
+  }
+}
+</style>

package/rules/.source/hellotv/src/pages/home/components/tab-content/inner-out-title-item.vue

@@ -0,0 +1,60 @@
+<template>
+  <item-frame
+    class="inner-out-title-root-css"
+    layout="${layout}"
+    flexStyle="${style}"
+    :focusable="true"
+    :clipChildren="false"
+    name="innerItem"
+    itemShowShimmer="${shimmer.enable}"
+    shimmerSize="${shimmer.size}"
+    eventClick
+    eventFocus
+  >
+    <img
+      class="inner-out-title-img"
+      :postDelay="100"
+      :duplicateParentState="true"
+      :focusable="false"
+      :enableFocusBorder="true"
+      :enablePlaceholder="true"
+      flexStyle="${image.style}"
+      src="${image.normal}"
+    />
+    <qt-text
+      class="inner-out-title-text"
+      flexStyle="${title.style}"
+      enablePostTask
+      :postDelay="100"
+      :duplicateParentState="true"
+      :focusable="false"
+      :textSize="28"
+      :paddingRect="[12, 16, 0, 0]"
+      :ellipsizeMode="4"
+      :lines="1"
+      gravity="left"
+      gradientBackground="${title.background}"
+      text="${title.text}"
+    />
+    <qt-text
+      showIf="${corner.enable==true}"
+      class="item-corner"
+      gradientBackground="${corner.background}"
+      autoWidth
+      typeface="bold"
+      gravity="center"
+      :focusable="false"
+      :postDelay="100"
+      :textSize="20"
+      :ellipsizeMode="2"
+      :lines="1"
+      text="${corner.text}"
+    />
+  </item-frame>
+</template>
+
+<script lang="ts" setup name="inner-out-title-item">
+defineExpose({});
+</script>
+
+<style lang="scss" src="../../scss/inner-out-title-item.scss"></style>

package/rules/.source/hellotv/src/pages/home/components/tab-content/no-title-item.vue

@@ -0,0 +1,46 @@
+<template>
+  <item-frame
+    class="no-title-item-root-css"
+    layout="${layout}"
+    flexStyle="${style}"
+    :focusable="true"
+    :clipChildren="false"
+    eventClick
+    eventFocus
+    itemShowShimmer="${shimmer.enable}"
+    shimmerSize="${shimmer.size}"
+  >
+    <!-- 海报图-->
+    <img
+      class="no-title-item-img"
+      flexStyle="${image.style}"
+      :enableFocusBorder="true"
+      :enablePlaceholder="true"
+      :duplicateParentState="true"
+      :postDelay="100"
+      :focusable="false"
+      src="${image.normal}"
+    />
+    <!-- 文字角标-->
+    <qt-text
+      showIf="${corner.enable==true}"
+      class="item-corner"
+      gradientBackground="${corner.background}"
+      autoWidth
+      typeface="bold"
+      gravity="center"
+      :focusable="false"
+      :postDelay="100"
+      :textSize="20"
+      :ellipsizeMode="2"
+      :lines="1"
+      text="${corner.text}"
+    />
+  </item-frame>
+</template>
+
+<script lang="ts" setup name="no-title-item">
+defineExpose({});
+</script>
+
+<style lang="scss" src="../../scss/no-title-item.scss"></style>

package/rules/.source/hellotv/src/pages/home/components/tab-content/placeholder-item.vue

@@ -0,0 +1,25 @@
+<template>
+  <div
+    class="placeholder-root-css"
+    layout="${layout}"
+    flexStyle="${style}"
+    :focusable="false"
+    :disablePlaceholder="false"
+    :enableFocusBorder="false"
+  >
+    <img
+      class="placeholder-img"
+      flexStyle="${image.style}"
+      :postDelay="100"
+      :focusable="false"
+      :enableFocusBorder="false"
+      src="${image.normal}"
+    />
+  </div>
+</template>
+
+<script lang="ts" setup name="placeholder-item">
+defineExpose({});
+</script>
+
+<style lang="scss" src="../../scss/placeholder-item.scss"></style>