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

re-arrange custom plugins, prevent overlapping, more 🎨

Browse Source
This commit is contained in:
Jose B
2023-08-16 17:16:19 -05:00
parent 3b204a0a8d
commit 6c99556221
4 changed files with 37 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

0
www/app/transcripts/CustomRecordPlugin.js → www/app/transcripts/custom-plugins/record.js
View File

12
www/app/transcripts/custom-plugins/regions.js Normal file
View File

@@ -0,0 +1,12 @@
import RegionsPlugin from "wavesurfer.js/dist/plugins/regions";
class CustomRegionsPlugin extends RegionsPlugin {
static create(options) {
return new CustomRegionsPlugin(options);
}
avoidOverlapping(region) {
// Prevent overlapping regions
}
}
export default CustomRegionsPlugin;

4
www/app/transcripts/new/page.js
View File

@@ -10,6 +10,7 @@ import "../../styles/button.css";
const App = () => { const App = () => {
const [stream, setStream] = useState(null); const [stream, setStream] = useState(null);
const [disconnected, setDisconnected] = useState(false); const [disconnected, setDisconnected] = useState(false);
const useActiveTopic = useState(null);
useEffect(() => { useEffect(() => {
if (process.env.NEXT_PUBLIC_ENV === "development") { if (process.env.NEXT_PUBLIC_ENV === "development") {
@@ -38,6 +39,8 @@ const App = () => {
webRTC?.peer?.send(JSON.stringify({ cmd: "STOP" })); webRTC?.peer?.send(JSON.stringify({ cmd: "STOP" }));
setStream(null); setStream(null);
}} }}
topics={webSockets.topics}
useActiveTopic={useActiveTopic}
/> />
<hr /> <hr />
@@ -48,6 +51,7 @@ const App = () => {
topics={webSockets.topics} topics={webSockets.topics}
stream={stream} stream={stream}
disconnected={disconnected} disconnected={disconnected}
useActiveTopic={useActiveTopic}
/> />
</div> </div>
); );

33
www/app/transcripts/recorder.js
View File

@@ -1,7 +1,8 @@
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 RegionsPlugin from "wavesurfer.js/dist/plugins/regions"; import CustomRecordPlugin from "./custom-plugins/record";
import CustomRegionsPlugin from "./custom-plugins/regions";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faDownload } from "@fortawesome/free-solid-svg-icons"; import { faDownload } from "@fortawesome/free-solid-svg-icons";
@@ -9,7 +10,6 @@ import { faDownload } from "@fortawesome/free-solid-svg-icons";
import Dropdown from "react-dropdown"; import Dropdown from "react-dropdown";
import "react-dropdown/style.css"; import "react-dropdown/style.css";
import CustomRecordPlugin from "./CustomRecordPlugin";
import { formatTime } from "../lib/time"; import { formatTime } from "../lib/time";
const AudioInputsDropdown = (props) => { const AudioInputsDropdown = (props) => {
@@ -93,7 +93,7 @@ export default function Recorder(props) {
_wavesurfer.on("timeupdate", setCurrentTime); _wavesurfer.on("timeupdate", setCurrentTime);
setRecord(_wavesurfer.registerPlugin(CustomRecordPlugin.create())); setRecord(_wavesurfer.registerPlugin(CustomRecordPlugin.create()));
setWaveRegions(_wavesurfer.registerPlugin(RegionsPlugin.create())); setWaveRegions(_wavesurfer.registerPlugin(CustomRegionsPlugin.create()));
setWavesurfer(_wavesurfer); setWavesurfer(_wavesurfer);
return () => { return () => {
@@ -116,21 +116,29 @@ export default function Recorder(props) {
for (let topic of topicsRef.current) { for (let topic of topicsRef.current) {
const content = document.createElement("div"); const content = document.createElement("div");
content.style = ` content.style = `
position: absolute;
border-left: solid 1px orange; border-left: solid 1px orange;
padding: 0 2px; padding: 0 2px 0 5px;
font-size: 0.7rem; font-size: 0.7rem;
max-width: 100px; width: 100px;
width: max-content;
cursor: pointer; cursor: pointer;
background-color: white; background-color: white;
border-radius: 0 3px 3px 0; border-radius: 0 3px 3px 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
`; `;
content.onmouseover = () => (content.style.backgroundColor = "orange"); content.onmouseover = () => {
content.onmouseout = () => (content.style.backgroundColor = "white"); content.style.backgroundColor = "orange";
content.textContent = content.style.zIndex = 999;
topic.title.length >= 20 content.style.width = "auto";
? topic.title.slice(0, 17) + "..." };
: topic.title; content.onmouseout = () => {
content.style.backgroundColor = "white";
content.style.zIndex = 0;
content.style.width = "100px";
};
content.textContent = topic.title;
const region = waveRegions.addRegion({ const region = waveRegions.addRegion({
start: topic.timestamp, start: topic.timestamp,
@@ -199,6 +207,7 @@ export default function Recorder(props) {
await record.startRecording(stream); await record.startRecording(stream);
props.setStream(stream); props.setStream(stream);
setIsRecording(true); setIsRecording(true);
waveRegions?.clearRegions();
} }
}; };