@quicktvui/ai 1.0.9 → 1.1.1

package/rules/.source/hellotv/src/pages/detail-full-screen/components/media-info.vue

@@ -0,0 +1,263 @@
+<template>
+  <qt-view class="media-info">
+    <!-- 标题 -->
+    <qt-text
+      class="title"
+      :duplicateParentState="true"
+      :focusable="false"
+      :fontSize="60"
+      :ellipsizeMode="2"
+      enablePostTask
+      postDelay="200"
+      :lines="1"
+      typeFace="bold"
+      gravity="left|top"
+      :text="title"
+    />
+    <!-- tag -->
+    <qt-text
+      class="tag"
+      :duplicateParentState="true"
+      :focusable="false"
+      :fontSize="28"
+      :ellipsizeMode="2"
+      enablePostTask
+      postDelay="200"
+      :lines="1"
+      gravity="left|center"
+      :text="tag"
+    />
+    <!-- button-menu-list -->
+    <qt-list-view
+      class="menu-list"
+      ref="listRef"
+      horizontal
+      padding="0,0,0,0"
+      @item-click="onItemClick"
+      :enableSelectOnFocus="false"
+    >
+      <qt-view
+        class="menu-list-item"
+        :type="1"
+        :focusable="true"
+        flexStyle="${style}"
+        :focusScale="ThemeConfig.placeHolderFocusScale"
+        eventFocus
+        eventClick
+      >
+        <div
+          showOnState="focused"
+          class="menu-list-item-bg"
+          duplicateParentState
+          gradientBackground="${gradientBackground}"
+          flexStyle="${style}"
+        />
+        <qt-view duplicateParentState class="menu-list-item-img">
+          <img
+            src="${focusIcon}"
+            duplicateParentState
+            showOnState="focused"
+            :focusable="false"
+          />
+          <img
+            src="${icon}"
+            duplicateParentState
+            :showOnState="['normal', 'selected']"
+            :focusable="false"
+          />
+        </qt-view>
+        <div
+          duplicateParentState
+          class="menu-list-item-text-box"
+          :focusable="false"
+          autoWidth
+        >
+          <qt-text
+            class="menu-list-item-text"
+            autoWidth
+            text="${text}"
+            :focusable="false"
+            :showOnState="['normal', 'selected']"
+            duplicateParentState
+          />
+          <qt-text
+            class="menu-list-item-text"
+            autoWidth
+            text="${text}"
+            typeface="bold"
+            showOnState="focused"
+            :focusable="false"
+            duplicateParentState
+          />
+        </div>
+      </qt-view>
+    </qt-list-view>
+  </qt-view>
+</template>
+
+<script setup lang="ts" name="media-info">
+import { ref } from "vue";
+// import { useESRouter } from '@extscreen/es3-router'
+import { QTIListView, QTListViewItem } from "@quicktvui/quicktvui3";
+import ThemeConfig from "../../../config/theme-config";
+// import { toast } from '@extscreen/es3-core';
+import { IMedia } from "../adapter/interface";
+import ic_full_normal from "../../../assets/detail/ic_full_normal.png";
+import ic_full_focused from "../../../assets/detail/ic_full_focused.png";
+import ic_fav_normal from "../../../assets/detail/ic_collect_normal.png";
+import ic_fav_collected from "../../../assets/detail/ic_collect_focused.png";
+import ic_fav_focused from "../../../assets/detail/ic_collect_focused.png";
+import ic_vip_normal from "../../../assets/detail/ic_vip_normal.png";
+import ic_vip_focused from "../../../assets/detail/ic_vip_focused.png";
+import ic_info_normal from "../../../assets/detail/ic_info_normal.png";
+import ic_info_focused from "../../../assets/detail/ic_info_focused.png";
+// const props = defineProps({
+//   isCollected: Boolean
+// })
+// const router = useESRouter()
+let title = ref<string>("");
+let tag = ref<string>("");
+const listRef = ref<QTIListView>();
+let isCollect = ref(false);
+let listData: QTListViewItem[] = [];
+// let m: IMedia
+const init = (media: IMedia) => {
+  // m = media
+  title.value = media.title;
+  tag.value = media.tags;
+  listData = [
+    {
+      type: 1,
+      text: "全屏",
+      decoration: { left: 80, right: 30 },
+      menuType: "full",
+      gradientBackground: {
+        colors: ThemeConfig.btnGradientFocusColor,
+        orientation: 6,
+        cornerRadius: ThemeConfig.focusBorderCorner,
+      },
+      icon: "file://" + ic_full_normal,
+      focusIcon: "file://" + ic_full_focused,
+      style: { width: 140, height: 140 },
+    },
+    {
+      type: 1,
+      menuType: "collect",
+      decoration: { right: 30 },
+      gradientBackground: {
+        colors: ThemeConfig.btnGradientFocusColor,
+        orientation: 6,
+        cornerRadius: ThemeConfig.focusBorderCorner,
+      },
+      text: isCollect.value ? "已收藏" : "收藏",
+      icon: !isCollect.value
+        ? "file://" + ic_fav_normal
+        : "file://" + ic_fav_collected,
+      focusIcon: isCollect.value
+        ? "file://" + ic_fav_collected
+        : "file://" + ic_fav_focused,
+      style: { width: 140, height: 140 },
+    },
+    {
+      type: 1,
+      text: "付费观看",
+      menuType: "vip",
+      decoration: { right: 30 },
+      gradientBackground: {
+        colors: ["#FFE398", "#EEB364"],
+        orientation: 6,
+        cornerRadius: ThemeConfig.focusBorderCorner,
+      },
+      icon: "file://" + ic_vip_normal,
+      focusIcon: "file://" + ic_vip_focused,
+      style: { width: 226, height: 140 },
+    },
+    {
+      type: 1,
+      text: "视频详情",
+      menuType: "info",
+      gradientBackground: {
+        colors: ThemeConfig.btnGradientFocusColor,
+        orientation: 6,
+        cornerRadius: ThemeConfig.focusBorderCorner,
+      },
+      icon: "file://" + ic_info_normal,
+      focusIcon: "file://" + ic_info_focused,
+      style: { width: 140, height: 140 },
+    },
+  ];
+  // if(media.vipType == '0') listData = listData.splice(0, 2)
+  listRef.value?.setListData(listData);
+};
+const onItemClick = () => {};
+defineExpose({
+  init,
+});
+</script>
+
+<style lang="scss" scoped>
+.media-info {
+  width: 1920px;
+  height: 293px;
+  background-color: transparent;
+  margin-top: -2px;
+  .title {
+    width: 1760px;
+    height: 72px;
+    margin-left: 80px;
+    color: #ffffff;
+    background-color: transparent;
+  }
+  .tag {
+    width: 1760px;
+    height: 36px;
+    margin-left: 80px;
+    margin-top: 25px;
+    color: #ffffff;
+  }
+  .menu-list {
+    width: 1920px;
+    height: 140px;
+    background-color: transparent;
+    margin-top: 20px;
+    .menu-list-item {
+      border-radius: 16px;
+      background-color: rgba(0, 0, 0, 0.35);
+      // focus-background-color: rgba(255,255,255,1);
+      align-items: center;
+      justify-content: center;
+      .menu-list-item-bg {
+        position: absolute;
+        background-color: transparent;
+      }
+      .menu-list-item-img {
+        width: 50px;
+        height: 50px;
+        background-color: transparent;
+        img {
+          width: 50px;
+          height: 50px;
+          background-color: transparent;
+          position: absolute;
+          top: 0;
+          left: 0;
+        }
+      }
+      .menu-list-item-text-box {
+        height: 34px;
+        position: relative;
+        background-color: transparent;
+        margin-top: 5px;
+        .menu-list-item-text {
+          height: 34px;
+          font-size: 28px;
+          color: rgba(255, 255, 255, 0.55);
+          focus-color: #13161b;
+          font-size: 28px;
+          position: absolute;
+        }
+      }
+    }
+  }
+}
+</style>

package/rules/.source/hellotv/src/pages/detail-full-screen/components/media-player.vue

@@ -0,0 +1,42 @@
+<template>
+  <media-player-view
+    ref="playerManagerRef"
+    class="media-def-player"
+    :initPlayerWindowType="2"
+    :isShowPlayerController="true"
+    :menuList="[]"
+    @onPlayerPlayMedia="onPlayerPlayMedia"
+    @onPlayerCompleted="onPlayerCompleted"
+    @onPlayerInterceptError="onPlayerInterceptError"
+    @onPlayerProgressChanged="onPlayerProgressChanged"
+    @onPlayerPlaying="onPlayerPlaying"
+    @onPlayerNoMediaCanPlay="onPlayerNoMediaCanPlay"
+    @onPlayerPlayMediaListModeChanged="onPlayerPlayMediaListModeChanged"
+  />
+</template>
+
+<script setup lang="ts" name="media-player">
+// import { onBeforeUnmount, ref, onMounted, nextTick, toRaw } from 'vue'
+// import { ESKeyEvent } from "@extscreen/es3-core";
+// import BuildConfig from "../../../config/build-config";
+// import detailManager from '../../../api/detail/detail-manager'
+import MediaPlayerView from "../../../components/media/view/media-player-view.vue";
+// const TAG = 'DetailFullScreenMediaPlayer'
+
+const onPlayerPlayMedia = () => {};
+const onPlayerCompleted = () => {};
+const onPlayerInterceptError = () => {};
+const onPlayerProgressChanged = () => {};
+const onPlayerPlaying = () => {};
+const onPlayerNoMediaCanPlay = () => {};
+const onPlayerPlayMediaListModeChanged = () => {};
+defineExpose({});
+</script>
+
+<style lang="scss" scoped>
+.media-def-player {
+  position: absolute;
+  z-index: 1;
+  background-color: transparent;
+}
+</style>

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

@@ -0,0 +1,26 @@
+<template>
+  <qt-view class="media-series-section" :clipChildren="false"> </qt-view>
+</template>
+
+<script setup lang="ts" name="media-series-section">
+// import { ref } from 'vue'
+// import { useESRuntime } from '@extscreen/es3-core'
+// import { QTMediaSeries} from '@quicktvui/quicktvui3'
+import { IMedia } from "../adapter/interface";
+// import detailManager from '../api/inidex'
+// import ThemeConfig from "../../../config/theme-config";
+
+//**************************初始化入口**************************
+const init = async (media: IMedia) => {};
+
+defineExpose({
+  init,
+});
+</script>
+
+<style lang="scss" scoped>
+.media-series-section {
+  width: 1920px;
+  background-color: transparent;
+}
+</style>

package/rules/.source/hellotv/src/pages/detail-full-screen/components/recommend-item.vue

@@ -0,0 +1,167 @@
+<template>
+  <qt-view
+    class="recommend-item-root"
+    flexStyle="${style}"
+    layout="${layout}"
+    name="detail-recommend-item"
+    :focusable="true"
+    :focusScale="ThemeConfig.placeHolderFocusScale"
+    eventFocus
+    eventClick
+  >
+    <!-- 海报图 -->
+    <qt-view
+      class="recommend-item-img"
+      :focusable="false"
+      :enableFocusBorder="true"
+      duplicateParentState
+    >
+      <qt-image
+        class="recommend-item-img"
+        flexStyle="${image.style}"
+        src="${image.src}"
+        :focusable="false"
+        :postDelay="300"
+      />
+    </qt-view>
+    <!-- 角标 -->
+    <img
+      class="recommend-item-corner-img"
+      :postDelay="300"
+      flexStyle="${corner.style}"
+      src="${recommend-item}"
+      :focusable="false"
+    />
+    <div
+      class="recommend-item-corner-text-box"
+      :focusable="false"
+      showIf="${corner.enable==true}"
+    >
+      <qt-text
+        class="recommend-item-corner-text"
+        :focusable="false"
+        :textSize="20"
+        :ellipsizeMode="2"
+        :lines="1"
+        typeface="bold"
+        gravity="center"
+        :postDelay="100"
+        gradientBackground="${corner.background}"
+        autoWidth
+        text="${corner.text}"
+      />
+    </div>
+    <!-- 评分 -->
+    <qt-view
+      class="recommend-item-score"
+      :focusable="false"
+      :gradientBackground="{
+        colors: ['#00000000', '#E5000000'],
+        cornerRadii4: [0, 0, 9, 9],
+      }"
+    >
+      <qt-text
+        class="recommend-item-score-text"
+        :fontSize="24"
+        :paddingRect="[15, 0, 0, 6]"
+        text="${score}"
+        :focusable="false"
+      />
+    </qt-view>
+    <!-- 标题 -->
+    <qt-view
+      class="recommend-item-title"
+      :duplicateParentState="true"
+      :focusable="false"
+    >
+      <qt-text
+        class="recommend-item-title-text"
+        :fontSize="30"
+        :ellipsizeMode="2"
+        :lines="1"
+        :duplicateParentState="true"
+        :paddingRect="[0, 14, 0, 0]"
+        text="${title.text}"
+        :focusable="false"
+        :select="true"
+      />
+    </qt-view>
+  </qt-view>
+</template>
+
+<script setup lang="ts" name="RecommendItem">
+import ThemeConfig from "../../../config/theme-config";
+</script>
+
+<style lang="scss" scoped>
+.recommend-item-root {
+  background-color: transparent;
+  .recommend-item-img {
+    border-radius: 9px;
+    focus-border-color: #ffffff;
+    focus-border-style: solid;
+    z-index: 1;
+    background-color: rgba(255, 255, 255, 0.1);
+  }
+  .recommend-item-corner-img {
+    position: absolute;
+    z-index: 1000;
+    top: 6px;
+    right: 6px;
+  }
+  .recommend-item-corner-text-box {
+    width: 260px;
+    height: 36px;
+    background-color: transparent;
+    position: absolute;
+    left: 0;
+    right: 0.1;
+    flex-direction: row-reverse;
+    z-index: 99999;
+    .recommend-item-corner-text {
+      padding: 4px 8px;
+      margin: 4px;
+      z-index: 1000;
+      height: 36px;
+      color: #ffffff;
+    }
+  }
+  .recommend-item-score {
+    background-color: transparent;
+    z-index: 1000;
+    height: 65px;
+    position: absolute;
+    left: 0;
+    bottom: 54px;
+    .recommend-item-score-text {
+      width: 260px;
+      height: 32px;
+      top: 28px;
+      color: #fc5e1b;
+      z-index: 1000;
+      background-color: transparent;
+      position: absolute;
+    }
+  }
+  .recommend-item-title {
+    width: 260px;
+    height: 54px;
+    position: absolute;
+    left: 0;
+    top: 368px;
+    z-index: 110;
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+    border-bottom-left-radius: 9px;
+    border-bottom-right-radius: 9px;
+    background-color: transparent;
+    .recommend-item-title-text {
+      width: 260px;
+      height: 54px;
+      background-color: transparent;
+      color: rgba(255, 255, 255, 0.5);
+      focus-color: rgba(255, 255, 255, 1);
+    }
+  }
+}
+</style>

package/rules/.source/hellotv/src/pages/detail-full-screen/index.vue

@@ -0,0 +1,163 @@
+<template>
+  <qt-view class="detail-full-screen" ref="detailRef">
+    <!-- 播放器 -->
+    <media-player
+      ref="mediaPlayerRef"
+      @emStartPlay="emStartPlayFn"
+      @onOver="onOverFn"
+    />
+    <!-- 页面内容 -->
+    <qt-view class="content">
+      <!-- 顶部按钮 -->
+      <top-view :logoRight="true" @focus="onTopBtnFocus"></top-view>
+      <!-- 详情页基本信息及按钮 -->
+      <media-info ref="mediaInfoRef"></media-info>
+      <!-- bottom waterfall 选集列表及推荐列表-->
+      <qt-waterfall
+        ref="waterfallRef"
+        class="detail-waterfall"
+        enablePlaceholder
+        :endHintEnabled="false"
+        :enableKeepFocus="false"
+        :qtTabSectionEnable="qtTabSectionEnable"
+        :blockFocusDirections="['left', 'right', 'down']"
+        @onItemClick="onWaterfallItemClick"
+        :verticalFadingEdgeEnabled="true"
+        :fadingEdgeLength="100"
+      >
+        <template v-slot:vue-section>
+          <!-- 选集自定义vue-section -->
+          <media-series-section
+            ref="mediaSeriesSectionRef"
+          ></media-series-section>
+        </template>
+        <template v-slot:list-item>
+          <!-- 推荐列表item -->
+          <recommend-item :type="10011"></recommend-item>
+        </template>
+      </qt-waterfall>
+    </qt-view>
+    <!-- 骨架屏 -->
+    <div class="skeleton" v-if="isShowSkeleton">
+      <img src="../../assets/detail/skeleton.png" :focusable="false" />
+    </div>
+  </qt-view>
+</template>
+
+<script setup lang="ts" name="detail-full-screen">
+import { ref, nextTick } from "vue";
+import { ESKeyEvent, useESLog, useESRuntime } from "@extscreen/es3-core";
+import { useESRouter } from "@extscreen/es3-router";
+import MediaPlayer from "./components/media-player.vue";
+import TopView from "../../components/top-view.vue";
+import MediaInfo from "./components/media-info.vue";
+import MediaSeriesSection from "./components/media-series-section.vue";
+import RecommendItem from "./components/recommend-item.vue";
+// import BuildConfig from '../../config/build-config'
+import detailManager from "./api/index";
+import { IMedia } from "./adapter/interface";
+
+// const TAG = 'DetailFullScreen'
+const log = useESLog();
+const runtime = useESRuntime();
+const router = useESRouter();
+// let deviceId = runtime.getRuntimeDeviceId()??''
+const qtTabSectionEnable = {
+  tabEnable: false,
+  flexSectionEnable: false,
+  flexSection: {
+    qtPosterEnable: false,
+    qtPluginItemEnable: false,
+    cardItemEnable: false,
+  },
+  listSectionEnable: true,
+  listSectionItem: {
+    qtPosterEnable: false,
+  },
+  loadingSectionEnable: true,
+  endSectionEnable: true,
+  blankSectionEnable: false,
+  cardSectionEnable: false,
+  pluginSectionEnable: false,
+  vueSectionEnable: true,
+  itemStoreEnable: false,
+};
+let media: IMedia;
+const mediaPlayerRef = ref();
+const mediaInfoRef = ref();
+const mediaSeriesSectionRef = ref();
+//let currentPlayIndex = -1 // 当前播放视频的index
+let currenId = ref("");
+let isShowSkeleton = ref(true);
+
+//  生命周期
+//  ***************************初始化入口 onESCreate***************************
+const onESCreate = (params) => {
+  currenId.value = params && params.id ? params.id : "1584863712586579969";
+  getDetail();
+};
+//获取详情页数据
+const getDetail = () => {
+  detailManager.getMediaDetail(currenId.value).then((res: IMedia) => {
+    console.log(res, "getDetailgetDetailgetDetail");
+    media = res;
+    media.mediaSeriesType = 1; //设置选集类型
+    mediaInfoRef.value?.init(media); //初始化基本介绍板块数据
+    nextTick(async () => {
+      //加载waterfall 板块数据
+      //获取播放历史
+      // detailManager.getRecordData(media.id, deviceId, 'history').then((result) => {
+      //   if(result){
+      //     media.history = result
+      //     currentPlayIndex = Math.min(Math.max((Number(result.episode)||0)-1, 0), Math.max(media.episodes-1, 0))
+      //     media._prevPlayIndex = currentPlayIndex
+      //   }else{
+      //     currentPlayIndex = 0
+      //     media._prevPlayIndex = currentPlayIndex
+      //   }
+      // }).catch(() => {
+      //   currentPlayIndex = 0
+      //   media._prevPlayIndex = currentPlayIndex
+      // })
+      // mediaPlayerRef.value?.play(media)
+      //延迟加载相关推荐列表数据更新相关推荐板块 不影响主页面展示速度
+      // getRecommendList(media.id)
+      isShowSkeleton.value = false;
+    });
+  });
+};
+
+const onTopBtnFocus = () => {};
+const emStartPlayFn = () => {};
+const onOverFn = () => {};
+
+const onWaterfallItemClick = () => {};
+
+const onESResume = () => {};
+const onESRestart = () => {};
+const onESPause = () => {};
+const onESStop = () => {};
+const onESDestroy = () => {};
+//  按键
+const onKeyDown = (keyEvent: ESKeyEvent) => {};
+const onKeyUp = (keyEvent: ESKeyEvent) => {};
+//  返回
+const onBackPressed = () => {
+  router.back();
+  return true;
+};
+
+defineExpose({
+  onESCreate,
+  onESRestart,
+  onESPause,
+  onESStop,
+  onESResume,
+  onESDestroy,
+  onKeyDown,
+  onKeyUp,
+  onBackPressed,
+});
+</script>
+
+<style lang="scss" src="./scss/index.scss"></style>

package/rules/.source/hellotv/src/pages/detail-full-screen/scss/index.scss

@@ -0,0 +1,41 @@
+$home-width:1920px;
+$home-height:1080px;
+
+.detail-full-screen{
+  width: $home-width;
+  height: $home-height;
+  background-color: $theme-bg-color;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  .content{
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 1920px;
+    height: 1080px;
+    background-color: transparent;
+    .detail-waterfall{
+      width: 1920px;
+      height: 452px;
+      background-color: transparent;
+      position: absolute;
+      left: 0;
+      bottom: 0;
+    }
+  }
+  .skeleton{
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 1920px;
+    height: 1080px;
+    background-color: transparent;
+    img{
+      width: 1920px;
+      height: 1080px;
+    }
+  }
+}
+