-
- {differenceInSeconds(new Date(), parseISO(server.updatedAt)) >=
- 10 ? (
-
-
- Не в сети
-
- ) : (
-
-
- В сети
-
- )}
-
-
Локация: "{server.location}"
-
Имя сервера: "{server.name}"
-
Лимит процессов: {server.limit_process}
-
-
CPU: {server.cpu}
-
RAM: {server.ram}
-
- GPU:
-
- {server.gpu?.map((item: any, index: number) => (
-
- {item} {index === 2 && "°C"}
-
- ))}
-
-
-
+
+
+
Сервера:
+
+ {servers.length > 0 ? (
+ servers.map((server: any) => (
+
+
+ {differenceInSeconds(
+ new Date(),
+ parseISO(server.updatedAt)
+ ) >= 10 ? (
+
+
+ Не в сети
+
+ ) : (
+
+
+ В сети
+
+ )}
+
+
+ Локация:{" "}
+ {server.location}
+
+
+ Имя сервера:{" "}
+ {server.name}
+
+
+ Лимит процессов:{" "}
+ {server.limit_process}
+
+
+
+ CPU: {server.cpu}
+
+
+ RAM: {server.ram}
+
+ {/*
+ GPU:
+
+ {server.gpu?.map((item: any, index: number) => (
+
+ {item} {index === 2 && "°C"}
+
+ ))}
+
+
*/}
+
+
+ ))
+ ) : (
+
Нет запущенных серверов
+ )}
- ))}
+
- {sessions.map((session: any) => (
-
-
-
-
-
-
-
Локация: "{session.location}"
-
Сервер: "{session.server}"
-
Сборка: "{session.title}"
-
Порт: {session.cirrusPort}
-
Пользователи: {session.connectedPlayersCount || 0}
-
- Время запуска: {new Date(session.createdAt).toLocaleString()}
-
-
-
+
+
Запущенные сессии:
+ {sessions.length > 0 ? (
+ sessions.map((session: any) => (
+
+
+
+
+
+
+
+ Локация:{" "}
+ {session.location}
+
+
+ Сервер:{" "}
+ {session.server}
+
+
+ Сборка: {session.title}
+
+
+ Порт:{" "}
+ {session.cirrusPort}
+
+
+ Пользователи:{" "}
+
+ {session.connectedPlayersCount || 0}
+
+
+
+ Дата и время запуска:{" "}
+
+ {new Date(session.createdAt).toLocaleString()}
+
+
+
+
-
-
- Открыть в новом окне
-
-
-
-
- ))}
+
+
+ Открыть в новом окне
+
+
+
+
+ ))
+ ) : (
+
Нет запущенных сессий
+ )}
+
);
}
diff --git a/src/StreamPage.tsx b/src/StreamPage.tsx
index 3013ee5..bbfe854 100644
--- a/src/StreamPage.tsx
+++ b/src/StreamPage.tsx
@@ -16,14 +16,18 @@ import ModalContainer from "./components/ModalContainer";
import useModalStore from "./stores/useModalStore";
import ShareModal from "./components/modals/ShareModal";
import { Transition } from "react-transition-group";
-import { ToastContainer, toast } from "react-toastify";
-import "react-toastify/dist/ReactToastify.css";
import FullscreenIcon from "./components/icons/FullscreenIcon";
import WindowedModeIcon from "./components/icons/WindowedModeIcon";
import QRIcon from "./components/icons/QRIcon";
import QRCodeModal from "./components/modals/QRCodeModal";
import PersonsIcon from "./components/icons/PersonsIcon";
import UsersManagementModal from "./components/modals/UsersManagementModal";
+import useStreamUserStore from "./stores/useStreamUserStore";
+import { ToastContainer, toast } from "react-toastify";
+import "react-toastify/dist/ReactToastify.css";
+import UserIcon from "./components/icons/UserIcon";
+import HandOnIcon from "./components/icons/HandOnIcon";
+import AlertIcon from "./components/icons/AlertIcon";
function StreamPage() {
const params = useParams();
@@ -32,7 +36,10 @@ function StreamPage() {
const [isStreamEnded, setIsStreamEnded] = useState
(false);
const [isStreamLoaded, setStreamLoaded] = useState(false);
const [socket, setSocket] = useState(null);
- const [users, setUsers] = useState([]);
+ const [users, setUsers] = useStreamUserStore((state) => [
+ state.users,
+ state.setUsers,
+ ]);
const [me, setMe] = useState({});
// const screen = useScreen();
@@ -49,27 +56,43 @@ function StreamPage() {
function toastWarn(text: string) {
toast.warn(text, {
- position: "bottom-right",
- autoClose: 5000,
- hideProgressBar: false,
+ position: "top-center",
+ autoClose: 2000,
+ hideProgressBar: true,
closeOnClick: true,
pauseOnHover: true,
draggable: true,
- progress: undefined,
theme: "dark",
+ icon: ,
+ closeButton: false,
});
}
- function toastInfo(text: string) {
+ function toastUser(text: string) {
toast.info(text, {
- position: "bottom-right",
- autoClose: 5000,
- hideProgressBar: false,
+ position: "top-center",
+ autoClose: 2000,
+ hideProgressBar: true,
closeOnClick: true,
pauseOnHover: true,
draggable: true,
- progress: undefined,
theme: "dark",
+ icon: ,
+ closeButton: false,
+ });
+ }
+
+ function toastHandOn(text: string) {
+ toast.info(text, {
+ position: "top-center",
+ autoClose: 2000,
+ hideProgressBar: true,
+ closeOnClick: true,
+ pauseOnHover: true,
+ draggable: true,
+ theme: "dark",
+ icon: ,
+ closeButton: false,
});
}
@@ -113,7 +136,7 @@ function StreamPage() {
setUsers(room.users);
// console.log("join: ", _socketId, room.users);
- toastInfo("Присоеденился новый участник");
+ toastUser("Присоеденился новый участник");
});
socket.on("update", (_socketId, room) => {
@@ -126,7 +149,11 @@ function StreamPage() {
});
socket.on("leave", (socketId) => {
- setUsers((prev: any) => prev.filter((user: any) => user.id !== socketId));
+ setUsers(
+ useStreamUserStore
+ .getState()
+ .users.filter((user: any) => user.id !== socketId)
+ );
});
return () => {
@@ -140,7 +167,7 @@ function StreamPage() {
useEffect(() => {
if (me && me.allowControl && !me.admin) {
- toastInfo("Управление получено");
+ toastHandOn("Управление получено");
}
}, [me]);
@@ -234,7 +261,6 @@ function StreamPage() {
onClick={() =>
setModal(
update(socketId, params)}
handleKick={(socketId) => kick(socketId)}
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
index 2a77e3d..d93c331 100644
--- a/src/components/Header.tsx
+++ b/src/components/Header.tsx
@@ -1,15 +1,14 @@
-import { Trans } from "react-i18next";
import LogoIcon from "./icons/LogoIcon";
import LogoMobileIcon from "./icons/LogoMobileIcon";
import i18n from "../i18n";
-import useSidebarStore from "../stores/useSidebarStore";
+// import useSidebarStore from "../stores/useSidebarStore";
interface HeaderProps {
handleChangeLang: (lang: string) => void;
}
function Header({ handleChangeLang }: HeaderProps) {
- const [setIsOpen] = useSidebarStore((state) => [state.setIsOpen]);
+ // const [setIsOpen] = useSidebarStore((state) => [state.setIsOpen]);
return (
@@ -20,18 +19,6 @@ function Header({ handleChangeLang }: HeaderProps) {
-