@100mslive/roomkit-react 0.1.0

package/src/Prebuilt/components/VideoTile.jsx

@@ -0,0 +1,177 @@
+import React, { Fragment, useCallback, useMemo, useState } from 'react';
+import {
+  selectAudioTrackByPeerID,
+  selectIsPeerAudioEnabled,
+  selectLocalPeerID,
+  selectPeerMetadata,
+  selectPeerNameByID,
+  selectVideoTrackByID,
+  selectVideoTrackByPeerID,
+  useHMSStore,
+} from '@100mslive/react-sdk';
+import { BrbIcon, HandRaiseFilledIcon, MicOffIcon } from '@100mslive/react-icons';
+import TileConnection from './Connection/TileConnection';
+import { useBorderAudioLevel } from '../../AudioLevel';
+import { Avatar } from '../../Avatar';
+import { VideoTileStats } from '../../Stats';
+import { Video } from '../../Video';
+import { StyledVideoTile } from '../../VideoTile';
+import { getVideoTileLabel } from './peerTileUtils';
+import TileMenu from './TileMenu';
+import { useAppConfig } from './AppData/useAppConfig';
+import { useIsHeadless, useUISettings } from './AppData/useUISettings';
+import { UI_SETTINGS } from '../common/constants';
+
+const Tile = ({ peerId, trackId, width, height, objectFit = 'cover', rootCSS = {}, containerCSS = {} }) => {
+  const trackSelector = trackId ? selectVideoTrackByID(trackId) : selectVideoTrackByPeerID(peerId);
+  const track = useHMSStore(trackSelector);
+  const peerName = useHMSStore(selectPeerNameByID(peerId));
+  const audioTrack = useHMSStore(selectAudioTrackByPeerID(peerId));
+  const localPeerID = useHMSStore(selectLocalPeerID);
+  const isAudioOnly = useUISettings(UI_SETTINGS.isAudioOnly);
+  const mirrorLocalVideo = useUISettings(UI_SETTINGS.mirrorLocalVideo);
+  const showStatsOnTiles = useUISettings(UI_SETTINGS.showStatsOnTiles);
+  const isHeadless = useIsHeadless();
+  const isAudioMuted = !useHMSStore(selectIsPeerAudioEnabled(peerId));
+  const isVideoMuted = !track?.enabled;
+  const [isMouseHovered, setIsMouseHovered] = useState(false);
+  const borderAudioRef = useBorderAudioLevel(audioTrack?.id);
+  const isVideoDegraded = track?.degraded;
+  const isLocal = localPeerID === peerId;
+  const label = getVideoTileLabel({
+    peerName,
+    track,
+    isLocal,
+  });
+  const onHoverHandler = useCallback(event => {
+    setIsMouseHovered(event.type === 'mouseenter');
+  }, []);
+  const headlessConfig = useAppConfig('headlessConfig');
+  const hideLabel = isHeadless && headlessConfig?.hideTileName;
+  const isTileBigEnoughToShowStats = height >= 180 && width >= 180;
+  const avatarSize = useMemo(() => {
+    if (!width || !height) {
+      return undefined;
+    }
+    if (width <= 150 || height <= 150) {
+      return 'small';
+    } else if (width <= 300 || height <= 300) {
+      return 'medium';
+    }
+    return 'large';
+  }, [width, height]);
+
+  return (
+    <StyledVideoTile.Root
+      css={{
+        width,
+        height,
+        padding: getPadding({
+          isHeadless,
+          tileOffset: headlessConfig?.tileOffset,
+          hideAudioLevel: headlessConfig?.hideAudioLevel,
+        }),
+        ...rootCSS,
+      }}
+      data-testid={`participant_tile_${peerName}`}
+    >
+      {peerName !== undefined ? (
+        <StyledVideoTile.Container
+          onMouseEnter={onHoverHandler}
+          onMouseLeave={onHoverHandler}
+          ref={isHeadless && headlessConfig?.hideAudioLevel ? undefined : borderAudioRef}
+          noRadius={isHeadless && Number(headlessConfig?.tileOffset) === 0}
+          css={containerCSS}
+        >
+          {showStatsOnTiles && isTileBigEnoughToShowStats ? (
+            <VideoTileStats audioTrackID={audioTrack?.id} videoTrackID={track?.id} peerID={peerId} isLocal={isLocal} />
+          ) : null}
+
+          {track ? (
+            <Video
+              trackId={track?.id}
+              attach={isLocal ? undefined : !isAudioOnly}
+              mirror={
+                mirrorLocalVideo &&
+                peerId === localPeerID &&
+                track?.source === 'regular' &&
+                track?.facingMode !== 'environment'
+              }
+              degraded={isVideoDegraded}
+              noRadius={isHeadless && Number(headlessConfig?.tileOffset) === 0}
+              data-testid="participant_video_tile"
+              css={{
+                objectFit,
+              }}
+            />
+          ) : null}
+          {isVideoMuted || isVideoDegraded || (!isLocal && isAudioOnly) ? (
+            <StyledVideoTile.AvatarContainer>
+              <Avatar name={peerName || ''} data-testid="participant_avatar_icon" size={avatarSize} />
+            </StyledVideoTile.AvatarContainer>
+          ) : null}
+
+          {showAudioMuted({
+            hideTileAudioMute: headlessConfig?.hideTileAudioMute,
+            isHeadless,
+            isAudioMuted,
+          }) ? (
+            <StyledVideoTile.AudioIndicator
+              data-testid="participant_audio_mute_icon"
+              size={width && height && (width < 180 || height < 180) ? 'small' : 'medium'}
+            >
+              <MicOffIcon />
+            </StyledVideoTile.AudioIndicator>
+          ) : null}
+          {isMouseHovered && !isHeadless ? (
+            <TileMenu peerID={peerId} audioTrackID={audioTrack?.id} videoTrackID={track?.id} />
+          ) : null}
+          <PeerMetadata peerId={peerId} />
+          <TileConnection hideLabel={hideLabel} name={label} isTile peerId={peerId} width={width} />
+        </StyledVideoTile.Container>
+      ) : null}
+    </StyledVideoTile.Root>
+  );
+};
+
+const metaStyles = { top: '$4', left: '$4' };
+
+const PeerMetadata = ({ peerId }) => {
+  const metaData = useHMSStore(selectPeerMetadata(peerId));
+  const isHandRaised = metaData?.isHandRaised || false;
+  const isBRB = metaData?.isBRBOn || false;
+
+  return (
+    <Fragment>
+      {isHandRaised ? (
+        <StyledVideoTile.AttributeBox css={metaStyles} data-testid="raiseHand_icon_onTile">
+          <HandRaiseFilledIcon width={40} height={40} />
+        </StyledVideoTile.AttributeBox>
+      ) : null}
+      {isBRB ? (
+        <StyledVideoTile.AttributeBox css={metaStyles} data-testid="brb_icon_onTile">
+          <BrbIcon width={40} height={40} />
+        </StyledVideoTile.AttributeBox>
+      ) : null}
+    </Fragment>
+  );
+};
+
+const VideoTile = React.memo(Tile);
+
+const showAudioMuted = ({ hideTileAudioMute, isHeadless, isAudioMuted }) => {
+  if (!isHeadless) {
+    return isAudioMuted;
+  }
+  return isAudioMuted && !hideTileAudioMute;
+};
+
+const getPadding = ({ isHeadless, tileOffset, hideAudioLevel }) => {
+  if (!isHeadless || isNaN(Number(tileOffset))) {
+    return undefined;
+  }
+  // Adding extra padding of 3px to ensure that the audio border is visible properly between tiles when tileOffset is 0.
+  return Number(tileOffset) === 0 ? (hideAudioLevel ? 0 : 3) : undefined;
+};
+
+export default VideoTile;

package/src/Prebuilt/components/conference.jsx

@@ -0,0 +1,164 @@
+import React, { useEffect, useRef, useState } from 'react';
+import { useParams } from 'react-router-dom';
+import { usePrevious } from 'react-use';
+import {
+  HMSRoomState,
+  selectAppData,
+  selectIsConnectedToRoom,
+  selectRoomState,
+  useHMSActions,
+  useHMSStore,
+} from '@100mslive/react-sdk';
+import { Box, Flex } from '../../Layout';
+import { useHMSPrebuiltContext } from '../AppContext';
+import { ConferenceMainView } from '../layouts/mainView';
+import { Footer } from './Footer';
+import FullPageProgress from './FullPageProgress';
+import { Header } from './Header';
+import { RoleChangeRequestModal } from './RoleChangeRequestModal';
+import { useAuthToken, useIsHeadless } from './AppData/useUISettings';
+import { useNavigation } from './hooks/useNavigation';
+import { useSkipPreview } from './hooks/useSkipPreview';
+import { APP_DATA, EMOJI_REACTION_TYPE, isAndroid, isIOS, isIPadOS } from '../common/constants';
+
+const Conference = () => {
+  const navigate = useNavigation();
+  const { roomId, role } = useParams();
+  const isHeadless = useIsHeadless();
+  const roomState = useHMSStore(selectRoomState);
+  const prevState = usePrevious(roomState);
+  const isConnectedToRoom = useHMSStore(selectIsConnectedToRoom);
+  const hmsActions = useHMSActions();
+  const [hideControls, setHideControls] = useState(false);
+  const dropdownList = useHMSStore(selectAppData(APP_DATA.dropdownList));
+  const skipPreview = useSkipPreview();
+  const { showPreview } = useHMSPrebuiltContext();
+  const authTokenInAppData = useAuthToken();
+  const headerRef = useRef();
+  const footerRef = useRef();
+  const dropdownListRef = useRef();
+  const performAutoHide = hideControls && (isAndroid || isIOS || isIPadOS);
+
+  const toggleControls = () => {
+    if (dropdownListRef.current?.length === 0) {
+      setHideControls(value => !value);
+    }
+  };
+
+  useEffect(() => {
+    let timeout = null;
+    dropdownListRef.current = dropdownList || [];
+    if (dropdownListRef.current.length === 0) {
+      clearTimeout(timeout);
+      timeout = setTimeout(() => {
+        if (dropdownListRef.current.length === 0) {
+          setHideControls(true);
+        }
+      }, 5000);
+    }
+    return () => {
+      clearTimeout(timeout);
+    };
+  }, [dropdownList, hideControls]);
+
+  useEffect(() => {
+    if (!roomId) {
+      navigate(`/`);
+      return;
+    }
+    if (!showPreview) {
+      return;
+    }
+    if (
+      !prevState &&
+      !(roomState === HMSRoomState.Connecting || roomState === HMSRoomState.Reconnecting || isConnectedToRoom)
+    ) {
+      if (role) navigate(`/preview/${roomId || ''}/${role}`);
+      else navigate(`/preview/${roomId || ''}`);
+    }
+  }, [isConnectedToRoom, prevState, roomState, navigate, role, roomId, showPreview]);
+
+  useEffect(() => {
+    if (authTokenInAppData && !isConnectedToRoom && !showPreview && roomState !== HMSRoomState.Connecting) {
+      hmsActions
+        .join({
+          userName: 'Test',
+          authToken: authTokenInAppData,
+          initEndpoint: process.env.REACT_APP_ENV
+            ? `https://${process.env.REACT_APP_ENV}-init.100ms.live/init`
+            : undefined,
+          initialSettings: {
+            isAudioMuted: skipPreview,
+            isVideoMuted: skipPreview,
+            speakerAutoSelectionBlacklist: ['Yeti Stereo Microphone'],
+          },
+        })
+        .catch(console.error);
+    }
+  }, [authTokenInAppData, skipPreview, hmsActions, isConnectedToRoom, showPreview, roomState]);
+
+  useEffect(() => {
+    // beam doesn't need to store messages, saves on unnecessary store updates in large calls
+    if (isHeadless) {
+      hmsActions.ignoreMessageTypes(['chat', EMOJI_REACTION_TYPE]);
+    }
+  }, [isHeadless, hmsActions]);
+
+  if (!isConnectedToRoom) {
+    return <FullPageProgress />;
+  }
+
+  return (
+    <Flex css={{ size: '100%', overflow: 'hidden' }} direction="column">
+      {!isHeadless && (
+        <Box
+          ref={headerRef}
+          css={{
+            h: '$18',
+            transition: 'margin 0.3s ease-in-out',
+            marginTop: performAutoHide ? `-${headerRef.current?.clientHeight}px` : 'none',
+            '@md': {
+              h: '$17',
+            },
+          }}
+          data-testid="header"
+        >
+          <Header />
+        </Box>
+      )}
+      <Box
+        css={{
+          w: '100%',
+          flex: '1 1 0',
+          minHeight: 0,
+          paddingBottom: 'env(safe-area-inset-bottom)',
+        }}
+        id="conferencing"
+        data-testid="conferencing"
+        onClick={toggleControls}
+      >
+        <ConferenceMainView />
+      </Box>
+      {!isHeadless && (
+        <Box
+          ref={footerRef}
+          css={{
+            flexShrink: 0,
+            maxHeight: '$24',
+            transition: 'margin 0.3s ease-in-out',
+            marginBottom: performAutoHide ? `-${footerRef.current?.clientHeight}px` : undefined,
+            '@md': {
+              maxHeight: 'unset',
+            },
+          }}
+          data-testid="footer"
+        >
+          <Footer />
+        </Box>
+      )}
+      <RoleChangeRequestModal />
+    </Flex>
+  );
+};
+
+export default Conference;

package/src/Prebuilt/components/gridView.jsx

@@ -0,0 +1,85 @@
+import React, { Fragment } from 'react';
+import { useMedia } from 'react-use';
+import { Box, Flex } from '../../Layout';
+import { config as cssConfig } from '../../Theme';
+import { FirstPersonDisplay } from './FirstPersonDisplay';
+import { Image } from './Image';
+import VideoList from './VideoList';
+import { useAppConfig } from './AppData/useAppConfig';
+import { useIsHeadless } from './AppData/useUISettings';
+
+const MAX_TILES_FOR_MOBILE = 4;
+
+/**
+ * the below variables are for showing webinar etc. related image if required on certain meeting urls
+ */
+const webinarProps = JSON.parse(process.env.REACT_APP_WEBINAR_PROPS || '{}');
+const eventRoomIDs = webinarProps?.ROOM_IDS || [];
+const eventsImg = webinarProps?.IMAGE_FILE || ''; // the image to show in center
+// the link to navigate to when user clicks on the image
+const webinarInfoLink = webinarProps?.LINK_HREF || 'https://100ms.live/';
+
+// The center of the screen shows bigger tiles
+export const GridCenterView = ({ peers, maxTileCount }) => {
+  const mediaQueryLg = cssConfig.media.md;
+  const limitMaxTiles = useMedia(mediaQueryLg);
+
+  const headlessConfig = useAppConfig('headlessConfig');
+  const isHeadless = useIsHeadless();
+  return (
+    <Fragment>
+      <Box
+        css={{
+          flex: '1 1 0',
+          height: '100%',
+          mx: isHeadless && Number(headlessConfig?.tileOffset) === 0 ? '0' : '$8',
+          '@md': { flex: '2 1 0' },
+        }}
+      >
+        {peers && peers.length > 0 ? (
+          <VideoList peers={peers} maxTileCount={limitMaxTiles ? MAX_TILES_FOR_MOBILE : maxTileCount} />
+        ) : eventRoomIDs.some(id => window.location.href.includes(id)) ? (
+          <Box
+            css={{
+              display: 'grid',
+              placeItems: 'center',
+              size: '100%',
+              p: '$12',
+            }}
+          >
+            <a href={webinarInfoLink} target="_blank" rel="noreferrer">
+              <Image css={{ p: '$4', boxShadow: '$sm' }} alt="Event template" src={eventsImg} />
+            </a>
+          </Box>
+        ) : (
+          <FirstPersonDisplay />
+        )}
+      </Box>
+    </Fragment>
+  );
+};
+
+// Side pane shows smaller tiles
+export const GridSidePaneView = ({ peers }) => {
+  const headlessConfig = useAppConfig('headlessConfig');
+  const isHeadless = useIsHeadless();
+  return (
+    <Flex
+      direction="column"
+      css={{
+        flex: '0 0 20%',
+        mx: isHeadless && Number(headlessConfig?.tileOffset) === 0 ? '0' : '$8',
+        '@lg': {
+          flex: '0 0 25%',
+        },
+        '@md': {
+          flex: '1 1 0',
+        },
+      }}
+    >
+      <Flex css={{ flex: '1 1 0' }} align="end">
+        {peers && peers.length > 0 && <VideoList peers={peers} maxColCount={1} />}
+      </Flex>
+    </Flex>
+  );
+};

package/src/Prebuilt/components/hooks/useDropdownList.jsx

@@ -0,0 +1,23 @@
+import { useEffect } from 'react';
+import { useSetAppDataByKey } from '../AppData/useUISettings';
+import { APP_DATA } from '../../common/constants';
+
+export const useDropdownList = ({ name, open }) => {
+  const [dropdownList = [], setDropdownList] = useSetAppDataByKey(APP_DATA.dropdownList);
+
+  useEffect(() => {
+    if (open) {
+      if (!dropdownList.includes(name)) {
+        setDropdownList([...dropdownList, name]);
+      }
+    } else {
+      const index = dropdownList.indexOf(name);
+      if (index >= 0) {
+        const newDropdownList = [...dropdownList];
+        newDropdownList.splice(index, 1);
+        setDropdownList(newDropdownList);
+      }
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [open, name]);
+};

package/src/Prebuilt/components/hooks/useDropdownSelection.jsx

@@ -0,0 +1,6 @@
+import { useTheme } from '../../../';
+
+export const useDropdownSelection = () => {
+  const { themeType } = useTheme();
+  return themeType === 'dark' ? '$primaryDark' : '$grayLight';
+};

package/src/Prebuilt/components/hooks/useFeatures.js

@@ -0,0 +1,22 @@
+import { selectTemplateAppData, useHMSStore } from '@100mslive/react-sdk';
+
+export const useFeatures = () => {
+  let features = useHMSStore(selectTemplateAppData)?.features;
+  return features && typeof features === 'string' ? features.split(',') : undefined;
+};
+
+export const useIsFeatureEnabled = key => {
+  let features = useFeatures();
+  return features ? features.includes(key) : true;
+};
+
+export const useRolePreference = () => {
+  let preference = useHMSStore(selectTemplateAppData)?.rolePreference;
+  try {
+    preference = JSON.parse(preference || '{}');
+    return preference;
+  } catch (e) {
+    console.log('role preference parse error', e);
+    return undefined;
+  }
+};

package/src/Prebuilt/components/hooks/useFullscreen.js

@@ -0,0 +1,43 @@
+import { useCallback, useEffect, useState } from 'react';
+import screenfull from 'screenfull';
+import { ToastManager } from '../Toast/ToastManager';
+
+export const useFullscreen = () => {
+  const [isFullScreenEnabled, setIsFullScreenEnabled] = useState(screenfull.isFullscreen);
+
+  const toggle = useCallback(async () => {
+    if (!screenfull.isEnabled) {
+      ToastManager.addToast({ title: 'Fullscreen feature not supported' });
+      return;
+    }
+    try {
+      if (isFullScreenEnabled) {
+        await screenfull.exit();
+      } else {
+        await screenfull.request();
+      }
+    } catch (err) {
+      ToastManager.addToast({ title: err.message });
+    }
+  }, [isFullScreenEnabled]);
+
+  useEffect(() => {
+    const onChange = () => {
+      setIsFullScreenEnabled(screenfull.isFullscreen);
+    };
+    if (screenfull.isEnabled) {
+      screenfull.on('change', onChange);
+    }
+    return () => {
+      if (screenfull.isEnabled) {
+        screenfull.off('change', onChange);
+      }
+    };
+  }, []);
+
+  return {
+    allowed: screenfull.isEnabled,
+    isFullscreen: isFullScreenEnabled,
+    toggleFullscreen: toggle,
+  };
+};

package/src/Prebuilt/components/hooks/useMetadata.jsx

@@ -0,0 +1,52 @@
+import { useCallback, useState } from 'react';
+import { selectLocalPeerID, selectPeerMetadata, useHMSActions, useHMSStore } from '@100mslive/react-sdk';
+
+export const useMyMetadata = () => {
+  const hmsActions = useHMSActions();
+  const localPeerId = useHMSStore(selectLocalPeerID);
+  const metaData = useHMSStore(selectPeerMetadata(localPeerId));
+  const [isHandRaised, setHandRaised] = useState(metaData?.isHandRaised || false);
+  const [isBRBOn, setBRBOn] = useState(metaData?.isBRBOn || false); // BRB = be right back
+
+  const update = async updatedFields => {
+    try {
+      await hmsActions.changeMetadata(Object.assign(metaData, updatedFields));
+      return true;
+    } catch (error) {
+      console.error('failed to update metadata ', metaData, updatedFields);
+    }
+  };
+
+  const toggleHandRaise = useCallback(async () => {
+    const brbUpdate = !isHandRaised ? false : isBRBOn;
+    const success = await update({
+      isHandRaised: !isHandRaised,
+      isBRBOn: brbUpdate,
+    });
+    if (success) {
+      setBRBOn(brbUpdate);
+      setHandRaised(!isHandRaised);
+    }
+  }, [isHandRaised, isBRBOn]); //eslint-disable-line
+
+  const toggleBRB = useCallback(async () => {
+    const handRaiseUpdate = !isBRBOn ? false : isHandRaised;
+    const success = await update({
+      isHandRaised: handRaiseUpdate,
+      isBRBOn: !isBRBOn,
+    });
+    if (success) {
+      setBRBOn(!isBRBOn);
+      setHandRaised(handRaiseUpdate);
+    }
+  }, [isHandRaised, isBRBOn]); //eslint-disable-line
+
+  return {
+    isHandRaised,
+    isBRBOn,
+    metaData,
+    updateMetaData: update,
+    toggleHandRaise,
+    toggleBRB,
+  };
+};

package/src/Prebuilt/components/hooks/useNavigation.js

@@ -0,0 +1,19 @@
+import { useCallback } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { getRoutePrefix } from '../../common/utils';
+
+export const useNavigation = () => {
+  const navigate = useNavigate();
+  const navigation = useCallback(
+    path => {
+      const prefix = getRoutePrefix();
+      let route = path;
+      if (prefix && !path.startsWith(prefix)) {
+        route = `${prefix}${path}`;
+      }
+      navigate(route);
+    },
+    [navigate],
+  );
+  return navigation;
+};

package/src/Prebuilt/components/hooks/usePlaylist.js

@@ -0,0 +1,25 @@
+import {
+  HMSPlaylistType,
+  selectAudioPlaylist,
+  selectVideoPlaylist,
+  useHMSActions,
+  useHMSStore,
+} from '@100mslive/react-sdk';
+
+export const usePlaylist = type => {
+  const isAudioPlaylist = type === HMSPlaylistType.audio;
+  const selector = isAudioPlaylist ? selectAudioPlaylist : selectVideoPlaylist;
+  const active = useHMSStore(selector.selectedItem);
+  const selection = useHMSStore(selector.selection);
+  const playlist = useHMSStore(selector.list);
+  const hmsActions = useHMSActions();
+  const playlistAction = isAudioPlaylist ? hmsActions.audioPlaylist : hmsActions.videoPlaylist;
+
+  return {
+    active,
+    hasNext: selection.hasNext,
+    hasPrevious: selection.hasPrevious,
+    actions: playlistAction,
+    list: playlist,
+  };
+};

package/src/Prebuilt/components/hooks/usePlaylistMusic.js

@@ -0,0 +1,35 @@
+import { useCallback } from 'react';
+import {
+  selectAudioPlaylist,
+  selectAudioPlaylistTrackByPeerID,
+  selectPeerSharingAudioPlaylist,
+  useHMSActions,
+  useHMSStore,
+} from '@100mslive/react-sdk';
+
+export const usePlaylistMusic = () => {
+  const peer = useHMSStore(selectPeerSharingAudioPlaylist);
+  const track = useHMSStore(selectAudioPlaylistTrackByPeerID(peer?.id));
+  const selection = useHMSStore(selectAudioPlaylist.selectedItem);
+  const hmsActions = useHMSActions();
+
+  const play = useCallback(
+    async selectedId => {
+      await hmsActions.audioPlaylist.play(selectedId);
+    },
+    [hmsActions],
+  );
+
+  const pause = useCallback(() => {
+    hmsActions.audioPlaylist.pause();
+  }, [hmsActions]);
+
+  const setVolume = useCallback(
+    value => {
+      hmsActions.setVolume(value, track?.id);
+    },
+    [hmsActions, track],
+  );
+
+  return { selection, peer, track, play, pause, setVolume };
+};

package/src/Prebuilt/components/hooks/useScreenshareAudio.js

@@ -0,0 +1,28 @@
+import { useCallback } from 'react';
+import {
+  selectPeerSharingAudio,
+  selectScreenShareAudioByPeerID,
+  useHMSActions,
+  useHMSStore,
+} from '@100mslive/react-sdk';
+
+export const useScreenshareAudio = () => {
+  const hmsActions = useHMSActions();
+  const peer = useHMSStore(selectPeerSharingAudio);
+  const track = useHMSStore(selectScreenShareAudioByPeerID(peer?.id));
+
+  const handleMute = useCallback(() => {
+    if (!peer.isLocal) {
+      hmsActions.setVolume(!track.volume ? 100 : 0, track.id);
+    } else {
+      hmsActions.setEnabledTrack(track.id, !track.enabled).catch(console.error);
+    }
+  }, [peer, hmsActions, track]);
+
+  let muted = undefined;
+  if (peer && track) {
+    muted = peer.isLocal ? !track.enabled : track.volume === 0;
+  }
+
+  return { peer, track, muted, onToggle: handleMute };
+};