Fix codec and usability of custom tab (#146)

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,

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' }}>

styles/Home.module.css

@@ -5,6 +5,7 @@
   place-content: center;
   justify-items: center;
   padding-bottom: 100px;
+  overflow: auto;
 }
 
 .tabContainer {