From e9f89d3cd1a588c16a6e92902564fab9d960e669 Mon Sep 17 00:00:00 2001
From: David Zhao <dz@livekit.io>
Date: Thu, 26 Oct 2023 11:07:59 -0700
Subject: [PATCH] Fix codec and usability of custom tab (#146)

---
 pages/custom/index.tsx | 5 +++--
 pages/index.tsx        | 4 ++--
 styles/Home.module.css | 1 +
 3 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/pages/custom/index.tsx b/pages/custom/index.tsx
index 3643716..3383baf 100644
--- a/pages/custom/index.tsx
+++ b/pages/custom/index.tsx
@@ -5,6 +5,7 @@ import {
   Room,
   RoomConnectOptions,
   RoomOptions,
+  VideoCodec,
   VideoPresets,
 } from 'livekit-client';
 import { useRouter } from 'next/router';
@@ -14,7 +15,7 @@ import { DebugMode } from '../../lib/Debug';
 
 export default function CustomRoomConnection() {
   const router = useRouter();
-  const { liveKitUrl, token } = router.query;
+  const { liveKitUrl, token, codec } = router.query;
 
   const e2eePassphrase =
     typeof window !== 'undefined' && decodePassphrase(window.location.hash.substring(1));
@@ -30,7 +31,7 @@ export default function CustomRoomConnection() {
       publishDefaults: {
         videoSimulcastLayers: [VideoPresets.h540, VideoPresets.h216],
         red: !e2eeEnabled,
-        videoCodec: 'vp9',
+        videoCodec: codec as VideoCodec | undefined,
       },
       adaptiveStream: { pixelDensity: 'screen' },
       dynacast: true,
diff --git a/pages/index.tsx b/pages/index.tsx
index 8a9147d..1253372 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -1,8 +1,8 @@
 import type { GetServerSideProps, InferGetServerSidePropsType } from 'next';
 import { useRouter } from 'next/router';
 import React, { ReactElement, useState } from 'react';
-import styles from '../styles/Home.module.css';
 import { encodePassphrase, generateRoomId, randomString } from '../lib/client-utils';
+import styles from '../styles/Home.module.css';
 
 interface TabsProps {
   children: ReactElement[];
@@ -88,7 +88,7 @@ function CustomConnectionTab({ label }: { label: string }) {
         name="token"
         placeholder="Token"
         required
-        rows={9}
+        rows={5}
         style={{ padding: '1px 2px', fontSize: 'inherit', lineHeight: 'inherit' }}
       />
       <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
diff --git a/styles/Home.module.css b/styles/Home.module.css
index 2b391dd..c777b2b 100644
--- a/styles/Home.module.css
+++ b/styles/Home.module.css
@@ -5,6 +5,7 @@
   place-content: center;
   justify-items: center;
   padding-bottom: 100px;
+  overflow: auto;
 }
 
 .tabContainer {