diff --git a/app/layout.tsx b/app/layout.tsx index bf35374..a812f43 100644 --- a/app/layout.tsx +++ b/app/layout.tsx @@ -2,6 +2,7 @@ import '../styles/globals.css'; import '@livekit/components-styles'; import '@livekit/components-styles/prefabs'; import type { Metadata, Viewport } from 'next'; +import { Toaster } from 'react-hot-toast'; export const metadata: Metadata = { title: { @@ -50,7 +51,10 @@ export const viewport: Viewport = { export default function RootLayout({ children }: { children: React.ReactNode }) { return ( - {children} + + + {children} + ); } diff --git a/lib/RecordingIndicator.tsx b/lib/RecordingIndicator.tsx index 877ed9a..d7cde78 100644 --- a/lib/RecordingIndicator.tsx +++ b/lib/RecordingIndicator.tsx @@ -1,5 +1,6 @@ import { useIsRecording } from '@livekit/components-react'; import * as React from 'react'; +import toast from 'react-hot-toast'; export function RecordingIndicator() { const isRecording = useIsRecording(); @@ -9,7 +10,16 @@ export function RecordingIndicator() { if (isRecording !== wasRecording) { setWasRecording(isRecording); if (isRecording) { - window.alert('This meeting is being recorded'); + toast('This meeting is being recorded', { + duration: 3000, + icon: '🎥', + position: 'top-center', + className: 'lk-button', + style: { + backgroundColor: 'var(--lk-danger3)', + color: 'var(--lk-fg)', + }, + }); } } }, [isRecording]); @@ -22,7 +32,7 @@ export function RecordingIndicator() { left: '0', width: '100%', height: '100%', - boxShadow: isRecording ? 'red 0px 0px 0px 3px inset' : 'none', + boxShadow: isRecording ? 'var(--lk-danger3) 0px 0px 0px 3px inset' : 'none', pointerEvents: 'none', }} > diff --git a/package.json b/package.json index d50a235..763fd5b 100644 --- a/package.json +++ b/package.json @@ -18,6 +18,7 @@ "next": "15.2.4", "react": "18.3.1", "react-dom": "18.3.1", + "react-hot-toast": "^2.5.2", "tinykeys": "^3.0.0" }, "devDependencies": { diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 187066d..d4e7cc4 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -35,6 +35,9 @@ importers: react-dom: specifier: 18.3.1 version: 18.3.1(react@18.3.1) + react-hot-toast: + specifier: ^2.5.2 + version: 2.5.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1) tinykeys: specifier: ^3.0.0 version: 3.0.0 @@ -1038,6 +1041,11 @@ packages: resolution: {integrity: sha512-DpLKbNU4WylpxJykQujfCcwYWiV/Jhm50Goo0wrVILAv5jOr9d+H+UR3PhSCD2rCCEIg0uc+G+muBTwD54JhDQ==} engines: {node: '>= 0.4'} + goober@2.1.16: + resolution: {integrity: sha512-erjk19y1U33+XAMe1VTvIONHYoSqE4iS7BYUZfHaqeohLmnC0FdxEh7rQU+6MZ4OajItzjZFSRtVANrQwNq6/g==} + peerDependencies: + csstype: ^3.0.10 + gopd@1.0.1: resolution: {integrity: sha512-d65bNlIadxvpb/A2abVdlqKqV563juRnZ1Wtk6s1sIR8uNsXR70xqIzVqxVf1eTqDunwT2MkczEeaezCKTZhwA==} @@ -1468,6 +1476,13 @@ packages: peerDependencies: react: ^18.3.1 + react-hot-toast@2.5.2: + resolution: {integrity: sha512-Tun3BbCxzmXXM7C+NI4qiv6lT0uwGh4oAfeJyNOjYUejTsm35mK9iCaYLGv8cBz9L5YxZLx/2ii7zsIwPtPUdw==} + engines: {node: '>=10'} + peerDependencies: + react: '>=16' + react-dom: '>=16' + react-is@16.13.1: resolution: {integrity: sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==} @@ -2979,6 +2994,10 @@ snapshots: define-properties: 1.2.1 gopd: 1.0.1 + goober@2.1.16(csstype@3.1.3): + dependencies: + csstype: 3.1.3 + gopd@1.0.1: dependencies: get-intrinsic: 1.2.4 @@ -3395,6 +3414,13 @@ snapshots: react: 18.3.1 scheduler: 0.23.2 + react-hot-toast@2.5.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1): + dependencies: + csstype: 3.1.3 + goober: 2.1.16(csstype@3.1.3) + react: 18.3.1 + react-dom: 18.3.1(react@18.3.1) + react-is@16.13.1: {} react@18.3.1: