Support for custom connection details (#31)

* support for custom connection details

* update styles

* use correct container

* Restyle

* remove redundant styling

---------

Co-authored-by: Mark Otto <markdotto@gmail.com>

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 <h2>Missing LiveKit URL</h2>;
+  }
+  if (typeof token !== 'string') {
+    return <h2>Missing LiveKit token</h2>;
+  }
+
+  return (
+    <main data-lk-theme="default">
+      {liveKitUrl && (
+        <LiveKitRoom token={token} serverUrl={liveKitUrl}>
+          <VideoConference chatMessageFormatter={formatChatMessageLinks} />
+          <DebugMode logLevel={LogLevel.info} />
+        </LiveKitRoom>
+      )}
+    </main>
+  );
+}

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 (
+      <button
+        className="lk-button"
+        onClick={() => setActiveIndex(index)}
+        aria-pressed={activeIndex === index}
+      >
+        {child?.props.label}
+      </button>
+    );
+  });
+  return (
+    <div className={styles.tabContainer}>
+      <div className={styles.tabSelect}>{tabs}</div>
+      {props.children[activeIndex]}
+    </div>
+  );
+}
+
+function DemoMeetingTab({ label }: { label: string }) {
   const router = useRouter();
   const startMeeting = () => {
     router.push(`/rooms/${generateRoomId()}`);
   };
+  return (
+    <div className={styles.tabContent}>
+      <p style={{ marginTop: 0 }}>Try LiveKit Meet for free with our live demo project.</p>
+      <button className="lk-button" onClick={startMeeting}>
+        Start Meeting
+      </button>
+    </div>
+  );
+}
 
+function CustomConnectionTab({ label }: { label: string }) {
+  const [liveKitUrl, setLiveKitUrl] = useState<string | undefined>();
+  const [token, setToken] = useState<string | undefined>();
+
+  const router = useRouter();
+  const join = () => {
+    router.push(`/custom/?liveKitUrl=${liveKitUrl}&token=${token}`);
+  };
+  return (
+    <div className={styles.tabContent}>
+      <p style={{ marginTop: 0 }}>
+        Connect LiveKit Meet with a custom server using LiveKit Cloud or LiveKit Server.
+      </p>
+      {/* <label>LiveKit URL</label> */}
+      <input type="url" placeholder="URL" onChange={(ev) => setLiveKitUrl(ev.target.value)}></input>
+      {/* <label>Token</label> */}
+      <input type="text" placeholder="Token" onChange={(ev) => setToken(ev.target.value)}></input>
+      <hr
+        style={{ width: '100%', borderColor: 'rgba(255, 255, 255, 0.15)', marginBlock: '1rem' }}
+      />
+      <button
+        style={{
+          paddingInline: '1.25rem',
+          width: '100%',
+        }}
+        className="lk-button"
+        onClick={join}
+      >
+        Connect
+      </button>
+    </div>
+  );
+}
+
+const Home: NextPage = () => {
   return (
     <>
-      <main className={styles.main}>
+      <main className={styles.main} data-lk-theme="default">
         <div className="header">
-          <img src="/images/livekit-meet-home.svg" alt="LiveKit Meet" width="480" height="60" />
+          <img src="/images/livekit-meet-home.svg" alt="LiveKit Meet" width="360" height="45" />
           <h2>
             Open source video conferencing app built on LiveKit&nbsp;Components, LiveKit&nbsp;Cloud,
             and Next.js.
           </h2>
         </div>
-        <button
-          style={{ fontSize: '1.25rem', paddingInline: '1.25rem' }}
-          className="lk-button"
-          onClick={startMeeting}
-        >
-          Start Meeting
-        </button>
+        <Tabs>
+          <DemoMeetingTab label="Demo" />
+          <CustomConnectionTab label="Custom" />
+        </Tabs>
       </main>
-      <footer>
+      <footer data-lk-theme="default">
         Hosted on{' '}
         <a href="https://livekit.io/cloud?ref=meet" target="_blank" rel="noreferrer">
           LiveKit Cloud

pages/rooms/[name].tsx

@@ -27,7 +27,7 @@ const Home: NextPage = () => {
         <link rel="icon" href="/favicon.ico" />
       </Head>
 
-      <main>
+      <main data-lk-theme="default">
         {roomName && !Array.isArray(roomName) && preJoinChoices ? (
           <ActiveRoom
             roomName={roomName}

styles/Home.module.css

@@ -5,3 +5,33 @@
   place-content: center;
   justify-items: center;
 }
+
+.tabContainer {
+  width: 100%;
+  max-width: 500px;
+  padding-inline: 2rem;
+}
+
+.tabSelect {
+  display: flex;
+  justify-content: stretch;
+  gap: .125rem;
+  padding: .125rem;
+  margin: 0 auto 1.5rem;
+  border: 1px solid rgba(255, 255, 255, 0.15);
+  border-radius: .5rem;
+}
+
+.tabSelect > * {
+  width: 100%;
+}
+
+.tabContent {
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
+  gap: .75rem;
+  padding: 1.5rem;
+  border: 1px solid rgba(255, 255, 255, 0.15);
+  border-radius: .5rem;
+}

styles/globals.css

@@ -14,8 +14,12 @@ main {
   height: 100%;
 }
 
+main {
+  padding-bottom: 100px;
+}
+
 .header {
-  max-width: 600px;
+  max-width: 500px;
   padding-inline: 2rem;
 }