From 072d083be6bbfff95ba9eed7412bb38b80384b6c Mon Sep 17 00:00:00 2001 From: kfd Date: Fri, 21 Jul 2023 17:20:21 +0800 Subject: [PATCH] feat: lock a playlist to random --- src/components/g-audio.tsx | 76 ++++++++++++++++++++++++-------- src/components/s-circle.tsx | 4 +- src/components/s-dot.tsx | 4 +- src/components/s-line.tsx | 4 +- src/components/s-particle.tsx | 4 +- src/components/s-path-dot.tsx | 4 +- src/components/s-path-double.tsx | 4 +- src/components/s-path-fill.tsx | 4 +- src/components/s-path.tsx | 4 +- src/global.ts | 4 +- src/index.scss | 10 +++-- src/utils/base.ts | 2 +- 12 files changed, 76 insertions(+), 48 deletions(-) diff --git a/src/components/g-audio.tsx b/src/components/g-audio.tsx index e9cca8a..c487ac9 100644 --- a/src/components/g-audio.tsx +++ b/src/components/g-audio.tsx @@ -9,10 +9,12 @@ import SCircle from './s-circle' import SPathDouble from './s-path-double' import SDot from "./s-dot"; import SPaticle from "./s-particle"; -import { apiURL } from '@/global' +import { apiURL, DEFAULT_IMG } from '@/global' export const MusicVisualizerCtx = new MusicVisualizer() +const exampleList = [SLine, SPathDouble, SPath, SPathFill, SCircle, SPaticle, SDot, SPathDot] + export default function GAudio() { const audio = useRef(null) useEffect(() => { @@ -22,8 +24,9 @@ export default function GAudio() { const [musicName, setMusicName] = useState('Please load a music...') const [audioURL, setAudioURL] = useState() const [audioData, setAudioData] = useState([]) - const [audioImg, setAudioImg] = useState() + const [audioImg, setAudioImg] = useState(DEFAULT_IMG) const [isPlaying, setIsPlaying] = useState(false) + const [playList, setPlayList] = useState([]) const hiddenFileInput = useRef(null) @@ -47,16 +50,49 @@ export default function GAudio() { raf.current && cancelAnimationFrame(raf.current) } + + async function getPlayList() { + try { + const res = await (await fetch(`https://api.injahow.cn/meting/?type=playlist&id=8577182717`)).json() + if (res && res.length > 0) { + console.log('res') + setPlayList(res) + } + } catch { + // + } + } + useEffect(() => { + getPlayList() + }, []) + + async function handleLoadRandomMusic() { try { - const transferTarget = encodeURIComponent(`https://api.wqwlkj.cn/wqwlapi/wyy_random.php?type=json`) - const res = await fetch(`${apiURL}/api/transfer?target=${transferTarget}`, { headers: { 'content-type': 'application/json; charset=utf-8' } }) - const { data } = await res.json() - console.log('data', data) - const { name, url, artistsname, picurl } = data - setMusicName(`${name} - ${artistsname}`) - setAudioURL(url) - setAudioImg(picurl) + let musicName = '' + let musicURL = '' + let posterPic = '' + if (playList && playList.length > 0) { + const randomIdx = ~~[Math.random() * playList.length] + const { name, url, artist, pic } = playList[randomIdx] + console.log('playList[randomIdx]', playList[randomIdx]) + const { url: picURL } = await fetch(pic, { method: 'HEAD' }) + console.log('picURL', picURL) + musicName = `${name} - ${artist}` + musicURL = url + posterPic = picURL.split('?')[0] + } else { + const transferTarget = encodeURIComponent(`https://api.wqwlkj.cn/wqwlapi/wyy_random.php?type=json`) + const res = await fetch(`${apiURL}/api/transfer?target=${transferTarget}`, { headers: { 'content-type': 'application/json; charset=utf-8' } }) + const { data } = await res.json() + const { name, url, artistsname, picurl } = data + musicName = `${name} - ${artistsname}` + musicURL = url + posterPic = picurl + } + setMusicName(musicName) + setAudioURL(musicURL) + setAudioImg(posterPic) pause() } catch(e) { console.error(e) @@ -90,14 +126,18 @@ export default function GAudio() {
- - - - - - - - + { + exampleList.map((Example, index) => { + return ( +
+
+ +
+ +
+ ) + }) + } { Array.from({length: 5}).map((item,index) => { return
diff --git a/src/components/s-circle.tsx b/src/components/s-circle.tsx index 4297090..87ecd04 100644 --- a/src/components/s-circle.tsx +++ b/src/components/s-circle.tsx @@ -155,8 +155,6 @@ export default function SCircle(props: SComponentProps) { useAudioImg(canvas, circle, props.isPlaying, props.audioImg) return ( -
-
-
+
) } \ No newline at end of file diff --git a/src/components/s-dot.tsx b/src/components/s-dot.tsx index 9a909e5..9e4faf9 100644 --- a/src/components/s-dot.tsx +++ b/src/components/s-dot.tsx @@ -113,8 +113,6 @@ export default function SDot(props: SComponentProps) { useAudioImg(canvas, circle, props.isPlaying, props.audioImg) return ( -
-
-
+
) } \ No newline at end of file diff --git a/src/components/s-line.tsx b/src/components/s-line.tsx index e6168a1..a21f311 100644 --- a/src/components/s-line.tsx +++ b/src/components/s-line.tsx @@ -73,8 +73,6 @@ export default function SLine(props: SComponentProps) { useAudioImg(canvas, circle, props.isPlaying, props.audioImg) return ( -
-
-
+
) } \ No newline at end of file diff --git a/src/components/s-particle.tsx b/src/components/s-particle.tsx index 1aeb99b..c776c83 100644 --- a/src/components/s-particle.tsx +++ b/src/components/s-particle.tsx @@ -148,8 +148,6 @@ export default function SPaticle(props: SComponentProps) { useAudioImg(canvas, circle, props.isPlaying, props.audioImg) return ( -
-
-
+
) } \ No newline at end of file diff --git a/src/components/s-path-dot.tsx b/src/components/s-path-dot.tsx index 10f959a..b7a61f1 100644 --- a/src/components/s-path-dot.tsx +++ b/src/components/s-path-dot.tsx @@ -104,8 +104,6 @@ export default function SPathDot(props: SComponentProps) { useAudioImg(canvas, circle, props.isPlaying, props.audioImg) return ( -
-
-
+
) } \ No newline at end of file diff --git a/src/components/s-path-double.tsx b/src/components/s-path-double.tsx index e1d0d57..43e290a 100644 --- a/src/components/s-path-double.tsx +++ b/src/components/s-path-double.tsx @@ -97,8 +97,6 @@ export default function SPath(props: SComponentProps) { useAudioImg(canvas, circle, props.isPlaying, props.audioImg) return ( -
-
-
+
) } \ No newline at end of file diff --git a/src/components/s-path-fill.tsx b/src/components/s-path-fill.tsx index 2fa12b3..03cecfa 100644 --- a/src/components/s-path-fill.tsx +++ b/src/components/s-path-fill.tsx @@ -83,8 +83,6 @@ export default function SLine(props: SComponentProps) { useAudioImg(canvas, circle, props.isPlaying, props.audioImg) return ( -
-
-
+
) } \ No newline at end of file diff --git a/src/components/s-path.tsx b/src/components/s-path.tsx index 15230b6..7139e8e 100644 --- a/src/components/s-path.tsx +++ b/src/components/s-path.tsx @@ -82,8 +82,6 @@ export default function SPath(props: SComponentProps) { useAudioImg(canvas, circle, props.isPlaying, props.audioImg) return ( -
-
-
+
) } \ No newline at end of file diff --git a/src/global.ts b/src/global.ts index d919cd8..0cd1855 100644 --- a/src/global.ts +++ b/src/global.ts @@ -1 +1,3 @@ -export const apiURL = (import.meta as any).env.PROD ? 'https://kongfandong.cn' : '/api'; \ No newline at end of file +export const apiURL = (import.meta as any).env.PROD ? 'https://kongfandong.cn' : '/api'; + +export const DEFAULT_IMG = `https://dogefs.s3.ladydaily.com/~/source/unsplash/photo-1459749411175-04bf5292ceea?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=320&h=320&q=80` \ No newline at end of file diff --git a/src/index.scss b/src/index.scss index fc2d107..e53bf73 100644 --- a/src/index.scss +++ b/src/index.scss @@ -78,16 +78,18 @@ ul, li { box-shadow: 0 0 10px #eee; overflow: hidden; margin: 12px; - &:before { - content: ''; + .img-bg-wrapper { position: absolute; top: 0; left: 0; right: 0; bottom: 0; - background: url(https://source.unsplash.com/random/300x300?Nature); - filter: blur(40px); z-index: 1; + img { + width: 100%; + height: 100%; + filter: blur(40px); + } } .s-canvas-wrapper { position: absolute; diff --git a/src/utils/base.ts b/src/utils/base.ts index f1323a4..365498c 100644 --- a/src/utils/base.ts +++ b/src/utils/base.ts @@ -31,7 +31,7 @@ export function getImageCircle(canvas: Canvas, { x, y, r, shadowColor }: ImageCi width: 2 * r, height: 2 * r, // img: `https://source.unsplash.com/random/${2 * r}x${2 * r}?Nature` - img: `https://howdz.deno.dev/unsplash/random?keyword=Nature&${2 * r}x${2 * r}` + // img: `https://howdz.deno.dev/unsplash/random?keyword=Nature&${2 * r}x${2 * r}` } }) shape.setClip({