|
|
@@ -0,0 +1,282 @@
|
|
|
+import { MusicCardActionConstants } from '../../common/player/MusicCardActionConstants'
|
|
|
+import Logger from '../../common/util/Logger'
|
|
|
+import {
|
|
|
+ clampMusicCardWidgetProgress,
|
|
|
+ resolveMusicCardWidgetCoverSource
|
|
|
+} from '../common/MusicPlayerWidgetHelper'
|
|
|
+
|
|
|
+const cardStorage: LocalStorage = new LocalStorage()
|
|
|
+const ENTRY_ABILITY_NAME = 'EntryAbility'
|
|
|
+const TAG = 'MusicPlayerWidgetMiniCard'
|
|
|
+
|
|
|
+@Entry(cardStorage)
|
|
|
+@Component
|
|
|
+struct u {
|
|
|
+ @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('lyricLine1') lyricLine1: string = ''
|
|
|
+ @LocalStorageProp('lyricLine2') lyricLine2: string = ''
|
|
|
+ @LocalStorageProp('hasLyric') hasLyric: boolean = false
|
|
|
+ @State isChangeBg: boolean = true
|
|
|
+ @State sliderProgressMs: number = 0
|
|
|
+ @State displayLyricLine1: string = ''
|
|
|
+ @State displayLyricLine2: string = ''
|
|
|
+ @State lyricTranslateY: number = 0
|
|
|
+ @State lyricOpacity: number = 1
|
|
|
+
|
|
|
+ aboutToAppear(): void {
|
|
|
+ Logger.info(TAG,
|
|
|
+ `musicCard small 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}, lyricLine1=${this.lyricLine1}, lyricLine2=${this.lyricLine2}, hasLyric=${this.hasLyric}`)
|
|
|
+ this.syncSliderFromPlayback()
|
|
|
+ this.syncLyricDisplay(false)
|
|
|
+ }
|
|
|
+
|
|
|
+ private syncSliderFromPlayback(): void {
|
|
|
+ this.sliderProgressMs = clampMusicCardWidgetProgress(this.currentPositionMs, this.durationMs)
|
|
|
+ }
|
|
|
+
|
|
|
+ private postControlAction(action: string): void {
|
|
|
+ Logger.info(TAG, `musicCard small postControlAction formId=${this.formId}, action=${action}`)
|
|
|
+ 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: action,
|
|
|
+ ttmusic_music_card_source: MusicCardActionConstants.ACTION_SOURCE_WIDGET
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
+ private postRouterAction(action: string): void {
|
|
|
+ Logger.info(TAG, `musicCard small 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 resolveProgressValue(): number {
|
|
|
+ if (this.durationMs <= 0) {
|
|
|
+ return 0
|
|
|
+ }
|
|
|
+ return Math.min(100, Math.max(0, Math.floor(this.sliderProgressMs * 100 / this.durationMs)))
|
|
|
+ }
|
|
|
+
|
|
|
+ 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 '未在播放'
|
|
|
+ }
|
|
|
+
|
|
|
+ private resolvePlayPauseIcon(): Resource {
|
|
|
+ return this.isPlaying ? $r('sys.symbol.pause_fill') : $r('sys.symbol.play_fill')
|
|
|
+ }
|
|
|
+
|
|
|
+ private resolveDisplayLyricLine1(): string {
|
|
|
+ if (!this.hasLyric) {
|
|
|
+ return ''
|
|
|
+ }
|
|
|
+ return this.lyricLine1?.trim() ?? ''
|
|
|
+ }
|
|
|
+
|
|
|
+ private resolveDisplayLyricLine2(): string {
|
|
|
+ if (!this.hasLyric) {
|
|
|
+ return ''
|
|
|
+ }
|
|
|
+ return this.lyricLine2?.trim() ?? ''
|
|
|
+ }
|
|
|
+
|
|
|
+ private syncLyricDisplay(shouldAnimate: boolean): void {
|
|
|
+ const nextLine1 = this.resolveDisplayLyricLine1()
|
|
|
+ const nextLine2 = this.resolveDisplayLyricLine2()
|
|
|
+ const changed = this.displayLyricLine1 !== nextLine1 || this.displayLyricLine2 !== nextLine2
|
|
|
+ if (!changed) {
|
|
|
+ return
|
|
|
+ }
|
|
|
+
|
|
|
+ this.displayLyricLine1 = nextLine1
|
|
|
+ this.displayLyricLine2 = nextLine2
|
|
|
+
|
|
|
+ if (!shouldAnimate) {
|
|
|
+ this.lyricTranslateY = 0
|
|
|
+ this.lyricOpacity = 1
|
|
|
+ return
|
|
|
+ }
|
|
|
+
|
|
|
+ this.lyricTranslateY = 10
|
|
|
+ this.lyricOpacity = 0.35
|
|
|
+ animateTo({ duration: 220, curve: Curve.EaseOut }, () => {
|
|
|
+ this.lyricTranslateY = 0
|
|
|
+ this.lyricOpacity = 1
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
+ private syncLyricDisplayFromSnapshot(): void {
|
|
|
+ this.syncLyricDisplay(true)
|
|
|
+ }
|
|
|
+
|
|
|
+ @Builder
|
|
|
+ private ControlButton(imageResource: Resource, action: string, buttonSize: number, symbolSize: number) {
|
|
|
+ Button() {
|
|
|
+ SymbolGlyph(imageResource)
|
|
|
+ .fontSize(symbolSize)
|
|
|
+ .fontColor([Color.Black])
|
|
|
+ .effectStrategy(SymbolEffectStrategy.HIERARCHICAL)
|
|
|
+ }
|
|
|
+ .width(buttonSize * 1.35)
|
|
|
+ .height(buttonSize * 1.35)
|
|
|
+ .backgroundColor(Color.Transparent)
|
|
|
+ .type(ButtonType.Circle)
|
|
|
+ .stateEffect(true)
|
|
|
+ .onClick(() => this.postControlAction(action))
|
|
|
+ }
|
|
|
+
|
|
|
+ @Builder
|
|
|
+ private PlayProgressButton() {
|
|
|
+ Stack({ alignContent: Alignment.Center }) {
|
|
|
+ Progress({ value: this.resolveProgressValue(), total: 100, type: ProgressType.Ring })
|
|
|
+ .width(34)
|
|
|
+ .height(34)
|
|
|
+ .color(Color.Black)
|
|
|
+ .style({ strokeWidth: 2 })
|
|
|
+
|
|
|
+ Button() {
|
|
|
+ SymbolGlyph(this.resolvePlayPauseIcon())
|
|
|
+ .fontSize(19)
|
|
|
+ .fontColor([Color.Black])
|
|
|
+ .effectStrategy(SymbolEffectStrategy.HIERARCHICAL)
|
|
|
+ }
|
|
|
+ .width(34)
|
|
|
+ .height(34)
|
|
|
+ .type(ButtonType.Circle)
|
|
|
+ .backgroundColor('#4DFFFFFF')
|
|
|
+ .stateEffect(false)
|
|
|
+ .onClick(() => this.postControlAction(MusicCardActionConstants.ACTION_PLAY_PAUSE))
|
|
|
+ }
|
|
|
+ .width(34)
|
|
|
+ .height(34)
|
|
|
+ }
|
|
|
+
|
|
|
+ private hasCoverBackground(): boolean {
|
|
|
+ if (this.hasCoverImage && this.coverImageName.length > 0) {
|
|
|
+ return true;
|
|
|
+ }
|
|
|
+ return this.coverPath.length > 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ build() {
|
|
|
+ Stack() {
|
|
|
+
|
|
|
+ if (this.hasCoverBackground()&&this.isChangeBg) {
|
|
|
+ Column()
|
|
|
+ .width('100%')
|
|
|
+ .height('100%')
|
|
|
+ .backgroundImage(this.resolveCoverSource())
|
|
|
+ .backgroundImageSize({ width: '100%' })
|
|
|
+ .opacity(0.66)
|
|
|
+ } else {
|
|
|
+ Column()
|
|
|
+ .width('100%')
|
|
|
+ .height('100%')
|
|
|
+ .linearGradient( { direction: GradientDirection.Right, colors:[
|
|
|
+ ['#90EE90 ',0.0],['#F4D7C8',1.0]]})
|
|
|
+ }
|
|
|
+
|
|
|
+ Column({ space: 5 }) {
|
|
|
+ Text(this.title)
|
|
|
+ .fontSize(15)
|
|
|
+ .fontWeight(FontWeight.Bold)
|
|
|
+ .fontColor(Color.Black)
|
|
|
+ .maxLines(1)
|
|
|
+ .textAlign(TextAlign.Center)
|
|
|
+ .textOverflow({ overflow: TextOverflow.Ellipsis })
|
|
|
+
|
|
|
+ Text(this.artist)
|
|
|
+ .fontSize(14)
|
|
|
+ .fontWeight(FontWeight.Bold)
|
|
|
+ .fontColor('#B3000000')
|
|
|
+ .maxLines(1)
|
|
|
+ .textAlign(TextAlign.Center)
|
|
|
+ .textOverflow({ overflow: TextOverflow.Ellipsis })
|
|
|
+
|
|
|
+ Column({ space: 2 }) {
|
|
|
+ Text(this.displayLyricLine1)
|
|
|
+ .fontSize(15)
|
|
|
+ .fontWeight(FontWeight.Bold)
|
|
|
+ .fontColor('#D9000000')
|
|
|
+ .maxLines(1)
|
|
|
+ .textAlign(TextAlign.Center)
|
|
|
+ .textOverflow({ overflow: TextOverflow.Ellipsis })
|
|
|
+ .opacity(this.displayLyricLine1 === '' ? 0 : this.lyricOpacity)
|
|
|
+ .translate({ x: 0, y: this.lyricTranslateY })
|
|
|
+
|
|
|
+ Text(this.displayLyricLine2)
|
|
|
+ .fontSize(13)
|
|
|
+ .fontWeight(FontWeight.Medium)
|
|
|
+ .fontColor('#D9000000')
|
|
|
+ .maxLines(1)
|
|
|
+ .textAlign(TextAlign.Center)
|
|
|
+ .textOverflow({ overflow: TextOverflow.Ellipsis })
|
|
|
+ .opacity(this.displayLyricLine2 === '' ? 0 : this.lyricOpacity * 0.82)
|
|
|
+ .translate({ x: 0, y: this.lyricTranslateY + 4 })
|
|
|
+ }
|
|
|
+ .width('100%')
|
|
|
+ .height(28)
|
|
|
+ .justifyContent(FlexAlign.Center)
|
|
|
+
|
|
|
+ Row({ space: 16 }) {
|
|
|
+ this.ControlButton($r('sys.symbol.backward_end_fill'),
|
|
|
+ MusicCardActionConstants.ACTION_PREVIOUS, 18, 18)
|
|
|
+ this.PlayProgressButton()
|
|
|
+ this.ControlButton($r('sys.symbol.forward_end_fill'),
|
|
|
+ MusicCardActionConstants.ACTION_NEXT, 18, 18)
|
|
|
+ }
|
|
|
+ .justifyContent(FlexAlign.Center)
|
|
|
+ .alignItems(VerticalAlign.Center)
|
|
|
+ }
|
|
|
+ .width('100%')
|
|
|
+ .height('100%')
|
|
|
+ .alignItems(HorizontalAlign.Center)
|
|
|
+ .justifyContent(FlexAlign.Center)
|
|
|
+ .padding({ left: 16, right: 16, top: 16, bottom: 14 })
|
|
|
+ }
|
|
|
+ .width('100%')
|
|
|
+ .height('100%')
|
|
|
+ .clip(true)
|
|
|
+ .onClick(() => this.postRouterAction(MusicCardActionConstants.ACTION_OPEN_PLAYER))
|
|
|
+ }
|
|
|
+}
|
onecold