selfhostyourtech/reflector
2
0
Fork 0
mirror of https://github.com/Monadical-SAS/reflector.git synced 2025-12-20 12:19:06 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix regions

Browse Source
This commit is contained in:
Sara
2024-01-12 14:57:41 +01:00
parent bc421db43e
commit 5b3b6a80df
4 changed files with 7 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
www/app/[domain]/transcripts/player.tsx
View File

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

7
www/app/[domain]/transcripts/recorder.tsx
View File

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

18
www/app/lib/custom-plugins/regions.ts
View File

@@ -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;

1
www/app/styles/recorder.js
View File

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