继续音乐卡片最新代码

entry/src/main/ets/common/player/MusicCardManager.ets

@@ -64,6 +64,13 @@ interface MusicCardActionMessage {
   seekPositionMs?: string | number
 }
 
+export class MusicCardFormActionDispatchResult {
+  action: string = ''
+  formId: string = ''
+  seekPositionMs: string = ''
+  handledByEventHub: boolean = false
+}
+
 export class MusicCardManager {
   private static instance: MusicCardManager
 
@@ -222,20 +229,26 @@ export class MusicCardManager {
     context: common.Context | undefined,
     formId: string,
     message: string
-  ): Promise<void> {
+  ): Promise<MusicCardFormActionDispatchResult> {
+    const result = new MusicCardFormActionDispatchResult()
+    result.formId = formId
     const action = this.resolveCardAction(message)
     const seekPositionMs = this.resolveSeekPositionMs(message)
+    result.action = action
+    result.seekPositionMs = seekPositionMs
     if (action === '') {
       Logger.warn(TAG, `handleFormEvent skipped because action empty formId=${formId}`)
-      return
+      return result
     }
     const abilityContext = this.resolveAbilityContext(context)
     if (!abilityContext?.eventHub) {
       Logger.warn(TAG, `handleFormEvent skipped because eventHub missing action=${action}, formId=${formId}`)
-      return
+      return result
     }
     Logger.info(TAG, `handleFormEvent action=${action}, formId=${formId}`)
     abilityContext.eventHub.emit('musicCardActionForward', { action, formId, seekPositionMs })
+    result.handledByEventHub = true
+    return result
   }
 
   updateAllForms(context?: common.Context): void {

entry/src/main/ets/entryformability/MusicCardFormAbility.ets

@@ -1,6 +1,10 @@
-import { Want } from '@kit.AbilityKit'
+import { Want, wantAgent } from '@kit.AbilityKit'
 import { formBindingData, FormExtensionAbility, formInfo, formProvider } from '@kit.FormKit'
-import { MusicCardManager } from '../common/player/MusicCardManager'
+import {
+  MusicCardFormActionDispatchResult,
+  MusicCardManager
+} from '../common/player/MusicCardManager'
+import { MusicCardActionConstants } from '../common/player/MusicCardActionConstants'
 import { MusicCardFormCoverResolver } from '../common/player/MusicCardFormCoverResolver'
 import { buildMusicCardBindingData, MusicCardFormBindingData } from '../common/player/MusicCardSnapshot'
 import { MusicCardFormStore } from '../common/player/MusicCardFormStore'
@@ -14,6 +18,13 @@ const FORM_ID_NUMBER_PATTERN = /"ohos\.extra\.param\.key\.form_identity"\s*:\s*(
 const FORM_ID_TRUE_PATTERN = /"ohos\.extra\.param\.key\.form_identity"\s*:\s*true/
 const FORM_ID_FALSE_PATTERN = /"ohos\.extra\.param\.key\.form_identity"\s*:\s*false/
 
+class MusicCardColdStartParameters {
+  ttmusic_music_card_form_id: string = ''
+  ttmusic_music_card_action: string = ''
+  ttmusic_music_card_source: string = ''
+  ttmusic_music_card_seek_position_ms: string = ''
+}
+
 export default class MusicCardFormAbility extends FormExtensionAbility {
   onAddForm(want: Want): formBindingData.FormBindingData {
     const formId = this.resolveFormIdFromWant(want)
@@ -36,6 +47,12 @@ export default class MusicCardFormAbility extends FormExtensionAbility {
     MusicCardFormStore.addFormId(this.context, formId)
     void MusicCardManager.getInstance()
       .handleFormEvent(this.context, formId, message)
+      .then((result: MusicCardFormActionDispatchResult): void => {
+        if (result.handledByEventHub || result.action === '') {
+          return
+        }
+        this.launchEntryAbilityForColdStart(result)
+      })
       .catch((error: Object): void => {
         Logger.warn(TAG, `onFormEvent failed formId=${formId}, error=${this.formatError(error)}`)
       })
@@ -72,6 +89,7 @@ export default class MusicCardFormAbility extends FormExtensionAbility {
     payload.durationMs = source.durationMs
     payload.currentTimeText = source.currentTimeText
     payload.durationTimeText = source.durationTimeText
+    payload.lyricLine0 = source.lyricLine0
     payload.lyricLine1 = source.lyricLine1
     payload.lyricLine2 = source.lyricLine2
     payload.hasLyric = source.hasLyric
@@ -80,6 +98,37 @@ export default class MusicCardFormAbility extends FormExtensionAbility {
     return payload
   }
 
+  private launchEntryAbilityForColdStart(result: MusicCardFormActionDispatchResult): void {
+    const parameters = new MusicCardColdStartParameters()
+    parameters.ttmusic_music_card_form_id = result.formId
+    parameters.ttmusic_music_card_action = result.action
+    parameters.ttmusic_music_card_source = MusicCardActionConstants.ACTION_SOURCE_WIDGET
+    if (result.seekPositionMs !== '') {
+      parameters.ttmusic_music_card_seek_position_ms = result.seekPositionMs
+    }
+    const want = new Want()
+    want.bundleName = this.context.extensionAbilityInfo.bundleName
+    want.moduleName = this.context.extensionAbilityInfo.moduleName
+    want.abilityName = 'EntryAbility'
+    want.parameters = JSON.parse(JSON.stringify(parameters)) as Record<string, Object>
+    const wantAgentInfo: wantAgent.WantAgentInfo = {
+      wants: [want],
+      operationType: wantAgent.OperationType.START_ABILITY,
+      requestCode: 0,
+      wantAgentFlags: [wantAgent.WantAgentFlags.UPDATE_PRESENT_FLAG]
+    }
+    const triggerInfo: wantAgent.TriggerInfo = {
+      code: 0
+    }
+    Logger.info(TAG,
+      `launchEntryAbilityForColdStart action=${result.action}, formId=${result.formId}, seek=${result.seekPositionMs}`)
+    wantAgent.getWantAgent(wantAgentInfo).then((agent) => {
+      wantAgent.trigger(agent, triggerInfo)
+    }).catch((error: Object) => {
+      Logger.warn(TAG, `launchEntryAbilityForColdStart failed: ${this.formatError(error)}`)
+    })
+  }
+
   private resolveFormIdFromWant(want: Want): string {
     const parameters = want.parameters as Object | undefined
     if (!parameters) {

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

@@ -1111,23 +1111,42 @@ export struct LocalMusic {
     })
   }
 
-  private consumePendingMusicCardAction(): void {
+  private canConsumePendingMusicCardAction(action: string): boolean {
+    if (action === MusicCardActionConstants.ACTION_PLAY_PAUSE) {
+      if (this.CONTROL_PlayStatus === PlayStatus.PAUSE || this.CONTROL_PlayStatus === PlayStatus.PLAY) {
+        return true
+      }
+      return !!this.currentSong && StrUtil.isNotEmpty(this.videoUrl)
+    }
+    if (action === MusicCardActionConstants.ACTION_PREVIOUS || action === MusicCardActionConstants.ACTION_NEXT) {
+      return ArrayUtil.isNotEmpty(this.songList)
+    }
+    return true
+  }
+
+  private consumePendingMusicCardAction(): boolean {
     const pendingAction = AppStorage.get(MusicCardActionConstants.PENDING_ACTION_STORAGE_KEY) as string | undefined
     if (!pendingAction || pendingAction.length === 0) {
-      return
+      return false
+    }
+    if (!this.canConsumePendingMusicCardAction(pendingAction)) {
+      Logger.info(TAG, `skip consume pending music card action because playback not ready action=${pendingAction}`)
+      return false
     }
     AppStorage.setOrCreate(MusicCardActionConstants.PENDING_ACTION_STORAGE_KEY, '')
     if (pendingAction === MusicCardActionConstants.ACTION_PLAY_PAUSE) {
       void this.playbackController.playOrPause()
-      return
+      return true
     }
     if (pendingAction === MusicCardActionConstants.ACTION_PREVIOUS) {
       void this.playbackController.playPrevious()
-      return
+      return true
     }
     if (pendingAction === MusicCardActionConstants.ACTION_NEXT) {
       void this.playbackController.playNext()
+      return true
     }
+    return false
   }
 
   private consumePendingMusicCardOpenRequest(): void {
@@ -2318,6 +2337,7 @@ export struct LocalMusic {
         this.name = this.currentSong.name
         this.cover = this.currentSong.pixelMapPath
         AppStorage.setOrCreate('currentSong',this.currentSong) ;
+        this.consumePendingMusicCardAction()
       } else {
         this.name = '空空如也'
       }

entry/src/main/ets/widget/pages/MusicPlayerWidgetCard.ets

@@ -43,10 +43,9 @@ struct MusicPlayerWidgetCard {
   private postControlAction(action: string): void {
     Logger.info(TAG, `musicCard small postControlAction formId=${this.formId}, action=${action}`)
     postCardAction(this, {
-      action: 'call',
+      action: 'router',
       abilityName: ENTRY_ABILITY_NAME,
       params: {
-        method: MusicCardActionConstants.CALL_METHOD_HANDLE_ACTION,
         ttmusic_music_card_form_id: this.formId,
         ttmusic_music_card_action: action,
         ttmusic_music_card_source: MusicCardActionConstants.ACTION_SOURCE_WIDGET

entry/src/main/ets/widget/pages/MusicPlayerWidgetDynamicLyricCard.ets

@@ -0,0 +1,367 @@
+import { MusicCardActionConstants } from '../../common/player/MusicCardActionConstants'
+import Logger from '../../common/util/Logger'
+import {
+  clampMusicCardWidgetProgress,
+  formatMusicCardWidgetTime,
+  resolveMusicCardWidgetCoverSource
+} from '../common/MusicPlayerWidgetHelper'
+
+const dynamicLyricCardStorage: LocalStorage = new LocalStorage()
+const ENTRY_ABILITY_NAME = 'EntryAbility'
+const SLIDER_CHANGE_MODE_END = 2
+const TAG = 'MusicPlayerWidgetDynamicLyricCard'
+
+@Entry(dynamicLyricCardStorage)
+@Component
+struct MusicPlayerWidgetDynamicLyricCard {
+  @LocalStorageProp('formId') formId: string = ''
+  @LocalStorageProp('title') title: string = '未在播放'
+  @LocalStorageProp('artist') artist: string = '点击打开播放器'
+  @LocalStorageProp('coverPath') coverPath: string = ''
+  @LocalStorageProp('coverImageName') coverImageName: string = ''
+  @LocalStorageProp('hasCoverImage') hasCoverImage: boolean = false
+  @LocalStorageProp('hasSong') hasSong: boolean = false
+  @LocalStorageProp('isPlaying') isPlaying: boolean = false
+  @LocalStorageProp('currentPositionMs') @Watch('syncSliderFromPlayback') currentPositionMs: number = 0
+  @LocalStorageProp('durationMs') @Watch('syncSliderFromPlayback') durationMs: number = 0
+  @LocalStorageProp('updatedAtMs') @Watch('syncLyricDisplayFromSnapshot') updatedAtMs: number = 0
+  @LocalStorageProp('currentTimeText') currentTimeText: string = '00:00'
+  @LocalStorageProp('durationTimeText') durationTimeText: string = '00:00'
+  @LocalStorageProp('lyricLine0') lyricLine0: string = ''
+  @LocalStorageProp('lyricLine1') lyricLine1: string = '未在播放'
+  @LocalStorageProp('lyricLine2') lyricLine2: string = '点击打开播放器'
+  @LocalStorageProp('hasLyric') hasLyric: boolean = false
+
+  @State isDragging: boolean = false
+  @State dragProgressMs: number = 0
+  @State sliderProgressMs: number = 0
+  @State isChangeBg: boolean = true
+  @State displayLyricLine0: string = ''
+  @State displayLyricLine1: string = '未在播放'
+  @State displayLyricLine2: string = '点击打开播放器'
+  @State lyricTranslateY: number = 0
+  @State lyricOpacity: number = 1
+
+  aboutToAppear(): void {
+    Logger.info(TAG,
+      `musicCard dynamic lyric aboutToAppear formId=${this.formId}, title=${this.title}, artist=${this.artist}, ` +
+      `coverImageName=${this.coverImageName}, coverPath=${this.coverPath}, hasCoverImage=${this.hasCoverImage}, ` +
+      `hasSong=${this.hasSong}, isPlaying=${this.isPlaying}, currentPositionMs=${this.currentPositionMs}, ` +
+      `durationMs=${this.durationMs}, lyricLine0=${this.lyricLine0}, lyricLine1=${this.lyricLine1}, lyricLine2=${this.lyricLine2}, hasLyric=${this.hasLyric}`)
+    this.syncSliderFromPlayback()
+    this.syncLyricDisplay(false)
+  }
+
+  private syncSliderFromPlayback(): void {
+    if (this.isDragging) {
+      return
+    }
+    this.sliderProgressMs = clampMusicCardWidgetProgress(this.currentPositionMs, this.durationMs)
+  }
+
+  private postControlAction(action: string): void {
+    Logger.info(TAG, `musicCard dynamic lyric postControlAction formId=${this.formId}, action=${action}`)
+    postCardAction(this, {
+      action: 'router',
+      abilityName: ENTRY_ABILITY_NAME,
+      params: {
+        ttmusic_music_card_form_id: this.formId,
+        ttmusic_music_card_action: action,
+        ttmusic_music_card_source: MusicCardActionConstants.ACTION_SOURCE_WIDGET
+      }
+    })
+  }
+
+  private postSeekAction(positionMs: number): void {
+    Logger.info(TAG, `musicCard dynamic lyric postSeekAction formId=${this.formId}, positionMs=${positionMs}`)
+    postCardAction(this, {
+      action: 'call',
+      abilityName: ENTRY_ABILITY_NAME,
+      params: {
+        method: MusicCardActionConstants.CALL_METHOD_HANDLE_ACTION,
+        ttmusic_music_card_form_id: this.formId,
+        ttmusic_music_card_action: MusicCardActionConstants.ACTION_SEEK_TO,
+        ttmusic_music_card_seek_position_ms: `${Math.max(0, Math.floor(positionMs))}`,
+        ttmusic_music_card_source: MusicCardActionConstants.ACTION_SOURCE_WIDGET
+      }
+    })
+  }
+
+  private postRouterAction(action: string): void {
+    Logger.info(TAG, `musicCard dynamic lyric postRouterAction formId=${this.formId}, action=${action}`)
+    postCardAction(this, {
+      action: 'router',
+      abilityName: ENTRY_ABILITY_NAME,
+      params: {
+        ttmusic_music_card_form_id: this.formId,
+        ttmusic_music_card_action: action,
+        ttmusic_music_card_source: MusicCardActionConstants.ACTION_SOURCE_WIDGET
+      }
+    })
+  }
+
+  private resolveCoverSource(): string | Resource {
+    return resolveMusicCardWidgetCoverSource(this.coverImageName, this.coverPath, this.hasCoverImage)
+  }
+
+  private resolveSliderValue(): number {
+    if (this.isDragging) {
+      return this.dragProgressMs
+    }
+    return this.sliderProgressMs
+  }
+
+  private resolveDisplayLyricLine0(): string {
+    return this.lyricLine0?.trim() ?? ''
+  }
+
+  private resolveDisplayLyricLine1(): string {
+    const safeLine = this.lyricLine1?.trim() ?? ''
+    if (safeLine !== '') {
+      return safeLine
+    }
+    return this.hasSong ? this.title : '未在播放'
+  }
+
+  private resolveDisplayLyricLine2(): string {
+    return this.lyricLine2?.trim() ?? ''
+  }
+
+  private syncLyricDisplay(shouldAnimate: boolean): void {
+    const nextLine0 = this.resolveDisplayLyricLine0()
+    const nextLine1 = this.resolveDisplayLyricLine1()
+    const nextLine2 = this.resolveDisplayLyricLine2()
+    const changed = this.displayLyricLine0 !== nextLine0 ||
+      this.displayLyricLine1 !== nextLine1 ||
+      this.displayLyricLine2 !== nextLine2
+
+    if (!changed) {
+      return
+    }
+
+    this.displayLyricLine0 = nextLine0
+    this.displayLyricLine1 = nextLine1
+    this.displayLyricLine2 = nextLine2
+
+    if (!shouldAnimate) {
+      this.lyricTranslateY = 0
+      this.lyricOpacity = 1
+      return
+    }
+
+    this.lyricTranslateY = 14
+    this.lyricOpacity = 0.35
+    animateTo({ duration: 260, curve: Curve.EaseOut }, () => {
+      this.lyricTranslateY = 0
+      this.lyricOpacity = 1
+    })
+  }
+
+  private syncLyricDisplayFromSnapshot(): void {
+    this.syncLyricDisplay(true)
+  }
+
+  private resolveCurrentTimeText(): string {
+    if (this.isDragging) {
+      return formatMusicCardWidgetTime(this.dragProgressMs)
+    }
+    return this.currentTimeText
+  }
+
+  private handleSliderChange(value: number, mode: SliderChangeMode): void {
+    const nextValue = clampMusicCardWidgetProgress(value, this.durationMs)
+    if (mode !== SLIDER_CHANGE_MODE_END) {
+      Logger.info(TAG, `musicCard dynamic lyric slider dragging formId=${this.formId}, value=${nextValue}, mode=${mode}`)
+      this.isDragging = true
+      this.dragProgressMs = nextValue
+      return
+    }
+    Logger.info(TAG, `musicCard dynamic lyric slider end formId=${this.formId}, value=${nextValue}, mode=${mode}`)
+    this.dragProgressMs = nextValue
+    this.sliderProgressMs = nextValue
+    this.isDragging = false
+    this.postSeekAction(nextValue)
+  }
+
+  @Builder
+  private ControlButton(imageResource: Resource, action: string, buttonSize: number, symbolSize: number) {
+    Button({ type: ButtonType.Circle, stateEffect: true }) {
+      SymbolGlyph(imageResource)
+        .fontSize(symbolSize)
+        .fontColor([Color.White])
+        .effectStrategy(SymbolEffectStrategy.HIERARCHICAL)
+    }
+    .width(buttonSize * 1.35)
+    .height(buttonSize * 1.35)
+    .backgroundColor(Color.Transparent)
+    .onClick(() => this.postControlAction(action))
+  }
+
+  private hasCoverBackground(): boolean {
+    if (this.hasCoverImage && this.coverImageName.length > 0) {
+      return true
+    }
+    return this.coverPath.length > 0
+  }
+
+  private resolveTitleArtistText(): string {
+    const safeTitle = this.title?.trim() ?? ''
+    const safeArtist = this.artist?.trim() ?? ''
+    if (safeTitle !== '' && safeArtist !== '') {
+      return `${safeTitle} - ${safeArtist}`
+    }
+    if (safeTitle !== '') {
+      return safeTitle
+    }
+    if (safeArtist !== '') {
+      return safeArtist
+    }
+    return '未在播放'
+  }
+
+  build() {
+    Stack({ alignContent: Alignment.Center }) {
+      if (this.hasCoverBackground() && this.isChangeBg) {
+        Column()
+          .width('100%')
+          .height('100%')
+          .backgroundImage(this.resolveCoverSource())
+          .backgroundImageSize({ width: '100%' })
+          .backgroundBlurStyle(BlurStyle.BACKGROUND_ULTRA_THICK)
+      } else {
+        Column()
+          .width('100%')
+          .height('100%')
+          .linearGradient({ direction: GradientDirection.Right, colors: [
+            ['#00BC70', 0.0], ['#ff37a0fc', 1.0]] })
+      }
+
+      Column({ space: 14 }) {
+        Image(this.resolveCoverSource())
+          .width(110)
+          .height(110)
+          .borderRadius(8)
+          .objectFit(ImageFit.Cover)
+          .onClick(() => {
+            this.isChangeBg = !this.isChangeBg
+          })
+
+        Text(this.resolveTitleArtistText())
+          .fontSize(18)
+          .fontWeight(FontWeight.Bold)
+          .fontColor(Color.White)
+          .maxLines(1)
+          .textAlign(TextAlign.Center)
+          .textOverflow({ overflow: TextOverflow.Ellipsis })
+          .width('100%')
+
+        Column({ space: 6 }) {
+          Text(this.displayLyricLine0)
+            .fontSize(15)
+            .opacity(0.9)
+            .fontColor(Color.White)
+            .fontWeight(FontWeight.Medium)
+            .maxLines(1)
+            .textAlign(TextAlign.Center)
+            .textOverflow({ overflow: TextOverflow.Ellipsis })
+            .opacity(this.displayLyricLine0 === '' ? 0 : this.lyricOpacity * 0.78)
+            .translate({ x: 0, y: this.lyricTranslateY - 8 })
+            .width('100%')
+
+          Text(this.displayLyricLine1)
+            .fontSize(17)
+            .fontColor(Color.White)
+            .fontWeight(FontWeight.Bold)
+            .maxLines(1)
+            .textAlign(TextAlign.Center)
+            .textOverflow({ overflow: TextOverflow.Ellipsis })
+            .opacity(this.lyricOpacity)
+            .translate({ x: 0, y: this.lyricTranslateY })
+            .width('100%')
+
+          Text(this.displayLyricLine2)
+            .fontSize(15)
+            .fontColor(Color.White)
+            .opacity(0.9)
+            .fontWeight(FontWeight.Medium)
+            .maxLines(1)
+            .textAlign(TextAlign.Center)
+            .textOverflow({ overflow: TextOverflow.Ellipsis })
+            .opacity(this.displayLyricLine2 === '' ? 0 : this.lyricOpacity * 0.78)
+            .translate({ x: 0, y: this.lyricTranslateY + 8 })
+            .width('100%')
+        }
+        .width('100%')
+        .height(82)
+        .justifyContent(FlexAlign.Center)
+
+        Column({ space: 4 }) {
+          Slider({
+            value: this.resolveSliderValue(),
+            min: 0,
+            max: Math.max(this.durationMs, 1),
+            step: 1000,
+            style: SliderStyle.InSet
+          })
+            .width('100%')
+            .height(6)
+            .blockColor(Color.White)
+            .trackColor('#58FFFFFF')
+            .selectedColor('#FFF6EC')
+            .trackThickness(3)
+            .showSteps(false)
+            .showTips(false)
+            .enabled(this.hasSong && this.durationMs > 0)
+            .onChange((value: number, mode: SliderChangeMode) => {
+              this.handleSliderChange(value, mode)
+            })
+
+          Row() {
+            Text(this.resolveCurrentTimeText())
+              .fontSize(10)
+              .fontColor('#D8FFFFFF')
+            Text(this.durationTimeText)
+              .fontSize(10)
+              .fontColor('#D8FFFFFF')
+          }
+          .width('90%')
+          .justifyContent(FlexAlign.SpaceBetween)
+          .alignItems(VerticalAlign.Center)
+        }
+        .height(10)
+        .width('100%')
+
+        Row({ space: 2 }) {
+          this.ControlButton($r('sys.symbol.backward_end_fill'),
+            MusicCardActionConstants.ACTION_PREVIOUS, 32, 28)
+
+          Button({ type: ButtonType.Circle, stateEffect: true }) {
+            SymbolGlyph(this.isPlaying ? $r('sys.symbol.pause_fill') : $r('sys.symbol.play_fill'))
+              .fontSize(30)
+              .fontColor([Color.White])
+              .effectStrategy(SymbolEffectStrategy.HIERARCHICAL)
+          }
+          .width(36)
+          .height(36)
+          .backgroundColor(Color.Transparent)
+          .onClick(() => this.postControlAction(MusicCardActionConstants.ACTION_PLAY_PAUSE))
+
+          this.ControlButton($r('sys.symbol.forward_end_fill'),
+            MusicCardActionConstants.ACTION_PREVIOUS, 32, 28)
+        }
+        .justifyContent(FlexAlign.SpaceBetween)
+        .alignItems(VerticalAlign.Center)
+        .width('100%')
+      }
+      .width('100%')
+      .height('100%')
+      .justifyContent(FlexAlign.Center)
+      .alignItems(HorizontalAlign.Center)
+      .padding({ left: 24, right: 24, top: 20, bottom: 20 })
+    }
+    .width('100%')
+    .height('100%')
+    .clip(true)
+    .onClick(() => this.postRouterAction(MusicCardActionConstants.ACTION_OPEN_PLAYER))
+  }
+}

entry/src/main/ets/widget/pages/MusicPlayerWidgetLyricCard.ets

@@ -56,10 +56,9 @@ struct MusicPlayerWidgetLyricCard {
   private postControlAction(action: string): void {
     Logger.info(TAG, `musicCard lyric postControlAction formId=${this.formId}, action=${action}`)
     postCardAction(this, {
-      action: 'call',
+      action: 'router',
       abilityName: ENTRY_ABILITY_NAME,
       params: {
-        method: MusicCardActionConstants.CALL_METHOD_HANDLE_ACTION,
         ttmusic_music_card_form_id: this.formId,
         ttmusic_music_card_action: action,
         ttmusic_music_card_source: MusicCardActionConstants.ACTION_SOURCE_WIDGET

entry/src/main/ets/widget/pages/MusicPlayerWidgetMiniCard.ets

@@ -52,10 +52,9 @@ struct u {
   private postControlAction(action: string): void {
     Logger.info(TAG, `musicCard small postControlAction formId=${this.formId}, action=${action}`)
     postCardAction(this, {
-      action: 'call',
+      action: 'router',
       abilityName: ENTRY_ABILITY_NAME,
       params: {
-        method: MusicCardActionConstants.CALL_METHOD_HANDLE_ACTION,
         ttmusic_music_card_form_id: this.formId,
         ttmusic_music_card_action: action,
         ttmusic_music_card_source: MusicCardActionConstants.ACTION_SOURCE_WIDGET
@@ -207,7 +206,7 @@ struct u {
           .height('100%')
           .backgroundImage(this.resolveCoverSource())
           .backgroundImageSize({ width: '100%' })
-          .opacity(0.66)
+          .opacity(0.8)
       } else {
         Column()
           .width('100%')
@@ -235,7 +234,7 @@ struct u {
 
         Column({ space: 2 }) {
           Text(this.displayLyricLine1)
-            .fontSize(15)
+            .fontSize(14)
             .fontWeight(FontWeight.Bold)
             .fontColor('#D9000000')
             .maxLines(1)
@@ -258,7 +257,7 @@ struct u {
         .height(28)
         .justifyContent(FlexAlign.Center)
 
-        Row({ space: 16 }) {
+        Row({ space: 20 }) {
           this.ControlButton($r('sys.symbol.backward_end_fill'),
             MusicCardActionConstants.ACTION_PREVIOUS, 18, 18)
           this.PlayProgressButton()
@@ -266,13 +265,13 @@ struct u {
             MusicCardActionConstants.ACTION_NEXT, 18, 18)
         }
         .justifyContent(FlexAlign.Center)
-        .alignItems(VerticalAlign.Center)
+        .margin({top:10})
       }
       .width('100%')
       .height('100%')
       .alignItems(HorizontalAlign.Center)
       .justifyContent(FlexAlign.Center)
-      .padding({ left: 16, right: 16, top: 16, bottom: 14 })
+      .padding({ left: 8, right: 8, top: 8, bottom: 8 })
     }
     .width('100%')
     .height('100%')

entry/src/main/ets/widget/pages/MusicPlayerWidgetWideCard.ets

@@ -50,10 +50,9 @@ struct MusicPlayerWidgetWideCard {
   private postControlAction(action: string): void {
     Logger.info(TAG, `musicCard wide postControlAction formId=${this.formId}, action=${action}`)
     postCardAction(this, {
-      action: 'call',
+      action: 'router',
       abilityName: ENTRY_ABILITY_NAME,
       params: {
-        method: MusicCardActionConstants.CALL_METHOD_HANDLE_ACTION,
         ttmusic_music_card_form_id: this.formId,
         ttmusic_music_card_action: action,
         ttmusic_music_card_source: MusicCardActionConstants.ACTION_SOURCE_WIDGET