Transfer speed
29 |
23 |
24 |
28 |
30 | );
31 | }
32 |
--------------------------------------------------------------------------------
/client/src/components/routes/Home/Features.tsx:
--------------------------------------------------------------------------------
1 | import { CheckCircle, Globe, Lock } from "lucide-react";
2 |
3 | const FEATURES = [
4 | {
5 | icon:
24 | {FEATURES.map(({ icon, heading, text }) => (
25 |
34 | );
35 | }
36 |
--------------------------------------------------------------------------------
/client/src/components/ui/tooltip.tsx:
--------------------------------------------------------------------------------
1 | import * as React from "react"
2 | import * as TooltipPrimitive from "@radix-ui/react-tooltip"
3 |
4 | import { cn } from "@/lib/utils"
5 |
6 | const TooltipProvider = TooltipPrimitive.Provider
7 |
8 | const Tooltip = TooltipPrimitive.Root
9 |
10 | const TooltipTrigger = TooltipPrimitive.Trigger
11 |
12 | const TooltipContent = React.forwardRef<
13 | React.ElementRef
26 |
32 | ))}
33 |
27 | {icon}
28 |
30 | {heading}
29 |{text}
31 |
27 |
53 | );
54 | }
55 |
--------------------------------------------------------------------------------
/client/src/components/routes/Room/UsernameTakenDialog.tsx:
--------------------------------------------------------------------------------
1 | import {
2 | AlertDialog,
3 | AlertDialogAction,
4 | AlertDialogCancel,
5 | AlertDialogContent,
6 | AlertDialogDescription,
7 | AlertDialogFooter,
8 | AlertDialogHeader,
9 | AlertDialogTitle,
10 | } from "@/components/ui/alert-dialog";
11 | import { useNavigate } from "react-router-dom";
12 |
13 | interface DownloadDialogProps {
14 | open: boolean;
15 | username: string;
16 | roomId: string;
17 | }
18 |
19 | export default function UsernameTakenDialog({
20 | open,
21 | username,
22 | roomId,
23 | }: DownloadDialogProps) {
24 | const navigate = useNavigate();
25 |
26 | return (
27 | {data.label}
28 |44 | {children} 45 |
46 | )); 47 | AlertTitle.displayName = "AlertTitle"; 48 | 49 | const AlertDescription = React.forwardRef< 50 | HTMLParagraphElement, 51 | React.HTMLAttributes
41 |
42 |
43 | Choose a Nickname
44 |
45 | Nicknames are used to identify devices in a room.
46 |
47 |
48 |
49 |
61 |
62 |
63 |
64 | );
65 | }
66 |
--------------------------------------------------------------------------------
/client/src/components/ui/card.tsx:
--------------------------------------------------------------------------------
1 | import * as React from "react";
2 |
3 | import { cn } from "@/lib/utils";
4 |
5 | const Card = React.forwardRef<
6 | HTMLDivElement,
7 | React.HTMLAttributes41 | {children} 42 |
43 | )); 44 | CardTitle.displayName = "CardTitle"; 45 | 46 | const CardDescription = React.forwardRef< 47 | HTMLParagraphElement, 48 | React.HTMLAttributes
38 |
72 | );
73 | }
74 |
--------------------------------------------------------------------------------
/client/src/components/routes/Room/NetworkGraph/utils.ts:
--------------------------------------------------------------------------------
1 | import { Position, type Node } from "@xyflow/react";
2 |
3 | // returns the position (top,right,bottom or right) passed node compared to
4 | function getParams(nodeA: Node, nodeB: Node) {
5 | const centerA = getNodeCenter(nodeA);
6 | const centerB = getNodeCenter(nodeB);
7 |
8 | const horizontalDiff = Math.abs(centerA.x - centerB.x);
9 | const verticalDiff = Math.abs(centerA.y - centerB.y);
10 |
11 | let position;
12 |
13 | // when the horizontal difference between the nodes is bigger, we use Position.Left or Position.Right for the handle
14 | if (horizontalDiff > verticalDiff) {
15 | position = centerA.x > centerB.x ? Position.Left : Position.Right;
16 | } else {
17 | // here the vertical difference between the nodes is bigger, so we use Position.Top or Position.Bottom for the handle
18 | position = centerA.y > centerB.y ? Position.Top : Position.Bottom;
19 | }
20 |
21 | const [x, y] = getHandleCoordsByPosition(nodeA, position);
22 | return [x, y, position];
23 | }
24 |
25 | function getHandleCoordsByPosition(node: any, handlePosition: Position) {
26 | // all handles are from type source, that's why we use handleBounds.source here
27 | const handle = node.internals.handleBounds.source.find(
28 | (h: any) => h.position === handlePosition,
29 | );
30 |
31 | let offsetX = handle.width / 2;
32 | let offsetY = handle.height / 2;
33 |
34 | // this is a tiny detail to make the markerEnd of an edge visible.
35 | // The handle position that gets calculated has the origin top-left, so depending which side we are using, we add a little offset
36 | // when the handlePosition is Position.Right for example, we need to add an offset as big as the handle itself in order to get the correct position
37 | switch (handlePosition) {
38 | case Position.Left:
39 | offsetX = 0;
40 | break;
41 | case Position.Right:
42 | offsetX = handle.width;
43 | break;
44 | case Position.Top:
45 | offsetY = 0;
46 | break;
47 | case Position.Bottom:
48 | offsetY = handle.height;
49 | break;
50 | }
51 |
52 | const x = node.internals.positionAbsolute.x + handle.x + offsetX;
53 | const y = node.internals.positionAbsolute.y + handle.y + offsetY;
54 |
55 | return [x, y];
56 | }
57 |
58 | function getNodeCenter(node: any) {
59 | return {
60 | x: node.internals.positionAbsolute.x + node.measured.width / 2,
61 | y: node.internals.positionAbsolute.y + node.measured.height / 2,
62 | };
63 | }
64 |
65 | // returns the parameters (sx, sy, tx, ty, sourcePos, targetPos) you need to create an edge
66 | export function getEdgeParams(source: Node, target: Node) {
67 | const [sx, sy, sourcePos] = getParams(source, target);
68 | const [tx, ty, targetPos] = getParams(target, source);
69 |
70 | return {
71 | sx,
72 | sy,
73 | tx,
74 | ty,
75 | sourcePos,
76 | targetPos,
77 | };
78 | }
79 |
--------------------------------------------------------------------------------
/client/src/components/routes/Room/NetworkGraph/index.tsx:
--------------------------------------------------------------------------------
1 | import React, { useEffect, useState, useCallback } from "react";
2 | import {
3 | ReactFlow,
4 | useNodesState,
5 | useEdgesState,
6 | ConnectionMode,
7 | type Node,
8 | type Edge,
9 | ReactFlowInstance,
10 | } from "@xyflow/react";
11 | import "@xyflow/react/dist/style.css";
12 | import SimpleFloatingEdge from "./FloatingEdge";
13 | import UserNode from "./UserNode";
14 |
15 | interface NetworkGraphProps {
16 | users: string[];
17 | }
18 |
19 | const nodeTypes = {
20 | custom: UserNode,
21 | };
22 |
23 | const edgeTypes = {
24 | floating: SimpleFloatingEdge,
25 | };
26 |
27 | const createNodesAndEdges = (
28 | users: string[],
29 | ): { nodes: Node[]; edges: Edge[] } => {
30 | const nodes: Node[] = [];
31 | const edges: Edge[] = [];
32 | const centerX = 250;
33 | const centerY = 250;
34 | const radius = 100;
35 |
36 | users.forEach((user, i) => {
37 | const angle = (i / users.length) * 2 * Math.PI;
38 | const x = centerX + radius * Math.cos(angle);
39 | const y = centerY + radius * Math.sin(angle);
40 | nodes.push({
41 | id: `${user}`,
42 | position: { x, y },
43 | data: { label: user },
44 | type: "custom",
45 | });
46 | });
47 |
48 | users.forEach((sourceUser, i) => {
49 | users.slice(i + 1).forEach((targetUser) => {
50 | edges.push({
51 | id: `${sourceUser}-${targetUser}`,
52 | source: `${sourceUser}`,
53 | target: `${targetUser}`,
54 | sourceHandle: `a`,
55 | targetHandle: `b`,
56 | type: "floating",
57 | animated: true,
58 | selectable: false,
59 | focusable: false,
60 | });
61 | });
62 | });
63 |
64 | return { nodes, edges };
65 | };
66 |
67 | const styles = {
68 | background: "#121417",
69 | };
70 |
71 | const NetworkGraph: React.FC
47 |
49 | )}
50 |
51 |
56 | {showDownloadDialog && (
57 |
95 |
116 | );
117 | };
118 |
119 | export default NetworkGraph;
120 |
--------------------------------------------------------------------------------
/client/tailwind.config.js:
--------------------------------------------------------------------------------
1 | const plugin = require("tailwindcss/plugin");
2 |
3 | /** @type {import('tailwindcss').Config} */
4 | module.exports = {
5 | darkMode: ["class"],
6 | content: [
7 | "./pages/**/*.{ts,tsx}",
8 | "./components/**/*.{ts,tsx}",
9 | "./app/**/*.{ts,tsx}",
10 | "./src/**/*.{ts,tsx}",
11 | ],
12 | prefix: "",
13 | theme: {
14 | container: {
15 | center: true,
16 | padding: "2rem",
17 | screens: {
18 | "2xl": "1400px",
19 | },
20 | },
21 | extend: {
22 | colors: {
23 | border: "hsl(var(--border))",
24 | input: "hsl(var(--input))",
25 | ring: "hsl(var(--ring))",
26 | background: "hsl(var(--background))",
27 | foreground: "hsl(var(--foreground))",
28 | primary: {
29 | DEFAULT: "hsl(var(--primary))",
30 | foreground: "hsl(var(--primary-foreground))",
31 | },
32 | secondary: {
33 | DEFAULT: "hsl(var(--secondary))",
34 | foreground: "hsl(var(--secondary-foreground))",
35 | },
36 | destructive: {
37 | DEFAULT: "hsl(var(--destructive))",
38 | foreground: "hsl(var(--destructive-foreground))",
39 | },
40 | muted: {
41 | DEFAULT: "hsl(var(--muted))",
42 | foreground: "hsl(var(--muted-foreground))",
43 | },
44 | accent: {
45 | DEFAULT: "hsl(var(--accent))",
46 | foreground: "hsl(var(--accent-foreground))",
47 | },
48 | popover: {
49 | DEFAULT: "hsl(var(--popover))",
50 | foreground: "hsl(var(--popover-foreground))",
51 | },
52 | card: {
53 | DEFAULT: "hsl(var(--card))",
54 | foreground: "hsl(var(--card-foreground))",
55 | },
56 | },
57 | borderRadius: {
58 | lg: "var(--radius)",
59 | md: "calc(var(--radius) - 2px)",
60 | sm: "calc(var(--radius) - 4px)",
61 | },
62 | keyframes: {
63 | "accordion-down": {
64 | from: { height: "0" },
65 | to: { height: "var(--radix-accordion-content-height)" },
66 | },
67 | "accordion-up": {
68 | from: { height: "var(--radix-accordion-content-height)" },
69 | to: { height: "0" },
70 | },
71 | },
72 | animation: {
73 | "accordion-down": "accordion-down 0.2s ease-out",
74 | "accordion-up": "accordion-up 0.2s ease-out",
75 | },
76 | fontSize: {
77 | xs: ["0.75rem", { lineHeight: "1rem" }],
78 | sm: ["0.875rem", { lineHeight: "1.25rem" }],
79 | base: ["1rem", { lineHeight: "1.5rem" }],
80 | lg: ["1.125rem", { lineHeight: "1.75rem" }],
81 | xl: ["1.25rem", { lineHeight: "1.75rem" }],
82 | "2xl": ["1.5rem", { lineHeight: "2rem" }],
83 | "3xl": ["1.875rem", { lineHeight: "2.25rem" }],
84 | "4xl": ["2.25rem", { lineHeight: "2.5rem" }],
85 | "5xl": ["3rem", { lineHeight: "1" }],
86 | "6xl": ["3.75rem", { lineHeight: "1" }],
87 | "7xl": ["4.5rem", { lineHeight: "1" }],
88 | "8xl": ["6rem", { lineHeight: "1" }],
89 | "9xl": ["8rem", { lineHeight: "1" }],
90 | },
91 | typography: {
92 | DEFAULT: {
93 | css: {
94 | maxWidth: "100%",
95 | },
96 | },
97 | },
98 | },
99 | },
100 | plugins: [
101 | plugin(function ({ addBase }) {
102 | addBase({
103 | html: { fontSize: "15px" },
104 | "@screen sm": { html: { fontSize: "15px" } },
105 | "@screen md": { html: { fontSize: "16px" } },
106 | "@screen lg": { html: { fontSize: "17px" } },
107 | "@screen xl": { html: { fontSize: "18px" } },
108 | "@screen 2xl": { html: { fontSize: "19px" } },
109 | });
110 | }),
111 | require("tailwindcss-animate"),
112 | require("@tailwindcss/typography"),
113 | ],
114 | };
115 |
--------------------------------------------------------------------------------
/client/src/components/ui/dialog.tsx:
--------------------------------------------------------------------------------
1 | import * as React from "react"
2 | import * as DialogPrimitive from "@radix-ui/react-dialog"
3 | import { X } from "lucide-react"
4 |
5 | import { cn } from "@/lib/utils"
6 |
7 | const Dialog = DialogPrimitive.Root
8 |
9 | const DialogTrigger = DialogPrimitive.Trigger
10 |
11 | const DialogPortal = DialogPrimitive.Portal
12 |
13 | const DialogClose = DialogPrimitive.Close
14 |
15 | const DialogOverlay = React.forwardRef<
16 | React.ElementRef