@quicktvui/ai 1.0.9 → 1.1.0

package/rules/.source/hellotv/src/components/media/view/media-player-view.vue

@@ -0,0 +1,408 @@
+<template>
+  <es-player-manager
+    class="media-player-root-css"
+    ref="playerManager"
+    :focusable="false"
+    :initPlayerWindowType="playerWindowType"
+    :style="{ left: playerLeft, top: playerTop }"
+    :playerList="playerListRef"
+    :playerViewList="playerViewListRef"
+    @onPlayerPlayMedia="onPlayerPlayMedia"
+    @onPlayerPlaying="onPlayerPlaying"
+    @onPlayerPaused="onPlayerPaused"
+    @onPlayerStopped="onPlayerStopped"
+    @onPlayerWindowTypeChanged="onPlayerWindowTypeChanged"
+    @onPlayerCompleted="onPlayerCompleted"
+    @onPlayerInterceptSuccess="onPlayerInterceptSuccess"
+    @onPlayerInterceptError="onPlayerInterceptError"
+    @onPlayerInitialized="onPlayerInitialized"
+    @onPlayerProgressChanged="onPlayerProgressChanged"
+    @onPlayerDurationChanged="onPlayerDurationChanged"
+    @onPlayerError="onPlayerError"
+  />
+</template>
+
+<script lang="ts">
+import { ESKeyEvent } from "@extscreen/es3-core";
+import {
+  ESIPlayerInterceptor,
+  ESPlayerDecode,
+  ESPlayerError,
+  ESPlayerInterceptError,
+  ESPlayerInterceptResult,
+  ESPlayerPlayMode,
+  ESPlayerRate,
+  ESPlayerWindowType,
+} from "@extscreen/es3-player";
+import { ESVideoPlayer } from "@extscreen/es3-video-player";
+import { defineComponent, markRaw, onBeforeUnmount, onMounted, ref } from "vue";
+import {
+  ESIPlayerManager,
+  ESMediaItem,
+  ESMediaItemList,
+  ESPlayerManager,
+  SparseArray,
+} from "@extscreen/es3-player-manager";
+import {
+  buildMediaItemList,
+  buildPlayData,
+  initDefaultMenuList,
+} from "../build-data/media-control-adapter";
+import { IMediaList } from "../build-data/media-imp";
+import MediaLoadingView from "./media-loading-view.vue";
+import MediaManagerView from "./media-manager-view.vue";
+
+export default defineComponent({
+  name: "MediaPlayerView",
+  components: {
+    "es-player-manager": ESPlayerManager,
+  },
+  props: {
+    playerWindowType: {
+      type: Number,
+      default: ESPlayerWindowType.ES_PLAYER_WINDOW_TYPE_FULL,
+    },
+    isShowPlayerController: {
+      type: Boolean,
+      default: false,
+    },
+    playerLeft: {
+      type: Number,
+      default: 0,
+    },
+    playerTop: {
+      type: Number,
+      default: 0,
+    },
+    menuList: {
+      type: Array,
+      default: initDefaultMenuList(),
+    },
+  },
+  emits: [
+    "onPlayerPlayMedia",
+    "onPlayerPlaying",
+    "onPlayerWindowTypeChanged",
+    "onPlayerCompleted",
+    "onPlayerInterceptSuccess",
+    "onPlayerInterceptError",
+    "onPlayerInitialized",
+    "onPlayerProgressChanged",
+    "onPlayerDurationChanged",
+    "onPlayerError",
+  ],
+  setup(props, context) {
+    const playerManager = ref<ESIPlayerManager>();
+    const playerList = [markRaw(ESVideoPlayer)];
+    const playerListRef = ref(playerList);
+    let playerViewList = [];
+    //付费类型 0：免费，其他收费
+    // let payStatus: string | number
+    //当前播放进度
+    // let curProgress: number = 0
+    if (props.isShowPlayerController) {
+      playerViewList = [markRaw(MediaLoadingView), markRaw(MediaManagerView)];
+      //todo 让立朋兼容一个__name的获取
+      playerViewList[1].name = "media-manager-view";
+    } else {
+      playerViewList = [markRaw(MediaLoadingView)];
+    }
+    let playerViewListRef = ref(playerViewList);
+
+    let progressTimer: any;
+    let playerIsInitialized = ref(false);
+    let playInterceptors: Array<ESIPlayerInterceptor> | undefined;
+    onMounted(() => {
+      if (
+        props.isShowPlayerController &&
+        props.menuList &&
+        props.menuList.length > 0
+      ) {
+        const mRef: any =
+          playerManager.value?.getPlayerView("media-manager-view");
+        mRef.initMenuList(props.menuList);
+      }
+    });
+    onBeforeUnmount(() => {
+      stopProgressTimer();
+    });
+    const isMenuShow = (): boolean => {
+      const mRef: any =
+        playerManager.value?.getPlayerView("media-manager-view");
+      return mRef.isViewShow();
+    };
+    const initPlayData = (
+      playData: Array<IMediaList>,
+      index: number = 0,
+      playMode?: ESPlayerPlayMode,
+      interceptors?: Array<ESIPlayerInterceptor>,
+    ): ESMediaItemList => {
+      playInterceptors = interceptors;
+      const list: ESMediaItemList = buildPlayData(
+        playData,
+        index,
+        interceptors,
+      );
+      if (playMode) {
+        setPlayMediaListMode(playMode);
+      } else {
+        setPlayMediaListMode(ESPlayerPlayMode.ES_PLAYER_PLAY_MODE_LOOP);
+      }
+      // if (!playerIsInitialized.value) initialize()
+
+      if (!playData || playData.length === 0) {
+        playerManager.value?.playMediaList(list);
+      }
+      return list;
+    };
+    const resetMediaList = () => {
+      playerManager.value?.resetMediaList();
+    };
+
+    const loadMoreMediaList = (
+      index: number = 0,
+      playDatas: Array<IMediaList>,
+      list?: ESMediaItem[],
+    ) => {
+      if (!list) {
+        list = buildMediaItemList(index, playDatas, playInterceptors);
+      }
+      playerManager.value?.addMediaToIndex(index, list);
+    };
+    const getMediaList = (): SparseArray<ESMediaItem> | null | undefined => {
+      return playerManager.value?.getMediaList();
+    };
+
+    const onPlayerPlayMedia = (mediaItem: ESMediaItem) => {
+      // payStatus = mediaItem.payStatus
+
+      context.emit("onPlayerPlayMedia", mediaItem);
+    };
+
+    const onPlayerPlaying = () => {
+      startProgressTimer();
+      context.emit("onPlayerPlaying");
+    };
+    const startProgressTimer = () => {
+      stopProgressTimer();
+      progressTimer = setInterval(() => {
+        playerManager.value?.getDuration();
+        playerManager.value?.getCurrentPosition();
+      }, 1000);
+    };
+    const stopProgressTimer = () => {
+      if (progressTimer) {
+        clearInterval(progressTimer);
+      }
+    };
+    const onPlayerPaused = (): void => {
+      stopProgressTimer();
+    };
+    const onPlayerStopped = (): void => {
+      stopProgressTimer();
+    };
+    const onPlayerWindowTypeChanged = (
+      windowType: ESPlayerWindowType,
+    ): void => {
+      context.emit("onPlayerWindowTypeChanged", windowType);
+    };
+    const onPlayerCompleted = (): void => {
+      context.emit("onPlayerCompleted");
+    };
+    const onPlayerInterceptSuccess = (
+      result: ESPlayerInterceptResult,
+    ): void => {
+      context.emit("onPlayerInterceptSuccess", result);
+    };
+    const onPlayerInterceptError = (result: ESPlayerInterceptError): void => {
+      context.emit("onPlayerInterceptError", result);
+    };
+    const onPlayerInitialized = (): void => {
+      playerIsInitialized.value = true;
+      context.emit("onPlayerInitialized");
+      playerManager.value?.setDecode(ESPlayerDecode.ES_PLAYER_DECODE_HARDWARE);
+      playerManager.value?.setPlayRate(ESPlayerRate.ES_PLAYER_RATE_1);
+    };
+
+    const onPlayerProgressChanged = (p: number): void => {
+      // curProgress = p
+      context.emit("onPlayerProgressChanged", p);
+    };
+
+    const onPlayerDurationChanged = (d: number): void => {
+      context.emit("onPlayerDurationChanged", d);
+    };
+    const onPlayerError = (error: ESPlayerError): void => {
+      context.emit("onPlayerError", error);
+    };
+    const seekTo = (progress: number): void => {
+      playerManager.value?.seekTo(progress);
+    };
+
+    const initialize = () => {
+      playerManager.value?.initialize();
+    };
+
+    const playMediaItemById = (id: string) => {
+      playerManager.value?.playMediaById(id);
+    };
+
+    const playMediaItemByIndex = (index: number) => {
+      playerManager.value?.playMediaByIndex(index);
+    };
+
+    const playNextMediaItem = () => {
+      playerManager.value?.playNextMedia();
+    };
+
+    const getPlayingMediaIndex = (): number => {
+      return playerManager.value!.getPlayingMediaIndex();
+    };
+
+    const setFullWindow = () => {
+      playerManager.value?.setFullWindow();
+    };
+
+    const setSmallWindow = () => {
+      playerManager.value?.setSmallWindow();
+    };
+
+    const setSize = (width: number, height: number): void => {
+      playerManager.value?.setSize(width, height);
+    };
+
+    const playMediaList = (playList: ESMediaItemList) => {
+      playerManager.value?.playMediaList(playList);
+    };
+
+    const setPlayMediaListMode = (playMode: ESPlayerPlayMode): void => {
+      playerManager.value?.setPlayMediaListMode(playMode);
+    };
+
+    const replyRate = (r?: number) => {
+      const mRef: any =
+        playerManager.value?.getPlayerView("media-manager-view");
+      if (mRef) {
+        mRef.replyRate(r);
+      }
+    };
+
+    const start = (position: number) => {
+      replyRate();
+      playerManager.value?.start(position);
+    };
+
+    const pause = () => {
+      playerManager.value?.pause();
+    };
+
+    const resume = () => {
+      replyRate();
+      playerManager.value?.resume();
+    };
+
+    const trySeeResume = () => {
+      resume();
+    };
+
+    const stop = () => {
+      playerManager.value?.stop();
+    };
+
+    const reset = () => {
+      playerManager.value?.reset();
+    };
+
+    const release = () => {
+      playerManager.value?.release();
+    };
+
+    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 getWindowType = (): ESPlayerWindowType => {
+      return (
+        playerManager.value?.getWindowType() ??
+        ESPlayerWindowType.ES_PLAYER_WINDOW_TYPE_FULL
+      );
+    };
+
+    const onBackPressed = (): boolean => {
+      if (getWindowType() !== ESPlayerWindowType.ES_PLAYER_WINDOW_TYPE_FULL) {
+        return false;
+      }
+      if (playerManager.value) {
+        return playerManager.value!.onBackPressed();
+      }
+      return false;
+    };
+
+    return {
+      playerManager,
+      onPlayerPlayMedia,
+      onPlayerPlaying,
+      onPlayerPaused,
+      onPlayerStopped,
+      onPlayerWindowTypeChanged,
+      onPlayerCompleted,
+      onPlayerInterceptSuccess,
+      onPlayerInterceptError,
+      onPlayerInitialized,
+      onPlayerProgressChanged,
+      onPlayerDurationChanged,
+      onPlayerError,
+      seekTo,
+      initPlayData,
+      initialize,
+      playMediaItemByIndex,
+      playNextMediaItem,
+      playMediaItemById,
+      setFullWindow,
+      setSmallWindow,
+      getWindowType,
+      setSize,
+      resetMediaList,
+      playMediaList,
+      loadMoreMediaList,
+      setPlayMediaListMode,
+      getPlayingMediaIndex,
+      getMediaList,
+      start,
+      pause,
+      resume,
+      trySeeResume,
+      stop,
+      reset,
+      release,
+      onKeyDown,
+      onKeyUp,
+      onBackPressed,
+      isMenuShow,
+      playerListRef,
+      playerViewListRef,
+      replyRate,
+      clear() {
+        //清除一些必要数据，防止影响其他页面的播放器
+        const mRef: any =
+          playerManager.value?.getPlayerView("media-manager-view");
+        if (mRef) {
+          mRef.clear();
+        }
+      },
+    };
+  },
+});
+</script>
+
+<style lang="scss" src="./scss/media-player.scss"></style>

package/rules/.source/hellotv/src/components/media/view/scss/media-loading.scss

@@ -0,0 +1,51 @@
+
+.media-loading-component-root-css{
+  background-color: transparent;
+  position: absolute;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.media-loading-component-root-css .loading-tips{
+  height: 40px;
+  line-height: 40px;
+  text-align: center;
+  font-size: 30px;
+  color: #ffffff;
+  margin-top: 12px;
+}
+
+.media-loading-view-root-css{
+  position: absolute;
+  background-color: transparent;
+}
+.media-loading-view-root-css .try-see-tip-root-css{
+  position: absolute;
+  bottom: 54px;
+  background-color: transparent;
+  flex-direction: row;
+  height: 72px;
+  width: 800px;
+  left: 96px
+}
+.media-loading-view-root-css .try-see-tip-header-end{
+  color: white;
+  font-size: 42px;
+  line-height: 60px;
+  height: 60px;
+  text-align: center;
+}
+.media-loading-view-root-css .try-see-tip-middle{
+  color: #0E0E0E;
+  font-size: 42px;
+  line-height: 60px;
+  margin-top: 3px;
+  margin-left: 8px;
+  margin-right: 8px;
+  height: 60px;
+  width: 108px;
+  background-color: white;
+  border-radius: 30px;
+  text-align: center;
+}

package/rules/.source/hellotv/src/components/media/view/scss/media-manager.scss

@@ -0,0 +1,79 @@
+
+.media-manager-root-css{
+  background-color: transparent;
+}
+
+.media-manager-bg-css {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  justify-content: flex-end;
+  background-color: transparent;
+}
+.media-manager-bg-css .media-manager-title-css {
+  width: 900px;
+  margin-left: 90px;
+  background-color: transparent;
+}
+.media-manager-bg-css .main-title-css {
+  max-height: 88px;
+  font-weight: bold;
+  line-height: 44px;
+  font-size: 36px;
+  max-lines: 2;
+  color:white;
+  margin-bottom: 24px;
+}
+.media-manager-bg-css .sub-title-css{
+  max-height: 30px;
+  line-height: 30px;
+  font-size: 26px;
+  max-lines: 1;
+  color:white;
+  margin-bottom: 117px;
+}
+.media-manager-bg-css .media-manager-progress-root-css {
+  width: 1920px;
+  height: 60px;
+  margin-bottom: 39px;
+  flex-direction: row;
+  background-color: transparent;
+}
+.media-manager-bg-css .media-manager-play-state-root-css{
+  width: 36px;
+  height:36px;
+  margin-left: 90px;
+  margin-top: 12px;
+  background-color: transparent;
+}
+.media-manager-bg-css .media-manager-img-play-state-css {
+  width: 36px;
+  height:36px;
+  position: absolute;
+  background-color: transparent;
+}
+.media-manager-bg-css .media-manager-seekbar-css {
+  width: 1700px;
+  height: 60px;
+  margin-left: 10px;
+  background-color: transparent;
+}
+.media-manager-bg-css .media-manager-setting-root-css {
+  margin-bottom: 54px;
+  width: 1920px;
+  height: 72px;
+  background-color: transparent;
+}
+.media-manager-bg-css  .media-manager-text-root-css {
+  position: absolute;
+  height: 72px;
+  right: 100px;
+  top: 0;
+  flex-direction: row-reverse;
+  background-color: transparent;
+}
+.media-manager-bg-css .media-manager-progress-text-css {
+  font-size: 30px;
+  height: 72px;
+  text-align: center;
+}

package/rules/.source/hellotv/src/components/media/view/scss/media-menu.scss

@@ -0,0 +1,114 @@
+/************* menu view css ****************/
+.media-menu-root-css{
+  width: 1920px;
+  height: 72px;
+  background-color: transparent;
+}
+%menu-item{
+  border-radius: 45px;
+  background-color: $theme-btn-normal-color;
+  focus-background-color:$theme-btn-focus-color;
+  justify-content: center;
+  align-items: center;
+  flex-direction: row;
+}
+/************* menu icon css ****************/
+.media-menu-icon-root-css{
+  @extend %menu-item;
+}
+%icon-size{
+  width:36px;
+  height:36px;
+}
+.media-menu-icon-root-css .icon-item-root{
+  position: absolute;
+  @extend %icon-size;
+  left: 30px;
+  background-color: transparent;
+}
+.media-menu-icon-root-css .icon-item{
+  position: absolute;
+  @extend %icon-size;
+  background-color: transparent;
+}
+.media-menu-icon-root-css .icon-item-text{
+  position: absolute;
+  height: 72px;
+  left: 75px;
+  color:$theme-text-normal-color;
+  focus-color:$theme-text-focus-color;
+}
+/************* menu text css ****************/
+%menu-text-item-parent-size{
+  width:210px;
+  height: 72px;
+}
+.media-menu-text-root-css{
+  @extend %menu-text-item-parent-size;
+  @extend %menu-item;
+  padding-left: 30px;
+  padding-right: 30px;
+}
+.media-menu-text-root-css .text-item{
+  @extend %menu-text-item-parent-size;
+  color:$theme-text-normal-color;
+  focus-color:$theme-text-focus-color;
+}
+
+/************* menu detail css ****************/
+.media-menu-detail-root-css{
+  position: absolute;
+  width: 760px;
+  height: 1080px;
+  right: 0;
+  top:0;
+  padding-left: 100px;
+  background-color: transparent;
+}
+.media-menu-detail-root-css .detail-title{
+  width: 200px;
+  height: 34px;
+  margin-top: 143px;
+  line-height: 34px;
+  text-align: left;
+  color: #FFFFFF;
+  font-size: 30px;
+  background-color: transparent;
+}
+.media-menu-detail-root-css .detail-list{
+  margin-top: 36px;
+  width: 564px;
+  height: 840px;
+  background-color: transparent;
+}
+/************* menu detail item css ******************/
+$item-width:564px;
+$item-height:102px;
+%menu-detail-parent-size{
+  width:$item-width;
+  height:$item-height;
+}
+.media-menu-detail-item-root-css{
+  @extend %menu-detail-parent-size;
+  border-radius: 9px;
+  background-color: $theme-btn-normal-color;
+  focus-background-color:$theme-btn-focus-color;
+}
+.media-menu-detail-item-root-css .item-text{
+  position: absolute;
+  @extend %menu-detail-parent-size;
+  left: 0.1px;
+  top: 0.1px;
+  color:$theme-text-normal-color;
+  focus-color:$theme-text-focus-color;
+  select-color:$theme-text-select-color;
+  background-color: transparent;
+}
+.media-menu-detail-item-root-css .item-icon{
+  position: absolute;
+  width: 24px;
+  height:15px;
+  right: 30px;
+  top: 40px;
+  background-color: transparent;
+}

package/rules/.source/hellotv/src/components/media/view/scss/media-player.scss

@@ -0,0 +1,6 @@
+.media-player-root-css{
+  width:1920px;
+  height: 1080px;
+  background-color: transparent;
+  position: absolute;
+}