From a31dbd7b694faa210b25bff3d3b99d63cf72c289 Mon Sep 17 00:00:00 2001
From: kfd <kfd_personal@163.com>
Date: Fri, 10 Feb 2023 11:25:49 +0800
Subject: [PATCH] feat: add hooks useAudioImg, update random music api

---
 src/components/g-audio.tsx       | 29 ++++++++++++++++-------------
 src/components/props.d.ts        |  5 +++++
 src/components/s-circle.tsx      | 17 ++++-------------
 src/components/s-dot.tsx         | 19 ++++---------------
 src/components/s-line.tsx        | 17 +++--------------
 src/components/s-particle.tsx    | 17 ++++-------------
 src/components/s-path-dot.tsx    | 17 +++--------------
 src/components/s-path-double.tsx | 17 +++--------------
 src/components/s-path-fill.tsx   | 17 +++--------------
 src/components/s-path.tsx        | 17 +++--------------
 src/hooks/useAudioImg.ts         | 21 +++++++++++++++++++++
 src/utils/base.ts                |  4 +++-
 vite.config.ts                   |  3 ++-
 13 files changed, 74 insertions(+), 126 deletions(-)
 create mode 100644 src/components/props.d.ts
 create mode 100644 src/hooks/useAudioImg.ts

diff --git a/src/components/g-audio.tsx b/src/components/g-audio.tsx
index 0f747b9..e9cca8a 100644
--- a/src/components/g-audio.tsx
+++ b/src/components/g-audio.tsx
@@ -12,6 +12,7 @@ import SPaticle from "./s-particle";
 import { apiURL } from '@/global'
 
 export const MusicVisualizerCtx = new MusicVisualizer()
+
 export default function GAudio() {
   const audio = useRef<HTMLAudioElement>(null)
   useEffect(() => {
@@ -21,6 +22,7 @@ export default function GAudio() {
   const [musicName, setMusicName] = useState('Please load a music...')
   const [audioURL, setAudioURL] = useState<string>()
   const [audioData, setAudioData] = useState<number[]>([])
+  const [audioImg, setAudioImg] = useState<string>()
   const [isPlaying, setIsPlaying] = useState(false)
 
   const hiddenFileInput = useRef<HTMLInputElement>(null)
@@ -47,13 +49,14 @@ export default function GAudio() {
 
   async function handleLoadRandomMusic() {
     try {
-      const res1 = await fetch('https://api.uomg.com/api/rand.music?sort=%E7%83%AD%E6%AD%8C%E6%A6%9C&format=json')
-      const { data } = await res1.json()
+      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
-      const res2 = await fetch(`${apiURL}/api/neteaseMusic?target=${url}`)
-      const { url: redirect } = await res2.json()
       setMusicName(`${name} - ${artistsname}`)
-      setAudioURL(redirect.replace('http:', ''))
+      setAudioURL(url)
+      setAudioImg(picurl)
       pause()
     } catch(e) {
       console.error(e)
@@ -87,14 +90,14 @@ export default function GAudio() {
           <audio controls onPlay={play} onPause={pause} ref={audio} src={audioURL} crossOrigin="anonymous"></audio>
         </div>
         <div className={style.exampleWrapper}>
-          <SLine isPlaying={isPlaying} data={audioData} />
-          <SPathDouble isPlaying={isPlaying} data={audioData} />
-          <SPath isPlaying={isPlaying} data={audioData} />
-          <SPathFill isPlaying={isPlaying} data={audioData} />
-          <SCircle isPlaying={isPlaying} data={audioData} />
-          <SPaticle isPlaying={isPlaying} data={audioData} />
-          <SDot isPlaying={isPlaying} data={audioData} />
-          <SPathDot isPlaying={isPlaying} data={audioData} />
+          <SLine isPlaying={isPlaying} data={audioData} audioImg={audioImg}/>
+          <SPathDouble isPlaying={isPlaying} data={audioData} audioImg={audioImg}/>
+          <SPath isPlaying={isPlaying} data={audioData} audioImg={audioImg}/>
+          <SPathFill isPlaying={isPlaying} data={audioData} audioImg={audioImg}/>
+          <SCircle isPlaying={isPlaying} data={audioData} audioImg={audioImg}/>
+          <SPaticle isPlaying={isPlaying} data={audioData} audioImg={audioImg}/>
+          <SDot isPlaying={isPlaying} data={audioData} audioImg={audioImg}/>
+          <SPathDot isPlaying={isPlaying} data={audioData} audioImg={audioImg}/>
           {
             Array.from({length: 5}).map((item,index) => {
               return <div key={index} className="s-module-fake"></div>
diff --git a/src/components/props.d.ts b/src/components/props.d.ts
new file mode 100644
index 0000000..ef10603
--- /dev/null
+++ b/src/components/props.d.ts
@@ -0,0 +1,5 @@
+interface SComponentProps {
+  isPlaying: boolean;
+  data: number[];
+  audioImg?: string;
+}
\ No newline at end of file
diff --git a/src/components/s-circle.tsx b/src/components/s-circle.tsx
index fc6074b..4297090 100644
--- a/src/components/s-circle.tsx
+++ b/src/components/s-circle.tsx
@@ -3,13 +3,9 @@ import { Canvas, IShape } from '@antv/g-canvas';
 import { getCirclePath } from '../utils'
 import { getImageCircle } from '../utils/base';
 import { X, Y, R } from '../utils/constanst'
+import useAudioImg from "@/hooks/useAudioImg";
 
-interface SCircleProps {
-  isPlaying: boolean;
-  data: number[];
-}
-
-export default function SCircle(props: SCircleProps) {
+export default function SCircle(props: SComponentProps) {
   const LINE_COLOR = '#fff'
   const DOT_COLOR = '#e9dcf7'
   const DOT_R = 5
@@ -154,15 +150,10 @@ export default function SCircle(props: SCircleProps) {
 
   useEffect(() => {
     isPlaying.current = props.isPlaying
-    setTimeout(() => {
-      if (props.isPlaying) {
-        circle.current?.resumeAnimate()
-      } else {
-        circle.current?.pauseAnimate()
-      }
-    })
   }, [props.isPlaying])
 
+  useAudioImg(canvas, circle, props.isPlaying, props.audioImg)
+
   return (
     <div className="s-model">
       <div id="SCircle" className="s-canvas-wrapper"></div>
diff --git a/src/components/s-dot.tsx b/src/components/s-dot.tsx
index 0aa192d..9a909e5 100644
--- a/src/components/s-dot.tsx
+++ b/src/components/s-dot.tsx
@@ -3,13 +3,10 @@ import { Canvas } from '@antv/g-canvas';
 // import { formatToTransit } from '../utils'
 import { IElement, IShape } from "@antv/g-canvas/lib/types";
 import { getImageCircle } from '../utils/base';
-import { X, Y, R } from '../utils/constanst'
-interface SDotProps {
-  isPlaying: boolean;
-  data: number[];
-}
+import { X, Y, R } from '../utils/constanst';
+import useAudioImg from "@/hooks/useAudioImg";
 
-export default function SDot(props: SDotProps) {
+export default function SDot(props: SComponentProps) {
   const POINT_NUM = 64
   const OFFSET = 10
   const DOT_R = 2
@@ -113,15 +110,7 @@ export default function SDot(props: SDotProps) {
     })
   }, [])
 
-  useEffect(() => {
-    setTimeout(() => {
-      if (props.isPlaying) {
-        circle.current?.resumeAnimate()
-      } else {
-        circle.current?.pauseAnimate()
-      }
-    })
-  }, [props.isPlaying])
+  useAudioImg(canvas, circle, props.isPlaying, props.audioImg)
 
   return (
     <div className="s-model">
diff --git a/src/components/s-line.tsx b/src/components/s-line.tsx
index bcaabaa..e6168a1 100644
--- a/src/components/s-line.tsx
+++ b/src/components/s-line.tsx
@@ -4,12 +4,9 @@ import { IElement, IShape } from "@antv/g-canvas/lib/types";
 // import { formatToTransit } from '../utils'
 import { getImageCircle } from '../utils/base'
 import { X, Y, R } from '../utils/constanst'
-interface SLineProps {
-  isPlaying: boolean
-  data: number[];
-}
+import useAudioImg from "@/hooks/useAudioImg";
 
-export default function SLine(props: SLineProps) {
+export default function SLine(props: SComponentProps) {
   const POINT_NUM = 64
   const OFFSET = 10
   const RECT_WIDTH = 4
@@ -73,15 +70,7 @@ export default function SLine(props: SLineProps) {
     })
   }, [])
 
-  useEffect(() => {
-    setTimeout(() => {
-      if (props.isPlaying) {
-        circle.current?.resumeAnimate()
-      } else {
-        circle.current?.pauseAnimate()
-      }
-    })
-  }, [props.isPlaying])
+  useAudioImg(canvas, circle, props.isPlaying, props.audioImg)
 
   return (
     <div className="s-model">
diff --git a/src/components/s-particle.tsx b/src/components/s-particle.tsx
index 22e945d..1aeb99b 100644
--- a/src/components/s-particle.tsx
+++ b/src/components/s-particle.tsx
@@ -2,13 +2,9 @@ import React, { useEffect, useRef } from 'react';
 import { Canvas, IShape } from '@antv/g-canvas';
 import { getImageCircle } from '../utils/base'
 import { X, Y, R } from '../utils/constanst'
+import useAudioImg from "@/hooks/useAudioImg";
 
-interface SPaticle {
-  isPlaying: boolean;
-  data: number[];
-}
-
-export default function SPaticle(props: SPaticle) {
+export default function SPaticle(props: SComponentProps) {
   const POINT_NUM = 64
   const PARTICLE_NUM = 12
   const OFFSET = 0
@@ -147,15 +143,10 @@ export default function SPaticle(props: SPaticle) {
 
   useEffect(() => {
     isPlaying.current = props.isPlaying
-    setTimeout(() => {
-      if (props.isPlaying) {
-        circle.current?.resumeAnimate()
-      } else {
-        circle.current?.pauseAnimate()
-      }
-    })
   }, [props.isPlaying])
 
+  useAudioImg(canvas, circle, props.isPlaying, props.audioImg)
+
   return (
     <div className="s-model">
       <div id="SParticle" className="s-canvas-wrapper"></div>
diff --git a/src/components/s-path-dot.tsx b/src/components/s-path-dot.tsx
index e650402..10f959a 100644
--- a/src/components/s-path-dot.tsx
+++ b/src/components/s-path-dot.tsx
@@ -4,12 +4,9 @@ import { IElement } from "@antv/g-canvas/lib/types";
 import { line, curveCardinalClosed } from 'd3';
 import { getImageCircle } from '../utils/base';
 import { X, Y, R } from '../utils/constanst'
-interface SPathDotProps {
-  isPlaying: boolean;
-  data: number[];
-}
+import useAudioImg from "@/hooks/useAudioImg";
 
-export default function SPathDot(props: SPathDotProps) {
+export default function SPathDot(props: SComponentProps) {
   const POINT_NUM = 128
   const PACE_NUM = 8 // 曲率优化跳点数, 2 ** n
   const JUME_OFFSET = 36 // 波动幅度
@@ -104,15 +101,7 @@ export default function SPathDot(props: SPathDotProps) {
     })
   }, [])
 
-  useEffect(() => {
-    setTimeout(() => {
-      if (props.isPlaying) {
-        circle.current?.resumeAnimate()
-      } else {
-        circle.current?.pauseAnimate()
-      }
-    })
-  }, [props.isPlaying])
+  useAudioImg(canvas, circle, props.isPlaying, props.audioImg)
 
   return (
     <div className="s-model">
diff --git a/src/components/s-path-double.tsx b/src/components/s-path-double.tsx
index 235a04e..e1d0d57 100644
--- a/src/components/s-path-double.tsx
+++ b/src/components/s-path-double.tsx
@@ -4,12 +4,9 @@ import { formatToTransit, getCirclePath } from '../utils'
 import { line, curveCardinalClosed } from 'd3'
 import { getImageCircle } from '../utils/base';
 import { X, Y, R } from '../utils/constanst'
-interface SPathDouble {
-  isPlaying: boolean;
-  data: number[];
-}
+import useAudioImg from "@/hooks/useAudioImg";
 
-export default function SPath(props: SPathDouble) {
+export default function SPath(props: SComponentProps) {
   const POINT_NUM = 64
   const OFFSET = 10
   const COLOR = '#e9dcf7'
@@ -97,15 +94,7 @@ export default function SPath(props: SPathDouble) {
     
   }, [])
 
-  useEffect(() => {
-    setTimeout(() => {
-      if (props.isPlaying) {
-        circle.current?.resumeAnimate()
-      } else {
-        circle.current?.pauseAnimate()
-      }
-    })
-  }, [props.isPlaying])
+  useAudioImg(canvas, circle, props.isPlaying, props.audioImg)
 
   return (
     <div className="s-model">
diff --git a/src/components/s-path-fill.tsx b/src/components/s-path-fill.tsx
index 6514c4d..2fa12b3 100644
--- a/src/components/s-path-fill.tsx
+++ b/src/components/s-path-fill.tsx
@@ -4,12 +4,9 @@ import { formatToTransit, addColorOpacity } from '../utils'
 import { line, curveCardinalClosed } from 'd3'
 import { getImageCircle } from '../utils/base';
 import { X, Y, R } from '../utils/constanst'
-interface SPathFillProps {
-  isPlaying: boolean;
-  data: number[];
-}
+import useAudioImg from "@/hooks/useAudioImg";
 
-export default function SLine(props: SPathFillProps) {
+export default function SLine(props: SComponentProps) {
   const POINT_NUM = 64
   const POINT_OFFSET = 60
   // const COLORS = ['#cdf5dd', '#e8fdc8', '#dafcf0', '#f3f8c9']
@@ -83,15 +80,7 @@ export default function SLine(props: SPathFillProps) {
     })
   }, [])
 
-  useEffect(() => {
-    setTimeout(() => {
-      if (props.isPlaying) {
-        circle.current?.resumeAnimate()
-      } else {
-        circle.current?.pauseAnimate()
-      }
-    })
-  }, [props.isPlaying])
+  useAudioImg(canvas, circle, props.isPlaying, props.audioImg)
 
   return (
     <div className="s-model">
diff --git a/src/components/s-path.tsx b/src/components/s-path.tsx
index 0d16f6a..15230b6 100644
--- a/src/components/s-path.tsx
+++ b/src/components/s-path.tsx
@@ -4,12 +4,9 @@ import { formatToTransit } from '../utils'
 import { line, curveCardinalClosed } from 'd3'
 import { getImageCircle } from '../utils/base';
 import { X, Y, R } from '../utils/constanst'
-interface SPathProps {
-  isPlaying: boolean;
-  data: number[];
-}
+import useAudioImg from "@/hooks/useAudioImg";
 
-export default function SPath(props: SPathProps) {
+export default function SPath(props: SComponentProps) {
   const POINT_NUM = 64
   const OFFSET = 4
   const POINT_OFFSET = 30
@@ -82,15 +79,7 @@ export default function SPath(props: SPathProps) {
     })
   }, [])
 
-  useEffect(() => {
-    setTimeout(() => {
-      if (props.isPlaying) {
-        circle.current?.resumeAnimate()
-      } else {
-        circle.current?.pauseAnimate()
-      }
-    })
-  }, [props.isPlaying])
+  useAudioImg(canvas, circle, props.isPlaying, props.audioImg)
 
   return (
     <div className="s-model">
diff --git a/src/hooks/useAudioImg.ts b/src/hooks/useAudioImg.ts
new file mode 100644
index 0000000..1a1c62b
--- /dev/null
+++ b/src/hooks/useAudioImg.ts
@@ -0,0 +1,21 @@
+import { ICanvas, IShape } from "@antv/g-canvas";
+import { useEffect } from "react";
+
+export default function(canvas: React.MutableRefObject<ICanvas | undefined>, circle: React.MutableRefObject<IShape | undefined>, isPlaying: boolean, audioImg: string | undefined) {
+  useEffect(() => {
+    setTimeout(() => {
+      if (isPlaying) {
+        circle.current?.resumeAnimate()
+      } else {
+        circle.current?.pauseAnimate()
+      }
+    })
+  }, [isPlaying])
+
+  useEffect(() => {
+    const imgEl = canvas.current?.findById('audioImg')
+    if (imgEl) {
+      imgEl.attr('img', audioImg)
+    }
+  }, [audioImg])
+}
\ No newline at end of file
diff --git a/src/utils/base.ts b/src/utils/base.ts
index 1e98886..f1323a4 100644
--- a/src/utils/base.ts
+++ b/src/utils/base.ts
@@ -24,12 +24,14 @@ export function getImageCircle(canvas: Canvas, { x, y, r, shadowColor }: ImageCi
     }
   })
   const shape = canvas.addShape('image', {
+    id: 'audioImg',
     attrs: {
       x: x - r,
       y: y - r,
       width: 2 * r,
       height: 2 * r,
-      img: `https://source.unsplash.com/random/${2 * r}x${2 * r}?Nature`
+      // 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}`
     }
   })
   shape.setClip({
diff --git a/vite.config.ts b/vite.config.ts
index 60186e0..a07fd35 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -18,6 +18,7 @@ export default defineConfig({
         changeOrigin: true,
         rewrite: (path: string) => path.replace(/^\/api/, '')
       }
-    }
+    },
+    hmr: false
   }
 })