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

fix markers not rendering

Browse Source
This commit is contained in:
Jose B
2023-08-14 22:02:52 -05:00
parent 6d7c323203
commit d471cdd0a5
1 changed files with 39 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

72
www/app/components/record.js
View File

@@ -106,8 +106,46 @@ export default function Recorder(props) {
useEffect(() => { useEffect(() => {
topicsRef.current = props.topics; topicsRef.current = props.topics;
if (!isRecording) renderMarkers();
}, [props.topics]); }, [props.topics]);
const renderMarkers = () => {
if (!waveRegions) return;
waveRegions.clearRegions();
for (let topic of topicsRef.current) {
const content = document.createElement("div");
content.style = `
border-left: solid 1px orange;
padding: 0 2px;
font-size: 0.7rem;
max-width: 100px;
width: max-content;
cursor: pointer;
background-color: white;
border-radius: 0 3px 3px 0;
`;
content.onmouseover = () => (content.style.backgroundColor = "orange");
content.onmouseout = () => (content.style.backgroundColor = "white");
content.textContent =
topic.title.length >= 20
? topic.title.slice(0, 17) + "..."
: topic.title;
const region = waveRegions.addRegion({
start: topic.timestamp,
content,
color: "f00",
drag: false,
});
region.on("click", (e) => {
e.stopPropagation();
setActiveTopic(topic);
wavesurfer.setTime(region.start);
});
}
};
useEffect(() => { useEffect(() => {
if (record) { if (record) {
return record.on("stopRecording", () => { return record.on("stopRecording", () => {
@@ -115,39 +153,7 @@ export default function Recorder(props) {
link.href = record.getRecordedUrl(); link.href = record.getRecordedUrl();
link.download = "reflector-recording.webm"; link.download = "reflector-recording.webm";
link.style.visibility = "visible"; link.style.visibility = "visible";
renderMarkers();
for (let topic of topicsRef.current) {
const content = document.createElement("div");
content.style = `
border-left: solid 1px orange;
padding: 0 2px;
font-size: 0.7rem;
max-width: 100px;
width: max-content;
cursor: pointer;
background-color: white;
border-radius: 0 3px 3px 0;
`;
content.onmouseover = () =>
(content.style.backgroundColor = "orange");
content.onmouseout = () => (content.style.backgroundColor = "white");
content.textContent =
topic.title.length >= 20
? topic.title.slice(0, 17) + "..."
: topic.title;
const region = waveRegions.addRegion({
start: topic.timestamp,
content,
color: "f00",
drag: false,
});
region.on("click", (e) => {
e.stopPropagation();
setActiveTopic(topic);
wavesurfer.setTime(region.start);
});
}
}); });
} }
}, [record]); }, [record]);