DetailPlayShortVideoPage.ets 5.52 KB
import router from '@ohos.router';
import mediaquery from '@ohos.mediaquery';
import window from '@ohos.window';
import { Action } from 'wdBean';
import { Logger, SPHelper, WindowModel } from 'wdKit';
import { PlayerConstants, WDPlayerController, WDPlayerRenderView } from 'wdPlayer';
import { devicePLSensorManager } from 'wdDetailPlayApi';
import { PlayControlViewContainer } from '../view/PlayControlViewContainer';
import { PlayerDetailContainer } from '../view/PlayerDetailContainer';
import { PlayViewModel } from '../viewmodel/PlayViewModel';
import { DetailContainer } from '../view/DetailContainer';

const TAG = 'DetailPlayShortVideoPage';

/**
 * 详情&短视频播放页面
 */
@Entry
@Component
export struct DetailPlayShortVideoPage {
  private contentId?: string = undefined
  private relId?: string = undefined
  private relType?: string = undefined
  private playerController: WDPlayerController = new WDPlayerController();
  @Watch("urlChanged") @State url?: string = undefined
  @Watch('changeContinue') @Provide nextContId?: string = '';
  @Watch('getPlayHistory') @Provide curContId?: string = undefined;
  @Watch("playVMChanged") @Provide playVM: PlayViewModel = new PlayViewModel();
  @Provide isFullScreen: boolean = false;
  @Provide canStart?: boolean = false;
  @Provide status: number = PlayerConstants.STATUS_START;
  @Provide userId: string = '';
  @Provide newsSourceName?: string = undefined
  @Provide title?: string = undefined
  @Provide message?: string = undefined
  @Provide newsSummary?: string = undefined
  @Provide progressVal: number = 0;
  @Provide videoLandScape?: number = 1; // 视频朝向, 横屏视频:1;竖屏视频:2

  playVMChanged(name: string) {
    this.url = this.playVM.url
    this.newsSourceName = this.playVM.newsSourceName
    this.title = this.playVM.title
    this.newsSummary = this.playVM.newsSummary
    this.videoLandScape = this.playVM.videoLandScape ?? 1
    this.curContId = this.playVM.contentId
    this.nextContId = this.playVM.nextContId
    this.canStart = this.playVM.canStart;
    this.message = this.playVM.message
  }

  aboutToAppear() {
    let action: Action = router.getParams() as Action
    if (action) {
      this.contentId = action.params?.contentID
      if (action.params && action.params.extra) {
        this.relId = action.params.extra.relId
        this.relType = action.params.extra.relType
      }
    }

    // 设置播放地址
    // this.url = 'https://media.w3.org/2010/05/sintel/trailer.mp4'
    let listener = mediaquery.matchMediaSync('(orientation: landscape)');
    listener.on("change", (mediaQueryResult) => {
      if (mediaQueryResult.matches) {
        console.log("横屏 yes")
        this.isFullScreen = true
      } else {
        this.isFullScreen = false
        console.log("横屏 no")
      }
      WindowModel.shared.setMainWindowFullScreen(this.isFullScreen)
    })
  }

  onPageShow() {
    WindowModel.shared.setPreferredOrientation(window.Orientation.AUTO_ROTATION_RESTRICTED);
  }

  onPageHide() {
    WindowModel.shared.setPreferredOrientation(window.Orientation.PORTRAIT);
    devicePLSensorManager.devicePLSensorOff();
    this.status = PlayerConstants.STATUS_PAUSE;
    this.playerController?.pause();
  }

  @Builder
  playerViewContainer() {
    // 播放窗口
    WDPlayerRenderView({
      playerController: this.playerController,
      onLoad: async () => {
        // this.playVM.playWithContentId(this.contentId ?? "846899373")
        this.playVM.playWithIds(this.contentId ?? "846899373",
          this.relId ?? "500000301942", this.relType ?? "1")
      }
    })
      .height('100%')
      .width('100%')
  }

  @Builder
  playControlViewContainer() {
    // 播放窗口控制bar
    PlayControlViewContainer({
      playerController: this.playerController
    })
  }

  @Builder
  detailContainer() {
    // DetailTabBarPageComponent({ pageId: this.pageId }).backgroundColor(Color.Black)
    DetailContainer({
      playerController: this.playerController
    })
  }

  build() {
    Row() {
      PlayerDetailContainer({ playerView: () => {
        this.playerViewContainer()
      }, playControlView: () => {
        this.playControlViewContainer()
      }, detailView: () => {
        this.detailContainer()
      } })
        .height('100%')
        .width('100%')
    }
    .height('100%')
    .width('100%')
    .backgroundColor(Color.Black)
  }

  // 续播判断
  changeContinue() {
    if (this.nextContId) {
      this.playerController.continue = () => {
        this.playerController?.stop();
        this.playVM.playWithContentId(this.nextContId ?? '');
      }
      return;
    }
    this.playerController.continue = undefined;
  }

  urlChanged(name: string) {
    if (this.url) {
      console.log("url:" + this.url);
      this.status = PlayerConstants.STATUS_START;
      this.playerController.firstPlay(this.url);
    }
  }

  getPlayHistory() {
    SPHelper.default.get('playHistory', '').then((str) => {
      let result = str.toString();
      let time = 0;
      if (result != null && result != "") {
        let playHistory: Record<string, Record<string, number>> = JSON.parse(result);
        let userData: Record<string, number> = {};
        if (this.userId) {
          userData = playHistory[this.userId] ?? {};
        }
        if (this.curContId) {
          time = userData?.[this.curContId] ?? 0;
        }
      }
      this.playerController?.setStartTime(time);
    }).catch((err: Error) => {
      // Error: Inner error. Error code 15500000
      Logger.error(TAG, 'catch err:' + JSON.stringify(err));
      this.playerController?.setStartTime(0);
    });
  }
}