|
|
|
@ -6,7 +6,7 @@ import { secondToDate } from '@/utils/time';
|
|
|
|
|
|
|
|
|
|
|
|
import styles from './index.module.css';
|
|
|
|
import styles from './index.module.css';
|
|
|
|
|
|
|
|
|
|
|
|
import { AutoScrollContainer } from '@/components';
|
|
|
|
import { AutoScrollContainer, PlayerButton } from '@/components';
|
|
|
|
|
|
|
|
|
|
|
|
interface Props {
|
|
|
|
interface Props {
|
|
|
|
audio: SongInfo | null;
|
|
|
|
audio: SongInfo | null;
|
|
|
|
@ -48,30 +48,31 @@ export default function AudioPlayer({
|
|
|
|
};
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
return (
|
|
|
|
return (
|
|
|
|
<div className={`flex flex-row w-[1200px] pt-[29px] ${className}`}>
|
|
|
|
<div className={`flex w-[1200px] pt-[29px] ${className}`}>
|
|
|
|
{/* 专辑封面 */}
|
|
|
|
{/* 专辑封面 */}
|
|
|
|
<div className="w-[72px] h-[72px] rounded-[3px] bg-[#000]">
|
|
|
|
<div
|
|
|
|
|
|
|
|
className={`relative w-[72px] h-[72px] rounded-[3px] bg-[#000] overflow-hidden flex-shrink cursor-pointer ${styles.album_pic_overlay_expand}`}
|
|
|
|
|
|
|
|
>
|
|
|
|
{audio?.pic && (
|
|
|
|
{audio?.pic && (
|
|
|
|
<Image src={audio?.pic} alt="music" width={72} height={72} unoptimized className="w-full h-full" />
|
|
|
|
<Image src={audio?.pic} alt="music" width={72} height={72} unoptimized className="w-full h-full" />
|
|
|
|
)}
|
|
|
|
)}
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
{/* title & author */}
|
|
|
|
{/* 歌曲信息 */}
|
|
|
|
<div className="h-full ml-[27px] mr-[44px] py-[14px]">
|
|
|
|
<div className="h-full ml-[27px] mr-[44px] py-[14px]">
|
|
|
|
<AutoScrollContainer key={audio?.id} auto hover width="140px" speed={50}>
|
|
|
|
<AutoScrollContainer key={audio?.id} auto hover width="140px" speed={50}>
|
|
|
|
<div className="w-auto h-auto">
|
|
|
|
<div className="w-auto h-auto">
|
|
|
|
<p className="text-[17px] leading-[23.8px] text-[rgba(0,0,0,0.95)]">{audio?.title ?? ''}</p>
|
|
|
|
<p className="text-[17px] leading-[24px] text-base">{audio?.title ?? ''}</p>
|
|
|
|
{audio?.artist && audio?.album && (
|
|
|
|
{audio?.artist && audio?.album && (
|
|
|
|
<p className="text-[13px] leading-[18.2px] text-[rgba(0,0,0,0.7)]">{`${audio.artist}/${audio.album}`}</p>
|
|
|
|
<p className="text-[13px] leading-[18px] mt-[2px] text-[rgba(0,0,0,0.7)]">{`${audio.artist}/${audio.album}`}</p>
|
|
|
|
)}
|
|
|
|
)}
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</AutoScrollContainer>
|
|
|
|
</AutoScrollContainer>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
{/* progress bar */}
|
|
|
|
<div className="h-auto mt-[12px]">
|
|
|
|
<div className="h-full mt-[29px]">
|
|
|
|
{/* 进度条 */}
|
|
|
|
{/* bar */}
|
|
|
|
<div className="h-auto cursor-pointer w-[600px]">
|
|
|
|
<div className="h-full cursor-pointer w-[600px] h-[3px]">
|
|
|
|
|
|
|
|
<input
|
|
|
|
<input
|
|
|
|
type="range"
|
|
|
|
type="range"
|
|
|
|
value={trackProgress}
|
|
|
|
value={trackProgress}
|
|
|
|
@ -83,45 +84,41 @@ export default function AudioPlayer({
|
|
|
|
style={{ background: trackStyling }}
|
|
|
|
style={{ background: trackStyling }}
|
|
|
|
/>
|
|
|
|
/>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
{/* time */}
|
|
|
|
{/* 时间 */}
|
|
|
|
<p className="texe-[12px] leading[16.8px]">
|
|
|
|
<p className="texe-[12px] leading[17px]">
|
|
|
|
<span>{`${secondToDate(trackProgress)}`}</span>
|
|
|
|
<span>{`${secondToDate(trackProgress)}`}</span>
|
|
|
|
<span className="text-[rgba(0,0,0,0.4)]">{` /${secondToDate(duration || 0)}`}</span>
|
|
|
|
<span className="text-[rgba(0,0,0,0.4)]">{` / ${secondToDate(duration || 0)}`}</span>
|
|
|
|
</p>
|
|
|
|
</p>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
{/* control */}
|
|
|
|
{/* control */}
|
|
|
|
<div className="flex flex-row items-center">
|
|
|
|
<div className="flex items-center h-[54px]">
|
|
|
|
<button onClick={onOrder}>
|
|
|
|
{/* 播放顺序 */}
|
|
|
|
{/* 播放顺序 */}
|
|
|
|
<PlayerButton
|
|
|
|
<Image
|
|
|
|
size={28}
|
|
|
|
src={orders[order].icon}
|
|
|
|
img={orders[order].icon}
|
|
|
|
width={28}
|
|
|
|
text={orders[order].label}
|
|
|
|
height={28}
|
|
|
|
onClick={onOrder}
|
|
|
|
className="ml-[55px] mr-[60px]"
|
|
|
|
className="ml-[55px] mr-[60px]"
|
|
|
|
alt={orders[order].label}
|
|
|
|
/>
|
|
|
|
/>
|
|
|
|
|
|
|
|
</button>
|
|
|
|
|
|
|
|
{/* 上一首 */}
|
|
|
|
{/* 上一首 */}
|
|
|
|
<button onClick={onPrev}>
|
|
|
|
<PlayerButton
|
|
|
|
<Image src={'/img/audio-player/next.svg'} alt="pre" width={28} height={28} className="rotate-180" />
|
|
|
|
size={28}
|
|
|
|
</button>
|
|
|
|
img="/img/audio-player/next.svg"
|
|
|
|
|
|
|
|
text="上一首"
|
|
|
|
|
|
|
|
onClick={onPrev}
|
|
|
|
|
|
|
|
className="rotate-180"
|
|
|
|
|
|
|
|
/>
|
|
|
|
{/* 播放/暂停 */}
|
|
|
|
{/* 播放/暂停 */}
|
|
|
|
<button
|
|
|
|
<PlayerButton
|
|
|
|
className="flex justify-center items-center w-[54px] h-[54px] mx-[35px] rounded-[50%] bg-[rgba(180,67,67,1)] overflow-hidden"
|
|
|
|
size={54}
|
|
|
|
|
|
|
|
img={playStatus ? '/img/audio-player/pause.svg' : '/img/audio-player/play.svg'}
|
|
|
|
|
|
|
|
text={playStatus ? '暂停' : '播放'}
|
|
|
|
onClick={onPlay}
|
|
|
|
onClick={onPlay}
|
|
|
|
>
|
|
|
|
className="mx-[31.5px]"
|
|
|
|
<Image
|
|
|
|
/>
|
|
|
|
src={playStatus ? '/img/audio-player/pause.svg' : '/img/audio-player/play.svg'}
|
|
|
|
|
|
|
|
alt="pause"
|
|
|
|
|
|
|
|
width={28}
|
|
|
|
|
|
|
|
height={28}
|
|
|
|
|
|
|
|
/>
|
|
|
|
|
|
|
|
</button>
|
|
|
|
|
|
|
|
{/* 下一首 */}
|
|
|
|
{/* 下一首 */}
|
|
|
|
<button onClick={onNext}>
|
|
|
|
<PlayerButton size={28} img="/img/audio-player/next.svg" text="下一首" onClick={onNext} />
|
|
|
|
<Image src={'/img/audio-player/next.svg'} alt="next" width={28} height={28} />
|
|
|
|
|
|
|
|
</button>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
);
|
|
|
|
|
