Update MediaPlayer.js

This commit is contained in:
Luke Berndt
2025-07-12 11:03:25 -04:00
parent 57d3cb87da
commit 4204e2d197

View File

@@ -33,15 +33,8 @@ const MediaPlayer = (props) => {
const [playTime, setPlayTime] = useState(0); const [playTime, setPlayTime] = useState(0);
const playSilence = props.playSilence; const playSilence = props.playSilence;
const parentHandlePlayPause = props.onPlayPause const parentHandlePlayPause = props.onPlayPause
const regionsPlugin = useMemo(() => { const regionsPlugin = useMemo(() => RegionsPlugin.create(), []);
try { const plugins = useMemo(() => [regionsPlugin], [regionsPlugin]);
return RegionsPlugin.create();
} catch (error) {
console.warn('Failed to create regions plugin:', error);
return null;
}
}, []);
const plugins = useMemo(() => regionsPlugin ? [regionsPlugin] : [], [regionsPlugin]);
useEffect(() => { useEffect(() => {
@@ -59,93 +52,47 @@ const MediaPlayer = (props) => {
}); });
} }
if (wavesurfer) { wavesurfer && wavesurfer.load("/silence.m4a");
wavesurfer.load("/silence.m4a"); regionsPlugin.clearRegions();
}
if (regionsPlugin) {
try {
regionsPlugin.clearRegions();
} catch (error) {
console.warn('Error clearing regions:', error);
}
}
// Cleanup function // // In browsers that don’t yet support this functionality,
return () => { // // playPromise won’t be defined.
if (regionsPlugin) { // if (playPromise !== undefined) {
try { // playPromise.then(function () {
regionsPlugin.clearRegions();
} catch (error) {
console.warn('Error clearing regions in cleanup:', error);
}
}
};
}, [playSilence, wavesurfer, regionsPlugin]); // }).catch(function (error) {
// console.log("Automatic playback failed: " + error);
// // Show a UI element to let the user manually start playback.
// });
// } else {
// audio.src = false;
// }
}, [playSilence]);
useEffect(() => { useEffect(() => {
setSourceIndex(0); setSourceIndex(0);
// Cleanup function
return () => {
// No cleanup needed for this effect
};
}, [call]); }, [call]);
useEffect(() => { useEffect(() => {
if (wavesurfer) { if (wavesurfer) {
wavesurfer.setVolume(volume); wavesurfer.setVolume(volume);
} }
// Cleanup function
return () => {
// No cleanup needed for this effect
};
}, [volume, wavesurfer]); }, [volume, wavesurfer]);
// Cleanup effect for component unmount
useEffect(() => {
return () => {
if (wavesurfer) {
try {
wavesurfer.destroy();
} catch (error) {
console.warn('Error destroying wavesurfer:', error);
}
}
if (regionsPlugin) {
try {
regionsPlugin.clearRegions();
} catch (error) {
console.warn('Error clearing regions in cleanup:', error);
}
}
};
}, [wavesurfer, regionsPlugin]);
const onReady = (ws) => { const onReady = (ws) => {
setWavesurfer(ws) setWavesurfer(ws)
setIsPlaying(false) setIsPlaying(false)
if (regionsPlugin) { regionsPlugin.clearRegions();
try { if (call) {
regionsPlugin.clearRegions();
} catch (error) {
console.warn('Error clearing regions:', error);
}
}
if (call && regionsPlugin) {
call.srcList.forEach(src => { call.srcList.forEach(src => {
try { regionsPlugin.addRegion({
regionsPlugin.addRegion({ start: src.pos,
start: src.pos, color: "rgba(128, 128, 128, 1.0)",
color: "rgba(128, 128, 128, 1.0)", drag: false,
drag: false, resize: false
resize: false });
});
} catch (error) {
console.warn('Error adding region:', error);
}
}); });
} }
} }