Pin For Everyone

The following guide how to add pin for everyone option for the media streams.

STEP 1

Use Customization API to update the bottom bar for new end-call functionality.

const userCustomization = customize({
    components: {
        videoCall: {
            ...
            // update the wrapper to add pin for everyone option
            wrapper: CustomWrapperProvider,
            ...
        },
    },
});

STEP 2

Update the Custom Wrapper to listen for Pin For Everyone custom event.

export const CustomWrapperProvider = () => {
  const [pinnedForAllUid, setPinnedForAllUid] =
    (useState < UidType) | (null > null);
  const { pinForEveryone, unPinForEveryone } = useUserActionMenu();

  useEffect(() => {
    customEvents.on("PIN_FOR_EVERYONE", ({ payload }) => {
      try {
        const data = JSON.parse(payload);
        const pinUID =
          data.uidType === "whiteboard" && data.pinForAllUid
            ? getWhiteboardUid()
            : data.pinForAllUid;

        setPinnedForAllUid(pinUID);
        if (data.pinForAllUid) {
          pinForEveryone(pinUID);
        } else {
          unPinForEveryone();
        }
      } catch (error) {
        console.log("debugging error on PIN_FOR_EVERYONE listener ");
      }
    });
    return () => {
      customEvents.off("PIN_FOR_EVERYONE", () => {});
    };
  }, []);

  return (
    <CustomWrapperContext.Provider
      value={{ pinnedForAllUid, setPinnedForAllUid }}
    >
      <PinProvider>{props.children}</PinProvider>
    </CustomWrapperContext.Provider>
  );
};

STEP 3

Create the Pin Provider to update user action menu options to include pin for everyone option.

const PinForEveryone = ({
  closeActionMenu,
  targetUid,
  targetUidType,
}: {
  closeActionMenu?: () => void;
  targetUid: UidType;
  targetUidType: string;
}) => {
  const {pinnedForAllUid, setPinnedForAllUid} =
    useContext(CustomWrapperContext);
  const {pinForEveryone, unPinForEveryone} = useUserActionMenu();
  const {activeUids, pinnedUid} = useContent();

  const isPinned = pinnedForAllUid === targetUid;
  return (
    <UserActionMenuItem
      label={isPinned ? 'Unpin for everyone' : 'Pin for everyone'}
      icon={isPinned ? 'unpin-outlined' : 'pin-outlined'}
      iconColor={'yellow'}
      textColor={'yellow'}
      disabled={activeUids.length === 1}
      onPress={() => {
        const newPinnedUid = pinnedForAllUid === targetUid ? null : targetUid;

        customEvents.send(
          'PIN_FOR_EVERYONE',
          JSON.stringify({pinForAllUid: newPinnedUid, uidType: targetUidType}),
          PersistanceLevel.Session,
        );

        // Update local state
        setPinnedForAllUid(newPinnedUid);

        // pinned for local user
        if (newPinnedUid) {
          pinForEveryone(newPinnedUid);
        } else {
          unPinForEveryone();
        }

        closeActionMenu?.();
      }}
    />
  );
};

const PinProvider = (props: PinProviderProps) => {
  const {
    data: {isHost},
  } = useRoomInfo();
  const localUid = useLocalUid();
  const {updateUserActionMenuItems} = useUserActionMenu();
  const {activeUids} = useContent();

  useEffect(() => {
    const updateActions = async () => {
      // updated user action menu items
      updateUserActionMenuItems({
        ...
        'pin-for-everyone': {
          component: PinForEveryone,
          order: 0,
          disabled: activeUids.length === 1,
          visibility: [
            'host-remote',
            'host-self',
            'event-host-remote',
            'event-host-self',
          ],
        },
        ...
      });
    };
    updateActions();
  }, [activeUids]);
  return <PinContext.Provider value={{}}>{props.children}</PinContext.Provider>;
};

Now, you should be able to achieve custom pin-for-everyone functionality with Customization API and Custom events.

---