feat(webapp): hide share screen button at mobile device (#23)

* Hide share screen button at mobile device * fix video screen label * improve(webapp): hide share screen button at mobile device --------- Co-authored-by: a-wing <[email protected]>
binbat · Nov 23, 2024 · 45ba24b · 45ba24b
1 parent 002fbad
commit 45ba24b
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 23 deletions.
diff --git a/webapp/components/device.tsx b/webapp/components/device.tsx
@@ -6,7 +6,7 @@ import {
   deviceNone,
   deviceScreen,
 } from '../lib/device'
-import { deviceSpeakerAtom, SpeakerStatusAtom } from './../store/atom'
+import { deviceSpeakerAtom, speakerStatusAtom, settingsEnabledScreenAtom } from './../store/atom'
 
 import Loading from './svg/loading'
 import SvgSpeaker from './svg/speaker'
@@ -33,7 +33,9 @@ export default function DeviceBar(props: { streamId: string }) {
   const [loadingScreen, setLoadingScreen] = useState(false)
 
   const [currentDeviceSpeaker, setCurrentDeviceSpeaker] = useAtom(deviceSpeakerAtom)
-  const [SpeakerStatus, setSpeakerStatus] = useAtom(SpeakerStatusAtom)
+  const [speakerStatus, setSpeakerStatus] = useAtom(speakerStatusAtom)
+
+  const [settingsEnabledScreen] = useAtom(settingsEnabledScreenAtom)
 
   const {
     userStatus,
@@ -111,7 +113,7 @@ export default function DeviceBar(props: { streamId: string }) {
 
     setDeviceSpeaker([...speakers])
     setDeviceAudio([...audios])
-    setDeviceVideo([...videos, deviceScreen])
+    setDeviceVideo(settingsEnabledScreen ? [...videos] : [...videos, deviceScreen])
   }
 
   const init = async () => {
@@ -182,7 +184,7 @@ export default function DeviceBar(props: { streamId: string }) {
           </button>
           <div className="flex flex-col justify-between w-1 pointer-events-none">
             <div></div>
-            {SpeakerStatus
+            {speakerStatus
               ? <div></div>
               : <div className="w-8 h-1 bg-red-500 rounded-full rotate-45"
                 style={{
@@ -271,19 +273,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>
+      {!settingsEnabledScreen && (
+        <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>
   )
 }
diff --git a/webapp/components/player/player.tsx b/webapp/components/player/player.tsx
@@ -4,7 +4,7 @@ import WaveSurfer from 'wavesurfer.js'
 import RecordPlugin from 'wavesurfer.js/dist/plugins/record'
 import { isWechat } from '../../lib/util'
 import SvgProgress from '../svg/progress'
-import { deviceSpeakerAtom, SpeakerStatusAtom } from '../../store/atom'
+import { deviceSpeakerAtom, speakerStatusAtom } from '../../store/atom'
 
 function AudioWave(props: { stream: MediaStream }) {
   const refWave = useRef<HTMLDivElement>(null)
@@ -37,7 +37,7 @@ export default function Player(props: { stream: MediaStream, muted: boolean, aud
   const audioTrack = props.stream.getAudioTracks()[0]
   const videoTrack = props.stream.getVideoTracks()[0]
   const [currentDeviceSpeaker] = useAtom(deviceSpeakerAtom)
-  const [SpeakerStatus] = useAtom(SpeakerStatusAtom)
+  const [speakerStatus] = useAtom(speakerStatusAtom)
 
   useEffect(() => {
     if (audioTrack && !videoTrack) {
@@ -53,7 +53,7 @@ export default function Player(props: { stream: MediaStream, muted: boolean, aud
         el.setSinkId(currentDeviceSpeaker)
       }
 
-      el.muted = !SpeakerStatus
+      el.muted = !speakerStatus
       el.play()
 
       return () => {
@@ -62,7 +62,7 @@ export default function Player(props: { stream: MediaStream, muted: boolean, aud
         el.remove()
       }
     }
-  }, [audioTrack, videoTrack, currentDeviceSpeaker, SpeakerStatus])
+  }, [audioTrack, videoTrack, currentDeviceSpeaker, speakerStatus])
 
   useEffect(() => {
     if (refVideo.current && videoTrack) {

diff --git a/webapp/store/atom.ts b/webapp/store/atom.ts
@@ -36,7 +36,13 @@ const enabledPresentationAtom = atom(get => get(presentationStreamAtom).stream.g
 enabledPresentationAtom.debugLabel = 'enabledPresentation'
 
 const deviceSpeakerAtom = atom<string>('')
-const SpeakerStatusAtom = atom<boolean>(true)
+deviceSpeakerAtom.debugLabel = 'deviceSpeaker'
+const speakerStatusAtom = atom<boolean>(true)
+speakerStatusAtom.debugLabel = 'speakerStatus'
+
+// Mobile device don't support share screen, For Mobile device default disabled
+const settingsEnabledScreenAtom = atom<boolean>(/Mobi|Android|iPhone|iPad|HarmonyOS|HMSCore/i.test(navigator.userAgent))
+settingsEnabledScreenAtom.debugLabel = 'settingsEnabledScreen'
 
 export {
   locationAtom,
@@ -46,7 +52,9 @@ export {
   meetingJoinedAtom,
   enabledPresentationAtom,
   deviceSpeakerAtom,
-  SpeakerStatusAtom,
+  speakerStatusAtom,
+
+  settingsEnabledScreenAtom,
 }
 
 export type {