update types

icefee · Feb 22, 2024 · 512490f · 512490f
1 parent 8bb8f7a
commit 512490f
Show file tree

Hide file tree

Showing 11 changed files with 41 additions and 51 deletions.
diff --git a/docs/asset-manifest.json b/docs/asset-manifest.json
@@ -1,10 +1,10 @@
 {
   "files": {
-    "main.js": "/react-audio-visual/static/js/main.948d0b60.js",
+    "main.js": "/react-audio-visual/static/js/main.1a3343b7.js",
     "index.html": "/react-audio-visual/index.html",
-    "main.948d0b60.js.map": "/react-audio-visual/static/js/main.948d0b60.js.map"
+    "main.1a3343b7.js.map": "/react-audio-visual/static/js/main.1a3343b7.js.map"
   },
   "entrypoints": [
-    "static/js/main.948d0b60.js"
+    "static/js/main.1a3343b7.js"
   ]
 }
diff --git a/docs/index.html b/docs/index.html
@@ -1 +1 @@
-<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="icon" href="/react-audio-visual/favicon.ico"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><meta name="description" content="Web site created using create-react-app"/><title>react-beautiful-audio</title><script defer="defer" src="/react-audio-visual/static/js/main.948d0b60.js"></script></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>
+<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="icon" href="/react-audio-visual/favicon.ico"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><meta name="description" content="Web site created using create-react-app"/><title>react-beautiful-audio</title><script defer="defer" src="/react-audio-visual/static/js/main.1a3343b7.js"></script></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>
diff --git a/docs/static/js/main.948d0b60.js → docs/static/js/main.1a3343b7.js b/docs/static/js/main.948d0b60.js → docs/static/js/main.1a3343b7.js
diff --git a/docs/static/js/main.948d0b60.js.LICENSE.txt → docs/static/js/main.1a3343b7.js.LICENSE.txt b/docs/static/js/main.948d0b60.js.LICENSE.txt → docs/static/js/main.1a3343b7.js.LICENSE.txt
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-audio-visual",
-  "version": "1.0.9",
+  "version": "1.0.10",
   "description": "a react audio visual component",
   "main": "index.js",
   "types": "index.d.ts",

diff --git a/src/lib/hook/useAudioContext.ts b/src/lib/hook/useAudioContext.ts
@@ -3,8 +3,8 @@ import useMediaPlayState from './useMediaPlayState'
 import useRequestAnimationFrame from './useRequestAnimationFrame'
 import type { MediaRefType } from '../types'
 
-function useAudioContext(mediaRef: MediaRefType, fftSize = 2048) {
-    const { playing } = useMediaPlayState(mediaRef.current)
+function useAudioContext(media: MediaRefType, fftSize = 2048) {
+    const { playing } = useMediaPlayState(media)
     const audioContext = useRef<AudioContext>()
     const mediaSource = useRef<MediaElementAudioSourceNode>()
     const analyser = useRef<AnalyserNode>()
@@ -24,13 +24,13 @@ function useAudioContext(mediaRef: MediaRefType, fftSize = 2048) {
     }, [ts, playing])
 
     useEffect(() => {
-        if (!mediaRef.current) {
+        if (!media.current) {
             return;
         }
         if (playing) {
             if (!audioContext.current) {
                 audioContext.current = new AudioContext()
-                mediaSource.current = audioContext.current.createMediaElementSource(mediaRef.current)
+                mediaSource.current = audioContext.current.createMediaElementSource(media.current)
                 analyser.current = audioContext.current.createAnalyser()
             }
             analyser.current!.fftSize = fftSize;
@@ -45,7 +45,7 @@ function useAudioContext(mediaRef: MediaRefType, fftSize = 2048) {
                 analyser.current!.disconnect()
             }
         }
-    }, [mediaRef.current, playing, fftSize])
+    }, [playing, fftSize])
 
     return { byteFrequency }
 }

diff --git a/src/lib/hook/useMediaPlayState.ts b/src/lib/hook/useMediaPlayState.ts
@@ -1,6 +1,7 @@
-import { useState, useEffect } from 'react';
+import { useState, useEffect } from 'react'
+import type { MediaRefType } from '../types'
 
-function useMediaPlayState(media: HTMLMediaElement | null) {
+function useMediaPlayState(media: MediaRefType) {
     const [playing, setPlaying] = useState(false)
     const onPlay = () => {
         setPlaying(true)
@@ -9,17 +10,13 @@ function useMediaPlayState(media: HTMLMediaElement | null) {
         setPlaying(false)
     }
     useEffect(() => {
-        if (media) {
-            media.addEventListener('play', onPlay)
-            media.addEventListener('pause', onPause)
-        }
+        media.current?.addEventListener('play', onPlay)
+        media.current?.addEventListener('pause', onPause)
         return () => {
-            if (media) {
-                media.removeEventListener('play', onPlay)
-                media.removeEventListener('pause', onPause)
-            }
+            media.current?.removeEventListener('play', onPlay)
+            media.current?.removeEventListener('pause', onPause)
         }
-    }, [media])
+    }, [])
     return { playing }
 }
 

diff --git a/src/lib/hook/useRequestAnimationFrame.ts b/src/lib/hook/useRequestAnimationFrame.ts
@@ -1,4 +1,4 @@
-import { useState, useEffect, useRef } from 'react';
+import { useState, useEffect, useRef } from 'react'
 
 function useRequestAnimationFrame() {
     const raf = useRef<number | null>(null)

diff --git a/src/lib/hook/useResizeObserver.ts b/src/lib/hook/useResizeObserver.ts
@@ -1,4 +1,4 @@
-import { useState, useRef, useEffect } from 'react';
+import { useState, useRef, useEffect } from 'react'
 
 function useResizeObserver<T extends HTMLElement = HTMLDivElement>() {
 
@@ -20,7 +20,7 @@ function useResizeObserver<T extends HTMLElement = HTMLDivElement>() {
     }
 
     useEffect(() => {
-        
+
         const resizeObserver = new ResizeObserver(onResize)
         resizeObserver.observe(ref.current)
 

diff --git a/src/lib/index.tsx b/src/lib/index.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useRef, RefObject } from 'react'
+import React, { useEffect, useRef } from 'react'
 import useResizeObserver from './hook/useResizeObserver'
 import useAudioContext from './hook/useAudioContext'
 import type { MediaRefType } from './types'
@@ -54,13 +54,11 @@ function AudioVisual({
 
     const { byteFrequency } = useAudioContext(audio, fftSize)
 
-    const { ref, width: w, height: h } = useResizeObserver()
+    const { ref, width: w, height: h } = useResizeObserver<HTMLCanvasElement>()
     const width = w * dpr, height = h * dpr;
 
-    const canvas = useRef<HTMLCanvasElement | null>(null)
-
     const drawCanvas = (buffer: Uint8Array) => {
-        const ctx = canvas.current!.getContext('2d')!
+        const ctx = ref.current!.getContext('2d')!
         if (colors.length > 1) {
             const gradient = ctx.createLinearGradient(width / 2, 0, width / 2, height)
             for (let i = 0; i < colors.length; i++) {
@@ -97,8 +95,9 @@ function AudioVisual({
             }
             const x = i * interval + gapWidth / 2
             const barWidth = Math.max(interval - gapWidth, 1)
-            ctx.fillRect(x, height - intensity * height / 255, barWidth, intensity * height / 255)
-            ctx.fillRect(x, height - caps.current[i] * height / 255 - capGap * dpr, barWidth, capHeight * dpr)
+            const rate = height / 255
+            ctx.fillRect(x, height - intensity * rate, barWidth, intensity * rate)
+            ctx.fillRect(x, height - caps.current[i] * rate - capGap * dpr, barWidth, capHeight * dpr)
         }
     }
 
@@ -107,21 +106,16 @@ function AudioVisual({
     }, [width, height, byteFrequency, barInternal, barSpace, capHeight, capGap])
 
     return (
-        <div style={{
-            width: '100%',
-            height: '100%'
-        }} ref={ref}>
-            <canvas
-                width={width}
-                height={height}
-                ref={canvas}
-                style={{
-                    display: 'block',
-                    width: '100%',
-                    height: '100%'
-                }}
-            />
-        </div>
+        <canvas
+            width={width}
+            height={height}
+            ref={ref}
+            style={{
+                display: 'block',
+                width: '100%',
+                height: '100%'
+            }}
+        />
     )
 }
 

diff --git a/src/lib/types/index.ts b/src/lib/types/index.ts
@@ -1,2 +1 @@
-
-export type MediaRefType = React.RefObject<HTMLAudioElement | HTMLVideoElement>
+export type MediaRefType = React.RefObject<HTMLMediaElement | null>