From a5f01656244c97b2feccc27cf005086a62b5ca33 Mon Sep 17 00:00:00 2001
From: a-wing <1@233.email>
Date: Fri, 15 Dec 2023 17:02:32 +0800
Subject: [PATCH] feat(webapp): change device default enable

---
 webapp/components/device.tsx  | 37 ++++++++++++++++-------------------
 webapp/components/prepare.tsx | 22 +++++++++++++++++++--
 2 files changed, 37 insertions(+), 22 deletions(-)

diff --git a/webapp/components/device.tsx b/webapp/components/device.tsx
index 6955d08..0506b03 100644
--- a/webapp/components/device.tsx
+++ b/webapp/components/device.tsx
@@ -21,7 +21,6 @@ export default function DeviceBar() {
   const disableDevice = "none"
   const refEnabled = useRef(false)
 
-  const [permission, setPermission] = useState("...")
   const [permissionAudio, setPermissionAudio] = useState("...")
   const [permissionVideo, setPermissionVideo] = useState("...")
 
@@ -59,20 +58,6 @@ export default function DeviceBar() {
       }
     })
 
-  const requestPermission = async () => {
-    try {
-      permissionsQuery()
-      const result = await navigator.mediaDevices.getUserMedia({ video: true, audio: true })
-      result instanceof MediaStream ? setPermission("success") : setPermission("error")
-      result.getTracks().map(track => track.stop())
-      //@ts-ignore
-    } catch ({ name, message }) {
-      setPermission(message)
-    } finally {
-      await permissionsQuery()
-    }
-  }
-
   const updateDeviceList = async () => {
     const devices = await navigator.mediaDevices.enumerateDevices()
     const audios: Device[] = []
@@ -88,6 +73,22 @@ export default function DeviceBar() {
       }
     })
 
+    if (currentDeviceAudio === disableDevice && currentSelectDeviceAudio === disableDevice) {
+      let device = audios[0]
+      if (device) {
+        setCurrentDeviceAudio(device.deviceId)
+        setCurrentSelectDeviceAudio(device.deviceId)
+      }
+    }
+
+    if (currentDeviceVideo === disableDevice && currentSelectDeviceVideo === disableDevice) {
+      let device = videos[0]
+      if (device) {
+        setCurrentDeviceVideo(device.deviceId)
+        setCurrentSelectDeviceVideo(device.deviceId)
+      }
+    }
+
     setDeviceAudio([deviceNone, ...audios])
     setDeviceVideo([deviceNone, ...videos, deviceScreen])
   }
@@ -98,7 +99,7 @@ export default function DeviceBar() {
       // In some device have problem:
       // - Android Web Browser
       // - Wechat WebView
-      await requestPermission()
+      await permissionsQuery()
     } catch { }
     await updateDeviceList()
   }
@@ -191,10 +192,6 @@ export default function DeviceBar() {
   return (
     <div className='flex flex-row flex-wrap justify-around p-xs'>
       <center className='basis-full'>
-        <label className='text-white'>
-          Your Device Status: <code className={permission === "success" ? "text-green" : "text-red"}>{permission}</code>
-        </label>
-
         <section className='flex flex-row justify-center text-white'>
           <div className='mx-xs'>
             Microphone: <code className={permissionAudio === "granted" ? "text-green" : "text-red"}>{permissionAudio}</code>
diff --git a/webapp/components/prepare.tsx b/webapp/components/prepare.tsx
index e8c6972..d2d74a4 100644
--- a/webapp/components/prepare.tsx
+++ b/webapp/components/prepare.tsx
@@ -1,4 +1,4 @@
-import { useState } from 'react'
+import { useEffect, useRef, useState } from 'react'
 import { useAtom } from 'jotai'
 import DeviceBar from './device'
 import Loading from "./loading"
@@ -15,10 +15,11 @@ import { asyncGetStreamId } from '../lib/storage'
 
 export default function Prepare(props: { meetingId: string }) {
   const [loading, setLoading] = useState<boolean>(false)
+  const refEnabled = useRef(false)
 
   const [displayName, setDisplayName] = useAtom(displayNameAtom)
 
-  const [localStream] = useAtom(localStreamAtom)
+  const [localStream, setLocalStream] = useAtom(localStreamAtom)
   const [localStreamId, setLocalStreamId] = useAtom(localStreamIdAtom)
   const [localUserStatus, setLocalUserStatus] = useAtom(localUserStatusAtom)
   const [_, setMeetingJoined] = useAtom(meetingJoinedAtom)
@@ -40,6 +41,23 @@ export default function Prepare(props: { meetingId: string }) {
     setMeetingJoined(true)
   }
 
+  const init = async () => {
+    try {
+      const stream = await navigator.mediaDevices.getUserMedia({ video: { width: 320 }, audio: true })
+      setLocalStream({
+        stream: stream,
+        name: "Me",
+      })
+    } catch { }
+  }
+
+  useEffect(() => {
+    if (!refEnabled.current) {
+      refEnabled.current = true
+      init()
+    }
+  }, [])
+
   return (
     <div className='flex flex-col justify-around'>
       <center className='m-xs'>