Pin a peer in 100ms sample app

AppContext.js

 const deepSetPinnedPeer = peerId =>
    setState(prevState => ({ ...prevState, pinnedPeer: peerId }));

  return (
    <AppContext.Provider
      value={{
        setMaxTileCount: deepSetMaxTiles,
        setSubscribedNotifications: deepSetSubscribedNotifications,
        setuiViewMode: deepSetuiViewMode,
        setShowStatsOnTiles: deepSetShowStatsOnTiles,
        setEnableAmbientMusic: deepSetEnableAmbientMusic,
        enableAmbientMusic: state.enableAmbientMusic,
        showStatsOnTiles: state.showStatsOnTiles,
        uiViewMode: state.uiViewMode,
        maxTileCount: state.maxTileCount,
        subscribedNotifications: state.subscribedNotifications,
        appPolicyConfig: state.localAppPolicyConfig,
        HLS_VIEWER_ROLE:
          getMetadata(appDetails)[DEFAULT_HLS_ROLE_KEY] ||
          DEFAULT_HLS_VIEWER_ROLE,
        tokenEndpoint,
        audioPlaylist,
        videoPlaylist,
        logo,
        isHeadless: state.isHeadless,
        setIsHeadless: deepSetIsHeadLess,
        isAudioOnly: state.isAudioOnly,
        setIsAudioOnly: deepSetIsAudioOnly,
        pinnedPeer: null,
        setAsPinned: deepSetPinnedPeer,
      }}
    >



/// Usage of setAsPinned:
/* Whenever you want to pin a particular peer call the setAsPinned with that peer's id. 
*  const { setAsPinned } = useContext(AppContext);
* Then call setAsPinned with the peerId.
*/

MainGridView.js

const {
    maxTileCount,
    appPolicyConfig: { center: centerRoles = [], sidepane: sidepaneRoles = [] },
    showStatsOnTiles,
    pinnedPeer,
  } = useContext(AppContext);
  const peers = useHMSStore(selectPeers);
  const localPeerId = useHMSStore(selectLocalPeerID);
  const centerPeers = pinnedPeer
    ? [pinnedPeer]
    : peers.filter(peer => centerRoles.includes(peer.roleName));
  const sidebarPeers = pinnedPeer
    ? peers.filter(peer => peer.id !== pinnedPeer)
    : peers.filter(peer => sidepaneRoles.includes(peer.roleName));


// if there is no need to render sidebar, just pass do the following:
// const centerPeers = peers;
// const sidebarPeers = [];