✨ added sound preview

client/package.json

@@ -10,6 +10,7 @@
     "@types/node": "^16.11.56",
     "@types/react": "^18.0.18",
     "@types/react-dom": "^18.0.6",
+    "@wavesurfer/react": "^1.0.7",
     "highlight.js": "^11.10.0",
     "msw": "^0.47.3",
     "react": "^18.2.0",

client/src/components/ItemPreview/ItemPreview.tsx

@@ -6,6 +6,7 @@ import { SUP_LANGS } from "src/utils/hljs"
 import Default from "./Default/Default"
 import Img from "./Img/Img"
 import Video from "./Video/Video"
+import Sound from "./Sound/Sound"
 import Code from "./Code/Code"
 
 export interface PreviewProps {
@@ -17,7 +18,8 @@ type ItemPreviewComp = (props: PreviewProps) => JSX.Element
 const previews: Record<string, ItemPreviewComp> = {
   "": Default,
   "png jpg jpeg gif svg": Img,
-  "mp4 ogg webm": Video,
+  "mp4 webm": Video,
+  "wav mp3": Sound,
   [SUP_LANGS.join(" ")]: Code
 }
 

client/src/components/ItemPreview/Sound/Sound.scss

@@ -0,0 +1,36 @@
+@use "src/sass/abstract/colors" as c;
+
+.pre-sound {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  width: fit-content;
+  margin: auto;
+  height: 100%;
+  gap: 3px;
+
+  &__time {
+    align-self: flex-end;
+    font-size: 0.75rem;
+
+    span:last-child {
+      opacity: 0.65;
+    }
+  }
+
+  button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 38px;
+    width: 38px;
+    background-color: #{c.$grey}ee;
+    border-radius: 50%;
+    cursor: pointer;
+
+    &:hover {
+      filter: brightness(1.3);
+    }
+  }
+}

client/src/components/ItemPreview/Sound/Sound.tsx

@@ -0,0 +1,51 @@
+import { useRef } from "react"
+import { useWavesurfer } from "@wavesurfer/react"
+
+import { PreviewProps } from "../ItemPreview"
+
+import "./Sound.scss"
+
+const formatTime = (seconds: number) => [seconds / 60, seconds % 60].map((v) => `0${Math.floor(v)}`.slice(-2)).join(':')
+
+function Sound(props: PreviewProps) {
+  const { item } = props
+
+  const containerRef = useRef<HTMLDivElement>(null)
+
+  const { wavesurfer, isPlaying, currentTime } = useWavesurfer({
+    container: containerRef,
+    width: "min(90vw, 600px)",
+    height: 100,
+    waveColor: "#862994",
+    url: `/cdn/${item.id}`,
+    barRadius: 30,
+    barWidth: 5,
+    barGap: 4,
+    dragToSeek: true
+  })
+
+  const onPlayPause = () => {
+    wavesurfer?.playPause()
+  }
+
+  return (
+    <div className="pre-sound">
+      <div ref={containerRef}></div>
+      <div className="pre-sound__time">
+        <span>{formatTime(currentTime)}</span><span> / {formatTime(wavesurfer?.getDuration() ?? 0)}</span>
+      </div>
+      <div>
+        <button onClick={onPlayPause}>
+          {isPlaying ? (
+            <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px"><path d="M560-200v-560h160v560H560Zm-320 0v-560h160v560H240Z" /></svg>
+          ) : (
+            <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px"><path d="M320-200v-560l440 280-440 280Z" /></svg>
+          )}
+        </button>
+        {/* TODO: add volume control */}
+      </div>
+    </div>
+  )
+}
+
+export default Sound