Fix multiple players playing (#688)

* only one player playing in Square page

* refactor player

* rename component

* refactor post recording

enjoy/src/renderer/components/misc/index.ts

@@ -8,5 +8,6 @@ export * from "./github-login-form";
 export * from "./mixin-login-form";
 export * from "./no-records-found";
 export * from "./page-placeholder";
+export * from "./universal-player";
 export * from "./sidebar";
 export * from "./wavesurfer-player";

enjoy/src/renderer/components/misc/universal-player.tsx

@@ -0,0 +1,57 @@
+import {
+  MediaPlayer,
+  MediaProvider,
+  type MediaPlayerInstance,
+} from "@vidstack/react";
+import {
+  DefaultAudioLayout,
+  defaultLayoutIcons,
+} from "@vidstack/react/player/layouts/default";
+import { useEffect, useRef, useState } from "react";
+import { v4 as uuidv4 } from "uuid";
+
+export const UniversalPlayer = (props: {
+  src: string;
+  onTimeUpdate?: (time: number) => void;
+  onError?: (error: any) => void;
+}) => {
+  const { src, onTimeUpdate, onError } = props;
+  const mediaPlayer = useRef<MediaPlayerInstance>(null);
+  const [uuid] = useState<string>(uuidv4());
+
+  useEffect(() => {
+    if (!mediaPlayer.current) return;
+
+    const onOtherPlayerPlay = (event: CustomEvent) => {
+      if (event.detail.uuid !== uuid) {
+        mediaPlayer.current!.pause();
+      }
+    };
+
+    document.addEventListener("play", onOtherPlayerPlay);
+
+    return () => {
+      document.removeEventListener("play", onOtherPlayerPlay);
+    };
+  }, [uuid, mediaPlayer.current]);
+
+  return (
+    <MediaPlayer
+      ref={mediaPlayer}
+      onTimeUpdate={({ currentTime }) => {
+        onTimeUpdate(currentTime);
+      }}
+      src={src}
+      onError={(err) => onError(err)}
+      onPlay={() => {
+        const event = new CustomEvent("play", {
+          detail: { uuid },
+        });
+        document.dispatchEvent(event);
+      }}
+    >
+      <MediaProvider />
+      <DefaultAudioLayout icons={defaultLayoutIcons} />
+    </MediaPlayer>
+  );
+};

enjoy/src/renderer/components/misc/wavesurfer-player.tsx

@@ -1,10 +1,16 @@
-import { renderPitchContour, secondsToTimestamp } from "@renderer/lib/utils";
+import {
+  cn,
+  renderPitchContour,
+  secondsToTimestamp,
+} from "@renderer/lib/utils";
 import { extractFrequencies } from "@/utils";
 import { useIntersectionObserver } from "@uidotdev/usehooks";
 import { useCallback, useEffect, useRef, useState } from "react";
 import WaveSurfer from "wavesurfer.js";
 import { Button, Skeleton } from "@renderer/components/ui";
-import { PauseIcon, PlayIcon } from "lucide-react";
+import { PauseIcon, PlayIcon, XCircleIcon } from "lucide-react";
+import { v4 as uuidv4 } from "uuid";
+import { t } from "i18next";
 
 export const WavesurferPlayer = (props: {
   id: string;
@@ -13,8 +19,20 @@ export const WavesurferPlayer = (props: {
   currentTime?: number;
   setCurrentTime?: (currentTime: number) => void;
   onError?: (error: Error) => void;
+  wavesurferOptions?: any;
+  pitchContourOptions?: any;
+  className?: string;
 }) => {
-  const { id, src, height = 80, onError, setCurrentTime } = props;
+  const {
+    id,
+    src,
+    height = 80,
+    onError,
+    setCurrentTime,
+    wavesurferOptions,
+    pitchContourOptions,
+    className = "",
+  } = props;
   const [initialized, setInitialized] = useState(false);
   const [isPlaying, setIsPlaying] = useState(false);
   const [wavesurfer, setWavesurfer] = useState(null);
@@ -23,6 +41,7 @@ export const WavesurferPlayer = (props: {
     threshold: 1,
   });
   const [duration, setDuration] = useState<number>(0);
+  const [error, setError] = useState<string>(null);
 
   const onPlayClick = useCallback(() => {
     if (!wavesurfer) return;
@@ -50,6 +69,7 @@ export const WavesurferPlayer = (props: {
       minPxPerSec: 100,
       waveColor: "#ddd",
       progressColor: "rgba(0, 0, 0, 0.25)",
+      ...wavesurferOptions,
     });
 
     setWavesurfer(ws);
@@ -58,9 +78,12 @@ export const WavesurferPlayer = (props: {
   useEffect(() => {
     if (!wavesurfer) return;
 
+    const uuid = uuidv4();
     const subscriptions = [
       wavesurfer.on("play", () => {
         setIsPlaying(true);
+        const customEvent = new CustomEvent("play", { detail: { uuid } });
+        document.dispatchEvent(customEvent);
       }),
       wavesurfer.on("pause", () => {
         setIsPlaying(false);
@@ -83,6 +106,7 @@ export const WavesurferPlayer = (props: {
                 data,
                 cubicInterpolationMode: "monotone",
                 pointRadius: 1,
+                ...pitchContourOptions,
               },
             ],
           });
@@ -90,16 +114,45 @@ export const WavesurferPlayer = (props: {
         setInitialized(true);
       }),
       wavesurfer.on("error", (err: Error) => {
+        setError(err.message);
         onError(err);
       }),
     ];
 
+    const onOtherPlayerPlay = (event: CustomEvent) => {
+      if (!wavesurfer) return;
+      if (event.detail.uuid === uuid) return;
+
+      wavesurfer.pause();
+    };
+
+    document.addEventListener("play", onOtherPlayerPlay);
+
     return () => {
       subscriptions.forEach((unsub) => unsub());
       wavesurfer?.destroy();
+      document.removeEventListener("play", onOtherPlayerPlay);
     };
   }, [wavesurfer]);
 
+  if (error) {
+    return (
+      <div
+        className={cn("w-full bg-background rounded-lg p-4 border", className)}
+      >
+        <div className="flex items-center justify-center mb-2">
+          <XCircleIcon className="w-4 h-4 text-destructive" />
+        </div>
+        <div className="select-text break-all text-center text-sm text-muted-foreground mb-4">
+          {error}
+        </div>
+        <div className="flex items-center justify-center">
+          <Button onClick={() => setError(null)}>{t("retry")}</Button>
+        </div>
+      </div>
+    );
+  }
+
   return (
     <>
       <div className="flex justify-end">
@@ -110,7 +163,10 @@ export const WavesurferPlayer = (props: {
 
       <div
         ref={ref}
-        className="bg-background rounded-lg grid grid-cols-9 items-center relative h-[80px]"
+        className={cn(
+          "bg-background rounded-lg grid grid-cols-9 items-center relative h-[80px]",
+          className
+        )}
       >
         {!initialized && (
           <div className="col-span-9 flex flex-col justify-around h-[80px]">