From d61f7b4e1b4e2914f0e1a2948325de1d007842d8 Mon Sep 17 00:00:00 2001
From: xdzqyyds <2292136545@qq.com>
Date: Sat, 23 Nov 2024 13:36:25 +0800
Subject: [PATCH] Hide share screen button at mobile device

---
 webapp/components/device.tsx | 34 +++++++++++++++++++++-------------
 1 file changed, 21 insertions(+), 13 deletions(-)

diff --git a/webapp/components/device.tsx b/webapp/components/device.tsx
index fad64e9..57dec1e 100644
--- a/webapp/components/device.tsx
+++ b/webapp/components/device.tsx
@@ -35,6 +35,8 @@ export default function DeviceBar(props: { streamId: string }) {
   const [currentDeviceSpeaker, setCurrentDeviceSpeaker] = useAtom(deviceSpeakerAtom)
   const [SpeakerStatus, setSpeakerStatus] = useAtom(SpeakerStatusAtom)
 
+  const [mobileDevice, setMobileDevice] = useState(false)
+
   const {
     userStatus,
     currentDeviceAudio,
@@ -145,6 +147,11 @@ export default function DeviceBar(props: { streamId: string }) {
     return () => { navigator.mediaDevices.removeEventListener('devicechange', updateDeviceList) }
   }, [])
 
+  useEffect(() => {
+    const isMobile = /Mobi|Android|iPhone|iPad|HarmonyOS|HMSCore/i.test(navigator.userAgent)
+    setMobileDevice(isMobile)
+  }, [])
+
   const onChangedDeviceSpeaker = async (current: string) => {
     setLoadingSpeaker(true)
     setCurrentDeviceSpeaker(current)
@@ -271,19 +278,20 @@ export default function DeviceBar(props: { streamId: string }) {
           </select>
         </section>
       </center>
-      <center>
-        <section className="m-1 p-1 flex flex-row justify-center rounded-md border-1 border-indigo-500">
-          <button className="text-rose-400 rounded-md w-8 h-8" onClick={() => toggleEnableScreen()}>
-            <center>
-              {loadingScreen
-                ? <Loading />
-                : userStatus.screen ? <SvgPresentCancel /> : <SvgPresentToAll />
-              }
-            </center>
-          </button>
-        </section>
-
-      </center>
+      {!mobileDevice && (
+        <center>
+          <section className="m-1 p-1 flex flex-row justify-center rounded-md border-1 border-indigo-500">
+            <button className="text-rose-400 rounded-md w-8 h-8" onClick={() => toggleEnableScreen()}>
+              <center>
+                {loadingScreen
+                  ? <Loading />
+                  : userStatus.screen ? <SvgPresentCancel /> : <SvgPresentToAll />
+                }
+              </center>
+            </button>
+          </section>
+        </center>
+      )}
     </div>
   )
 }