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

The following examples show how to use @fortawesome/free-solid-svg-icons#faPhoneAlt. 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: Avatar.tsx From sync-party with GNU General Public License v3.0

5 votes

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 #2

Source File: CommunicationBar.tsx From sync-party with GNU General Public License v3.0

4 votes

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>
    );
}