|
@@ -1,217 +1,107 @@
|
|
|
import { WidgetController } from '../../common/widget/WidgetController';
|
|
import { WidgetController } from '../../common/widget/WidgetController';
|
|
|
/**
|
|
/**
|
|
|
- * 小尺寸播放器卡片 (2x1)
|
|
|
|
|
- * 显示基本播放控制和歌曲名称
|
|
|
|
|
|
|
+ * 小尺寸播放器卡片 (1x2)
|
|
|
|
|
+ * 只显示播放控制按钮:上一首、播放/暂停、下一首
|
|
|
* 需求: 5.1, 1.4, 1.5
|
|
* 需求: 5.1, 1.4, 1.5
|
|
|
*/
|
|
*/
|
|
|
|
|
+
|
|
|
@Entry
|
|
@Entry
|
|
|
@Component
|
|
@Component
|
|
|
struct PlayerWidgetSmall {
|
|
struct PlayerWidgetSmall {
|
|
|
// 卡片数据属性 - 使用LocalStorageProp与FormExtensionAbility通信
|
|
// 卡片数据属性 - 使用LocalStorageProp与FormExtensionAbility通信
|
|
|
@LocalStorageProp('isPlaying') isPlaying: boolean = false;
|
|
@LocalStorageProp('isPlaying') isPlaying: boolean = false;
|
|
|
- @LocalStorageProp('songTitle') songTitle: string = '暂无播放';
|
|
|
|
|
@LocalStorageProp('hasNext') hasNext: boolean = false;
|
|
@LocalStorageProp('hasNext') hasNext: boolean = false;
|
|
|
@LocalStorageProp('hasPrevious') hasPrevious: boolean = false;
|
|
@LocalStorageProp('hasPrevious') hasPrevious: boolean = false;
|
|
|
@LocalStorageProp('isLoading') isLoading: boolean = false;
|
|
@LocalStorageProp('isLoading') isLoading: boolean = false;
|
|
|
|
|
|
|
|
- /**
|
|
|
|
|
- * 获取按钮透明度
|
|
|
|
|
- */
|
|
|
|
|
- private getButtonOpacity(enabled: boolean): number {
|
|
|
|
|
- return enabled ? 1.0 : 0.4;
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- /**
|
|
|
|
|
- * 获取按钮颜色
|
|
|
|
|
- */
|
|
|
|
|
- private getButtonColor(enabled: boolean): string {
|
|
|
|
|
- return enabled ? '#FF007DFF' : '#66000000';
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- /**
|
|
|
|
|
- * 获取播放按钮图标
|
|
|
|
|
- */
|
|
|
|
|
- private getPlayButtonIcon(): Resource {
|
|
|
|
|
- if (this.isLoading) {
|
|
|
|
|
- return $r('app.media.hm_play'); // 加载状态图标
|
|
|
|
|
- }
|
|
|
|
|
- console.log('Heanup 当前播放状态:'+this.isPlaying)
|
|
|
|
|
- return this.isPlaying ? $r('app.media.hm_pause') : $r('app.media.hm_play');
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- /**
|
|
|
|
|
- * 格式化歌曲标题显示
|
|
|
|
|
- */
|
|
|
|
|
- private getDisplayTitle(): string {
|
|
|
|
|
- if (!this.songTitle || this.songTitle.trim() === '') {
|
|
|
|
|
- return '暂无播放';
|
|
|
|
|
- }
|
|
|
|
|
- return this.songTitle;
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
build() {
|
|
build() {
|
|
|
|
|
+ // 简洁的播放控制条
|
|
|
Row() {
|
|
Row() {
|
|
|
- // 播放控制按钮区域
|
|
|
|
|
- Row() {
|
|
|
|
|
- // 上一首按钮
|
|
|
|
|
- Button() {
|
|
|
|
|
- Image($r('app.media.ic_previous2'))
|
|
|
|
|
- .width(24)
|
|
|
|
|
- .height(24)
|
|
|
|
|
- .fillColor("#FF007DFF")
|
|
|
|
|
- }
|
|
|
|
|
- .width(32)
|
|
|
|
|
- .height(32)
|
|
|
|
|
- .backgroundColor(Color.White)
|
|
|
|
|
- .enabled(!this.isLoading) // 临时启用按钮进行测试
|
|
|
|
|
- .opacity(this.hasPrevious ? 1.0 : 0.6) // 视觉上显示状态但不禁用
|
|
|
|
|
- .stateStyles({
|
|
|
|
|
- pressed: {
|
|
|
|
|
- .scale({ x: 0.95, y: 0.95 })
|
|
|
|
|
- .opacity(0.8)
|
|
|
|
|
- },
|
|
|
|
|
- normal: {
|
|
|
|
|
- .scale({ x: 1.0, y: 1.0 })
|
|
|
|
|
- .opacity(this.getButtonOpacity(this.hasPrevious))
|
|
|
|
|
- }
|
|
|
|
|
- })
|
|
|
|
|
- .onClick(() => {
|
|
|
|
|
- console.info(`Heanup PlayerWidgetSmall: Previous button clicked, hasPrevious=${this.hasPrevious}, isLoading=${this.isLoading}`);
|
|
|
|
|
- if (!this.isLoading) {
|
|
|
|
|
- console.info('Heanup PlayerWidgetSmall: Previous button action sent');
|
|
|
|
|
- postCardAction(this, {
|
|
|
|
|
- 'action': 'message',
|
|
|
|
|
- 'params': {
|
|
|
|
|
- "func":"prev_song"
|
|
|
|
|
- }
|
|
|
|
|
- });
|
|
|
|
|
- } else {
|
|
|
|
|
- console.info('Heanup PlayerWidgetSmall: Previous button disabled due to loading');
|
|
|
|
|
- }
|
|
|
|
|
- })
|
|
|
|
|
-
|
|
|
|
|
- // 播放/暂停按钮
|
|
|
|
|
- Button() {
|
|
|
|
|
- Image(this.getPlayButtonIcon())
|
|
|
|
|
- .width(20)
|
|
|
|
|
- .height(20)
|
|
|
|
|
- .fillColor('#FFFFFF')
|
|
|
|
|
- }
|
|
|
|
|
- .width(36)
|
|
|
|
|
- .height(36)
|
|
|
|
|
- .backgroundColor(this.isLoading ? '#99007DFF' : '#FF007DFF')
|
|
|
|
|
- .borderRadius(18)
|
|
|
|
|
- .margin({ left: 8, right: 8 })
|
|
|
|
|
- .enabled(!this.isLoading)
|
|
|
|
|
- .stateStyles({
|
|
|
|
|
- pressed: {
|
|
|
|
|
- .scale({ x: 0.95, y: 0.95 })
|
|
|
|
|
- .backgroundColor('#CC007DFF')
|
|
|
|
|
- },
|
|
|
|
|
- normal: {
|
|
|
|
|
- .scale({ x: 1.0, y: 1.0 })
|
|
|
|
|
- .backgroundColor(this.isLoading ? '#99007DFF' : '#FF007DFF')
|
|
|
|
|
- }
|
|
|
|
|
- })
|
|
|
|
|
- .onClick(() => {
|
|
|
|
|
- if (!this.isLoading) {
|
|
|
|
|
- console.info('Heanup PlayerWidgetSmall: Play/Pause button clicked');
|
|
|
|
|
- postCardAction(this, {
|
|
|
|
|
- 'action': 'message',
|
|
|
|
|
- 'params': {
|
|
|
|
|
- "func":"play_pause"
|
|
|
|
|
- }
|
|
|
|
|
- });
|
|
|
|
|
- }
|
|
|
|
|
- })
|
|
|
|
|
-
|
|
|
|
|
- // 下一首按钮
|
|
|
|
|
- Button() {
|
|
|
|
|
- Image($r('app.media.ic_next2'))
|
|
|
|
|
- .width(24)
|
|
|
|
|
- .height(24)
|
|
|
|
|
- .fillColor("#FF007DFF")
|
|
|
|
|
- }
|
|
|
|
|
- .width(32)
|
|
|
|
|
- .height(32)
|
|
|
|
|
- .backgroundColor(Color.White)
|
|
|
|
|
- .enabled(!this.isLoading) // 临时启用按钮进行测试
|
|
|
|
|
- .opacity(this.hasPrevious ? 1.0 : 0.6) // 视觉上显示状态但不禁用
|
|
|
|
|
- .stateStyles({
|
|
|
|
|
- pressed: {
|
|
|
|
|
- .scale({ x: 0.95, y: 0.95 })
|
|
|
|
|
- .opacity(0.8)
|
|
|
|
|
- },
|
|
|
|
|
- normal: {
|
|
|
|
|
- .scale({ x: 1.0, y: 1.0 })
|
|
|
|
|
- .opacity(this.getButtonOpacity(this.hasNext))
|
|
|
|
|
- }
|
|
|
|
|
- })
|
|
|
|
|
- .onClick(() => {
|
|
|
|
|
- console.info(`Heanup PlayerWidgetSmall: Next button clicked, hasNext=${this.hasNext}, isLoading=${this.isLoading}`);
|
|
|
|
|
- if (!this.isLoading) {
|
|
|
|
|
- console.info('Heanup PlayerWidgetSmall: Next button action sent');
|
|
|
|
|
- postCardAction(this, {
|
|
|
|
|
- 'action': 'message',
|
|
|
|
|
- 'params': {
|
|
|
|
|
- "func":"next_song"
|
|
|
|
|
- }
|
|
|
|
|
- });
|
|
|
|
|
- } else {
|
|
|
|
|
- console.info('Heanup PlayerWidgetSmall: Next button disabled due to loading');
|
|
|
|
|
- }
|
|
|
|
|
- })
|
|
|
|
|
|
|
+ // 上一首按钮
|
|
|
|
|
+ Button() {
|
|
|
|
|
+ Image($r('app.media.hm_previous'))
|
|
|
|
|
+ .width(20)
|
|
|
|
|
+ .height(20)
|
|
|
|
|
+ .fillColor('#E5FFFFFF')
|
|
|
}
|
|
}
|
|
|
- .justifyContent(FlexAlign.Center)
|
|
|
|
|
- .alignItems(VerticalAlign.Center)
|
|
|
|
|
|
|
+ .width(36)
|
|
|
|
|
+ .height(36)
|
|
|
|
|
+ .backgroundColor(Color.Transparent)
|
|
|
|
|
+ .enabled(!this.isLoading && this.hasPrevious)
|
|
|
|
|
+ .opacity(this.hasPrevious ? 1.0 : 0.5)
|
|
|
|
|
+ .onClick(() => {
|
|
|
|
|
+ console.info(`Heanup PlayerWidgetSmall: Previous button clicked`);
|
|
|
|
|
+ if (!this.isLoading && this.hasPrevious) {
|
|
|
|
|
+ postCardAction(this, {
|
|
|
|
|
+ 'action': 'message',
|
|
|
|
|
+ 'params': {
|
|
|
|
|
+ "func":"prev_song"
|
|
|
|
|
+ }
|
|
|
|
|
+ });
|
|
|
|
|
+ }
|
|
|
|
|
+ })
|
|
|
|
|
|
|
|
- // 歌曲信息区域
|
|
|
|
|
- Column() {
|
|
|
|
|
- Text(this.getDisplayTitle())
|
|
|
|
|
- .fontSize(14)
|
|
|
|
|
- .fontColor(this.songTitle === '暂无播放' ? '#99000000' : '#E6000000')
|
|
|
|
|
- .fontWeight(this.songTitle === '暂无播放' ? FontWeight.Normal : FontWeight.Medium)
|
|
|
|
|
- .maxLines(1)
|
|
|
|
|
- .textOverflow({ overflow: TextOverflow.Ellipsis })
|
|
|
|
|
- .width('100%')
|
|
|
|
|
- .textAlign(TextAlign.Start)
|
|
|
|
|
|
|
+ // 播放/暂停按钮
|
|
|
|
|
+ Button() {
|
|
|
|
|
+ SymbolGlyph(this.isPlaying ? $r('sys.symbol.pause_round_triangle_fill') : $r('sys.symbol.play_round_triangle_fill'))
|
|
|
|
|
+ .fontSize(28)
|
|
|
|
|
+ .symbolEffect(new ReplaceSymbolEffect(EffectScope.WHOLE), true)
|
|
|
|
|
+ .fontColor(['#E5FFFFFF'])
|
|
|
}
|
|
}
|
|
|
- .layoutWeight(1)
|
|
|
|
|
- .margin({ left: 12 })
|
|
|
|
|
- .alignItems(HorizontalAlign.Start)
|
|
|
|
|
- .justifyContent(FlexAlign.Center)
|
|
|
|
|
- .stateStyles({
|
|
|
|
|
- pressed: {
|
|
|
|
|
- .opacity(0.8)
|
|
|
|
|
- },
|
|
|
|
|
- normal: {
|
|
|
|
|
- .opacity(1.0)
|
|
|
|
|
|
|
+ .width(44)
|
|
|
|
|
+ .height(44)
|
|
|
|
|
+ .backgroundColor(Color.Transparent)
|
|
|
|
|
+ .margin({ left: 8, right: 8 })
|
|
|
|
|
+ .enabled(!this.isLoading)
|
|
|
|
|
+ .onClick(() => {
|
|
|
|
|
+ console.info('Heanup PlayerWidgetSmall: Play/Pause button clicked');
|
|
|
|
|
+ if (!this.isLoading) {
|
|
|
|
|
+ postCardAction(this, {
|
|
|
|
|
+ 'action': 'message',
|
|
|
|
|
+ 'params': {
|
|
|
|
|
+ "func":"play_pause"
|
|
|
|
|
+ }
|
|
|
|
|
+ });
|
|
|
}
|
|
}
|
|
|
})
|
|
})
|
|
|
- .onClick(() => {
|
|
|
|
|
- console.info('Heanup PlayerWidgetSmall: Song info area clicked');
|
|
|
|
|
- postCardAction(this, {
|
|
|
|
|
|
|
|
|
|
- 'action': 'message',
|
|
|
|
|
- 'params': {
|
|
|
|
|
- "func":"open_player"
|
|
|
|
|
- }
|
|
|
|
|
- });
|
|
|
|
|
|
|
+ // 下一首按钮
|
|
|
|
|
+ Button() {
|
|
|
|
|
+ Image($r('app.media.hm_next'))
|
|
|
|
|
+ .width(20)
|
|
|
|
|
+ .height(20)
|
|
|
|
|
+ .fillColor('#E5FFFFFF')
|
|
|
|
|
+ }
|
|
|
|
|
+ .width(36)
|
|
|
|
|
+ .height(36)
|
|
|
|
|
+ .backgroundColor(Color.Transparent)
|
|
|
|
|
+ .enabled(!this.isLoading && this.hasNext)
|
|
|
|
|
+ .opacity(this.hasNext ? 1.0 : 0.5)
|
|
|
|
|
+ .onClick(() => {
|
|
|
|
|
+ console.info(`Heanup PlayerWidgetSmall: Next button clicked`);
|
|
|
|
|
+ if (!this.isLoading && this.hasNext) {
|
|
|
|
|
+ postCardAction(this, {
|
|
|
|
|
+ 'action': 'message',
|
|
|
|
|
+ 'params': {
|
|
|
|
|
+ "func":"next_song"
|
|
|
|
|
+ }
|
|
|
|
|
+ });
|
|
|
|
|
+ }
|
|
|
})
|
|
})
|
|
|
}
|
|
}
|
|
|
.width('100%')
|
|
.width('100%')
|
|
|
.height('100%')
|
|
.height('100%')
|
|
|
- .padding({ left: 16, right: 16, top: 8, bottom: 8 })
|
|
|
|
|
- .backgroundColor('#FFFFFF')
|
|
|
|
|
- .borderRadius(12)
|
|
|
|
|
- .justifyContent(FlexAlign.Start)
|
|
|
|
|
|
|
+ .justifyContent(FlexAlign.Center)
|
|
|
.alignItems(VerticalAlign.Center)
|
|
.alignItems(VerticalAlign.Center)
|
|
|
- .shadow({
|
|
|
|
|
- radius: 8,
|
|
|
|
|
- color: '#1A000000',
|
|
|
|
|
- offsetX: 0,
|
|
|
|
|
- offsetY: 2
|
|
|
|
|
|
|
+ .backgroundColor('#FF2A2A2A')
|
|
|
|
|
+ .borderRadius(8)
|
|
|
|
|
+ .padding(8)
|
|
|
|
|
+ .onClick(() => {
|
|
|
|
|
+ console.info('Heanup PlayerWidgetSmall: Container clicked, jumping to main app');
|
|
|
|
|
+ postCardAction(this, {
|
|
|
|
|
+ 'action': 'router',
|
|
|
|
|
+ 'abilityName': 'EntryAbility'
|
|
|
|
|
+ });
|
|
|
})
|
|
})
|
|
|
- // 移除手势支持,form应用不支持复杂交互
|
|
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|