播放页面的控制Button 增加PointLightButton 点击有光源效果

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

@@ -299,6 +299,7 @@ const ITEM_HEIGHT_BIG: number = 78; // 列表项大高度
 @Preview
 @Component
 export struct LocalMusic {
+  @StorageProp("EnablePointLight") enablePointLight: boolean = true
   @State showSimple: boolean = true//开启沉浸模式
   @State isPaging: boolean = true;//是否分页加载机制
   @State isCoverRectangle: boolean = true;
@@ -1071,6 +1072,7 @@ export struct LocalMusic {
     context.getApplicationContext().setColorMode(colorMode)
   }
   initSetting() {
+    this.enablePointLight = PreferencesUtil.getBooleanSync('enablePointLight', true)
     this.showSimple = PreferencesUtil.getBooleanSync('showSimple', true)
     this.showZMIndex = PreferencesUtil.getBooleanSync('showZMIndex', false)
     this.autoHideTitle = PreferencesUtil.getBooleanSync('autoHideTitle', true)
@@ -9834,7 +9836,6 @@ export struct LocalMusic {
   private lyricControllerXF: LyricController = new LyricController() //悬浮歌词控制器
   private lyricControllerSingle: LyricController = new LyricController() //播放页单行歌词控制器
   private parser = new LyricParser()
-  @State randomColor: string = 'rgb(0,0,0)'
   @State randomShakenX: number = 0
   @State randomShakenY: number = 0
   @State lyricTextSize: number = 24
@@ -10477,9 +10478,8 @@ export struct LocalMusic {
         if (this.isPhoneLan()) {
           Column() {
             this.playProgressView()
-            // this.playCenterView()
           }
-          .margin({ bottom: 30, right: this.currentLyricAlignMode == 0 ? 0 : 30 })
+          .margin({ bottom: 34, right: this.currentLyricAlignMode == 0 ? 0 : 30 })
         }
       }
       .position({
@@ -10522,129 +10522,133 @@ export struct LocalMusic {
       }
 
     }
+    .justifyContent(FlexAlign.Center)
+    .alignItems(HorizontalAlign.Center)
     .position({ bottom: this.isHiCarSmall()?50:(this.isCoverOpacity() ? 55 : 70) }) // 将  固定在底部
 
   }
+
+  @Builder
+  playMenuBuilder(){
+    Image($r('app.media.menu'))
+      .width(24)
+      .clickEffect({level:ClickEffectLevel.LIGHT, scale: 0.5})
+      .bindSheet($$this.isShowMoreView, this.PlayMoreSheet(), {
+        height:  '99%',
+        preferType:SheetType.CENTER,
+        dragBar: true,
+        showClose: true,
+        blurStyle: BlurStyle.Thin,
+        title: { title: $r('app.string.more') },
+        backgroundColor: Color.Transparent,
+      })
+  }
   //播放控制上一首 下一首 暂停和播放
   @Builder
   playCenterView(){
     Row() {
-      Button({type:ButtonType.Circle,stateEffect:true}){
-        //更多功能
-        Image($r('app.media.menu'))
-          .width(24)
-          .clickEffect({level:ClickEffectLevel.LIGHT, scale: 0.5})
-          .bindSheet($$this.isShowMoreView, this.PlayMoreSheet(), {
-            height:  '99%',
-            preferType:SheetType.CENTER,
-            dragBar: true,
-            showClose: true,
-            blurStyle: BlurStyle.Thin,
-            title: { title: $r('app.string.more') },
-            backgroundColor: Color.Transparent,
-          })
-      }
-      .height(45)
-      .width(45)
-      .margin({ left: 5 })
-      .backgroundColor(Color.Transparent)
-      .onClick(() => {
-        this.isShowMoreView = !this.isShowMoreView;
-      })
 
-      Button({type:ButtonType.Circle,stateEffect:true}){
-        Image($r('app.media.ic_previous'))
-          .width(33)
-          .clickEffect({level:ClickEffectLevel.LIGHT, scale: 0.5})
-          .aspectRatio(CommonConstants.ASPECT_RATIO)
-      }
-      .height(45)
-      .width(45)
-      .onClick(async () => {
-        await this.playPrevious()
+      PointLightButton({
+        builder: () => {
+          this.playMenuBuilder()
+        },
+        isPx: false,
+        builderHeight: 33,
+        builderWidth: 33,
       })
-      .backgroundColor(Color.Transparent)
+        .onClick(async () =>{
+          this.isShowMoreView = !this.isShowMoreView;
+        })
 
-      Button({type:ButtonType.Circle,stateEffect:true}){
-        Stack() {
-          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()?45:55)
-              .clickEffect({level:ClickEffectLevel.LIGHT, scale: 0.5})
-              .fillColor(Color.White)
-              .aspectRatio(CommonConstants.ASPECT_RATIO)
-          }
 
-          // 加载进度圈
-          if (this.isPlayerLoading) {
-            Progress({value:0,total:100,type:ProgressType.Ring })
-              .width(this.isPhoneLan()?48:57)
-              .height(this.isPhoneLan()?48:57)
-              .color(Color.White)
-              .style({ strokeWidth: 5, status: ProgressStatus.LOADING })
-          }
-        }
-        .width(this.isPhoneLan()?45:55)
-        .height(this.isPhoneLan()?45:55)
-      }
-      .onClick(async () => {
-        this.playOrPause()
+      PointLightButton({
+        builder: () => {
+          this.playPreviousBuilder()
+        },
+        isPx: false,
+        builderHeight: 33,
+        builderWidth: 33,
       })
-      .backgroundColor(Color.Transparent)
-      .layoutWeight(1)
-
-      // PointLightButton({
-      //   builder: () => {
-      //     this.PlayOrPauseButton()
-      //   },
-      //   isPx: true,
-      //   builderHeight: 60,
-      //   builderWidth: 60,
-      // })
-      //   .layoutWeight(1)
-      //   .onClick(() =>{
-      //     this.playOrPause()
-      //   })
+        .onClick(async () =>{
+          await this.playPrevious()
+        })
 
 
 
-      Button({ type: ButtonType.Circle, stateEffect: true }) {
-        Image($r('app.media.ic_next'))
-          .width(33)
-          .clickEffect({level:ClickEffectLevel.LIGHT, scale: 0.5})
-          .aspectRatio(CommonConstants.ASPECT_RATIO)
-      }
-      .height(45)
-      .width(45)
-      .backgroundColor(Color.Transparent)
-      .onClick(async () => {
-        await this.playNext();
+      PointLightButton({
+        builder: () => {
+          this.PlayOrPauseButton()
+        },
+        isPx: false,
+        builderHeight: this.isPhoneLan()?42:55,
+        builderWidth: this.isPhoneLan()?42:55,
       })
+        .onClick(() =>{
+          this.playOrPause()
+        })
 
-
+      PointLightButton({
+        builder: () => {
+          this.playNextBuilder()
+        },
+        isPx: false,
+        builderHeight: 33,
+        builderWidth: 33,
+      })
+        .onClick(async () =>{
+          await this.playNext()
+        })
 
       this.playModeButton()
 
 
-
     }
     .width('95%')
     .margin({ bottom:this.isCoverOpacity()?0:15 })
     .justifyContent(FlexAlign.SpaceEvenly)
   }
+
   @Builder
-  PlayOrPauseButton(){
-    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()?45:55)
+  playPreviousBuilder(){
+    Image($r('app.media.ic_previous'))
+      .width(33)
       .clickEffect({level:ClickEffectLevel.LIGHT, scale: 0.5})
-      .fillColor(Color.White)
       .aspectRatio(CommonConstants.ASPECT_RATIO)
   }
 
+  @Builder
+  playNextBuilder(){
+    Image($r('app.media.ic_next'))
+      .width(33)
+      .clickEffect({level:ClickEffectLevel.LIGHT, scale: 0.5})
+      .aspectRatio(CommonConstants.ASPECT_RATIO)
+  }
+  @Builder
+  PlayOrPauseButton(){
+    Stack() {
+      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()?45:55)
+          .clickEffect({level:ClickEffectLevel.LIGHT, scale: 0.5})
+          .fillColor(Color.White)
+          .aspectRatio(CommonConstants.ASPECT_RATIO)
+      }
+
+      // 加载进度圈
+      if (this.isPlayerLoading) {
+        Progress({value:0,total:100,type:ProgressType.Ring })
+          .width(this.isPhoneLan()?48:57)
+          .height(this.isPhoneLan()?48:57)
+          .color(Color.White)
+          .style({ strokeWidth: 5, status: ProgressStatus.LOADING })
+      }
+    }
+    .width(this.isPhoneLan()?45:55)
+    .height(this.isPhoneLan()?45:55)
+  }
+
 
   @Builder
   TopPlayProgressView(){
@@ -10741,40 +10745,48 @@ export struct LocalMusic {
 
   @Builder
   playModeButton(){
-    Button({type:ButtonType.Circle,stateEffect:true}){
-      Column() {
-        if (this.playType === 0) {
-          Image($r('app.media.loop'))
-            .width(27)
-            .clickEffect({level:ClickEffectLevel.LIGHT, scale: 0.5})
-            .aspectRatio(CommonConstants.ASPECT_RATIO)
-        } else if (this.playType === 1) {
-          Image($r('app.media.single'))
-            .width(27)
-            .clickEffect({level:ClickEffectLevel.LIGHT, scale: 0.5})
-            .aspectRatio(CommonConstants.ASPECT_RATIO)
-        } else if (this.playType === 2) {
-          Image($r('app.media.normal_play'))
-            .clickEffect({level:ClickEffectLevel.LIGHT, scale: 0.5})
-            .width(27)
-            .aspectRatio(CommonConstants.ASPECT_RATIO)
-        } else if (this.playType === 3) {
-          Image($r('app.media.random'))
-            .width(27)
-            .clickEffect({level:ClickEffectLevel.LIGHT, scale: 0.5})
-            .aspectRatio(CommonConstants.ASPECT_RATIO)
-        }
+
+    PointLightButton({
+      builder: () => {
+        this.playModeBuilder()
+      },
+      isPx: false,
+      builderHeight: 33,
+      builderWidth: 33,
+    })
+      .onClick(async () =>{
+        this.setLoopMode()
+      })
+
+  }
+
+  @Builder
+  playModeBuilder(){
+    Column() {
+      if (this.playType === 0) {
+        Image($r('app.media.loop'))
+          .width(27)
+          .clickEffect({level:ClickEffectLevel.LIGHT, scale: 0.5})
+          .aspectRatio(CommonConstants.ASPECT_RATIO)
+      } else if (this.playType === 1) {
+        Image($r('app.media.single'))
+          .width(27)
+          .clickEffect({level:ClickEffectLevel.LIGHT, scale: 0.5})
+          .aspectRatio(CommonConstants.ASPECT_RATIO)
+      } else if (this.playType === 2) {
+        Image($r('app.media.normal_play'))
+          .clickEffect({level:ClickEffectLevel.LIGHT, scale: 0.5})
+          .width(27)
+          .aspectRatio(CommonConstants.ASPECT_RATIO)
+      } else if (this.playType === 3) {
+        Image($r('app.media.random'))
+          .width(27)
+          .clickEffect({level:ClickEffectLevel.LIGHT, scale: 0.5})
+          .aspectRatio(CommonConstants.ASPECT_RATIO)
       }
     }
-    .layoutWeight(1)
-    .margin({ left: 5 })
-    .height(45)
-    .width(45)
-    .backgroundColor(Color.Transparent)
-    .onClick(async () => {
-      this.setLoopMode()
-    })
   }
+
   //播放进度条
   @Builder
   BottomView(){
@@ -10902,12 +10914,19 @@ export struct LocalMusic {
     })
   }
 
-  //旧版本播放进度条
+  //旧版本播放进度条(现在是手机横屏的播放条）
   @Builder
   playProgressView() {
     Row() {
-
-      this.fullButton()
+      Column(){
+        this.fullButton()
+      }
+      .margin({ right: 10})
+      .visibility( this.is_auto_hide_progress ? Visibility.None : Visibility.Visible)
+      .animation({
+          duration: 666,
+          curve: 'ease-in-out' // 可选动画曲线
+      })
 
       Text(this.currentTime)
         .fontSize($r('app.float.slider_font_size'))
@@ -11179,7 +11198,6 @@ export struct LocalMusic {
           (this.isCoverOpacity() ? (px2vp(this.windowHeight)*0.62) : this.isCoverRectangle ? 320 : 168))
         .objectFit(this.isCoverRectangle ? ImageFit.Contain : ImageFit.Auto)
         .alt($r('app.media.alt'))
-        // .geometryTransition('cover') // 绑定标识符
         .margin({ right: 20, left: 20,
           top:this.isCoverRectangle||this.isLandscape?0:50})
         .aspectRatio(1)
@@ -12598,6 +12616,22 @@ export struct LocalMusic {
                   .width(48)
                   .height(24);
 
+                Toggle({ type: ToggleType.Switch, isOn: this.enablePointLight })
+                  .selectedColor(this.themeColor)
+                  .switchPointColor(Color.White)
+                  .clickEffect({ level: ClickEffectLevel.LIGHT, scale: 0.5 })
+                  .margin({ right: 15 })
+                  .visibility(more.id == 23 ? Visibility.Visible : Visibility.None)
+                  .onChange((checked: boolean) => { // 选择开关状态变化时触发事件
+                    if (more.id == 23) {
+                      this.enablePointLight = checked;
+                      PreferencesUtil.put('enablePointLight', this.enablePointLight)
+                    }
+
+                  })
+                  .width(48)
+                  .height(24);
+
                 Toggle({ type: ToggleType.Switch, isOn: this.isShowBgLiuGUANG })
                   .selectedColor(this.themeColor)
                   .switchPointColor(Color.White)
@@ -12691,7 +12725,9 @@ export struct LocalMusic {
 
     { id: 13, image: $r('app.media.rectangle'), title: '封面方形' },
 
-    {id : 22, image: $r('app.media.skip'), title: '沉浸式' },
+    { id : 22, image: $r('app.media.skip'), title: '沉浸式' },
+
+    { id : 23, image: $r('app.media.more_do'), title: '点光源效果' },
 
     { id : 21, image: $r('app.media.kp_music'), title: '背景双边流光' },
 
@@ -13431,16 +13467,18 @@ export struct LocalMusic {
     }
     this.isCurrentTime = true;
     this.lyricController.updatePosition(position + this.timeOffset * 1000)
-    this.lyricControllerXF.updatePosition(position + this.timeOffset * 1000)
-    this.lyricControllerSingle.updatePosition(position + this.timeOffset * 1000)
+    if(this.showPipLyric){
+      this.lyricControllerXF.updatePosition(position + this.timeOffset * 1000);
+    }
+    if(this.isShowSingleLineLyric){
+      this.lyricControllerSingle.updatePosition(position + this.timeOffset * 1000);
+    }
 
     this.currentTime = this.stringForTime(position);
     this.isCurrentTime = false
 
 
     if (this.mIjkMediaPlayer.isPlaying()) {
-      this.randomColor =
-        `rgb(${Math.floor(Math.random() * 256)},${Math.floor(Math.random() * 256)},${Math.floor(Math.random() * 256)})`
 
       //如果是开启AB循环
       if(this.isOpenAB){
@@ -13473,12 +13511,8 @@ export struct LocalMusic {
         }
       }
 
-    } else {
-      this.randomColor = 'rbg(0,0,0)'
-
     }
 
-
   }
 
   private startProgressTask() {
@@ -14789,8 +14823,12 @@ export struct LocalMusic {
     this.currentTime = this.stringForTime(position);
     this.isCurrentTime = false;
     this.lyricController.updatePosition(position + this.timeOffset * 1000);
-    this.lyricControllerXF.updatePosition(position + this.timeOffset * 1000);
-    this.lyricControllerSingle.updatePosition(position + this.timeOffset * 1000);
+    if(this.showPipLyric){
+      this.lyricControllerXF.updatePosition(position + this.timeOffset * 1000);
+    }
+    if(this.isShowSingleLineLyric){
+      this.lyricControllerSingle.updatePosition(position + this.timeOffset * 1000);
+    }
   }
   /**
    * Gesture method onActionUpdate.

entry/src/main/ets/view/PointLight/PointLightButton.ets

@@ -1,4 +1,6 @@
 import { hdsEffect } from "@kit.UIDesignKit"
+import { deviceInfo } from "@kit.BasicServicesKit"
+import { PreferencesUtil } from "@pura/harmony-utils"
 
 @Component
 export struct PointLightButton{
@@ -7,7 +9,7 @@ export struct PointLightButton{
   @Require@Prop@Watch('setButtonSize') builderHeight: number
   @Require@Prop@Watch('setButtonSize') builderWidth: number
   // 可选
-  public buttonScale: number = 1.7
+  public buttonScale: number = 1.3
   @State pointLightHeight: number = 100
   public canShadow: boolean = true
   public canPointLight: boolean = true
@@ -26,6 +28,8 @@ export struct PointLightButton{
   }
 
   setButtonSize(){
+    this.enablePointLight = PreferencesUtil.getBooleanSync('enablePointLight', true)
+    this.sdkApiVersion = deviceInfo.sdkApiVersion
     let buttonHeight = this.builderHeight * this.buttonScale
     let buttonWidth = this.builderWidth * this.buttonScale
     if(this.isPx){