|
@@ -19,6 +19,7 @@ import { resolveAudioQualityTag, Utility } from '../common/util/Utility';
|
|
|
import { Constants } from '../Constants';
|
|
import { Constants } from '../Constants';
|
|
|
import { EventConstants } from '../common/constants/EventConstants';
|
|
import { EventConstants } from '../common/constants/EventConstants';
|
|
|
import { emitter } from '@kit.BasicServicesKit';
|
|
import { emitter } from '@kit.BasicServicesKit';
|
|
|
|
|
+import { deviceInfo } from '@kit.BasicServicesKit';
|
|
|
import { setNavidromePlaylist, appendToNavidromePlaylist, setNavidromeTotalCount } from '../common/util/NavidromePlaylistStore';
|
|
import { setNavidromePlaylist, appendToNavidromePlaylist, setNavidromeTotalCount } from '../common/util/NavidromePlaylistStore';
|
|
|
import { registerLoadMoreCallback, unregisterLoadMoreCallback } from '../common/util/NavidromeRandomLoader';
|
|
import { registerLoadMoreCallback, unregisterLoadMoreCallback } from '../common/util/NavidromeRandomLoader';
|
|
|
import { navidromeApi, NavidromeSong } from '../common/network/NavidromeApi';
|
|
import { navidromeApi, NavidromeSong } from '../common/network/NavidromeApi';
|
|
@@ -36,6 +37,7 @@ import { LazyDataSource } from '../common/util/LazyDataSource';
|
|
|
import { taskpool } from '@kit.ArkTS';
|
|
import { taskpool } from '@kit.ArkTS';
|
|
|
import { SearchHistoryUtil } from '../common/util/SearchHistoryUtil';
|
|
import { SearchHistoryUtil } from '../common/util/SearchHistoryUtil';
|
|
|
import { PlayingIndicator } from './PlayingIndicator';
|
|
import { PlayingIndicator } from './PlayingIndicator';
|
|
|
|
|
+import { hdsEffect } from '@kit.UIDesignKit';
|
|
|
|
|
|
|
|
const NAVIDROME_PLAYLIST_ID = 'navidrome-playlist';
|
|
const NAVIDROME_PLAYLIST_ID = 'navidrome-playlist';
|
|
|
const NAVIDROME_SEARCH_LIMIT = 500;
|
|
const NAVIDROME_SEARCH_LIMIT = 500;
|
|
@@ -218,6 +220,8 @@ export struct RemoteMusicPage {
|
|
|
@State blurValue: number = 0 //背景模糊
|
|
@State blurValue: number = 0 //背景模糊
|
|
|
@State bgBrightness: number = 0 //背景亮度
|
|
@State bgBrightness: number = 0 //背景亮度
|
|
|
@State customizeBgPath: string | undefined = '';
|
|
@State customizeBgPath: string | undefined = '';
|
|
|
|
|
+ @State private pointLightOptions: hdsEffect.PointLightOptions | undefined = undefined
|
|
|
|
|
+ @State private activePointLightItemKey: string = ''
|
|
|
@Link mType: number;
|
|
@Link mType: number;
|
|
|
@Link offsetX: number;
|
|
@Link offsetX: number;
|
|
|
@Link isShowDrawer: boolean;
|
|
@Link isShowDrawer: boolean;
|
|
@@ -3664,6 +3668,36 @@ export struct RemoteMusicPage {
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
|
|
+ private getPointLightItemKey(prefix: string, value: string): string {
|
|
|
|
|
+ return `${prefix}_${value}`
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ private handlePointLightTouch(itemKey: string, event: TouchEvent): void {
|
|
|
|
|
+ if (deviceInfo.sdkApiVersion < 20) {
|
|
|
|
|
+ return
|
|
|
|
|
+ }
|
|
|
|
|
+ if (event.type === TouchType.Down) {
|
|
|
|
|
+ this.activePointLightItemKey = itemKey
|
|
|
|
|
+ this.pointLightOptions = {
|
|
|
|
|
+ color: this.themeColor,
|
|
|
|
|
+ intensity: 1,
|
|
|
|
|
+ height: 100
|
|
|
|
|
+ }
|
|
|
|
|
+ return
|
|
|
|
|
+ }
|
|
|
|
|
+ if ((event.type === TouchType.Up || event.type === TouchType.Cancel) && this.activePointLightItemKey === itemKey) {
|
|
|
|
|
+ this.activePointLightItemKey = ''
|
|
|
|
|
+ this.pointLightOptions = undefined
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ private getPointLightOptions(itemKey: string): hdsEffect.PointLightOptions | undefined {
|
|
|
|
|
+ if (this.activePointLightItemKey !== itemKey) {
|
|
|
|
|
+ return undefined
|
|
|
|
|
+ }
|
|
|
|
|
+ return this.pointLightOptions
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
@Builder
|
|
@Builder
|
|
|
buildContentView(){
|
|
buildContentView(){
|
|
|
// 主内容区域
|
|
// 主内容区域
|
|
@@ -3777,24 +3811,68 @@ export struct RemoteMusicPage {
|
|
|
GridItem() {
|
|
GridItem() {
|
|
|
this.buildSongItemGrid(item, index)
|
|
this.buildSongItemGrid(item, index)
|
|
|
}
|
|
}
|
|
|
|
|
+ .onTouch((event: TouchEvent) => {
|
|
|
|
|
+ this.handlePointLightTouch(this.getPointLightItemKey('remote_grid_song', item.id), event)
|
|
|
|
|
+ })
|
|
|
|
|
+ .visualEffect(deviceInfo.sdkApiVersion >= 20
|
|
|
|
|
+ ? new hdsEffect.HdsEffectBuilder()
|
|
|
|
|
+ .pointLight({
|
|
|
|
|
+ options: this.getPointLightOptions(this.getPointLightItemKey('remote_grid_song', item.id)),
|
|
|
|
|
+ illuminatedType: hdsEffect.PointLightIlluminatedType.BORDER_CONTENT
|
|
|
|
|
+ })
|
|
|
|
|
+ .buildEffect()
|
|
|
|
|
+ : undefined)
|
|
|
}, (item: VideoItem) => item.id)
|
|
}, (item: VideoItem) => item.id)
|
|
|
} else if (this.selectedTab === 1) {
|
|
} else if (this.selectedTab === 1) {
|
|
|
LazyForEach(this.artistDataSource, (artist: NavidromeRestArtist) => {
|
|
LazyForEach(this.artistDataSource, (artist: NavidromeRestArtist) => {
|
|
|
GridItem() {
|
|
GridItem() {
|
|
|
this.buildArtistItemGrid(artist)
|
|
this.buildArtistItemGrid(artist)
|
|
|
}
|
|
}
|
|
|
|
|
+ .onTouch((event: TouchEvent) => {
|
|
|
|
|
+ this.handlePointLightTouch(this.getPointLightItemKey('remote_grid_artist', artist.id), event)
|
|
|
|
|
+ })
|
|
|
|
|
+ .visualEffect(deviceInfo.sdkApiVersion >= 20
|
|
|
|
|
+ ? new hdsEffect.HdsEffectBuilder()
|
|
|
|
|
+ .pointLight({
|
|
|
|
|
+ options: this.getPointLightOptions(this.getPointLightItemKey('remote_grid_artist', artist.id)),
|
|
|
|
|
+ illuminatedType: hdsEffect.PointLightIlluminatedType.BORDER_CONTENT
|
|
|
|
|
+ })
|
|
|
|
|
+ .buildEffect()
|
|
|
|
|
+ : undefined)
|
|
|
}, (artist: NavidromeRestArtist) => artist.id)
|
|
}, (artist: NavidromeRestArtist) => artist.id)
|
|
|
} else if (this.selectedTab === 2) {
|
|
} else if (this.selectedTab === 2) {
|
|
|
LazyForEach(this.albumDataSource, (album: NavidromeRestAlbum) => {
|
|
LazyForEach(this.albumDataSource, (album: NavidromeRestAlbum) => {
|
|
|
GridItem() {
|
|
GridItem() {
|
|
|
this.buildAlbumItemGrid(album)
|
|
this.buildAlbumItemGrid(album)
|
|
|
}
|
|
}
|
|
|
|
|
+ .onTouch((event: TouchEvent) => {
|
|
|
|
|
+ this.handlePointLightTouch(this.getPointLightItemKey('remote_grid_album', album.id), event)
|
|
|
|
|
+ })
|
|
|
|
|
+ .visualEffect(deviceInfo.sdkApiVersion >= 20
|
|
|
|
|
+ ? new hdsEffect.HdsEffectBuilder()
|
|
|
|
|
+ .pointLight({
|
|
|
|
|
+ options: this.getPointLightOptions(this.getPointLightItemKey('remote_grid_album', album.id)),
|
|
|
|
|
+ illuminatedType: hdsEffect.PointLightIlluminatedType.BORDER_CONTENT
|
|
|
|
|
+ })
|
|
|
|
|
+ .buildEffect()
|
|
|
|
|
+ : undefined)
|
|
|
}, (album: NavidromeRestAlbum) => album.id)
|
|
}, (album: NavidromeRestAlbum) => album.id)
|
|
|
} else if (this.selectedTab === 3) {
|
|
} else if (this.selectedTab === 3) {
|
|
|
LazyForEach(this.playlistDataSource, (playlist: NavidromeRestPlaylist) => {
|
|
LazyForEach(this.playlistDataSource, (playlist: NavidromeRestPlaylist) => {
|
|
|
GridItem() {
|
|
GridItem() {
|
|
|
this.buildPlaylistItemGrid(playlist)
|
|
this.buildPlaylistItemGrid(playlist)
|
|
|
}
|
|
}
|
|
|
|
|
+ .onTouch((event: TouchEvent) => {
|
|
|
|
|
+ this.handlePointLightTouch(this.getPointLightItemKey('remote_grid_playlist', playlist.id), event)
|
|
|
|
|
+ })
|
|
|
|
|
+ .visualEffect(deviceInfo.sdkApiVersion >= 20
|
|
|
|
|
+ ? new hdsEffect.HdsEffectBuilder()
|
|
|
|
|
+ .pointLight({
|
|
|
|
|
+ options: this.getPointLightOptions(this.getPointLightItemKey('remote_grid_playlist', playlist.id)),
|
|
|
|
|
+ illuminatedType: hdsEffect.PointLightIlluminatedType.BORDER_CONTENT
|
|
|
|
|
+ })
|
|
|
|
|
+ .buildEffect()
|
|
|
|
|
+ : undefined)
|
|
|
}, (playlist: NavidromeRestPlaylist) => playlist.id)
|
|
}, (playlist: NavidromeRestPlaylist) => playlist.id)
|
|
|
}
|
|
}
|
|
|
|
|
|
|
@@ -4302,24 +4380,68 @@ export struct RemoteMusicPage {
|
|
|
ListItem() {
|
|
ListItem() {
|
|
|
this.buildSongItem(item, index)
|
|
this.buildSongItem(item, index)
|
|
|
}
|
|
}
|
|
|
|
|
+ .onTouch((event: TouchEvent) => {
|
|
|
|
|
+ this.handlePointLightTouch(this.getPointLightItemKey('remote_list_song', item.id), event)
|
|
|
|
|
+ })
|
|
|
|
|
+ .visualEffect(deviceInfo.sdkApiVersion >= 20
|
|
|
|
|
+ ? new hdsEffect.HdsEffectBuilder()
|
|
|
|
|
+ .pointLight({
|
|
|
|
|
+ options: this.getPointLightOptions(this.getPointLightItemKey('remote_list_song', item.id)),
|
|
|
|
|
+ illuminatedType: hdsEffect.PointLightIlluminatedType.BORDER_CONTENT
|
|
|
|
|
+ })
|
|
|
|
|
+ .buildEffect()
|
|
|
|
|
+ : undefined)
|
|
|
}, (item: VideoItem) => item.id)
|
|
}, (item: VideoItem) => item.id)
|
|
|
} else if (this.selectedTab === 1) {
|
|
} else if (this.selectedTab === 1) {
|
|
|
LazyForEach(this.artistDataSource, (artist: NavidromeRestArtist) => {
|
|
LazyForEach(this.artistDataSource, (artist: NavidromeRestArtist) => {
|
|
|
ListItem() {
|
|
ListItem() {
|
|
|
this.buildArtistItem(artist)
|
|
this.buildArtistItem(artist)
|
|
|
}
|
|
}
|
|
|
|
|
+ .onTouch((event: TouchEvent) => {
|
|
|
|
|
+ this.handlePointLightTouch(this.getPointLightItemKey('remote_list_artist', artist.id), event)
|
|
|
|
|
+ })
|
|
|
|
|
+ .visualEffect(deviceInfo.sdkApiVersion >= 20
|
|
|
|
|
+ ? new hdsEffect.HdsEffectBuilder()
|
|
|
|
|
+ .pointLight({
|
|
|
|
|
+ options: this.getPointLightOptions(this.getPointLightItemKey('remote_list_artist', artist.id)),
|
|
|
|
|
+ illuminatedType: hdsEffect.PointLightIlluminatedType.BORDER_CONTENT
|
|
|
|
|
+ })
|
|
|
|
|
+ .buildEffect()
|
|
|
|
|
+ : undefined)
|
|
|
}, (artist: NavidromeRestArtist) => artist.id)
|
|
}, (artist: NavidromeRestArtist) => artist.id)
|
|
|
} else if (this.selectedTab === 2) {
|
|
} else if (this.selectedTab === 2) {
|
|
|
LazyForEach(this.albumDataSource, (album: NavidromeRestAlbum) => {
|
|
LazyForEach(this.albumDataSource, (album: NavidromeRestAlbum) => {
|
|
|
ListItem() {
|
|
ListItem() {
|
|
|
this.buildAlbumItem(album)
|
|
this.buildAlbumItem(album)
|
|
|
}
|
|
}
|
|
|
|
|
+ .onTouch((event: TouchEvent) => {
|
|
|
|
|
+ this.handlePointLightTouch(this.getPointLightItemKey('remote_list_album', album.id), event)
|
|
|
|
|
+ })
|
|
|
|
|
+ .visualEffect(deviceInfo.sdkApiVersion >= 20
|
|
|
|
|
+ ? new hdsEffect.HdsEffectBuilder()
|
|
|
|
|
+ .pointLight({
|
|
|
|
|
+ options: this.getPointLightOptions(this.getPointLightItemKey('remote_list_album', album.id)),
|
|
|
|
|
+ illuminatedType: hdsEffect.PointLightIlluminatedType.BORDER_CONTENT
|
|
|
|
|
+ })
|
|
|
|
|
+ .buildEffect()
|
|
|
|
|
+ : undefined)
|
|
|
}, (album: NavidromeRestAlbum) => album.id)
|
|
}, (album: NavidromeRestAlbum) => album.id)
|
|
|
} else if (this.selectedTab === 3) {
|
|
} else if (this.selectedTab === 3) {
|
|
|
LazyForEach(this.playlistDataSource, (playlist: NavidromeRestPlaylist) => {
|
|
LazyForEach(this.playlistDataSource, (playlist: NavidromeRestPlaylist) => {
|
|
|
ListItem() {
|
|
ListItem() {
|
|
|
this.buildPlaylistItem(playlist)
|
|
this.buildPlaylistItem(playlist)
|
|
|
}
|
|
}
|
|
|
|
|
+ .onTouch((event: TouchEvent) => {
|
|
|
|
|
+ this.handlePointLightTouch(this.getPointLightItemKey('remote_list_playlist', playlist.id), event)
|
|
|
|
|
+ })
|
|
|
|
|
+ .visualEffect(deviceInfo.sdkApiVersion >= 20
|
|
|
|
|
+ ? new hdsEffect.HdsEffectBuilder()
|
|
|
|
|
+ .pointLight({
|
|
|
|
|
+ options: this.getPointLightOptions(this.getPointLightItemKey('remote_list_playlist', playlist.id)),
|
|
|
|
|
+ illuminatedType: hdsEffect.PointLightIlluminatedType.BORDER_CONTENT
|
|
|
|
|
+ })
|
|
|
|
|
+ .buildEffect()
|
|
|
|
|
+ : undefined)
|
|
|
}, (playlist: NavidromeRestPlaylist) => playlist.id)
|
|
}, (playlist: NavidromeRestPlaylist) => playlist.id)
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
@@ -4462,6 +4584,17 @@ export struct RemoteMusicPage {
|
|
|
}
|
|
}
|
|
|
.width('100%')
|
|
.width('100%')
|
|
|
.clickEffect({ level: ClickEffectLevel.LIGHT, scale: 0.9 })
|
|
.clickEffect({ level: ClickEffectLevel.LIGHT, scale: 0.9 })
|
|
|
|
|
+ .onTouch((event: TouchEvent) => {
|
|
|
|
|
+ this.handlePointLightTouch(this.getPointLightItemKey('remote_water_song', item.id), event)
|
|
|
|
|
+ })
|
|
|
|
|
+ .visualEffect(deviceInfo.sdkApiVersion >= 20
|
|
|
|
|
+ ? new hdsEffect.HdsEffectBuilder()
|
|
|
|
|
+ .pointLight({
|
|
|
|
|
+ options: this.getPointLightOptions(this.getPointLightItemKey('remote_water_song', item.id)),
|
|
|
|
|
+ illuminatedType: hdsEffect.PointLightIlluminatedType.BORDER_CONTENT
|
|
|
|
|
+ })
|
|
|
|
|
+ .buildEffect()
|
|
|
|
|
+ : undefined)
|
|
|
}, (item: VideoItem) => item.id)
|
|
}, (item: VideoItem) => item.id)
|
|
|
} else if (this.selectedTab === 1) {
|
|
} else if (this.selectedTab === 1) {
|
|
|
// 艺术家瀑布流
|
|
// 艺术家瀑布流
|
|
@@ -4471,6 +4604,17 @@ export struct RemoteMusicPage {
|
|
|
}
|
|
}
|
|
|
.width('100%')
|
|
.width('100%')
|
|
|
.clickEffect({ level: ClickEffectLevel.LIGHT, scale: 0.9 })
|
|
.clickEffect({ level: ClickEffectLevel.LIGHT, scale: 0.9 })
|
|
|
|
|
+ .onTouch((event: TouchEvent) => {
|
|
|
|
|
+ this.handlePointLightTouch(this.getPointLightItemKey('remote_water_artist', artist.id), event)
|
|
|
|
|
+ })
|
|
|
|
|
+ .visualEffect(deviceInfo.sdkApiVersion >= 20
|
|
|
|
|
+ ? new hdsEffect.HdsEffectBuilder()
|
|
|
|
|
+ .pointLight({
|
|
|
|
|
+ options: this.getPointLightOptions(this.getPointLightItemKey('remote_water_artist', artist.id)),
|
|
|
|
|
+ illuminatedType: hdsEffect.PointLightIlluminatedType.BORDER_CONTENT
|
|
|
|
|
+ })
|
|
|
|
|
+ .buildEffect()
|
|
|
|
|
+ : undefined)
|
|
|
}, (artist: NavidromeRestArtist) => artist.id)
|
|
}, (artist: NavidromeRestArtist) => artist.id)
|
|
|
} else if (this.selectedTab === 2) {
|
|
} else if (this.selectedTab === 2) {
|
|
|
// 专辑瀑布流
|
|
// 专辑瀑布流
|
|
@@ -4480,6 +4624,17 @@ export struct RemoteMusicPage {
|
|
|
}
|
|
}
|
|
|
.width('100%')
|
|
.width('100%')
|
|
|
.clickEffect({ level: ClickEffectLevel.LIGHT, scale: 0.9 })
|
|
.clickEffect({ level: ClickEffectLevel.LIGHT, scale: 0.9 })
|
|
|
|
|
+ .onTouch((event: TouchEvent) => {
|
|
|
|
|
+ this.handlePointLightTouch(this.getPointLightItemKey('remote_water_album', album.id), event)
|
|
|
|
|
+ })
|
|
|
|
|
+ .visualEffect(deviceInfo.sdkApiVersion >= 20
|
|
|
|
|
+ ? new hdsEffect.HdsEffectBuilder()
|
|
|
|
|
+ .pointLight({
|
|
|
|
|
+ options: this.getPointLightOptions(this.getPointLightItemKey('remote_water_album', album.id)),
|
|
|
|
|
+ illuminatedType: hdsEffect.PointLightIlluminatedType.BORDER_CONTENT
|
|
|
|
|
+ })
|
|
|
|
|
+ .buildEffect()
|
|
|
|
|
+ : undefined)
|
|
|
}, (album: NavidromeRestAlbum) => album.id)
|
|
}, (album: NavidromeRestAlbum) => album.id)
|
|
|
} else if (this.selectedTab === 3) {
|
|
} else if (this.selectedTab === 3) {
|
|
|
// 歌单瀑布流
|
|
// 歌单瀑布流
|
|
@@ -4489,6 +4644,17 @@ export struct RemoteMusicPage {
|
|
|
}
|
|
}
|
|
|
.width('100%')
|
|
.width('100%')
|
|
|
.clickEffect({ level: ClickEffectLevel.LIGHT, scale: 0.9 })
|
|
.clickEffect({ level: ClickEffectLevel.LIGHT, scale: 0.9 })
|
|
|
|
|
+ .onTouch((event: TouchEvent) => {
|
|
|
|
|
+ this.handlePointLightTouch(this.getPointLightItemKey('remote_water_playlist', playlist.id), event)
|
|
|
|
|
+ })
|
|
|
|
|
+ .visualEffect(deviceInfo.sdkApiVersion >= 20
|
|
|
|
|
+ ? new hdsEffect.HdsEffectBuilder()
|
|
|
|
|
+ .pointLight({
|
|
|
|
|
+ options: this.getPointLightOptions(this.getPointLightItemKey('remote_water_playlist', playlist.id)),
|
|
|
|
|
+ illuminatedType: hdsEffect.PointLightIlluminatedType.BORDER_CONTENT
|
|
|
|
|
+ })
|
|
|
|
|
+ .buildEffect()
|
|
|
|
|
+ : undefined)
|
|
|
}, (playlist: NavidromeRestPlaylist) => playlist.id)
|
|
}, (playlist: NavidromeRestPlaylist) => playlist.id)
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|