"Fossies" - the Fresh Open Source Software Archive

Member "jitsi-meet-7315/react/features/participants-pane/components/web/ParticipantQuickAction.tsx" (2 Jun 2023, 3743 Bytes) of package /linux/misc/jitsi-meet-7315.tar.gz:

As a special service "Fossies" has tried to format the requested source page into HTML format using (guessed) TSX (TypeScript with React) source code syntax highlighting (style: standard) with prefixed line numbers. Alternatively you can here view or download the uninterpreted source code file. See also the last Fossies "Diffs" side-by-side code changes report for "ParticipantQuickAction.tsx": jitsi-meet_8319_vs_jitsi-meet_8615.

    1 import React, { useCallback } from 'react';
    2 import { useTranslation } from 'react-i18next';
    3 import { useDispatch } from 'react-redux';
    4 import { makeStyles } from 'tss-react/mui';
    5 
    6 import { approveParticipantAudio, approveParticipantVideo } from '../../../av-moderation/actions';
    7 import Button from '../../../base/ui/components/web/Button';
    8 import { QUICK_ACTION_BUTTON } from '../../constants';
    9 
   10 interface IProps {
   11 
   12     /**
   13      * The translated ask unmute aria label.
   14      */
   15     ariaLabel?: boolean;
   16 
   17     /**
   18      * The translated "ask unmute" text.
   19      */
   20     askUnmuteText?: string;
   21 
   22     /**
   23      * The type of button to be displayed.
   24      */
   25     buttonType: string;
   26 
   27     /**
   28      * Callback used to open a confirmation dialog for audio muting.
   29      */
   30     muteAudio: Function;
   31 
   32     /**
   33      * Label for mute participant button.
   34      */
   35     muteParticipantButtonText?: string;
   36 
   37     /**
   38      * The ID of the participant.
   39      */
   40     participantID: string;
   41 
   42     /**
   43      * The name of the participant.
   44      */
   45     participantName: string;
   46 
   47     /**
   48      * Callback used to stop a participant's video.
   49      */
   50     stopVideo: Function;
   51 
   52 }
   53 
   54 const useStyles = makeStyles()(theme => {
   55     return {
   56         button: {
   57             marginRight: theme.spacing(2)
   58         }
   59     };
   60 });
   61 
   62 const ParticipantQuickAction = ({
   63     buttonType,
   64     muteAudio,
   65     participantID,
   66     participantName,
   67     stopVideo
   68 }: IProps) => {
   69     const { classes: styles } = useStyles();
   70     const dispatch = useDispatch();
   71     const { t } = useTranslation();
   72 
   73     const askToUnmute = useCallback(() => {
   74         dispatch(approveParticipantAudio(participantID));
   75     }, [ dispatch, participantID ]);
   76 
   77     const allowVideo = useCallback(() => {
   78         dispatch(approveParticipantVideo(participantID));
   79     }, [ dispatch, participantID ]);
   80 
   81     switch (buttonType) {
   82     case QUICK_ACTION_BUTTON.MUTE: {
   83         return (
   84             <Button
   85                 accessibilityLabel = { `${t('participantsPane.actions.mute')} ${participantName}` }
   86                 className = { styles.button }
   87                 label = { t('participantsPane.actions.mute') }
   88                 onClick = { muteAudio(participantID) }
   89                 size = 'small'
   90                 testId = { `mute-audio-${participantID}` } />
   91         );
   92     }
   93     case QUICK_ACTION_BUTTON.ASK_TO_UNMUTE: {
   94         return (
   95             <Button
   96                 accessibilityLabel = { `${t('participantsPane.actions.askUnmute')} ${participantName}` }
   97                 className = { styles.button }
   98                 label = { t('participantsPane.actions.askUnmute') }
   99                 onClick = { askToUnmute }
  100                 size = 'small'
  101                 testId = { `unmute-audio-${participantID}` } />
  102         );
  103     }
  104     case QUICK_ACTION_BUTTON.ALLOW_VIDEO: {
  105         return (
  106             <Button
  107                 accessibilityLabel = { `${t('participantsPane.actions.askUnmute')} ${participantName}` }
  108                 className = { styles.button }
  109                 label = { t('participantsPane.actions.allowVideo') }
  110                 onClick = { allowVideo }
  111                 size = 'small'
  112                 testId = { `unmute-video-${participantID}` } />
  113         );
  114     }
  115     case QUICK_ACTION_BUTTON.STOP_VIDEO: {
  116         return (
  117             <Button
  118                 accessibilityLabel = { `${t('participantsPane.actions.mute')} ${participantName}` }
  119                 className = { styles.button }
  120                 label = { t('participantsPane.actions.stopVideo') }
  121                 onClick = { stopVideo(participantID) }
  122                 size = 'small'
  123                 testId = { `mute-video-${participantID}` } />
  124         );
  125     }
  126     default: {
  127         return null;
  128     }
  129     }
  130 };
  131 
  132 export default ParticipantQuickAction;