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-08-07 17:14:40 +05:00
parent 5e07a8952e
commit b8816f1935
16 changed files with 410 additions and 283 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/App.tsx
+3 -21
View File
@@ -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() {
</>
) : (
<div className="bg-[#14161F] h-screen flex justify-center items-center">
<p className="self-center text-white flex items-center w-fit font-gilroy">
<svg
className="animate-spin -ml-1 mr-3 h-5 w-5 text-white"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
>
<circle
className="opacity-25"
cx="12"
cy="12"
r="10"
stroke="currentColor"
strokeWidth="4"
></circle>
<path
className="opacity-75"
fill="currentColor"
d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
></path>
</svg>
<p className="self-center text-white flex items-center gap-2 w-fit font-gilroy">
<LoaderIcon className="animate-spin w-8 h-8" />
<span>
<Trans i18nKey="loading">Загрузка</Trans>
... {countdownTimer} <Trans i18nKey="loadingSub">сек</Trans>
src/StreamPage.tsx
+47 -250
View File
File diff suppressed because one or more lines are too long
src/components/icons/AdminUserIcon.tsx
+41
View File
@@ -0,0 +1,41 @@
function AdminUserIcon() {
return (
<svg
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<g id="Icon/Admin">
<path
id="Star 1"
d="M18.8097 15.5855C18.8696 15.4012 19.1303 15.4012 19.1901 15.5855L19.8531 17.6258C19.8798 17.7082 19.9566 17.764 20.0433 17.764H22.1886C22.3823 17.764 22.4629 18.0119 22.3062 18.1258L20.5706 19.3868C20.5005 19.4377 20.4711 19.528 20.4979 19.6104L21.1608 21.6507C21.2207 21.835 21.0098 21.9882 20.8531 21.8743L19.1175 20.6133C19.0474 20.5624 18.9525 20.5624 18.8824 20.6133L17.1468 21.8743C16.99 21.9882 16.7791 21.835 16.839 21.6507L17.5019 19.6104C17.5287 19.528 17.4994 19.4377 17.4293 19.3868L15.6937 18.1258C15.5369 18.0119 15.6175 17.764 15.8112 17.764H17.9565C18.0432 17.764 18.12 17.7082 18.1468 17.6258L18.8097 15.5855Z"
fill="url(#paint0_linear_0_1180)"
/>
<path
id="Subtract"
fillRule="evenodd"
clipRule="evenodd"
d="M12.0076 11.8077C14.5502 11.8077 16.6114 9.14648 16.6114 6.60385C16.6114 4.06121 14.5502 2 12.0076 2C9.46496 2 7.40376 4.06121 7.40376 6.60385C7.40376 9.14648 9.46496 11.8077 12.0076 11.8077ZM12.4099 21.0002L12.0077 21.0002L11.6055 21.0002C7.36172 21.0009 5.98317 21.0011 4.80091 20.2667C4.23057 19.9124 3.94947 19.26 4.00747 18.5842C4.08669 17.6613 4.40916 16.7395 4.7375 16.0084L4.8071 15.8531C5.18982 14.9983 5.38323 14.5663 6.01888 13.9271C7.03529 12.905 8.14618 13.3785 9.39319 13.91C10.2034 14.2553 11.0711 14.6252 12.0077 14.6252C12.9443 14.6252 13.812 14.2553 14.6222 13.91C15.8014 13.4073 16.8589 12.9566 17.8299 13.7734C17.4203 14.0254 17.0844 14.4234 16.9077 14.9674L16.6489 15.764H15.8113C13.6801 15.764 12.794 18.4911 14.5182 19.7438L15.1958 20.2361L14.9504 20.9912C14.2374 21.0005 13.402 21.0004 12.4099 21.0002Z"
fill="#F2F2F2"
/>
</g>
<defs>
<linearGradient
id="paint0_linear_0_1180"
x1="22.389"
y1="15.4473"
x2="15.93"
y2="22.2179"
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#BC75FF" />
<stop offset="1" stopColor="#798FFF" />
</linearGradient>
</defs>
</svg>
);
}
export default AdminUserIcon;
src/components/icons/DesktopIcon.tsx
+29
View File
@@ -0,0 +1,29 @@
function DesktopIcon() {
return (
<svg
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<g id="Icon/Desktop">
<path
id="Rectangle 1048"
d="M9.6 16.8889H5C4.44771 16.8889 4 16.4412 4 15.8889V7C4 6.44772 4.44772 6 5 6H19C19.5523 6 20 6.44772 20 7V15.8889C20 16.4412 19.5523 16.8889 19 16.8889H14.4M9.6 16.8889L8.96059 19.3755C8.87924 19.6919 9.11817 20 9.44484 20H14.5552C14.8818 20 15.1208 19.6919 15.0394 19.3755L14.4 16.8889M9.6 16.8889H14.4"
stroke="#F2F2F2"
/>
<rect
id="Rectangle 1049"
x="6"
y="8"
width="12"
height="7"
stroke="#F2F2F2"
/>
</g>
</svg>
);
}
export default DesktopIcon;
src/components/icons/ExitIcon.tsx
+24
View File
@@ -0,0 +1,24 @@
function ExitIcon() {
return (
<svg
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<g id="Icon/Exit">
<path
id="Vector 57"
d="M16.5 20L7 20C6.44772 20 6 19.5523 6 19L6 5C6 4.44772 6.44772 4 7 4L16.5 4M20 12L9.50016 11.9997M20 12L16.5 15.5556M20 12L16.5 8.44444"
stroke="#F2F2F2"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
/>
</g>
</svg>
);
}
export default ExitIcon;
src/components/icons/FullscreenIcon.tsx
+24
View File
@@ -0,0 +1,24 @@
function FullscreenIcon() {
return (
<svg
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<g id="Icon/OpenFullscreen">
<path
id="expand"
d="M9 20H4M4 20L4 15M4 20L9 15M15 9L20 4M19.997 9V4L15 4"
stroke="#F2F2F2"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
/>
</g>
</svg>
);
}
export default FullscreenIcon;
src/components/icons/HandOffIcon.tsx
+38
View File
File diff suppressed because one or more lines are too long
src/components/icons/HandOnIcon.tsx
+23
View File
@@ -0,0 +1,23 @@
function HandOnIcon() {
return (
<svg
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<g id="Icon/HandOn">
<path
id="Vector"
d="M9.49525 2.00294C9.89847 2.00294 10.2047 2.31686 10.2047 2.73115V8.58062V11.5728C10.2047 11.6516 10.2198 11.7297 10.2492 11.8025C10.2786 11.8753 10.3217 11.9415 10.376 11.9973C10.4303 12.053 10.4947 12.0972 10.5657 12.1274C10.6366 12.1576 10.7126 12.1731 10.7894 12.1731C10.8662 12.1731 10.9422 12.1576 11.0131 12.1274C11.0841 12.0972 11.1485 12.053 11.2028 11.9973C11.2571 11.9415 11.3002 11.8753 11.3296 11.8025C11.359 11.7297 11.3741 11.6516 11.3741 11.5728V8.58062C11.3741 8.16633 11.6806 7.8516 12.0835 7.8516C12.4865 7.8516 12.793 8.16633 12.793 8.58062V9.38624V11.5728C12.793 11.6516 12.8081 11.7297 12.8375 11.8025C12.8669 11.8753 12.91 11.9415 12.9643 11.9973C13.0186 12.053 13.083 12.0972 13.1539 12.1274C13.2249 12.1576 13.3009 12.1731 13.3777 12.1731C13.4545 12.1731 13.5305 12.1576 13.6014 12.1274C13.6724 12.0972 13.7368 12.053 13.7911 11.9973C13.8454 11.9415 13.8885 11.8753 13.9179 11.8025C13.9473 11.7297 13.9624 11.6516 13.9624 11.5728V9.38624C13.9624 8.97195 14.2689 8.65723 14.6718 8.65723C15.0748 8.65723 15.3813 8.97195 15.3813 9.38624V10.3801V11.5728C15.3813 11.6516 15.3964 11.7297 15.4258 11.8025C15.4552 11.8753 15.4983 11.9415 15.5526 11.9973C15.6069 12.053 15.6713 12.0972 15.7422 12.1274C15.8132 12.1576 15.8892 12.1731 15.966 12.1731C16.0428 12.1731 16.1188 12.1576 16.1897 12.1274C16.2607 12.0972 16.3251 12.053 16.3794 11.9973C16.4337 11.9415 16.4768 11.8753 16.5062 11.8025C16.5356 11.7297 16.5507 11.6516 16.5507 11.5728V10.3801C16.5507 9.96551 16.8572 9.65078 17.2601 9.65078C17.6631 9.65078 17.9696 9.96551 17.9696 10.3801C17.9696 10.3801 18.0375 13.6677 17.9704 15.2491C17.934 16.1003 17.7234 17.2992 16.9211 18.2591C16.1194 19.219 14.7072 20.0222 11.9962 19.9995C10.3875 19.9728 9.3806 19.2654 8.64072 18.3736C7.90109 17.4815 7.4893 16.4337 7.20255 15.7982C6.54793 14.3476 5.10014 11.6571 5.10014 11.6571C4.89736 11.2983 5.01175 10.8678 5.36011 10.6609C5.70926 10.4527 6.12678 10.5701 6.32852 10.9278L7.7004 13.3685C7.76482 13.4828 7.86416 13.5721 7.98304 13.6226C8.10192 13.6731 8.23369 13.6819 8.35794 13.6477C8.4822 13.6135 8.592 13.5382 8.67033 13.4334C8.74867 13.3286 8.79117 13.2002 8.79124 13.0682V2.72821C8.79124 2.31392 9.09749 2 9.50097 2L9.49525 2.00294Z"
fill="#F2F2F2"
stroke="#F2F2F2"
strokeWidth="1.2"
/>
</g>
</svg>
);
}
export default HandOnIcon;
src/components/icons/LoaderIcon.tsx
+4 -4
View File
@@ -16,20 +16,20 @@ function LoaderIcon({ className }: IconProps) {
<path
id="Ellipse 221"
d="M18.9999 12C19.5523 12 20.0064 11.5505 19.9376 11.0025C19.745 9.46994 19.1116 8.01808 18.1039 6.82871C16.8797 5.38372 15.1826 4.41989 13.3144 4.10872C11.4463 3.79755 9.52839 4.15922 7.90189 5.12938C6.27539 6.09953 5.04582 7.61525 4.43194 9.40685C3.81806 11.1985 3.85968 13.1497 4.54941 14.9135C5.23914 16.6773 6.53224 18.1392 8.19863 19.0391C9.86502 19.9391 11.7966 20.2186 13.6498 19.828C15.1751 19.5066 16.5658 18.7483 17.6578 17.6559C18.0483 17.2653 17.9652 16.6317 17.529 16.2929C17.0927 15.9542 16.4693 16.0409 16.0629 16.4149C15.2735 17.1413 14.2989 17.6472 13.2373 17.8709C11.8475 18.1638 10.3988 17.9541 9.14904 17.2792C7.89928 16.6043 6.92948 15.5079 6.4122 14.1851C5.89491 12.8623 5.86369 11.3989 6.32409 10.0552C6.78449 8.71152 7.70665 7.57476 8.92649 6.84716C10.1463 6.11956 11.5847 5.84832 12.9858 6.08169C14.3869 6.31506 15.6597 7.03791 16.5778 8.12163C17.2791 8.94938 17.7387 9.94667 17.9167 11.0045C18.0083 11.5492 18.4476 12 18.9999 12Z"
fill="url(#paint0_angular_16_1186)"
fill="url(#paint0_angular_0_1327)"
/>
</g>
<defs>
<radialGradient
id="paint0_angular_16_1186"
id="paint0_angular_0_1327"
cx="0"
cy="0"
r="1"
gradientUnits="userSpaceOnUse"
gradientTransform="translate(12 12) rotate(45) scale(7.9196)"
>
<stop offset="0.874517" stopColor="white" />
<stop offset="0.982613" stopColor="white" stopOpacity="0" />
<stop offset="0.874517" stop-color="white" />
<stop offset="0.982613" stop-color="white" stop-opacity="0" />
</radialGradient>
</defs>
</svg>
src/components/icons/MobilePhoneIcon.tsx
+21
View File
@@ -0,0 +1,21 @@
function MobilePhoneIcon() {
return (
<svg
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<g id="Icon/iPhone">
<path
id="Rectangle 1048"
d="M9.5 4H9C7.89543 4 7 4.89543 7 6V18C7 19.1046 7.89543 20 9 20H15C16.1046 20 17 19.1046 17 18V6C17 4.89543 16.1046 4 15 4H14.5M9.5 4L9.90532 5.62127C9.96096 5.84385 10.161 6 10.3904 6H13.6096C13.839 6 14.039 5.84385 14.0947 5.62127L14.5 4M9.5 4H14.5"
stroke="#F2F2F2"
/>
</g>
</svg>
);
}
export default MobilePhoneIcon;
src/components/icons/QRIcon.tsx
+57
View File
@@ -0,0 +1,57 @@
function QRIcon() {
return (
<svg
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<g id="Icon/QR">
<path
id="Rectangle 1062"
d="M13 14C13 13.4477 13.4477 13 14 13H15C15.5523 13 16 13.4477 16 14V15C16 15.5523 15.5523 16 15 16H14C13.4477 16 13 15.5523 13 15V14Z"
fill="#F2F2F2"
/>
<path
id="Rectangle 1063"
d="M18 14C18 13.4477 18.4477 13 19 13H20C20.5523 13 21 13.4477 21 14V15C21 15.5523 20.5523 16 20 16H19C18.4477 16 18 15.5523 18 15V14Z"
fill="#F2F2F2"
/>
<path
id="Rectangle 1064"
d="M18 19C18 18.4477 18.4477 18 19 18H20C20.5523 18 21 18.4477 21 19V20C21 20.5523 20.5523 21 20 21H19C18.4477 21 18 20.5523 18 20V19Z"
fill="#F2F2F2"
/>
<path
id="Rectangle 1065"
d="M13 19C13 18.4477 13.4477 18 14 18H15C15.5523 18 16 18.4477 16 19V20C16 20.5523 15.5523 21 15 21H14C13.4477 21 13 20.5523 13 20V19Z"
fill="#F2F2F2"
/>
<path
id="Exclude"
fillRule="evenodd"
clipRule="evenodd"
d="M4 3C3.44772 3 3 3.44772 3 4V10C3 10.5523 3.44772 11 4 11H10C10.5523 11 11 10.5523 11 10V4C11 3.44772 10.5523 3 10 3H4ZM9 5H5V9H9V5Z"
fill="#F2F2F2"
/>
<path
id="Exclude_2"
fillRule="evenodd"
clipRule="evenodd"
d="M14 3C13.4477 3 13 3.44772 13 4V10C13 10.5523 13.4477 11 14 11H20C20.5523 11 21 10.5523 21 10V4C21 3.44772 20.5523 3 20 3H14ZM19 5H15V9H19V5Z"
fill="#F2F2F2"
/>
<path
id="Exclude_3"
fillRule="evenodd"
clipRule="evenodd"
d="M4 13C3.44772 13 3 13.4477 3 14V20C3 20.5523 3.44772 21 4 21H10C10.5523 21 11 20.5523 11 20V14C11 13.4477 10.5523 13 10 13H4ZM9 15H5V19H9V15Z"
fill="#F2F2F2"
/>
</g>
</svg>
);
}
export default QRIcon;
src/components/icons/ShareIcon.tsx
+1 -1
View File
@@ -12,7 +12,7 @@ function ShareIcon() {
id="Vector 1835"
d="M16 18L5 12L16 6"
stroke="#F2F2F2"
stroke-width="2"
strokeWidth="2"
/>
<circle id="Ellipse 226" cx="5" cy="12" r="3" fill="#F2F2F2" />
<circle id="Ellipse 227" cx="16" cy="6" r="3" fill="#F2F2F2" />
src/components/icons/UserIcon.tsx
+26
View File
@@ -0,0 +1,26 @@
function UserIcon() {
return (
<svg
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<g id="Icon/Person">
<g id="user">
<path
d="M16.6114 6.60385C16.6114 9.14648 14.5502 11.8077 12.0076 11.8077C9.46496 11.8077 7.40376 9.14648 7.40376 6.60385C7.40376 4.06121 9.46496 2 12.0076 2C14.5502 2 16.6114 4.06121 16.6114 6.60385Z"
fill="#F2F2F2"
/>
<path
d="M12.0077 21.0002C16.5682 21.0002 17.9956 21.0238 19.2145 20.2667C19.7848 19.9124 20.0659 19.26 20.0079 18.5842C19.9287 17.6613 19.6062 16.7395 19.2779 16.0084C18.8468 15.0484 18.6695 14.6039 17.9965 13.9271C16.3197 12.2408 14.3857 14.6252 12.0077 14.6252C9.62965 14.6252 7.69569 12.2408 6.01888 13.9271C5.34585 14.6039 5.1686 15.0484 4.7375 16.0084C4.40916 16.7395 4.08669 17.6613 4.00747 18.5842C3.94947 19.26 4.23057 19.9124 4.80091 20.2667C6.01975 21.0238 7.44722 21.0002 12.0077 21.0002Z"
fill="#F2F2F2"
/>
</g>
</g>
</svg>
);
}
export default UserIcon;
src/components/icons/WindowedModeIcon.tsx
+24
View File
@@ -0,0 +1,24 @@
function WindowedModeIcon() {
return (
<svg
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<g id="Icon/CloseFullscreen">
<path
id="expand"
d="M3 15.3751H8.62474M8.62474 15.3751V21M8.62474 15.3751L3 21M21 3L15.375 8.62515M15.375 8.62515V3M15.375 8.62515H21"
stroke="#F2F2F2"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
/>
</g>
</svg>
);
}
export default WindowedModeIcon;
src/components/modals/QRCodeModal.tsx
+41
View File
@@ -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 (
<div className="relative p-10 bg-[#131317] rounded shadow-lg w-[320px]">
<div className="flex flex-col items-center gap-8">
<p className="font-gilroy text-xl">
<Trans i18nKey={"scanQRCode"}>
Отсканируйте QR-код
<br />
чтобы подключиться
<br />к текущей демонстрации
</Trans>
</p>
<QRCode
bgColor="#131317"
fgColor="#F2F2F2"
size={256}
value={`https://stream.graff.tech/stream/${params.id}`}
viewBox={`0 0 256 256`}
/>
</div>
<button
onClick={() => setModal(null)}
className="absolute top-3 right-3 p-2 rounded-full transition-colors hover:bg-white hover:bg-opacity-5"
>
<CloseIcon />
</button>
</div>
);
}
export default QRCodeModal;
src/components/modals/ShareModal.tsx
+7 -7
View File
@@ -54,14 +54,14 @@ function ShareModal() {
<span className="text-sm">Скопировать</span>
</button>
</div>
<button
onClick={() => setModal(null)}
className="absolute top-3 right-3 p-2 rounded-full transition-colors hover:bg-white hover:bg-opacity-5"
>
<CloseIcon />
</button>
</div>
<button
onClick={() => setModal(null)}
className="absolute top-3 right-3 p-2 rounded-full transition-colors hover:bg-white hover:bg-opacity-5"
>
<CloseIcon />
</button>
</div>
<ToastContainer />