inmake/stream.graff.tech-client
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

upd

Browse Source
This commit is contained in:
inmake
2023-11-23 13:46:21 +05:00
parent 8b098ce276
commit 6a389bc424
10 changed files with 101 additions and 80 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.env
+2 -2
View File
@@ -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
VITE_CRM_API_URL=https://crm.stream.graff.tech/api
package.json
+3 -3
View File
@@ -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",
src/MonitoringPage.tsx
+3 -3
View File
@@ -55,7 +55,7 @@ function MonitoringPage() {
<>
<div className="flex flex-col gap-2 border-b border-[#22222A] pb-4 text-sm">
<p>Сервера:</p>
<div className="grid lg:grid-cols-3 gap-2">
<div className="grid lg:grid-cols-4 gap-2">
{servers.length > 0 ? (
servers.map((server: any) => (
<div key={server.id} className="p-4 bg-[#22222A] rounded">
@@ -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`}
/>
</div>
@@ -169,7 +169,7 @@ function MonitoringPage() {
<div className="grid lg:grid-cols-1 grid-cols-2 gap-4 lg:w-auto w-full">
<a
href={`https://stream.graff.tech/stream/${session.id}`}
href={`https://stream.graff.tech/stream/${session.id}?admin=true`}
target="_blank"
className="inline-block text-center px-4 py-2 bg-blue-600 hover:bg-blue-500 transition-colors rounded"
>
src/ScheduledPage.tsx
+2 -6
View File
@@ -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);
src/StreamPage.tsx
+18 -30
View File
@@ -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<string>();
@@ -60,10 +63,8 @@ function StreamPage() {
state.setUsers,
]);
const [isShowChat, setIsShowChat] = useState<boolean>(false);
const [lastActivity, setLastActivity] = useState<Date>(new Date());
const lastActivityRef = useRef<Date>();
lastActivityRef.current = lastActivity;
const [stopwatch, setStopwatch] = useState<string>();
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(<AFKTimerModal />);
// setModal(<AFKTimerModal />);
}
});
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() {
<FullScreen handle={handleFullScreen} className="h-screen text-[#F2F2F2]">
{!isStreamEnded ? (
isStreamLoaded ? (
<>{streamUrl && <Player ss={streamUrl} />}</>
<>
{orientation === "landscape" ? (
<>{streamUrl && <Player ss={streamUrl} />}</>
) : (
<div className="absolute top-0 left-0 w-full h-full flex flex-col justify-center items-center gap-2">
<RotateDeviceIcon />
<Trans i18nKey="rotateDevice">Поверните устройство</Trans>
</div>
)}
</>
) : (
<div className="absolute top-0 left-0 w-full h-full flex justify-center items-center">
<Trans i18nKey="streamWaiting">Ожидание потока</Trans>
src/components/SidebarTab2.tsx
+2 -2
View File
@@ -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,
src/components/icons/RotateDeviceIcon.tsx
+30
View File
@@ -0,0 +1,30 @@
function RotateDeviceIcon() {
return (
<svg
xmlns="http://www.w3.org/2000/svg"
version="1.1"
width="64"
height="64"
x="0"
y="0"
viewBox="0 0 96 96"
>
<g>
<path
d="M21.134 18.719c0-.989-.802-1.791-1.791-1.791h-2.388a1.791 1.791 0 0 0 0 3.582h2.388a1.79 1.79 0 0 0 1.791-1.791z"
fill="currentColor"
></path>
<path
d="M80.417 48.246H45.015V16.212c0-4.097-2.307-6.448-6.329-6.448H15.308C10.937 9.764 8 12.355 8 16.212v49.529c0 4.03 3.278 7.306 7.308 7.306h8.268v5.877c0 4.032 3.28 7.311 7.311 7.311h49.53a7.318 7.318 0 0 0 7.311-7.311V55.557c0-4.032-3.28-7.311-7.311-7.311zm-65.109 21.22a3.73 3.73 0 0 1-3.726-3.724v-49.53c0-2.659 2.852-2.866 3.726-2.866h23.379c2.002 0 2.747.777 2.747 2.866v32.034H30.887c-4.031 0-7.311 3.279-7.311 7.311v4.356h-1.845a1.791 1.791 0 0 0 0 3.582h1.845v5.97h-8.268zm68.838 9.459a3.733 3.733 0 0 1-3.729 3.729h-49.53a3.732 3.732 0 0 1-3.728-3.729V55.557a3.733 3.733 0 0 1 3.728-3.729h49.53a3.733 3.733 0 0 1 3.729 3.729z"
fill="currentColor"
></path>
<path
d="M79.045 55.137c-.989 0-1.791.802-1.791 1.791v2.388a1.791 1.791 0 0 0 3.582 0v-2.388c0-.988-.802-1.791-1.791-1.791zM34.751 59.934c-.989 0-1.791.802-1.791 1.791v8.643a1.791 1.791 0 0 0 3.582 0v-8.643c0-.988-.802-1.791-1.791-1.791zM85.062 33.141l-4.777 3.981v-7.747c0-9.512-7.711-17.222-17.222-17.222h-10.19c-.892 0-1.719.609-1.863 1.49a1.793 1.793 0 0 0 1.766 2.093h10.287c7.533 0 13.639 6.106 13.639 13.639v7.748l-4.778-3.981a1.79 1.79 0 0 0-2.698.477c-.452.768-.207 1.765.478 2.336l7.508 6.257a2 2 0 0 0 2.561 0l7.581-6.319a1.792 1.792 0 0 0-2.292-2.752z"
fill="currentColor"
></path>
</g>
</svg>
);
}
export default RotateDeviceIcon;
src/i18n.ts
+2
View File
@@ -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",
src/vite-env.d.ts
Vendored
+5
View File
@@ -1 +1,6 @@
/* eslint-disable @typescript-eslint/no-explicit-any */
/// <reference types="vite/client" />
interface URLSearchParams {
has(name: string, value?: any): boolean;
}
yarn.lock
+34 -34
View File
@@ -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: