@quicktvui/ai 1.0.9 → 1.1.0

package/rules/.source/hellotv/src/pages/detail/components/section/item/media-introduction.vue

@@ -0,0 +1,238 @@
+<template>
+  <qt-column class="media-introduction-root">
+    <!-- 标题 -->
+    <qt-text
+      class="title"
+      :duplicateParentState="true"
+      :focusable="false"
+      :fontSize="60"
+      :ellipsizeMode="2"
+      enablePostTask
+      postDelay="200"
+      :lines="1"
+      typeFace="bold"
+      gravity="left|top"
+      :text="title"
+    />
+
+    <!-- 底部介绍 -->
+    <qt-column
+      class="introduction-box"
+      :enableFocusBorder="true"
+      :clipChildren="false"
+      :focusable="true"
+      @click="onClick"
+      @focus="onFocus"
+      :focusScale="ThemeConfig.placeHolderFocusScale"
+    >
+      <!-- :style="{ 'focus-border-color': isFree ? '#FFFFFF' : '#FFD97C' }"-->
+      <!-- 第一行 -->
+      <qt-row :duplicateParentState="true">
+        <div
+          class="item-vip"
+          v-if="!isFree"
+          :gradientBackground="{
+            colors: ['#A06419', '#CDA048'],
+            orientation: 6,
+            cornerRadii4: [4, 4, 4, 4],
+          }"
+        >
+          <qt-text
+            class="item-vip-text"
+            :duplicateParentState="true"
+            :focusable="false"
+            :textSize="24"
+            :ellipsizeMode="2"
+            enablePostTask
+            postDelay="200"
+            :lines="1"
+            gravity="center"
+            text="影视VIP"
+          />
+        </div>
+
+        <div class="item-score" v-if="score">
+          <text-view
+            class="item-score-text"
+            :duplicateParentState="true"
+            :focusable="false"
+            :textSize="24"
+            :ellipsizeMode="2"
+            enablePostTask
+            postDelay="200"
+            :lines="1"
+            gravity="center"
+            :text="score"
+          />
+        </div>
+      </qt-row>
+      <!-- 第二行 -->
+      <qt-text
+        class="item-tag-text"
+        :duplicateParentState="true"
+        :focusable="false"
+        :fontSize="24"
+        :ellipsizeMode="2"
+        enablePostTask
+        postDelay="200"
+        :lines="1"
+        gravity="left|center"
+        :text="tag"
+      />
+
+      <!-- 第三行 -->
+      <qt-text
+        v-if="actors"
+        class="item-actors-text"
+        :duplicateParentState="true"
+        :focusable="false"
+        :textSize="24"
+        :ellipsizeMode="2"
+        enablePostTask
+        postDelay="200"
+        :lines="1"
+        gravity="left|center"
+        :text="actors"
+      />
+
+      <!-- 第四行 -->
+      <qt-text
+        class="item-desc-text"
+        :duplicateParentState="true"
+        :focusable="false"
+        :fontSize="24"
+        :ellipsizeMode="2"
+        enablePostTask
+        postDelay="200"
+        :lines="3"
+        :lineHeight="42"
+        gravity="left|center"
+        :text="description"
+      />
+    </qt-column>
+  </qt-column>
+</template>
+
+<script setup lang="ts" name="media-introduction">
+import { ref } from "vue";
+import { useESRouter } from "@extscreen/es3-router";
+import { IMedia } from "../../../adapter/interface";
+import ThemeConfig from "../../../../../config/theme-config";
+const emits = defineEmits(["onIntroductionFocus"]);
+const router = useESRouter();
+let title = ref<string>("");
+let score = ref<string>("");
+let tag = ref<string>("");
+let actors = ref<string>("");
+let description = ref<string>("");
+let isFree = ref<boolean>(true);
+let m: IMedia;
+
+const init = (media: IMedia) => {
+  m = media;
+  isFree.value = media.vipType == "0" ? true : false;
+  title.value = media.title;
+  score.value = media.score;
+  tag.value = media.tags;
+  actors.value = media.actors;
+  description.value = media.description;
+};
+const onClick = () => {
+  router.push({
+    name: "introduction",
+    params: m,
+  });
+};
+const onFocus = (e) => emits("onIntroductionFocus", e.isFocused);
+defineExpose({
+  init,
+});
+</script>
+
+<style lang="scss" scoped>
+.media-introduction-root {
+  width: 810px;
+  height: 320px;
+  background-color: transparent;
+  margin-top: -15px;
+  .title {
+    width: 790px;
+    height: 72px;
+    margin-left: 20px;
+    color: #ffffff;
+  }
+  .introduction-box {
+    width: 810px;
+    height: 250px;
+    padding-left: 20px;
+    padding-top: 15px;
+    margin-top: 15px;
+    padding-bottom: 10px;
+    focus-border-color: $theme-focus-border-color;
+    border-radius: $theme-img-border;
+    focus-border-radius: $theme-img-border;
+    background-color: transparent;
+    focus-background-color: rgba(255, 255, 255, 0.1);
+    .item-vip {
+      margin-right: 20px;
+      border-color: #f7b500;
+      align-items: center;
+      display: flex;
+      height: 36px;
+      width: 100px;
+      flex-direction: row;
+      justify-content: center;
+    }
+    .item-vip-text {
+      font-size: 24px;
+      color: #ffffff;
+      margin-left: 12px;
+      margin-right: 12px;
+      height: 36px;
+      width: 100px;
+    }
+    .item-score {
+      border-radius: 4px;
+      margin-right: 20px;
+      border-color: #ffffff;
+      border-width: 1px;
+      align-items: center;
+      display: flex;
+      width: 60px;
+      height: 32px;
+      flex-direction: row;
+      justify-content: center;
+      background-color: rgba(255, 255, 255, 0.06);
+    }
+    .item-score-text {
+      top: -1px;
+      font-size: 24px;
+      color: #ffffff;
+      width: 60px;
+      height: 32px;
+    }
+    .item-tag-text {
+      color: rgba(255, 255, 255, 0.6);
+      focus-color: white;
+      height: 34px;
+      width: 668px;
+      margin-top: 15px;
+      margin-bottom: 8px;
+    }
+    .item-actors-text {
+      height: 28px;
+      width: 814px;
+      color: rgba(255, 255, 255, 0.6);
+      focus-color: white;
+      margin-top: 5px;
+    }
+    .item-desc-text {
+      color: rgba(255, 255, 255, 0.6);
+      focus-color: white;
+      width: 790px;
+      height: 118px;
+      margin-top: 5px;
+    }
+  }
+}
+</style>

package/rules/.source/hellotv/src/pages/detail/components/section/item/media-series.vue

@@ -0,0 +1,308 @@
+<template>
+  <qt-view
+    class="media-series-root"
+    :clipChildren="false"
+    :clipPadding="false"
+    :focusable="false"
+    :visible="visible"
+  >
+    <!-- 选集标题 -->
+    <div class="media-series-title" :focusable="false">
+      <qt-text
+        class="media-series-title-text"
+        :focusable="false"
+        :fontSize="40"
+        text="选集"
+      />
+    </div>
+    <!-- 选集内容 -->
+    <qt-media-series
+      ref="mediaSeriesRef"
+      class="media-series"
+      :clipChildren="false"
+      :focusable="false"
+      :visible="visible"
+      :textColors="{
+        color: ThemeConfig.textNormalColor,
+        focusColor: ThemeConfig.textFocusColor,
+        selectColor: ThemeConfig.textSelectColor,
+      }"
+      :markColor="ThemeConfig.textFocusColor"
+      :gradientBackground="{
+        colors: ThemeConfig.btnGradientNormalColor,
+        cornerRadius: 8,
+        orientation: 6,
+      }"
+      :gradientFocusBackground="{
+        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"
+          :enableFocusBorder="true"
+          :focusScale="ThemeConfig.placeHolderFocusScale"
+        >
+          <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-view>
+</template>
+
+<script setup lang="ts" name="MediaSeries">
+import { ref, onMounted, onUnmounted } from "vue";
+import { ESLogLevel, useESEventBus, useESLog } from "@extscreen/es3-core";
+import { QTIMediaSeries, QTMediaSeriesEvent } from "@quicktvui/quicktvui3";
+import { IMedia, IMediaItem } from "../../../adapter/interface";
+import ThemeConfig from "../../../../../config/theme-config";
+import {
+  buildMediaSeriesType,
+  buildMediaSeriesGroup,
+  buildMediaSeriesStyleType,
+  buildMediaSeriesData,
+  buildMediaSeriesList,
+} from "../../../adapter/index";
+import detailManager from "../../../api/index";
+const TAG = "MediaSeriesView";
+const emits = defineEmits([
+  "onMediaSeriesItemLoad",
+  "onMediaSeriesItemFocus",
+  "onMediaSeriesItemClick",
+  "onMediaSeriesGroupItemFocus",
+]);
+const log = useESLog();
+const eventbus = useESEventBus();
+const mediaSeriesRef = ref<QTIMediaSeries>();
+let m: IMedia;
+let visible = ref(false);
+let selectedIndex = ref(0);
+const dataMap = new Map<number, Array<IMediaItem>>();
+const init = (media: IMedia) => {
+  m = media;
+  if (media.episodes > 1) visible.value = true;
+  mediaSeriesRef.value?.setInitData(
+    buildMediaSeriesType(media.mediaSeriesType),
+    buildMediaSeriesGroup(),
+    buildMediaSeriesStyleType(),
+    buildMediaSeriesData(media),
+  );
+  if (!visible.value) {
+    getMediaList(m.episodesId, 1);
+  }
+};
+onMounted(() => {
+  eventbus.on("onMediaSeriesLoadData", onMediaSeriesLoadData);
+});
+onUnmounted(() => {
+  eventbus.off("onMediaSeriesLoadData", onMediaSeriesLoadData);
+});
+const onMediaSeriesLoadData = (page: number) => {
+  page = page || 1;
+  getMediaList(m.episodesId, page);
+};
+const getMediaList = (episodesId: string, pageNo: number) => {
+  if (dataMap.has(pageNo)) {
+    //TODO 等待左图右文修改获取数据的bug
+    return;
+  }
+  detailManager.getMediaSeriesList(episodesId, pageNo, 10).then(
+    (mediaList: Array<IMediaItem>) => {
+      dataMap.set(pageNo, mediaList);
+      if (log.isLoggable(ESLogLevel.DEBUG)) {
+        log.d(
+          TAG,
+          "-------getMediaList----success------>>>>>",
+          pageNo,
+          mediaList,
+        );
+      }
+      mediaSeriesRef.value?.setPageData(
+        pageNo - 1,
+        buildMediaSeriesList(mediaList),
+      );
+      setSelected(0);
+      emits("onMediaSeriesItemLoad", pageNo, mediaList);
+    },
+    (error) => {
+      if (log.isLoggable(ESLogLevel.DEBUG)) {
+        log.d(TAG, "-------getMediaList----error------>>>>>", error);
+      }
+    },
+  );
+};
+const onLoadData = (event: QTMediaSeriesEvent) => {
+  const page = event.page || 1;
+  getMediaList(m.episodesId, page);
+};
+const onItemClick = (event: QTMediaSeriesEvent) => {
+  if (log.isLoggable(ESLogLevel.DEBUG)) {
+    log.d(TAG, "--------onItemClick----->>>>>", event);
+  }
+  let index = event.position;
+  let data = event.data;
+  emits("onMediaSeriesItemClick", index, data);
+};
+const onItemFocused = (event: QTMediaSeriesEvent) => {
+  if (log.isLoggable(ESLogLevel.DEBUG)) {
+    log.d(TAG, "-------onItemFocused----->>>>>", event);
+  }
+  let index = event.position;
+  emits("onMediaSeriesItemFocus", index);
+};
+const onGroupItemFocused = (event: QTMediaSeriesEvent) => {
+  let index = event.position;
+  emits("onMediaSeriesGroupItemFocus", index);
+};
+const setSelected = (position: number): void => {
+  if (log.isLoggable(ESLogLevel.DEBUG)) {
+    log.d(TAG, "-------选集组件----setSelected------>>>>>" + position);
+  }
+  selectedIndex.value = position;
+  mediaSeriesRef.value?.setSelected(selectedIndex.value);
+};
+const scrollTo = (position: number): void => {
+  if (log.isLoggable(ESLogLevel.DEBUG)) {
+    log.d(TAG, "-------选集组件----scrollTo------>>>>>" + position);
+  }
+  mediaSeriesRef.value?.scrollTo(position);
+};
+const getSelectedPosition = (): number => {
+  return selectedIndex.value;
+};
+const requestFocus = (position: number): void => {
+  mediaSeriesRef.value?.requestFocus(position);
+};
+const release = (): void => {
+  if (log.isLoggable(ESLogLevel.DEBUG)) {
+    log.d(TAG, "-------选集组件----release------>>>>>");
+  }
+  dataMap.clear();
+  mediaSeriesRef.value?.release();
+};
+defineExpose({
+  init,
+  setSelected,
+  scrollTo,
+  getSelectedPosition,
+  requestFocus,
+  release,
+});
+</script>
+
+<style lang="scss" scoped>
+.media-series-root {
+  width: 1920px;
+  height: 299px;
+  margin-top: 30px;
+  background-color: transparent;
+  .media-series-title {
+    flex-direction: row;
+    align-items: center;
+    justify-content: flex-start;
+    margin-left: 80px;
+    width: 180px;
+    height: 50px;
+    .media-series-title-text {
+      width: 180px;
+      height: 50px;
+      color: #fff;
+    }
+  }
+  .media-series {
+    width: 1920px;
+    margin-top: 40px;
+    background-color: transparent;
+    .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/section/item/player-placeholder.vue

@@ -0,0 +1,88 @@
+<template>
+  <div
+    class="player-placeholder-root"
+    ref="placeholder"
+    @click="onClick"
+    @focus="onFocus"
+    name="placeholder"
+    :autofocus="autofocus"
+    :focusable="true"
+    :blockFocusDirections="['left']"
+    :enableFocusBorder="true"
+  >
+    <qt-view class="player-placeholder-mask" :focusable="false"></qt-view>
+    <qt-image
+      class="player-placeholder-img"
+      v-if="isShowPlayerPlaceholderImg"
+      :duplicateParentState="true"
+      :focusable="false"
+      :enableFocusBorder="false"
+      :src="playerPplaceholderUrl"
+    />
+  </div>
+</template>
+
+<script setup lang="ts" name="PlayerPlaceholder">
+import { ref } from "vue";
+import { ESFocusable, useESFocus } from "@extscreen/es3-core";
+import { IMedia } from "../../../adapter/interface";
+const emits = defineEmits(["onPlaceholderClick", "onPlaceholderFocus"]);
+const focus = useESFocus();
+const placeholder = ref<ESFocusable>();
+let autofocus = ref<boolean>(false);
+let isFree = ref<boolean>(true);
+let isShowPlayerPlaceholderImg = ref<boolean>(true);
+let playerPplaceholderUrl = ref<string>("");
+
+const showPlayerPlaceholderImg = (value: boolean) => {
+  isShowPlayerPlaceholderImg.value = value;
+};
+const init = (media: IMedia) => {
+  playerPplaceholderUrl.value = media.cover;
+};
+const requestFocus = () => {
+  if (placeholder.value) focus.requestFocusDirectly(placeholder.value!);
+};
+const setAutofocus = (enable: boolean) => (autofocus.value = enable);
+const onClick = () => emits("onPlaceholderClick");
+const onFocus = (e) => emits("onPlaceholderFocus", e.isFocused);
+
+defineExpose({
+  init,
+  requestFocus,
+  setAutofocus,
+  showPlayerPlaceholderImg,
+});
+</script>
+
+<style lang="scss" scoped>
+.player-placeholder-root {
+  width: 894px;
+  height: 504px;
+  margin-left: 78px;
+  margin-top: -2px;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  focus-border-color: $theme-focus-border-color;
+  focus-border-width: 3;
+  focus-border-radius: $theme-img-border;
+  .player-placeholder-mask {
+    width: 890px;
+    height: 500px;
+    position: absolute;
+    left: 2px;
+    top: 2px;
+    background-color: rgba(255, 255, 255, 0.1);
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+  }
+  .player-placeholder-img {
+    width: 890px;
+    height: 500px;
+    background-color: transparent;
+  }
+}
+</style>