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

The following examples show how to use @fortawesome/free-solid-svg-icons#faExpand. 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: window.component.ts    From nica-os with MIT License 5 votes vote down vote up 
faMaximize = faExpand;
Example #2
Source File: WebRtcVideoOverlayMenu.tsx    From sync-party with GNU General Public License v3.0 5 votes vote down vote up 
export default function WebRtcVideoOverlayMenu({
    isActive,
    displayVertically,
    setDisplayVertically,
    displayOwnVideo,
    setDisplayOwnVideo,
    otherVideosAmount
}: Props): ReactElement {
    const { t } = useTranslation();
    const dispatch = useDispatch();
    const webRtcState = useSelector(
        (state: RootAppState) => state.globalState.webRtc
    );
    const uiVisible = useSelector(
        (state: RootAppState) => state.globalState.uiVisible
    );

    return (
        <div
            className={
                'absolute top-0 left-0 flex flex-row rounded p-1 bg-black opacity-75' +
                (uiVisible && (isActive || webRtcState.isFullscreen)
                    ? ''
                    : ' hidden') +
                (webRtcState.isFullscreen ? ' ml-1 mt-8' : ' m-1')
            }
            style={{ zIndex: 1000 }}
        >
            <BarButton
                size="small"
                isActive={displayOwnVideo}
                clickHandler={(): void => setDisplayOwnVideo(!displayOwnVideo)}
                icon={displayOwnVideo ? faUserAlt : faUserAltSlash}
                titleText={t(
                    displayOwnVideo
                        ? 'webRtc.toggleUserVideoOff'
                        : 'webRtc.toggleUserVideoOn'
                )}
                margins="mt-0 mr-2"
            />
            <BarButton
                size="small"
                isActive={webRtcState.isFullscreen || false}
                clickHandler={(): void => {
                    dispatch(
                        setGlobalState({
                            webRtc: {
                                ...webRtcState,
                                isFullscreen: !webRtcState.isFullscreen
                            }
                        })
                    );
                }}
                icon={webRtcState.isFullscreen ? faCompress : faExpand}
                titleText={t('webRtc.fullscreen')}
                margins={'mt-0' + (otherVideosAmount > 1 ? ' mr-2' : '')}
            />
            {otherVideosAmount > 1 && (
                <BarButton
                    size="small"
                    isActive={displayVertically}
                    clickHandler={(): void =>
                        setDisplayVertically(!displayVertically)
                    }
                    icon={faArrowsAltV}
                    titleText={t(
                        displayVertically
                            ? 'webRtc.displayHorizontally'
                            : 'webRtc.displayVertically'
                    )}
                    margins={'mt-0'}
                />
            )}
        </div>
    );
}
Example #3
Source File: BottomBar.tsx    From sync-party with GNU General Public License v3.0 4 votes vote down vote up 
export default function BottomBar({
    playerState,
    handlePlayPause,
    handleSeekMouseDown,
    handleSeekChange,
    handleSeekMouseUp,
    handleVolumeChange,
    handleFullScreen
}: Props): JSX.Element {
    const { t } = useTranslation();

    const party = useSelector((state: RootAppState) => state.globalState.party);
    const playingItem = useSelector(
        (state: RootAppState) => state.globalState.playingItem
    );
    const syncStatus = useSelector(
        (state: RootAppState) => state.globalState.syncStatus
    );
    const memberStatus = useSelector(
        (state: RootAppState) => state.globalState.memberStatus
    );
    const uiVisible = useSelector(
        (state: RootAppState) => state.globalState.uiVisible
    );
    const position = useSelector(
        (state: RootAppState) => state.globalState.position
    );

    return (
        <div className="flex flex-col">
            <div className="w-full absolute bottom-0 pb-12 z-40 align-bottom flex flex-row justify-end">
                <SyncStatus
                    party={party}
                    playerState={playerState}
                    syncStatus={syncStatus}
                    memberStatus={memberStatus}
                    uiVisible={uiVisible}
                ></SyncStatus>
            </div>
            <div
                className={
                    'flex flex-row px-1 w-full absolute bottom-0 left-0 backgroundShade z-50' +
                    (playingItem && uiVisible ? '' : ' hidden')
                }
            >
                <ButtonIcon
                    title={playerState.isPlaying ? 'Pause' : 'Play'}
                    icon={
                        playerState.isPlaying ? (
                            <FontAwesomeIcon
                                size="lg"
                                icon={faPause}
                            ></FontAwesomeIcon>
                        ) : (
                            <FontAwesomeIcon
                                size="lg"
                                icon={faPlay}
                            ></FontAwesomeIcon>
                        )
                    }
                    onClick={handlePlayPause}
                    className="p-2"
                ></ButtonIcon>
                {playingItem && (
                    <RangeSlider
                        ariaLabel="Seek bar"
                        value={position}
                        onMouseDown={handleSeekMouseDown}
                        onChange={handleSeekChange}
                        onMouseUp={handleSeekMouseUp}
                        className={
                            'slider' +
                            (playerState.duration !== Infinity // Streams, e.g. online radio
                                ? ''
                                : ' invisible')
                        }
                    ></RangeSlider>
                )}
                <div className="mx-2 my-auto">
                    <Duration
                        className={
                            playerState.duration !== Infinity
                                ? ''
                                : ' invisible'
                        }
                        seconds={playerState.duration * position}
                    ></Duration>
                </div>
                <RangeSlider
                    ariaLabel="Volume Slider"
                    className={'slider slider-alt slider-small mr-2'}
                    onChange={handleVolumeChange}
                    value={playerState.volume}
                    width={'w-24'}
                ></RangeSlider>
                <div className="mr-2 my-auto">
                    <ButtonIcon
                        onClick={(
                            event: React.MouseEvent<HTMLInputElement>
                        ): void => {
                            handleFullScreen(event);
                        }}
                        title={t('common.fullscreen')}
                        icon={
                            <FontAwesomeIcon
                                className="text-gray-200 hover:text-purple-500"
                                icon={
                                    playerState.isFullScreen
                                        ? faCompress
                                        : faExpand
                                }
                                size="lg"
                            ></FontAwesomeIcon>
                        }
                    ></ButtonIcon>
                </div>
            </div>
        </div>
    );
}