悬浮歌词的背景可以随音乐封面

entry/src/main/ets/common/constants/CommonConstants.ets

@@ -90,6 +90,8 @@ export class CommonConstants {
   static readonly SORT_ARRAY = ["按艺术家升序", "按艺术家降序", "按专辑升序", "按专辑降序", "按名称升序", "按名称降序", "按添加时间升序",
   "按添加时间降序"]
 
+  static readonly PIP_LYRIC_BG = ["音乐封面", "自定义"]
+
 
   //德本的接口调用微信支付下单接口返回的支付交易会话ID，该值有效期为2小时。
   static readonly WX_PAY_API: string = "https://pay.ss5.xyz/wechat/prepay"

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

@@ -91,6 +91,7 @@ import { DEBUG } from 'BuildProfile';
 import { LrcParser } from '@sgaolei/lrc_parser';
 import app, { AppResponse } from '@system.app';
 import { Log } from '@tencent/wechat_open_sdk';
+import { TextNodeController } from './PipLyricTextBuilder';
 
 const TAG = 'LocalMusic';
 
@@ -1606,7 +1607,7 @@ export struct LocalMusic {
       pup = XPopup.Builder()
         .setPopupPosition(popupPosition)
         .atView(id)
-        // .setHeight(this.isCoverOpacity()?100:420)
+          // .setHeight(this.isCoverOpacity()?100:420)
         .setBackgroundColor(Color.Black)
         .asBubble(wrapBuilder(cutPopupBuilder), dataBean)
         .show()
@@ -1615,7 +1616,7 @@ export struct LocalMusic {
       pup = XPopup.Builder()
         .setPopupPosition(popupPosition)
         .atView(id)
-        // .setHeight(this.isCoverOpacity()?280:420)
+          // .setHeight(this.isCoverOpacity()?280:420)
         .setBackgroundColor(Color.White)
         .asBubble(wrapBuilder(cutPopupBuilder), dataBean)
         .show()
@@ -3048,7 +3049,7 @@ export struct LocalMusic {
             this.longItemFilePath = item.filePath
             this.tempLyricContent = await this.getLyricContent(item)
             LogUtil.info('长按this.tempLyricContent = '+this.tempLyricContent)
-        })
+          })
           .onActionEnd((event: GestureEvent) => {
 
           })
@@ -3238,8 +3239,8 @@ export struct LocalMusic {
         }
         .swipeAction((
           (this.modeType==0||this.modeType==1 ||((this.modeType==3||this.modeType==2)&&this.isCanBack))
-          && item.type !== CommonConstants.TYPE_IS_CSJAD &&
-          !this.isHistory) ? { end: this.DeleteButton(item, index, item.filePath) } : {}) //左滑
+            && item.type !== CommonConstants.TYPE_IS_CSJAD &&
+            !this.isHistory) ? { end: this.DeleteButton(item, index, item.filePath) } : {}) //左滑
         .onClick(() => {
 
           this.doPlay(item, index)
@@ -4833,7 +4834,7 @@ export struct LocalMusic {
           .margin({ top: 0 })
           .height(PlayConstants.HEIGHT)
           .visibility(DeviceUtil.getDeviceType()==resourceManager.DeviceType.DEVICE_TYPE_2IN1?
-              Visibility.Visible:Visibility.None)
+          Visibility.Visible:Visibility.None)
 
           // .visibility(this.currentBreakpoint !== BreakpointTypeEnum.SM
           //   ?Visibility.Visible:Visibility.Visible)
@@ -5244,7 +5245,15 @@ export struct LocalMusic {
     this.lyricControllerXF.setTextWeight(this.lyricTextWeightPip)
 
     this.pipBg = PreferencesUtil.getStringSync('BGColorPip', '#FFFF54')
-    this.nodeController.updateBgColor(this.pipBg,this.lyricControllerXF)
+    this.pipBgIndex = PreferencesUtil.getNumberSync('pipBgIndex', 0)
+    if(this.pipBgIndex ===0 ){
+      if(this.cover){
+        this.pipBg = this.cover
+      }else{
+        this.pipBg = this.imageColor
+      }
+      this.nodeController.updateBgColor(this.pipBg,this.lyricControllerXF)
+    }
   }
 
   //根据item返回歌词内容
@@ -5797,12 +5806,12 @@ export struct LocalMusic {
             }
           })
       }
-        .backgroundColor(Color.Transparent)
-        .margin({ right: 10, left: 20 })
-        .onClick(() => {
-          this.isShowSheetView = !this.isShowSheetView;
-          this.isFrontWhite = true
-        })
+      .backgroundColor(Color.Transparent)
+      .margin({ right: 10, left: 20 })
+      .onClick(() => {
+        this.isShowSheetView = !this.isShowSheetView;
+        this.isFrontWhite = true
+      })
 
     }
     .width(PlayConstants.PROGRESS_ROW_WIDTH)
@@ -6047,6 +6056,7 @@ export struct LocalMusic {
   }
 
   @State isOpenPip:boolean = false
+  @State pipBgIndex:number = 0
   // 构建字号控制器
   @Builder
   BuildFontControls(isPip:boolean) {
@@ -6123,17 +6133,35 @@ export struct LocalMusic {
           Text(`悬浮背景:`)
             .fontSize(14)
             .fontColor(Color.White)
-          Text(this.pipBg)
-            .fontSize(14)
+          Select([
+            { value:CommonConstants.PIP_LYRIC_BG[0]},
+            { value: CommonConstants.PIP_LYRIC_BG[1]}])
+            .font({ size: 13, weight: FontWeight.Medium })
             .fontColor(Color.White)
-            .margin({ left: 12, right: 12 })
+            .margin({ left: 10 })
+            .selected(this.pipBgIndex)
+            .value(CommonConstants.PIP_LYRIC_BG[this.pipBgIndex])
+            .onSelect(async (_index: number, text?: string | undefined) => {
+              this.pipBgIndex = _index
+              PreferencesUtil.put('pipBgIndex', this.pipBgIndex)
+              if(this.pipBgIndex ===0 ){
+                if(this.cover){
+                  this.pipBg = this.cover
+                }else{
+                  this.pipBg = this.imageColor
+                }
+                this.nodeController.updateBgColor(this.pipBg,this.lyricControllerXF)
+              }else{
+                this.pipBg = PreferencesUtil.getStringSync('BGColorPip', '#FFFF54')
+              }
+
+            })
           Column(){}
           .backgroundColor(this.pipBg)
-          .margin({ right: 12 })
+          .margin({ left:10,right: 10 })
           .borderRadius(20)
           .height(28)
           .width(28)
-
           Button({ type: ButtonType.Capsule, stateEffect: true }) {
             Row() {
               SymbolGlyph($r('sys.symbol.paintbrush'))
@@ -6146,6 +6174,7 @@ export struct LocalMusic {
 
             }
           }
+          .visibility(this.pipBgIndex===1?Visibility.Visible:Visibility.None)
           .backgroundColor(Color.Transparent)
           .border({
             color: '#FFFFFF',
@@ -6567,15 +6596,15 @@ export struct LocalMusic {
   }
 
   private setBlurDegree(index: number,isPip:boolean) {
-      if(isPip){
-        this.blurDegreePip = index
-        this.lyricControllerXF.setBlurDegree(this.blurDegreePip)
-        PreferencesUtil.putSync('setBlurDegreePip', this.blurDegreePip)
-      }else{
-        this.blurDegree = index
-        this.lyricController.setBlurDegree(this.blurDegree)
-        PreferencesUtil.putSync('setBlurDegree', this.blurDegree)
-      }
+    if(isPip){
+      this.blurDegreePip = index
+      this.lyricControllerXF.setBlurDegree(this.blurDegreePip)
+      PreferencesUtil.putSync('setBlurDegreePip', this.blurDegreePip)
+    }else{
+      this.blurDegree = index
+      this.lyricController.setBlurDegree(this.blurDegree)
+      PreferencesUtil.putSync('setBlurDegree', this.blurDegree)
+    }
 
   }
 
@@ -6764,8 +6793,8 @@ export struct LocalMusic {
     Button({ type: ButtonType.Capsule, stateEffect: true }) {
       Row() {
         Image(icon)
-        .width(14)
-        .margin({ left: 13 })
+          .width(14)
+          .margin({ left: 13 })
 
         Text(label)
           .fontSize(12)
@@ -7746,7 +7775,7 @@ export struct LocalMusic {
 
   }
 
-  private startPlayOrResumePlay() {
+  startPipLyric(){
     if(this.pipController)
       this.pipController.updatePiPControlStatus(PiPWindow.PiPControlType.VIDEO_PLAY_PAUSE, PiPWindow.PiPControlStatus.PLAY);
     this.isOpenPip = PreferencesUtil.getBooleanSync('isOpenPip',false)
@@ -7755,6 +7784,10 @@ export struct LocalMusic {
     }else{
       this.stopPip()
     }
+  }
+
+  private startPlayOrResumePlay() {
+    this.startPipLyric()
     this.mDestroyPage = false;
     this.animationState = AnimationStatus.Running
     LogUtils.getInstance().LOGI("startPlayOrResumePlay start this.CONTROL_PlayStatus:" + this.CONTROL_PlayStatus)
@@ -9446,59 +9479,3 @@ function cutPopupBuilder(dataBu: BubbleBean) {
 }
 
 
-//悬浮歌词功能的布局，画中画自定义布局的开始代码
-class Params {
-  pipBg: string = '';
-  lyController:LyricController
-  constructor(pipBg: string,controller:LyricController) {
-    this.pipBg = pipBg;
-    this.lyController = controller;
-  }
-}
-
-// 开发者可以通过@Builder装饰器实现布局构建
-@Builder
-function buildLyricText(params: Params) {
-  Column(){
-    Column() {
-      LyricView2({ controller: params.lyController,
-        enableSeek: true,
-        seekUIColor: "#ff0000",// 滑动定位的按钮和文本颜色
-        seekLineColor: "#80ffffff",// 滑动定位线颜色
-        seekUIStyle: "listItem",// 滑动定位样式（seekLine传统样式，listItem类似抖音汽水音乐样式）
-      })
-    }
-    .margin({left:20,right:20})
-  }
-  .width('100%') // 宽度方向充满画中画窗口
-  .height('100%') // 高度方向充满画中画窗口
-  .backgroundColor(params.pipBg)
-  .backgroundBlurStyle(BlurStyle.BACKGROUND_ULTRA_THICK)
-}
-// 开发者可通过继承NodeController实现自定义UI控制器
-class TextNodeController extends NodeController {
-  private pipBg: string;
-  private lyController:LyricController;
-  private textNode: BuilderNode<[Params]> | null = null;
-  constructor(pipBg: string,lyController:LyricController) {
-    super();
-    this.pipBg = pipBg;
-    this.lyController = lyController;
-  }
-
-  // 通过BuilderNode加载自定义布局
-  makeNode(context: UIContext): FrameNode | null {
-    this.textNode = new BuilderNode(context);
-    this.textNode.build(wrapBuilder<[Params]>(buildLyricText), new Params(this.pipBg,this.lyController));
-    return this.textNode.getFrameNode();
-  }
-
-  // 开发者可自定义该方法实现布局更新
-  updateBgColor(color: string,lyController:LyricController) {
-    console.log(`onecold update message: ${color}`);
-    if (this.textNode !== null) {
-      this.textNode.update(new Params(color,lyController));
-    }
-  }
-}
-//悬浮歌词功能的布局，画中画自定义布局的结束

entry/src/main/ets/view/PipLyricTextBuilder.ets

@@ -0,0 +1,69 @@
+import { NodeController, BuilderNode, FrameNode, UIContext } from "@kit.ArkUI";
+import { LyricController, LyricView2 } from "@seagazer/cclyric";
+
+class Params {
+  pipBg: string = '';
+  lyController:LyricController
+  constructor(pipBg: string,controller:LyricController) {
+    this.pipBg = pipBg;
+    this.lyController = controller;
+  }
+}
+
+//悬浮歌词功能的布局，画中画自定义布局的开始代码
+@Component
+struct PipLyricTextBuilder {
+  @Prop lyController: LyricController = new LyricController()//悬浮歌词控制器
+
+  build() {
+    Column() {
+
+    }
+  }
+}
+
+@Builder
+function buildLyricText(params: Params) {
+  Column() {
+    // PipLyricTextBuilder({lyController: params.lyController}) // 自定义组件
+    Column() {
+      LyricView2({ controller: params.lyController,
+        enableSeek: true,
+        seekUIColor: "#ff0000",// 滑动定位的按钮和文本颜色
+        seekLineColor: "#80ffffff",// 滑动定位线颜色
+        seekUIStyle: "listItem",// 滑动定位样式（seekLine传统样式，listItem类似抖音汽水音乐样式）
+      })
+    }
+    .margin({left:20,right:20})
+  }
+  .width('100%') // 宽度方向充满画中画窗口
+  .height('100%') // 高度方向充满画中画窗口
+  .backgroundColor(params.pipBg)
+  .backgroundBlurStyle(BlurStyle.BACKGROUND_REGULAR)
+}
+
+export  class TextNodeController extends NodeController {
+  private pipBg: string;
+  private lyController:LyricController;
+  private textNode: BuilderNode<[Params]> | null = null;
+  constructor(pipBg: string,lyController:LyricController) {
+    super();
+    this.pipBg = pipBg;
+    this.lyController = lyController;
+  }
+
+  // 通过BuilderNode加载自定义布局
+  makeNode(context: UIContext): FrameNode | null {
+    this.textNode = new BuilderNode(context);
+    this.textNode.build(wrapBuilder<[Params]>(buildLyricText), new Params(this.pipBg,this.lyController));
+    return this.textNode.getFrameNode();
+  }
+
+  // 开发者可自定义该方法实现布局更新
+  updateBgColor(color: string,lyController:LyricController) {
+    console.log(`onecold update message: ${color}`);
+    if (this.textNode !== null) {
+      this.textNode.update(new Params(color,lyController));
+    }
+  }
+}