ref |> 文章详情页视频播放进度条调整

鸿蒙设备正文稿件详情页的视频播放器，播放按钮、进度条、时长样式显示模糊和淡化看不清，需要按安卓进行优化

Signed-off-by: xugenyuan <xugenyuan@wondertek.com.cn>

@@ -29,7 +29,9 @@ export struct WdWebLocalComponent {
   @State sliderStartTime: string = '';
   @State sliderStartTime: string = '';
   @State currentTime: number = 0;
   @State currentTime: number = 0;
   @State durationTime: number = 0;
   @State durationTime: number = 0;
+  @State progressOpacity: number = 1
   @State durationStringTime: string = '';
   @State durationStringTime: string = '';
+  private progressTimerNumber: number = 0
   @State isPause: boolean = true;
   @State isPause: boolean = true;
   controller: VideoController = new VideoController()
   controller: VideoController = new VideoController()
   @StorageProp('currentBreakpoint') @Watch("currentChanged")currentBreakpoint: string = 'sm';
   @StorageProp('currentBreakpoint') @Watch("currentChanged")currentBreakpoint: string = 'sm';
@@ -172,7 +174,7 @@ export struct WdWebLocalComponent {
       this.positionLeft = Number(data?.data?.positionLeft) || 0
       this.positionLeft = Number(data?.data?.positionLeft) || 0
       this.positionTop = Number(data?.data?.positionTop) || 0
       this.positionTop = Number(data?.data?.positionTop) || 0
       this.videoLandscape = data?.data?.videoLandscape || '1'
       this.videoLandscape = data?.data?.videoLandscape || '1'
-      this.controller.start()
+      this.startPlay()
     }
     }
   }
   }
   /**
   /**
@@ -206,6 +208,26 @@ export struct WdWebLocalComponent {
     }
     }
   }
   }
 
 
+  startPlay() {
+    this.cancelProgressTimer()
+    this.controller.start()
+    this.startProgressTimer()
+  }
+
+  startProgressTimer() {
+    this.progressTimerNumber = setTimeout(() => {
+      animateTo({duration: 1000}, () => {
+        this.progressOpacity = 0
+      })
+    }, 3000)
+  }
+  cancelProgressTimer() {
+    if (this.progressTimerNumber > 0) {
+      clearTimeout(this.progressTimerNumber)
+      this.progressTimerNumber = 0
+    }
+  }
+
   @Builder
   @Builder
   videoComp(){
   videoComp(){
     Video({
     Video({
@@ -221,6 +243,7 @@ export struct WdWebLocalComponent {
       .objectFit(ImageFit.Contain)
       .objectFit(ImageFit.Contain)
       .onFinish(()=>{
       .onFinish(()=>{
         this.isEndPlay = true
         this.isEndPlay = true
+        this.currentTime = 0
       })
       })
       .onStart(() => {
       .onStart(() => {
         this.isPause = false
         this.isPause = false
@@ -248,13 +271,23 @@ export struct WdWebLocalComponent {
           WindowModel.shared.setPreferredOrientation(window.Orientation.PORTRAIT)
           WindowModel.shared.setPreferredOrientation(window.Orientation.PORTRAIT)
         }
         }
       })
       })
+      .onClick(() => {
+        animateTo({duration: 1000}, () => {
+          if (this.progressOpacity <= 0) {
+            this.progressOpacity = 1
+          } else {
+            this.progressOpacity = 0
+          }
+        })
+      })
 
 
     if (this.isEndPlay){
     if (this.isEndPlay){
       Column(){
       Column(){
         Image($r('app.media.icon_replay')).width(40).height(40)
         Image($r('app.media.icon_replay')).width(40).height(40)
           .onClick(() => {
           .onClick(() => {
             this.isEndPlay = false
             this.isEndPlay = false
-            this.controller.start()
+            this.progressOpacity = 1
+            this.startPlay()
           })
           })
 
 
         Text('重播').fontColor(Color.White).fontSize(14)
         Text('重播').fontColor(Color.White).fontSize(14)
@@ -271,9 +304,10 @@ export struct WdWebLocalComponent {
           .height(24)
           .height(24)
           .onClick(() => {
           .onClick(() => {
             if (this.isPause) {
             if (this.isPause) {
-              this.controller.start()
+              this.startPlay()
             } else {
             } else {
               this.controller.pause()
               this.controller.pause()
+              this.cancelProgressTimer()
             }
             }
           })
           })
         Row() {
         Row() {
@@ -298,6 +332,13 @@ export struct WdWebLocalComponent {
             .blockSize({ width: 18, height: 12 })
             .blockSize({ width: 18, height: 12 })
             .onChange((value: number, mode: SliderChangeMode) => {
             .onChange((value: number, mode: SliderChangeMode) => {
               this.controller.setCurrentTime(value);
               this.controller.setCurrentTime(value);
+              if (mode == SliderChangeMode.End) {
+                if (this.isPause) {
+                  this.startPlay()
+                } else {
+                  this.startProgressTimer()
+                }
+              }
             })
             })
           Text(DateTimeUtils.getFormattedDuration(this.durationTime * 1000))
           Text(DateTimeUtils.getFormattedDuration(this.durationTime * 1000))
             .fontSize(12)
             .fontSize(12)
@@ -313,7 +354,11 @@ export struct WdWebLocalComponent {
         //     this.controller.requestFullscreen(true)
         //     this.controller.requestFullscreen(true)
         //   })
         //   })
       }
       }
-      .opacity(0.8)
+      .opacity(this.progressOpacity)
+      .linearGradient({
+        direction: GradientDirection.Top, // 渐变方向
+        colors: [[0x20000000, 0.0], [Color.Transparent, 1.0]] // [0x80000000, 0.5],
+      })
       .width("100%")
       .width("100%")
       .justifyContent(FlexAlign.SpaceAround)
       .justifyContent(FlexAlign.SpaceAround)
     }
     }