only display screen share button if not in mobile browser (#200)

* only display screen share button if not a mobile browser

* Add changeset

Author: Ocupe

.changeset/poor-fans-grow.md

@@ -0,0 +1,6 @@
+---
+'@livekit/components-core': patch
+'@livekit/components-react': patch
+---
+
+Hide screen share button on mobile.

packages/core/src/helper/detectMobileBrowser.ts

@@ -0,0 +1,16 @@
+function isWeb(): boolean {
+  return typeof document !== 'undefined';
+}
+
+/**
+ * Mobile browser detection based on `navigator.userAgent` string.
+ * Defaults to returning `false` if not in a browser.
+ *
+ * @remarks
+ * This should only be used if feature detection or other methods do not work!
+ *
+ * @see https://developer.mozilla.org/en-US/docs/Web/HTTP/Browser_detection_using_the_user_agent#mobile_device_detection
+ */
+export function isMobileBrowser(): boolean {
+  return isWeb() ? /Mobi/i.test(window.navigator.userAgent) : false;
+}

packages/core/src/helper/index.ts

@@ -0,0 +1 @@
+export * from './detectMobileBrowser';

packages/core/src/index.ts

@@ -1,5 +1,6 @@
 export * from './constants';
 export * from './utils';
+export * from './helper';
 export * from './types';
 
 export * from './components/mediaToggle';

packages/core/src/utils.ts

@@ -12,6 +12,9 @@ import { PinState, TrackParticipantPair } from './types';
 export function kebabize(str: string) {
   return str.replace(/[A-Z]+(?![a-z])|[A-Z]/g, ($, ofs) => (ofs ? '-' : '') + $.toLowerCase());
 }
+
+// TODO: If we have utils/helper, we should structure it better to prevent this thing from turning into a dumping ground for all sorts of things.
+
 /**
  * Converts a non prefixed CSS class into a prefixed one.
  */

packages/react/src/assets/icons/index.ts

@@ -14,4 +14,3 @@ export { default as ScreenShareIcon } from './ScreenShareIcon';
 export { default as ScreenShareStopIcon } from './ScreenShareStopIcon';
 export { default as SpinnerIcon } from './SpinnerIcon';
 export { default as UnfocusToggleIcon } from './UnfocusToggleIcon';
-export { default as UserSilhouetteIcon } from './UserSilhouetteIcon';

packages/react/src/prefabs/ControlBar.tsx

@@ -6,6 +6,7 @@ import { TrackToggle } from '../components/controls/TrackToggle';
 import { StartAudio } from '../components/controls/StartAudio';
 import { ChatIcon, LeaveIcon } from '../assets/icons';
 import { ChatToggle } from '../components/controls/ChatToggle';
+import { isMobileBrowser } from '@livekit/components-core';
 
 type ControlBarControls = {
   microphone?: boolean;
@@ -57,6 +58,8 @@ export function ControlBar(props: ControlBarProps) {
     [variation],
   );
 
+  const isMobile = React.useMemo(() => isMobileBrowser(), []);
+
   const [isScreenShareEnabled, setIsScreenShareEnabled] = React.useState(false);
 
   const onScreenShareChange = (enabled: boolean) => {
@@ -85,7 +88,7 @@ export function ControlBar(props: ControlBarProps) {
           </div>
         </div>
       )}
-      {visibleControls.screenShare && (
+      {visibleControls.screenShare && !isMobile && (
         <TrackToggle
           source={Track.Source.ScreenShare}
           showIcon={showIcon}