add destroy

frontend/src/Call/components/MediaPlayer.js

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