From e9d82dd792f85df2ad54e5eb2ba08beb52fb4e9a Mon Sep 17 00:00:00 2001 From: qier222 Date: Sat, 14 May 2022 14:39:10 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E5=A2=9E=E5=8A=A0=E4=B8=80=E4=BA=9B?= =?UTF-8?q?=E6=96=B0=E7=BB=84=E4=BB=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/web/assets/icons/back.svg | 4 +- packages/web/assets/icons/discovery.svg | 3 + packages/web/assets/icons/explore.svg | 3 + packages/web/assets/icons/forward.svg | 4 +- packages/web/assets/icons/home.svg | 3 - packages/web/assets/icons/lyrics.svg | 7 +- packages/web/assets/icons/music-library.svg | 11 -- packages/web/assets/icons/my.svg | 3 + packages/web/assets/icons/podcast.svg | 6 - packages/web/assets/icons/search.svg | 5 +- .../web/components/NowPlaying.stories.tsx | 9 +- packages/web/components/NowPlaying.tsx | 24 +-- packages/web/components/Sidebar.stories.tsx | 16 ++ packages/web/components/Sidebar.tsx | 122 +++------------ packages/web/components/Topbar.stories.tsx | 16 ++ packages/web/components/Topbar.tsx | 142 +++++------------- packages/web/styles/global.scss | 2 +- 17 files changed, 124 insertions(+), 256 deletions(-) create mode 100644 packages/web/assets/icons/discovery.svg create mode 100644 packages/web/assets/icons/explore.svg delete mode 100644 packages/web/assets/icons/home.svg delete mode 100644 packages/web/assets/icons/music-library.svg create mode 100644 packages/web/assets/icons/my.svg delete mode 100644 packages/web/assets/icons/podcast.svg create mode 100644 packages/web/components/Sidebar.stories.tsx create mode 100644 packages/web/components/Topbar.stories.tsx diff --git a/packages/web/assets/icons/back.svg b/packages/web/assets/icons/back.svg index e9db64e..0f038c4 100644 --- a/packages/web/assets/icons/back.svg +++ b/packages/web/assets/icons/back.svg @@ -1,3 +1,3 @@ - - + + diff --git a/packages/web/assets/icons/discovery.svg b/packages/web/assets/icons/discovery.svg new file mode 100644 index 0000000..99a2524 --- /dev/null +++ b/packages/web/assets/icons/discovery.svg @@ -0,0 +1,3 @@ + + + diff --git a/packages/web/assets/icons/explore.svg b/packages/web/assets/icons/explore.svg new file mode 100644 index 0000000..b783d72 --- /dev/null +++ b/packages/web/assets/icons/explore.svg @@ -0,0 +1,3 @@ + + + diff --git a/packages/web/assets/icons/forward.svg b/packages/web/assets/icons/forward.svg index 8c82ea7..efc99f1 100644 --- a/packages/web/assets/icons/forward.svg +++ b/packages/web/assets/icons/forward.svg @@ -1,3 +1,3 @@ - - + + diff --git a/packages/web/assets/icons/home.svg b/packages/web/assets/icons/home.svg deleted file mode 100644 index 74fc468..0000000 --- a/packages/web/assets/icons/home.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/packages/web/assets/icons/lyrics.svg b/packages/web/assets/icons/lyrics.svg index 431edd7..5005b02 100644 --- a/packages/web/assets/icons/lyrics.svg +++ b/packages/web/assets/icons/lyrics.svg @@ -1,6 +1,3 @@ - - - - - + + diff --git a/packages/web/assets/icons/music-library.svg b/packages/web/assets/icons/music-library.svg deleted file mode 100644 index 21fc10b..0000000 --- a/packages/web/assets/icons/music-library.svg +++ /dev/null @@ -1,11 +0,0 @@ - - - - - - - - - - - diff --git a/packages/web/assets/icons/my.svg b/packages/web/assets/icons/my.svg new file mode 100644 index 0000000..ee6335c --- /dev/null +++ b/packages/web/assets/icons/my.svg @@ -0,0 +1,3 @@ + + + diff --git a/packages/web/assets/icons/podcast.svg b/packages/web/assets/icons/podcast.svg deleted file mode 100644 index e44cff4..0000000 --- a/packages/web/assets/icons/podcast.svg +++ /dev/null @@ -1,6 +0,0 @@ - - - - - - diff --git a/packages/web/assets/icons/search.svg b/packages/web/assets/icons/search.svg index 6d12cdc..5da399d 100644 --- a/packages/web/assets/icons/search.svg +++ b/packages/web/assets/icons/search.svg @@ -1,4 +1,3 @@ - - - + + diff --git a/packages/web/components/NowPlaying.stories.tsx b/packages/web/components/NowPlaying.stories.tsx index cad111a..7be7980 100644 --- a/packages/web/components/NowPlaying.stories.tsx +++ b/packages/web/components/NowPlaying.stories.tsx @@ -1,13 +1,10 @@ import React from 'react' import { ComponentStory, ComponentMeta } from '@storybook/react' -import { NowPlaying } from './NowPlaying' +import NowPlaying from './NowPlaying' export default { title: 'NowPlaying', component: NowPlaying, - argTypes: { - backgroundColor: { control: 'color' }, - }, parameters: { viewport: { defaultViewport: 'iphone8p', @@ -18,7 +15,3 @@ export default { const Template: ComponentStory = args => export const Primary = Template.bind({}) -Primary.args = { - primary: true, - label: 'NowPlaying', -} diff --git a/packages/web/components/NowPlaying.tsx b/packages/web/components/NowPlaying.tsx index cf082f0..7413172 100644 --- a/packages/web/components/NowPlaying.tsx +++ b/packages/web/components/NowPlaying.tsx @@ -2,7 +2,7 @@ import React from 'react' import cx from 'classnames' import SvgIcon from './SvgIcon' -export const NowPlaying = () => { +const NowPlaying = () => { return (
{/* Cover */} @@ -38,10 +38,12 @@ export const NowPlaying = () => { {/* Controls */}
- +
- +
) } + +export default NowPlaying diff --git a/packages/web/components/Sidebar.stories.tsx b/packages/web/components/Sidebar.stories.tsx new file mode 100644 index 0000000..4525c7a --- /dev/null +++ b/packages/web/components/Sidebar.stories.tsx @@ -0,0 +1,16 @@ +import React from 'react' +import { ComponentStory, ComponentMeta } from '@storybook/react' +import Sidebar from './Sidebar' + +export default { + title: 'Sidebar', + component: Sidebar, +} as ComponentMeta + +const Template: ComponentStory = args => ( +
+ +
+) + +export const Primary = Template.bind({}) diff --git a/packages/web/components/Sidebar.tsx b/packages/web/components/Sidebar.tsx index 1582457..648e68d 100644 --- a/packages/web/components/Sidebar.tsx +++ b/packages/web/components/Sidebar.tsx @@ -1,107 +1,29 @@ -import { NavLink } from 'react-router-dom' -import SvgIcon from './SvgIcon' -import useUserPlaylists from '@/web/hooks/useUserPlaylists' -import { scrollToTop } from '@/web/utils/common' -import { prefetchPlaylist } from '@/web/hooks/usePlaylist' -import { player } from '@/web/store' -import { Mode, TrackListSourceType } from '@/web/utils/player' +import React from 'react' import cx from 'classnames' -import { useMemo } from 'react' -import { useSnapshot } from 'valtio' - -const primaryTabs = [ - { - name: '主页', - icon: 'home', - route: '/', - }, - { - name: '播客', - icon: 'podcast', - route: '/podcast', - }, - { - name: '音乐库', - icon: 'music-library', - route: '/library', - }, -] as const - -const PrimaryTabs = () => { - return ( -
-
- {primaryTabs.map(tab => ( - scrollToTop()} - key={tab.route} - to={tab.route} - className={({ isActive }) => - cx( - 'btn-hover-animation mx-3 flex cursor-default items-center rounded-lg px-3 py-2 transition-colors duration-200 after:scale-[0.97] after:bg-black/[.06] dark:after:bg-white/20', - !isActive && 'text-gray-700 dark:text-white', - isActive && 'text-brand-500 ' - ) - } - > - - {tab.name} - - ))} - -
-
- ) -} - -const Playlists = () => { - const { data: playlists } = useUserPlaylists() - const playerSnapshot = useSnapshot(player) - const currentPlaylistID = useMemo( - () => playerSnapshot.trackListSource?.id, - [playerSnapshot.trackListSource] - ) - const playlistMode = useMemo( - () => playerSnapshot.trackListSource?.type, - [playerSnapshot.trackListSource] - ) - const mode = useMemo(() => playerSnapshot.mode, [playerSnapshot.mode]) - - return ( -
- {playlists?.playlist?.map(playlist => ( - prefetchPlaylist({ id: playlist.id })} - key={playlist.id} - onClick={() => scrollToTop()} - to={`/playlist/${playlist.id}`} - className={({ isActive }: { isActive: boolean }) => - cx( - 'btn-hover-animation line-clamp-1 my-px mx-3 flex cursor-default items-center justify-between rounded-lg px-3 py-[0.38rem] text-sm text-black opacity-70 transition-colors duration-200 after:scale-[0.97] after:bg-black/[.06] dark:text-white dark:after:bg-white/20', - isActive && 'after:scale-100 after:opacity-100' - ) - } - > - {playlist.name} - {playlistMode === TrackListSourceType.Playlist && - mode === Mode.TrackList && - currentPlaylistID === playlist.id && ( - - )} - - ))} -
- ) -} +import SvgIcon from './SvgIcon' const Sidebar = () => { return ( -