developOne / harmonyPool

Go to a project
Toggle navigation Toggle navigation pinning
zhenghy
4b6287e9 1 parent 3d13fe40

修改播放器页面布局与查看更多条件判断

Inline Side-by-side
Showing 11 changed files with 451 additions and 69 deletions
import mediaquery from '@ohos.mediaquery';
import { ContentDetailDTO, InteractDataDTO } from 'wdBean';
import { PlayerConstants, WDPlayerController, WDPlayerRenderView } from 'wdPlayer';
import { ContentDetailRequest, devicePLSensorManager } from 'wdDetailPlayApi';
import { PlayControlViewContainer } from '../view/PlayControlViewContainer';
import { PlayerDetailContainer } from '../view/PlayerDetailContainer';
import { DetailContainer } from '../view/DetailContainer';
import { ContentDetailRequest } from 'wdDetailPlayApi';
import {
batchLikeAndCollectParams,
batchLikeAndCollectResult,
... ... @@ -13,6 +9,8 @@ import {
} from 'wdDetailPlayApi/src/main/ets/request/ContentDetailRequest';
import { HttpUrlUtils } from 'wdNetwork/Index';
import { DateTimeUtils } from 'wdKit/Index';
import { PlayerBottomView } from '../view/PlayerBottomView';
import { PlayerRightView } from '../view/PlayerRightView';
const TAG = 'DetailPlayShortVideoPage';
... ... @@ -32,6 +30,7 @@ export struct DetailPlayShortVideoPage {
@Provide videoLandScape?: number = 1; // 视频朝向， 横屏视频：1;竖屏视频：2
@Provide newsStatusOfUser: batchLikeAndCollectResult | undefined = undefined // 点赞、收藏状态
@Provide followStatus: string = '0' // 关注状态
@Provide isOpenDetail: boolean = false
@Consume @Watch('pageShowChange') pageShow: number
@Consume @Watch('pageHideChange') pageHide: number
... ... @@ -45,14 +44,15 @@ export struct DetailPlayShortVideoPage {
pageHideChange() {
if (this.currentIndex === this.index && this.playerController.getStatus() === PlayerConstants.STATUS_START) {
this.playerController.pause()
}
}
/**
* 监听下标变化手动创建或销毁视频
*/
currentIndexChange() {
if (this.currentIndex != this.index) {
this.playerController.pause()
if (this.index < this.currentIndex - 3 && this.playerController.getPlayer()) {
this.playerController.release()
}
... ... @@ -64,11 +64,12 @@ export struct DetailPlayShortVideoPage {
} else {
this.playerController.play()
}
}
}
// 查询用户点赞、收藏、关注等状态
/**
* 查询用户点赞、收藏、关注状态、记录浏览历史
*/
queryNewsInfoOfUser() {
if (HttpUrlUtils.getUserId()) {
const params: batchLikeAndCollectParams = {
... ... @@ -98,7 +99,7 @@ export struct DetailPlayShortVideoPage {
}
})
// 记录浏览历史
// 记录浏览历史
const params2: postInteractBrowsOperateParams = {
delStatus: 0,
contentList: [{
... ... @@ -134,19 +135,19 @@ export struct DetailPlayShortVideoPage {
this.playerController?.release();
}
onPageShow() {
console.log(TAG, 'onPageShow')
this.queryNewsInfoOfUser()
// this.playerController?.play();
}
onPageHide() {
console.log(TAG, 'onPageHide')
this.playerController?.pause();
build() {
Stack({ alignContent: Alignment.Top }) {
this.playerViewBuilder()
PlayerBottomView()
PlayerRightView()
}
.height('100%')
.width('100%')
}
@Builder
playerViewContainerBuilder() {
playerViewBuilder() {
// 播放窗口
WDPlayerRenderView({
playerController: this.playerController,
... ... @@ -165,36 +166,4 @@ export struct DetailPlayShortVideoPage {
this.playerController?.switchPlayOrPause();
})
}
@Builder
playControlViewContainerBuilder() {
// 播放窗口控制bar
PlayControlViewContainer({
playerController: this.playerController
})
}
@Builder
detailContainerBuilder() {
DetailContainer({
playerController: this.playerController
})
}
build() {
Column() {
PlayerDetailContainer({
playerView: () => {
this.playerViewContainerBuilder()
}, playControlView: () => {
// this.playControlViewContainerBuilder()
}, detailView: () => {
this.detailContainerBuilder()
}
})
}
.height('100%')
.width('100%')
}
}
\ No newline at end of file
... ...
... ... @@ -18,6 +18,7 @@ export struct DetailVideoListPage {
private swiperController: SwiperController = new SwiperController()
@Provide bottomSafeHeight: number = AppStorage.get<number>('bottomSafeHeight') || 0
@Provide topSafeHeight: number = AppStorage.get<number>('topSafeHeight') || 0
@Provide windowWidth: number = AppStorage.get<number>('windowWidth') || 0
@Provide showComment: boolean = true
@Provide pageShow: number = -1
@Provide pageHide: number = -1
... ...
... ... @@ -2,11 +2,22 @@
@Component
export struct Test {
build() {
Column() {
Stack({ alignContent: Alignment.Top }) {
Text('视频').width('100%').height('50%').backgroundColor('#000').fontColor(Color.White)
Row() {
Text('111')
Text('title')
Text('contentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontent')
}
}.width('100%')
.backgroundColor('#ff0000')
.align(Alignment.BottomStart)
.position({ y: '100%' })
.markAnchor({ y: '100%' })
}
.width(300)
.height(600)
.backgroundColor('#cccccc')
}
}
\ No newline at end of file
... ...
... ... @@ -25,7 +25,9 @@ interface loadMoreData {
const TAG = 'VideoChannelDetail'
let timer: number = -1
@Entry
const storage = LocalStorage.getShared();
@Entry(storage)
@Component
export struct VideoChannelDetail {
private groupId: string = '' // 楼层id
... ... @@ -43,6 +45,7 @@ export struct VideoChannelDetail {
@Link barBackgroundColor: Color
private swiperController: SwiperController = new SwiperController()
@Provide showComment: boolean = false
@Provide windowWidth: number = AppStorage.get<number>('windowWidth') || 0
@State data: ContentDetailDTO[] = []
@State currentIndex: number = 0
@State interactDataList: InteractDataDTO[] = []
... ...
... ... @@ -5,7 +5,7 @@ export struct DetailDialog {
@Prop name: string
@Prop title: string
@Prop summary: string
@Link isOpen: boolean
@Link isOpenDetail: boolean
build() {
Column() {
... ... @@ -15,6 +15,7 @@ export struct DetailDialog {
.fontSize(14)
.fontWeight(600)
.lineHeight(17)
.margin({ top: 8 })
}
if (this.title) {
... ... @@ -37,8 +38,8 @@ export struct DetailDialog {
Image($r('app.media.ic_close'))
.height(24).margin({ top: 20 }).onClick(() => {
this.controller.close()
if (this.isOpen) {
this.isOpen = !this.isOpen
if (this.isOpenDetail) {
this.isOpenDetail = !this.isOpenDetail
}
})
}.width('100%').justifyContent(FlexAlign.Center)
... ...
import { WDPlayerController } from 'wdPlayer/Index';
import { PlayerTitleView } from './PlayerTitleView'
import { PlayerProgressView } from './PlayerProgressView'
import { PlayerCommentView } from './PlayerCommentView'
@Component
export struct PlayerBottomView {
@Consume showComment?: boolean
@Consume isOpenDetail?: boolean
private playerController?: WDPlayerController;
build() {
Column() {
PlayerTitleView()
PlayerProgressView({ playerController: this.playerController })
.visibility(this.isOpenDetail ? Visibility.None : Visibility.Visible)
if (this.showComment) {
PlayerCommentView().visibility(this.isOpenDetail ? Visibility.None : Visibility.Visible)
}
}
.alignItems(HorizontalAlign.Start)
.position({ x: 0, y: '100%' })
// .markAnchor({ x: 56, y: 56 })
.markAnchor({ y: '100%' })
}
}
\ No newline at end of file
... ...
import router from '@ohos.router';
@Component
export struct PlayerCommentView {
@Consume showComment?: boolean
@State comment: string = '';
build() {
Row() {
Image($r('app.media.ic_back'))
.width(24)
.height(24)
.aspectRatio(1)
.onClick(() => {
router.back();
})
TextInput({ placeholder: '说两句...', text: this.comment })
.placeholderColor(Color.White)
.placeholderFont({ size: 14 })
.fontColor(Color.White)
.fontSize(14)
.maxLines(1)
.layoutWeight(1)
.backgroundColor('#1a1a1a')
.borderRadius(2)
.height(30)
.margin({ left: 12 })
}
.backgroundColor(Color.Black)
.alignItems(VerticalAlign.Center)
.padding({ left: 16, right: 16, top: 11, bottom: 11 })
}
}
\ No newline at end of file
... ...
import { PlayerConstants, WDPlayerController } from 'wdPlayer/Index';
@Component
export struct PlayerProgressView {
private playerController?: WDPlayerController;
@Consume progressVal: number;
@State status: number = PlayerConstants.STATUS_START;
aboutToAppear() {
if (this.playerController) {
this.playerController.onStatusChange = (status: number) => {
this.status = status
}
}
}
build() {
Slider({
value: this.progressVal,
step: 0.01,
// style: SliderStyle.OutSet
})
.blockColor(this.status === PlayerConstants.STATUS_START ? Color.Transparent : $r('app.color.play_block_color'))
.trackColor(this.status === PlayerConstants.STATUS_START ? $r('app.color.play_track_color') : $r('app.color.pause_track_color'))
.selectedColor(this.status === PlayerConstants.STATUS_START ? $r('app.color.play_selected_color') : $r('app.color.pause_selected_color'))
.trackThickness(this.status === PlayerConstants.STATUS_START ? 1 : 4)
.blockStyle({
type: this.status === PlayerConstants.STATUS_START ? SliderBlockType.DEFAULT : SliderBlockType.IMAGE,
image: $r('app.media.ic_player_block')
})
.blockSize({ width: 18, height: 12 })
.width('100%')
.height(19)
.onChange((value: number, mode: SliderChangeMode) => {
this.playerController?.setSeekTime(Math.floor(value), mode);
})
}
}
\ No newline at end of file
... ...
import { ContentDetailDTO, InteractDataDTO, Params, RmhInfoDTO, UserInfoDTO } from 'wdBean/Index';
import {
batchLikeAndCollectParams,
batchLikeAndCollectResult,
ContentDetailRequest,
contentListParams,
postExecuteCollectRecordParams,
postExecuteLikeParams,
postInteractAccentionOperateParams
} from 'wdDetailPlayApi/src/main/ets/request/ContentDetailRequest';
import { SPHelper, ToastUtils } from 'wdKit';
import { HttpUrlUtils } from 'wdNetwork/Index';
import { WDPlayerController } from 'wdPlayer/Index';
import { WDRouterPage, WDRouterRule } from 'wdRouter/Index';
import { SpConstants } from 'wdConstant/Index'
export interface OperationItem {
icon: Resource;
icon_check?: Resource;
// icon_selected: Resource;
text: string | Resource;
num?: number; // 个数
}
const TAG = 'PlayerRightView';
@Component
export struct PlayerRightView {
private playerController?: WDPlayerController;
@Consume interactData: InteractDataDTO
@Consume contentDetailData: ContentDetailDTO
@Consume newsStatusOfUser: batchLikeAndCollectResult
@Consume followStatus: string
@Consume isOpenDetail: boolean
@State operationList: OperationItem[] = [
{
icon: $r('app.media.ic_like_uncheck'),
icon_check: $r('app.media.ic_like_check'),
text: "赞",
// num: 6622
},
{
icon: $r('app.media.ic_collect_uncheck'),
icon_check: $r('app.media.ic_collect_check'),
text: "收藏",
// num: 662,
},
{
icon: $r('app.media.ic_comment'),
text: "抢首评",
// num: 500,
},
{
icon: $r('app.media.ic_share'),
text: "分享"
}
]
aboutToAppear() {
}
/**
* 点赞、取消点赞
*/
async toggleLikeStatus() {
// 未登录，跳转登录
const user_id = await SPHelper.default.get(SpConstants.USER_ID, '')
if (!user_id) {
this.playerController?.pause()
WDRouterRule.jumpWithPage(WDRouterPage.loginPage)
return
}
const params: postExecuteLikeParams = {
status: this.newsStatusOfUser?.likeStatus === '1' ? '0' : '1',
contentId: this.contentDetailData?.newsId + '',
contentType: this.contentDetailData?.newsType + '',
}
ContentDetailRequest.postExecuteLike(params).then(res => {
if (this.newsStatusOfUser) {
this.newsStatusOfUser.likeStatus = this.newsStatusOfUser?.likeStatus === '1' ? '0' : '1'
if (this.newsStatusOfUser.likeStatus === '1') {
this.interactData.likeNum = Number(this.interactData.likeNum) + 1
} else {
this.interactData.likeNum = Number(this.interactData.likeNum) - 1
}
console.log('点赞、取消点赞==', this.newsStatusOfUser?.likeStatus, this.interactData?.likeNum)
// this.queryContentInteractCount()
}
})
}
/**
* 收藏、取消收藏
*/
async toggleCollectStatus() {
// 未登录，跳转登录
const user_id = await SPHelper.default.get(SpConstants.USER_ID, '')
if (!user_id) {
WDRouterRule.jumpWithPage(WDRouterPage.loginPage)
return
}
const params: postExecuteCollectRecordParams = {
status: this.newsStatusOfUser?.collectStatus === 1 ? '0' : '1',
contentList: [{
contentId: this.contentDetailData?.newsId + '',
contentType: this.contentDetailData?.newsType + '',
}],
}
ContentDetailRequest.postExecuteCollectRecord(params).then(res => {
if (this.newsStatusOfUser) {
this.newsStatusOfUser.collectStatus = this.newsStatusOfUser?.collectStatus === 1 ? 0 : 1
// this.queryContentInteractCount()
if (this.newsStatusOfUser.collectStatus === 1) {
this.interactData.collectNum = Number(this.interactData.collectNum) + 1
} else {
this.interactData.collectNum = Number(this.interactData.collectNum) - 1
}
console.log('收藏、取消收藏==', this.newsStatusOfUser?.collectStatus, this.interactData?.collectNum)
}
})
}
/**
* 查询点赞、收藏数量
*/
queryContentInteractCount() {
const params: contentListParams = {
contentList: [{
contentId: this.contentDetailData?.newsId + '',
contentType: this.contentDetailData?.newsType,
}]
}
ContentDetailRequest.getContentInteract(params).then(res => {
if (res.data && this.interactData) {
this.interactData.likeNum = res.data[0]?.likeNum
this.interactData.collectNum = res.data[0]?.collectNum
this.interactData.commentNum = res.data[0]?.commentNum
}
console.log('获取互动点赞等数据===', JSON.stringify(res))
})
}
getImgUrl() {
return this.contentDetailData?.rmhInfo?.rmhHeadUrl || this.contentDetailData?.userInfo?.userHeadUrl
}
/**
* 关注号主
*/
async handleAccention() {
// 未登录，跳转登录
const user_id = await SPHelper.default.get(SpConstants.USER_ID, '')
if (!user_id) {
WDRouterRule.jumpWithPage(WDRouterPage.loginPage)
return
}
const params2: postInteractAccentionOperateParams = {
attentionUserType: this.contentDetailData?.rmhInfo?.userType || '', //被关注用户类型（1 普通用户 2 视频号 3 矩阵号）
attentionUserId: this.contentDetailData?.rmhInfo?.userId || '', // 被关注用户号主id
attentionCreatorId: this.contentDetailData?.rmhInfo?.rmhId || '', // 被关注用户号主id
// userType: 1,
// userId: '1',
status: 1,
}
ContentDetailRequest.postInteractAccentionOperate(params2).then(res => {
console.log('关注号主==', JSON.stringify(res.data))
if (this.followStatus == '1') {
this.followStatus = '0'
} else {
this.followStatus = '1'
}
})
}
@Builder
buildUserComp() {
Column() {
if (this.getImgUrl()) {
RelativeContainer() {
Image(this.getImgUrl())
.width('100%')
.borderRadius(24)
.aspectRatio(1)
.border({ width: 1, color: Color.White, style: BorderStyle.Solid })
.alignRules({
top: { anchor: "__container__", align: VerticalAlign.Top },
left: { anchor: "__container__", align: HorizontalAlign.Start }
})
.id("row1")
.onClick(() => {
if (this.contentDetailData.rmhInfo?.cnMainControl === 1) {
// 号主页
const params: Params = {
creatorId: this.contentDetailData.rmhInfo.rmhId,
pageID: ''
}
WDRouterRule.jumpWithPage(WDRouterPage.peopleShipHomePage, params)
}
})
if (this.followStatus == '0') {
Image($r('app.media.ic_add'))
.width(24)
.borderRadius(12)
.alignRules({
left: { anchor: "__container__", align: HorizontalAlign.Center },
bottom: { anchor: "__container__", align: VerticalAlign.Bottom },
})
.margin({ left: -12 })
.id("row2")
.onClick(() => {
// 关注
this.handleAccention()
})
}
}.height(60)
}
}.margin({ bottom: 18 })
}
@Builder
buildOperationItem(item: OperationItem, index: number) {
Column() {
if (item.text === '赞') {
Image(this.newsStatusOfUser?.likeStatus == '1' ? item.icon_check : item.icon)
.width(32)
.aspectRatio(1)
.onClick(() => {
this.toggleLikeStatus()
})
Text(this.interactData?.likeNum ? (this.interactData.likeNum + '') : item.text)
.width('100%')// .margin({ top: 4, left: 6, right: 6 })// .backgroundColor(Color.Brown)
.fontWeight(500)
.textAlign(TextAlign.Center)
.fontSize(13)
.fontColor('#FFFFFF')
.maxLines(1)
.textOverflow({ overflow: TextOverflow.Ellipsis })
} else if (item.text === '收藏') {
Image(this.newsStatusOfUser?.collectStatus == 1 ? item.icon_check : item.icon)
.width(32)
.aspectRatio(1)
.onClick(() => {
this.toggleCollectStatus()
})
Text(this.interactData?.collectNum ? (this.interactData.collectNum + '') : item.text)
.width('100%')// .margin({ top: 4, left: 6, right: 6 })// .backgroundColor(Color.Brown)
.fontWeight(500)
.textAlign(TextAlign.Center)
.fontSize(13)
.fontColor('#FFFFFF')
.maxLines(1)
.textOverflow({ overflow: TextOverflow.Ellipsis })
} else if (item.text === '抢首评') {
Image(item.icon)
.width(32)
.aspectRatio(1)
.onClick((event: ClickEvent) => {
ToastUtils.showToast('评论为公共方法，待开发', 1000);
})
Text(this.interactData?.commentNum ? (this.interactData.commentNum + '') : item.text)
.width('100%')// .margin({ top: 4, left: 6, right: 6 })// .backgroundColor(Color.Brown)
.fontWeight(500)
.textAlign(TextAlign.Center)
.fontSize(13)
.fontColor('#FFFFFF')
.maxLines(1)
.textOverflow({ overflow: TextOverflow.Ellipsis })
} else {
Image(item.icon)
.width(32)
.aspectRatio(1)
.onClick((event: ClickEvent) => {
ToastUtils.showToast('分享为公共方法，待开发', 1000);
})
Text(item.text)
.width('100%')// .margin({ top: 4, left: 6, right: 6 })// .backgroundColor(Color.Brown)
.fontWeight(500)
.textAlign(TextAlign.Center)
.fontSize(13)
.fontColor('#FFFFFF')
.maxLines(1)
.textOverflow({ overflow: TextOverflow.Ellipsis })
}
}
// .width(48)
.margin({ bottom: 20 })
.alignItems(HorizontalAlign.Center)
.hoverEffect(HoverEffect.Scale)
}
build() {
Column() {
this.buildUserComp()
ForEach(this.operationList, (item: OperationItem, index: number) => {
this.buildOperationItem(item, index)
}, (item: OperationItem, index: number) => JSON.stringify(item))
}
.width(48)
.position({ x: '100%', y: '100%' })
.markAnchor({ x: '100%', y: '100%' })
.padding({ bottom: 72 })
.visibility(this.isOpenDetail ? Visibility.None : Visibility.Visible)
}
}
\ No newline at end of file
... ...
... ... @@ -7,14 +7,15 @@ import { componentUtils } from '@kit.ArkUI'
@Component
export struct PlayerTitleView {
@Consume contentDetailData: ContentDetailDTO
@State isOpen: boolean = false
@Consume windowWidth: number
@Consume isOpenDetail: boolean
@State titleHeight: number = 0
dialogController: CustomDialogController = new CustomDialogController({
builder: DetailDialog({
name: this.getName(),
title: this.getTitle(),
summary: this.getSummary(),
isOpen: this.isOpen
isOpenDetail: this.isOpenDetail
}),
autoCancel: false,
... ... @@ -36,7 +37,7 @@ export struct PlayerTitleView {
}
getSummary(): string {
return this.contentDetailData?.newsSummary || ''
return this.contentDetailData?.newIntroduction || ''
}
aboutToAppear(): void {
... ... @@ -45,10 +46,11 @@ export struct PlayerTitleView {
fontSize: 15,
fontWeight: 400,
lineHeight: 20,
constraintWidth: 287 - 16 - 22,
constraintWidth: this.windowWidth - 100 - 16 - 22 + 'px',
})
this.titleHeight = info?.height as number || 0
console.log('titleHeight:', this.titleHeight,)
}
build() {
... ... @@ -82,7 +84,7 @@ export struct PlayerTitleView {
/**
* 标题大于三行或存在简介显示查看详情按钮
*/
if (this.titleHeight > 180 || this.contentDetailData?.newsSummary) {
if (this.titleHeight > 200 || this.getSummary()) {
Text('查看详情 > ')
.padding({ left: 6, right: 6, top: 4, bottom: 4 })
.borderRadius(2)
... ... @@ -91,16 +93,17 @@ export struct PlayerTitleView {
.fontSize(12)
.lineHeight(14)
.fontWeight(400)
.margin({ bottom: 8 })
.onClick(() => {
this.isOpen = true
this.isOpenDetail = true
this.dialogController?.open()
})
}
}
.backgroundColor(Color.Black)
.width(287)
.width(this.windowWidth - 100 + 'px')
.padding({ left: 16, right: 22 })
.alignItems(HorizontalAlign.Start)
.visibility(this.isOpenDetail ? Visibility.None : Visibility.Visible)
}
}
\ No newline at end of file
... ...
... ... @@ -59,8 +59,12 @@ export default class EntryAbility extends UIAbility {
const SYSTEM_AREA = windowClass.getWindowAvoidArea(TYPE_SYSTEM);
const bottomSafeHeight = NAV_AREA.bottomRect.height; // 获取到导航条区域的高度
const topSafeHeight = SYSTEM_AREA.topRect.height; // 获取到状态栏区域的高度
const width = windowClass.getWindowProperties().windowRect.width
const height = windowClass.getWindowProperties().windowRect.height
AppStorage.setOrCreate('bottomSafeHeight', bottomSafeHeight);
AppStorage.setOrCreate('topSafeHeight', topSafeHeight);
AppStorage.setOrCreate('windowWidth', width);
AppStorage.setOrCreate('windowHeight', height);
// let a = new WindowModel();
... ...