diff --git a/index.html b/index.html index 7832761..2437a76 100644 --- a/index.html +++ b/index.html @@ -2,7 +2,7 @@ - + Mitsi diff --git a/public/logo.svg b/public/logo.svg new file mode 100644 index 0000000..cbd8968 --- /dev/null +++ b/public/logo.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/public/vite.svg b/public/vite.svg deleted file mode 100644 index e7b8dfb..0000000 --- a/public/vite.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/assets/index.ts b/src/assets/index.ts index ac52190..2aaf048 100644 --- a/src/assets/index.ts +++ b/src/assets/index.ts @@ -1,7 +1,9 @@ import emptyChat from './empty-chat.svg'; import mitsiUi from './mitsi-ui.jpg'; +import logo from './logo.svg'; export const Assets = { emptyChat, mitsiUi, + logo, }; diff --git a/src/assets/logo.svg b/src/assets/logo.svg new file mode 100644 index 0000000..cbd8968 --- /dev/null +++ b/src/assets/logo.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/src/components/home/footer.tsx b/src/components/home/footer.tsx index 545e21f..f5d2b20 100644 --- a/src/components/home/footer.tsx +++ b/src/components/home/footer.tsx @@ -1,4 +1,4 @@ -import { Video } from 'lucide-react'; +import { Assets } from '@/assets'; const Footer = () => { return ( @@ -6,11 +6,10 @@ const Footer = () => {
-
-
+ Logo +
- Mitsi + Mitsi
diff --git a/src/components/home/navbar.tsx b/src/components/home/navbar.tsx index 1eb0d9c..e41fd1a 100644 --- a/src/components/home/navbar.tsx +++ b/src/components/home/navbar.tsx @@ -1,8 +1,9 @@ import uniqid from 'uniqid'; -import { Github, Video } from 'lucide-react'; +import { Github } from 'lucide-react'; import { Button } from '../ui/button'; import { useCallback } from 'react'; import { useNavigate } from 'react-router-dom'; +import { Assets } from '@/assets'; const Navbar = () => { const navigate = useNavigate(); const roomId = uniqid.time(); @@ -21,9 +22,8 @@ const Navbar = () => {
-
-
+ Logo + {/*
*/}
diff --git a/src/components/room/join/join-header.tsx b/src/components/room/join/join-header.tsx index 25e91fe..edec35c 100644 --- a/src/components/room/join/join-header.tsx +++ b/src/components/room/join/join-header.tsx @@ -1,50 +1,53 @@ import { usePeerOthersValues, useRoomData } from '@/store/conf/hooks'; -import { Info, Loader2 } from 'lucide-react'; +import { Info } from 'lucide-react'; import { Badge } from '@/components/ui/badge'; import { Tooltip, TooltipContent, TooltipTrigger, } from '@/components/ui/tooltip'; +import { Assets } from '@/assets'; +import { useCopyToClipboard } from '@/hooks/use-copy'; +import { BASE_URL } from '@/lib/constants'; const Header = () => { const roomData = useRoomData(); const peerOthersList = usePeerOthersValues(); + const { copied, copy } = useCopyToClipboard(); return (
{/* Enhanced Loading Spinner Icon */} -
-
- {/* Outer pulsing ring */} -
-
- {/* Main spinner container */} -
-
- -
-
-
-
+ Logo
-
-

- {roomData?.roomId} -

- - - - - - - -

Meeting Id, Click to copy invitation

- - -
+ {roomData?.roomId && ( +
+

copy(`${BASE_URL}/${roomData.roomId}`)} + className="text-2xl md:text-3xl lg:text-4xl font-semibold text-white cursor-pointer" + > + {roomData.roomId} +

+ + + + {copied ? ( + + Copied + + ) : ( + + )} + + + +

Meeting Invite, Click to copy

+ + +
+ )}
Setup your audio and video before joining
diff --git a/src/hooks/use-copy.ts b/src/hooks/use-copy.ts new file mode 100644 index 0000000..a7b4d07 --- /dev/null +++ b/src/hooks/use-copy.ts @@ -0,0 +1,13 @@ +import { useState } from 'react'; + +export const useCopyToClipboard = () => { + const [copied, setCopied] = useState(false); + + const copy = async (text: string) => { + await navigator.clipboard.writeText(text); + setCopied(true); + setTimeout(() => setCopied(false), 2000); + }; + + return { copied, copy }; +}; diff --git a/src/lib/constants.ts b/src/lib/constants.ts index e2fb405..8ab207b 100644 --- a/src/lib/constants.ts +++ b/src/lib/constants.ts @@ -1,7 +1,7 @@ import type { MediaDeviceType } from '@/types'; import { MediaPermissionsErrorType } from 'mic-check'; export const HEARTBEAT_INTERVAL = 45000; - +export const BASE_URL = window.location.origin; export const APP_NAME = 'Mitsi'; export const DEVICE_ERRORS = {