chenjun

点击唤起进度控制条

@@ -19,6 +19,10 @@ export struct PlayerFullScreenView { @@ -19,6 +19,10 @@ export struct PlayerFullScreenView {
19 private timer: number = -1 19 private timer: number = -1
20 @State upProVal: string = '' 20 @State upProVal: string = ''
21 @State duration: string = DateTimeUtils.secondToTime(this.videoDuration) 21 @State duration: string = DateTimeUtils.secondToTime(this.videoDuration)
  22 + @State startX:number = 0
  23 + @State endX:number = 0
  24 + @State panDirection:number = 1 //1左滑 2右滑
  25 + private panDistance:number = 0
22 26
23 getTitle() { 27 getTitle() {
24 return this.contentDetailData?.newsTitle 28 return this.contentDetailData?.newsTitle
@@ -65,6 +69,7 @@ export struct PlayerFullScreenView { @@ -65,6 +69,7 @@ export struct PlayerFullScreenView {
65 69
66 this.headerBuilder() 70 this.headerBuilder()
67 this.middleSlideBuilder() 71 this.middleSlideBuilder()
  72 + // this.middleContainerBuilder()
68 this.bottomBuilder() 73 this.bottomBuilder()
69 } 74 }
70 .zIndex(99999) 75 .zIndex(99999)
@@ -116,7 +121,6 @@ export struct PlayerFullScreenView { @@ -116,7 +121,6 @@ export struct PlayerFullScreenView {
116 }) 121 })
117 } 122 }
118 123
119 -  
120 @Builder 124 @Builder
121 bottomBuilder() { 125 bottomBuilder() {
122 126
@@ -189,12 +193,88 @@ export struct PlayerFullScreenView { @@ -189,12 +193,88 @@ export struct PlayerFullScreenView {
189 } 193 }
190 194
191 @Builder 195 @Builder
  196 + middleContainerBuilder() {
  197 + Row() {
  198 +
  199 + }
  200 + .width('100%')
  201 + .height('100%')
  202 + .margin({ top: 73, bottom: 73 })
  203 + // .backgroundColor('#FF0000')
  204 + .onClick(() => {
  205 + Logger.warn(`cj2024 onClick showOperator=${this.showOperator}`)
  206 + if (!this.isDragging) {
  207 + if (this.showOperator == false) {
  208 + this.restartTimer();
  209 + } else {
  210 + this.showOperator = false
  211 + }
  212 + }
  213 +
  214 + })
  215 + .gesture(
  216 + // 以下组合手势为顺序识别,当长按手势事件未正常触发时则不会触发拖动手势事件
  217 + GestureGroup(GestureMode.Sequence,
  218 + // TapGesture()
  219 + // .onAction((event?:GestureEvent) => {
  220 + // Logger.warn(`cj2024 TapGesture showOperator=${this.showOperator}`)
  221 + // if (this.showOperator == false) {
  222 + // this.restartTimer();
  223 + // } else {
  224 + // this.showOperator = false
  225 + // }
  226 + // }),
  227 + PanGesture()
  228 + .onActionStart((event?: GestureEvent) => {
  229 + if (event) {
  230 + this.startX = event.offsetX
  231 + }
  232 + Logger.warn(`cj2024 pan start`)
  233 + })
  234 + .onActionUpdate((event?: GestureEvent) => {
  235 + if (event) {
  236 + }
  237 + Logger.warn(`cj2024 pan update`)
  238 + })
  239 + .onActionEnd((event?: GestureEvent) => {
  240 + if (event) {
  241 + this.endX = event.offsetX
  242 + }
  243 + this.panDirection = this.endX - this.startX > 0 ? 2 : 1
  244 + Logger.warn(`cj2024 pan end panDirection = ${this.panDirection} this.progressVal = ${this.progressVal} dir=${this.endX - this.startX}`)
  245 + if (Math.abs(this.endX - this.startX) < 100) {
  246 + this.panDistance = 1
  247 + } else {
  248 + this.panDistance = Math.abs(this.endX - this.startX) / 100
  249 + }
  250 + if (this.panDirection == 1) { //左滑
  251 + if (this.progressVal > 5) {
  252 + this.progressVal -= this.panDistance
  253 + } else {
  254 + this.progressVal = 0
  255 + }
  256 + } else {
  257 + if (this.progressVal <100) {
  258 + this.progressVal += this.panDistance
  259 + } else {
  260 + this.progressVal = 100
  261 + }
  262 +
  263 + }
  264 + Logger.warn(`cj2024 pan end panDistance = ${this.panDistance} this.progressVal = ${this.progressVal}`)
  265 + this.playerController?.setSeekTime(this.progressVal, SliderChangeMode.End);
  266 + })
  267 + )
  268 + )
  269 + }
  270 +
  271 + @Builder
192 middleSlideBuilder() { 272 middleSlideBuilder() {
193 Column() { 273 Column() {
194 Slider({ 274 Slider({
195 value: this.progressVal, 275 value: this.progressVal,
196 step: 0.01, 276 step: 0.01,
197 - style: SliderStyle.OutSet 277 + style: SliderStyle.NONE
198 }) 278 })
199 .trackColor(Color.Transparent)// 设置轨道为透明 279 .trackColor(Color.Transparent)// 设置轨道为透明
200 .selectedColor(Color.Transparent)// 设置已选择部分为透明 280 .selectedColor(Color.Transparent)// 设置已选择部分为透明
@@ -211,6 +291,7 @@ export struct PlayerFullScreenView { @@ -211,6 +291,7 @@ export struct PlayerFullScreenView {
211 } 291 }
212 if (mode === SliderChangeMode.End) { 292 if (mode === SliderChangeMode.End) {
213 this.isDragging = false 293 this.isDragging = false
  294 + this.playerController?.setSeekTime(this.progressVal, SliderChangeMode.End);
214 } 295 }
215 296
216 console.log('Transparent slider value:', value) 297 console.log('Transparent slider value:', value)
@@ -222,8 +303,11 @@ export struct PlayerFullScreenView { @@ -222,8 +303,11 @@ export struct PlayerFullScreenView {
222 clearInterval(this.timer) 303 clearInterval(this.timer)
223 } 304 }
224 if (event.type === TouchType.Up) { 305 if (event.type === TouchType.Up) {
  306 + if (this.showOperator == false) {
225 this.restartTimer(); 307 this.restartTimer();
226 - this.playerController?.setSeekTime(this.progressVal, SliderChangeMode.End); 308 + } else {
  309 + this.showOperator = false
  310 + }
227 } 311 }
228 } 312 }
229 }) 313 })