diff --git a/.env b/.env index 6fe1354..4814498 100644 --- a/.env +++ b/.env @@ -1,5 +1,5 @@ # VITE_COORD_URL=http://localhost:4000 VITE_COORD_URL=https://coord.graff.tech -VITE_CRM_API_URL=http://localhost:3001 +# VITE_CRM_API_URL=http://localhost:3001 # VITE_CRM_API_URL=http://192.168.1.170:3001 -# VITE_CRM_API_URL=https://crm.stream.graff.tech/api \ No newline at end of file +VITE_CRM_API_URL=https://crm.stream.graff.tech/api \ No newline at end of file diff --git a/package.json b/package.json index 98a81a1..31b4ac4 100644 --- a/package.json +++ b/package.json @@ -10,11 +10,10 @@ "preview": "vite preview" }, "dependencies": { - "@epicgames-ps/lib-pixelstreamingfrontend-ue5.3": "^0.0.2", + "@epicgames-ps/lib-pixelstreamingfrontend-ue5.3": "^1.0.1", "@livekit/components-react": "^1.1.6", "@livekit/components-styles": "^1.0.6", "@uidotdev/usehooks": "^2.0.1", - "agora-rtc-sdk-ng": "^4.18.2", "date-fns": "^2.30.0", "i18next": "^22.5.0", "i18next-browser-languagedetector": "^7.0.2", @@ -23,6 +22,7 @@ "react": "^18.2.0", "react-calendar": "^4.3.0", "react-countdown": "^2.3.5", + "react-device-detect": "^2.2.3", "react-dom": "^18.2.0", "react-full-screen": "^1.1.1", "react-i18next": "^12.3.1", @@ -33,7 +33,7 @@ "react-timer-hook": "^3.0.7", "react-toastify": "^9.1.3", "react-transition-group": "^4.4.5", - "socket.io-client": "^4.6.2", + "socket.io-client": "^4.7.2", "ua-parser-js": "^1.0.35", "use-clipboard-copy": "^0.2.0", "usehooks-ts": "^2.9.1", diff --git a/src/MonitoringPage.tsx b/src/MonitoringPage.tsx index 29919ba..a56fed6 100644 --- a/src/MonitoringPage.tsx +++ b/src/MonitoringPage.tsx @@ -55,7 +55,7 @@ function MonitoringPage() { <>

Сервера:

-
+
{servers.length > 0 ? ( servers.map((server: any) => (
@@ -129,7 +129,7 @@ function MonitoringPage() { bgColor="#22222A" fgColor="#F2F2F2" size={128} - value={`https://stream.graff.tech/stream/?data=wss://${session.location}.sess.stream.graff.tech/${session.server}/${session.cirrusPort}/`} + value={`https://stream.graff.tech/stream/${session.id}?admin=true`} viewBox={`0 0 128 128`} />
@@ -169,7 +169,7 @@ function MonitoringPage() {
diff --git a/src/ScheduledPage.tsx b/src/ScheduledPage.tsx index c00961f..21fa904 100644 --- a/src/ScheduledPage.tsx +++ b/src/ScheduledPage.tsx @@ -1,10 +1,6 @@ /* eslint-disable @typescript-eslint/no-explicit-any */ /* eslint-disable react-hooks/exhaustive-deps */ -import { - differenceInMilliseconds, - isAfter, - parseISO, -} from "date-fns"; +import { differenceInMilliseconds, isAfter, parseISO } from "date-fns"; import ky from "ky"; import { useEffect, useState } from "react"; import Countdown from "react-countdown"; @@ -38,7 +34,7 @@ function ScheduledPage() { return; } - navigate(`/stream/${result.id}`); + navigate(`/stream/${result.activeSessionId}`); } catch (error) { if (error instanceof Error) { console.log(error.message); diff --git a/src/StreamPage.tsx b/src/StreamPage.tsx index 11034c2..cb91912 100644 --- a/src/StreamPage.tsx +++ b/src/StreamPage.tsx @@ -1,7 +1,7 @@ /* eslint-disable no-irregular-whitespace */ /* eslint-disable react-hooks/exhaustive-deps */ /* eslint-disable @typescript-eslint/no-explicit-any */ -import { useParams } from "react-router-dom"; +import { useParams, useSearchParams } from "react-router-dom"; import { FullScreen, useFullScreenHandle } from "react-full-screen"; import { useEffect, useRef, useState } from "react"; import ky from "ky"; @@ -30,9 +30,11 @@ import useSocketStore from "./stores/useSocketStore"; import { LiveKitRoom, RoomAudioRenderer } from "@livekit/components-react"; import ToggleMic from "./components/ToggleMic"; import Chat from "./components/Chat"; -import AFKTimerModal from "./components/modals/AFKTimerModal"; +// import AFKTimerModal from "./components/modals/AFKTimerModal"; import { differenceInMilliseconds, format, parseISO } from "date-fns"; import HandOnIcon from "./components/icons/HandOnIcon"; +import { useMobileOrientation } from "react-device-detect"; +import RotateDeviceIcon from "./components/icons/RotateDeviceIcon"; function StreamPage() { const { t } = useTranslation(); @@ -48,6 +50,7 @@ function StreamPage() { state.setModal, ]); const params = useParams(); + const [searchParams] = useSearchParams(); const roomId = params.id; const livekitServerUrl = "wss://livekit.stream.graff.tech"; const [token, setToken] = useState(); @@ -60,10 +63,8 @@ function StreamPage() { state.setUsers, ]); const [isShowChat, setIsShowChat] = useState(false); - const [lastActivity, setLastActivity] = useState(new Date()); - const lastActivityRef = useRef(); - lastActivityRef.current = lastActivity; const [stopwatch, setStopwatch] = useState(); + const { orientation } = useMobileOrientation(); async function getToken() { if (!socket) return; @@ -160,28 +161,13 @@ function StreamPage() { }); } - const handleAction = () => { - setLastActivity(new Date()); - }; - - function updateLastActivity() { - if (!socket) return; - - if (meRef.current && meRef.current.admin) { - socket.emit("last-activity", socket.id, lastActivityRef.current); - } - - setTimeout(() => { - updateLastActivity(); - }, 5000); - } - useEffect(() => { connect(); const socket: Socket = io(import.meta.env.VITE_COORD_URL, { query: { roomId, + admin: searchParams.has("admin", "true"), }, }); @@ -216,13 +202,10 @@ function StreamPage() { socket.on("notification", (type) => { if (type === "afk-timer") { - setModal(); + // setModal(); } }); - document.addEventListener("mousemove", handleAction); - document.addEventListener("touchstart", handleAction); - return () => { socket.off("connect"); socket.off("join"); @@ -230,9 +213,6 @@ function StreamPage() { socket.off("kick"); socket.off("leave"); socket.close(); - - document.removeEventListener("mousemove", handleAction); - document.removeEventListener("touchstart", handleAction); }; }, []); @@ -240,7 +220,6 @@ function StreamPage() { if (!socket) return; getToken(); - updateLastActivity(); }, [socket]); useEffect(() => { @@ -259,7 +238,16 @@ function StreamPage() { {!isStreamEnded ? ( isStreamLoaded ? ( - <>{streamUrl && } + <> + {orientation === "landscape" ? ( + <>{streamUrl && } + ) : ( +
+ + Поверните устройство +
+ )} + ) : (
Ожидание потока diff --git a/src/components/SidebarTab2.tsx b/src/components/SidebarTab2.tsx index 5eb428c..a8e1d81 100644 --- a/src/components/SidebarTab2.tsx +++ b/src/components/SidebarTab2.tsx @@ -6,7 +6,6 @@ import useSidebarTabStore from "../stores/useSidebarStore"; import TimeSelector from "./TimeSelector"; import CloseIcon from "./icons/CloseIcon"; import { - addMinutes, eachMinuteOfInterval, format, isAfter, @@ -107,7 +106,8 @@ function SidebarTab2() { const formatTimes = times.map((time) => ({ value: format(time, "HH:mm"), active: - isAfter(time, addMinutes(new Date(), 30)) && + // isAfter(time, addMinutes(new Date(), 30)) && + isAfter(time, new Date()) && scheduledSessions.filter( (scheduledSession) => scheduledSession.startAt === time.toISOString() ).length < build.sessionLimit, diff --git a/src/components/icons/RotateDeviceIcon.tsx b/src/components/icons/RotateDeviceIcon.tsx new file mode 100644 index 0000000..f404188 --- /dev/null +++ b/src/components/icons/RotateDeviceIcon.tsx @@ -0,0 +1,30 @@ +function RotateDeviceIcon() { + return ( + + + + + + + + ); +} + +export default RotateDeviceIcon; diff --git a/src/i18n.ts b/src/i18n.ts index f228bcc..40b6e64 100644 --- a/src/i18n.ts +++ b/src/i18n.ts @@ -10,6 +10,7 @@ const resources = { translation: { loading: "Загрузка", loadingSub: "сек", + rotateDevice: "Поверните устройство", streamWaiting: "Ожидание потока", streamBuffering: "Буферизация потока", streamEnded: "Трансляция была завершена", @@ -124,6 +125,7 @@ const resources = { translation: { loading: "Loading", loadingSub: "sec", + rotateDevice: "Rotate device", streamWaiting: "Stream waiting", streamBuffering: "Stream buffering", streamEnded: "Stream has been ended", diff --git a/src/vite-env.d.ts b/src/vite-env.d.ts index 11f02fe..4e653fa 100644 --- a/src/vite-env.d.ts +++ b/src/vite-env.d.ts @@ -1 +1,6 @@ +/* eslint-disable @typescript-eslint/no-explicit-any */ /// + +interface URLSearchParams { + has(name: string, value?: any): boolean; +} diff --git a/yarn.lock b/yarn.lock index 8d955ae..aec0f17 100644 --- a/yarn.lock +++ b/yarn.lock @@ -45,10 +45,10 @@ resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.7.1.tgz#e93c13942592cf5ef01aa8297444dc192beee52f" integrity sha512-Qv4LTqO11jepd5Qmlp3M1YEjBumoTHcHFdgPTQ+sFlIL5myi/7xu/POwP7IRu6odBdmLXdtIs1D6TuW6kbwbbg== -"@epicgames-ps/lib-pixelstreamingfrontend-ue5.3@^0.0.2": - version "0.0.2" - resolved "https://registry.npmjs.org/@epicgames-ps/lib-pixelstreamingfrontend-ue5.3/-/lib-pixelstreamingfrontend-ue5.3-0.0.2.tgz" - integrity sha512-zAQbxOGQE0y9Qqcfv05tsI8wr0bsm9h65xN57Wy4EX9XL8ulTx4wwrF0z0bmW6bK+ccOp2jZMd56/oH6lNVQLQ== +"@epicgames-ps/lib-pixelstreamingfrontend-ue5.3@^1.0.1": + version "1.0.1" + resolved "https://registry.yarnpkg.com/@epicgames-ps/lib-pixelstreamingfrontend-ue5.3/-/lib-pixelstreamingfrontend-ue5.3-1.0.1.tgz#ba7d0fb42ede74109fcbb2510d7f6a4442bed7a0" + integrity sha512-DLeMbwi/szf4/rQAPXFl1YH5lT5kHJ2GcnxYNPvYVWZ9xgX5hjieREXyi8DaxCAPF81e+ev57TjZKJy7R3tvpw== dependencies: sdp "^3.1.0" @@ -329,7 +329,7 @@ "@socket.io/component-emitter@~3.1.0": version "3.1.0" - resolved "https://registry.npmjs.org/@socket.io/component-emitter/-/component-emitter-3.1.0.tgz" + resolved "https://registry.yarnpkg.com/@socket.io/component-emitter/-/component-emitter-3.1.0.tgz#96116f2a912e0c02817345b3c10751069920d553" integrity sha512-+9jVqKhRSpsc591z5vX+X5Yyw+he/HCB4iQ/RYxw35CEPaY1gnsNE43nf9n9AaYjAQrTiI/mOwKUKdUs9vf7Xg== "@swc/core-darwin-arm64@1.3.60": @@ -576,18 +576,6 @@ acorn@^8.8.0: resolved "https://registry.npmjs.org/acorn/-/acorn-8.8.2.tgz" integrity sha512-xjIYgE8HBrkpd/sJqOGNspf8uHG+NOHGOw6a/Urj8taM2EXfdNAH2oFcPeIFfsv3+kz/mJrS5VuMqbNLjCa2vw== -agora-rtc-sdk-ng@^4.18.2: - version "4.18.2" - resolved "https://registry.yarnpkg.com/agora-rtc-sdk-ng/-/agora-rtc-sdk-ng-4.18.2.tgz#86b0b7fd6763aef776f1d6aaa13c487062ee11f7" - integrity sha512-tvyuXHVL15Eo0lK3wwM3rGPKGPeGYuarAwCs5oyveht1HZO9z3w6vra3d/q3eOCYpvQscCW7P0QNfUIAQTs4RQ== - dependencies: - agora-rte-extension "^1.2.3" - -agora-rte-extension@^1.2.3: - version "1.2.3" - resolved "https://registry.yarnpkg.com/agora-rte-extension/-/agora-rte-extension-1.2.3.tgz#979b96df0146300296f9f37212ffa67656c698ef" - integrity sha512-k3yNrYVyzJRoQJjaJUktKUI1XRtf8J1XsW8OzYKFqGlS8WQRMsES1+Phj2rfuEriiLObfuyuCimG6KHQCt5tiw== - ajv@^6.10.0, ajv@^6.12.4: version "6.12.6" resolved "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz" @@ -857,21 +845,21 @@ email-regex@^5.0.0: resolved "https://registry.yarnpkg.com/email-regex/-/email-regex-5.0.0.tgz#c8b1f4c7f251929b53586a7a3891da09c8dea26d" integrity sha512-he76Cm8JFxb6OGQHabLBPdsiStgPmJeAEhctmw0uhonUh1pCBsHpI6/rB62s2GNzjBb0YlhIcF/1l9Lp5AfH0Q== -engine.io-client@~6.4.0: - version "6.4.0" - resolved "https://registry.npmjs.org/engine.io-client/-/engine.io-client-6.4.0.tgz" - integrity sha512-GyKPDyoEha+XZ7iEqam49vz6auPnNJ9ZBfy89f+rMMas8AuiMWOZ9PVzu8xb9ZC6rafUqiGHSCfu22ih66E+1g== +engine.io-client@~6.5.2: + version "6.5.3" + resolved "https://registry.yarnpkg.com/engine.io-client/-/engine.io-client-6.5.3.tgz#4cf6fa24845029b238f83c628916d9149c399bc5" + integrity sha512-9Z0qLB0NIisTRt1DZ/8U2k12RJn8yls/nXMZLn+/N8hANT3TcYjKFKcwbw5zFQiN4NTde3TSY9zb79e1ij6j9Q== dependencies: "@socket.io/component-emitter" "~3.1.0" debug "~4.3.1" - engine.io-parser "~5.0.3" + engine.io-parser "~5.2.1" ws "~8.11.0" xmlhttprequest-ssl "~2.0.0" -engine.io-parser@~5.0.3: - version "5.0.7" - resolved "https://registry.npmjs.org/engine.io-parser/-/engine.io-parser-5.0.7.tgz" - integrity sha512-P+jDFbvK6lE3n1OL+q9KuzdOFWkkZ/cMV9gol/SbVfpyqfvrfrFTOFJ6fQm2VC3PZHlU3QPhVwmbsCnauHF2MQ== +engine.io-parser@~5.2.1: + version "5.2.1" + resolved "https://registry.yarnpkg.com/engine.io-parser/-/engine.io-parser-5.2.1.tgz#9f213c77512ff1a6cc0c7a86108a7ffceb16fcfb" + integrity sha512-9JktcM3u18nU9N2Lz3bWeBgxVgOKpw7yhRaoxQA3FUDZzzw+9WlA6p4G4u0RixNkg14fH7EfEc/RhpurtiROTQ== esbuild@^0.17.5: version "0.17.19" @@ -1824,6 +1812,13 @@ react-countdown@^2.3.5: dependencies: prop-types "^15.7.2" +react-device-detect@^2.2.3: + version "2.2.3" + resolved "https://registry.yarnpkg.com/react-device-detect/-/react-device-detect-2.2.3.tgz#97a7ae767cdd004e7c3578260f48cf70c036e7ca" + integrity sha512-buYY3qrCnQVlIFHrC5UcUoAj7iANs/+srdkwsnNjI7anr3Tt7UY6MqNxtMLlr0tMBied0O49UZVK8XKs3ZIiPw== + dependencies: + ua-parser-js "^1.0.33" + react-display-name@^0.2.4: version "0.2.5" resolved "https://registry.yarnpkg.com/react-display-name/-/react-display-name-0.2.5.tgz#304c7cbfb59ee40389d436e1a822c17fe27936c6" @@ -2053,19 +2048,19 @@ slash@^3.0.0: resolved "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz" integrity sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q== -socket.io-client@^4.6.2: - version "4.6.2" - resolved "https://registry.npmjs.org/socket.io-client/-/socket.io-client-4.6.2.tgz" - integrity sha512-OwWrMbbA8wSqhBAR0yoPK6EdQLERQAYjXb3A0zLpgxfM1ZGLKoxHx8gVmCHA6pcclRX5oA/zvQf7bghAS11jRA== +socket.io-client@^4.7.2: + version "4.7.2" + resolved "https://registry.yarnpkg.com/socket.io-client/-/socket.io-client-4.7.2.tgz#f2f13f68058bd4e40f94f2a1541f275157ff2c08" + integrity sha512-vtA0uD4ibrYD793SOIAwlo8cj6haOeMHrGvwPxJsxH7CeIksqJ+3Zc06RvWTIFgiSqx4A3sOnTXpfAEE2Zyz6w== dependencies: "@socket.io/component-emitter" "~3.1.0" debug "~4.3.2" - engine.io-client "~6.4.0" + engine.io-client "~6.5.2" socket.io-parser "~4.2.4" socket.io-parser@~4.2.4: version "4.2.4" - resolved "https://registry.npmjs.org/socket.io-parser/-/socket.io-parser-4.2.4.tgz" + resolved "https://registry.yarnpkg.com/socket.io-parser/-/socket.io-parser-4.2.4.tgz#c806966cf7270601e47469ddeec30fbdfda44c83" integrity sha512-/GbIKmo8ioc+NIWIhwdecY0ge+qVBSMdgxGygevmdHj24bsfgtCmcUUcQ5ZzcylGFHsN3k4HB4Cgkl96KVnuew== dependencies: "@socket.io/component-emitter" "~3.1.0" @@ -2239,6 +2234,11 @@ typescript@^5.0.2: resolved "https://registry.npmjs.org/typescript/-/typescript-5.0.4.tgz" integrity sha512-cW9T5W9xY37cc+jfEnaUvX91foxtHkza3Nw3wkoF4sSlKn0MONdkdEndig/qPBWXNkmplh3NzayQzCiHM4/hqw== +ua-parser-js@^1.0.33: + version "1.0.37" + resolved "https://registry.yarnpkg.com/ua-parser-js/-/ua-parser-js-1.0.37.tgz#b5dc7b163a5c1f0c510b08446aed4da92c46373f" + integrity sha512-bhTyI94tZofjo+Dn8SN6Zv8nBDvyXTymAdM3LDI/0IboIUwTu1rEhW7v2TfiVsoYWgkQ4kOVqnI8APUFbIQIFQ== + ua-parser-js@^1.0.35: version "1.0.35" resolved "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-1.0.35.tgz" @@ -2330,12 +2330,12 @@ wrappy@1: ws@~8.11.0: version "8.11.0" - resolved "https://registry.npmjs.org/ws/-/ws-8.11.0.tgz" + resolved "https://registry.yarnpkg.com/ws/-/ws-8.11.0.tgz#6a0d36b8edfd9f96d8b25683db2f8d7de6e8e143" integrity sha512-HPG3wQd9sNQoT9xHyNCXoDUa+Xw/VevmY9FoHyQ+g+rrMn4j6FB4np7Z0OhdTgjx6MgQLK7jwSy1YecU1+4Asg== xmlhttprequest-ssl@~2.0.0: version "2.0.0" - resolved "https://registry.npmjs.org/xmlhttprequest-ssl/-/xmlhttprequest-ssl-2.0.0.tgz" + resolved "https://registry.yarnpkg.com/xmlhttprequest-ssl/-/xmlhttprequest-ssl-2.0.0.tgz#91360c86b914e67f44dce769180027c0da618c67" integrity sha512-QKxVRxiRACQcVuQEYFsI1hhkrMlrXHPegbbd1yn9UHOmRxY+si12nQYzri3vbzt8VdTTRviqcKxcyllFas5z2A== yallist@^4.0.0: