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-08 19:42:14 +05:00
parent b8816f1935
commit 12ca24ad6a
10 changed files with 263 additions and 217 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/icons/ChevronDownIcon.tsx
+28
View File
@@ -0,0 +1,28 @@
interface IconProps {
className?: string;
}
function ChevronDownIcon({ className }: IconProps) {
return (
<svg
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
className={className}
>
<g id="Icon/Chevron_Down">
<path
id="Vector 106 (Stroke)"
fillRule="evenodd"
clipRule="evenodd"
d="M11.2929 16.7071C11.6834 17.0976 12.3166 17.0976 12.7071 16.7071L19.7071 9.70713C20.0976 9.31661 20.0976 8.68344 19.7071 8.29292C19.3165 7.90239 18.6834 7.90239 18.2928 8.29292L12 14.5858L5.70711 8.29292C5.31658 7.90239 4.68342 7.90239 4.29289 8.29292C3.90237 8.68344 3.90237 9.31661 4.29289 9.70713L11.2929 16.7071Z"
fill="white"
/>
</g>
</svg>
);
}
export default ChevronDownIcon;
src/components/icons/ChevronLeftIcon.tsx
+6 -1
View File
@@ -1,4 +1,8 @@
function ChevronLeftIcon() {
interface IconProps {
className?: string;
}
function ChevronLeftIcon({ className }: IconProps) {
return (
<svg
width="24"
@@ -6,6 +10,7 @@ function ChevronLeftIcon() {
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
className={className}
>
<g id="Icon/Chevron_Left">
<path
src/components/icons/ChevronRightIcon.tsx
+6 -1
View File
@@ -1,4 +1,8 @@
function ChevronRightIcon() {
interface IconProps {
className?: string;
}
function ChevronRightIcon({ className }: IconProps) {
return (
<svg
width="24"
@@ -6,6 +10,7 @@ function ChevronRightIcon() {
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
className={className}
>
<g id="Icon/Chevron_Right">
<path
src/components/icons/LoaderIcon.tsx
+2 -2
View File
@@ -28,8 +28,8 @@ function LoaderIcon({ className }: IconProps) {
gradientUnits="userSpaceOnUse"
gradientTransform="translate(12 12) rotate(45) scale(7.9196)"
>
<stop offset="0.874517" stop-color="white" />
<stop offset="0.982613" stop-color="white" stop-opacity="0" />
<stop offset="0.874517" stopColor="white" />
<stop offset="0.982613" stopColor="white" stopOpacity="0" />
</radialGradient>
</defs>
</svg>
src/components/icons/PersonsIcon.tsx
+33
View File
@@ -0,0 +1,33 @@
function PersonsIcon() {
return (
<svg
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<g id="Icon/Persons">
<g id="user">
<path
d="M17.4495 8.63457C17.4495 10.6419 15.9051 12.7428 13.9999 12.7428C12.0948 12.7428 10.5504 10.6419 10.5504 8.63457C10.5504 6.62725 12.0948 5 13.9999 5C15.9051 5 17.4495 6.62725 17.4495 8.63457Z"
fill="#F2F2F2"
/>
<path
d="M14 19.9999C17.4171 19.9999 18.4866 20.0186 19.3999 19.4209C19.8272 19.1412 20.0379 18.6262 19.9944 18.0927C19.935 17.364 19.6934 16.6363 19.4474 16.0591C19.1244 15.3012 18.9916 14.9503 18.4873 14.416C17.2309 13.0848 15.7818 14.9671 14 14.9671C12.2182 14.9671 10.7691 13.0848 9.51271 14.416C9.00842 14.9503 8.87561 15.3012 8.55259 16.0591C8.30658 16.6363 8.06495 17.364 8.0056 18.0927C7.96214 18.6262 8.17276 19.1412 8.6001 19.4209C9.51336 20.0186 10.5829 19.9999 14 19.9999Z"
fill="#F2F2F2"
/>
</g>
<path
id="Subtract"
fillRule="evenodd"
clipRule="evenodd"
d="M10.8041 10.0751C11.7912 9.29544 12.4495 7.94506 12.4495 6.63457C12.4495 6.23357 12.3879 5.84773 12.274 5.48701C11.2435 6.11561 10.5503 7.28985 10.5503 8.63469C10.5503 9.11967 10.6405 9.61012 10.8041 10.0751ZM8.91837 10.7415C7.0509 10.6827 5.55037 8.61317 5.55037 6.63457C5.55037 4.62725 7.09478 3 8.99993 3C9.82378 3 10.5802 3.3043 11.1734 3.81204C9.57742 4.81661 8.55031 6.64022 8.55031 8.63469C8.55031 9.35547 8.68173 10.0702 8.91837 10.7415ZM6.0089 17.9735C4.79527 17.9257 4.16752 17.7923 3.6001 17.4209C3.17276 17.1412 2.96214 16.6262 3.0056 16.0927C3.06495 15.364 3.30658 14.6363 3.55259 14.0591L3.60475 13.9365C3.89151 13.2617 4.03642 12.9206 4.51271 12.416C5.27428 11.6091 6.10665 11.9829 7.041 12.4025C7.42296 12.574 7.82195 12.7532 8.24012 12.8625C8.17815 12.9202 8.11747 12.9805 8.05815 13.0434C7.33114 13.8137 7.06365 14.4459 6.77613 15.1255L6.71268 15.2751C6.42491 15.9502 6.09598 16.9012 6.01215 17.9304C6.01098 17.9447 6.0099 17.9591 6.0089 17.9735ZM14.7454 14.8664C14.8661 15.2559 14.9603 15.6741 14.9944 16.0927C15.0379 16.6262 14.8272 17.1412 14.3999 17.4209C13.5141 18.0007 12.4811 18.0005 9.30138 18L9 17.9999L8.69862 18C8.45849 18 8.2306 18 8.01409 17.9998C8.08546 17.3025 8.31698 16.6119 8.55254 16.0592L8.60469 15.9366C8.89145 15.2618 9.03637 14.9208 9.51265 14.4161C10.2742 13.6092 11.1066 13.983 12.0409 14.4026C12.648 14.6753 13.2982 14.9672 13.9999 14.9672C14.2551 14.9672 14.5035 14.9286 14.7454 14.8664ZM13.7595 12.7318C13.1417 12.6743 12.5687 12.3982 12.083 11.9825C12.579 11.877 13.0451 11.9475 13.4873 12.416C13.5925 12.5274 13.6815 12.6309 13.7595 12.7318Z"
fill="#F2F2F2"
/>
</g>
</svg>
);
}
export default PersonsIcon;
src/components/modals/QRCodeModal.tsx
+5 -7
View File
@@ -1,17 +1,15 @@
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">
<div className="relative lg:p-10 p-6 bg-[#131317] rounded shadow-lg w-[320px]">
<div className="flex flex-col items-center lg:gap-8 gap-4">
<p className="font-gilroy lg:text-xl">
<Trans i18nKey={"scanQRCode"}>
Отсканируйте QR-код
<br />
@@ -22,8 +20,8 @@ function QRCodeModal() {
<QRCode
bgColor="#131317"
fgColor="#F2F2F2"
size={256}
value={`https://stream.graff.tech/stream/${params.id}`}
size={128}
value={window.location.href}
viewBox={`0 0 256 256`}
/>
</div>
src/components/modals/ShareModal.tsx
+4 -4
View File
@@ -30,15 +30,15 @@ function ShareModal() {
return (
<>
<div className="relative p-10 bg-[#131317] rounded shadow-lg w-[320px]">
<div className="flex flex-col gap-8">
<p className="font-gilroy text-2xl">
<div className="relative lg:p-10 p-6 bg-[#131317] rounded shadow-lg w-[320px]">
<div className="flex flex-col lg:gap-8 gap-4">
<p className="font-gilroy lg:text-2xl">
Пригласить
<br />
на демонстрацию
</p>
<div className="flex flex-col gap-4">
<p className="font-gilroy text-xl">Ссылка для подключения</p>
<p className="font-gilroy lg:text-xl">Ссылка для подключения</p>
<input
ref={clipboard.target}
readOnly
src/components/modals/UsersManagementModal.tsx
+96
View File
@@ -0,0 +1,96 @@
import useModalStore from "../../stores/useModalStore";
import userAgentParser from "ua-parser-js";
import AdminUserIcon from "../icons/AdminUserIcon";
import DesktopIcon from "../icons/DesktopIcon";
import ExitIcon from "../icons/ExitIcon";
import HandOffIcon from "../icons/HandOffIcon";
import HandOnIcon from "../icons/HandOnIcon";
import MobilePhoneIcon from "../icons/MobilePhoneIcon";
import UserIcon from "../icons/UserIcon";
import CloseIcon from "../icons/CloseIcon";
/* eslint-disable @typescript-eslint/no-explicit-any */
interface UsersManagementModalProps {
users: any[];
me: any;
handleUpdate: (socketId: string, params: any) => void;
handleKick: (socketId: string) => void;
}
function UsersManagementModal({
users,
me,
handleUpdate,
handleKick,
}: UsersManagementModalProps) {
const [setModal] = useModalStore((state) => [state.setModal]);
return (
<div className="relative lg:p-10 p-6 bg-[#131317] rounded shadow-lg w-[320px] flex flex-col gap-2">
{users.map((user: any, index: number) => (
<div key={index} className="relative">
<div className="flex items-center gap-2 text-white">
<div className="flex flex-col">
{user.admin ? <AdminUserIcon /> : <UserIcon />}
{me && me.id === user.id && (
<span className="text-[#73788C] text-sm">Вы</span>
)}
</div>
{new userAgentParser().getDevice().type !== "mobile" ? (
<DesktopIcon />
) : (
<MobilePhoneIcon />
)}
<span className="text-sm">{user.city}</span>
{!user.admin && (
<>
{!user.allowControl ? (
<button
onClick={() =>
handleUpdate(user.id, { allowControl: true })
}
className="outline-none"
>
<HandOffIcon />
</button>
) : (
<button
onClick={() =>
handleUpdate(user.id, { allowControl: false })
}
className="outline-none"
>
<HandOnIcon />
</button>
)}
</>
)}
{me && me.admin && !user.admin && (
<button
onClick={() => handleKick(user.id)}
className="outline-none"
>
<ExitIcon />
</button>
)}
</div>
<div className="relative"></div>
</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 UsersManagementModal;