developOne / harmonyPool

Go to a project
Toggle navigation Toggle navigation pinning
wangliang_wd
7926888f 1 parent 981fdb7d

feat：优化动态详情页视频展示文图，展示屏蔽全屏功能

Inline Side-by-side
Showing 1 changed file with 102 additions and 74 deletions
import router from '@ohos.router';
import { BridgeUtil, BridgeWebViewControl, Callback } from 'wdJsBridge';
import { Logger } from 'wdKit/Index';
import { Logger, WindowModel } from 'wdKit/Index';
import { performJSCallNative } from './JsBridgeBiz';
import { H5CallNativeType } from './H5CallNativeType';
import { Message } from 'wdJsBridge/src/main/ets/bean/Message';
import { DateTimeUtils } from 'wdKit'
import { window } from '@kit.ArkUI';
const TAG = 'WdWebLocalComponent';
... ... @@ -33,7 +34,14 @@ export struct WdWebLocalComponent {
controller: VideoController = new VideoController()
@StorageProp('currentBreakpoint') @Watch("currentChanged")currentBreakpoint: string = 'sm';
@State isFullScreen: boolean = false;
currentChanged(){
///折叠屏转换 暂停播放器
this.controller.pause()
this.positionWidth = 0
this.positionHeight = 0
this.webviewControl.refresh()
}
... ... @@ -103,82 +111,11 @@ export struct WdWebLocalComponent {
if (this.videoUrl) {
Stack({ alignContent: Alignment.Bottom }) {
Video({
src: this.videoUrl,
currentProgressRate: this.curRate,
controller: this.controller
})
.borderRadius(5)
.controls(false)
.autoPlay(true)
.objectFit(ImageFit.Contain)
.onStart(() => {
this.isPause = false
})
.onPause(() => {
this.isPause = true
})
.onPrepared((event) => {
if (event) {
this.durationTime = event.duration
}
})
.onUpdate((event) => {
if (event) {
this.currentTime = event.time
}
})
Row() {
Image(this.isPause ? $r('app.media.icon_play') : $r('app.media.icon_pause'))
.width(24)
.height(24)
.onClick(() => {
if (this.isPause) {
this.controller.start()
} else {
this.controller.pause()
}
})
Row() {
Text(DateTimeUtils.getFormattedDuration(this.currentTime * 1000))
.fontSize(12)
.fontColor(Color.White)
.fontWeight(600)
Slider({
value: this.currentTime,
min: 0,
max: this.durationTime
})
.width("50%")
.selectedColor('#ED2800')
.margin({ left: 4, right: 4 })// .blockStyle({
// type: SliderBlockType.IMAGE,
// image: $r('app.media.slider_block')
// })
// .blockSize({ width: 18, height: 12 })
.onChange((value: number, mode: SliderChangeMode) => {
this.controller.setCurrentTime(value);
})
Text(DateTimeUtils.getFormattedDuration(this.durationTime * 1000))
.fontSize(12)
.fontColor(Color.White)
.fontWeight(600)
}
.justifyContent(FlexAlign.Center)
Image($r('app.media.icon_full_screen'))
.width(24)
.height(24)
.onClick(() => {
this.controller.requestFullscreen(true)
})
}
.opacity(0.8)
.width("100%")
.justifyContent(FlexAlign.SpaceAround)
this.videoComp()
}
.width(this.positionWidth)
.height(this.positionHeight)
.backgroundColor(Color.Red)
.alignRules({
top: { anchor: "__container__", align: VerticalAlign.Top },
})
... ... @@ -230,6 +167,7 @@ export struct WdWebLocalComponent {
this.positionLeft = Number(data?.data?.positionLeft) || 0
this.positionTop = Number(data?.data?.positionTop) || 0
this.videoLandscape = data?.data?.videoLandscape || '1'
this.controller.start()
}
}
/**
... ... @@ -262,5 +200,95 @@ export struct WdWebLocalComponent {
this.webviewControl.refresh()
}
}
@Builder
videoComp(){
Video({
src: this.videoUrl,
currentProgressRate: this.curRate,
controller: this.controller
})
.width(this.positionWidth)
.height(this.positionHeight)
.borderRadius(5)
.controls(this.isFullScreen?true:false)
.autoPlay(true)
.objectFit(ImageFit.Contain)
.onStart(() => {
this.isPause = false
})
.onPause(() => {
this.isPause = true
})
.onPrepared((event) => {
if (event) {
this.durationTime = event.duration
}
})
.onUpdate((event) => {
if (event) {
this.currentTime = event.time
}
})
.onFullscreenChange((fullscreen)=>{
this.isFullScreen = fullscreen.fullscreen
if (this.isFullScreen) {
WindowModel.shared.setPreferredOrientation(this.videoLandscape == '2' ?
window.Orientation.PORTRAIT :
window.Orientation.LANDSCAPE)
}else {
WindowModel.shared.setPreferredOrientation(window.Orientation.PORTRAIT)
}
})
Row() {
Image(this.isPause ? $r('app.media.icon_play') : $r('app.media.icon_pause'))
.width(24)
.height(24)
.onClick(() => {
if (this.isPause) {
this.controller.start()
} else {
this.controller.pause()
}
})
Row() {
Text(DateTimeUtils.getFormattedDuration(this.currentTime * 1000))
.fontSize(12)
.fontColor(Color.White)
.fontWeight(600)
Slider({
value: this.currentTime,
min: 0,
max: this.durationTime
})
.width("50%")
.selectedColor('#ED2800')
.margin({ left: 4, right: 4 })// .blockStyle({
// type: SliderBlockType.IMAGE,
// image: $r('app.media.slider_block')
// })
// .blockSize({ width: 18, height: 12 })
.onChange((value: number, mode: SliderChangeMode) => {
this.controller.setCurrentTime(value);
})
Text(DateTimeUtils.getFormattedDuration(this.durationTime * 1000))
.fontSize(12)
.fontColor(Color.White)
.fontWeight(600)
}
.justifyContent(FlexAlign.Center)
// Image($r('app.media.icon_full_screen'))
// .width(24)
// .height(24)
// .onClick(() => {
// this.controller.requestFullscreen(true)
// })
}
.opacity(0.8)
.width("100%")
.justifyContent(FlexAlign.SpaceAround)
}
}
... ...