developOne / harmonyPool

Go to a project
Toggle navigation Toggle navigation pinning
zhenghy
bc9b20cc 1 parent 48e7f99d

播放器详情页查看视频简介弹窗

Inline Side-by-side
Showing 4 changed files with 130 additions and 322 deletions
// import router from '@ohos.router';
import mediaquery from '@ohos.mediaquery';
import window from '@ohos.window';
import { ContentDetailDTO, InteractDataDTO, RmhInfoDTO, UserInfoDTO } from 'wdBean';
import { Logger, SPHelper, WindowModel } from 'wdKit';
import { PlayerConstants, WDPlayerController, WDPlayerRenderView } from 'wdPlayer';
import { ContentDetailRequest, devicePLSensorManager } from 'wdDetailPlayApi';
import { PlayControlViewContainer } from '../view/PlayControlViewContainer';
import { PlayerDetailContainer } from '../view/PlayerDetailContainer';
// import { PlayViewModel } from '../viewmodel/PlayViewModel';
import { DetailContainer } from '../view/DetailContainer';
import {
batchLikeAndCollectParams,
batchLikeAndCollectResult,
postBatchAttentionStatusParams
} from 'wdDetailPlayApi/src/main/ets/request/ContentDetailRequest';
import { HttpUrlUtils } from 'wdNetwork/Index';
const TAG = 'DetailPlayShortVideoPage';
/**
* 详情&短视频播放页面
*/
@Component
export struct DetailPlayShortVideoPage {
// private contentId?: string = undefined
// private relId?: string = undefined
// private relType?: string = undefined
@Provide contentDetailData: ContentDetailDTO | undefined = undefined
@Provide interactData: InteractDataDTO | undefined = undefined
@Prop @Watch('currentIndexChange') currentIndex: number = 0
private index: number = 0
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 = ''
// @Provide newsTitle?: string = ''
// @Provide editorName?: string = ''
// @Provide rmhInfo?: RmhInfoDTO | null = null
// @Provide userInfo?: UserInfoDTO | null = null
// @Provide message?: string = ''
// @Provide newsSummary?: string = ''
@Provide progressVal: number = 0;
@Provide videoLandScape?: number = 1; // 视频朝向， 横屏视频：1;竖屏视频：2
@Provide newsStatusOfUser: batchLikeAndCollectResult | undefined = undefined // 点赞、收藏状态
@Provide followStatus: string = '0' // 关注状态
// playVMChanged() {
// this.url = this.playVM.url
// this.newsSourceName = this.playVM.newsSourceName
// this.newsTitle = this.playVM.newsTitle
// this.editorName = this.playVM.editorName
// 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
// this.rmhInfo = this.playVM.rmhInfo
// this.userInfo = this.playVM.userInfo
// console.error('rmhInfo', this.rmhInfo)
// console.error('userInfo', this.userInfo)
// }
currentIndexChange() {
if (this.currentIndex != this.index) {
this.playerController.pause()
if (this.index < this.currentIndex - 5 && this.playerController.getPlayer()) {
this.playerController.release()
}
} else {
console.log('currentIndexChange====1', this.currentIndex)
this.playerController.play()
this.queryNewsInfoOfUser()
}
}
/**
* 查询用户点赞、收藏、关注等状态
*/
queryNewsInfoOfUser() {
if (HttpUrlUtils.getUserId()) {
const params: batchLikeAndCollectParams = {
contentList: [
{
contentId: this.contentDetailData?.newsId + '',
contentType: this.contentDetailData?.newsType + '',
}
]
}
// 已登录->查询用户对作品点赞、收藏状态
ContentDetailRequest.postBatchLikeAndCollectStatus(params).then(res => {
console.log('查询点赞、收藏状态==', JSON.stringify(res.data))
if (res.data) {
this.newsStatusOfUser = res.data[0]
}
})
const params1: postBatchAttentionStatusParams = {
creatorIds: [{ creatorId: this.contentDetailData?.rmhInfo?.rmhId ?? '' }]
}
// 已登录->批量查作品是否被号主关注
ContentDetailRequest.postBatchAttentionStatus(params1).then(res => {
console.log('批量查号主是否为用户关注==', JSON.stringify(res.data))
if (res.data) {
this.followStatus = res.data[0]?.status
}
})
}
}
aboutToAppear() {
console.log('开始设置setContentDetailData', JSON.stringify(this.contentDetailData))
// this.playVM.setContentDetailData(this.contentDetailData)
// this.playVMChanged()
this.queryNewsInfoOfUser()
this.playerController.onCanplay = () => {
if (this.index == 0 || this.currentIndex === this.index) {
this.videoLandScape = this.contentDetailData?.videoInfo[0]?.videoLandScape
this.playerController.firstPlay(this.contentDetailData?.videoInfo[0]?.videoUrl);
this.playerController.play()
}
}
// 设置播放地址
// 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);
}
aboutToDisappear(): void {
this.playerController?.pause();
}
onPageHide() {
// WindowModel.shared.setPreferredOrientation(window.Orientation.PORTRAIT);
devicePLSensorManager.devicePLSensorOff();
// this.status = PlayerConstants.STATUS_PAUSE;
this.playerController?.pause();
}
@Builder
playerViewContainerBuilder() {
// 播放窗口
WDPlayerRenderView({
playerController: this.playerController,
onLoad: async () => {
console.log('onload==', this.contentId, this.relId, this.relType)
}
})
.height('100%')
.width('100%')
.onClick(() => {
console.error('WDPlayerRenderView=== onClick')
this.playerController?.switchPlayOrPause();
})
}
@Builder
playControlViewContainerBuilder() {
// 播放窗口控制bar
PlayControlViewContainer({
playerController: this.playerController
})
}
@Builder
detailContainerBuilder() {
// DetailTabBarPageComponent({ pageId: this.pageId }).backgroundColor(Color.Black)
DetailContainer({
playerController: this.playerController
})
}
build() {
Row() {
PlayerDetailContainer({
playerView: () => {
this.playerViewContainerBuilder()
}, playControlView: () => {
// this.playControlViewContainerBuilder()
}, detailView: () => {
this.detailContainerBuilder()
}
})
.height('100%')
.width('100%')
.onClick(() => {
console.error('PlayerDetailContainer=== onClick')
this.playerController?.switchPlayOrPause();
})
}
.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() {
// console.error('urlChanged===')
// if (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);
// });
// }
}
\ No newline at end of file
@CustomDialog
export struct DetailDialog {
controller: CustomDialogController
@Prop name: string
@Prop title: string
@Prop summary: string
@Link isOpen: boolean
build() {
Column() {
if (this.name + '1222222') {
Text(`@${this.name}` + '1222222')
.fontColor(Color.White)
.fontSize(14)
.fontWeight(600)
.lineHeight(17)
}
if (this.title) {
Text(this.title)
.fontColor(Color.White)
.fontSize(16)
.fontWeight(600)
.margin({ top: 8 })
.lineHeight(24)
}
Text(this.summary)
.fontColor(Color.White)
.fontSize(14)
.fontWeight(400)
.margin({ top: 8 })
.lineHeight(21)
Row() {
Image($r('app.media.ic_close'))
.height(24).margin({ top: 20 }).onClick(() => {
this.controller.close()
if (this.isOpen) {
this.isOpen = !this.isOpen
}
})
}.width('100%').justifyContent(FlexAlign.Center)
}
.width('100%')
.alignItems(HorizontalAlign.Start)
.backgroundColor(Color.Gray)
// .linearGradient({
// direction: GradientDirection.Top, // 渐变方向
// repeating: false, // 渐变颜色是否重复
// colors: [['rgba(0, 0, 0, 0.1)', 0.0], ['rgba(0, 0, 0, 0)', 1.0]] // 数组末尾元素占比小于1时满足重复着色效果
// })
.padding({ top: 20, bottom: 30, left: 16, right: 16 })
}
}
\ No newline at end of file
... ...
... ... @@ -198,7 +198,7 @@ export struct OperationListView {
}.height(60)
}
}.margin({ bottom: 30 })
}.margin({ bottom: 18 })
}
@Builder
... ...
... ... @@ -6,6 +6,7 @@ import { WDPlayerController } from 'wdPlayer';
import { devicePLSensorManager } from 'wdDetailPlayApi';
import { OperationListView } from './OperationListView';
import { ContentDetailDTO, RmhInfoDTO, UserInfoDTO } from 'wdBean/Index';
import { DetailDialog } from './DetailDialog';
@Component
export struct PlayerTitleComment {
... ... @@ -16,8 +17,22 @@ export struct PlayerTitleComment {
@Consume isFullScreen: boolean;
@Consume progressVal: number;
@Consume videoLandScape?: number
@State isOpen: boolean = false
dialogController: CustomDialogController = new CustomDialogController({
builder: DetailDialog({
name: this.getName(),
title: this.getTitle(),
summary: this.getSummary(),
isOpen: this.isOpen
}),
autoCancel: false,
customStyle: true,
alignment: DialogAlignment.Bottom
})
aboutToAppear() {
}
watchSpeed() {
... ... @@ -25,42 +40,50 @@ export struct PlayerTitleComment {
}
getName() {
return this.contentDetailData?.newsSourceName || this.contentDetailData?.editorName
return this.contentDetailData?.newsSourceName || this.contentDetailData?.editorName || ''
}
getTitle() {
return this.contentDetailData?.newsTitle || this.contentDetailData?.newsSummary
return this.contentDetailData?.newsTitle || this.contentDetailData?.newsSummary || ''
}
getSummary() {
return this.contentDetailData?.newsSummary || ''
}
build() {
Column() {
// Column() {
// Row() {
// Image($r('app.media.ic_switch_orientation'))
// .width(34)
// .aspectRatio(1)
// .objectFit(ImageFit.Contain)
// .padding({ left: 10, right: 5 })
// Text("全屏观看")
// .fontColor(Color.White)
// .fontSize('14fp')
// .maxLines(2)
// .layoutWeight(1)
// }
// .width(100)
// .backgroundColor(Color.Gray)
// .borderRadius(10)
// .alignItems(VerticalAlign.Center)
// .visibility(this.videoLandScape == 2 ? Visibility.Hidden : Visibility.Visible)
// .onClick(() => {
// this.isFullScreen = !this.isFullScreen;
// WindowModel.shared.setPreferredOrientation(window.Orientation.LANDSCAPE);
// devicePLSensorManager.devicePLSensorOn(window.Orientation.LANDSCAPE);
// })
// }
// .width('100%')
// // .margin({ bottom: 120 })
// .alignItems(HorizontalAlign.Center)
if (this.contentDetailData?.videoInfo[0]?.videoLandScape === 1) {
Column() {
Row() {
Image($r('app.media.ic_switch_orientation'))
.width(34)
.aspectRatio(1)
.objectFit(ImageFit.Contain)
.padding({ left: 10, right: 5 })
Text("全屏观看")
.fontColor(Color.White)
.fontSize('14fp')
.maxLines(2)
.layoutWeight(1)
}
.width(100)
.backgroundColor(Color.Gray)
.borderRadius(10)
.alignItems(VerticalAlign.Center)
.visibility(this.videoLandScape == 2 ? Visibility.Hidden : Visibility.Visible)
.onClick(() => {
this.isFullScreen = !this.isFullScreen;
WindowModel.shared.setPreferredOrientation(window.Orientation.LANDSCAPE);
devicePLSensorManager.devicePLSensorOn(window.Orientation.LANDSCAPE);
})
}
.width('100%')
// .margin({ bottom: 120 })
.alignItems(HorizontalAlign.Center)
}
Row() {
Column() {
... ... @@ -79,11 +102,22 @@ export struct PlayerTitleComment {
.textOverflow({ overflow: TextOverflow.Ellipsis })
}
Text('查看详情 > ')
.margin({ top: 5 })
.fontColor(Color.White)
.fontSize(12)
.maxLines(2)
if (this.contentDetailData?.newsSummary) {
Text('查看详情 > ')
.margin({ top: 8 })
.padding(6)
.borderRadius(2)
.backgroundColor('#636363')
.fontColor(Color.White)
.fontSize(12)
.onClick(() => {
console.log('click===', this.dialogController?.open)
this.isOpen = true
this.dialogController?.open()
})
}
}
.layoutWeight(1)
.alignItems(HorizontalAlign.Start)
... ... @@ -117,25 +151,7 @@ export struct PlayerTitleComment {
.height(24)
.aspectRatio(1)
.onClick(() => {
if (this.isFullScreen) {
if (deviceInfo.deviceType != "phone") {
WindowModel.shared.getWindowSize().then((size) => {
if (size.width > size.height) {
router.back();
} else {
this.isFullScreen = !this.isFullScreen;
WindowModel.shared.setPreferredOrientation(window.Orientation.PORTRAIT);
devicePLSensorManager.devicePLSensorOn(window.Orientation.PORTRAIT);
}
})
} else {
this.isFullScreen = !this.isFullScreen;
WindowModel.shared.setPreferredOrientation(window.Orientation.PORTRAIT);
devicePLSensorManager.devicePLSensorOn(window.Orientation.PORTRAIT);
}
} else {
router.back();
}
router.back();
})
TextInput({ placeholder: '说两句...', text: this.comment })
... ... @@ -158,5 +174,8 @@ export struct PlayerTitleComment {
.width('100%')
// .height('40%')
.alignItems(HorizontalAlign.Start)
.opacity(this.isOpen ? 0 : 1)
.animation({ duration: 200 })
}
}
\ No newline at end of file
}
... ...