developOne / harmonyPool

Go to a project
Toggle navigation Toggle navigation pinning
zhenghy
8326924f 1 parent cf4909c0

直播入口修改

Inline Side-by-side
Showing 11 changed files with 271 additions and 168 deletions
... ... @@ -2,10 +2,12 @@ import { Action, CompDTO, ContentDTO, Params } from 'wdBean'
import { WDRouterRule } from 'wdRouter/Index'
import { Logger } from 'wdKit/Index'
import { ExtraDTO } from 'wdBean/src/main/ets/bean/component/extra/ExtraDTO'
import { LiveModel } from '../../viewmodel/LiveModel'
@Component
export struct HorizontalStrokeCardThreeTwoRadioForOneComponent {
@State compDTO: CompDTO = {} as CompDTO
build() {
Column() {
Row() {
... ... @@ -30,7 +32,7 @@ export struct HorizontalStrokeCardThreeTwoRadioForOneComponent {
.height(14)
}
}.justifyContent(FlexAlign.SpaceBetween)
.margin({ top: 8 ,bottom: 8})
.margin({ top: 8, bottom: 8 })
.width('100%')
... ... @@ -45,12 +47,13 @@ export struct HorizontalStrokeCardThreeTwoRadioForOneComponent {
.fontColor($r("app.color.color_212228"))
.fontWeight(400)
.maxLines(1)
.textOverflow({ overflow: TextOverflow.Ellipsis }) // 超出的部分显示省略号。
.textOverflow({ overflow: TextOverflow.Ellipsis })// 超出的部分显示省略号。
.textAlign(TextAlign.Start)
.margin({ top: 8 })
.width('100%')
}.width("100%")
}
.width("100%")
.padding({
top: 14,
left: 16,
... ... @@ -59,16 +62,26 @@ export struct HorizontalStrokeCardThreeTwoRadioForOneComponent {
})
.backgroundColor($r("app.color.white"))
.margin({ bottom: 8 })
.onClick(()=>{
.onClick(() => {
this.gotoLive(this.compDTO?.operDataList[0])
})
}
gotoLive(content: ContentDTO) {
async gotoLive(content: ContentDTO) {
const liveDetail = await LiveModel.getLiveDetails(content?.objectId || '', content?.relId || '', content?.relType || '')
const liveStyle = liveDetail[0].liveInfo.liveStyle
const liveState = liveDetail[0].liveInfo.liveState
console.error('liveDetail===', liveDetail)
let taskAction: Action = {
type: 'JUMP_DETAIL_PAGE',
params: {
detailPageType: 2,
contentID: content?.objectId,
liveStyle: liveState === 'wait' ? 0 : liveStyle,
extra: {
relType: content?.relType,
relId: content?.relId,
... ... @@ -76,6 +89,6 @@ export struct HorizontalStrokeCardThreeTwoRadioForOneComponent {
} as Params,
};
WDRouterRule.jumpWithAction(taskAction)
Logger.debug(`gotoLive, ${content.objectId}`);
// Logger.debug(TAG, `gotoLive, ${content.objectId}`);
}
}
\ No newline at end of file
... ...
... ... @@ -6,6 +6,7 @@ import { WDRouterRule } from 'wdRouter/Index'
import { CardMediaInfo } from '../cardCommon/CardMediaInfo'
import { ExtraDTO } from 'wdBean/src/main/ets/bean/component/extra/ExtraDTO'
import { Logger } from 'wdKit/Index'
import { LiveModel } from '../../viewmodel/LiveModel'
@Component
export struct LiveHorizontalCardComponent {
... ... @@ -100,12 +101,22 @@ export struct LiveHorizontalCardComponent {
})
.backgroundColor($r("app.color.white"))
}
gotoLive(content: ContentDTO) {
async gotoLive(content: ContentDTO) {
const liveDetail = await LiveModel.getLiveDetails(content?.objectId || '', content?.relId || '', content?.relType || '')
const liveStyle = liveDetail[0].liveInfo.liveStyle
const liveState = liveDetail[0].liveInfo.liveState
console.error('liveDetail===', liveDetail)
let taskAction: Action = {
type: 'JUMP_DETAIL_PAGE',
params: {
detailPageType: 2,
contentID: content?.objectId,
liveStyle: liveState === 'wait' ? 0 : liveStyle,
extra: {
relType: content?.relType,
relId: content?.relId,
... ... @@ -113,6 +124,6 @@ export struct LiveHorizontalCardComponent {
} as Params,
};
WDRouterRule.jumpWithAction(taskAction)
Logger.debug(`gotoLive, ${content.objectId}`);
// Logger.debug(TAG, `gotoLive, ${content.objectId}`);
}
}
\ No newline at end of file
... ...
... ... @@ -6,6 +6,7 @@ import { Logger, StringUtils } from 'wdKit/Index'
import { CardMediaInfo } from '../cardCommon/CardMediaInfo'
import { ExtraDTO } from 'wdBean/src/main/ets/bean/component/extra/ExtraDTO'
import { WDRouterRule } from 'wdRouter/Index'
import { LiveModel } from '../../viewmodel/LiveModel'
@Component
export struct LiveHorizontalReservationComponent {
... ... @@ -92,12 +93,21 @@ export struct LiveHorizontalReservationComponent {
.backgroundColor($r("app.color.white"))
}
gotoLive(content: ContentDTO) {
async gotoLive(content: ContentDTO) {
const liveDetail = await LiveModel.getLiveDetails(content?.objectId || '', content?.relId || '', content?.relType || '')
const liveStyle = liveDetail[0].liveInfo.liveStyle
const liveState = liveDetail[0].liveInfo.liveState
console.error('liveDetail===', liveDetail)
let taskAction: Action = {
type: 'JUMP_DETAIL_PAGE',
params: {
detailPageType: 2,
contentID: content?.objectId,
liveStyle: liveState === 'wait' ? 0 : liveStyle,
extra: {
relType: content?.relType,
relId: content?.relId,
... ... @@ -105,6 +115,6 @@ export struct LiveHorizontalReservationComponent {
} as Params,
};
WDRouterRule.jumpWithAction(taskAction)
Logger.debug(`gotoLive, ${content.objectId}`);
// Logger.debug(TAG, `gotoLive, ${content.objectId}`);
}
}
\ No newline at end of file
... ...
import { BottomComponent } from '../widgets/details/BottomComponent';
import { TabComponent } from '../widgets/details/TabComponent';
import { TopPlayComponent } from '../widgets/details/video/TopPlayComponet';
@Component
export struct DetailPlayHLivePage {
aboutToAppear(): void {
}
build() {
Column() {
TopPlayComponent()
TabComponent()
BottomComponent()
}
.height('100%')
.width('100%')
}
onPageShow(): void {
}
aboutToDisappear(): void {
}
}
\ No newline at end of file
... ... @@ -60,12 +60,13 @@ export struct DetailPlayVLivePage {
swiperController: this.swiperController,
swiperIndex: $swiperIndex
})
Image($r('app.media.icon_live_more'))
.width(40)
.aspectRatio(1)// .visibility(this.swiperIndex === 0 ? Visibility.Visible : Visibility.Hidden)
.aspectRatio(1)
.visibility(this.swiperIndex === 0 ? Visibility.Visible : Visibility.Hidden)
.animation({ duration: 500 })
.position({ x: '95%', y: '95%' })
.position({ x: '90%', y: '90%' })
.onClick(() => {
this.swiperController.showNext()
})
... ...
import { LiveRoomItemBean } from 'wdBean/Index'
@Component
export struct ChatItemComponent {
item: LiveRoomItemBean = {} as LiveRoomItemBean
aboutToAppear(): void {
}
build() {
Row() {
Image(this.item.senderUserAvatarUrl)
.borderRadius(90)
.width(24)
.height(24)
Text() {
Span(this.item.senderUserName + ': ')
.fontColor('#666666')
Span(this.item.text)
.fontColor('#222222')
}
.margin({ left: 8 })
.lineHeight(20)
.layoutWeight(1)
.fontSize('14fp')
.fontWeight(400)
}
.alignItems(VerticalAlign.Top)
.padding({
left: 15,
top: 15,
right: 15
})
}
aboutToDisappear(): void {
}
}
\ No newline at end of file
... ...
import { LiveDetailsBean, LiveRoomItemBean } from 'wdBean/Index'
import { EmptyComponent, ErrorComponent, ListHasNoMoreDataUI } from 'wdComponent/Index'
import CustomRefreshLoadLayout from 'wdComponent/src/main/ets/components/page/CustomRefreshLoadLayout'
import LoadMoreLayout from 'wdComponent/src/main/ets/components/page/LoadMoreLayout'
import RefreshLayout from 'wdComponent/src/main/ets/components/page/RefreshLayout'
import { RefreshLayoutBean } from 'wdComponent/src/main/ets/components/page/RefreshLayoutBean'
import PageModel from 'wdComponent/src/main/ets/viewmodel/PageModel'
import { ViewType } from 'wdConstant/Index'
import { LiveViewModel } from '../../viewModel/LiveViewModel'
import { TabChatItemComponent } from '../details/TabChatItemComponent'
@Component
export struct PlayerCommentComponent {
liveViewModel: LiveViewModel = new LiveViewModel()
@Consume liveDetailsBean: LiveDetailsBean
@State private pageModel: PageModel = new PageModel()
@State liveChatList: Array<LiveRoomItemBean> = []
aboutToAppear(): void {
this.getLiveChatList()
}
getLiveChatList() {
this.pageModel.currentPage = 1
this.liveViewModel.getLiveChatList(
1,
this.liveDetailsBean?.liveInfo?.mlive?.mliveId,
this.liveDetailsBean?.newsId,
20,)
.then(
(data) => {
if (data.barrageResponses && data.barrageResponses.length > 0) {
this.pageModel.viewType = ViewType.LOADED;
this.liveChatList.push(...data.barrageResponses)
if (data.barrageResponses.length === this.pageModel.pageSize) {
this.pageModel.currentPage++;
this.pageModel.hasMore = true;
} else {
this.pageModel.hasMore = false;
}
} else {
this.pageModel.viewType = ViewType.EMPTY;
}
},
() => {
})
}
build() {
Stack() {
if (this.pageModel.viewType == ViewType.LOADING) {
this.LoadingLayout()
} else if (this.pageModel.viewType == ViewType.ERROR) {
ErrorComponent()
} else if (this.pageModel.viewType == ViewType.EMPTY) {
EmptyComponent()
} else {
this.ListLayout()
}
}
.align(Alignment.Top)
// .backgroundColor('#F5F5F5')
.height('100%')
.width('100%')
}
@Builder
LoadingLayout() {
CustomRefreshLoadLayout({
refreshBean: new RefreshLayoutBean(true,
$r('app.media.ic_pull_up_load'), $r('app.string.pull_up_load_text'), this.pageModel.pullDownRefreshHeight)
})
}
@Builder
ListLayout() {
List() {
ListItem() {
// 下拉刷新
RefreshLayout({
refreshBean: new RefreshLayoutBean(this.pageModel.isVisiblePullDown, this.pageModel.pullDownRefreshImage,
this.pageModel.pullDownRefreshText, this.pageModel.pullDownRefreshHeight)
})
}
ForEach(this.liveChatList, (item: LiveRoomItemBean) => {
ListItem() {
TabChatItemComponent({ item: item })
}
})
// 加载更多
ListItem() {
if (this.pageModel.hasMore) {
LoadMoreLayout({
refreshBean: new RefreshLayoutBean(this.pageModel.isVisiblePullUpLoad, this.pageModel.pullUpLoadImage,
this.pageModel.pullUpLoadText, this.pageModel.pullUpLoadHeight)
})
} else {
ListHasNoMoreDataUI()
}
}
}
}
}
\ No newline at end of file
... ...
... ... @@ -4,7 +4,7 @@ import { PlayerUIComponent } from './PlayerUIComponent'
@Component
export struct PlayerInfoComponent {
swiperController?: SwiperController
@Prop playerController: WDPlayerController
private playerController?: WDPlayerController
@Consume bottomSafeHeight: number
@Consume topSafeHeight: number
@Link swiperIndex: number
... ...
import { LiveDetailsBean, LiveRoomDataBean } from 'wdBean/Index'
import { NumberFormatterUtils } from 'wdKit/Index'
@Preview
@Component
export struct PlayerTitleComponent {
@Consume liveDetailsBean: LiveDetailsBean
... ... @@ -9,133 +10,72 @@ export struct PlayerTitleComponent {
build() {
Column() {
Row() {
Image($r('app.media.icon_arrow_left_white'))
.width(24)
.aspectRatio(1)
.visibility(Visibility.None)
.margin({
right: 10
})
if (this.liveDetailsBean.liveInfo?.liveState != 'wait') {
Text(this.liveDetailsBean.newsTitle)
.maxLines(1)
.textOverflow({ overflow: TextOverflow.Ellipsis })
.fontSize('16fp')
.fontWeight(500)
.fontColor(Color.White)
.textAlign(TextAlign.Start)
.layoutWeight(1)
} else {
Blank()
}
Image($r('app.media.icon_share'))
.width(24)
.aspectRatio(1)
.visibility(Visibility.None)
Text(this.liveDetailsBean.newsTitle || '')
.maxLines(2)
.fontSize(16)
.fontWeight(500)
.fontColor(Color.White)
}.margin({ bottom: 10 })
Row() {
this.getLiveStatusView()
}
.width('100%')
.alignItems(VerticalAlign.Center)
.margin({
bottom: 10
})
this.getLiveStatusView()
}.width('100%')
}
.width('100%')
.alignItems(HorizontalAlign.Start)
.padding({
top: 20,
bottom: 6,
left: 10,
right: 10
top: 12,
left: 16
})
.alignItems(HorizontalAlign.Start)
.visibility(Visibility.Visible)
}
@Builder
getLiveStatusView() {
Row() {
Image(this.liveDetailsBean.rmhInfo.rmhHeadUrl)
.width(22)
.height(18)
Text(this.liveDetailsBean.rmhInfo.rmhName)
.fontSize('11fp')
.fontWeight(400)
Image(this.liveDetailsBean.rmhInfo?.rmhHeadUrl || '')
.width(24)
.aspectRatio(1)
.borderRadius('50%')
.fillColor(Color.Transparent)
Text(this.liveDetailsBean.rmhInfo?.rmhName || '')
.fontSize(12)
.fontWeight(500)
.fontColor(Color.White)
.padding({
top: 2,
right: 8,
left: 4,
bottom: 2
})
}
.backgroundColor('#4D000000')
.padding({
top: 1,
right: 4,
bottom: 1
})
.borderRadius(2)
.margin({ right: 8 })
// 直播新闻-直播状态 wait待开播running直播中end已结束cancel已取消paused暂停
// 预约
if (this.liveDetailsBean.liveInfo?.liveState == 'wait') {
Row() {
Image($r('app.media.icon_live_status_wait'))
.width(22)
.height(18)
Text('预约')
.fontSize('11fp')
.fontWeight(400)
.fontColor(Color.White)
}
.backgroundColor('#4D000000')
.padding({
top: 1,
right: 4,
bottom: 1
})
}
// 直播中
else if (this.liveDetailsBean.liveInfo?.liveState == 'running') {
Row() {
Row() {
if (this.liveDetailsBean.liveInfo?.liveState == 'running') {
Image($r('app.media.icon_live_status_running'))
.width(22)
.height(18)
Text('直播中')
.fontSize('11fp')
.fontWeight(400)
.fontColor(Color.White)
Image($r('app.media.icon_live_player_status_end'))
.width(12)
.height(12)
Text(`${NumberFormatterUtils.formatNumberWithWan(this.liveRoomDataBean.pv)}人参与`)
.fontSize('11fp')
.fontWeight(400)
.fontColor(Color.White)
.margin({ right: 1 })
}
.backgroundColor('#4D000000')
.padding({
top: 1,
right: 4,
bottom: 1
})
}
//回看
else if (this.liveDetailsBean.liveInfo?.liveState == 'end') {
Row() {
Text('回看')
.fontSize('11fp')
.fontWeight(400)
.fontColor(Color.White)
Image($r('app.media.icon_live_player_status_end'))
.width(12)
.height(12)
Text(`${NumberFormatterUtils.formatNumberWithWan(this.liveRoomDataBean.pv)}人参与`)
.fontSize('11fp')
.fontWeight(400)
.fontColor(Color.White)
}
.backgroundColor('#4D000000')
.padding({
left: 4,
top: 1,
right: 4,
bottom: 1
})
Text(this.liveDetailsBean.liveInfo?.liveState == 'running' ? '直播中' : '回看')
.fontSize(11)
.fontWeight(400)
.fontColor(Color.White)
Image($r('app.media.icon_live_player_status_end'))
.width(12)
.height(12)
Text(`${NumberFormatterUtils.formatNumberWithWan(this.liveRoomDataBean.pv)}人参与`)
.fontSize('11fp')
.fontWeight(400)
.fontColor(Color.White)
}
.backgroundColor('#4D000000')
.borderRadius(2)
.padding(this.liveDetailsBean.liveInfo?.liveState == 'running' ? { left: 0, right: 4, top: 0, bottom: 0 } : 4)
}
}
... ...
import { WDPlayerController } from 'wdPlayer/Index';
import { PlayerCommentComponent } from './PlayerCommentComponent';
import { PlayerTitleComponent } from './PlayerTitleComponent';
import { PlayerVideoControlComponent } from './PlayerVideoControlComponent';
@Component
export struct PlayerUIComponent {
playerController: WDPlayerController = new WDPlayerController();
private playerController?: WDPlayerController
build() {
Column() {
PlayerTitleComponent()
Blank()
// PlayerCommentComponent().layoutWeight(1)
PlayerVideoControlComponent({ playerController: this.playerController })
}
.height('100%')
.width('100%')
}
}
\ No newline at end of file
... ...
... ... @@ -8,7 +8,7 @@ import { LiveDetailsBean, LiveRoomDataBean } from 'wdBean/Index'
@Component
export struct PlayerVideoControlComponent {
playerController: WDPlayerController = new WDPlayerController();
private playerController?: WDPlayerController
@Consume liveDetailsBean: LiveDetailsBean
@Consume liveRoomDataBean: LiveRoomDataBean
//菜单键是否可见
... ... @@ -21,12 +21,16 @@ export struct PlayerVideoControlComponent {
@State isPlayStatus: boolean = true
aboutToAppear(): void {
//播放进度监听
this.playerController.onTimeUpdate = (position: number, duration: number) => {
this.currentTime = DateFormatUtil.secondToTime(Math.floor(position / 1000));
this.totalTime = DateFormatUtil.secondToTime(Math.floor(duration / 1000));
this.progressVal = Math.floor(position * 100 / duration);
if (this.playerController) {
//播放进度监听
this.playerController.onTimeUpdate = (position: number, duration: number) => {
console.log('onTimeUpdate===', position, duration)
this.currentTime = DateFormatUtil.secondToTime(Math.floor(position / 1000));
this.totalTime = DateFormatUtil.secondToTime(Math.floor(duration / 1000));
this.progressVal = Math.floor(position * 100 / duration);
}
}
}
build() {
... ... @@ -90,10 +94,10 @@ export struct PlayerVideoControlComponent {
.onClick(() => {
if (this.isPlayStatus) {
this.isPlayStatus = false
this.playerController.pause()
this.playerController?.pause()
} else {
this.isPlayStatus = true
this.playerController.play()
this.playerController?.play()
}
})
}
... ... @@ -108,15 +112,16 @@ export struct PlayerVideoControlComponent {
.blockSize({
width: 18,
height: 12
})// .blockStyle({
// type: SliderBlockType.IMAGE,
// image: $r('app.media.ic_player_block')
// })
.blockColor(Color.White)
})
.trackColor('#4DFFFFFF')
.selectedColor('#FFED2800')
.trackThickness(2)
.blockStyle({
type: SliderBlockType.IMAGE,
image: $r('app.media.ic_player_block')
})
.blockSize({ width: 18, height: 12 })
.height(14)
.trackThickness(1)
.layoutWeight(1)
.margin({
left: 8,
... ...