diff --git a/src/App.tsx b/src/App.tsx index 8751ff4..5019caa 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -18,6 +18,7 @@ import { useEffect, useState } from "react"; import ky from "ky"; import { useNavigate, useSearchParams } from "react-router-dom"; import { ToastContainer, toast } from "react-toastify"; +import LoaderIcon from "./components/icons/LoaderIcon"; function App() { const [isOpen] = useSidebarStore((state) => [state.isOpen]); @@ -425,27 +426,8 @@ function App() { ) : (
-

- - - - +

+ Загрузка ... {countdownTimer} сек diff --git a/src/StreamPage.tsx b/src/StreamPage.tsx index 60f9bf3..575399f 100644 --- a/src/StreamPage.tsx +++ b/src/StreamPage.tsx @@ -1,9 +1,9 @@ -/* eslint-disable @typescript-eslint/no-explicit-any */ /* eslint-disable react-hooks/exhaustive-deps */ +/* eslint-disable @typescript-eslint/no-explicit-any */ + import { useParams } from "react-router-dom"; import { FullScreen, useFullScreenHandle } from "react-full-screen"; import { useEffect, useState } from "react"; -import QRCode from "react-qr-code"; import ky from "ky"; import { io } from "socket.io-client"; import userAgentParser from "ua-parser-js"; @@ -17,11 +17,21 @@ 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 AdminUserIcon from "./components/icons/AdminUserIcon"; +import UserIcon from "./components/icons/UserIcon"; +import MobilePhoneIcon from "./components/icons/MobilePhoneIcon"; +import DesktopIcon from "./components/icons/DesktopIcon"; +import HandOffIcon from "./components/icons/HandOffIcon"; +import HandOnIcon from "./components/icons/HandOnIcon"; +import ExitIcon from "./components/icons/ExitIcon"; +import QRCodeModal from "./components/modals/QRCodeModal"; function StreamPage() { const params = useParams(); const handleFullScreen = useFullScreenHandle(); - const [isShowQRCode, setIsShowQRCode] = useState(false); const [streamUrl, setStreamUrl] = useState(""); const [isStreamEnded, setIsStreamEnded] = useState(false); const [isStreamLoaded, setStreamLoaded] = useState(false); @@ -67,10 +77,6 @@ function StreamPage() { }); } - function toggleQRCode() { - setIsShowQRCode((prev) => !prev); - } - async function connect() { const activeSession: any = await ky .get(`${import.meta.env.VITE_COORD_URL}/active_sessions/${params.id}`) @@ -160,21 +166,7 @@ function StreamPage() { onClick={handleFullScreen.enter} className="p-2 flex space-x-2 items-center outline-none" > - - - + Полноэкранный режим @@ -184,21 +176,7 @@ function StreamPage() { onClick={handleFullScreen.exit} className="p-2 flex space-x-2 items-center outline-none" > - - - + Оконный режим @@ -206,23 +184,10 @@ function StreamPage() { )} - ) : ( - + {!user.admin && ( + <> + {user.allowControl ? ( + + ) : ( + + )} + )} - {me && me.admin && ( + {me && me.admin && !user.admin && ( )}

@@ -490,60 +333,14 @@ function StreamPage() { - {isShowQRCode && ( -
-
-
-

- - Отсканируйте QR-код -
- чтобы подключиться -
к текущей демонстрации - -

- -
- -
-
- )} - {!isStreamEnded ? ( - <> - {isStreamLoaded ? ( - <>{streamUrl && } - ) : ( -
- Ожидание потока -
- )} - + isStreamLoaded ? ( + <>{streamUrl && } + ) : ( +
+ Ожидание потока +
+ ) ) : (

diff --git a/src/components/icons/AdminUserIcon.tsx b/src/components/icons/AdminUserIcon.tsx new file mode 100644 index 0000000..3bb8553 --- /dev/null +++ b/src/components/icons/AdminUserIcon.tsx @@ -0,0 +1,41 @@ +function AdminUserIcon() { + return ( + + + + + + + + + + + + + ); +} + +export default AdminUserIcon; diff --git a/src/components/icons/DesktopIcon.tsx b/src/components/icons/DesktopIcon.tsx new file mode 100644 index 0000000..4cc1269 --- /dev/null +++ b/src/components/icons/DesktopIcon.tsx @@ -0,0 +1,29 @@ +function DesktopIcon() { + return ( + + + + + + + ); +} + +export default DesktopIcon; diff --git a/src/components/icons/ExitIcon.tsx b/src/components/icons/ExitIcon.tsx new file mode 100644 index 0000000..ee5c5e9 --- /dev/null +++ b/src/components/icons/ExitIcon.tsx @@ -0,0 +1,24 @@ +function ExitIcon() { + return ( + + + + + + ); +} + +export default ExitIcon; diff --git a/src/components/icons/FullscreenIcon.tsx b/src/components/icons/FullscreenIcon.tsx new file mode 100644 index 0000000..34e7163 --- /dev/null +++ b/src/components/icons/FullscreenIcon.tsx @@ -0,0 +1,24 @@ +function FullscreenIcon() { + return ( + + + + + + ); +} + +export default FullscreenIcon; diff --git a/src/components/icons/HandOffIcon.tsx b/src/components/icons/HandOffIcon.tsx new file mode 100644 index 0000000..a03106f --- /dev/null +++ b/src/components/icons/HandOffIcon.tsx @@ -0,0 +1,38 @@ +function HandOffIcon() { + return ( + + + + + + + + + + ); +} + +export default HandOffIcon; diff --git a/src/components/icons/HandOnIcon.tsx b/src/components/icons/HandOnIcon.tsx new file mode 100644 index 0000000..718dcc2 --- /dev/null +++ b/src/components/icons/HandOnIcon.tsx @@ -0,0 +1,23 @@ +function HandOnIcon() { + return ( + + + + + + ); +} + +export default HandOnIcon; diff --git a/src/components/icons/LoaderIcon.tsx b/src/components/icons/LoaderIcon.tsx index 094a71f..078fac4 100644 --- a/src/components/icons/LoaderIcon.tsx +++ b/src/components/icons/LoaderIcon.tsx @@ -16,20 +16,20 @@ function LoaderIcon({ className }: IconProps) { - - + + diff --git a/src/components/icons/MobilePhoneIcon.tsx b/src/components/icons/MobilePhoneIcon.tsx new file mode 100644 index 0000000..44cbd13 --- /dev/null +++ b/src/components/icons/MobilePhoneIcon.tsx @@ -0,0 +1,21 @@ +function MobilePhoneIcon() { + return ( + + + + + + ); +} + +export default MobilePhoneIcon; diff --git a/src/components/icons/QRIcon.tsx b/src/components/icons/QRIcon.tsx new file mode 100644 index 0000000..913c591 --- /dev/null +++ b/src/components/icons/QRIcon.tsx @@ -0,0 +1,57 @@ +function QRIcon() { + return ( + + + + + + + + + + + + ); +} + +export default QRIcon; diff --git a/src/components/icons/ShareIcon.tsx b/src/components/icons/ShareIcon.tsx index 7172b02..20caeb8 100644 --- a/src/components/icons/ShareIcon.tsx +++ b/src/components/icons/ShareIcon.tsx @@ -12,7 +12,7 @@ function ShareIcon() { id="Vector 1835" d="M16 18L5 12L16 6" stroke="#F2F2F2" - stroke-width="2" + strokeWidth="2" /> diff --git a/src/components/icons/UserIcon.tsx b/src/components/icons/UserIcon.tsx new file mode 100644 index 0000000..52a65d7 --- /dev/null +++ b/src/components/icons/UserIcon.tsx @@ -0,0 +1,26 @@ +function UserIcon() { + return ( + + + + + + + + + ); +} + +export default UserIcon; diff --git a/src/components/icons/WindowedModeIcon.tsx b/src/components/icons/WindowedModeIcon.tsx new file mode 100644 index 0000000..e7fd2cf --- /dev/null +++ b/src/components/icons/WindowedModeIcon.tsx @@ -0,0 +1,24 @@ +function WindowedModeIcon() { + return ( + + + + + + ); +} + +export default WindowedModeIcon; diff --git a/src/components/modals/QRCodeModal.tsx b/src/components/modals/QRCodeModal.tsx new file mode 100644 index 0000000..e9e7283 --- /dev/null +++ b/src/components/modals/QRCodeModal.tsx @@ -0,0 +1,41 @@ +import { Trans } from "react-i18next"; +import QRCode from "react-qr-code"; +import { useParams } from "react-router-dom"; +import CloseIcon from "../icons/CloseIcon"; +import useModalStore from "../../stores/useModalStore"; + +function QRCodeModal() { + const params = useParams(); + const [setModal] = useModalStore((state) => [state.setModal]); + + return ( +

+
+

+ + Отсканируйте QR-код +
+ чтобы подключиться +
к текущей демонстрации + +

+ +
+ + +
+ ); +} + +export default QRCodeModal; diff --git a/src/components/modals/ShareModal.tsx b/src/components/modals/ShareModal.tsx index ce2b7dd..c82dc02 100644 --- a/src/components/modals/ShareModal.tsx +++ b/src/components/modals/ShareModal.tsx @@ -54,14 +54,14 @@ function ShareModal() { Скопировать
- - + +