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.

LivestreamPlayer

Permission requests