@quicktvui/ai 1.0.9 → 1.1.0

package/rules/.source/hellotv/src/pages/detail/components/media-player/collapse/media-collapse-list-item.vue

@@ -0,0 +1,108 @@
+<template>
+  <qt-view
+    class="media-collapse-list-item"
+    :clipChildren="false"
+    :enableFocusBorder="false"
+    :focusScale="1.1"
+    eventClick
+    eventFocus
+    :focusable="true"
+  >
+    <div
+      class="media-collapse-list-item-focus-bg"
+      showOnState="focused"
+      duplicateParentState
+      :gradientBackground="{
+        orientation: 6,
+        colors: ['#ffffff', '#ffffff'],
+        cornerRadius: 8,
+      }"
+    ></div>
+    <div class="media-collapse-list-item-content" :duplicateParentState="true">
+      <div
+        class="media-collapse-list-item-img"
+        :duplicateParentState="true"
+        flexStyle="${iconStyle}"
+      >
+        <img
+          duplicateParentState
+          :src="mediaListItemSelected"
+          showOnState="normal"
+        />
+        <img
+          duplicateParentState
+          :src="mediaListItemNormal"
+          showOnState="focused"
+        />
+        <img
+          duplicateParentState
+          :src="mediaListItemNormal"
+          showOnState="selected"
+        />
+      </div>
+      <qt-text
+        class="media-collapse-list-item-text"
+        :focusable="false"
+        gravity="center"
+        text="${text}"
+        autoWidth
+        :ellipsizeMode="3"
+        :duplicateParentState="true"
+        :fontSize="30"
+      />
+    </div>
+  </qt-view>
+</template>
+
+<script setup lang="ts" name="media-collapse-list-item">
+import mediaListItemSelected from "../../../../../assets/detail/ic_media_list_item_selected.png";
+import mediaListItemNormal from "../../../../../assets/detail/ic_media_list_item_normal.png";
+</script>
+
+<style lang="scss" scoped>
+.media-collapse-list-item {
+  border-radius: 8px;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  width: 280px;
+  height: 80px;
+  background-color: rgba(255, 255, 255, 0.1);
+  focus-background-color: rgba(245, 245, 245, 1);
+  .media-collapse-list-item-focus-bg {
+    width: 280px;
+    height: 80px;
+    background-color: transparent;
+    border-radius: 8px;
+    position: absolute;
+  }
+  .media-collapse-list-item-content {
+    background-color: transparent;
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    .media-collapse-list-item-img {
+      width: 32px;
+      height: 32px;
+      margin-right: 16px;
+      background-color: transparent;
+      img {
+        width: 32px;
+        height: 32px;
+        background-color: transparent;
+        position: absolute;
+      }
+    }
+    .media-collapse-list-item-text {
+      height: 80px;
+      color: white;
+      font-size: 30px;
+      select-color: white;
+      focus-color: #000;
+      background-color: transparent;
+    }
+  }
+}
+</style>

package/rules/.source/hellotv/src/pages/detail/components/media-player/collapse/media-collapse-media-series.vue

@@ -0,0 +1,349 @@
+<template>
+  <qt-view
+    class="media-collapse-media-series"
+    :clipChildren="false"
+    :clipPadding="false"
+    :focusable="false"
+  >
+    <span
+      class="media-collapse-media-series-title"
+      :opacity="isCollapseExpand ? 1 : 0.5"
+      >播放列表</span
+    >
+    <qt-animation ref="animationRef" :clipChildren="false" :clipPadding="false">
+      <qt-media-series
+        ref="mediaSeriesRef"
+        class="media-series"
+        :clipChildren="false"
+        :clipPadding="false"
+        markColor="#00D9D9"
+        :focusable="false"
+        :visible="visible"
+        :textColors="{
+          color: ThemeConfig.textNormalColor,
+          focusColor: ThemeConfig.textFocusColor,
+          selectColor: ThemeConfig.textSelectColor,
+        }"
+        :gradientBackground="{
+          colors: ThemeConfig.btnGradientNormalColor,
+          cornerRadius: 8,
+          orientation: 6,
+        }"
+        :gradientFocusFackground="{
+          colors: ThemeConfig.btnGradientFocusColor,
+          cornerRadius: 8,
+          orientation: 6,
+        }"
+        :commonParam="{ itemGap: 32, contentWidth: 1760 }"
+        @loadData="onLoadData"
+        @itemClick="onItemClick"
+        @itemFocused="onItemFocused"
+        @groupItemFocused="onGroupItemFocused"
+      >
+        <template v-slot:default>
+          <qt-view
+            class="media-series-item"
+            :focusable="true"
+            :clipChildren="false"
+            :clipPadding="false"
+            :enableFocusBorder="true"
+            :focusScale="1"
+          >
+            <qt-image
+              class="media-series-item-img"
+              src="${cover}"
+              :focusable="false"
+            ></qt-image>
+            <qt-view class="media-series-item-info" duplicateParentState>
+              <qt-text
+                class="media-series-item-text"
+                text="${text}"
+                :lines="2"
+                :ellipsizeMode="2"
+                :focusable="false"
+                duplicateParentState
+                :fontSize="26"
+              ></qt-text>
+              <qt-text
+                class="media-series-item-duartion"
+                text="${duartion}"
+                :lines="2"
+                :ellipsizeMode="2"
+                :focusable="false"
+                duplicateParentState
+                :fontSize="22"
+              ></qt-text>
+              <qt-view
+                class="play_Mark"
+                :focusable="false"
+                :showOnState="['selected']"
+                duplicateParentState
+              >
+                <play-mark
+                  :style="{ width: '18px', height: '20px' }"
+                  markColor="#ffffff"
+                  :focusable="false"
+                  :showType="0"
+                  :roundCorner="1"
+                />
+              </qt-view>
+            </qt-view>
+          </qt-view>
+        </template>
+      </qt-media-series>
+    </qt-animation>
+  </qt-view>
+</template>
+
+<script setup lang="ts" name="media-collapse-media-series">
+import { ref, nextTick } from "vue";
+import { ESLogLevel, useESLog, useESEventBus } from "@extscreen/es3-core";
+import {
+  QTAnimationPropertyName,
+  QTAnimationValueType,
+  QTIAnimation,
+  QTIMediaSeries,
+  QTMediaSeriesEvent,
+} from "@quicktvui/quicktvui3";
+import ThemeConfig from "../../../../../config/theme-config";
+import {
+  buildMediaSeriesType,
+  buildMediaSeriesGroup,
+  buildMediaSeriesStyleType,
+  buildMediaSeriesData,
+  buildMediaSeriesList,
+} from "../../../adapter/index";
+import { IMedia, IMediaItem } from "../../../adapter/interface";
+const TAG = "media-collapse-media-series";
+const log = useESLog();
+const eventbus = useESEventBus();
+const emits = defineEmits([
+  "onMediaSeriesItemFocus",
+  "onMediaSeriesItemClick",
+  "onMediaSeriesGroupItemFocus",
+]);
+const isCollapseExpand = ref<boolean>(false);
+const mediaSeriesRef = ref<QTIMediaSeries>();
+const visible = ref<boolean>(false);
+const selectedIndex = ref<number>(0);
+let focusTimer;
+let initialized = false;
+//初始化media-series组件
+const init = (media: IMedia) => {
+  if (log.isLoggable(ESLogLevel.DEBUG)) {
+    log.d(TAG, "-------initMedia-start----->>>>", media);
+  }
+  if (media.episodes >= 1) visible.value = true;
+  mediaSeriesRef.value?.setInitData(
+    buildMediaSeriesType(media.mediaSeriesType),
+    buildMediaSeriesGroup(),
+    buildMediaSeriesStyleType(),
+    buildMediaSeriesData(media),
+  );
+  if (log.isLoggable(ESLogLevel.DEBUG)) {
+    log.d(TAG, "-------initMedia---end--->>>>", media);
+  }
+};
+const setListData = (page: number, dataList: Array<IMediaItem>) => {
+  console.log(dataList, "3wqeqeeeeeeeeeeeeeeeeeeee");
+  const list = buildMediaSeriesList(dataList);
+  if (log.isLoggable(ESLogLevel.DEBUG)) {
+    log.d(TAG, "-----1--setListData---eee--->>>>", page, list);
+  }
+  nextTick(() => {
+    mediaSeriesRef.value?.setPageData(page, list);
+    if (log.isLoggable(ESLogLevel.DEBUG)) {
+      log.d(TAG, "---2----setListData---eee--->>>>", page, list);
+    }
+  });
+};
+// CollapseItem 展示回调
+const onCollapseItemExpand = (value: boolean, init: boolean) => {
+  if (log.isLoggable(ESLogLevel.DEBUG)) {
+    log.e(TAG, "-------onCollapseItemExpand-----播放顺序--->>>>>", value);
+  }
+  isCollapseExpand.value = value;
+
+  let delay = init ? 0 : 200;
+  if (value) {
+    show(delay);
+  } else {
+    dismiss(delay);
+  }
+
+  if (value) {
+    if (!initialized) {
+      focusTimer = setTimeout(() => {
+        setItemSelected(selectedIndex.value);
+        setItemFocused(selectedIndex.value);
+      }, 500);
+    } else {
+      focusTimer = setTimeout(() => {
+        setItemSelected(selectedIndex.value);
+        setItemFocused(selectedIndex.value);
+      }, 200);
+    }
+    initialized = true;
+  } else {
+    if (focusTimer) {
+      clearTimeout(focusTimer);
+    }
+  }
+};
+const setItemFocused = (position: number): void => {
+  if (log.isLoggable(ESLogLevel.DEBUG)) {
+    log.d(TAG, "---选集---setItemSelected------>>>>", position);
+  }
+  mediaSeriesRef.value?.requestFocus(position);
+};
+const setItemSelected = (position: number): void => {
+  if (log.isLoggable(ESLogLevel.DEBUG)) {
+    log.d(TAG, "---选集---setItemSelected------>>>>", position);
+  }
+  selectedIndex.value = position;
+  mediaSeriesRef.value?.setSelected(position);
+};
+const onLoadData = (event: QTMediaSeriesEvent) => {
+  if (log.isLoggable(ESLogLevel.DEBUG)) {
+    log.d(TAG, "---选集---onLoadData------>>>>");
+  }
+  const page = event.page || 1;
+  eventbus.emit("onMediaSeriesLoadData", page);
+};
+const onItemFocused = (event: QTMediaSeriesEvent) => {
+  let index = event.position;
+  emits("onMediaSeriesItemFocus", index);
+};
+const onItemClick = (event: QTMediaSeriesEvent) => {
+  let index = event.position;
+  let data = event.data;
+  emits("onMediaSeriesItemClick", index, data);
+};
+const onGroupItemFocused = (event: QTMediaSeriesEvent) => {
+  let index = event.position;
+  emits("onMediaSeriesGroupItemFocus", index);
+};
+const release = (): void => {
+  selectedIndex.value = 0;
+  initialized = false;
+  isCollapseExpand.value = false;
+  mediaSeriesRef.value?.release();
+};
+
+const animationRef = ref<QTIAnimation>();
+let alpha = 1;
+function show(delay) {
+  if (alpha == 1) {
+    return;
+  }
+  animationRef.value?.objectAnimator2(
+    "1",
+    QTAnimationValueType.QT_ANIMATION_VALUE_TYPE_FLOAT,
+    QTAnimationPropertyName.QT_ANIMATION_PROPERTY_NAME_ALPHA,
+    alpha,
+    1,
+    delay,
+    -1,
+    0,
+    false,
+    false,
+  );
+  animationRef.value?.startAnimator("1");
+  alpha = 1;
+}
+
+function dismiss(delay) {
+  if (alpha == 0) {
+    return;
+  }
+  animationRef.value?.objectAnimator2(
+    "2",
+    QTAnimationValueType.QT_ANIMATION_VALUE_TYPE_FLOAT,
+    QTAnimationPropertyName.QT_ANIMATION_PROPERTY_NAME_ALPHA,
+    alpha,
+    0,
+    delay,
+    -1,
+    0,
+    false,
+    false,
+  );
+  animationRef.value?.startAnimator("2");
+  alpha = 0;
+}
+
+defineExpose({
+  init,
+  setListData,
+  setItemFocused,
+  setItemSelected,
+  onCollapseItemExpand,
+  release,
+});
+</script>
+
+<style lang="scss" scoped>
+.media-collapse-media-series {
+  width: 1920px;
+  height: 300px;
+  background-color: transparent;
+  .media-collapse-media-series-title {
+    width: 1740px;
+    height: 32px;
+    font-size: 27px;
+    color: white;
+    margin-left: 90px;
+    z-index: 1000;
+  }
+  .media-series {
+    width: 1920px;
+    background-color: transparent;
+    position: absolute;
+    top: 50px;
+    .media-series-item {
+      width: 434px;
+      height: 137px;
+      border-radius: 8px;
+      background-color: rgba(255, 255, 255, 0.1);
+      flex-direction: row;
+      padding-top: 12px;
+      padding-left: 10px;
+      padding-bottom: 12px;
+      .media-series-item-img {
+        width: 202px;
+        height: 114px;
+        border-radius: 8px;
+      }
+      .media-series-item-info {
+        width: 200px;
+        height: 113px;
+        margin-left: 20px;
+        background-color: transparent;
+        flex-direction: row;
+        flex-wrap: wrap;
+        .media-series-item-text {
+          width: 195px;
+          height: 80px;
+          color: rgba(255, 255, 255, 0.5);
+          focus-color: rgba(255, 255, 255, 1);
+          select-color: rgba(255, 255, 255, 1);
+        }
+        .media-series-item-duartion {
+          width: 60px;
+          height: 30px;
+          color: rgba(255, 255, 255, 0.5);
+          focus-color: rgba(255, 255, 255, 1);
+          select-color: rgba(255, 255, 255, 1);
+        }
+        .play_Mark {
+          width: 42px;
+          height: 30px;
+          background-color: transparent;
+          margin-top: 5px;
+          margin-left: 95px;
+        }
+      }
+    }
+  }
+}
+</style>

package/rules/.source/hellotv/src/pages/detail/components/media-player/collapse/media-collapse-order.vue

@@ -0,0 +1,194 @@
+<template>
+  <qt-view class="media-collapse-order" :focusable="false">
+    <span
+      class="media-collapse-order-title"
+      :opacity="isCollapseExpand ? 1 : 0.5"
+      >播放顺序</span
+    >
+    <qt-animation ref="animationRef">
+      <div class="media-collapse-order-content" :clipChildren="false">
+        <qt-list-view
+          ref="orderListViewRef"
+          horizontal
+          :selectChildPosition="selectedIndex"
+          sid="collapse-item-order"
+          class="media-collapse-order-list"
+          @item-focused="onItemFocused"
+          @item-click="onItemClicked"
+        >
+          <media-collapse-list-item type="1" />
+        </qt-list-view>
+      </div>
+    </qt-animation>
+  </qt-view>
+</template>
+
+<script setup lang="ts" name="media-collapse-order">
+import { ref } from "vue";
+import { ESLogLevel, useESLog } from "@extscreen/es3-core";
+import {
+  QTAnimationPropertyName,
+  QTAnimationValueType,
+  QTIAnimation,
+  QTIListView,
+  QTListViewItem,
+} from "@quicktvui/quicktvui3";
+import MediaCollapseListItem from "./media-collapse-list-item.vue";
+const TAG = "media-collapse-order";
+const log = useESLog();
+const isCollapseExpand = ref<boolean>(false);
+const orderListViewRef = ref<QTIListView>();
+const emits = defineEmits(["onCollapseItemFocused", "onCollapseItemClicked"]);
+let itemDataList: Array<QTListViewItem>;
+const selectedIndex = ref<number>(-1);
+const onItemFocused = (e) => {
+  let focused = e.isFocused;
+  if (log.isLoggable(ESLogLevel.DEBUG)) {
+    log.e(TAG, "-------onCollapseItemFocused-----播放顺序--->>>>>", focused);
+  }
+  emits("onCollapseItemFocused", focused);
+};
+const onItemClicked = (e) => {
+  if (log.isLoggable(ESLogLevel.DEBUG)) {
+    log.d(TAG, "-------onCollapseItemClicked-----播放顺序-->>>>", e);
+  }
+  emits("onCollapseItemClicked", e.position, e.item);
+};
+const setListData = (dataList: Array<QTListViewItem>) => {
+  itemDataList = dataList;
+  console.log(dataList, "dataListdataListdataListdataList");
+  orderListViewRef.value?.setListData(dataList);
+};
+const setItemFocused = (position: number): void => {
+  if (log.isLoggable(ESLogLevel.DEBUG)) {
+    log.d(TAG, "-------setItemFocused---播放顺序---->>>>", position);
+  }
+  selectedIndex.value = position;
+  if (!isCollapseExpand.value) {
+    return;
+  }
+  orderListViewRef.value?.setItemFocused(position);
+};
+const setItemSelected = (position: number): void => {
+  selectedIndex.value = position;
+  if (log.isLoggable(ESLogLevel.DEBUG)) {
+    log.d(TAG, "-------setItemSelected---播放顺序---->>>>", position);
+  }
+  if (itemDataList) {
+    for (let i = 0; i < itemDataList.length; i++) {
+      const item = itemDataList[i];
+      if (position == i) {
+        item.iconStyle = {
+          width: 32,
+          height: 32,
+        };
+      } else {
+        item.iconStyle = {
+          width: 0,
+          height: 0,
+        };
+      }
+      orderListViewRef.value?.updateItemRange(i, 1, [item]);
+    }
+  }
+};
+// CollapseItem 展示回调
+const onCollapseItemExpand = (value: boolean, init: boolean) => {
+  if (log.isLoggable(ESLogLevel.DEBUG)) {
+    log.e(TAG, "-------onCollapseItemExpand-----播放顺序--->>>>>", value);
+  }
+  isCollapseExpand.value = value;
+
+  let delay = init ? 0 : 300;
+  if (value) {
+    show(delay);
+  } else {
+    dismiss(delay);
+  }
+
+  if (value) {
+    const focusDelay = delay + 100;
+    setTimeout(() => {
+      setItemFocused(selectedIndex.value);
+    }, focusDelay);
+  }
+};
+
+const animationRef = ref<QTIAnimation>();
+let alpha = 1;
+function show(delay) {
+  if (alpha == 1) {
+    return;
+  }
+  animationRef.value?.objectAnimator2(
+    "1",
+    QTAnimationValueType.QT_ANIMATION_VALUE_TYPE_FLOAT,
+    QTAnimationPropertyName.QT_ANIMATION_PROPERTY_NAME_ALPHA,
+    alpha,
+    1,
+    delay,
+    -1,
+    0,
+    false,
+    false,
+  );
+  animationRef.value?.startAnimator("1");
+  alpha = 1;
+}
+
+function dismiss(delay) {
+  if (alpha == 0) {
+    return;
+  }
+  animationRef.value?.objectAnimator2(
+    "2",
+    QTAnimationValueType.QT_ANIMATION_VALUE_TYPE_FLOAT,
+    QTAnimationPropertyName.QT_ANIMATION_PROPERTY_NAME_ALPHA,
+    alpha,
+    0,
+    delay,
+    -1,
+    0,
+    false,
+    false,
+  );
+  animationRef.value?.startAnimator("2");
+  alpha = 0;
+}
+
+defineExpose({
+  setListData,
+  setItemFocused,
+  setItemSelected,
+  onCollapseItemExpand,
+});
+</script>
+
+<style lang="scss" scoped>
+.media-collapse-order {
+  width: 1920px;
+  height: 160px;
+  background-color: transparent;
+  .media-collapse-order-title {
+    width: 1740px;
+    height: 32px;
+    font-size: 27px;
+    color: white;
+    margin-left: 90px;
+    z-index: 1000;
+  }
+  .media-collapse-order-content {
+    width: 1920px;
+    height: 130px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: transparent;
+    .media-collapse-order-list {
+      width: 1920px;
+      height: 80px;
+      background-color: transparent;
+    }
+  }
+}
+</style>