moon
/
soapbox
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Audio: move useEffect's to bottom, remove unused code

This commit is contained in:
Alex Gleason 2022-10-12 18:33:32 -05:00
parent 6dddaea736
commit cc27e46067
No known key found for this signature in database
GPG Key ID: 7211D1F99744FBB7
1 changed files with 39 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

95
app/soapbox/features/audio/index.tsx
View File

@ -102,44 +102,6 @@ const Audio: React.FC<IAudio> = (props) => {
}
};
useEffect(() => {
if (player.current) {
_setDimensions();
}
}, [player.current]);
useEffect(() => {
if (audio.current) {
setVolume(audio.current.volume);
setMuted(audio.current.muted);
}
}, [audio.current]);
useEffect(() => {
if (canvas.current && visualizer.current) {
visualizer.current.setCanvas(canvas.current);
}
}, [canvas.current, visualizer.current]);
useEffect(() => {
window.addEventListener('scroll', handleScroll);
window.addEventListener('resize', handleResize, { passive: true });
return () => {
window.removeEventListener('scroll', handleScroll);
window.removeEventListener('resize', handleResize);
if (!paused && audio.current && deployPictureInPicture) {
deployPictureInPicture('audio', _pack());
}
};
}, []);
useEffect(() => {
_clear();
_draw();
}, [src, width, height, accentColor]);
const togglePlay = () => {
if (!audioContext.current) {
_initAudioContext();
@ -334,24 +296,6 @@ const Audio: React.FC<IAudio> = (props) => {
}
};
// const handleDownload = () => {
// fetch(src).then(res => res.blob()).then(blob => {
// const element = document.createElement('a');
// const objectURL = URL.createObjectURL(blob);
// element.setAttribute('href', objectURL);
// element.setAttribute('download', fileNameFromURL(src));
// document.body.appendChild(element);
// element.click();
// document.body.removeChild(element);
// URL.revokeObjectURL(objectURL);
// }).catch(err => {
// console.error(err);
// });
// };
const _renderCanvas = () => {
requestAnimationFrame(() => {
if (!audio.current) return;
@ -450,8 +394,47 @@ const Audio: React.FC<IAudio> = (props) => {
};
const getDuration = () => duration || props.duration || 0;
const progress = Math.min((currentTime / getDuration()) * 100, 100);
useEffect(() => {
if (player.current) {
_setDimensions();
}
}, [player.current]);
useEffect(() => {
if (audio.current) {
setVolume(audio.current.volume);
setMuted(audio.current.muted);
}
}, [audio.current]);
useEffect(() => {
if (canvas.current && visualizer.current) {
visualizer.current.setCanvas(canvas.current);
}
}, [canvas.current, visualizer.current]);
useEffect(() => {
window.addEventListener('scroll', handleScroll);
window.addEventListener('resize', handleResize, { passive: true });
return () => {
window.removeEventListener('scroll', handleScroll);
window.removeEventListener('resize', handleResize);
if (!paused && audio.current && deployPictureInPicture) {
deployPictureInPicture('audio', _pack());
}
};
}, []);
useEffect(() => {
_clear();
_draw();
}, [src, width, height, accentColor]);
return (
<div
className={classNames('audio-player', { editable })}