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

Finished websocket implementation

Browse Source
This commit is contained in:
Koper
2023-08-09 19:38:46 +07:00
parent bc4a952938
commit 1aa77040ef
4 changed files with 59 additions and 72 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
www/app/components/transcript.js
View File

@@ -3,7 +3,7 @@ import axios from "axios";
const API_URL = process.env.NEXT_PUBLIC_API_URL;
const useCreateTranscript = () => {
const useTranscript = () => {
const [response, setResponse] = useState(null);
const [loading, setLoading] = useState(false);
const [error, setError] = useState(null);
@@ -15,29 +15,31 @@ const useCreateTranscript = () => {
name: "Weekly All-Hands", // Hardcoded for now
};
console.log("Sending POST:", data);
console.debug(
"POST - /v1/transcripts/ - Requesting new transcription creation",
data,
);
axios
.post(url, data)
.then((result) => {
setResponse(result.data);
setLoading(false);
console.log("Response:", result.data);
console.debug("New transcript created:", result.data);
})
.catch((err) => {
setError(err.response || err);
const errorString = err.response || err || "Unknown error";
setError(eerrorString);
setLoading(false);
alert("Error: " + (err.response || err));
console.log("Error occurred:", err.response || err); // Debugging line
console.error("Error creating transcript:", errorString);
});
};
// You can choose when to call createTranscript, e.g., based on some dependencies
useEffect(() => {
createTranscript();
}, []); // Empty dependencies array means this effect will run once on mount
}, []);
return { response, loading, error, createTranscript };
};
export default useCreateTranscript;
export default useTranscript;

44
www/app/components/webrtc.js
View File

@@ -4,17 +4,16 @@ import axios from "axios";
const API_URL = process.env.NEXT_PUBLIC_API_URL;
const useWebRTC = (stream, transcript) => {
const useWebRTC = (stream, transcriptId) => {
const [data, setData] = useState({
peer: null,
});
useEffect(() => {
if (!stream || !transcript) {
if (!stream || !transcriptId) {
return;
}
const url = `${API_URL}/v1/transcripts/${transcript.id}/record/webrtc`;
console.log("Sending RTC Offer", url, transcript);
const url = `${API_URL}/v1/transcripts/${transcriptId}/record/webrtc`;
let peer = new Peer({ initiator: true, stream: stream });
@@ -33,11 +32,10 @@ const useWebRTC = (stream, transcript) => {
})
.then((response) => {
const answer = response.data;
console.log("Answer:", answer);
peer.signal(answer);
})
.catch((e) => {
console.log("Error signaling:", e);
console.error("WebRTC signaling error:", e);
});
}
});
@@ -47,42 +45,10 @@ const useWebRTC = (stream, transcript) => {
setData((prevData) => ({ ...prevData, peer: peer }));
});
peer.on("data", (data) => {
const serverData = JSON.parse(data.toString());
console.log(serverData);
switch (serverData.cmd) {
case "SHOW_TRANSCRIPTION":
setData((prevData) => ({
...prevData,
text: serverData.text,
}));
break;
case "UPDATE_TOPICS":
setData((prevData) => ({
...prevData,
topics: serverData.topics,
}));
break;
case "DISPLAY_FINAL_SUMMARY":
setData((prevData) => ({
...prevData,
finalSummary: {
duration: serverData.duration,
summary: serverData.summary,
},
text: "",
}));
break;
default:
console.error(`Unknown command ${serverData.cmd}`);
}
});
return () => {
peer.destroy();
};
}, [stream, transcript]);
}, [stream, transcriptId]);
return data;
};

43
www/app/components/websocket.js
View File

@@ -1,15 +1,19 @@
import { useEffect } from "react";
import { useEffect, useState } from "react";
export const useWebSockets = (transcriptId) => {
const [transcriptText, setTranscriptText] = useState("");
const [topics, setTopics] = useState([]);
const [finalSummary, setFinalSummary] = useState("");
const [status, setStatus] = useState("disconnected");
export const useWebSockets = (transcript_id) => {
useEffect(() => {
if (!transcript_id) return;
if (!transcriptId) return;
const url = `${process.env.NEXT_PUBLIC_WEBSOCKET_URL}/v1/transcripts/${transcript_id}/events`;
const url = `${process.env.NEXT_PUBLIC_WEBSOCKET_URL}/v1/transcripts/${transcriptId}/events`;
const ws = new WebSocket(url);
console.log("Opening websocket: ", url);
ws.onopen = () => {
console.log("WebSocket connection opened");
console.debug("WebSocket connection opened");
};
ws.onmessage = (event) => {
@@ -17,15 +21,28 @@ export const useWebSockets = (transcript_id) => {
switch (message.event) {
case "TRANSCRIPT":
if (!message.data.text) break;
console.log("TRANSCRIPT event:", message.data.text);
if (message.data.text) {
setTranscriptText(message.data.text.trim());
console.debug("TRANSCRIPT event:", message.data);
}
break;
case "TOPIC":
console.log("TOPIC event:", message.data);
setTopics((prevTopics) => [...prevTopics, message.data]);
console.debug("TOPIC event:", message.data);
break;
case "FINAL_SUMMARY":
console.log("FINAL_SUMMARY event:", message.data.summary);
if (message.data.summary) {
setFinalSummary(message.data.summary.trim());
console.debug("FINAL_SUMMARY event:", message.data.summary);
}
break;
case "STATUS":
setStatus(message.data.status);
break;
default:
console.error("Unknown event:", message.event);
}
@@ -36,11 +53,13 @@ export const useWebSockets = (transcript_id) => {
};
ws.onclose = () => {
console.log("WebSocket connection closed");
console.debug("WebSocket connection closed");
};
return () => {
ws.close();
};
}, [transcript_id]);
}, [transcriptId]);
return { transcriptText, topics, finalSummary, status };
};