@quicktvui/ai 1.0.9 → 1.1.0

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

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

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

@@ -0,0 +1,404 @@
+<template>
+  <qt-view
+    name="media-player"
+    class="media-player"
+    ref="playerParent"
+    sid="playerParent"
+    :focusable="false"
+  >
+    <!-- player-manager 播放管理器 -->
+    <ESPlayerManager
+      class="player-manager-css"
+      ref="playerManager"
+      name="es-player-manager"
+      :visible="controlPlayViewShow"
+      :smallWindowWidth="890"
+      :smallWindowHeight="500"
+      :floatWindowWidth="floatWindowWidth"
+      :floatWindowHeight="floatWindowHeight"
+      :initPlayerWindowType="1"
+      playerBackgroundColor="transparent"
+      :playMediaAuto="false"
+      :focusable="false"
+      :playerList="playerListRef"
+      :playerViewList="playerViewListRef"
+      :style="{ left: playerLeft, top: playerTop }"
+      @onPlayerPlayMedia="onPlayerPlayMedia"
+      @onPlayerPlaying="onPlayerPlaying"
+      @onPlayerPaused="onPlayerPaused"
+      @onPlayerStopped="onPlayerStopped"
+      @onPlayerWindowTypeChanged="onPlayerWindowTypeChanged"
+      @onPlayerInterceptSuccess="onPlayerInterceptSuccess"
+      @onPlayerInterceptError="onPlayerInterceptError"
+      @onPlayerProgressChanged="onPlayerProgressChangedFn"
+      @onPlayerDurationChanged="onPlayerDurationChangedFn"
+    >
+    </ESPlayerManager>
+    <!-- 低端机播放器遮罩 -->
+    <qt-image
+      name="playerLowMaskImg"
+      :visible="playerMask"
+      :class="playerMaskCss"
+      :src="playerMaskImg"
+    />
+  </qt-view>
+</template>
+
+<script setup lang="ts" name="MediaPlayer">
+import { ref, markRaw, nextTick } from "vue";
+import {
+  ESLogLevel,
+  useESLog,
+  ESKeyEvent,
+  useESRuntime,
+} from "@extscreen/es3-core";
+import { useESRouter } from "@extscreen/es3-router";
+import BuildConfig from "../../../../config/build-config";
+import detailManager from "../../api/index";
+import {
+  ESIPlayerManager,
+  ESMediaItem,
+  ESMediaItemList,
+  ESPlayerManager,
+  useESPlayerManagerPlayModeManager,
+} from "@extscreen/es3-player-manager";
+import {
+  ESPlayerInterceptError,
+  ESPlayerInterceptResult,
+  ESPlayerPlayMode,
+  ESPlayerWindowType,
+  ESPlayerRate,
+  useESPlayerRateManager,
+} from "@extscreen/es3-player";
+import { ESVideoPlayer } from "@extscreen/es3-video-player";
+import { IMedia, IMediaItem } from "../../adapter/interface";
+import MediaPlayerView from "./media-player-view.vue";
+import MediaPlayerSmallView from "./media-player-small-view.vue";
+import {
+  buildMediaList,
+  createESPlayerMediaSourceListInterceptor,
+} from "../../adapter/media-player";
+
+const TAG = "MediaSeriesView";
+const emits = defineEmits([
+  "onMediaSeriesListItemLoad",
+  "onPlayerPlaying",
+  "onPlayerPlayMedia",
+  "onPlayerWindowTypeChanged",
+]);
+const log = useESLog();
+const router = useESRouter();
+const runtime = useESRuntime();
+let deviceId = runtime.getRuntimeDeviceId() ?? "";
+let m: IMedia;
+let playerParent = ref();
+let controlPlayViewShow = ref(true);
+const floatWindowWidth = ref<number>(BuildConfig.isLowEndDev ? 0 : 502);
+const floatWindowHeight = ref<number>(BuildConfig.isLowEndDev ? 0 : 283);
+const playerViewList = [
+  markRaw(MediaPlayerView),
+  markRaw(MediaPlayerSmallView),
+];
+playerViewList[0].name = "media-player-view";
+const interceptor = createESPlayerMediaSourceListInterceptor();
+const playerManager = ref<ESIPlayerManager>();
+const playerList = [markRaw(ESVideoPlayer)];
+const playerListRef = ref(playerList);
+const playerViewListRef = ref(playerViewList);
+const playModeManager = useESPlayerManagerPlayModeManager();
+const playerRateManager = useESPlayerRateManager();
+const playerLeft = ref<number>(80);
+const top = 135;
+const playerTop = ref<number>(top);
+
+const playerMask = ref<boolean>(BuildConfig.isLowEndDev);
+const playerMaskCss = ref<string>("media-player-mask-small-css");
+const playerMaskImg = ref<string>("");
+let isLoadLow = ref(false);
+let progressTimer: any = -1;
+let _progress,
+  _duration = 0; //播放进度/总时长
+
+const play = (media: IMedia) => {
+  m = media;
+  let playList: ESMediaItemList = {
+    index: 0,
+    list: [],
+    media: media,
+  };
+  playerMaskImg.value = media.cover;
+  playerManager.value?.initialize();
+  playModeManager.setPlayMode(ESPlayerPlayMode.ES_PLAYER_PLAY_MODE_LOOP);
+  playerManager.value?.playMediaList(playList);
+};
+const addMediaItemList = (page: number, mediaList: Array<IMediaItem>) => {
+  //播放器数据
+  const mediaItemList = buildMediaList(page, mediaList, [interceptor], m);
+  if (log.isLoggable(ESLogLevel.DEBUG)) {
+    log.d(
+      TAG,
+      "-----------buildMediaItemList------XXXXX------->>>>",
+      page,
+      mediaList,
+      mediaItemList,
+    );
+  }
+  playerManager.value?.addMediaToIndex((page - 1) * 10, mediaItemList);
+};
+const playMediaItemById = (id: string) => {
+  if (log.isLoggable(ESLogLevel.DEBUG)) {
+    log.d(TAG, "-----------playMediaItemById------------->>>>", id);
+  }
+  playerManager.value?.playMediaById(id);
+};
+const playMediaItemByIndex = (index: number) => {
+  if (!BuildConfig.isLowEndDev) playerManager.value?.playMediaByIndex(index);
+};
+const stop = () => {
+  playerManager.value?.stop();
+  let _index = Math.max(playerManager.value?.getPlayingMediaIndex() || 0, 0);
+  const media = playerManager.value?.getMedia(_index);
+  if (media && media.analyzeParams && _progress > 0) {
+    const body = {
+      id: media.analyzeParams.metaId,
+      deviceId: deviceId,
+      recordType: "history",
+      title: media.title,
+      episode: _index + 1,
+      episodeId: media.analyzeParams.episodeId,
+      totalDuration: _duration || _progress,
+      viewedDuration: _progress,
+      coverH: media.analyzeParams.assetLongCoverH,
+      coverV: media.analyzeParams.assetLongCoverV,
+    };
+    detailManager.reportRecordData(body); // 上报播放历史
+  }
+};
+const release = () => {
+  setSmallWindow();
+  playerManager.value?.release();
+};
+const resume = () => {
+  if (
+    BuildConfig.isLowEndDev &&
+    playerManager.value?.getWindowType() !==
+      ESPlayerWindowType.ES_PLAYER_WINDOW_TYPE_FULL
+  ) {
+    return;
+  }
+  playerManager.value?.resume();
+};
+const reset = () => {
+  playerManager.value?.reset();
+  playerRateManager.setPlayRate(ESPlayerRate.ES_PLAYER_RATE_1);
+};
+const setFullWindow = () => {
+  if (BuildConfig.isLowEndDev) {
+    controlPlayViewShow.value = true;
+    playerMask.value = false;
+    isLoadLow.value = false;
+  }
+  nextTick(() => {
+    playerManager.value?.setFullWindow();
+  });
+};
+const setFloatWindow = () => {
+  if (BuildConfig.isLowEndDev) {
+    controlPlayViewShow.value = false;
+    playerMask.value = false;
+    isLoadLow.value = true;
+    return;
+  }
+  playerLeft.value = 1393;
+  playerTop.value = 25;
+  nextTick(() => {
+    playerManager.value?.setFloatWindow();
+  });
+};
+const setSmallWindow = () => {
+  if (BuildConfig.isLowEndDev) {
+    controlPlayViewShow.value = true;
+    playerMask.value = BuildConfig.isLowEndDev;
+    if (isLoadLow.value) {
+      isLoadLow.value = false;
+      return;
+    }
+    isLoadLow.value = false;
+  }
+  playerLeft.value = 80;
+  playerTop.value = top;
+  nextTick(() => {
+    playerManager.value?.setSmallWindow();
+  });
+};
+const getWindowType = (): ESPlayerWindowType => {
+  return (
+    playerManager.value?.getWindowType() ??
+    ESPlayerWindowType.ES_PLAYER_WINDOW_TYPE_FULL
+  );
+};
+const getLoadLow = (): boolean => {
+  return isLoadLow.value;
+};
+const getPlayingMediaIndex = (): number => {
+  return playerManager.value?.getPlayingMediaIndex() ?? -1;
+};
+const changeVisible = (visibility: boolean) => {
+  playerParent.value?.dispatchFunctionBySid("playerParent", "changeAlpha", [
+    visibility ? 1 : 0,
+  ]);
+};
+const startProgressTimer = () => {
+  stopProgressTimer();
+  progressTimer = setInterval(() => {
+    playerManager.value?.getDuration();
+    playerManager.value?.getCurrentPosition();
+  }, 500);
+};
+const stopProgressTimer = () => {
+  if (progressTimer) {
+    clearInterval(progressTimer);
+  }
+};
+const onPlayerPlayMedia = (mediaItem: ESMediaItem) => {
+  if (log.isLoggable(ESLogLevel.DEBUG)) {
+    log.d(TAG, "-----------onPlayerPlayMedia------------->>>>");
+  }
+  emits("onPlayerPlayMedia", mediaItem);
+};
+const onPlayerPlaying = () => {
+  if (log.isLoggable(ESLogLevel.DEBUG)) {
+    log.d(TAG, "-----------onPlayerPlaying------------->>>>");
+  }
+  startProgressTimer();
+  emits("onPlayerPlaying");
+  //屏蔽再次播放同一个视频时视频从历史记录起播
+  const curPlayingMedia: ESMediaItem | null | undefined =
+    playerManager.value?.getPlayingMedia();
+  if (curPlayingMedia && curPlayingMedia.position) {
+    curPlayingMedia.position.support = false;
+  }
+};
+const onPlayerPaused = () => {};
+const onPlayerStopped = () => {};
+const onPlayerWindowTypeChanged = (windowType: ESPlayerWindowType) => {
+  emits("onPlayerWindowTypeChanged", windowType);
+  switch (windowType) {
+    case ESPlayerWindowType.ES_PLAYER_WINDOW_TYPE_FLOAT:
+      playerMask.value = false;
+      playerMaskCss.value = "media-player-mask-float-css";
+      if (BuildConfig.isLowEndDev) {
+        playerManager.value?.pause();
+        playerManager.value?.stop();
+      }
+      break;
+    case ESPlayerWindowType.ES_PLAYER_WINDOW_TYPE_SMALL:
+      playerLeft.value = 80;
+      playerTop.value = top;
+      playerMask.value = BuildConfig.isLowEndDev;
+      playerMaskCss.value = "media-player-mask-small-css";
+      if (BuildConfig.isLowEndDev) {
+        playerManager.value?.pause();
+        playerManager.value?.stop();
+      }
+      break;
+    case ESPlayerWindowType.ES_PLAYER_WINDOW_TYPE_FULL:
+      playerLeft.value = 0;
+      playerTop.value = 0;
+      playerMask.value = false;
+      if (BuildConfig.isLowEndDev) {
+        setTimeout(() => {
+          playerManager.value?.resume();
+        }, 300);
+      }
+      break;
+  }
+};
+const onPlayerInterceptSuccess = (result: ESPlayerInterceptResult) => {
+  if (log.isLoggable(ESLogLevel.DEBUG)) {
+    log.d(TAG, "-----------onPlayerInterceptSuccess------------->>>>", result);
+  }
+};
+const onPlayerInterceptError = (result: ESPlayerInterceptError) => {
+  if (log.isLoggable(ESLogLevel.DEBUG)) {
+    log.d(TAG, "-----------onPlayerInterceptError------------->>>>", result);
+  }
+};
+const onPlayerProgressChangedFn = (progress: number) => {
+  _progress = progress;
+};
+const onPlayerDurationChangedFn = (d: number) => {
+  _duration = d;
+};
+const onKeyDown = (keyEvent: ESKeyEvent): boolean => {
+  if (playerManager.value) {
+    return playerManager.value!.onKeyDown(keyEvent);
+  }
+  return false;
+};
+const onKeyUp = (keyEvent: ESKeyEvent): boolean => {
+  if (playerManager.value) {
+    return playerManager.value!.onKeyUp(keyEvent);
+  }
+  return false;
+};
+const onBackPressed = (): boolean => {
+  if (getWindowType() !== ESPlayerWindowType.ES_PLAYER_WINDOW_TYPE_FULL) {
+    return false;
+  }
+  if (playerManager.value) {
+    return playerManager.value!.onBackPressed();
+  }
+  return false;
+};
+defineExpose({
+  onPlayerWindowTypeChanged,
+  play,
+  addMediaItemList,
+  playMediaItemById,
+  playMediaItemByIndex,
+  stop,
+  resume,
+  release,
+  reset,
+  setFullWindow,
+  setFloatWindow,
+  setSmallWindow,
+  getWindowType,
+  getLoadLow,
+  getPlayingMediaIndex,
+  changeVisible,
+  onKeyUp,
+  onKeyDown,
+  onBackPressed,
+});
+</script>
+
+<style lang="scss" scoped>
+.media-player {
+  width: 1920px;
+  height: 1080px;
+  background-color: transparent;
+  .player-manager-css {
+    position: absolute;
+    background-color: black;
+  }
+  .media-player-mask-small-css {
+    width: 890px;
+    height: 500px;
+    background-color: transparent;
+    position: absolute;
+    border-radius: 10px;
+    top: 135px;
+    left: 80px;
+  }
+  .media-player-mask-float-css {
+    width: 502px;
+    height: 283px;
+    background-color: transparent;
+    position: absolute;
+    top: 25px;
+    left: 1393px;
+  }
+}
+</style>