播放页底部的界面调整：为进度条在顶部 中间播放控制 底下功能按钮

entry/src/main/ets/view/LocalMusic.ets

@@ -3808,7 +3808,7 @@ export struct LocalMusic {
         }
         .width(this.getGridWight())
         .borderRadius(12)
-        .backgroundImage(StrUtil.isEmpty(item.pixelMapPath)?$r('app.media.avatar'):item.pixelMapPath)
+        .backgroundImage(StrUtil.isEmpty(item.pixelMapPath)?Utility.getMusisBg2(index):item.pixelMapPath)
         .backgroundImageSize({ height: '100%', width: '100%' })
         .backgroundBlurStyle(BlurStyle.BACKGROUND_ULTRA_THICK)
         .animation({ curve: Curve.Sharp, duration: 300 })
@@ -7078,14 +7078,11 @@ export struct LocalMusic {
   @Builder
   BottomControl() {
     Column() {
+      this.TopPlayProgressView()
       //播放 暂停，下一首，上一首
       this.playCenterView()
-
-
       //播放进度条
-      this.playProgressView()
-
-
+      this.BottomView()
     }
     .position({ bottom: this.isHiCarSmall()?50:(this.isCoverOpacity() ? 55 : 100) }) // 将  固定在底部
 
@@ -7093,110 +7090,95 @@ export struct LocalMusic {
 
   //播放控制上一首 下一首 暂停和播放
   @Builder
-  playCenterView() {
+  playCenterView(){
     Row() {
       Row({ space: 20 }) {
 
 
-        Button({ type: ButtonType.Circle, stateEffect: true }) {
+        Button({type:ButtonType.Circle,stateEffect:true}){
           //更多功能
           Image($r('app.media.menu'))
             .width(24)
-            .clickEffect({ level: ClickEffectLevel.MIDDLE })
+            .clickEffect({level:ClickEffectLevel.MIDDLE})
             .bindSheet($$this.isShowMoreView, this.PlayMoreSheet(), {
               height: this.isCoverOpacity() ? '95%' : '93%',
-              preferType: this.currentBreakpoint !== BreakpointTypeEnum.SM ? SheetType.CENTER : SheetType.BOTTOM,
+              preferType: this.currentBreakpoint!==BreakpointTypeEnum.SM?SheetType.CENTER:SheetType.BOTTOM,
               dragBar: true,
               showClose: true,
               blurStyle: BlurStyle.Thin,
               backgroundColor: Color.Transparent,
             })
         }
-        .clickEffect({ level: ClickEffectLevel.LIGHT, scale: 0.5 })
+        .clickEffect({level:ClickEffectLevel.LIGHT, scale: 0.5})
         .backgroundColor(Color.Transparent)
         .onClick(() => {
           this.isShowMoreView = !this.isShowMoreView;
         })
 
-        Button({ type: ButtonType.Circle, stateEffect: true }) {
+        Button({type:ButtonType.Circle,stateEffect:true}){
           Image($r('app.media.ic_previous'))
             .width(33)
-            .clickEffect({ level: ClickEffectLevel.HEAVY })
+            .clickEffect({level:ClickEffectLevel.HEAVY})
             .aspectRatio(CommonConstants.ASPECT_RATIO)
         }
         .onClick(async () => {
           this.playPrevious()
         })
-        .onKeyEvent((event: KeyEvent) => {
-          if ((event.keyCode === KeyCode.KEYCODE_DPAD_LEFT && event.type === KeyType.Down)) {
-            this.playPrevious()
-          }
-        })
-        .defaultFocus(true) // 自动获取键盘焦点
-        .clickEffect({ level: ClickEffectLevel.LIGHT, scale: 0.5 })
+        .clickEffect({level:ClickEffectLevel.LIGHT, scale: 0.5})
         .backgroundColor(Color.Transparent)
         .margin({ left: 5 })
 
       }
 
 
-      Button({ type: ButtonType.Circle, stateEffect: true }) {
+      Button({type:ButtonType.Circle,stateEffect:true}){
         Column() {
           Image(this.CONTROL_PlayStatus === PlayStatus.PLAY ?
-            (this.isCircleBtn ? $r('app.media.hm_pause') : $r('app.media.ic_public_play'))
-            : (this.isCircleBtn ? $r('app.media.hm_play2') : $r('app.media.ic_public_pause')))
-            .width(this.isPhoneLan() ? 48 : 60)
-            .clickEffect({ level: ClickEffectLevel.LIGHT, scale: 0.5 })
+            (this.isCircleBtn?$r('app.media.hm_pause'):$r('app.media.ic_public_play'))
+            : (this.isCircleBtn?$r('app.media.hm_play2'):$r('app.media.ic_public_pause')))
+            .width(this.isPhoneLan()?48:60)
+            .clickEffect({level:ClickEffectLevel.LIGHT, scale: 0.5})
             .fillColor(Color.White)
             .aspectRatio(CommonConstants.ASPECT_RATIO)
             .onClick(async () => {
               this.playOrPause()
 
+
             })
-            .onKeyEvent((event: KeyEvent) => {
-              if ((event.keyCode === KeyCode.KEYCODE_SPACE && event.type === KeyType.Down)) {
-                this.playOrPause()
-              }
-            })
-            .defaultFocus(true) // 自动获取键盘焦点
         }
 
       }
       .backgroundColor(Color.Transparent)
       .layoutWeight(1)
-      .margin({ left: 38, right: 38 })
+      // .margin({ left: 38, right: 38 })
 
 
       Row({ space: 20 }) {
         Button({ type: ButtonType.Capsule, stateEffect: true }) {
           Image($r('app.media.ic_next'))
             .width(33)
-            .clickEffect({ level: ClickEffectLevel.LIGHT, scale: 0.5 })
+            .clickEffect({level:ClickEffectLevel.LIGHT, scale: 0.5})
             .aspectRatio(CommonConstants.ASPECT_RATIO)
             .onClick(() => {
+
               this.playNext();
+
             })
-            .onKeyEvent((event: KeyEvent) => {
-              if ((event.keyCode === KeyCode.KEYCODE_DPAD_RIGHT && event.type === KeyType.Down)) {
-                this.playNext()
-              }
-            })
-            .defaultFocus(true) // 自动获取键盘焦点
         }
         .backgroundColor(Color.Transparent)
         .margin({ right: 5 })
         .width(33)
 
-        Button({ type: ButtonType.Circle, stateEffect: true }) {
+        Button({type:ButtonType.Circle,stateEffect:true}){
           //添加或取消收藏
-          Image(Utility.getIsFav(this.favList, this.currentSong) ?
-          $r('app.media.add_fac_light') : $r('app.media.add_fac'))
+          Image(Utility.getIsFav(this.favList,this.currentSong)?
+          $r('app.media.add_fac_light'):$r('app.media.add_fac'))
             .width(24)
-            .clickEffect({ level: ClickEffectLevel.MIDDLE })
+            .clickEffect({level:ClickEffectLevel.MIDDLE})
             .aspectRatio(CommonConstants.ASPECT_RATIO)
-            .clickEffect({ level: ClickEffectLevel.LIGHT, scale: 0.5 })
+            .clickEffect({level:ClickEffectLevel.LIGHT, scale: 0.5})
             .onClick(async () => {
-              if (this.currentSong) {
+              if(this.currentSong){
                 this.doFav(this.currentSong)
               }
             })
@@ -7205,17 +7187,188 @@ export struct LocalMusic {
         .width(24)
 
       }
-
       // .margin({ left: 5 })
 
     }
     .width('100%')
-    .margin({ left: 10, right: 10, bottom: this.isCoverOpacity() ? 0 : 20 })
-    .justifyContent(FlexAlign.Center)
+    .margin({ left:10,right:10,bottom:this.isCoverOpacity()?0:20 })
+    .justifyContent(FlexAlign.SpaceEvenly)
+  }
+
+  //播放进度条
+  @Builder
+  TopPlayProgressView(){
+    Row() {
+      Text(this.currentTime)
+        .fontSize($r('app.float.slider_font_size'))
+        .fontColor(Color.White)
+        .margin({ right: PlayConstants.PROGRESS_MARGIN_LEFT,left:20 })
+      Slider({
+        value: this.progressValue,
+        min: 0,
+        max: this.PROGRESS_MAX_VALUE,
+        step: 1,
+        style: SliderStyle.OutSet
+      })
+        .width('600px')
+        .blockColor('rgba(255,255,255,1)')
+        .trackColor('rgba(255,255,255,0.3)')
+        .selectedColor(Color.White)
+        .trackThickness(PlayConstants.PROGRESS_TRACK_THICKNESS)
+        .layoutWeight(1)
+        .showSteps(false)
+        .showTips(true)
+        .enabled(this.slideEnable)
+        .onChange((value: number, mode: SliderChangeMode) => {
+          // if (mode == 2) {
+          this.isSeekTo = true;
+          this.mDestroyPage = false;
+          this.showLoadIng();
+          LogUtils.getInstance().LOGI("slider-->seekValue start:" + value);
+          let seekValue = value * (this.mIjkMediaPlayer.getDuration() / 100);
+          this.seekTo(seekValue + "");
+          // this.setProgress()
+          LogUtils.getInstance().LOGI("slider-->seekValue end:" + seekValue);
+          this.isSeekTo = false;
+          // }
+        })
+      Text(this.totalTime)
+        .fontSize($r('app.float.slider_font_size'))
+        .fontColor(Color.White)
+        .margin({ left: PlayConstants.PROGRESS_MARGIN_LEFT,right:20 })
+
+    }
+    //x5的竖屏模式需要99%
+    .width('95%')
+    .justifyContent(FlexAlign.SpaceEvenly)
+    .margin({bottom:16})
+    .height(25)
+    .animation({
+      duration: 666,
+      curve: 'ease-in-out' // 可选动画曲线
+    })
   }
 
   //播放进度条
   @Builder
+  BottomView(){
+    Row() {
+      Button({type:ButtonType.Circle,stateEffect:true}){
+        Column() {
+          if (this.playType === 0) {
+            Image($r('app.media.loop'))
+              .width(27)
+              .aspectRatio(CommonConstants.ASPECT_RATIO)
+          } else if (this.playType === 1) {
+            Image($r('app.media.single'))
+              .width(27)
+              .aspectRatio(CommonConstants.ASPECT_RATIO)
+          } else if (this.playType === 2) {
+            Image($r('app.media.normal_play'))
+              .width(27)
+              .aspectRatio(CommonConstants.ASPECT_RATIO)
+          } else if (this.playType === 3) {
+            Image($r('app.media.random'))
+              .width(27)
+              .aspectRatio(CommonConstants.ASPECT_RATIO)
+          }
+        }
+      }
+      .layoutWeight(1)
+      .backgroundColor(Color.Transparent)
+      .clickEffect({level:ClickEffectLevel.LIGHT, scale: 0.5})
+      .onClick(async () => {
+        this.setLoopMode()
+
+
+      })
+
+
+      Button({type:ButtonType.Circle,stateEffect:true}){
+        Column() {
+          Image($r('app.media.full_4'))
+            .width(25)
+            .aspectRatio(CommonConstants.ASPECT_RATIO)
+        }
+      }
+      .layoutWeight(1)
+      .backgroundColor(Color.Transparent)
+
+      .clickEffect({level:ClickEffectLevel.LIGHT, scale: 0.5})
+      .onClick(async () => {
+        if (this.isLandscape) {
+          this.setOrientation(window.Orientation.USER_ROTATION_PORTRAIT);
+        } else {
+          this.setOrientation(window.Orientation.USER_ROTATION_LANDSCAPE);
+        }
+
+      })
+
+
+      Button({type:ButtonType.Circle,stateEffect:true}){
+        Column() {
+          Image($r('app.media.lyric'))
+            .width(26)
+            .aspectRatio(CommonConstants.ASPECT_RATIO)
+        }
+      }
+      .layoutWeight(1)
+      .backgroundColor(Color.Transparent)
+
+      .clickEffect({level:ClickEffectLevel.LIGHT, scale: 0.5})
+      .onClick(async () => {
+        this.isLyricSetting = !this.isLyricSetting;
+
+      })
+
+
+      //播放列表
+      Button({type:ButtonType.Circle,stateEffect:true}){
+        Image($r('app.media.hm_playlist'))
+          .width(24)
+          .fillColor(Color.White)
+          .aspectRatio(CommonConstants.ASPECT_RATIO)
+          .bindSheet($$this.isShowSheetView, this.PlayListSheet(), {
+            height: '95%',
+            dragBar: true,
+            showClose: true,
+            preferType: this.currentBreakpoint !== BreakpointTypeEnum.SM ? SheetType.CENTER : SheetType.BOTTOM,
+            blurStyle: BlurStyle.Thin,
+            backgroundColor: this.isPlayListBgGrass?Color.Transparent:$r('app.color.silvery'),
+            title: {
+              title: Utility.resourceToString(this.context, $r('app.string.current_play_list'))
+                + `(${this.songList.length}首)`
+            }
+          })
+      }
+      .layoutWeight(1)
+      .backgroundColor(Color.Transparent)
+      .clickEffect({level:ClickEffectLevel.LIGHT, scale: 0.5})
+      .onClick(() => {
+        this.isShowSheetView = !this.isShowSheetView;
+        if(this.isPlayListBgGrass){
+          this.isFrontWhite = true
+        }else{
+          this.isFrontWhite = false
+        }
+        setTimeout(() => {
+          this.playListScroller.scrollToIndex(this.curIndex,true, ScrollAlign.CENTER)
+        }, 123)
+      })
+
+    }
+    .width('95%')
+    .justifyContent(FlexAlign.SpaceAround)
+    .height(30)
+    .margin({top:5})
+    .animation({
+      duration: 666,
+      curve: 'ease-in-out' // 可选动画曲线
+    })
+  }
+
+  //旧版本播放进度条
+  @Builder
   playProgressView() {
     Row() {
       Button({ type: ButtonType.Circle, stateEffect: true }) {