From 92ceab36c7a02b23cabbffab346dc09e9f92b053 Mon Sep 17 00:00:00 2001 From: NriotHrreion Date: Wed, 25 Sep 2024 23:11:06 +0800 Subject: [PATCH 1/9] chore: Upgrade umijs from v3 to v4 --- .umirc.ts | 7 ++----- package.json | 11 +++++------ 2 files changed, 7 insertions(+), 11 deletions(-) diff --git a/.umirc.ts b/.umirc.ts index f1e3452..9e42439 100644 --- a/.umirc.ts +++ b/.umirc.ts @@ -2,10 +2,7 @@ import { defineConfig } from 'umi'; export default defineConfig({ title: '李志 BB 音乐作品播放器', - nodeModulesTransform: { - type: 'none', - }, - favicon: '/favico.png', + favicons: ['/favico.png'], hash: true, history: { type: 'hash', @@ -46,5 +43,5 @@ export default defineConfig({ })); `, ], - fastRefresh: {}, + fastRefresh: true, }); diff --git a/package.json b/package.json index 3ca1562..4cc0233 100644 --- a/package.json +++ b/package.json @@ -20,10 +20,10 @@ }, "license": "MIT", "scripts": { - "start": "umi dev", - "build": "umi build", + "start": "max dev", + "build": "max build", "tw": "npx tailwindcss -i ./src/input.css -o ./public/tailwind.css --watch", - "postinstall": "umi generate tmp", + "postinstall": "max setup", "prettier": "prettier --write '**/*.{js,jsx,tsx,ts,less,md,json}'", "test": "umi-test", "test:coverage": "umi-test --coverage" @@ -45,13 +45,12 @@ "react": "17.x", "react-cmdk": "^1.3.6", "react-dom": "17.x", - "react-jinke-music-player": "^4.24.2", - "umi": "^3.5.21" + "react-jinke-music-player": "^4.24.2" }, "devDependencies": { "@types/react": "^17.0.0", "@types/react-dom": "^17.0.0", - "@umijs/preset-react": "1.x", + "@umijs/max": "^4.0.0", "@umijs/test": "^3.5.21", "lint-staged": "^10.0.7", "prettier": "^2.2.0", From 61dd16bca55bc373074a12435573bb3d518c5d27 Mon Sep 17 00:00:00 2001 From: NriotHrreion Date: Fri, 27 Sep 2024 22:24:52 +0800 Subject: [PATCH 2/9] chore: Migrate to umi v4 & fix: Some type error in editor --- .umirc.ts | 3 +++ package.json | 6 +++--- src/layouts/index.tsx | 27 +++++++++++++++++---------- src/pages/album/[id].tsx | 11 ++++++----- src/pages/index.tsx | 12 +----------- src/types.ts | 6 ++++++ tailwind.config.js | 11 +++++------ src/input.css => tailwind.css | 2 +- 8 files changed, 42 insertions(+), 36 deletions(-) create mode 100644 src/types.ts rename src/input.css => tailwind.css (64%) diff --git a/.umirc.ts b/.umirc.ts index 9e42439..37c934b 100644 --- a/.umirc.ts +++ b/.umirc.ts @@ -17,6 +17,7 @@ export default defineConfig({ content: '全网最好用的李志(逼哥)音乐作品专属播放器', }, ], + analytics: { baidu: '023e4ef604935de6708edb9e61f17191', }, @@ -43,5 +44,7 @@ export default defineConfig({ })); `, ], + fastRefresh: true, + tailwindcss: {}, }); diff --git a/package.json b/package.json index 4cc0233..370e927 100644 --- a/package.json +++ b/package.json @@ -43,7 +43,7 @@ "@ant-design/pro-layout": "^6.5.0", "hls.js": "^1.2.9", "react": "17.x", - "react-cmdk": "^1.3.6", + "react-cmdk": "^1.3.9", "react-dom": "17.x", "react-jinke-music-player": "^4.24.2" }, @@ -54,8 +54,8 @@ "@umijs/test": "^3.5.21", "lint-staged": "^10.0.7", "prettier": "^2.2.0", - "tailwindcss": "^3.1.8", + "tailwindcss": "^3", "typescript": "^4.1.2", "yorkie": "^2.0.0" } -} +} \ No newline at end of file diff --git a/src/layouts/index.tsx b/src/layouts/index.tsx index 4caa201..a955dec 100644 --- a/src/layouts/index.tsx +++ b/src/layouts/index.tsx @@ -1,16 +1,19 @@ +import type { SongList } from '@/types'; import { useEffect, useState } from 'react'; -import ReactJkMusicPlayer from 'react-jinke-music-player'; +import 'react-cmdk/dist/cmdk.css'; import CommandPalette, { filterItems, getItemIndex, useHandleOpenCommandPalette, -} from 'react-cmdk'; -import { Link } from 'umi'; +} from 'react-cmdk/src/index'; +import ReactJkMusicPlayer, { + type ReactJkMusicPlayerProps, +} from 'react-jinke-music-player'; import 'react-jinke-music-player/assets/index.css'; +import { Link, useLocation, useOutlet } from 'umi'; import './index.css'; -import 'react-cmdk/dist/cmdk.css'; -const audioLists = window.list?.map((v) => { +const audioLists = (window as unknown as { list: SongList }).list?.map((v) => { return { name: `${v.name} · ${v.artist}`.replace('专辑-', ''), musicSrc: v.url, @@ -19,7 +22,7 @@ const audioLists = window.list?.map((v) => { }; }); -const options = { +const options: ReactJkMusicPlayerProps = { audioLists, theme: 'dark', locale: 'zh_CN', @@ -33,19 +36,23 @@ const options = { showDownload: !window.location.href.includes('from=pake'), }; -export default function Layout({ children, location }) { +export default function Layout() { const [active, setActive] = useState('all'); const [page, setPage] = useState<'root' | 'albums'>('root'); const [open, setOpen] = useState(false); const [search, setSearch] = useState(''); + const location = useLocation(); + const outlet = useOutlet(); useHandleOpenCommandPalette(setOpen); useEffect(() => { + // @ts-ignore document .querySelector('.music-player-panel') .classList.add('backdrop-blur-md'); + // @ts-ignore document .querySelector('.audio-lists-panel') .classList.add('backdrop-blur-md'); @@ -176,7 +183,7 @@ export default function Layout({ children, location }) {
- {children} + {outlet}
{} - export default function (props) { const [currDownloadingName, setcurrDownloadingName] = useState(''); const artist = props.match.params.id; - const albumList = window.list.filter((v) => v.artist === artist); + const albumList = (window as unknown as { list: SongList }).list?.filter( + (v) => v.artist === artist, + ); const onClick = (name: string) => { const array = document.querySelectorAll('.audio-item'); for (let index = 0; index < array.length; index++) { const element = array[index]; - const target = element.querySelector('.player-name'); + const target = element.querySelector('.player-name') as HTMLElement; if (target?.title.includes(name)) { target.click(); } diff --git a/src/pages/index.tsx b/src/pages/index.tsx index af4a4ae..5fe44d0 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -1,4 +1,3 @@ -import { useEffect, useState } from 'react'; import { Link } from 'umi'; const LIVE = [ @@ -28,15 +27,6 @@ interface IAlbum { interface IAlbumList extends Array {} -interface ISong { - artist: string; - cover: string; - name: string; - url: string; -} - -interface ISongList extends Array {} - export default function IndexPage() { return ( <> @@ -57,7 +47,7 @@ export default function IndexPage() {
我们不能失去信仰 · 李志
- {(window.album as IAlbumList).map((v, i) => ( + {((window as any).album as IAlbumList).map((v, i) => ( Date: Fri, 27 Sep 2024 22:34:17 +0800 Subject: [PATCH 3/9] fix: Route issue --- .umirc.ts | 4 ++++ src/pages/album/{[id].tsx => index.tsx} | 9 +++++---- 2 files changed, 9 insertions(+), 4 deletions(-) rename src/pages/album/{[id].tsx => index.tsx} (97%) diff --git a/.umirc.ts b/.umirc.ts index 37c934b..3454566 100644 --- a/.umirc.ts +++ b/.umirc.ts @@ -7,6 +7,10 @@ export default defineConfig({ history: { type: 'hash', }, + routes: [ + { path: '/', component: 'index' }, + { path: '/album/:id', component: 'album/index' }, + ], metas: [ { name: 'keywords', diff --git a/src/pages/album/[id].tsx b/src/pages/album/index.tsx similarity index 97% rename from src/pages/album/[id].tsx rename to src/pages/album/index.tsx index 050eeb0..529683e 100644 --- a/src/pages/album/[id].tsx +++ b/src/pages/album/index.tsx @@ -1,7 +1,7 @@ import type { SongList } from '@/types'; import { message } from 'antd'; import { useState } from 'react'; -import { Link } from 'umi'; +import { Link, useParams } from 'umi'; const ALBUM = [ { @@ -43,9 +43,10 @@ interface ISong { url: string; } -export default function (props) { +export default function () { const [currDownloadingName, setcurrDownloadingName] = useState(''); - const artist = props.match.params.id; + const params = useParams(); + const artist = params.id as string; const albumList = (window as unknown as { list: SongList }).list?.filter( (v) => v.artist === artist, @@ -142,7 +143,7 @@ export default function (props) {
message.info('开发中！')} - className="hidden hover:text-white text-center tracking-widest py-2 px-6 rounded-full border border-solid border-gray-500 hover:bg-gray-800 cursor-pointer flex items-center" + className="hidden hover:text-white text-center tracking-widest py-2 px-6 rounded-full border border-solid border-gray-500 hover:bg-gray-800 cursor-pointer items-center" > Date: Fri, 27 Sep 2024 22:41:23 +0800 Subject: [PATCH 4/9] fix: Route issue (re) --- .umirc.ts | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/.umirc.ts b/.umirc.ts index 3454566..e3a62b4 100644 --- a/.umirc.ts +++ b/.umirc.ts @@ -9,6 +9,10 @@ export default defineConfig({ }, routes: [ { path: '/', component: 'index' }, + { path: '/about', component: 'about' }, + { path: '/download', component: 'download' }, + { path: '/star', component: 'star' }, + { path: '/video', component: 'video' }, { path: '/album/:id', component: 'album/index' }, ], metas: [ From 30e10354ffc9fea97241632ce8d53be40ba1eb7e Mon Sep 17 00:00:00 2001 From: NriotHrreion Date: Sat, 28 Sep 2024 09:45:44 +0800 Subject: [PATCH 5/9] fix: Player plays incorrect audio (#11) --- src/contexts/playerContext.ts | 12 +++++++ src/layouts/index.tsx | 23 +++++++++--- src/pages/album/index.tsx | 66 +++++++++++------------------------ src/types.ts | 7 ++-- 4 files changed, 56 insertions(+), 52 deletions(-) create mode 100644 src/contexts/playerContext.ts diff --git a/src/contexts/playerContext.ts b/src/contexts/playerContext.ts new file mode 100644 index 0000000..c2ba8c8 --- /dev/null +++ b/src/contexts/playerContext.ts @@ -0,0 +1,12 @@ +import type { SongList } from '@/types'; +import React from 'react'; +import type { ReactJkMusicPlayerInstance } from 'react-jinke-music-player'; + +interface PlayerContextType { + player: ReactJkMusicPlayerInstance | null; + songList: SongList; +} + +const PlayerContext = React.createContext(undefined!); + +export default PlayerContext; diff --git a/src/layouts/index.tsx b/src/layouts/index.tsx index a955dec..8485794 100644 --- a/src/layouts/index.tsx +++ b/src/layouts/index.tsx @@ -1,5 +1,6 @@ +import PlayerContext from '@/contexts/playerContext'; import type { SongList } from '@/types'; -import { useEffect, useState } from 'react'; +import { useEffect, useRef, useState } from 'react'; import 'react-cmdk/dist/cmdk.css'; import CommandPalette, { filterItems, @@ -7,13 +8,17 @@ import CommandPalette, { useHandleOpenCommandPalette, } from 'react-cmdk/src/index'; import ReactJkMusicPlayer, { + type ReactJkMusicPlayerAudioListProps, + type ReactJkMusicPlayerInstance, type ReactJkMusicPlayerProps, } from 'react-jinke-music-player'; import 'react-jinke-music-player/assets/index.css'; import { Link, useLocation, useOutlet } from 'umi'; import './index.css'; -const audioLists = (window as unknown as { list: SongList }).list?.map((v) => { +const songList = (window as unknown as { list: SongList }).list || []; + +const audioLists: ReactJkMusicPlayerAudioListProps[] = songList.map((v) => { return { name: `${v.name} · ${v.artist}`.replace('专辑-', ''), musicSrc: v.url, @@ -42,6 +47,7 @@ export default function Layout() { const [page, setPage] = useState<'root' | 'albums'>('root'); const [open, setOpen] = useState(false); const [search, setSearch] = useState(''); + const playerInstance = useRef(null); const location = useLocation(); const outlet = useOutlet(); @@ -229,9 +235,18 @@ export default function Layout() { />
- {outlet} + + {outlet} +
- + { + playerInstance.current = instance; + }} + /> v.artist === artist, ); - const onClick = (name: string) => { - const array = document.querySelectorAll('.audio-item'); - for (let index = 0; index < array.length; index++) { - const element = array[index]; - const target = element.querySelector('.player-name') as HTMLElement; - if (target?.title.includes(name)) { - target.click(); + if (!albumList) return <>; + + const onClick = (info: SongInfo) => { + if (!player || !player.playByIndex) return; + + for (let i = 0; i < songList.length; i++) { + if (songList[i].url === info.url) { + player.playByIndex(i); + return; } } }; @@ -124,7 +95,7 @@ export default function () {
onClick(albumList[0].name)} + onClick={() => onClick(albumList[0])} className="transition hover:text-white text-center py-2 px-6 rounded-full bg-green-500 text-white cursor-pointer hover:opacity-90 shadow-lg shadow-green-500/50 flex items-center" > {albumList.map((a, i) => ( -
+
onClick(a.name)} + onClick={() => onClick(a)} > {i + 1 > 9 ? i + 1 : '0' + (i + 1)} {a.name} @@ -197,7 +171,7 @@ export default function () {
onClick(a.name)} + onClick={() => onClick(a)} > Date: Sat, 28 Sep 2024 13:19:21 +0800 Subject: [PATCH 6/9] style: Improve code structure & introduce `react-svg` to display svg icon --- package.json | 5 +- src/assets/back.svg | 14 ++++ src/assets/download.svg | 13 ++++ src/assets/linux.svg | 16 +++++ src/assets/loading.svg | 21 ++++++ src/assets/mac.svg | 30 ++++++++ src/assets/play-large.svg | 13 ++++ src/assets/play.svg | 11 +++ src/assets/windows.svg | 14 ++++ src/components/back.tsx | 25 +++++++ src/components/downloadButton.tsx | 30 ++++++++ src/components/githubLink.tsx | 34 +++++++++ src/components/sidebarItem.tsx | 27 ++++++++ src/layouts/index.css | 2 +- src/layouts/index.tsx | 108 ++++------------------------- src/pages/about.tsx | 12 ++-- src/pages/album/index.tsx | 110 +++++++----------------------- src/pages/download.tsx | 97 ++++---------------------- src/pages/star.tsx | 2 - src/pages/video.tsx | 53 +++++--------- 20 files changed, 329 insertions(+), 308 deletions(-) create mode 100644 src/assets/back.svg create mode 100644 src/assets/download.svg create mode 100644 src/assets/linux.svg create mode 100644 src/assets/loading.svg create mode 100644 src/assets/mac.svg create mode 100644 src/assets/play-large.svg create mode 100644 src/assets/play.svg create mode 100644 src/assets/windows.svg create mode 100644 src/components/back.tsx create mode 100644 src/components/downloadButton.tsx create mode 100644 src/components/githubLink.tsx create mode 100644 src/components/sidebarItem.tsx diff --git a/package.json b/package.json index 370e927..fb9331f 100644 --- a/package.json +++ b/package.json @@ -45,7 +45,8 @@ "react": "17.x", "react-cmdk": "^1.3.9", "react-dom": "17.x", - "react-jinke-music-player": "^4.24.2" + "react-jinke-music-player": "^4.24.2", + "react-svg": "^16.1.34" }, "devDependencies": { "@types/react": "^17.0.0", @@ -58,4 +59,4 @@ "typescript": "^4.1.2", "yorkie": "^2.0.0" } -} \ No newline at end of file +} diff --git a/src/assets/back.svg b/src/assets/back.svg new file mode 100644 index 0000000..e1f895c --- /dev/null +++ b/src/assets/back.svg @@ -0,0 +1,14 @@ + + + diff --git a/src/assets/download.svg b/src/assets/download.svg new file mode 100644 index 0000000..3bde7cf --- /dev/null +++ b/src/assets/download.svg @@ -0,0 +1,13 @@ + + + diff --git a/src/assets/linux.svg b/src/assets/linux.svg new file mode 100644 index 0000000..5b33fd9 --- /dev/null +++ b/src/assets/linux.svg @@ -0,0 +1,16 @@ + + + diff --git a/src/assets/loading.svg b/src/assets/loading.svg new file mode 100644 index 0000000..a66aa3d --- /dev/null +++ b/src/assets/loading.svg @@ -0,0 +1,21 @@ + + + + + diff --git a/src/assets/mac.svg b/src/assets/mac.svg new file mode 100644 index 0000000..ba95926 --- /dev/null +++ b/src/assets/mac.svg @@ -0,0 +1,30 @@ + + + + + + + + + + + + + + diff --git a/src/assets/play-large.svg b/src/assets/play-large.svg new file mode 100644 index 0000000..c644583 --- /dev/null +++ b/src/assets/play-large.svg @@ -0,0 +1,13 @@ + + + diff --git a/src/assets/play.svg b/src/assets/play.svg new file mode 100644 index 0000000..eb37962 --- /dev/null +++ b/src/assets/play.svg @@ -0,0 +1,11 @@ + + + diff --git a/src/assets/windows.svg b/src/assets/windows.svg new file mode 100644 index 0000000..de5701c --- /dev/null +++ b/src/assets/windows.svg @@ -0,0 +1,14 @@ + + + + + + diff --git a/src/components/back.tsx b/src/components/back.tsx new file mode 100644 index 0000000..121730d --- /dev/null +++ b/src/components/back.tsx @@ -0,0 +1,25 @@ +import { ReactSVG } from 'react-svg'; +import { Link } from 'umi'; + +import BackIcon from '@/assets/back.svg'; + +interface BackButtonProps { + to: string; +} + +function Back(props: BackButtonProps) { + return ( + + + Back + + ); +} + +export default Back; diff --git a/src/components/downloadButton.tsx b/src/components/downloadButton.tsx new file mode 100644 index 0000000..2033fe7 --- /dev/null +++ b/src/components/downloadButton.tsx @@ -0,0 +1,30 @@ +import LinuxIcon from '@/assets/linux.svg'; +import MacOSIcon from '@/assets/mac.svg'; +import WindowsIcon from '@/assets/windows.svg'; +import type { ReactElement } from 'react'; +import { ReactSVG } from 'react-svg'; + +const platformMap: Map = new Map([ + ['MacOS', ], + ['Windows', ], + ['Linux', ], +]); + +interface DownloadButtonProps { + platform: 'MacOS' | 'Windows' | 'Linux'; + url: string; +} + +function DownloadButton(props: DownloadButtonProps) { + return ( + + {platformMap.get(props.platform)} +
{props.platform}
+ + ); +} + +export default DownloadButton; diff --git a/src/components/githubLink.tsx b/src/components/githubLink.tsx new file mode 100644 index 0000000..e04b3f6 --- /dev/null +++ b/src/components/githubLink.tsx @@ -0,0 +1,34 @@ +function GithubLink() { + return ( + + + + ); +} + +export default GithubLink; diff --git a/src/components/sidebarItem.tsx b/src/components/sidebarItem.tsx new file mode 100644 index 0000000..06cb841 --- /dev/null +++ b/src/components/sidebarItem.tsx @@ -0,0 +1,27 @@ +import { Link, useLocation } from 'umi'; + +interface SidebarItemProps { + emoji: string; + text: string; + to: string; +} + +function SidebarItem(props: SidebarItemProps) { + const location = useLocation(); + + return ( + + {props.emoji} + {props.text} + + ); +} + +export default SidebarItem; diff --git a/src/layouts/index.css b/src/layouts/index.css index ef62746..164f935 100644 --- a/src/layouts/index.css +++ b/src/layouts/index.css @@ -29,4 +29,4 @@ body ::-webkit-scrollbar, .audio-lists-panel-content .audio-item:active, .audio-lists-panel-content .audio-item:hover { background-color: rgba(255, 255, 255, 0.2); -} \ No newline at end of file +} diff --git a/src/layouts/index.tsx b/src/layouts/index.tsx index 8485794..8b650c7 100644 --- a/src/layouts/index.tsx +++ b/src/layouts/index.tsx @@ -1,3 +1,5 @@ +import GithubLink from '@/components/githubLink'; +import SidebarItem from '@/components/sidebarItem'; import PlayerContext from '@/contexts/playerContext'; import type { SongList } from '@/types'; import { useEffect, useRef, useState } from 'react'; @@ -13,9 +15,11 @@ import ReactJkMusicPlayer, { type ReactJkMusicPlayerProps, } from 'react-jinke-music-player'; import 'react-jinke-music-player/assets/index.css'; -import { Link, useLocation, useOutlet } from 'umi'; +import { useLocation, useOutlet } from 'umi'; import './index.css'; +import ZhuangB from '@/assets/lizhi.png'; + const songList = (window as unknown as { list: SongList }).list || []; const audioLists: ReactJkMusicPlayerAudioListProps[] = songList.map((v) => { @@ -160,80 +164,24 @@ export default function Layout() {

- - 💿专辑 - - - 🔥Live - - - 🧑自传 - - setActive('download')} - > - 📦APP - - setActive('star')} - > - 🌟赞助 - + + + + +
{/*

友情赞助

- setActive('star')} - > - 🧡好物 - +
*/}
- +
+
- - - + + - -
+ <> + + +
+ +
+ ); } diff --git a/src/pages/album/index.tsx b/src/pages/album/index.tsx index 3fa7f5d..bcfc6c0 100644 --- a/src/pages/album/index.tsx +++ b/src/pages/album/index.tsx @@ -1,8 +1,14 @@ +import Back from '@/components/back'; import PlayerContext from '@/contexts/playerContext'; import type { SongInfo, SongList } from '@/types'; -import { message } from 'antd'; import { useContext, useState } from 'react'; -import { Link, useParams } from 'umi'; +import { ReactSVG } from 'react-svg'; +import { useParams } from 'umi'; + +import DownloadIcon from '@/assets/download.svg'; +import LoadingIcon from '@/assets/loading.svg'; +import LargePlayIcon from '@/assets/play-large.svg'; +import PlayIcon from '@/assets/play.svg'; interface ISong { artist: string; @@ -58,26 +64,8 @@ export default function () { }; return ( <> - - - - - Back - + +
onClick(albumList[0])} className="transition hover:text-white text-center py-2 px-6 rounded-full bg-green-500 text-white cursor-pointer hover:opacity-90 shadow-lg shadow-green-500/50 flex items-center" > - - - + 播放全部
-
message.info('开发中！')} className="hidden hover:text-white text-center tracking-widest py-2 px-6 rounded-full border border-solid border-gray-500 hover:bg-gray-800 cursor-pointer items-center" > @@ -131,7 +108,7 @@ export default function () { /> 收藏 -
+
*/}
@@ -140,7 +117,7 @@ export default function () {
歌曲 {albumList.length}
-
message.info('开发中！')} > @@ -151,7 +128,7 @@ export default function () { onClick={() => message.info('开发中！')} > 评论 -
+ */}
@@ -164,7 +141,9 @@ export default function () { className="w-3/5 pl-2 text-white group-hover:text-green-500 cursor-pointer" onClick={() => onClick(a)} > - {i + 1 > 9 ? i + 1 : '0' + (i + 1)} + + {i + 1 > 9 ? i + 1 : '0' + (i + 1)} + {a.name}
李志
@@ -173,62 +152,19 @@ export default function () { className="cursor-pointer text-gray-500 hover:text-green-500 transition" onClick={() => onClick(a)} > - - - + handleDownload(a)} > {currDownloadingName && currDownloadingName === a.name ? ( - - - - - + ) : ( - - - + /> )} diff --git a/src/pages/download.tsx b/src/pages/download.tsx index 86738f9..498d1fe 100644 --- a/src/pages/download.tsx +++ b/src/pages/download.tsx @@ -1,92 +1,21 @@ -import React from 'react'; +import DownloadButton from '@/components/downloadButton'; function Download() { return (
diff --git a/src/pages/star.tsx b/src/pages/star.tsx index ceb690f..a851791 100644 --- a/src/pages/star.tsx +++ b/src/pages/star.tsx @@ -1,5 +1,3 @@ -import React from 'react'; - function Star() { return (
diff --git a/src/pages/video.tsx b/src/pages/video.tsx index 9b1b774..dca389d 100644 --- a/src/pages/video.tsx +++ b/src/pages/video.tsx @@ -1,6 +1,7 @@ -import { useEffect, useRef, useState } from 'react'; -import { Link } from 'umi'; +import Back from '@/components/back'; +import PlayerContext from '@/contexts/playerContext'; import Hls from 'hls.js'; +import { useContext, useEffect, useRef, useState } from 'react'; const videoList = [ { @@ -22,16 +23,19 @@ const videoList = [ ]; function Video() { - const ref = useRef(); - - const hls = useRef(null); + const videoRef = useRef(null); + const hls = useRef(null); + const { player } = useContext(PlayerContext); const [index, setIndex] = useState(2); useEffect(() => { - document.querySelector('.music-player-audio')?.pause(); - const video = ref.current; + if (!videoRef.current) return; + + player?.pause(); + const video = videoRef.current; const videoSrc = videoList[index].url; + if (Hls.isSupported()) { hls.current = new Hls(); hls.current.loadSource(videoSrc); @@ -41,44 +45,23 @@ function Video() { } }, []); - const handleSelect = (index) => { + const handleSelect = (index: number) => { + if (!hls.current || !videoRef.current) return; + setIndex(index); hls.current.loadSource(videoList[index].url); - hls.current.attachMedia(ref.current); + hls.current.attachMedia(videoRef.current); }; return ( <> - - - - - Back - + +
{/*
Live 现场
*/}
- +
{videoList.map((v, k) => ( From e5113e39796edf499104ea1bb1d1d02ab01e7e01 Mon Sep 17 00:00:00 2001 From: NriotHrreion Date: Sat, 28 Sep 2024 13:59:06 +0800 Subject: [PATCH 7/9] feat: Add detailed album info --- src/assets/albumInfo.json | 146 ++++++++++++++++++++++++++++++++++++++ src/pages/album/index.tsx | 27 +++++-- src/types.ts | 7 ++ 3 files changed, 173 insertions(+), 7 deletions(-) create mode 100644 src/assets/albumInfo.json diff --git a/src/assets/albumInfo.json b/src/assets/albumInfo.json new file mode 100644 index 0000000..7fd7d1f --- /dev/null +++ b/src/assets/albumInfo.json @@ -0,0 +1,146 @@ +[ + { + "name": "梵高先生", + "cover": "https://testingcf.jsdelivr.net/gh/nj-lizhi/song@master/audio/梵高先生/cover.png", + "year": 2005, + "publisher": "口袋唱片" + }, + { + "name": "被禁忌的游戏", + "cover": "https://testingcf.jsdelivr.net/gh/nj-lizhi/song@master/audio/被禁忌的游戏/cover.png", + "year": 2006, + "publisher": "口袋唱片" + }, + { + "name": "这个世界会好吗", + "cover": "https://testingcf.jsdelivr.net/gh/nj-lizhi/song@master/audio/这个世界会好吗/cover.png", + "year": 2006, + "publisher": "独立发行" + }, + { + "name": "工体东路没有人", + "cover": "https://testingcf.jsdelivr.net/gh/nj-lizhi/song@master/audio/工体东路没有人/cover.png", + "year": 2009, + "publisher": "独立发行" + }, + { + "name": "你好，郑州", + "cover": "https://testingcf.jsdelivr.net/gh/nj-lizhi/song@master/audio/你好，郑州/cover.png", + "year": 2010, + "publisher": "独立发行" + }, + { + "name": "我爱南京", + "cover": "https://testingcf.jsdelivr.net/gh/nj-lizhi/song@master/audio/我爱南京/cover.png", + "year": 2010, + "publisher": "独立发行" + }, + { + "name": "F", + "cover": "https://testingcf.jsdelivr.net/gh/nj-lizhi/song@master/audio/F/cover.png", + "year": 2011, + "publisher": "独立发行" + }, + { + "name": "Imagine-2011", + "cover": "https://testingcf.jsdelivr.net/gh/nj-lizhi/song@master/audio/Imagine-2011/cover.png", + "year": 2011, + "publisher": "独立发行" + }, + { + "name": "108个关键词", + "cover": "https://testingcf.jsdelivr.net/gh/nj-lizhi/song@master/audio/108个关键词/cover.png", + "year": 2012, + "publisher": "独立发行" + }, + { + "name": "勾三搭四", + "cover": "https://testingcf.jsdelivr.net/gh/nj-lizhi/song@master/audio/勾三搭四/cover.png", + "year": 2013, + "publisher": "独立发行" + }, + { + "name": "1701", + "cover": "https://testingcf.jsdelivr.net/gh/nj-lizhi/song@master/audio/1701/cover.png", + "year": 2014, + "publisher": "独立发行" + }, + { + "name": "看见", + "cover": "https://testingcf.jsdelivr.net/gh/nj-lizhi/song@master/audio/看见/cover.png", + "year": 2015, + "publisher": "独立发行" + }, + { + "name": "io", + "cover": "https://testingcf.jsdelivr.net/gh/nj-lizhi/song@master/audio/io/cover.png", + "year": 2015, + "publisher": "独立发行" + }, + { + "name": "北京不插电", + "cover": "https://testingcf.jsdelivr.net/gh/nj-lizhi/song@master/audio/北京不插电/cover.png", + "year": 2016, + "publisher": "独立发行" + }, + { + "name": "8", + "cover": "https://testingcf.jsdelivr.net/gh/nj-lizhi/song@master/audio/8/cover.png", + "year": 2016, + "publisher": "独立发行" + }, + { + "name": "在每一条伤心的应天大街上", + "cover": "https://testingcf.jsdelivr.net/gh/nj-lizhi/song@master/audio/在每一条伤心的应天大街上/cover.png", + "year": 2016, + "publisher": "独立发行" + }, + { + "name": "动静", + "cover": "https://testingcf.jsdelivr.net/gh/nj-lizhi/song@master/audio/动静/cover.png", + "year": 2016, + "publisher": "独立发行" + }, + { + "name": "家", + "cover": "https://testingcf.jsdelivr.net/gh/nj-lizhi/song@master/audio/家/cover.png", + "year": 2016, + "publisher": "独立发行" + }, + { + "name": "电声与管弦乐", + "cover": "https://testingcf.jsdelivr.net/gh/nj-lizhi/song@master/audio/电声与管弦乐/cover.png", + "year": 2017, + "publisher": "独立发行" + }, + { + "name": "电声与管弦乐II", + "cover": "https://testingcf.jsdelivr.net/gh/nj-lizhi/song@master/audio/电声与管弦乐II/cover.png", + "year": 2017, + "publisher": "独立发行" + }, + { + "name": "广场合集", + "cover": "https://testingcf.jsdelivr.net/gh/nj-lizhi/song@master/audio/广场合集/cover.png", + "year": null, + "publisher": "" + }, + { + "name": "我们也爱南京", + "cover": "https://testingcf.jsdelivr.net/gh/nj-lizhi/song@master/audio/我们也爱南京/cover.png", + "year": null, + "publisher": "" + }, + { + "name": "二零零九年十月十六日事件", + "cover": "https://testingcf.jsdelivr.net/gh/nj-lizhi/song@master/audio/二零零九年十月十六日事件/cover.png", + "year": null, + "publisher": "" + }, + { + "name": "零碎", + "cover": "https://testingcf.jsdelivr.net/gh/nj-lizhi/song@master/audio/零碎/cover.png", + "year": null, + "publisher": "" + } +] diff --git a/src/pages/album/index.tsx b/src/pages/album/index.tsx index bcfc6c0..d23d92e 100644 --- a/src/pages/album/index.tsx +++ b/src/pages/album/index.tsx @@ -1,7 +1,8 @@ +import albumInfoList from '@/assets/albumInfo.json'; import Back from '@/components/back'; import PlayerContext from '@/contexts/playerContext'; -import type { SongInfo, SongList } from '@/types'; -import { useContext, useState } from 'react'; +import type { AlbumInfo, SongInfo, SongList } from '@/types'; +import { useContext, useMemo, useState } from 'react'; import { ReactSVG } from 'react-svg'; import { useParams } from 'umi'; @@ -10,6 +11,15 @@ import LoadingIcon from '@/assets/loading.svg'; import LargePlayIcon from '@/assets/play-large.svg'; import PlayIcon from '@/assets/play.svg'; +function getAlbumInfo(name: string): AlbumInfo | null { + for (let i = 0; i < albumInfoList.length; i++) { + if (albumInfoList[i].name === name) { + return albumInfoList[i]; + } + } + return null; +} + interface ISong { artist: string; cover: string; @@ -22,6 +32,10 @@ export default function () { const { player, songList } = useContext(PlayerContext); const params = useParams(); const artist = params.id as string; + const albumInfo = useMemo( + () => getAlbumInfo(artist.replace('专辑-', '')), + [artist], + ); const albumList = (window as unknown as { list: SongList }).list?.filter( (v) => v.artist === artist, @@ -76,9 +90,8 @@ export default function () {

{artist.replace('专辑-', '')}

李志
- 2007-11-12 - 麦田音乐 - 发行 + {albumInfo?.year || '未知年份'} + {albumInfo?.publisher}
@@ -134,7 +147,7 @@ export default function () {
{albumList.map((a, i) => (
{i + 1 > 9 ? i + 1 : '0' + (i + 1)} - {a.name} + {a.name}
李志
diff --git a/src/types.ts b/src/types.ts index 9e2e5bc..e201843 100644 --- a/src/types.ts +++ b/src/types.ts @@ -7,3 +7,10 @@ export interface SongInfo { /** @see https://github.com/nj-lizhi/song/blob/main/audio/list-v2.js */ export type SongList = SongInfo[]; + +export interface AlbumInfo { + name: string; + cover: string; + year: number | null; + publisher: string; +} From 92dd1fa3a9f35c51e892b6bab468efba8fca6fe1 Mon Sep 17 00:00:00 2001 From: NriotHrreion Date: Sat, 28 Sep 2024 14:03:53 +0800 Subject: [PATCH 8/9] feat: Improve appearance --- src/components/back.tsx | 2 +- src/layouts/index.tsx | 2 +- src/pages/album/index.tsx | 10 ++++++---- 3 files changed, 8 insertions(+), 6 deletions(-) diff --git a/src/components/back.tsx b/src/components/back.tsx index 121730d..8bd082f 100644 --- a/src/components/back.tsx +++ b/src/components/back.tsx @@ -17,7 +17,7 @@ function Back(props: BackButtonProps) { src={BackIcon} className="h-4 w-4 transition transform group-hover:-translate-x-2" /> - Back + 返回 ); } diff --git a/src/layouts/index.tsx b/src/layouts/index.tsx index 8b650c7..c99c29c 100644 --- a/src/layouts/index.tsx +++ b/src/layouts/index.tsx @@ -128,7 +128,7 @@ export default function Layout() {
setOpen(true)} - className="bg-gray-900 relative pointer-events-auto cursor-pointer" + className="bg-gray-900 mb-4 relative pointer-events-auto cursor-pointer" >
-
-

{artist.replace('专辑-', '')}

-
李志
-
+
+

+ {artist.replace('专辑-', '')} +

+
李志
+
{albumInfo?.year || '未知年份'} {albumInfo?.publisher}
From d3be8d24d72314e58a40af20739445e91ca9541a Mon Sep 17 00:00:00 2001 From: NriotHrreion Date: Sat, 28 Sep 2024 14:07:02 +0800 Subject: [PATCH 9/9] fix: Change download link to the latest one --- src/pages/download.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/pages/download.tsx b/src/pages/download.tsx index 498d1fe..80d7c2e 100644 --- a/src/pages/download.tsx +++ b/src/pages/download.tsx @@ -6,15 +6,15 @@ function Download() {