diff --git a/pages/custom/index.tsx b/pages/custom/index.tsx new file mode 100644 index 0000000..b437233 --- /dev/null +++ b/pages/custom/index.tsx @@ -0,0 +1,26 @@ +import { formatChatMessageLinks, LiveKitRoom, VideoConference } from '@livekit/components-react'; +import { LogLevel } from 'livekit-client'; +import { useRouter } from 'next/router'; +import { DebugMode } from '../../lib/Debug'; + +export default function CustomRoomConnection() { + const router = useRouter(); + const { liveKitUrl, token } = router.query; + if (typeof liveKitUrl !== 'string') { + return

Missing LiveKit URL

; + } + if (typeof token !== 'string') { + return

Missing LiveKit token

; + } + + return ( +
+ {liveKitUrl && ( + + + + + )} +
+ ); +} diff --git a/pages/index.tsx b/pages/index.tsx index 47de8f8..df713a5 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -1,32 +1,100 @@ import type { NextPage } from 'next'; import { useRouter } from 'next/router'; +import React, { ReactElement, ReactNode } from 'react'; +import { useState } from 'react'; import styles from '../styles/Home.module.css'; -const Home: NextPage = () => { +function Tabs(props: { children: ReactElement[] }) { + const [activeIndex, setActiveIndex] = useState(0); + if (!props.children) { + return <>; + } + + let tabs = React.Children.map(props.children, (child, index) => { + return ( + + ); + }); + return ( +
+
{tabs}
+ {props.children[activeIndex]} +
+ ); +} + +function DemoMeetingTab({ label }: { label: string }) { const router = useRouter(); const startMeeting = () => { router.push(`/rooms/${generateRoomId()}`); }; + return ( +
+

Try LiveKit Meet for free with our live demo project.

+ +
+ ); +} +function CustomConnectionTab({ label }: { label: string }) { + const [liveKitUrl, setLiveKitUrl] = useState(); + const [token, setToken] = useState(); + + const router = useRouter(); + const join = () => { + router.push(`/custom/?liveKitUrl=${liveKitUrl}&token=${token}`); + }; + return ( +
+

+ Connect LiveKit Meet with a custom server using LiveKit Cloud or LiveKit Server. +

+ {/* */} + setLiveKitUrl(ev.target.value)}> + {/* */} + setToken(ev.target.value)}> +
+ +
+ ); +} + +const Home: NextPage = () => { return ( <> -
+
- LiveKit Meet + LiveKit Meet

Open source video conferencing app built on LiveKit Components, LiveKit Cloud, and Next.js.

- + + + +
-