wangliang_wd

feat:优化视频详情页转屏逻辑

... ... @@ -52,5 +52,10 @@ export enum EmitterEventId {
// 图文详情页点赞状态
LIKE_CHANGE_STATUS = 15,
// 直播,回看全屏
live_FULL_SCREEN = 16,
// 直播,回看半屏
live_half_SCREEN = 17,
}
... ...
... ... @@ -4,7 +4,7 @@ import { TabComponent } from '../widgets/details/TabComponent';
import { TopPlayComponent } from '../widgets/details/video/TopPlayComponet';
import { DisplayDirection } from 'wdConstant/Index';
import mediaquery from '@ohos.mediaquery';
import { CustomToast, Logger, WindowModel } from 'wdKit/Index';
import { CustomToast, EmitterEventId, EmitterUtils, Logger, WindowModel } from 'wdKit/Index';
import { display, router, window } from '@kit.ArkUI';
import { WDAliPlayerController } from 'wdPlayer/Index';
import { LiveOperRowListView } from 'wdComponent';
... ... @@ -51,6 +51,8 @@ export struct DetailPlayLivePage {
@Consume liveDetailPageLogic: LiveDetailPageLogic
@State topPlayHeight:number = this.getTopPlayHeight()
@StorageProp('currentBreakpoint') @Watch("currentChanged")currentBreakpoint: string = 'sm';
@State isPORTRAIT: boolean = true
@State half_SCREEN: boolean = true
async aboutToAppear(): Promise<void> {
Logger.info(TAG, `wyj-aboutToAppear`)
... ... @@ -64,6 +66,18 @@ export struct DetailPlayLivePage {
}
// WindowModel.shared.setMainWindowFullScreen(this.displayDirection == DisplayDirection.VIDEO_HORIZONTAL)
})
EmitterUtils.receiveEvent(EmitterEventId.live_FULL_SCREEN, (str?: string) => {
Logger.debug(TAG, 'receiveEvent FULL_SCREEN: ' + str)
// 跳转指定频道场景,传参底导id、频道id
this.isPORTRAIT = str == '1' ? false : true
})
EmitterUtils.receiveEvent(EmitterEventId.live_half_SCREEN, (str?: string) => {
Logger.debug(TAG, 'receiveEvent FULL_SCREEN: ' + str)
// 跳转指定频道场景,传参底导id、频道id
this.half_SCREEN = str == '1' ? false : true
})
this.getLiveDetails()
this.getLiveRoomData()
this.configChatRoom()
... ... @@ -140,9 +154,9 @@ export struct DetailPlayLivePage {
build() {
Column() {
TopPlayComponent({ playerController: this.playerController, isEnd: this.isEnd, lastLiveControl: this.lastLiveControl })
.height(this.displayDirection == DisplayDirection.VERTICAL ? this.topPlayHeight : '100%')
.height(this.isPORTRAIT ? this.topPlayHeight : '100%')
.margin({
top: this.displayDirection == DisplayDirection.VERTICAL ? px2vp(this.topSafeHeight) : 0
top: this.half_SCREEN ? px2vp(this.topSafeHeight) : 0
})
TabComponent({
... ...
import { window } from '@kit.ArkUI';
import lottie from '@ohos/lottie';
import { NumberFormatterUtils, StringUtils, WindowModel } from 'wdKit/Index';
import { EmitterEventId, EmitterUtils, NumberFormatterUtils, StringUtils, WindowModel } from 'wdKit/Index';
import { DateFormatUtil, PlayerConstants, WDAliPlayerController } from 'wdPlayer/Index';
import { ContentDetailDTO, LiveRoomDataBean } from 'wdBean/Index';
import { DisplayDirection } from 'wdConstant/Index';
... ... @@ -345,20 +345,21 @@ export struct PlayUIComponent {
.width(24)
.height(24)
.onClick(() => {
clearTimeout(this.time)
WindowModel.shared.setSpecificSystemBarEnabled(false)
// this.isMenuVisible = false
this.displayDirection =
this.displayDirection == DisplayDirection.VERTICAL ? DisplayDirection.VIDEO_HORIZONTAL :
DisplayDirection.VERTICAL
WindowModel.shared.setPreferredOrientation(this.displayDirection == DisplayDirection.VERTICAL ?
window.Orientation.PORTRAIT :
window.Orientation.LANDSCAPE).then(()=>{
this.onChangeMenuVisible()
WindowModel.shared.setSpecificSystemBarEnabled(false)
EmitterUtils.sendEvent(EmitterEventId.live_half_SCREEN, 1)
})
let timer = setTimeout(() => {
EmitterUtils.sendEvent(EmitterEventId.live_FULL_SCREEN, 1)
clearTimeout(timer)
}, 200)
})
.visibility(this.displayDirection == DisplayDirection.VERTICAL ? Visibility.Visible : Visibility.None)
}
... ... @@ -454,13 +455,17 @@ export struct PlayUIComponent {
}
quitFullScreen() {
clearTimeout(this.time)
// this.isMenuVisible = false
this.displayDirection = DisplayDirection.VERTICAL
WindowModel.shared.setPreferredOrientation(this.displayDirection == DisplayDirection.VERTICAL ?
window.Orientation.PORTRAIT :
window.Orientation.LANDSCAPE).then(()=>{
this.onChangeMenuVisible()
WindowModel.shared.setSpecificSystemBarEnabled(true)
EmitterUtils.sendEvent(EmitterEventId.live_FULL_SCREEN, 0)
})
WindowModel.shared.setSpecificSystemBarEnabled(true)
let timer = setTimeout(() => {
EmitterUtils.sendEvent(EmitterEventId.live_half_SCREEN, 0)
clearTimeout(timer)
}, 200)
}
}
\ No newline at end of file
... ...
... ... @@ -33,7 +33,7 @@ export struct DetailPlayShortVideoPage {
@State playerController: WDPlayerController = new WDPlayerController();
@Provide contentDetailData: ContentDetailDTO = {} as ContentDetailDTO
@Provide interactData: InteractDataDTO = {} as InteractDataDTO
@Provide isFullScreen: boolean = false;
@State isFullScreen: boolean = false;
@Provide progressVal: number = 0;
@Provide videoLandScape: number = 1; // 视频朝向, 横屏视频:1;竖屏视频:2
@Provide newsStatusOfUser: batchLikeAndCollectResult = {} as batchLikeAndCollectResult // 点赞、收藏状态
... ... @@ -42,7 +42,7 @@ export struct DetailPlayShortVideoPage {
@Provide isDragging: boolean = false // 拖动时间进度条
@Provide status: number = PlayerConstants.STATUS_START;
@Consume @Watch("showCommentListChanged") showCommentList: boolean
@Consume displayDirection: DisplayDirection
@Consume @Watch('displayDirectionChange') displayDirection: DisplayDirection
@Consume @Watch('videoStatusChange') switchVideoStatus: boolean
@State isPlay: boolean = true // 视频手动播放暂停
@Consume @Watch('pageShowChange') pageShow: number
... ... @@ -75,6 +75,16 @@ export struct DetailPlayShortVideoPage {
}
/**
* 页面转屏参数变化
*/
displayDirectionChange(){
let timer = setTimeout(() => {
this.isFullScreen = this.displayDirection === DisplayDirection.VERTICAL ?false:true
clearTimeout(timer)
}, this.displayDirection === DisplayDirection.VERTICAL ?200:0)
}
/**
* 页面显示重查用户关注、点赞等信息
*/
async pageShowChange() {
... ... @@ -368,7 +378,7 @@ export struct DetailPlayShortVideoPage {
})
// 显示评论且非全屏模式(视频频道无评论showComment=false)
if (this.showComment && this.displayDirection === DisplayDirection.VERTICAL) {
if (this.showComment && !this.isFullScreen) {
OperRowListView({
pageComponentType: 1,
styleType: 3,
... ... @@ -392,8 +402,12 @@ export struct DetailPlayShortVideoPage {
.id('video-container')
.height('100%')
.width('100%')
.onAreaChange(() => this.calculatePlayerRect())
.onAreaChange(() => {
let timer = setTimeout(() => {
this.calculatePlayerRect()
clearTimeout(timer)
}, this.displayDirection === DisplayDirection.VERTICAL ?200:0)
})
}
@Builder
... ... @@ -549,7 +563,6 @@ export struct DetailPlayShortVideoPage {
} else {
EmitterUtils.sendEvent(EmitterEventId.FULL_SCREEN, 1)
}
})
}
... ...
... ... @@ -254,6 +254,7 @@ export struct PlayerFullScreenView {
WindowModel.shared.setPreferredOrientation(this.displayDirection == DisplayDirection.VERTICAL ?
window.Orientation.PORTRAIT :
window.Orientation.LANDSCAPE)
EmitterUtils.sendEvent(EmitterEventId.FULL_SCREEN, 0)
})
Text(this.getTitle())
... ...