init

src/App.tsx

@@ -0,0 +1,47 @@
+import { useEffect, useState } from 'react'
+import './App.css'
+import { Video } from './Video'
+import { start } from './lib/start'
+
+import { ArrowPathIcon } from '@heroicons/react/24/solid'
+
+function App() {
+  const [mediaStreams, setMediaStreams] = useState<MediaStream[]>([])
+  const [focusedIndex, setFocusedIndex] = useState<number>(-1)
+
+  useEffect(() => {
+    start()
+      .then((streams) => Promise.all(streams))
+      .then((streams) => {
+        setMediaStreams(streams)
+      })
+  }, [])
+
+  const handleClick = (index: number) => (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
+    if (focusedIndex === index) {
+      setFocusedIndex(-1)
+    } else {
+      setFocusedIndex(index)
+    }
+  }
+
+  return (
+    <div>
+      <div className='grid grid-cols-3'>
+        {mediaStreams.map((stream, index) => (
+          <div key={`medistream-${index}`} onClick={handleClick(index)}>
+            <Video mediaStream={stream} index={index} focused={focusedIndex === index} />
+          </div>
+        ))}
+      </div>
+      <button
+        className={'absolute bg-white p-2 shadow-xl top-3 right-3 rounded-lg'}
+        onClick={() => window.location.reload()}
+      >
+        <ArrowPathIcon className='h-6 w-6 text-black' />
+      </button>
+    </div>
+  )
+}
+
+export default App