fix regions

www/app/[domain]/transcripts/player.tsx

@@ -1,7 +1,7 @@
 import React, { useRef, useEffect, useState } from "react";
 
 import WaveSurfer from "wavesurfer.js";
-import CustomRegionsPlugin from "../../lib/custom-plugins/regions";
+import RegionsPlugin from "wavesurfer.js/dist/plugins/regions.esm.js";
 
 import { formatTime } from "../../lib/time";
 import { Topic } from "./webSocketTypes";
@@ -24,9 +24,7 @@ export default function Player(props: PlayerProps) {
   const [wavesurfer, setWavesurfer] = useState<WaveSurfer | null>(null);
   const [isPlaying, setIsPlaying] = useState<boolean>(false);
   const [currentTime, setCurrentTime] = useState<number>(0);
-  const [waveRegions, setWaveRegions] = useState<CustomRegionsPlugin | null>(
-    null,
-  );
+  const [waveRegions, setWaveRegions] = useState<RegionsPlugin | null>(null);
   const [activeTopic, setActiveTopic] = props.useActiveTopic;
   const topicsRef = useRef(props.topics);
   // Waveform setup
@@ -39,12 +37,13 @@ export default function Player(props: PlayerProps) {
       // This is not ideal, but it works for now.
       const _wavesurfer = WaveSurfer.create({
         container: waveformRef.current,
-        peaks: props.waveform,
+        peaks: props.waveform.data,
         hideScrollbar: true,
         autoCenter: true,
         barWidth: 2,
         height: "auto",
-        duration: props.mediaDuration,
+        duration: Math.floor(props.mediaDuration / 1000),
+        media: props.media,
 
         ...waveSurferStyles.player,
       });
@@ -64,12 +63,10 @@ export default function Player(props: PlayerProps) {
       });
       _wavesurfer.on("timeupdate", setCurrentTime);
 
-      setWaveRegions(_wavesurfer.registerPlugin(CustomRegionsPlugin.create()));
+      setWaveRegions(_wavesurfer.registerPlugin(RegionsPlugin.create()));
 
       _wavesurfer.toggleInteraction(true);
 
-      _wavesurfer.setMediaElement(props.media);
-
       setWavesurfer(_wavesurfer);
 
       return () => {

www/app/[domain]/transcripts/recorder.tsx

@@ -1,8 +1,7 @@
 import React, { useRef, useEffect, useState } from "react";
 
 import WaveSurfer from "wavesurfer.js";
-import RecordPlugin from "../../lib/custom-plugins/record";
-import CustomRegionsPlugin from "../../lib/custom-plugins/regions";
+import RecordPlugin from "wavesurfer.js/dist/plugins/record.esm.js";
 
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faMicrophone } from "@fortawesome/free-solid-svg-icons";
@@ -33,9 +32,6 @@ export default function Recorder(props: RecorderProps) {
   const [currentTime, setCurrentTime] = useState<number>(0);
   const [timeInterval, setTimeInterval] = useState<number | null>(null);
   const [duration, setDuration] = useState<number>(0);
-  const [waveRegions, setWaveRegions] = useState<CustomRegionsPlugin | null>(
-    null,
-  );
   const [deviceId, setDeviceId] = useState<string | null>(null);
   const [recordStarted, setRecordStarted] = useState(false);
   const [showDevices, setShowDevices] = useState(false);
@@ -119,7 +115,6 @@ export default function Recorder(props: RecorderProps) {
       _wavesurfer.on("timeupdate", setCurrentTime);
 
       setRecord(_wavesurfer.registerPlugin(RecordPlugin.create()));
-      setWaveRegions(_wavesurfer.registerPlugin(CustomRegionsPlugin.create()));
 
       setWavesurfer(_wavesurfer);
 

www/app/lib/custom-plugins/regions.ts

@@ -1,18 +0,0 @@
-// Source code: https://github.com/katspaugh/wavesurfer.js/blob/fa2bcfe/src/plugins/regions.ts
-
-import RegionsPlugin, {
-  RegionsPluginOptions,
-} from "wavesurfer.js/dist/plugins/regions";
-
-class CustomRegionsPlugin extends RegionsPlugin {
-  public static create(options?: RegionsPluginOptions) {
-    return new CustomRegionsPlugin(options);
-  }
-
-  constructor(options?: RegionsPluginOptions) {
-    super(options);
-    this["avoidOverlapping"] = () => {};
-  }
-}
-
-export default CustomRegionsPlugin;

www/app/styles/recorder.js

@@ -15,7 +15,6 @@ export const waveSurferStyles = {
     font-size: 0.7rem;
     border-radius: 0 3px 3px 0;
 
-    position: absolute;
     width: 100px;
     max-width: fit-content;
     cursor: pointer;