{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/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 setOpen(true)}
- className="bg-gray-900 relative pointer-events-auto cursor-pointer"
+ className="bg-gray-900 mb-4 relative pointer-events-auto cursor-pointer"
>
- })
+ 
+
+
- {children}
+
+ {outlet}
+
-
+
+
+
);
}
diff --git a/src/pages/album/[id].tsx b/src/pages/album/[id].tsx
deleted file mode 100644
index 41254c9..0000000
--- a/src/pages/album/[id].tsx
+++ /dev/null
@@ -1,267 +0,0 @@
-import { Link } from 'umi';
-import { message } from 'antd';
-import { useState } from 'react';
-
-const ALBUM = [
- {
- title: '被禁忌的游戏',
- },
- {
- title: '这个世界会好吗',
- },
- {
- title: '梵高先生',
- },
- {
- title: '我爱南京',
- },
- {
- title: '你好，郑州',
- },
- {
- title: '1701',
- },
- {
- title: 'F',
- },
- {
- title: '这个世界会好吗',
- },
- {
- title: '8',
- },
- {
- title: '在每一条伤心的应天大街上',
- },
-];
-
-interface ISong {
- artist: string;
- cover: string;
- name: string;
- url: string;
-}
-
-interface ISongList extends Array
- 
-
-
-
-
- {artist.replace('专辑-', '')}
-李志
-
- 2007-11-12
- 麦田音乐
- 发行
-
-
-
-
- onClick(albumList[0].name)}
- 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 flex items-center"
- >
-
- 收藏
-
-
-
-
-
- 歌曲 {albumList.length}
-
- message.info('开发中！')}
- >
- 专辑信息
-
- message.info('开发中！')}
- >
- 评论
-
-
- {albumList.map((a, i) => (
-
-
-
-
- ))}
- onClick(a.name)}
- >
- {i + 1 > 9 ? i + 1 : '0' + (i + 1)}
- {a.name}
-
- 李志
-
- onClick(a.name)}
- >
-
-
- handleDownload(a)}
- >
- {currDownloadingName && currDownloadingName === a.name ? (
-
- ) : (
-
- )}
-
-
- -
- - ); -} diff --git a/src/pages/album/index.tsx b/src/pages/album/index.tsx new file mode 100644 index 0000000..2cf93d2 --- /dev/null +++ b/src/pages/album/index.tsx @@ -0,0 +1,194 @@ +import albumInfoList from '@/assets/albumInfo.json'; +import Back from '@/components/back'; +import PlayerContext from '@/contexts/playerContext'; +import type { AlbumInfo, SongInfo, SongList } from '@/types'; +import { useContext, useMemo, useState } from 'react'; +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'; + +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; + name: string; + url: string; +} + +export default function () { + const [currDownloadingName, setcurrDownloadingName] = useState(''); + 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, + ); + + 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; + } + } + }; + + const handleDownload = async ({ name, url }: ISong) => { + setcurrDownloadingName(name); + try { + let res = await fetch(url); + let blob = await res.blob(); + const a = document.createElement('a'); + document.body.appendChild(a); + a.style.display = 'none'; + // 使用获取到的blob对象创建的url + const targetUrl = window.URL.createObjectURL(blob); + a.href = targetUrl; + // 指定下载的文件名 + a.download = name; + a.click(); + document.body.removeChild(a); + // 移除blob对象的url + window.URL.revokeObjectURL(url); + } catch (e) { + alert(`下载音乐: "${name}" 失败`); + } + setcurrDownloadingName(''); + }; + return ( + <> +
+
+
+
+
+
+ + {artist.replace('专辑-', '')} +
+李志
+
+ {albumInfo?.year || '未知年份'}
+ {albumInfo?.publisher}
+
+
+
+
+ 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"
+ >
+
+ 收藏
+
*/}
+
+
+
+
+ 歌曲 {albumList.length}
+
+ {/* message.info('开发中！')}
+ >
+ 专辑信息
+
+ message.info('开发中！')}
+ >
+ 评论
+
*/}
+
+ {albumList.map((a, i) => (
+
+
+
+
+ ))}
+ onClick(a)}
+ >
+
+ {i + 1 > 9 ? i + 1 : '0' + (i + 1)}
+
+ {a.name}
+
+ 李志
+
+ onClick(a)}
+ >
+
+ +
+ + ); +} diff --git a/src/pages/download.tsx b/src/pages/download.tsx index 86738f9..80d7c2e 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/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) => (
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
{/*
Live 现场
*/}
-
+
{videoList.map((v, k) => (
diff --git a/src/types.ts b/src/types.ts
new file mode 100644
index 0000000..e201843
--- /dev/null
+++ b/src/types.ts
@@ -0,0 +1,16 @@
+export interface SongInfo {
+ name: string;
+ artist: string;
+ url: string;
+ cover: string;
+}
+
+/** @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;
+}
diff --git a/tailwind.config.js b/tailwind.config.js
index f43c0b9..9cfd53f 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,8 +1,7 @@
-/** @type {import('tailwindcss').Config} */
module.exports = {
- content: ['./src/**/*.{html,ejs,js,tsx,ts}'],
- theme: {
- extend: {},
- },
- plugins: [],
+ content: [
+ './src/pages/**/*.tsx',
+ './src/components/**/*.tsx',
+ './src/layouts/**/*.tsx',
+ ],
};
diff --git a/src/input.css b/tailwind.css
similarity index 64%
rename from src/input.css
rename to tailwind.css
index bd6213e..b5c61c9 100644
--- a/src/input.css
+++ b/tailwind.css
@@ -1,3 +1,3 @@
@tailwind base;
@tailwind components;
-@tailwind utilities;
\ No newline at end of file
+@tailwind utilities;