@quicktvui/ai 1.0.6 → 1.0.7

package/rules/.source/quicktvui/src/series/component/media-series.vue

@@ -0,0 +1,160 @@
+<template>
+  <select-series
+    v-if="customItem"
+    ref="selectSeries"
+    :clipChildren="false"
+    :scrollParam="scrollParam"
+    :groupParam="groupParam"
+    :commonParam="commonParam"
+    :display="true"
+    @load-data="onLoadData"
+    @item-click="onItemClick"
+    @item-focused="onItemFocused"
+    @group-item-focused="onGroupItemFocused"
+    :style="{ width: 1920, height: height }"
+  >
+    <slot />
+  </select-series>
+  <large-list
+    v-else-if="showOld"
+    ref="selectSeries"
+    :clipChildren="false"
+    :display="true"
+    :initParam="initParam"
+    @load-data="onLoadData"
+    @item-click="onItemClick"
+    @item-focused="onItemFocused"
+    @group-item-focused="onGroupItemFocused"
+    :style="{ width: 1920, height: height }"
+  />
+</template>
+
+<script lang="ts">
+import { defineComponent, ref, onMounted } from "vue";
+import { nextTick } from "@vue/runtime-core";
+import { ESIMediaSeries } from "@extscreen/es3-component";
+import { ESLogLevel, useESLog } from "@extscreen/es3-core";
+
+const TAG = "media-series";
+
+export default defineComponent({
+  name: "media-series",
+  props: {
+    customItem: {
+      type: Boolean,
+      default: false,
+    },
+    initParam: {
+      type: Object,
+      default: () => {
+        return {};
+      },
+    },
+    height: {
+      type: Number,
+      default: 230,
+    },
+    scrollParam: {
+      type: Object,
+      default: () => {
+        return {};
+      },
+    },
+    groupParam: {
+      type: Object,
+      default: () => {
+        return {};
+      },
+    },
+    commonParam: {
+      type: Object,
+      default: () => {
+        return {};
+      },
+    },
+  },
+  emits: ["load-data", "item-click", "item-focused", "group-item-focused"],
+  setup(props, context) {
+    const selectSeries = ref<ESIMediaSeries>();
+    let showOld = ref(false);
+    const log = useESLog();
+
+    onMounted(() => {
+      showOld.value = !props.customItem;
+    });
+    //-----------------------------------------------------------
+    const onLoadData = (event) => {
+      context.emit("load-data", event);
+    };
+    const onItemClick = (event) => {
+      context.emit("item-click", event);
+    };
+    const onItemFocused = (event) => {
+      context.emit("item-focused", event);
+    };
+    const onGroupItemFocused = (event) => {
+      context.emit("group-item-focused", event);
+    };
+    //-----------------------------------------------------------
+    const setInitData = (totalCount, pageSize) => {
+      if (selectSeries.value) {
+        selectSeries.value?.setInitData(totalCount, pageSize);
+      } else {
+        nextTick(() => {
+          if (selectSeries.value) {
+            selectSeries.value?.setInitData(totalCount, pageSize);
+          }
+        });
+      }
+    };
+    const setPageData = (page, data) => {
+      selectSeries.value?.setPageData(page, data);
+    };
+    const scrollTo = (pos) => {
+      selectSeries.value?.scrollTo(pos);
+    };
+    const scrollToWithOffset = (pos, offset, anim) => {
+      selectSeries.value?.scrollToWithOffset(pos, offset, anim);
+    };
+    const requestFocus = (position) => {
+      selectSeries.value?.requestFocus(position);
+    };
+    const setSelected = (position) => {
+      nextTick(() => {
+        if (log.isLoggable(ESLogLevel.DEBUG)) {
+          log.d(TAG, "--------setSelected------->>>>", position);
+        }
+        selectSeries.value?.setSelected(position);
+      });
+    };
+    const setup = () => {
+      selectSeries.value?.setup();
+    };
+    const setGroupSelected = (position) => {
+      selectSeries.value?.setGroupSelected(position);
+    };
+    const release = () => {
+      selectSeries.value?.release();
+    };
+    return {
+      selectSeries,
+      showOld,
+      onLoadData,
+      setPageData,
+      setInitData,
+      onItemClick,
+      onItemFocused,
+      onGroupItemFocused,
+      scrollTo,
+      scrollToWithOffset,
+      requestFocus,
+      setSelected,
+      setup,
+      setGroupSelected,
+      release,
+    };
+  },
+});
+</script>
+
+<style scoped></style>

package/rules/.source/quicktvui/src/series/index.vue

@@ -0,0 +1,316 @@
+<template>
+  <media-series
+    v-if="show"
+    ref="mediaSeriesRef"
+    :clipChildren="false"
+    :init-param="params"
+    :height="height"
+    :custom-item="seriesType !== 'leftRight'"
+    :scroll-param="scrollParams"
+    :group-param="groupParams"
+    :common-param="commonParams"
+    @load-data="onLoadData"
+    @item-click="onItemClick"
+    @item-focused="onItemFocused"
+    @group-item-focused="onGroupItemFocused"
+  >
+    <media-series-number-item
+      v-if="seriesType === 'number'"
+      :is-vip="isVip"
+      :gradient-background="gradientBackground"
+      :gradient-focus-background="gradientFocusBackground"
+      :mark-color="markColor"
+      :mark-vip-color="markVipColor"
+      :icon-gradient-background="iconGradientBackground"
+      :text-colors="textColors"
+      :text-vip-colors="textVipColors"
+    />
+    <media-series-text-item
+      v-else-if="seriesType === 'text'"
+      :is-vip="isVip"
+      :gradient-background="gradientBackground"
+      :gradient-focus-background="gradientFocusBackground"
+      :mark-color="markColor"
+      :mark-vip-color="markVipColor"
+      :icon-gradient-background="iconGradientBackground"
+      :item-height="itemDivHeight"
+      :item-width="itemDivWidth"
+      :text-colors="textColors"
+      :text-vip-colors="textVipColors"
+    />
+    <slot v-else-if="seriesType === 'custom'" />
+  </media-series>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref } from "vue";
+import media_series_number_item from "./item/media-series-number-item.vue";
+import media_series_text_item from "./item/media-series-text-item.vue";
+import media_series from "./component/media-series.vue";
+import { nextTick } from "@vue/runtime-core";
+import { Native } from "@extscreen/es3-vue";
+import { QTMediaSeriesType } from "./QTMediaSeriesType";
+import { QTMediaSeriesData } from "./QTMediaSeriesData";
+import { QTMediaSeriesStyleType } from "./QTMediaSeriesStyleType";
+import { QTMediaSeriesGroup } from "./QTMediaSeriesGroup";
+import {
+  buildCommonParams,
+  buildGroupParams,
+  buildLeftRightParams,
+  buildMediaSeriesHeight,
+  buildScrollParams,
+  buildSeriesLeftRightData,
+  buildSeriesLeftRightHeight,
+  buildSeriesNumberData,
+  buildSeriesTextData,
+  buildSeriesTopDownData,
+} from "./DataAdapter";
+import { QTMediaSeries } from "./QTMediaSeries";
+import { ESIMediaSeries } from "@extscreen/es3-component";
+import { ESLogLevel, useESLog } from "@extscreen/es3-core";
+import useBaseView from "../base/useBaseView";
+
+const TAG = "MediaSeries";
+
+export default defineComponent({
+  name: "qt-media-series",
+  components: {
+    "media-series-number-item": media_series_number_item,
+    "media-series-text-item": media_series_text_item,
+    "media-series": media_series,
+  },
+  emits: ["load-data", "item-click", "item-focused", "group-item-focused"],
+  props: {
+    itemHeight: {
+      type: Number,
+      default: 0,
+    },
+    gradientBackground: {
+      type: Object,
+      default: () => {
+        return {
+          colors: ["#1AFFFFFF", "#1AFFFFFF"],
+          orientation: 6,
+          cornerRadius: 8,
+        };
+      },
+    },
+    gradientFocusBackground: {
+      type: Object,
+      default: () => {
+        return {
+          colors: ["#FFFFFF", "#FFFFFF"],
+          orientation: 6,
+          cornerRadius: 8,
+        };
+      },
+    },
+    iconGradientBackground: {
+      type: Object,
+      default: () => {
+        return {
+          colors: ["#FFB67827", "#FFDBAF5C"],
+          cornerRadius: 4,
+          orientation: 6,
+        };
+      },
+    },
+    markColor: {
+      type: String,
+      default: "#FF4E46",
+    },
+    markVipColor: {
+      type: String,
+      default: "#FFD97C",
+    },
+    textColors: {
+      type: Object,
+      default: () => {
+        return {
+          color: "rgba(255, 255, 255, .5)",
+          focusColor: "rgba(0, 0, 0, 1)",
+          selectColor: "rgba(255, 255, 255, .5)",
+        };
+      },
+    },
+    textVipColors: {
+      type: Object,
+      default: () => {
+        return {
+          color: "#FFD97C",
+          focusColor: "#B67827",
+          selectColor: "#B67827",
+        };
+      },
+    },
+    itemDivWidth: {
+      type: Number,
+      default: 490,
+    },
+    itemDivHeight: {
+      type: Number,
+      default: 100,
+    },
+  },
+  setup(props, context) {
+    const mediaSeriesRef = ref<ESIMediaSeries>();
+    const { clearFocus, requestFocusDirectly, setVisibility } =
+      useBaseView(mediaSeriesRef);
+
+    const show = ref(false);
+    const log = useESLog();
+
+    const params = ref();
+    const commonParams = ref();
+    const scrollParams = ref();
+    const groupParams = ref();
+    const height = ref<number>(0);
+
+    const isVip = ref<boolean>(false);
+
+    const seriesType = ref<QTMediaSeriesType>(
+      QTMediaSeriesType.QT_MEDIA_SERIES_TYPE_NUMBER,
+    );
+    let seriesData: QTMediaSeriesData;
+
+    const setInitData = (
+      type: QTMediaSeriesType,
+      group: QTMediaSeriesGroup,
+      styleType: QTMediaSeriesStyleType,
+      data: QTMediaSeriesData,
+    ) => {
+      seriesType.value = type;
+      seriesData = data;
+
+      if (QTMediaSeriesType.QT_MEDIA_SERIES_TYPE_LEFT_RIGHT !== type) {
+        commonParams.value = buildCommonParams(type, group, styleType, data);
+        scrollParams.value = buildScrollParams(type, group, styleType, data);
+        groupParams.value = buildGroupParams(type, group, styleType, data);
+
+        if (QTMediaSeriesType.QT_MEDIA_SERIES_TYPE_CUSTOM == type)
+          height.value = props.itemHeight + (group.enable ? 70 : 0);
+        else
+          height.value = buildMediaSeriesHeight(type, group, styleType, data);
+        nextTick(() => {
+          if (mediaSeriesRef.value) {
+            mediaSeriesRef.value?.setInitData(data.totalCount, data.pageSize);
+          }
+        });
+        if (log.isLoggable(ESLogLevel.DEBUG)) {
+          log.d(TAG, "----setInitData---->>>>", height.value);
+        }
+      } else {
+        params.value = buildLeftRightParams(type, group, styleType, data);
+
+        height.value = buildSeriesLeftRightHeight(
+          type,
+          group,
+          styleType,
+          data,
+          params,
+        );
+        params.value.totalCount = data.totalCount;
+        params.value.pageSize = data.pageSize;
+      }
+      show.value = true;
+    };
+    //-------------------------------------------------------------
+    const setPageData = (page: number, dataArray: Array<QTMediaSeries>) => {
+      let arr = dataArray;
+      if (seriesType.value == QTMediaSeriesType.QT_MEDIA_SERIES_TYPE_NUMBER) {
+        arr = buildSeriesNumberData(page, seriesData.pageSize, dataArray);
+      } else if (
+        seriesType.value == QTMediaSeriesType.QT_MEDIA_SERIES_TYPE_TEXT
+      ) {
+        arr = buildSeriesTextData(page, seriesData.pageSize, dataArray);
+      } else if (
+        seriesType.value == QTMediaSeriesType.QT_MEDIA_SERIES_TYPE_LEFT_RIGHT
+      ) {
+        arr = buildSeriesLeftRightData(page, seriesData.pageSize, dataArray);
+      } else if (
+        seriesType.value == QTMediaSeriesType.QT_MEDIA_SERIES_TYPE_TOP_DOWN
+      ) {
+        arr = buildSeriesTopDownData(page, seriesData.pageSize, dataArray);
+      }
+      mediaSeriesRef.value?.setPageData(page, arr);
+    };
+    const scrollTo = (pos) => {
+      mediaSeriesRef.value?.scrollTo(pos);
+    };
+    const scrollToWithOffset = (pos, offset) => {
+      mediaSeriesRef.value?.scrollToWithOffset(pos, offset, false);
+    };
+    const requestFocus = (position) => {
+      mediaSeriesRef.value?.requestFocus(position);
+    };
+    const setSelected = (position) => {
+      mediaSeriesRef.value?.setSelected(position);
+    };
+    const setup = () => {
+      mediaSeriesRef.value?.setup();
+    };
+    const setGroupSelected = (position) => {
+      mediaSeriesRef.value?.setGroupSelected(position);
+    };
+    const release = () => {
+      mediaSeriesRef.value?.release();
+      show.value = false;
+    };
+    const blockRootFocus = () => {
+      if (mediaSeriesRef.value) {
+        Native.callUIFunction(mediaSeriesRef.value, "blockRootFocus", []);
+      }
+    };
+    const unBlockRootFocus = () => {
+      if (mediaSeriesRef.value) {
+        Native.callUIFunction(mediaSeriesRef.value, "unBlockRootFocus", []);
+      }
+    };
+    //-------------------------------------------------------------
+    const onLoadData = (event) => {
+      context.emit("load-data", event);
+    };
+    const onItemClick = (event) => {
+      context.emit("item-click", event);
+    };
+    const onItemFocused = (event) => {
+      context.emit("item-focused", event);
+    };
+    const onGroupItemFocused = (event) => {
+      context.emit("group-item-focused", event);
+    };
+    //-------------------------------------------------------------
+    return {
+      isVip,
+      seriesType,
+      params,
+      commonParams,
+      scrollParams,
+      groupParams,
+      mediaSeriesRef,
+      show,
+      height,
+      onLoadData,
+      setInitData,
+      setPageData,
+      onItemClick,
+      onItemFocused,
+      onGroupItemFocused,
+      scrollTo,
+      scrollToWithOffset,
+      requestFocus,
+      setSelected,
+      setup,
+      setGroupSelected,
+      release,
+      blockRootFocus,
+      unBlockRootFocus,
+      clearFocus,
+      requestFocusDirectly,
+      setVisibility,
+    };
+  },
+});
+</script>
+
+<style scoped></style>

package/rules/.source/quicktvui/src/series/item/media-series-number-item.vue

@@ -0,0 +1,212 @@
+<template>
+  <div
+    class="number-item-container"
+    :focusable="true"
+    :focusScale="1"
+    :gradientBackground="gradientBackground"
+  >
+    <div
+      class="number-item-container-bg-focus"
+      :duplicateParentState="true"
+      showOnState="focused"
+      :focusable="false"
+      :gradientBackground="gradientFocusBackground"
+    />
+    <!-- 文字-->
+    <div class="number-item-text-root-css" :duplicateParentState="true">
+      <div
+        style="
+          position: absolute;
+          flex-direction: row;
+          justify-content: center;
+          align-items: center;
+          width: 160px;
+          height: 80px;
+          background-color: transparent;
+        "
+        showOnState="selected"
+        :duplicateParentState="true"
+      >
+        <play-mark
+          :duplicateParentState="true"
+          flexStyle="${normalMarkStyle}"
+          style="width: 24px; height: 25px; position: absolute; left: 20px"
+          :markColor="markColor"
+        />
+        <play-mark
+          :duplicateParentState="true"
+          flexStyle="${vipMarkStyle}"
+          style="width: 24px; height: 25px; position: absolute; left: 20px"
+          :markColor="markVipColor"
+        />
+      </div>
+      <text-view
+        :duplicateParentState="true"
+        :fontSize="36"
+        gravity="center"
+        autoWidth
+        :lines="1"
+        flexStyle="${normalTitleStyle}"
+        class="number-item-text-css"
+        :style="{
+          color: textColors.color,
+          focusColor: textColors.focusColor,
+          selectColor: textColors.selectColor,
+        }"
+        text="${title}"
+      />
+      <text-view
+        :duplicateParentState="true"
+        :fontSize="36"
+        gravity="center"
+        flexStyle="${vipTitleStyle}"
+        autoWidth
+        class="number-item-text-vip-css"
+        :style="{
+          color: textVipColors.color,
+          focusColor: textVipColors.focusColor,
+          selectColor: textVipColors.selectColor,
+        }"
+        :lines="1"
+        text="${title}"
+      />
+    </div>
+
+    <!-- vip角标 -->
+    <div
+      class="media-series-number-item-vip-root"
+      showIf="${vip.enable==true}"
+      :gradientBackground="iconGradientBackground"
+    >
+      <text-view
+        :duplicateParentState="true"
+        class="media-series-number-item-vip-text"
+        :fontSize="20"
+        gravity="center"
+        text="${vip.text}"
+      />
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+
+export default defineComponent({
+  name: "media-series-number-item",
+  props: {
+    isVip: {
+      type: Boolean,
+      default: false,
+    },
+    gradientBackground: {
+      type: Object,
+      default: () => {
+        return {
+          colors: ["#1AFFFFFF", "#1AFFFFFF"],
+          orientation: 6,
+          cornerRadius: 8,
+        };
+      },
+    },
+    gradientFocusBackground: {
+      type: Object,
+      default: () => {
+        return {
+          colors: ["#FFFFFF", "#FFFFFF"],
+          orientation: 6,
+          cornerRadius: 8,
+        };
+      },
+    },
+    iconGradientBackground: {
+      type: Object,
+      default: () => {
+        return {
+          colors: ["#FFB67827", "#FFDBAF5C"],
+          cornerRadius: 4,
+          orientation: 6,
+        };
+      },
+    },
+    markColor: {
+      type: String,
+      default: "#FF4E46",
+    },
+    markVipColor: {
+      type: String,
+      default: "#FFD97C",
+    },
+    textColors: {
+      type: Object,
+      default: () => {
+        return {
+          color: "rgba(255, 255, 255, .50)",
+          focusColor: "rgba(0, 0, 0, 1)",
+          selectColor: "rgba(255, 255, 255, .50)",
+        };
+      },
+    },
+    textVipColors: {
+      type: Object,
+      default: () => {
+        return {
+          color: "#FFD97C",
+          focusColor: "#B67827",
+          selectColor: "#B67827",
+        };
+      },
+    },
+  },
+});
+</script>
+
+<style scoped>
+.number-item-container {
+  width: 160px;
+  height: 80px;
+  background-color: transparent;
+  border-radius: 8px;
+}
+.number-item-container-bg-focus {
+  position: absolute;
+  background-color: transparent;
+  width: 160px;
+  height: 80px;
+}
+.media-series-number-item-vip-root {
+  position: absolute;
+  width: 45px;
+  height: 28px;
+  left: 118px;
+  border-radius: 4px;
+  background-color: transparent;
+}
+
+.media-series-number-item-vip-text {
+  width: 45px;
+  height: 28px;
+  color: white;
+  font-weight: 400;
+}
+
+.number-item-text-root-css {
+  position: absolute;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  width: 160px;
+  height: 80px;
+  background-color: transparent;
+}
+
+.number-item-text-css {
+  height: 80px;
+  width: 160px;
+}
+
+.number-item-text-vip-css {
+  height: 80px;
+  width: 160px;
+}
+</style>