neoris/meet
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Use toast instead of window.alert as a recording indicator (#409)

Browse Source 
* Use toast instead of window.alert as a recording indicator

* fix color
This commit is contained in:
lukasIO 2025-04-08 08:37:56 +02:00 committed by GitHub
parent 17ff1d6092
commit 52d6f6a416
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 44 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
app/layout.tsx
View File

@ -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 (
<html lang="en">
<body>{children}</body>
<body data-lk-theme="default">
<Toaster />
{children}
</body>
</html>
);
}

14
lib/RecordingIndicator.tsx
View File

@ -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',
}}
></div>

1
package.json
View File

@ -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": {

26
pnpm-lock.yaml generated
View File

@ -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: