Permission notification

The default component used to display permission grant notifications is based on Notification component. It is just a popover displaying text. The text displayed is customisable.

General usage

The PermissionNotification component is used by some call controls buttons. Here we demonstrate, how it can be used in a button that toggles the audio:

import {
  OwnCapability,
  PermissionNotification,
  Restricted,
  useRequestPermission,
  useCallStateHooks,
} from '@stream-io/video-react-sdk';
import MyIcon from '../Icon';

export type ToggleAudioPublishingButtonProps = {
  // props ...
};

export const ToggleAudioPublishingButton = (
  props: ToggleAudioPublishingButtonProps,
) => {
  const { hasPermission, requestPermission, isAwaitingPermission } =
    useRequestPermission(OwnCapability.SEND_AUDIO);

  const { useMicrophoneState } = useCallStateHooks();
  const { microphone } = useMicrophoneState();

  return (
    <Restricted requiredGrants={[OwnCapability.SEND_AUDIO]}>
      <PermissionNotification
        permission={OwnCapability.SEND_AUDIO}
        isAwaitingApproval={isAwaitingPermission}
        messageApproved="You can now speak."
        messageAwaitingApproval="Awaiting for an approval to speak."
        messageRevoked="You can no longer speak."
      >
        <MyButton
          onClick={async () => {
            if (!hasPermission) {
              await requestPermission();
            } else {
              await microphone.toggle();
            }
          }}
        >
          <MyIcon />
        </MyButton>
      </PermissionNotification>
    </Restricted>
  );
};

Props

isAwaitingApproval

Type
boolean

Set this to true if there is ongoing request for the permission.

messageApproved

Type
string

The message to display in the notification once the requested permission is granted.

messageRevoked

Type
string

The message to display in the notification once a permission is revoked.

messageAwaitingApproval

Type
string

The message to display in the notification while the requested permission is awaiting approval.

permission

Type
OwnCapability

The permission for which the notification is displayed.

visibilityTimeout

Type	Default
number | undefined	3500

The time in milliseconds to display the notification. Defaults to 3500ms.

Customization

To learn more about creating custom permission requests listings, have a look at our permission requests customization guide.