diff --git a/src/components/User.tsx b/src/components/User.tsx
index 36257e8..82b32d9 100644
--- a/src/components/User.tsx
+++ b/src/components/User.tsx
@@ -10,6 +10,9 @@ import CloseIcon from "./icons/CloseIcon";
import { useState } from "react";
import { useClickAway } from "@uidotdev/usehooks";
import SpinnerIcon from "./icons/SpinnerIcon";
+import InternetSpeedHighIcon from "./icons/InternetSpeedHighIcon";
+import InternetSpeedMediumIcon from "./icons/InternetSpeedMediumIcon";
+import InternetSpeedLowIcon from "./icons/InternetSpeedLowIcon";
interface Props {
me: IUser;
@@ -28,21 +31,30 @@ function User({ me, user, handleTransferControl, handleKick }: Props) {
return (
-
-
{user.name[0]?.toUpperCase()}
- {user?.isControlAllowed && (
-
- )}
-
+ {!user.isVideoInitialized ? (
+
+
+ ) : (
+
+ {(user.downloadSpeed < 10 &&
+ )}
+
{user.name}
{isMobile ?
- {!user.isVideoInitialized &&
}
+
+ {user?.isControlAllowed && (
+
+ )}
{me.isAdmin && (
diff --git a/src/components/icons/InternetSpeedHighIcon.tsx b/src/components/icons/InternetSpeedHighIcon.tsx
new file mode 100644
index 0000000..21f194b
--- /dev/null
+++ b/src/components/icons/InternetSpeedHighIcon.tsx
@@ -0,0 +1,20 @@
+function InternetSpeedHighIcon() {
+ return (
+
+
+ );
+}
+
+export default InternetSpeedHighIcon;
diff --git a/src/components/icons/InternetSpeedLowIcon.tsx b/src/components/icons/InternetSpeedLowIcon.tsx
new file mode 100644
index 0000000..0adcf3d
--- /dev/null
+++ b/src/components/icons/InternetSpeedLowIcon.tsx
@@ -0,0 +1,28 @@
+function InternetSpeedLowIcon() {
+ return (
+
+
+ );
+}
+
+export default InternetSpeedLowIcon;
diff --git a/src/components/icons/InternetSpeedMediumIcon.tsx b/src/components/icons/InternetSpeedMediumIcon.tsx
new file mode 100644
index 0000000..4aeceaa
--- /dev/null
+++ b/src/components/icons/InternetSpeedMediumIcon.tsx
@@ -0,0 +1,24 @@
+function InternetSpeedMediumIcon() {
+ return (
+
+
+ );
+}
+
+export default InternetSpeedMediumIcon;
diff --git a/src/components/icons/SpinnerIcon.tsx b/src/components/icons/SpinnerIcon.tsx
index 1eda108..71313f7 100644
--- a/src/components/icons/SpinnerIcon.tsx
+++ b/src/components/icons/SpinnerIcon.tsx
@@ -1,63 +1,19 @@
function SpinnerIcon() {
return (
-
-
+
);
diff --git a/src/components/modals/stream/SpeedtestModal.tsx b/src/components/modals/stream/SpeedtestModal.tsx
new file mode 100644
index 0000000..8d2b09c
--- /dev/null
+++ b/src/components/modals/stream/SpeedtestModal.tsx
@@ -0,0 +1,58 @@
+/* eslint-disable @typescript-eslint/no-non-null-assertion */
+/* eslint-disable react-hooks/exhaustive-deps */
+
+import { useEffect, useRef } from "react";
+import { useSpeedtest } from "../../../hooks/useSpeedtest";
+import { useCountdown } from "usehooks-ts";
+
+interface Props {
+ onSuccess: (downloadSpeed: number) => void;
+}
+
+function SpeedtestModal({ onSuccess }: Props) {
+ const [downloadSpeed] = useSpeedtest();
+ const downloadSpeedRef = useRef
();
+ downloadSpeedRef.current = downloadSpeed;
+ const [counter, { startCountdown }] = useCountdown({ countStart: 15 });
+
+ useEffect(() => {
+ console.log("SpeedtestModal - downloadSpeed", downloadSpeed);
+ }, [downloadSpeed]);
+
+ useEffect(() => {
+ startCountdown();
+ setTimeout(() => {
+ onSuccess(downloadSpeedRef.current!);
+ }, 15000);
+ }, []);
+
+ return (
+
+
+
+ Пожалуйста, подождите
+
+
+ Проверяем качество вашего
+
+
+
+
+
Проверка
+
Осталось {counter} секунд
+
+
+ {/*
+
{downloadSpeed.toFixed(1)}
+
MBit/s
+
*/}
+
+
(0);
+ const [loadedEnd, setLoadedEnd] = useState(false);
+
+ function speedtest() {
+ const startTime = performance.now();
+ const xhr = new XMLHttpRequest();
+
+ let elapsedTime = 0; // seconds
+ let loaded = 0; // seconds
+
+ xhr.open("get", `https://files.graff.tech/static/download?uuid=${uuidv4()}`);
+ xhr.timeout = 15000;
+ xhr.onprogress = (e) => {
+ loaded = e.loaded / 1024000;
+ elapsedTime = (performance.now() - startTime) / 1000;
+
+ setDownloadSpeed((loaded / elapsedTime) * 8);
+ };
+ xhr.onloadend = () => setLoadedEnd(true);
+ xhr.send();
+ }
+
+ useEffect(() => {
+ speedtest();
+ }, []);
+
+ return [downloadSpeed, loadedEnd] as const;
+}
diff --git a/src/index.css b/src/index.css
index 1774c58..b5552e3 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1,5 +1,5 @@
-@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap");
-@import url("https://gistcdn.githack.com/mfd/09b70eb47474836f25a21660282ce0fd/raw/e06a670afcb2b861ed2ac4a1ef752d062ef6b46b/Gilroy.css");
+@import url("/fonts/Inter/stylesheet.css");
+@import url("/fonts/Gilroy/stylesheet.css");
@tailwind base;
@tailwind components;
@@ -63,3 +63,18 @@ input {
*::-webkit-scrollbar-thumb:hover {
border-width: 2px;
}
+
+/* Animation */
+
+.animate-progress {
+ animation: progress 15s ease-in-out;
+}
+
+@keyframes progress {
+ from {
+ width: 0;
+ }
+ to {
+ width: 100%;
+ }
+}
diff --git a/src/pages/StreamPage.tsx b/src/pages/StreamPage.tsx
index 105af6c..67b402f 100644
--- a/src/pages/StreamPage.tsx
+++ b/src/pages/StreamPage.tsx
@@ -45,6 +45,10 @@ import ChatIcon from "../components/icons/ChatIcon";
import useChatStore from "../stores/useChatStore";
import UsersIcon from "../components/icons/UsersIcon";
import Users from "../components/Users";
+import SpeedtestModal from "../components/modals/stream/SpeedtestModal";
+import InternetSpeedHighIcon from "../components/icons/InternetSpeedHighIcon";
+import InternetSpeedLowIcon from "../components/icons/InternetSpeedLowIcon";
+import InternetSpeedMediumIcon from "../components/icons/InternetSpeedMediumIcon";
// import ChatIcon from "../components/icons/ChatIcon";
// import MoreIcon from "../components/icons/MoreIcon";
@@ -87,6 +91,9 @@ function StreamPage() {
const [isShowUsers, setIsShowUsers] = useState(false);
const { isPortrait } = useMobileOrientation();
const { setMessages } = useChatStore();
+ const [activeSession, setActiveSession, activeSessionRef] =
+ useStateRef();
+ const [downloadSpeed, setDownloadSpeed] = useState(0);
async function startCall(remotePeerId: string) {
if (!peerInstance) return;
@@ -138,12 +145,14 @@ function StreamPage() {
}
function initPeer() {
+ console.log("initPeer");
+
const peer = new Peer({
host: "stream.graff.tech",
config: {
iceServers: [
{
- urls: "turn:194.26.138.94:3478", // Replace with your TURN server URL
+ urls: "turn:185.173.176.83:3478", // Replace with your TURN server URL
username: "username1", // Replace with your TURN username
credential: "password1", // Replace with your TURN credential
},
@@ -187,6 +196,7 @@ function StreamPage() {
peerId,
superAdmin,
isVideoInitialized,
+ downloadSpeed,
},
},
});
@@ -284,16 +294,10 @@ function StreamPage() {
}
async function getWSUrl() {
- const activeSession = await getActiveSession();
+ console.log("activeSession", activeSession);
- if (!activeSession || activeSession.status === "error") {
- setIsEnded(true);
- return;
- }
-
- setIsEnded(false);
setWSUrl(
- `wss://${activeSession.location}.sess.stream.graff.tech/server/${activeSession.localIP}:${activeSession.cirrusPort}`
+ `wss://${activeSessionRef.current.location}.sess.stream.graff.tech/server/${activeSessionRef.current.localIP}:${activeSessionRef.current.cirrusPort}`
);
setModal( {
+ setDownloadSpeed(Math.round(downloadSpeed));
+ getWSUrl();
+ }}
+ />
+ );
+ }
+
useEffect(() => {
- getWSUrl();
+ init();
+ // getWSUrl();
// initSocket();
}, []);
useEffect(() => {
+ console.log("permission", permission);
+
if (permission === undefined) return;
initPeer();
@@ -410,14 +440,23 @@ function StreamPage() {
-
+ {/*
{name[0]?.toUpperCase()}
{me?.isControlAllowed && (
)}
-
+
*/}
+ {me && (
+
+ {(me.downloadSpeed < 10 &&
+ )}
{name}
{isMobile ?
)}
- ((resolve) => {
+ const startTime = performance.now();
+ const xhr = new XMLHttpRequest();
+
+ let elapsedTime = 0; // seconds
+ let loaded = 0; // seconds
+
+ xhr.open("get", `https://files.graff.tech/static/download?uuid=${uuidv4()}`);
+ xhr.timeout = 15000;
+ xhr.onprogress = (e) => {
+ loaded = e.loaded / 1024000;
+ elapsedTime = (performance.now() - startTime) / 1000;
+ };
+ xhr.onloadend = loadedend;
+ xhr.send();
+
+ function loadedend() {
+ const result = Math.round((loaded / elapsedTime) * 8);
+ resolve(result);
+ }
+ });
+}
+ 
- 
-
-