wangyujian_wd

feat:1)直播详情直播状态UI修改优化;2)直播和预约直播接口状态添加;3)直播列表跳转事件添加

... ... @@ -167,7 +167,7 @@ export interface LiveDetailsBean {
}
export interface LiveInfo {
//直播新闻-直播状态 wait待开播running直播中end已结束cancel已取消paused暂停
//直播新闻-直播状态 wait 待开播 running 直播中 end 已结束cancel已取消paused暂停
liveState: string
//2024-04-12 15:00:00 直播开始时间
planStartTime: string
... ...
import { CommonConstants } from 'wdConstant'
import { CompDTO } from 'wdBean'
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'
@Component
export struct HorizontalStrokeCardThreeTwoRadioForOneComponent {
... ... @@ -57,5 +59,23 @@ export struct HorizontalStrokeCardThreeTwoRadioForOneComponent {
})
.backgroundColor($r("app.color.white"))
.margin({ bottom: 8 })
.onClick(()=>{
this.gotoLive(this.compDTO?.operDataList[0])
})
}
gotoLive(content: ContentDTO) {
let taskAction: Action = {
type: 'JUMP_DETAIL_PAGE',
params: {
detailPageType: 2,
contentID: content?.objectId,
extra: {
relType: content?.relType,
relId: content?.relId,
} as ExtraDTO
} as Params,
};
WDRouterRule.jumpWithAction(taskAction)
Logger.debug(`gotoLive, ${content.objectId}`);
}
}
\ No newline at end of file
... ...
... ... @@ -4,6 +4,9 @@ import { Action, CompDTO, ContentDTO, Params } from 'wdBean'
import { CommonConstants } from 'wdConstant'
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'
@Component
export struct LiveHorizontalCardComponent {
@State compDTO: CompDTO = {} as CompDTO
... ... @@ -79,6 +82,7 @@ export struct LiveHorizontalCardComponent {
.onClick(() => {
if (item.objectType != '0') {
console.log(item.objectId)
this.gotoLive(item)
}
})
})
... ... @@ -96,4 +100,19 @@ export struct LiveHorizontalCardComponent {
})
.backgroundColor($r("app.color.white"))
}
gotoLive(content: ContentDTO) {
let taskAction: Action = {
type: 'JUMP_DETAIL_PAGE',
params: {
detailPageType: 2,
contentID: content?.objectId,
extra: {
relType: content?.relType,
relId: content?.relId,
} as ExtraDTO
} as Params,
};
WDRouterRule.jumpWithAction(taskAction)
Logger.debug(`gotoLive, ${content.objectId}`);
}
}
\ No newline at end of file
... ...
// 视频直播直播预约
import { LiveHorizontalCardForOneComponent } from './LiveHorizontalCardForOneComponent'
import { CompDTO, ContentDTO } from 'wdBean'
import { Action, CompDTO, ContentDTO, Params } from 'wdBean'
import { CommonConstants } from 'wdConstant'
import { StringUtils } from 'wdKit/Index'
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'
@Component
export struct LiveHorizontalReservationComponent {
@State compDTO: CompDTO = {} as CompDTO
... ... @@ -70,6 +73,7 @@ export struct LiveHorizontalReservationComponent {
.onClick(() => {
if (item.objectType != '0') {
console.log(item.objectId)
this.gotoLive(item)
}
})
})
... ... @@ -87,4 +91,20 @@ export struct LiveHorizontalReservationComponent {
})
.backgroundColor($r("app.color.white"))
}
gotoLive(content: ContentDTO) {
let taskAction: Action = {
type: 'JUMP_DETAIL_PAGE',
params: {
detailPageType: 2,
contentID: content?.objectId,
extra: {
relType: content?.relType,
relId: content?.relId,
} as ExtraDTO
} as Params,
};
WDRouterRule.jumpWithAction(taskAction)
Logger.debug(`gotoLive, ${content.objectId}`);
}
}
\ No newline at end of file
... ...
... ... @@ -13,6 +13,7 @@
"wdKit": "file:../../commons/wdKit",
"wdBean": "file:../../features/wdBean",
"wdConstant": "file:../../commons/wdConstant",
"wdDetailPlayApi": "file:../../features/wdDetailPlayApi"
"wdDetailPlayApi": "file:../../features/wdDetailPlayApi",
"wdRouter": "file:../../commons/wdRouter"
}
}
... ...
... ... @@ -10,11 +10,12 @@ import router from '@ohos.router';
export struct DetailPlayLivePage {
TAG: string = 'DetailPlayLivePage';
liveViewModel: LiveViewModel = new LiveViewModel()
@State relId: string = '500005302448'
@State contentId: string = '20000016340'
@State relType: string = '1'
@State relId: string = ''
@State contentId: string = ''
@State relType: string = ''
@Provide liveDetailsBean: LiveDetailsBean = {} as LiveDetailsBean
@Provide liveRoomDataBean: LiveRoomDataBean = {} as LiveRoomDataBean
@State tabs: string[] = ['直播间', '大家聊']
aboutToAppear(): void {
//https://pdapis.pdnews.cn/api/rmrb-bff-display-zh/content/zh/c/content/detail?relId=500005302448&relType=1&contentId=20000016340
... ... @@ -30,7 +31,7 @@ export struct DetailPlayLivePage {
build() {
Column() {
TopPlayComponent()
TabComponent()
TabComponent({ tabs: this.tabs })
BottomComponent()
}
.height('100%')
... ... @@ -46,6 +47,9 @@ export struct DetailPlayLivePage {
.then(
(data) => {
if (data.length > 0) {
if (data[0].liveInfo?.liveState == 'wait') {
this.tabs = ['简介', '直播间', '大家聊']
}
this.liveDetailsBean = data[0]
}
},
... ...
... ... @@ -170,10 +170,10 @@ export class LiveModel {
* @param isSubscribe
* @returns
*/
liveAppointment(relationId: string, mLiveId: string, isSubscribe: boolean) {
liveAppointment(relationId: string, liveId: string, isSubscribe: boolean) {
let params: Record<string, string> = {};
params['relationId'] = relationId
params['liveId'] = mLiveId
params['liveId'] = liveId
params['isSubscribe'] = `${isSubscribe}`
let headers: HashMap<string, string> = HttpUrlUtils.getCommonHeaders();
return new Promise<ResponseDTO<string>>((success, fail) => {
... ...
... ... @@ -67,9 +67,9 @@ export class LiveViewModel {
}
//直播预约/取消预约
liveAppointment(relationId: string, mLiveId: string, isSubscribe: boolean) {
liveAppointment(relationId: string, liveId: string, isSubscribe: boolean) {
return new Promise<ResponseDTO<string>>((success, fail) => {
this.liveModel.liveAppointment(relationId, mLiveId, isSubscribe).then((data) => {
this.liveModel.liveAppointment(relationId, liveId, isSubscribe).then((data) => {
success(data)
}).catch((message: string) => {
fail(message)
... ...
... ... @@ -2,10 +2,12 @@ import font from '@ohos.font'
import { LiveDetailsBean } from 'wdBean/Index'
import { DateTimeUtils, StringUtils } from 'wdKit/Index'
import { LiveViewModel } from '../../viewModel/LiveViewModel'
import { HttpUrlUtils } from 'wdNetwork/Index'
import { WDRouterPage, WDRouterRule } from 'wdRouter/Index'
@Component
export struct LiveCountdownComponent {
@Consume @Watch('calculateDataStatus') liveDetailsBean: LiveDetailsBean
@State liveDetailsBean: LiveDetailsBean = {} as LiveDetailsBean
textTimerController: TextTimerController = new TextTimerController()
@State format: string = 'HH:mm:ss'
@State month: string = ''
... ... @@ -26,7 +28,8 @@ export struct LiveCountdownComponent {
})
setTimeout(() => {
this.textTimerController.start()
}, 2000)
}, 0)
this.updateData()
}
build() {
... ... @@ -100,7 +103,7 @@ export struct LiveCountdownComponent {
@Builder
showAppointment() {
Text('我要预约')
Text(this.isAppointmentLive ? '取消预约' : '我要预约')
.width('100%')
.height(42)
.textAlign(TextAlign.Center)
... ... @@ -113,13 +116,17 @@ export struct LiveCountdownComponent {
.border({ radius: 4 })
.backgroundColor(this.isAppointmentLive ? '#CCCCCC' : '#ED2800')
.onClick(() => {
if (!HttpUrlUtils.getUserId()) {
WDRouterRule.jumpWithPage(WDRouterPage.loginPage)
return
}
if (this.liveDetailsBean && this.liveDetailsBean.liveInfo) {
this.liveAppointment()
}
})
}
calculateDataStatus() {
updateData() {
if (!this.liveDetailsBean) {
return
}
... ...
import { LiveDetailsBean } from 'wdBean/Index'
import { TabChatComponent } from './TabChatComponent'
import { TabInfoComponent } from './TabInfoComponent'
import { TabLiveComponent } from './TabLiveComponent'
... ... @@ -9,7 +8,7 @@ export struct TabComponent {
@State selectedFontColor: string = '#222222'
@State currentIndex: number = 0
private controller: TabsController = new TabsController()
tabs: string[] = ['简介', '直播间', '大家聊']
@Prop tabs: string[] = []
aboutToAppear(): void {
... ... @@ -19,12 +18,21 @@ export struct TabComponent {
Tabs({ barPosition: BarPosition.Start, index: this.currentIndex, controller: this.controller }) {
ForEach(this.tabs, (item: string, index: number) => {
TabContent() {
if (0 == index) {
TabInfoComponent()
} else if (1 == index) {
TabLiveComponent()
} else {
TabChatComponent()
if (this.tabs.length == 3) {
if (0 == index) {
TabInfoComponent()
} else if (1 == index) {
TabLiveComponent()
} else {
TabChatComponent()
}
}
else {
if (0 == index) {
TabLiveComponent()
} else {
TabChatComponent()
}
}
}.tabBar(this.tabBuilder(index, item))
.backgroundColor('#F5F5F5')
... ...
... ... @@ -12,7 +12,7 @@ export struct TabInfoComponent {
Column() {
this.showLiveTitle()
this.showLiveDetails()
LiveCountdownComponent()
LiveCountdownComponent({liveDetailsBean:this.liveDetailsBean})
}.margin({
top: 13,
left: 16,
... ...
... ... @@ -8,12 +8,16 @@ import { TabLiveItemComponent } from './TabLiveItemComponent'
export struct TabLiveComponent {
liveViewModel: LiveViewModel = new LiveViewModel()
@State liveList: Array<LiveRoomItemBean> = []
@Consume liveDetailsBean: LiveDetailsBean
@Consume @Watch('updateDate') liveDetailsBean: LiveDetailsBean
aboutToAppear(): void {
updateDate() {
this.getLiveList()
}
aboutToAppear(): void {
}
build() {
Stack() {
if (this.liveList.length == 0) {
... ...
... ... @@ -51,14 +51,18 @@ export struct PlayUIComponent {
.margin({
right: 10
})
Text(this.liveDetailsBean.newsTitle)
.maxLines(1)
.textOverflow({ overflow: TextOverflow.Ellipsis })
.fontSize('16fp')
.fontWeight(500)
.fontColor(Color.White)
.textAlign(TextAlign.Start)
.layoutWeight(1)
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)
... ... @@ -86,8 +90,25 @@ export struct PlayUIComponent {
getLiveStatusView() {
// 直播新闻-直播状态 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
})
}
// 直播中
if (this.liveDetailsBean.liveInfo?.liveState == 'running') {
else if (this.liveDetailsBean.liveInfo?.liveState == 'running') {
Row() {
Image($r('app.media.icon_live_status_running'))
.width(22)
... ...
... ... @@ -6,6 +6,8 @@ import { PlayUIComponent } from './PlayUIComponent';
export struct TopPlayComponent {
@Consume @Watch('updateData') liveDetailsBean: LiveDetailsBean
playerController: WDPlayerController = new WDPlayerController();
@State imgUrl: string = ''
@State isWait: boolean = false
aboutToAppear(): void {
this.playerController.onCanplay = () => {
... ... @@ -15,6 +17,10 @@ export struct TopPlayComponent {
updateData() {
//直播新闻-直播状态 wait待开播running直播中end已结束cancel已取消paused暂停
if (this.liveDetailsBean.fullColumnImgUrls && this.liveDetailsBean.fullColumnImgUrls.length > 0) {
this.imgUrl = this.liveDetailsBean.fullColumnImgUrls[0].url
}
this.isWait = this.liveDetailsBean?.liveInfo?.liveState == 'wait'
if (this.liveDetailsBean.liveInfo && this.liveDetailsBean.liveInfo.vlive.length > 0) {
let playUrl = ''
if (this.liveDetailsBean.liveInfo.liveState == 'running') {
... ... @@ -35,6 +41,10 @@ export struct TopPlayComponent {
})
.height('100%')
.width('100%')
.visibility(this.isWait ? Visibility.None : Visibility.Visible)
Image(this.imgUrl)
.objectFit(ImageFit.Contain)
.visibility(this.isWait ? Visibility.Visible : Visibility.None)
PlayUIComponent({ playerController: this.playerController })
}
.height(211)
... ... @@ -43,5 +53,7 @@ export struct TopPlayComponent {
aboutToDisappear(): void {
this.playerController.pause()
this.playerController.stop()
this.playerController.release()
}
}
\ No newline at end of file
... ...