add enjoy app

2024-01-09 15:19:32 +08:00
parent b88c52d5d8
commit aebd9ee213
434 changed files with 34955 additions and 62 deletions
--- a/enjoy/src/renderer/components/conversations/speech-player.tsx
+++ b/enjoy/src/renderer/components/conversations/speech-player.tsx
@@ -0,0 +1,109 @@
+import { useEffect, useState, useRef, useCallback } from "react";
+import { PitchContour } from "@renderer/components";
+import WaveSurfer from "wavesurfer.js";
+import { Button } from "@renderer/components/ui";
+import { PlayIcon, PauseIcon } from "lucide-react";
+import { useIntersectionObserver } from "@uidotdev/usehooks";
+import { secondsToTimestamp } from "@renderer/lib/utils";
+
+export const SpeechPlayer = (props: {
+  speech: Partial<SpeechType>;
+  height?: number;
+}) => {
+  const { speech, height = 100 } = props;
+  const [isPlaying, setIsPlaying] = useState(false);
+  const [wavesurfer, setWavesurfer] = useState(null);
+  const containerRef = useRef();
+  const [ref, entry] = useIntersectionObserver({
+    threshold: 1,
+  });
+  const [duration, setDuration] = useState<number>(0);
+
+  const onPlayClick = useCallback(() => {
+    wavesurfer.isPlaying() ? wavesurfer.pause() : wavesurfer.play();
+  }, [wavesurfer]);
+
+  useEffect(() => {
+    // use the intersection observer to only create the wavesurfer instance
+    // when the player is visible
+    if (!entry?.isIntersecting) return;
+    if (!speech?.src) return;
+    if (wavesurfer) return;
+
+    const ws = WaveSurfer.create({
+      container: containerRef.current,
+      url: speech.src,
+      height,
+      barWidth: 1,
+      cursorWidth: 0,
+      autoCenter: false,
+      autoScroll: true,
+      hideScrollbar: true,
+      minPxPerSec: 100,
+      waveColor: "#ddd",
+      progressColor: "rgba(0, 0, 0, 0.25)",
+      normalize: true,
+    });
+
+    setWavesurfer(ws);
+  }, [speech, entry]);
+
+  useEffect(() => {
+    if (!wavesurfer) return;
+
+    const subscriptions = [
+      wavesurfer.on("play", () => {
+        setIsPlaying(true);
+      }),
+      wavesurfer.on("pause", () => {
+        setIsPlaying(false);
+      }),
+      wavesurfer.on("decode", () => {
+        setDuration(wavesurfer.getDuration());
+        const peaks = wavesurfer.getDecodedData().getChannelData(0);
+        const sampleRate = wavesurfer.options.sampleRate;
+        wavesurfer.renderer.getWrapper().appendChild(
+          PitchContour({
+            peaks,
+            sampleRate,
+            height,
+          })
+        );
+      }),
+    ];
+
+    return () => {
+      subscriptions.forEach((unsub) => unsub());
+      wavesurfer?.destroy();
+    };
+  }, [wavesurfer]);
+
+  return (
+    <div className="w-full">
+      <div className="flex justify-end">
+        <span className="text-xs text-muted-foreground mb-1">
+          {secondsToTimestamp(duration)}
+        </span>
+      </div>
+      <div
+        ref={ref}
+        className="bg-white rounded-lg grid grid-cols-9 items-center relative pl-2 h-[100px]"
+      >
+        <div className="flex justify-center">
+          <Button
+            onClick={onPlayClick}
+            className="aspect-square rounded-full p-2 w-12 h-12 bg-blue-600 hover:bg-blue-500"
+          >
+            {isPlaying ? (
+              <PauseIcon className="w-6 h-6 text-white" />
+            ) : (
+              <PlayIcon className="w-6 h-6 text-white" />
+            )}
+          </Button>
+        </div>
+
+        <div className="col-span-8" ref={containerRef}></div>
+      </div>
+    </div>
+  );
+};