增加视频拖动进度条展示

@@ -30,7 +30,8 @@ export struct DetailPlayShortVideoPage {
   @Provide videoLandScape?: number = 1; // 视频朝向， 横屏视频：1;竖屏视频：2
   @Provide videoLandScape?: number = 1; // 视频朝向， 横屏视频：1;竖屏视频：2
   @Provide newsStatusOfUser: batchLikeAndCollectResult | undefined = undefined // 点赞、收藏状态
   @Provide newsStatusOfUser: batchLikeAndCollectResult | undefined = undefined // 点赞、收藏状态
   @Provide followStatus: string = '0' // 关注状态
   @Provide followStatus: string = '0' // 关注状态
-  @Provide isOpenDetail: boolean = false
+  @Provide isOpenDetail: boolean = false // 查看详情按钮点击
+  @Provide isDragging: boolean = false // 拖动时间进度条
   @Consume @Watch('pageShowChange') pageShow: number
   @Consume @Watch('pageShowChange') pageShow: number
   @Consume @Watch('pageHideChange') pageHide: number
   @Consume @Watch('pageHideChange') pageHide: number
 
 
@@ -138,9 +139,13 @@ export struct DetailPlayShortVideoPage {
   build() {
   build() {
     Stack({ alignContent: Alignment.Top }) {
     Stack({ alignContent: Alignment.Top }) {
       this.playerViewBuilder()
       this.playerViewBuilder()
-      PlayerBottomView()
-      PlayerRightView()
-       
+      PlayerBottomView({
+        playerController: this.playerController
+      })
+      PlayerRightView({
+        playerController: this.playerController
+      })
+
     }
     }
     .height('100%')
     .height('100%')
     .width('100%')
     .width('100%')

+export class PlayerConstants {
+  static readonly STATUS_IDLE: number = 0;
+  static readonly STATUS_START: number = 1;
+  static readonly STATUS_PAUSE: number = 2;
+  static readonly STATUS_STOP: number = 3;
+}
+
+
 @Preview
 @Preview
 @Component
 @Component
 export struct Test {
 export struct Test {
-  build() {
-    Stack({ alignContent: Alignment.Top }) {
+  @State progressVal: number = 10;
+  @State status: number = PlayerConstants.STATUS_PAUSE;
 
 
-      Text('视频').width('100%').height('50%').backgroundColor('#000').fontColor(Color.White)
+  padding1(num: string) {
+    let length = 2;
+    for (let len = (num.toString()).length; len < length; len = num.length) {
+      num = `${'0'}${num}`;
+    }
+    return num;
+  }
 
 
-      Row() {
-        Text('title')
-        Text('contentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontent')
+  secondToTime(seconds: number) {
+    let time = '00:00'
+    let hourUnit = 60 * 60;
+    let hour = Math.floor(seconds / hourUnit);
+    let minute = Math.floor((seconds - hour * hourUnit) / 60);
+    let second = seconds - hour * hourUnit - minute * 60;
+    if (hour > 0) {
+      return `${this.padding1(hour.toString())}${':'}${this.padding1(minute.toString())}${':'}${this.padding1(second.toString())}`;
+    }
+    if (minute > 0) {
+      return `${this.padding1(minute.toString())}${':'}${this.padding1(second.toString())}`;
+    } else {
+      return `${'00'}${':'}${this.padding1(second.toString())}`;
+    }
+  }
+
+  build() {
+    Column() {
+
+      Text() {
+        Span(this.secondToTime(6))
+        Span(' / ')
+        Span('00:06')
       }
       }
-      .backgroundColor('#ff0000')
-      .align(Alignment.BottomStart)
-      .position({ y: '100%' })
-      .markAnchor({ y: '100%' })
+      .fontSize(24)
+      .fontColor(Color.White)
+      .fontWeight(600)
+      .margin({ bottom: 30 })
+
+      // .visibility(Visibility.None)
+
+      Slider({
+        value: this.progressVal,
+        step: 0.01,
+        // style: SliderStyle.OutSet
+      })
+        .blockColor(this.status === PlayerConstants.STATUS_START ? Color.Transparent : $r('app.color.play_block_color'))
+        .trackColor(this.status === PlayerConstants.STATUS_START ? $r('app.color.play_track_color') : $r('app.color.pause_track_color'))
+        .selectedColor(this.status === PlayerConstants.STATUS_START ? $r('app.color.play_selected_color') : $r('app.color.pause_selected_color'))
+        .trackThickness(this.status === PlayerConstants.STATUS_START ? 1 : 4)
+        .blockStyle({
+          type: this.status === PlayerConstants.STATUS_START ? SliderBlockType.DEFAULT : SliderBlockType.IMAGE,
+          image: $r('app.media.ic_player_block')
+        })
+        .blockSize({ width: 18, height: 12 })
+        .width('100%')// .height(19)
+        .onChange((value: number, mode: SliderChangeMode) => {
+          // this.playerController?.setSeekTime(Math.floor(value), mode);
+        })
 
 
     }
     }
-    .width(300)
-    .height(600)
-    .backgroundColor('#cccccc')
+    .backgroundColor(Color.Blue)
+    .height('100%')
   }
   }
 }
 }

@@ -26,7 +26,7 @@ const TAG = 'VideoChannelDetail'
 let timer: number = -1
 let timer: number = -1
 
 
 const storage = LocalStorage.getShared();
 const storage = LocalStorage.getShared();
- 
+
 @Entry(storage)
 @Entry(storage)
 @Component
 @Component
 export struct VideoChannelDetail {
 export struct VideoChannelDetail {

@@ -2,20 +2,21 @@ import { WDPlayerController } from 'wdPlayer/Index';
 import { PlayerTitleView } from './PlayerTitleView'
 import { PlayerTitleView } from './PlayerTitleView'
 import { PlayerProgressView } from './PlayerProgressView'
 import { PlayerProgressView } from './PlayerProgressView'
 import { PlayerCommentView } from './PlayerCommentView'
 import { PlayerCommentView } from './PlayerCommentView'
+import { PlayerTimeSeekView } from './PlayerTimeSeekView'
 
 
 @Component
 @Component
 export struct PlayerBottomView {
 export struct PlayerBottomView {
+  private playerController?: WDPlayerController;
   @Consume showComment?: boolean
   @Consume showComment?: boolean
   @Consume isOpenDetail?: boolean
   @Consume isOpenDetail?: boolean
-  private playerController?: WDPlayerController;
+  @Consume isDragging?: boolean
 
 
   build() {
   build() {
     Column() {
     Column() {
       PlayerTitleView()
       PlayerTitleView()
       PlayerProgressView({ playerController: this.playerController })
       PlayerProgressView({ playerController: this.playerController })
-        .visibility(this.isOpenDetail ? Visibility.None : Visibility.Visible)
       if (this.showComment) {
       if (this.showComment) {
-        PlayerCommentView().visibility(this.isOpenDetail ? Visibility.None : Visibility.Visible)
+        PlayerCommentView()
       }
       }
     }
     }
     .alignItems(HorizontalAlign.Start)
     .alignItems(HorizontalAlign.Start)

@@ -3,6 +3,7 @@ import router from '@ohos.router';
 @Component
 @Component
 export struct PlayerCommentView {
 export struct PlayerCommentView {
   @Consume showComment?: boolean
   @Consume showComment?: boolean
+  @Consume isOpenDetail?: boolean
   @State comment: string = '';
   @State comment: string = '';
 
 
   build() {
   build() {
@@ -30,5 +31,6 @@ export struct PlayerCommentView {
     .backgroundColor(Color.Black)
     .backgroundColor(Color.Black)
     .alignItems(VerticalAlign.Center)
     .alignItems(VerticalAlign.Center)
     .padding({ left: 16, right: 16, top: 11, bottom: 11 })
     .padding({ left: 16, right: 16, top: 11, bottom: 11 })
+    .visibility(this.isOpenDetail ? Visibility.None : Visibility.Visible)
   }
   }
 }
 }

+import { ContentDetailDTO } from 'wdBean/Index';
+import { DateTimeUtils } from 'wdKit/Index';
 import { PlayerConstants, WDPlayerController } from 'wdPlayer/Index';
 import { PlayerConstants, WDPlayerController } from 'wdPlayer/Index';
 
 
 @Component
 @Component
 export struct PlayerProgressView {
 export struct PlayerProgressView {
   private playerController?: WDPlayerController;
   private playerController?: WDPlayerController;
+  @Consume contentDetailData: ContentDetailDTO
   @Consume progressVal: number;
   @Consume progressVal: number;
+  @Consume isOpenDetail: boolean
+  @Consume isDragging: boolean
   @State status: number = PlayerConstants.STATUS_START;
   @State status: number = PlayerConstants.STATUS_START;
 
 
   aboutToAppear() {
   aboutToAppear() {
     if (this.playerController) {
     if (this.playerController) {
       this.playerController.onStatusChange = (status: number) => {
       this.playerController.onStatusChange = (status: number) => {
         this.status = status
         this.status = status
+        console.log('=============', this.status)
       }
       }
     }
     }
   }
   }
 
 
   build() {
   build() {
-    Slider({
-      value: this.progressVal,
-      step: 0.01,
-      // style: SliderStyle.OutSet
-    })
-      .blockColor(this.status === PlayerConstants.STATUS_START ? Color.Transparent : $r('app.color.play_block_color'))
-      .trackColor(this.status === PlayerConstants.STATUS_START ? $r('app.color.play_track_color') : $r('app.color.pause_track_color'))
-      .selectedColor(this.status === PlayerConstants.STATUS_START ? $r('app.color.play_selected_color') : $r('app.color.pause_selected_color'))
-      .trackThickness(this.status === PlayerConstants.STATUS_START ? 1 : 4)
-      .blockStyle({
-        type: this.status === PlayerConstants.STATUS_START ? SliderBlockType.DEFAULT : SliderBlockType.IMAGE,
-        image: $r('app.media.ic_player_block')
-      })
-      .blockSize({ width: 18, height: 12 })
-      .width('100%')
-      .height(19)
-      .onChange((value: number, mode: SliderChangeMode) => {
-        this.playerController?.setSeekTime(Math.floor(value), mode);
+    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)
   }
   }
 }
 }

@@ -33,6 +33,7 @@ export struct PlayerRightView {
   @Consume newsStatusOfUser: batchLikeAndCollectResult
   @Consume newsStatusOfUser: batchLikeAndCollectResult
   @Consume followStatus: string
   @Consume followStatus: string
   @Consume isOpenDetail: boolean
   @Consume isOpenDetail: boolean
+  @Consume isDragging: boolean
   @State operationList: OperationItem[] = [
   @State operationList: OperationItem[] = [
     {
     {
       icon: $r('app.media.ic_like_uncheck'),
       icon: $r('app.media.ic_like_uncheck'),
@@ -309,6 +310,6 @@ export struct PlayerRightView {
     .position({ x: '100%', y: '100%' })
     .position({ x: '100%', y: '100%' })
     .markAnchor({ x: '100%', y: '100%' })
     .markAnchor({ x: '100%', y: '100%' })
     .padding({ bottom: 72 })
     .padding({ bottom: 72 })
-    .visibility(this.isOpenDetail ? Visibility.None : Visibility.Visible)
+    .visibility(this.isOpenDetail || this.isDragging ? Visibility.None : Visibility.Visible)
   }
   }
 }
 }

+@Preview
+@Component
+export struct PlayerTimeSeekView {
+  build() {
+    Row() {
+      Text() {
+        Span('00:06')
+        Span('/')
+        Span('00:06')
+      }
+      .fontSize(24)
+      .fontColor(Color.White)
+      .fontWeight(600)
+
+    }
+  }
+}

@@ -9,6 +9,7 @@ export struct PlayerTitleView {
   @Consume contentDetailData: ContentDetailDTO
   @Consume contentDetailData: ContentDetailDTO
   @Consume windowWidth: number
   @Consume windowWidth: number
   @Consume isOpenDetail: boolean
   @Consume isOpenDetail: boolean
+  @Consume isDragging: boolean
   @State titleHeight: number = 0
   @State titleHeight: number = 0
   dialogController: CustomDialogController = new CustomDialogController({
   dialogController: CustomDialogController = new CustomDialogController({
     builder: DetailDialog({
     builder: DetailDialog({
@@ -104,6 +105,6 @@ export struct PlayerTitleView {
     .width(this.windowWidth - 100 + 'px')
     .width(this.windowWidth - 100 + 'px')
     .padding({ left: 16, right: 22 })
     .padding({ left: 16, right: 22 })
     .alignItems(HorizontalAlign.Start)
     .alignItems(HorizontalAlign.Start)
-    .visibility(this.isOpenDetail ? Visibility.None : Visibility.Visible)
+    .visibility(this.isOpenDetail || this.isDragging ? Visibility.None : Visibility.Visible)
   }
   }
 }
 }