File size: 3,361 Bytes
87337b1 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 |
"use client"
import { IMicrophoneAudioTrack } from "agora-rtc-sdk-ng"
import { normalizeFrequencies } from "./utils"
import { useState, useEffect, useMemo, useRef } from "react"
import type { AppDispatch, AppStore, RootState } from "../store"
import { useDispatch, useSelector, useStore } from "react-redux"
export const useAppDispatch = useDispatch.withTypes<AppDispatch>()
export const useAppSelector = useSelector.withTypes<RootState>()
export const useAppStore = useStore.withTypes<AppStore>()
export const useMultibandTrackVolume = (
track?: IMicrophoneAudioTrack | MediaStreamTrack,
bands: number = 5,
loPass: number = 100,
hiPass: number = 600,
) => {
const [frequencyBands, setFrequencyBands] = useState<Float32Array[]>([])
useEffect(() => {
if (!track) {
return setFrequencyBands(new Array(bands).fill(new Float32Array(0)))
}
const ctx = new AudioContext()
let finTrack =
track instanceof MediaStreamTrack ? track : track.getMediaStreamTrack()
const mediaStream = new MediaStream([finTrack])
const source = ctx.createMediaStreamSource(mediaStream)
const analyser = ctx.createAnalyser()
analyser.fftSize = 2048
source.connect(analyser)
const bufferLength = analyser.frequencyBinCount
const dataArray = new Float32Array(bufferLength)
const updateVolume = () => {
analyser.getFloatFrequencyData(dataArray)
let frequencies: Float32Array = new Float32Array(dataArray.length)
for (let i = 0; i < dataArray.length; i++) {
frequencies[i] = dataArray[i]
}
frequencies = frequencies.slice(loPass, hiPass)
const normalizedFrequencies = normalizeFrequencies(frequencies)
const chunkSize = Math.ceil(normalizedFrequencies.length / bands)
const chunks: Float32Array[] = []
for (let i = 0; i < bands; i++) {
chunks.push(
normalizedFrequencies.slice(i * chunkSize, (i + 1) * chunkSize),
)
}
setFrequencyBands(chunks)
}
const interval = setInterval(updateVolume, 10)
return () => {
source.disconnect()
clearInterval(interval)
}
}, [track, loPass, hiPass, bands])
return frequencyBands
}
export const useAutoScroll = (ref: React.RefObject<HTMLElement | null>) => {
const callback: MutationCallback = (mutationList, observer) => {
mutationList.forEach((mutation) => {
switch (mutation.type) {
case "childList":
if (!ref.current) {
return
}
ref.current.scrollTop = ref.current.scrollHeight
break
}
})
}
useEffect(() => {
if (!ref.current) {
return
}
const observer = new MutationObserver(callback)
observer.observe(ref.current, {
childList: true,
subtree: true,
})
return () => {
observer.disconnect()
}
}, [ref])
}
// export const useSmallScreen = () => {
// const screens = useBreakpoint();
// const xs = useMemo(() => {
// return !screens.sm && screens.xs
// }, [screens])
// const sm = useMemo(() => {
// return !screens.md && screens.sm
// }, [screens])
// return {
// xs,
// sm,
// isSmallScreen: xs || sm
// }
// }
export const usePrevious = (value: any) => {
const ref = useRef()
useEffect(() => {
ref.current = value
}, [value])
return ref.current
}
|