developOne / harmonyPool

Go to a project
Toggle navigation Toggle navigation pinning
陈剑华
3fd72a94 2 parents fbada58b c83bb4a9

Merge remote-tracking branch 'origin/main'

Inline Side-by-side
Showing 8 changed files with 217 additions and 73 deletions
... ... @@ -114,8 +114,6 @@ export struct MultiPictureDetailItemComponent {
calcImageDefaultSize(imageWHRatio: number, size: window.Size): image.Size {
let width = 0
let height = 0;
// width = size.width;
// height = size.width / imageWHRatio;
if (imageWHRatio > size.width / size.height) {
// 图片宽高比大于屏幕宽高比，图片默认以屏幕宽度进行显示
width = size.width;
... ...
... ... @@ -20,8 +20,15 @@ export struct CommentListDialogView {
onClose?: () => void
onHeightDidChange?: Callback<number>
@StorageProp('currentBreakpoint') currentBreakpoint: string = 'sm';
@State isPad:boolean = this.currentBreakpoint == "md" || this.currentBreakpoint == "lg"?true:false
aboutToAppear(): void {
this.maxHeight = this.windowHeight - this.windowWidth * 9 / 16
if (this.isPad) {
this.maxHeight = this.windowHeight * 0.6
}else {
this.maxHeight = this.windowHeight - this.windowWidth * 9 / 16
}
}
build() {
... ...
... ... @@ -24,9 +24,12 @@ export struct PlayerFullScreenView {
@State endX: number = 0
@State panDirection: number = 1 //1左滑 2右滑
private panDistance: number = 0
private touchDownX: number = 0
private touchUpX: number = 0
@State isTouched: boolean = false
// 用于触发拖动手势事件，滑动的最小距离为5vp时拖动手势识别成功。
private panOptionBright: PanGestureOptions = new PanGestureOptions({ direction: PanDirection.Vertical });
private panOptionVolume: PanGestureOptions = new PanGestureOptions({ direction: PanDirection.Vertical });
@Provide isShowVolume: boolean = false;
@Provide isShowBright: boolean = false;
@Provide volumeProgress: number = 1;
getTitle() {
return this.contentDetailData?.newsTitle
... ... @@ -54,6 +57,15 @@ export struct PlayerFullScreenView {
}, 5000)
// 初始显示
this.updateProgress()
if (this.playerController) {
this.playerController.onVolumeUpdate = (volume) => {
this.volumeProgress = volume;
}
this.playerController.onBrightUpdate = (volume) => {
this.volumeProgress = volume;
}
}
}
aboutToDisappear(): void {
... ... @@ -63,24 +75,36 @@ export struct PlayerFullScreenView {
restartTimer() {
clearInterval(this.timer)
this.showOperator = true
this.timer = setInterval(() => {
this.showOperator = false
}, 5000)
}
build() {
Stack() {
Stack({ alignContent: Alignment.Center }) {
Row() {
}.height('100%').width('100%')
.onClick(() => {
this.restartTimer()
})
this.headerBuilder()
this.middleSlideBuilder()
// this.middleContainerBuilder()
this.bottomBuilder()
Column() {
this.leftMiddleRightSlideBuilder()
this.headerBuilder()
this.bottomBuilder()
}
.height('100%')
.width('100%')
.zIndex(1)
.gesture(TapGesture({ count: 1 })
.onAction((event: GestureEvent) => {
this.showOperator = !this.showOperator
this.restartTimer()
}))
.gesture(TapGesture({ count: 2 })
.onAction((event: GestureEvent) => {
// TODO 双击点赞|收藏
}))
}
.height('100%')
.width('100%')
this.volumeProgressBuilder()
this.brightProgressBuilder()
}
.zIndex(99999)
.height('100%')
... ... @@ -89,6 +113,128 @@ export struct PlayerFullScreenView {
}
@Builder
leftMiddleRightSlideBuilder() {
Row() {
Column()
.width('20%')
.height('100%')
.gesture(
PanGesture(this.panOptionBright)
.onActionStart((event?: GestureEvent) => {
console.log(TAG, 'onActionEnd this.panOptionBright')
this.isShowBright = true
this.playerController?.onBrightActionStart(event!);
})
.onActionUpdate((event?: GestureEvent) => {
this.playerController?.onBrightActionUpdate(event!);
})
.onActionEnd(() => {
setTimeout(() => {
this.isShowBright = false
}, 500)
this.playerController?.onActionEnd();
})
)
Column() {
this.middleSlideBuilder()
}
.width('60%')
.height('100%')
Column()
.width('20%')
.height('100%')
.gesture(
PanGesture(this.panOptionVolume)
.onActionStart((event?: GestureEvent) => {
// console.log(TAG, 'onActionEnd this.panOptionVolume')
this.isShowVolume = true
this.playerController?.onVolumeActionStart(event!);
})
.onActionUpdate((event?: GestureEvent) => {
this.playerController?.onVolumeActionUpdate(event!);
})
.onActionEnd(() => {
setTimeout(() => {
this.isShowVolume = false
}, 500)
this.playerController?.onActionEnd();
})
)
}
.width('100%')
}
@Builder
volumeProgressBuilder() {
Row() {
Image(this.volumeProgress == 0 ? $r('app.media.ic_volume_mute') : $r('app.media.ic_volume'))
.width(20)
.height(20)
.margin({
right: 8
})
Slider({
value: this.volumeProgress * 100,
step: 0.01,
style: SliderStyle.NONE
})
.width(132)
.height(2)
.zIndex(2)
.trackColor($r('app.color.pause_track_color'))
.selectedColor($r('app.color.pause_selected_color'))
.sliderInteractionMode(SliderInteraction.SLIDE_ONLY)
}
.width(204)
.height(32)
.borderRadius(16)
.padding({
top: 4,
bottom: 4,
left: 16,
right: 24
})
.backgroundColor('rgba(0, 0, 0, 0.4)')
.justifyContent(FlexAlign.Center)
.visibility(this.isShowVolume ? Visibility.Visible : Visibility.None)
}
@Builder
brightProgressBuilder() {
Row() {
Image($r('app.media.ic_bright'))
.width(20)
.height(20)
.margin({
right: 8
})
Slider({
value: this.volumeProgress * 100,
step: 0.01,
style: SliderStyle.NONE
})
.width(132)
.height(2)
.zIndex(2)
.trackColor($r('app.color.pause_track_color'))
.selectedColor($r('app.color.pause_selected_color'))
.sliderInteractionMode(SliderInteraction.SLIDE_ONLY)
}
.width(204)
.height(32)
.borderRadius(16)
.padding({
top: 4,
bottom: 4,
left: 16,
right: 24
})
.backgroundColor('rgba(0, 0, 0, 0.4)')
.justifyContent(FlexAlign.Center)
.visibility(this.isShowBright ? Visibility.Visible : Visibility.None)
}
@Builder
headerBuilder() {
Row() {
Row() {
... ... @@ -159,12 +305,14 @@ export struct PlayerFullScreenView {
.onClick(() => {
// console.log(TAG, `ic_play_2 onClick`, this.status )
this.playerController?.switchPlayOrPause()
this.status = PlayerConstants.STATUS_START
})
Image($r(`app.media.ic_pause_2`)).height(24).width(24)
.visibility(this.status === PlayerConstants.STATUS_PAUSE ? Visibility.None : Visibility.Visible)
.onClick(() => {
// console.log(TAG, `ic_pause_2 onClick`, this.status )
this.playerController?.switchPlayOrPause()
this.status = PlayerConstants.STATUS_PAUSE
})
Text(this.upProVal)
... ... @@ -308,49 +456,18 @@ export struct PlayerFullScreenView {
.width('100%')
.height('100%')
.onChange((value: number, mode: SliderChangeMode) => {
// if (this.isTouched) {
// return
// }
this.progressVal = value
// console.log('cj2024 onChange slider value:', value)
this.showOperator = true
// console.log(TAG, 'onChange slider value:', value)
if (mode === SliderChangeMode.Moving) {
this.isDragging = true
}
if (mode === SliderChangeMode.End) {
this.restartTimer()
this.isDragging = false
this.playerController?.setSeekTime(this.progressVal, SliderChangeMode.End);
}
})
}.margin({ top: 73, bottom: 73 })
.onTouch((event?: TouchEvent) => {
// console.log(`cj2024 onTouch isDragging = ${this.isDragging}`)
if (this.isDragging) {
return
}
if (event) {
if (event.type === TouchType.Down) {
// console.info(`cj2024 onTouch Down x=${event?.touches[0].x}`)
if (event?.touches.length > 0) {
this.touchDownX = event?.touches[0].x
}
clearInterval(this.timer)
}
if (event.type === TouchType.Up) {
// console.info(`cj2024 onTouch Up x=${event?.touches[0].x}`)
if (event?.touches.length > 0) {
this.touchUpX = event?.touches[0].x
this.isTouched = this.touchUpX == this.touchDownX ? true : false
}
if (this.showOperator == false) {
this.restartTimer();
} else {
// if (this.isTouched) {
this.showOperator = false
// }
// this.restartTimer();
}
}
}
})
}
}
\ No newline at end of file
... ...
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="24" height="24" viewBox="0 0 24 24"><defs><clipPath id="master_svg0_13863_054207"><rect x="0" y="0" width="24" height="24" rx="0"/></clipPath></defs><g clip-path="url(#master_svg0_13863_054207)"><g><g><g><rect x="11.25" y="1.50048828125" width="1.5" height="2.5" rx="0.20000000298023224" fill="#FFFFFF" fill-opacity="1"/></g></g><g transform="matrix(0.7071067690849304,0.7071067690849304,-0.7071067690849304,0.7071067690849304,8.571029755170457,-12.24893618770875)"><g><rect x="18.8223876953125" y="4.2216796875" width="1.5" height="2.5" rx="0.20000000298023224" fill="#FFFFFF" fill-opacity="1"/></g></g><g transform="matrix(0,1,-1,0,33.9990234375,-11)"><g><rect x="22.24951171875" y="11.49951171875" width="1.5" height="2.5" rx="0.20000000298023224" fill="#FFFFFF" fill-opacity="1"/></g></g><g transform="matrix(-0.7071067690849304,0.7071067690849304,-0.7071067690849304,-0.7071067690849304,47.24796326266369,18.57085419842042)"><g><rect x="19.52880859375" y="19.0697021484375" width="1.5" height="2.5" rx="0.20000000298023224" fill="#FFFFFF" fill-opacity="1"/></g></g><g transform="matrix(-1,0,0,-1,25,44.9990234375)"><g><rect x="12.25" y="22.49951171875" width="1.5" height="2.5" rx="0.20000000298023224" fill="#FFFFFF" fill-opacity="1"/></g></g><g transform="matrix(-0.7071068286895752,-0.7071067094802856,0.7071067094802856,-0.7071068286895752,-5.569534533715341,37.24868722411338)"><g><rect x="4.6787109375" y="19.77685546875" width="1.5" height="2.5" rx="0.20000000298023224" fill="#FFFFFF" fill-opacity="1"/></g></g><g transform="matrix(0,-1,1,0,-10.99951171875,13.99951171875)"><g><rect x="1.25" y="12.49951171875" width="1.5" height="2.5" rx="0.20000000298023224" fill="#FFFFFF" fill-opacity="1"/></g></g><g transform="matrix(0.7071066498756409,-0.70710688829422,0.70710688829422,0.7071066498756409,-2.2488258001976646,4.429253726848401)"><g><rect x="3.97216796875" y="4.9302978515625" width="1.5" height="2.5" rx="0.20000000298023224" fill="#FFFFFF" fill-opacity="1"/></g></g></g><g><ellipse cx="12" cy="12" rx="5.5" ry="5.5" fill="#FFFFFF" fill-opacity="1"/></g></g></svg>
\ No newline at end of file
... ...
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="24" height="24" viewBox="0 0 24 24"><defs><clipPath id="master_svg0_13863_054208"><rect x="0" y="0" width="24" height="24" rx="0"/></clipPath></defs><g clip-path="url(#master_svg0_13863_054208)"><g><g><path d="M14.7395,2.3000410000000002Q9.105879999999999,6.9891,8.55184,7.45024C8.51231,7.48314,8.46376,7.50053,8.41233,7.50053Q7.84572,7.50044,3.219141,7.49976C3.0976259,7.49974,3,7.59824,3,7.71976L3,16.079700000000003C3,16.2012,3.0976429,16.2997,3.219141,16.2997Q8.49141,16.3,8.49141,16.3C8.49141,16.3,8.49248,16.3,8.49248,16.3Q8.49248,16.3,14.7396,21.5C14.8829,21.6193,15.1,21.5171,15.1,21.3306L15.1,2.469347C15.1,2.282884,14.8828,2.180755,14.7395,2.3000410000000002M19.2049,16.805500000000002C18.9178,16.5183,18.2758,15.8763,17.9631,15.5636C17.8692,15.4697,17.8781,15.3147,17.9786,15.2279C18.4241,14.8432,18.7884,14.3723,19.0489,13.8426C19.3462,13.2381,19.5007,12.5734,19.5,11.89975C19.5,10.42702,18.7768,9.12304,17.6645,8.32452C17.549599999999998,8.24204,17.5302,8.07039,17.630200000000002,7.97038C17.9568,7.64378,18.5997,7.00082,18.8795,6.72104C18.956400000000002,6.64417,19.0775,6.63112,19.1632,6.69798C19.9287,7.29505,20.5533,8.054369999999999,20.9918,8.92218C21.4582,9.845369999999999,21.7009,10.8654,21.7,11.89975C21.7,13.8537,20.8509,15.6093,19.5009,16.8181C19.4158,16.8943,19.2857,16.886200000000002,19.2049,16.805500000000002" fill="#FFFFFF" fill-opacity="1"/></g></g></g></svg>
\ No newline at end of file
... ...
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="24" height="24" viewBox="0 0 24 24"><defs><clipPath id="master_svg0_21334_091013"><rect x="0" y="0" width="24" height="24" rx="0"/></clipPath></defs><g clip-path="url(#master_svg0_21334_091013)"><g><g><path d="M10.55184,7.450458405447006L16.7395,2.300264605447006C16.8828,2.1809784054470063,17.1,2.2831074054470064,17.1,2.4695704054470062L17.1,14.575658405447006L9.68048,7.500638405447006L10.41233,7.500748405447006C10.46376,7.500758405447006,10.51231,7.483368405447006,10.55184,7.450458405447006ZM6.78191,7.500208405447006L5.219141,7.499978405447006C5.0976259,7.499968405447007,5,7.598468405447006,5,7.719978405447006L5,16.07995840544701C5,16.201458405447006,5.0976429,16.299958405447008,5.219141,16.299958405447008L10.49141,16.300258405447007L10.49248,16.300258405447007L16.7396,21.500258405447006C16.8829,21.619458405447006,17.1,21.517358405447006,17.1,21.330858405447007L17.1,17.33915840544701L6.78191,7.500208405447006Z" fill-rule="evenodd" fill="#FFFFFF" fill-opacity="1"/></g></g><g transform="matrix(0.7237114310264587,0.6901028156280518,-0.6901028156280518,0.723711371421814,3.2684092820854858,-1.7144847984891385)"><line x1="3.775390625" y1="2.724609375" x2="29.231157302856445" y2="2.724609375" fill-opacity="0" stroke-opacity="1" stroke="#FFFFFF" fill="none" stroke-width="1"/></g></g></svg>
\ No newline at end of file
... ...
... ... @@ -4,7 +4,7 @@ import { PlayerConstants, AVPlayerStatus, Events } from '../constants/PlayerCons
import { BusinessError } from '@ohos.base';
import { TrackingPlay } from 'wdTracking/Index';
import { ParamType } from 'wdTracking/Index';
import { DateTimeUtils, Logger } from 'wdKit/Index';
import { DateTimeUtils, Logger, WindowModel } from 'wdKit/Index';
import { BackgroundAudioController } from './BackgroundAudioController';
import { audio } from '@kit.AudioKit';
... ... @@ -37,6 +37,7 @@ export class WDPlayerController {
public onLoaded?: (loaded: number) => void;
public onTimeUpdate?: (position: number, duration: number) => void;
public onVolumeUpdate?: (volume: number) => void;
public onBrightUpdate?: (volume: number) => void;
public continue?: () => void;
public onCanplay?: () => void;
public onStatusChange?: (status: number) => void;
... ... @@ -45,6 +46,7 @@ export class WDPlayerController {
public videoWidth: number = 0
public videoHeight: number = 0
public keepOnBackground = false
private windowHeight: number = px2vp(AppStorage.get<number>('windowHeight') || 0)
... ... @@ -422,10 +424,6 @@ export class WDPlayerController {
}
}
setBright() {
// globalThis.windowClass.setWindowBrightness(this.playerThis.bright)
}
getStatus() {
return this.status;
}
... ... @@ -465,14 +463,14 @@ export class WDPlayerController {
}
onVolumeActionStart(event: GestureEvent) {
this.positionY = event.offsetY;
}
onBrightActionStart(event: GestureEvent) {
if (!event) {
return;
}
this.positionY = event.offsetY;
}
volume: number = 1
bright: number = 1
onVolumeActionUpdate(event: GestureEvent) {
if (!this.avPlayer) {
... ... @@ -481,7 +479,7 @@ export class WDPlayerController {
if (PlayerConstants.OPERATE_STATE.indexOf(this.avPlayer.state) === -1) {
return;
}
let changeVolume = (event.offsetY - this.positionY) / 300;
let changeVolume = (event.offsetY - this.positionY) / this.windowHeight;
let currentVolume = this.volume - changeVolume;
if (currentVolume > 1) {
currentVolume = 1;
... ... @@ -490,26 +488,47 @@ export class WDPlayerController {
currentVolume = 0;
}
this.volume = currentVolume;
// Logger.debug(TAG, "changeVolume : " + changeVolume)
// Logger.debug(TAG, "windowHeight : " + this.windowHeight)
// Logger.debug(TAG, "volume : " + this.volume)
this.avPlayer?.setVolume(this.volume);
this.positionY = event.offsetY;
if (this.onVolumeUpdate) {
this.onVolumeUpdate(this.volume);
}
Logger.debug(TAG, "volume : " + this.volume)
}
onBrightActionStart(event: GestureEvent) {
if (!event) {
return;
}
this.positionY = event.offsetY;
}
setBright() {
const windowClass = WindowModel.shared.getWindowClass();
windowClass.setWindowBrightness(this.bright)
}
onBrightActionUpdate(event: GestureEvent) {
// if (!this.playerThis.volumeShow) {
// this.playerThis.brightShow = true;
// let changeBright = (this.positionY - event.offsetY) / globalThis.screenHeight;
// let currentBright = this.playerThis.bright + changeBright;
// let brightMinFlag = currentBright <= 0;
// let brightMaxFlag = currentBright > 1;
// this.playerThis.bright = brightMinFlag ? 0 :
// (brightMaxFlag ? 1 : currentBright);
// this.setBright();
// this.positionY = event.offsetY;
// }
let changeBright = (event.offsetY - this.positionY) / this.windowHeight;
let currentBright = this.bright - changeBright;
if (currentBright > 1) {
currentBright = 1;
}
if (currentBright <= 0.1) {
currentBright = 0.1;
}
this.bright = currentBright;
// Logger.debug(TAG, "changeBright : " + changeBright)
// Logger.debug(TAG, "windowHeight : " + this.windowHeight)
// Logger.debug(TAG, "bright : " + this.bright)
this.setBright()
this.positionY = event.offsetY;
if (this.onBrightUpdate) {
this.onBrightUpdate(this.bright);
}
}
onActionEnd() {
... ...