@quicktvui/ai 1.0.9 → 1.1.1

package/rules/.source/hellotv/src/components/bg-animation.vue

@@ -0,0 +1,176 @@
+<template>
+  <div class="bg-animation-root-css" :style="$props.bgStyle">
+    <!--    图片-->
+    <qt-animation
+      ref="animationOldRef"
+      class="animation-css"
+      style="z-index: 888"
+    >
+      <img
+        :style="{
+          width: $props.bgStyle.width,
+          height: $props.bgStyle.height,
+          borderRadius: borderRadius,
+          backgroundColor: 'transparent',
+        }"
+        :src="srcOld"
+      />
+    </qt-animation>
+    <!--    图片-->
+    <qt-animation
+      ref="animationNewRef"
+      class="animation-css"
+      style="z-index: 999"
+    >
+      <img
+        :style="{
+          width: $props.bgStyle.width,
+          height: $props.bgStyle.height,
+          borderRadius: borderRadius,
+          backgroundColor: 'transparent',
+        }"
+        :src="srcNew"
+      />
+    </qt-animation>
+  </div>
+</template>
+
+<script lang="ts" setup name="bg-animation">
+import {
+  QTAnimationPropertyName,
+  QTAnimationValueType,
+  QTIAnimation,
+} from "@quicktvui/quicktvui3";
+import { ref } from "vue";
+
+const props = defineProps({
+  //整体样式
+  bgStyle: {
+    type: Object,
+    default: () => {
+      return {
+        width: "1920px",
+        height: "1080px",
+        backgroundColor: "transparent",
+      };
+    },
+  },
+  //圆角
+  borderRadius: {
+    type: Number,
+    default: 0,
+  },
+  //动画时间
+  transitionTime: {
+    type: Number,
+    default: 600,
+  },
+});
+
+//图片
+const srcOld = ref("");
+const srcNew = ref("");
+//动画
+const animationOldRef = ref<QTIAnimation>();
+const animationNewRef = ref<QTIAnimation>();
+//动画ID
+const animationOldHideId = "old_1_0";
+const animationNewHideId = "new_1_0";
+const animationNewShowId = "new_0_1";
+
+let loadImgTimer: any = -1;
+let loadImgNewTimer: any = -1;
+/**
+ * 设置背景图片
+ * @param src
+ */
+const setImg = (src: string) => {
+  if (!src) src = "";
+  if (loadImgTimer) clearTimeout(loadImgTimer);
+  if (loadImgNewTimer) clearTimeout(loadImgNewTimer);
+  loadImgNewTimer = setTimeout(() => {
+    //隐藏old
+    animationOldRef.value?.objectAnimator2(
+      animationOldHideId,
+      QTAnimationValueType.QT_ANIMATION_VALUE_TYPE_FLOAT,
+      QTAnimationPropertyName.QT_ANIMATION_PROPERTY_NAME_ALPHA,
+      1,
+      0,
+      <number>props.transitionTime,
+      -1,
+      0,
+      false,
+      false,
+      { type: 2 },
+    );
+    animationOldRef.value?.startAnimator(animationOldHideId);
+    srcOld.value = srcNew.value;
+    srcNew.value = src;
+    //展示new
+    animationNewRef.value?.objectAnimator2(
+      animationNewShowId,
+      QTAnimationValueType.QT_ANIMATION_VALUE_TYPE_FLOAT,
+      QTAnimationPropertyName.QT_ANIMATION_PROPERTY_NAME_ALPHA,
+      0,
+      1,
+      <number>props.transitionTime,
+      -1,
+      0,
+      false,
+      false,
+      { type: 2 },
+    );
+    animationNewRef.value?.startAnimator(animationNewShowId);
+    loadImgTimer = setTimeout(
+      () => {
+        srcOld.value = src;
+      },
+      <number>props.transitionTime + 10,
+    );
+  }, 50);
+};
+/**
+ * 清除当前图片
+ */
+const clearImg = () => {
+  if (loadImgTimer) clearTimeout(loadImgTimer);
+  //设置old图片隐藏动画
+  animationOldRef.value?.objectAnimator2(
+    animationOldHideId,
+    QTAnimationValueType.QT_ANIMATION_VALUE_TYPE_FLOAT,
+    QTAnimationPropertyName.QT_ANIMATION_PROPERTY_NAME_ALPHA,
+    1,
+    0,
+    200,
+    -1,
+    0,
+    false,
+    false,
+  );
+  //设置new图片隐藏动画
+  animationNewRef.value?.objectAnimator2(
+    animationNewHideId,
+    QTAnimationValueType.QT_ANIMATION_VALUE_TYPE_FLOAT,
+    QTAnimationPropertyName.QT_ANIMATION_PROPERTY_NAME_ALPHA,
+    1,
+    0,
+    200,
+    -1,
+    0,
+    false,
+    false,
+  );
+  //执行动画
+  animationOldRef.value?.startAnimator(animationOldHideId);
+  animationNewRef.value?.startAnimator(animationNewHideId);
+  //清空图片资源
+  loadImgTimer = setTimeout(() => {
+    srcOld.value = "";
+    srcNew.value = "";
+  }, 250);
+};
+
+defineExpose({ setImg, clearImg });
+</script>
+
+<style lang="scss" src="./bg-animation.scss"></style>

package/rules/.source/hellotv/src/components/btn-pack-view.vue

@@ -0,0 +1,172 @@
+<template>
+  <div
+    :class="[
+      'btn-pack-root-css',
+      {
+        'is-icon-left': iconLeft,
+        'is-icon-top': iconTop,
+        'show-default-bg': !isShowGradientBg,
+      },
+    ]"
+    @click="onClick"
+    @focus="onFocus"
+    :listenHasFocusChange="true"
+  >
+    <!--    渐进背景-->
+    <div
+      v-if="isShowGradientBg"
+      showOnState="normal"
+      :duplicateParentState="true"
+      :gradientBackground="defaultGradientBg"
+      class="bg-css"
+    />
+    <div
+      v-if="isShowGradientBg"
+      showOnState="focused"
+      :duplicateParentState="true"
+      :gradientBackground="focusedGradientBg"
+      class="bg-css"
+    />
+    <!--    图标-->
+    <div :style="iconRootStyle" duplicateParentState v-if="normalIcon">
+      <img
+        v-if="normalIcon"
+        :style="iconStyle"
+        duplicateParentState
+        showOnState="normal"
+        :src="normalIcon"
+      />
+      <img
+        v-if="focusIcon"
+        :style="iconStyle"
+        duplicateParentState
+        showOnState="focused"
+        :src="focusIcon"
+      />
+    </div>
+    <!--    文字内容-->
+    <qt-text
+      v-if="text"
+      duplicateParentState
+      typeface="bold"
+      :fontSize="fontSize"
+      :text="text"
+      :focusable="false"
+      :select="true"
+      :ellipsizeMode="3"
+      :lines="1"
+      gravity="centerVertical"
+      :class="[
+        'text-css',
+        {
+          'icon-left': iconLeft,
+          'icon-top': iconTop,
+        },
+      ]"
+      :style="textStyle"
+    />
+  </div>
+</template>
+
+<script lang="ts" setup name="btn-pack-view">
+import ThemeConfig from "../config/theme-config.ts";
+
+const emits = defineEmits(["focus", "click"]);
+defineProps({
+  //展示左侧图标
+  iconLeft: {
+    type: Boolean,
+    default: false,
+  },
+  //展示顶部图标
+  iconTop: {
+    type: Boolean,
+    default: false,
+  },
+  //是否使用渐进背景
+  isShowGradientBg: {
+    type: Boolean,
+    default: false,
+  },
+  //背景渐进色 默认
+  defaultGradientBg: {
+    type: Object,
+    default: () => {
+      return {
+        colors: ThemeConfig.btnGradientNormalColor,
+        orientation: 6,
+        cornerRadii4: [30, 30, 30, 30],
+      }; //cornerRadii4[左上, 右上, 右下, 左下]
+    },
+  },
+  //背景渐进色 焦点
+  focusedGradientBg: {
+    type: Object,
+    default: () => {
+      return {
+        colors: ThemeConfig.btnGradientFocusColor,
+        orientation: 6,
+        cornerRadius: 30,
+      };
+    },
+  },
+  //默认图片
+  normalIcon: {
+    type: String,
+    default: "",
+  },
+  //焦点图片
+  focusIcon: {
+    type: String,
+    default: "",
+  },
+  //图标整体样式
+  iconRootStyle: {
+    type: Object,
+    default: () => {
+      return { width: "30px", height: "30px", backgroundColor: "transparent" };
+    },
+  },
+  //图标样式
+  iconStyle: {
+    type: Object,
+    default: () => {
+      return {
+        position: "absolute",
+        width: "30px",
+        height: "30px",
+        borderRadius: 0,
+      };
+    },
+  },
+  //按钮信息
+  text: {
+    type: String,
+    default: "",
+  },
+  //字体大小
+  fontSize: {
+    type: Number,
+    default: 28,
+  },
+  //字体样式
+  textStyle: {
+    type: Object,
+    default: () => {
+      return { position: "static", width: "70px", height: "60px" };
+    },
+  },
+});
+
+function onClick(e): void {
+  emits("click", e);
+}
+
+function onFocus(e): void {
+  emits("focus", e);
+}
+
+defineExpose({});
+</script>
+
+<style lang="scss" src="./btn-pack.scss"></style>

package/rules/.source/hellotv/src/components/btn-pack.scss

@@ -0,0 +1,53 @@
+$btn-border-radius:30px;
+$btn-background-color:$theme-btn-normal-color;
+$btn-focus-background-color:$theme-btn-focus-color;
+
+.btn-pack-root-css{
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: $btn-border-radius;
+  background-color:transparent;
+}
+.show-default-bg{
+  background-color: $btn-background-color;
+  focus-background-color:$btn-focus-background-color;
+}
+
+.is-icon-left{
+  flex-direction: row;
+}
+.is-icon-top{
+  flex-direction: column;
+}
+//.is-icon-right{
+//  flex-direction: row-reverse;
+//}
+//.is-icon-bottom{
+//  flex-direction: column-reverse;
+//}
+.btn-pack-root-css .bg-css{
+  background-color: transparent;
+  position: absolute;
+  left: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+}
+.btn-pack-root-css .icon-left{
+  margin-left: 8px;
+}
+//.btn-pack-root-css .icon-right{
+//  margin-right: 8px;
+//}
+.btn-pack-root-css .icon-top{
+  margin-top: 4px;
+}
+//.btn-pack-root-css .icon-bottom{
+//  margin-bottom: 4px;
+//}
+.btn-pack-root-css .text-css{
+  background-color: transparent;
+  color:$theme-text-normal-color;
+  focus-color:$theme-text-focus-color;
+}

package/rules/.source/hellotv/src/components/grid-item-horizontal.vue

@@ -0,0 +1,203 @@
+<template>
+  <qt-view
+    class="grid-item-h"
+    :style="$props.style"
+    :focusable="true"
+    :focusScale="themeConfig.placeHolderFocusScale"
+    eventFocus
+    eventClick
+  >
+    <!-- 焦点状态下的删除样式 -->
+    <qt-view
+      showIf="${showDeleteCover}"
+      class="grid-item-h-delete"
+      style="background-color: transparent"
+      :focusable="false"
+      :duplicateParentState="true"
+    >
+      <qt-view
+        class="grid-item-h-delete"
+        :style="$props.imageStyle"
+        :showOnState="'focused'"
+        :focusable="false"
+        :duplicateParentState="true"
+      >
+        <qt-image
+          style="width: 40px; height: 50px"
+          :src="icDelete"
+          :focusable="false"
+        ></qt-image>
+      </qt-view>
+    </qt-view>
+    <!-- 外层这个div的作用是模拟placeholder, 如果没有启动placeholder, 把背景色加到图片上, 有时会闪一下页面背景色 -->
+    <qt-view
+      style="background-color: rgba(255, 255, 255, 0.1); border-radius: 16px"
+      :focusable="false"
+      :duplicateParentState="true"
+    >
+      <!-- 封面 -->
+      <qt-image
+        class="grid-item-h-img"
+        :style="$props.imageStyle"
+        src="${cover}"
+        :postDelay="100"
+        :enableFocusBorder="true"
+        :focusable="false"
+        :duplicateParentState="true"
+      ></qt-image>
+    </qt-view>
+    <!-- 角标 -->
+    <qt-text
+      showIf="${showCorner}"
+      class="grid-item-h-corner"
+      :style="{ top: 0, left: $props.style?.width.replace('px', '') - 75 }"
+      text="${corner}"
+      gravity="center"
+      :focusable="false"
+      :gradientBackground="{
+        colors: ['#73E59E', '#299B49'],
+        orientation: 0,
+        cornerRadii4: [0, 16, 0, 16],
+      }"
+    ></qt-text>
+    <!-- 评分 -->
+    <qt-view
+      showIf="${showRating}"
+      class="grid-item-h-score"
+      :style="{
+        width: $props.style?.width,
+        top: `${$props.imageStyle?.height.replace('px', '') - 70}px`,
+      }"
+      :gradientBackground="scoreGradient"
+      :focusable="false"
+    >
+      <qt-text
+        class="grid-item-h-score-text"
+        text="${score}"
+        :focusable="false"
+      ></qt-text>
+    </qt-view>
+    <!-- 标题 -->
+    <qt-text
+      class="grid-item-h-text"
+      :style="{ width: $props.style?.width }"
+      text="${title}"
+      :paddingRect="[12, 0, 12, 0]"
+      :boldOnFocus="true"
+      :lines="1"
+      :ellipsizeMode="4"
+      :focusable="false"
+      :duplicateParentState="true"
+      :horizontalFadingEdgeEnabled="true"
+    ></qt-text>
+    <!-- 播放进度 -->
+    <qt-text
+      showIf="${showProgress}"
+      class="grid-item-h-progress"
+      :style="{ width: $props.style?.width }"
+      text="${progress}"
+      gravity="center|start"
+      :paddingRect="[12, 0, 12, 0]"
+      :focusable="false"
+      :duplicateParentState="true"
+    ></qt-text>
+  </qt-view>
+</template>
+
+<script setup lang="ts" name="GridItemH">
+import themeConfig from "../config/theme-config";
+import icDelete from "../assets/history/ic_delete.png";
+
+defineProps({
+  style: {
+    type: Object,
+    default: () => ({
+      width: `320px`,
+      height: `226px`,
+    }),
+  },
+  imageStyle: {
+    type: Object,
+    default: () => ({
+      width: `320px`,
+      height: `180px`,
+      borderRadius: `${themeConfig.focusBorderCorner}px`,
+    }),
+  },
+});
+
+// 评分背景色
+const scoreGradient = {
+  colors: ["#00000000", "#CC000000"],
+  orientation: 0,
+  cornerRadii4: [
+    0,
+    0,
+    themeConfig.focusBorderCorner,
+    themeConfig.focusBorderCorner,
+  ],
+};
+</script>
+
+<style scoped lang="scss">
+.grid-item-h {
+  background-color: transparent;
+}
+
+.grid-item-h-delete {
+  background-color: rgba(0, 0, 0, 0.65);
+  border-radius: 16px;
+  align-items: center;
+  justify-content: center;
+  position: absolute;
+  top: 0.01px;
+  left: 0.01px;
+  z-index: 100;
+}
+
+.grid-item-h-img {
+  background-color: rgba(255, 255, 255, 0.1);
+}
+
+.grid-item-h-corner {
+  width: 75px;
+  height: 35px;
+  background-color: transparent;
+  position: absolute;
+  color: white;
+  font-size: 24px;
+}
+
+.grid-item-h-score {
+  height: 70px;
+  background-color: transparent;
+  position: absolute;
+}
+
+.grid-item-h-score-text {
+  width: 60px;
+  height: 30px;
+  background-color: transparent;
+  margin-left: 16px;
+  margin-top: 31px;
+  color: #ff5415;
+  font-size: 24px;
+}
+
+.grid-item-h-text {
+  height: 40px;
+  background-color: transparent;
+  margin-top: 11px;
+  color: rgba(255, 255, 255, 0.55);
+  font-size: 30px;
+  focus-color: white;
+}
+
+.grid-item-h-progress {
+  height: 34px;
+  background-color: transparent;
+  color: rgba(255, 255, 255, 0.35);
+  font-size: 24px;
+  focus-color: rgba(255, 255, 255, 0.75);
+}
+</style>