@@ -51,11 +44,11 @@ const TrackList = ({
{/* Track name */}
diff --git a/packages/web/components/New/Wave.tsx b/packages/web/components/New/Wave.tsx
index 87c78eb..70f13bd 100644
--- a/packages/web/components/New/Wave.tsx
+++ b/packages/web/components/New/Wave.tsx
@@ -1,18 +1,17 @@
import { css, cx, keyframes } from '@emotion/css'
-const Wave = ({ playing }: { playing: boolean }) => {
- const wave = keyframes`
+const wave = keyframes`
0% { transform: scaleY(1) }
50% { transform: scaleY(0.2) }
100% { transform: scaleY(1)}
- `
- const animation = css`
- transform-origin: bottom;
- animation: ${wave} 1s ease-in-out infinite;
`
+const animation = css`
+ transform-origin: bottom;
+ animation: ${wave} 1s ease-in-out infinite;
+`
+const delay = ['-100ms', '-500ms', '-1200ms', '-1000ms', '-700ms']
- const delay = ['-100ms', '-500ms', '-1200ms', '-1000ms', '-700ms']
-
+const Wave = ({ playing }: { playing: boolean }) => {
return (
{[...new Array(5).keys()].map(i => (
diff --git a/packages/web/components/Player.tsx b/packages/web/components/Player.tsx
index 75a7c3f..31f6a96 100644
--- a/packages/web/components/Player.tsx
+++ b/packages/web/components/Player.tsx
@@ -17,19 +17,13 @@ import { useNavigate } from 'react-router-dom'
const PlayingTrack = () => {
const navigate = useNavigate()
- const snappedPlayer = useSnapshot(player)
- const track = useMemo(() => snappedPlayer.track, [snappedPlayer.track])
- const trackListSource = useMemo(
- () => snappedPlayer.trackListSource,
- [snappedPlayer.trackListSource]
- )
+ const { track, trackListSource, mode } = useSnapshot(player)
// Liked songs ids
const { data: userLikedSongs } = useUserLikedTracksIDs()
const mutationLikeATrack = useMutationLikeATrack()
- const hasTrackListSource =
- snappedPlayer.mode !== PlayerMode.FM && trackListSource?.type
+ const hasTrackListSource = mode !== PlayerMode.FM && trackListSource?.type
const toAlbum = () => {
const id = track?.al?.id
diff --git a/packages/web/components/TracksAlbum.tsx b/packages/web/components/TracksAlbum.tsx
index 5fb2f52..9616dcd 100644
--- a/packages/web/components/TracksAlbum.tsx
+++ b/packages/web/components/TracksAlbum.tsx
@@ -220,11 +220,7 @@ const TracksAlbum = ({
[onTrackDoubleClick]
)
- const playerSnapshot = useSnapshot(player)
- const playingTrack = useMemo(
- () => playerSnapshot.track,
- [playerSnapshot.track]
- )
+ const { track } = useSnapshot(player)
return (
@@ -255,7 +251,7 @@ const TracksAlbum = ({
onClick={handleClick}
isLiked={userLikedSongs?.ids?.includes(track.id) ?? false}
isSkeleton={false}
- isHighlight={track.id === playingTrack?.id}
+ isHighlight={track.id === track?.id}
/>
))}
diff --git a/packages/web/pages/New/Discover.tsx b/packages/web/pages/New/Discover.tsx
index a0756fe..40227de 100644
--- a/packages/web/pages/New/Discover.tsx
+++ b/packages/web/pages/New/Discover.tsx
@@ -102,7 +102,9 @@ const Discover = () => {
return (
-
+
+
+
)
}
diff --git a/packages/web/pages/New/My.tsx b/packages/web/pages/New/My.tsx
index 52d8b52..b15e085 100644
--- a/packages/web/pages/New/My.tsx
+++ b/packages/web/pages/New/My.tsx
@@ -30,12 +30,38 @@ const tabs = [
},
]
-const My = () => {
- const { data: artists } = useUserArtists()
- const { data: playlists } = useUserPlaylists()
+const Albums = () => {
const { data: albums } = useUserAlbums()
+
+ return
+}
+
+const Playlists = () => {
+ const { data: playlists } = useUserPlaylists()
+ return (
+
+ )
+}
+
+const Collections = () => {
+ // const { data: artists } = useUserArtists()
const [selectedTab, setSelectedTab] = useState(tabs[0].id)
+ return (
+
+
setSelectedTab(id)}
+ className='px-2.5 lg:px-0'
+ />
+ {selectedTab === 'albums' && }
+ {selectedTab === 'playlists' && }
+
+ )
+}
+
+const RecentlyListened = () => {
const { data: listenedRecords } = useUserListenedRecords({ type: 'week' })
const recentListenedArtistsIDs = useMemo(() => {
const artists: {
@@ -62,32 +88,22 @@ const My = () => {
}, [listenedRecords])
const { data: recentListenedArtists } = useArtists(recentListenedArtistsIDs)
+ return (
+
a.artist)}
+ placeholderRow={1}
+ title='RECENTLY LISTENED'
+ />
+ )
+}
+
+const My = () => {
return (
-
-
a.artist)}
- placeholderRow={1}
- title='RECENTLY LISTENED'
- />
-
-
- setSelectedTab(id)}
- className='px-2.5 lg:px-0'
- />
-
-
+
+
)
diff --git a/packages/web/utils/const.ts b/packages/web/utils/const.ts
index 8f1556f..aa24372 100644
--- a/packages/web/utils/const.ts
+++ b/packages/web/utils/const.ts
@@ -1 +1,8 @@
export const ease: [number, number, number, number] = [0.4, 0, 0.2, 1]
+export const breakpoint = {
+ sm: '@media (min-width: 640px)',
+ md: '@media (min-width: 768px)',
+ lg: '@media (min-width: 1024px)',
+ xl: '@media (min-width: 1280px)',
+ '2xl': '@media (min-width: 1536px)',
+}
diff --git a/packages/web/utils/player.ts b/packages/web/utils/player.ts
index 21b5dd0..35fa59c 100644
--- a/packages/web/utils/player.ts
+++ b/packages/web/utils/player.ts
@@ -72,6 +72,7 @@ export class Player {
this.state = State.Ready
this._playAudio(false) // just load the audio, not play
this._initFM()
+ this._initMediaSession()
window.ipcRenderer?.send(IpcChannels.Repeat, { mode: this._repeatMode })
}
@@ -180,7 +181,7 @@ export class Player {
_howler.pause()
}
- private _setupProgressInterval() {
+ private async _setupProgressInterval() {
this._progressInterval = setInterval(() => {
if (this.state === State.Playing) this._progress = _howler.seek()
}, 1000)
@@ -234,6 +235,7 @@ export class Player {
}
if (this.mode === Mode.TrackList) this._track = track
if (this.mode === Mode.FM) this.fmTrack = track
+ this._updateMediaSessionMetaData()
this._playAudio()
}
@@ -496,6 +498,45 @@ export class Player {
this._trackIndex = index
this._playTrack()
}
+
+ private async _initMediaSession() {
+ console.log('init')
+ if ('mediaSession' in navigator === false) return
+ navigator.mediaSession.setActionHandler('play', () => this.play())
+ navigator.mediaSession.setActionHandler('pause', () => this.pause())
+ navigator.mediaSession.setActionHandler('previoustrack', () =>
+ this.prevTrack()
+ )
+ navigator.mediaSession.setActionHandler('nexttrack', () => this.nextTrack())
+ navigator.mediaSession.setActionHandler('seekto', event => {
+ if (event.seekTime) this.progress = event.seekTime
+ })
+ }
+
+ private async _updateMediaSessionMetaData() {
+ if ('mediaSession' in navigator === false || !this.track) return
+ const track = this.track
+ const metadata = {
+ title: track.name,
+ artist: track.ar.map(a => a.name).join(', '),
+ album: track.al.name,
+ artwork: [
+ {
+ src: track.al.picUrl + '?param=256y256',
+ type: 'image/jpg',
+ sizes: '256x256',
+ },
+ {
+ src: track.al.picUrl + '?param=512y512',
+ type: 'image/jpg',
+ sizes: '512x512',
+ },
+ ],
+ length: this.progress,
+ trackId: track.id,
+ }
+ navigator.mediaSession.metadata = new window.MediaMetadata(metadata)
+ }
}
if (import.meta.env.DEV) {