74 lines
2.1 KiB
TypeScript
74 lines
2.1 KiB
TypeScript
'use client';
|
|
|
|
import React, { Suspense, useState } from 'react';
|
|
import { encodePassphrase, generateRoomId, randomString } from '@/lib/client-utils';
|
|
import styles from '../styles/Home.module.css';
|
|
|
|
function Tabs(props: React.PropsWithChildren<{}>) {
|
|
return (
|
|
<div className={styles.tabContainer}>
|
|
{props.children}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function DemoMeetingTab(props: { label: string }) {
|
|
const [e2ee, setE2ee] = useState(false);
|
|
const [sharedPassphrase, setSharedPassphrase] = useState(randomString(64));
|
|
const startMeeting = () => {
|
|
let url = `/rooms/${generateRoomId()}`;
|
|
if (e2ee) {
|
|
url += `#${encodePassphrase(sharedPassphrase)}`;
|
|
}
|
|
window.location.href = url;
|
|
};
|
|
return (
|
|
<div className={styles.tabContent}>
|
|
<h1 style={{ textAlign: 'center', marginTop: 0 }}>Hero Meet</h1>
|
|
<p style={{ margin: 0, textAlign: 'center' }}>
|
|
Let's get started.
|
|
</p>
|
|
<button style={{ marginTop: '1rem' }} className="lk-button" onClick={startMeeting}>
|
|
Start Meeting
|
|
</button>
|
|
<div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
|
|
<div style={{ display: 'flex', flexDirection: 'row', gap: '1rem' }}>
|
|
<input
|
|
id="use-e2ee"
|
|
type="checkbox"
|
|
checked={e2ee}
|
|
onChange={(ev) => setE2ee(ev.target.checked)}
|
|
></input>
|
|
<label htmlFor="use-e2ee">Enable end-to-end encryption</label>
|
|
</div>
|
|
{e2ee && (
|
|
<div style={{ display: 'flex', flexDirection: 'row', gap: '1rem' }}>
|
|
<label htmlFor="passphrase">Passphrase</label>
|
|
<input
|
|
id="passphrase"
|
|
type="password"
|
|
value={sharedPassphrase}
|
|
onChange={(ev) => setSharedPassphrase(ev.target.value)}
|
|
/>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
|
|
export default function Page() {
|
|
return (
|
|
<>
|
|
<main className={styles.main} data-lk-theme="default">
|
|
<Suspense fallback="Loading">
|
|
<Tabs>
|
|
<DemoMeetingTab label="Demo" />
|
|
</Tabs>
|
|
</Suspense>
|
|
</main>
|
|
</>
|
|
);
|
|
}
|