PlayerProgressView.ets
2.56 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
import { ContentDetailDTO } from 'wdBean/Index';
import { DateTimeUtils } from 'wdKit/Index';
import { PlayerConstants, WDPlayerController } from 'wdPlayer/Index';
@Component
export struct PlayerProgressView {
private playerController?: WDPlayerController;
@Consume contentDetailData: ContentDetailDTO
@Consume progressVal: number;
@Consume isOpenDetail: boolean
@Consume isDragging: boolean
@State status: number = PlayerConstants.STATUS_START;
aboutToAppear() {
if (this.playerController) {
this.playerController.onStatusChange = (status: number) => {
this.status = status
console.log('=============', this.status)
}
}
}
build() {
Column() {
Text() {
Span(DateTimeUtils.secondToTime(Math.floor(this.progressVal / 100 * this.contentDetailData.videoInfo[0].videoDuration)))
Span(' / ')
Span(DateTimeUtils.secondToTime(this.contentDetailData.videoInfo[0].videoDuration || 0))
}
.fontSize(24)
.fontColor(Color.White)
.fontWeight(600)
.margin({ bottom: 30 })
.visibility(this.isDragging ? Visibility.Visible : Visibility.None)
Slider({
value: this.progressVal,
step: 0.01,
// style: SliderStyle.OutSet
})
.blockColor(this.status === PlayerConstants.STATUS_PAUSE || this.isDragging ? $r('app.color.play_block_color') : Color.Transparent)
.trackColor(this.status === PlayerConstants.STATUS_PAUSE || this.isDragging ? $r('app.color.pause_track_color') : $r('app.color.play_track_color'))
.selectedColor(this.status === PlayerConstants.STATUS_PAUSE || this.isDragging ? $r('app.color.pause_selected_color') : $r('app.color.play_selected_color'))
.trackThickness(this.status === PlayerConstants.STATUS_PAUSE || this.isDragging ? 4 : 1)
.blockStyle({
type: this.status === PlayerConstants.STATUS_PAUSE || this.isDragging ? SliderBlockType.IMAGE : SliderBlockType.DEFAULT,
image: $r('app.media.ic_player_block')
})
.blockSize({ width: 18, height: 12 })
.width('100%')
.height(19)
.onChange((value: number, mode: SliderChangeMode) => {
this.progressVal = value
if (mode === SliderChangeMode.Moving) {
this.isDragging = true
}
if (mode === SliderChangeMode.End) {
this.isDragging = false
}
this.playerController?.setSeekTime(value, mode);
console.log('slider onChange:', value, mode)
})
}.visibility(this.isOpenDetail ? Visibility.None : Visibility.Visible)
}
}