@quicktvui/ai 1.0.9 → 1.1.0

package/rules/.source/hellotv/src/pages/detail/adapter/media-player.ts

@@ -0,0 +1,378 @@
+import detailManager from "../api";
+import { IMediaItem, IMediaUrl } from "./interface";
+import { isTrySee } from "./index";
+import { ESMediaItem } from "@extscreen/es3-player-manager";
+import {
+  ESIPlayerInterceptor,
+  ESMediaSource,
+  ESPlayerDefinition,
+  ESPlayerPlayMode,
+  ESPlayerRate,
+  ESMediaSourceList,
+  ESPlayerInterceptorType,
+  ESPlayerInterceptResult,
+} from "@extscreen/es3-player";
+import { DetailApi } from "./interface";
+import { QTCollapse, QTListViewItem } from "@quicktvui/quicktvui3";
+import { QTListViewItemDecoration } from "@quicktvui/quicktvui3/dist/src/list-view/core/QTListViewItemDecoration";
+
+//--------------------------------------播放器数据-------------------------------------------------
+export function buildMediaList(
+  page: number,
+  mediaList: Array<IMediaItem>,
+  mediaItemInterceptors: Array<ESIPlayerInterceptor>,
+  media?: any,
+): Array<ESMediaItem> {
+  const list = mediaList;
+  const itemList: Array<ESMediaItem> = [];
+  if (list && list.length) {
+    for (let i = 0; i < list.length; i++) {
+      const m = list[i];
+      const item = buildMediaItem(page, i, m, mediaItemInterceptors, media);
+      itemList.push(item);
+    }
+  }
+  return itemList;
+}
+export function buildMediaItem(
+  page: number,
+  index: number,
+  mediaItem: IMediaItem,
+  mediaItemInterceptors: Array<ESIPlayerInterceptor>,
+  media?: any,
+): ESMediaItem {
+  const mediaIndex = Number((page - 1) * 10) + Number(index);
+  return {
+    id: mediaItem.id,
+    index: mediaIndex,
+    title: mediaItem.title,
+    interceptors: mediaItemInterceptors,
+    analyzeParams: {
+      //   platformId: media.platformId,
+      metaId: media.id,
+      //   assetLongId: mediaItem.rawData.assetLongId,
+      episodeId: mediaItem.id,
+      episode: mediaItem.episode,
+      assetLongTitle: media.title,
+      episodeTitle: mediaItem.subTitle,
+      assetLongCoverH: media.cover,
+      assetLongCoverV: media.cover,
+    },
+    position: {
+      support:
+        media._prevPlayIndex >= 0 && media._prevPlayIndex == mediaIndex
+          ? true
+          : false,
+      position: media.history?.viewedDuration,
+    },
+    vipType: mediaItem.vipType,
+  };
+}
+//build播放器数据
+export function buildMediaSourceList(
+  mediaList: Array<IMediaUrl>,
+): Array<ESMediaSource> {
+  const itemList: Array<ESMediaSource> = [];
+  if (mediaList && mediaList.length) {
+    for (let i = 0; i < mediaList.length; i++) {
+      const m = mediaList[i];
+      const item = buildMediaSource(m);
+      itemList.push(item);
+    }
+  }
+  return itemList;
+}
+export function buildMediaSource(mediaUrl: IMediaUrl): ESMediaSource {
+  let definition = ESPlayerDefinition.ES_PLAYER_DEFINITION_UNKNOWN;
+  switch (parseInt(mediaUrl.definition)) {
+    case 0:
+      definition = ESPlayerDefinition.ES_PLAYER_DEFINITION_SD;
+      break;
+    case 1:
+      definition = ESPlayerDefinition.ES_PLAYER_DEFINITION_HD;
+      break;
+    case 2:
+      definition = ESPlayerDefinition.ES_PLAYER_DEFINITION_FULL_HD;
+      break;
+    case 3:
+      definition = ESPlayerDefinition.ES_PLAYER_DEFINITION_FOURK;
+      break;
+  }
+
+  return {
+    uri: mediaUrl.playUrl,
+    definition: definition,
+  };
+}
+//media-player Interceptor 鉴权 + 请求播放地址
+export function createESPlayerMediaSourceListInterceptor(): ESIPlayerInterceptor {
+  function intercept(...params: Array<any>): Promise<ESPlayerInterceptResult> {
+    const mediaItem = params[0] as ESMediaItem;
+    return new Promise<ESPlayerInterceptResult>((resolve, reject) => {
+      if (mediaItem.vipType == "0" || (mediaItem.vipType != "0" && isTrySee)) {
+        detailManager
+          .getPlayUrl(mediaItem.id + "", "2")
+          .then((res) => {
+            let mediaUrlList = res;
+            mediaUrlList = [
+              {
+                definition: 2,
+                playUrl:
+                  "https://extcdn.hsrc.tv/channelzero/2024/02/05/110e7a35-1ba3-4d87-a8ea-0f462de40866.mp4",
+              },
+            ];
+            const mediaSourceList: ESMediaSourceList = {
+              index: -1,
+              list: buildMediaSourceList(mediaUrlList),
+            };
+            const result: ESPlayerInterceptResult = {
+              result: {
+                mediaSourceList: mediaSourceList,
+              },
+            };
+            resolve(result);
+          })
+          .catch(() => {
+            reject({ errorCode: -1, errorMessage: "播放地址错误" });
+          });
+      } else {
+        reject({ errorCode: -2000, errorMessage: "请付费后观看" });
+      }
+    });
+  }
+
+  function release(): void {}
+
+  return {
+    id: "ESPlayerMediaSourceListInterceptor",
+    type: ESPlayerInterceptorType.ES_PLAYER_INTERCEPTOR_TYPE_MEDIA_ITEM,
+    intercept,
+    release,
+  };
+}
+//---------------------------------------菜单------------------------------------------------
+export function buildCollapseMenu(mediaListVisible: boolean): QTCollapse {
+  const itemList = [
+    {
+      height: 160,
+      collapseHeight: 100,
+    },
+    {
+      height: 160,
+      collapseHeight: 100,
+    },
+    {
+      height: 160,
+      collapseHeight: 100,
+    },
+  ];
+  let defaultIndex: number = 2;
+  if (mediaListVisible) {
+    defaultIndex = 3;
+    itemList.push({
+      height: 300,
+      collapseHeight: 240,
+    });
+  }
+  const collapse: QTCollapse = {
+    width: 1920,
+    height: 780,
+    defaultIndex: defaultIndex,
+    itemList: itemList,
+  };
+  return collapse;
+}
+//---------------------------------------播放模式------------------------------------------------
+
+export function getPlayModeIndex(
+  mode: ESPlayerPlayMode,
+  modeList: Array<ESPlayerPlayMode>,
+): number {
+  for (let i = 0; i < modeList.length; i++) {
+    const m = modeList[i];
+    if (mode == m) {
+      return i;
+    }
+  }
+  return -1;
+}
+export function buildPlayModeList(
+  modeList: Array<ESPlayerPlayMode>,
+): Array<QTListViewItem> {
+  const itemList: Array<QTListViewItem> = [];
+  if (modeList && modeList.length) {
+    for (let i = 0; i < modeList.length; i++) {
+      const m = modeList[i];
+      const item = buildPlayMode(m, i);
+      itemList.push(item);
+    }
+  }
+  return itemList;
+}
+export function buildPlayMode(
+  mode: ESPlayerPlayMode,
+  index: number,
+): QTListViewItem {
+  let modeName = "";
+  switch (mode) {
+    case ESPlayerPlayMode.ES_PLAYER_PLAY_MODE_ONCE:
+      modeName = "单次播放";
+      break;
+    case ESPlayerPlayMode.ES_PLAYER_PLAY_MODE_ORDER:
+      modeName = "顺序播放";
+      break;
+    case ESPlayerPlayMode.ES_PLAYER_PLAY_MODE_SHUFFLE:
+      modeName = "随机播放";
+      break;
+    case ESPlayerPlayMode.ES_PLAYER_PLAY_MODE_REPEAT:
+      modeName = "单片循环";
+      break;
+    case ESPlayerPlayMode.ES_PLAYER_PLAY_MODE_LOOP:
+      modeName = "自动连播";
+      break;
+  }
+  let decoration: QTListViewItemDecoration = {
+    right: 16,
+  };
+  if (index == 0) {
+    decoration = {
+      left: 90,
+      right: 16,
+    };
+  }
+  return {
+    iconStyle: {
+      width: 0,
+      height: 0,
+    },
+    type: 1,
+    text: modeName,
+    mode: mode,
+    decoration: decoration,
+  };
+}
+//------------------------------------------清晰度---------------------------------------------
+export function getDefinitionIndex(
+  definition: ESPlayerDefinition,
+  definitionList: Array<ESPlayerDefinition>,
+): number {
+  for (let i = 0; i < definitionList.length; i++) {
+    const m = definitionList[i];
+    if (definition == m) {
+      return i;
+    }
+  }
+  return -1;
+}
+export function buildDefinitionList(
+  definitionList: Array<ESPlayerDefinition>,
+): Array<QTListViewItem> {
+  const itemList: Array<QTListViewItem> = [];
+  if (definitionList && definitionList.length) {
+    for (let i = 0; i < definitionList.length; i++) {
+      const m = definitionList[i];
+      const item = buildDefinition(m, i);
+      itemList.push(item);
+    }
+  }
+  return itemList;
+}
+export function buildDefinition(
+  definition: ESPlayerDefinition,
+  index: number,
+): QTListViewItem {
+  let name = "";
+  switch (definition) {
+    case ESPlayerDefinition.ES_PLAYER_DEFINITION_SD:
+      name = "标清";
+      break;
+    case ESPlayerDefinition.ES_PLAYER_DEFINITION_HD:
+      name = "高清";
+      break;
+    case ESPlayerDefinition.ES_PLAYER_DEFINITION_FULL_HD:
+      name = "超清";
+      break;
+    case ESPlayerDefinition.ES_PLAYER_DEFINITION_ORIGINAL:
+      name = "原画";
+      break;
+    case ESPlayerDefinition.ES_PLAYER_DEFINITION_BLUERAY:
+      name = "蓝光";
+      break;
+    case ESPlayerDefinition.ES_PLAYER_DEFINITION_FOURK:
+      name = "4K";
+      break;
+    case ESPlayerDefinition.ES_PLAYER_DEFINITION_2K:
+      name = "2K";
+      break;
+  }
+  let decoration: QTListViewItemDecoration = {
+    right: 16,
+  };
+  if (index == 0) {
+    decoration = {
+      left: 90,
+      right: 16,
+    };
+  }
+  return {
+    iconStyle: {
+      width: 0,
+      height: 0,
+    },
+    type: 1,
+    text: name,
+    definition: definition,
+    decoration: decoration,
+  };
+}
+//---------------------------------------倍速------------------------------------------------
+export function getPlayRateIndex(
+  rate: ESPlayerRate,
+  rateList: Array<ESPlayerRate>,
+): number {
+  for (let i = 0; i < rateList.length; i++) {
+    const m = rateList[i];
+    if (rate == m) {
+      return i;
+    }
+  }
+  return -1;
+}
+export function buildPlayRateList(
+  rateList: Array<ESPlayerRate>,
+): Array<QTListViewItem> {
+  const itemList: Array<QTListViewItem> = [];
+  if (rateList && rateList.length) {
+    for (let i = 0; i < rateList.length; i++) {
+      const m = rateList[i];
+      const item = buildPlayRate(m, i);
+      itemList.push(item);
+    }
+  }
+  return itemList;
+}
+export function buildPlayRate(
+  rate: ESPlayerRate,
+  index: number,
+): QTListViewItem {
+  const name = rate + "X";
+  let decoration: QTListViewItemDecoration = {
+    right: 16,
+  };
+  if (index == 0) {
+    decoration = {
+      left: 90,
+      right: 16,
+    };
+  }
+  return {
+    iconStyle: {
+      width: 0,
+      height: 0,
+    },
+    type: 1,
+    text: name,
+    rate: rate,
+    decoration: decoration,
+  };
+}

package/rules/.source/hellotv/src/pages/detail/api/index.ts

@@ -0,0 +1,77 @@
+import requestManager from "../../../tools/request";
+import BuildConfig from "../../../config/build-config";
+import {
+  DetailUrl,
+  DetailMediaSeriesUrl,
+  RecommendListUrl,
+  PlayUrl,
+  RecordsUrl,
+} from "./request-url";
+import {
+  IMedia,
+  IMediaItem,
+  IRecommendItem,
+  DetailApi,
+} from "../adapter/interface";
+
+class DetailManager implements DetailApi {
+  //获取详情页数据
+  getMediaDetail(id: string): Promise<IMedia> {
+    const url = `${DetailUrl}${id}?packageName=${BuildConfig.packageName}`;
+    return requestManager.get(url).then((res: any) => {
+      const media: IMedia = res;
+      return Promise.resolve(media);
+    });
+  }
+  //获取详情页选集列表
+  getMediaSeriesList(
+    id: string,
+    page: number,
+    limit: number,
+  ): Promise<Array<IMediaItem>> {
+    const url = `${DetailMediaSeriesUrl}${id}?packageName=${BuildConfig.packageName}&page=${page}&limit=${limit}`;
+    return requestManager.get(url).then((res: any) => {
+      const mediaSeriesList: Array<IMediaItem> = res.items;
+      return Promise.resolve(mediaSeriesList);
+    });
+  }
+  //获取详情页推荐列表
+  getRecommendList(id: string): Promise<Array<IRecommendItem>> {
+    const url = `${RecommendListUrl}?packageName=${BuildConfig.packageName}&id=${id}&page=1&limit=12`;
+    return requestManager.get(url).then((res: any) => {
+      const recommendist: Array<IRecommendItem> = res.items;
+      return Promise.resolve(recommendist);
+    });
+  }
+  //获取播放地址
+  getPlayUrl(id: string, type: string): Promise<any> {
+    const url = `${PlayUrl}${id}?packageName=${BuildConfig.packageName}&type=${type}`;
+    return requestManager.get(url).then((res: any) => {
+      return Promise.resolve(res);
+    });
+  }
+  //获取历史/收藏 数据
+  getRecordData(id: string, deviceId: string, type: string): Promise<any> {
+    const url = `${RecordsUrl}/${id}?packageName=${BuildConfig.packageName}&deviceId=${deviceId}&recordType=${type}`;
+    return requestManager.get(url).then((res: any) => {
+      return Promise.resolve(res);
+    });
+  }
+  //上报历史/收藏
+  reportRecordData(data: any): Promise<any> {
+    const url = `${RecordsUrl}?packageName=${BuildConfig.packageName}`;
+    return requestManager.post(url, data).then((res: any) => {
+      return Promise.resolve(res);
+    });
+  }
+  //删除历史/收藏
+  deleteRecordData(id: string, deviceId: string, type: string): Promise<any> {
+    const url = `${RecordsUrl}/${deviceId}?recordId=${id}&recordType=${type}`;
+    return requestManager.delete(url).then((res: any) => {
+      return Promise.resolve(res);
+    });
+  }
+}
+
+const detailManager = new DetailManager();
+export default detailManager;

package/rules/.source/hellotv/src/pages/detail/api/request-url.ts

@@ -0,0 +1,8 @@
+import BuildConfig from "../../../config/build-config";
+
+export const DetailUrl = BuildConfig.requestBaseUrl + "/album/details/";
+export const DetailMediaSeriesUrl =
+  BuildConfig.requestBaseUrl + "/album/episodes/";
+export const RecommendListUrl = BuildConfig.requestBaseUrl + "/recommendations";
+export const PlayUrl = BuildConfig.requestBaseUrl + "/streams/";
+export const RecordsUrl = BuildConfig.requestBaseUrl + "/records";

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

@@ -0,0 +1,192 @@
+<template>
+  <qt-view class="media-collapse-definition" :focusable="false">
+    <span
+      class="media-collapse-definition-title"
+      :opacity="isCollapseExpand ? 1 : 0.5"
+      >清晰度</span
+    >
+    <qt-animation ref="animationRef">
+      <div class="media-collapse-definition-content" :clipChildren="false">
+        <qt-list-view
+          ref="definitionListViewRef"
+          horizontal
+          :selectChildPosition="selectedIndex"
+          sid="collapse-item-definition"
+          class="media-collapse-definition-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-definition">
+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-definition";
+const log = useESLog();
+const isCollapseExpand = ref<boolean>(false);
+const definitionListViewRef = 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;
+  definitionListViewRef.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;
+  }
+  definitionListViewRef.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,
+        };
+      }
+      definitionListViewRef.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-definition {
+  width: 1920px;
+  height: 160px;
+  background-color: transparent;
+  .media-collapse-definition-title {
+    width: 1740px;
+    height: 32px;
+    font-size: 27px;
+    color: white;
+    margin-left: 90px;
+    z-index: 1000;
+  }
+  .media-collapse-definition-content {
+    width: 1920px;
+    height: 130px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    .media-collapse-definition-list {
+      width: 1920px;
+      height: 80px;
+      background-color: transparent;
+    }
+  }
+}
+</style>