liyubing

feat:直播间背景图 高斯模糊

import { ContentDetailDTO, LiveDetailsBean } from 'wdBean/Index';
import { ContentDetailDTO } from 'wdBean/Index';
import { Logger, StringUtils } from 'wdKit/Index';
import { PlayerConstants, WDAliPlayerController, WDPlayerRenderLiveView } from 'wdPlayer/Index';
import { PlayUIComponent } from './PlayUIComponent';
import { PictureLoading } from '../../vertical/PictureLoading';
import { ParamType, TrackConstants } from 'wdTracking/Index';
import { TrackConstants } from 'wdTracking/Index';
const TAG: string = 'TopPlayComponent'
... ... @@ -25,7 +25,7 @@ export struct TopPlayComponent {
//播放错误
@State isError: boolean = false
// loading 控制字段
@State isLoading: boolean = false
@State isHideLoading: boolean = false
// 获取播放资源能播放了
@State isCanPlay: boolean = false
// 当前播放资源的状态
... ... @@ -38,7 +38,7 @@ export struct TopPlayComponent {
this.playerController.onCanplay = () => {
this.isCanPlay = true
this.isLoading = true
this.isHideLoading = true
this.playerController?.play()
}
... ... @@ -48,7 +48,7 @@ export struct TopPlayComponent {
Logger.debug(TAG, 'status==>' + status)
if (status === PlayerConstants.STATUS_ERROR) {
this.isError = true
this.isLoading = true
this.isHideLoading = true
this.isCanPlay = false
} else if (status === PlayerConstants.STATUS_COMPLETION) {
// 播放完成
... ... @@ -68,6 +68,7 @@ export struct TopPlayComponent {
updateData() {
// 检测等待中的直播预告是否视频资源
if (this.contentDetailData.liveInfo && this.contentDetailData.liveInfo.previewType === 1
&& this.contentDetailData?.liveInfo?.liveState == 'wait'
&& this.contentDetailData.liveInfo.previewUrl &&
this.contentDetailData.liveInfo.previewUrl.length > 0) {
// 预告资源是视频
... ... @@ -87,18 +88,17 @@ export struct TopPlayComponent {
if (this.isVideoSource) {
this.isWait = false
this.isLoading = false
this.isHideLoading = false
} else {
this.isWait = this.contentDetailData?.liveInfo?.liveState == 'wait'
if (this.isWait) {
this.isLoading = true
this.isHideLoading = true
}
}
this.isEnd = this.contentDetailData?.liveInfo?.liveState === 'end' &&
StringUtils.isEmpty(this.contentDetailData?.liveInfo?.vlive[0]?.replayUri)
// Logger.debug(TAG, `---0------>` + this.isWait + ' ->' + this.isLoading + ' ->' + this.isEnd)
if (!this.isWait) {
if (this.contentDetailData.liveInfo && this.contentDetailData.liveInfo.vlive.length > 0) {
let playUrl = ''
... ... @@ -114,31 +114,38 @@ export struct TopPlayComponent {
} else {
Logger.debug(TAG, `---0------>${playUrl}`)
if (StringUtils.isNotEmpty(playUrl)) {
Logger.debug(TAG, `---isNotEmpty------>`)
this.playUrl = playUrl
this.tryToPlay()
}
}
} else {
this.isWait = true
this.isLoading = true
this.isHideLoading = true
}
}
// 直播结束
if (this.contentDetailData?.liveInfo?.liveState === 'end') {
this.isHideLoading = true
this.isWait = StringUtils.isNotEmpty(this.playUrl)
}
// 文字直播 running 状态
if (this.contentDetailData?.liveInfo?.liveWay === 1 && this.contentDetailData?.liveInfo?.liveState === 'running') {
this.isWait = true
this.isLoading = true
this.isHideLoading = true
if (this.contentDetailData.fullColumnImgUrls && this.contentDetailData.fullColumnImgUrls.length > 0) {
this.previewUrl = this.contentDetailData.fullColumnImgUrls[0].url
} else {
this.previewUrl = ''
}
}
//Logger.debug(TAG, `---0------>` + this.isWait + ' ->' + this.isHideLoading + ' ->' + this.isEnd+' -->'+this.isVideoSource)
}
tryToPlay() {
Logger.debug(TAG, `---1------>`)
if (!this.xComponentIsLoaded) {
Logger.debug(TAG, "需要xComponent加载完成")
return
... ... @@ -161,12 +168,14 @@ export struct TopPlayComponent {
WDPlayerRenderLiveView({
playerController: this.playerController,
onLoad: async () => {
this.isLoading = false
if (StringUtils.isNotEmpty(this.playUrl)) {
this.isHideLoading = false
this.isError = false
this.xComponentIsLoaded = true
Logger.debug(TAG, `---onLoad------>`)
this.tryToPlay()
}
}
})
.height('100%')
.width('100%')
... ... @@ -180,12 +189,13 @@ export struct TopPlayComponent {
.objectFit(ImageFit.Cover)
.alt($r('app.media.live_room_image_fail'))
.visibility(this.isWait || this.isEnd ? Visibility.Visible : Visibility.None)
.contrast(this.isEnd ? 0.2 : 1)
// .contrast(this.isEnd ? 0.4 : 1)
.blur(this.isEnd ? 20 : 0)
.width('100%')
}
// loading
PictureLoading().visibility(this.isLoading ? Visibility.None : Visibility.Visible)
PictureLoading().visibility(this.isHideLoading ? Visibility.None : Visibility.Visible)
// 视频播放器上的控制面板和信息
PlayUIComponent({ playerController: this.playerController, isShowBottom: this.isCanPlay, liveUrl: this.playUrl })
... ... @@ -221,7 +231,7 @@ export struct TopPlayComponent {
.margin({ top: 16 })
.padding(0)
.onClick(() => {
this.isLoading = false
this.isHideLoading = false
this.isError = false
this.xComponentIsLoaded = true
this.tryToPlay()
... ...