@fortawesome/free-solid-svg-icons#faVideo TypeScript Examples

The following examples show how to use @fortawesome/free-solid-svg-icons#faVideo. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: VideoInputControl.tsx    From amazon-chime-sdk-smart-video-sending-demo with Apache License 2.0 5 votes vote down vote up
VideoInputControl: React.FC = () => {
  const meetingManager = useMeetingManager();
  const audioVideo = useAudioVideo();
  const { isLocalVideoEnabled, toggleVideo, nameplate, setNameplate } = useLocalVideoContext();
  const videoEl = useRef<HTMLVideoElement>(null);
  const canSendLocalVideo = useVideoSendingCommand();
  const attendeeName = meetingManager.attendeeName!;

  useEffect(() => {
    if (!audioVideo) {
      return;
    }
    const sendLocalVideo = async () => {
      await audioVideo.chooseVideoInputDevice(meetingManager.selectedVideoInputDevice);
      audioVideo.startLocalVideoTile();
      setNameplate(attendeeName);
    }

    const sendLocalVideoPreview = async () => {
      await audioVideo.chooseVideoInputDevice(meetingManager.selectedVideoInputDevice);
      if (videoEl.current) {
        audioVideo.startVideoPreviewForVideoInput(videoEl.current);
        setNameplate(`${attendeeName} - preview`);
      }else {
        throw new Error('No video preview element to show preview!');
      }
    }

    if (canSendLocalVideo && isLocalVideoEnabled !== 'disabled') {
      if (videoEl.current) {
        audioVideo.stopVideoPreviewForVideoInput(videoEl.current);
      }
      sendLocalVideo();
    }
    if (!canSendLocalVideo && isLocalVideoEnabled === 'enabled') {
      audioVideo.stopLocalVideoTile();
      sendLocalVideoPreview();
    }
  }, [audioVideo, canSendLocalVideo]);

  return (
    <>
      <ButtonGroup>
        <IconButton
          icon={isLocalVideoEnabled === 'enabled' ? faVideo : isLocalVideoEnabled === 'disabled' ? faVideoSlash : faSpinner}
          disabled={isLocalVideoEnabled === 'pending'}
          onClick={() => toggleVideo(videoEl.current)} />
      </ButtonGroup>
      <LocalVideo
        nameplate={nameplate}
        videoEl={videoEl}
        style={{ width: "20rem", position: "absolute", top: "3.5rem", background: "#1c1c1c" }}
      />
    </>
  );
}
Example #2
Source File: VideoSelectButton.tsx    From livekit-react with Apache License 2.0 5 votes vote down vote up
VideoSelectButton = ({
  isEnabled,
  onClick,
  onSourceSelected,
  disableText = 'Disable Video',
  enableText = 'Enable Video',
  className,
  isButtonDisabled,
  popoverContainerClassName,
  popoverTriggerBtnClassName,
  popoverTriggerBtnSeparatorClassName,
}: VideoSelectButtonProps) => {
  const [sources, setSources] = useState<MediaDeviceInfo[]>([]);
  const [menuItems, setMenuItems] = useState<MenuItem[]>([]);

  const listVideoDevices = useCallback(async () => {
    const devices = await Room.getLocalDevices('videoinput');
    setSources(devices);
    setMenuItems(
      devices.map((item) => {
        return { label: item.label };
      }),
    );
  }, []);

  useEffect(() => {
    listVideoDevices();
    navigator.mediaDevices.addEventListener('devicechange', listVideoDevices);
    return () => {
      navigator.mediaDevices.removeEventListener('devicechange', listVideoDevices);
    };
  }, []);

  const handleMenuItem = (item: MenuItem) => {
    const device = sources.find((d) => d.label === item.label);
    if (device && onSourceSelected) {
      onSourceSelected(device);
    }
  };

  return (
    <ControlButton
      label={isEnabled ? disableText : enableText}
      icon={isEnabled ? faVideo : faVideoSlash}
      disabled={isButtonDisabled}
      onClick={onClick}
      menuItems={menuItems}
      onMenuItemClick={handleMenuItem}
      className={className}
      popoverContainerClassName={popoverContainerClassName}
      popoverTriggerBtnClassName={popoverTriggerBtnClassName}
      popoverTriggerBtnSeparatorClassName={popoverTriggerBtnSeparatorClassName}
    />
  );
}
Example #3
Source File: Avatar.tsx    From sync-party with GNU General Public License v3.0 5 votes vote down vote up
export default function Avatar({
    username,
    size,
    user,
    showTitle,
    online,
    webRtc,
    fontSize
}: Props): JSX.Element {
    const { t } = useTranslation();

    return (
        <div
            title={
                showTitle
                    ? username +
                      ': ' +
                      (online ? t('common.online') : t('common.offline'))
                    : ''
            }
            key={username}
            className={
                'rounded-full ' +
                (size === 10 ? 'h-10 w-10' : 'h-8 w-8') +
                ' mr-2 mt-2 backgroundShade flex items-center justify-center' +
                (username === user.username
                    ? ' border border-purple-400 text-purple-400'
                    : ' border border-gray-500 text-gray-200') +
                (fontSize ? ' ' + fontSize : '')
            }
        >
            {(online === true || online === false) && (
                <div className="relative z-40">
                    <div
                        className={
                            'absolute rounded-full h-3 w-3 mb-2 ml-5 bottom-0 border' +
                            (online
                                ? 'border-green-500 bg-green-500'
                                : 'border-red-600 bg-red-600')
                        }
                    ></div>
                    {online && webRtc && webRtc.mode !== 'none' && (
                        <div className="absolute text-xs h-2 w-2 mt-2 ml-5 top-0">
                            <FontAwesomeIcon
                                icon={
                                    webRtc.mode === 'audio'
                                        ? faPhoneAlt
                                        : faVideo
                                }
                            />
                        </div>
                    )}
                </div>
            )}
            <span className="z-50">
                {username.toLowerCase().substring(0, 3)}
            </span>
        </div>
    );
}
Example #4
Source File: CommunicationBar.tsx    From sync-party with GNU General Public License v3.0 4 votes vote down vote up
export default function CommunicationBar({
    toggleChat,
    toggleWebRtcAudio,
    toggleWebRtcVideo,
    chatIsActive,
    webRtcAudioIsActive,
    webRtcVideoIsActive,
    uiVisible,
    showVideos,
    setShowVideos,
    audioIsMuted,
    videoIsMuted,
    toggleAudioIsMuted,
    toggleVideoIsMuted
}: Props): ReactElement {
    const { t } = useTranslation();

    return (
        <div
            className={
                'absolute bottom-0 left-0 ml-3' +
                (uiVisible ? ' mb-12' : ' mb-3')
            }
        >
            <div className="flex flex-row">
                <BarButton
                    isActive={chatIsActive}
                    clickHandler={toggleChat}
                    icon={faComment}
                    titleText={chatIsActive ? t('chat.close') : t('chat.open')}
                    size="large"
                />
                {!webRtcAudioIsActive && (
                    <BarButton
                        isActive={webRtcVideoIsActive}
                        clickHandler={toggleWebRtcVideo}
                        icon={faVideo}
                        titleText={
                            webRtcVideoIsActive
                                ? t('webRtc.videoClose')
                                : t('webRtc.videoOpen')
                        }
                        size="large"
                    />
                )}
                {!webRtcVideoIsActive && (
                    <BarButton
                        isActive={webRtcAudioIsActive}
                        clickHandler={toggleWebRtcAudio}
                        icon={faPhoneAlt}
                        titleText={
                            webRtcAudioIsActive
                                ? t('webRtc.audioClose')
                                : t('webRtc.audioOpen')
                        }
                        size="large"
                    />
                )}
                {webRtcVideoIsActive && (
                    <BarButton
                        isActive={!videoIsMuted}
                        clickHandler={toggleVideoIsMuted}
                        titleText={
                            videoIsMuted
                                ? t('webRtc.unmuteVideo')
                                : t('webRtc.muteVideo')
                        }
                        icon={videoIsMuted ? faVideoSlash : faVideo}
                        size="small"
                    />
                )}
                {(webRtcAudioIsActive || webRtcVideoIsActive) && (
                    <BarButton
                        isActive={!audioIsMuted}
                        clickHandler={toggleAudioIsMuted}
                        titleText={
                            audioIsMuted
                                ? t('webRtc.unmuteAudio')
                                : t('webRtc.muteAudio')
                        }
                        icon={audioIsMuted ? faMicrophoneSlash : faMicrophone}
                        size="small"
                    />
                )}
                {webRtcVideoIsActive && (
                    <BarButton
                        isActive={showVideos}
                        clickHandler={(): void => setShowVideos(!showVideos)}
                        titleText={
                            showVideos
                                ? t('webRtc.hideVideos')
                                : t('webRtc.showVideos')
                        }
                        icon={showVideos ? faEye : faEyeSlash}
                        size="small"
                    />
                )}
            </div>
        </div>
    );
}