TTMusic/entry/src/main/ets/widget/pages/PlayerWidgetSmall.ets

import { WidgetController } from '../../common/widget/WidgetController';

/**
 * 小尺寸播放器卡片 (2x1)
 * 显示基本播放控制和歌曲名称
 */
@Entry
@Component
struct PlayerWidgetSmall {
  @LocalStorageProp('isPlaying') isPlaying: boolean = false;
  @LocalStorageProp('songTitle') songTitle: string = '暂无播放';
  @LocalStorageProp('hasNext') hasNext: boolean = false;
  @LocalStorageProp('hasPrevious') hasPrevious: boolean = false;

  build() {
    Row() {
      // 播放控制按钮区域
      Row() {
        // 上一首按钮
        Button() {
          Image($r('app.media.ic_previous2'))
            .width(16)
            .height(16)
            .fillColor(this.hasPrevious ? '#FF007DFF' : '#66000000')
        }
        .width(32)
        .height(32)
        .backgroundColor(Color.Transparent)
        .enabled(this.hasPrevious)
        .onClick(() => {
          console.info('PlayerWidgetSmall: Previous button clicked');
          WidgetController.handlePrevSong(this);
        })

        // 播放/暂停按钮
        Button() {
          Image(this.isPlaying ? $r('app.media.hm_pause') : $r('app.media.hm_play'))
            .width(20)
            .height(20)
            .fillColor('#FF007DFF')
        }
        .width(36)
        .height(36)
        .backgroundColor('#1A007DFF')
        .borderRadius(18)
        .margin({ left: 8, right: 8 })
        .onClick(() => {
          // 添加调试日志
          console.info('PlayerWidgetSmall: Play/Pause button clicked');
          WidgetController.handlePlayPause(this);
        })

        // 下一首按钮
        Button() {
          Image($r('app.media.ic_next2'))
            .width(16)
            .height(16)
            .fillColor(this.hasNext ? '#FF007DFF' : '#66000000')
        }
        .width(32)
        .height(32)
        .backgroundColor(Color.Transparent)
        .enabled(this.hasNext)
        .onClick(() => {
          console.info('PlayerWidgetSmall: Next button clicked');
          WidgetController.handleNextSong(this);
        })
      }
      .justifyContent(FlexAlign.Center)
      .alignItems(VerticalAlign.Center)

      // 歌曲信息区域
      Column() {
        Text(this.songTitle)
          .fontSize(14)
          .fontColor('#E6000000')
          .fontWeight(FontWeight.Medium)
          .maxLines(1)
          .textOverflow({ overflow: TextOverflow.Ellipsis })
          .width('100%')
          .textAlign(TextAlign.Start)
      }
      .layoutWeight(1)
      .margin({ left: 12 })
      .alignItems(HorizontalAlign.Start)
      .justifyContent(FlexAlign.Center)
      .onClick(() => {
        WidgetController.handleOpenPlayer(this);
      })
    }
    .width('100%')
    .height('100%')
    .padding({ left: 16, right: 16, top: 8, bottom: 8 })
    .backgroundColor('#FFFFFF')
    .borderRadius(12)
    .justifyContent(FlexAlign.Start)
    .alignItems(VerticalAlign.Center)
  }


}