source: jetpack/trunk/jetpack_vendor/automattic/jetpack-videopress/src/client/admin/components/admin-page/libraries.tsx @ 2832426

/**
 * External dependencies
 */
import { Button, Text, useBreakpointMatch } from '@automattic/jetpack-components';
import { createInterpolateElement } from '@wordpress/element';
import { __, sprintf } from '@wordpress/i18n';
import { grid, formatListBullets } from '@wordpress/icons';
import classnames from 'classnames';
import React, { useState } from 'react';
import { useHistory } from 'react-router-dom';
/**
 * Internal dependencies
 */
import useQueryStringPages from '../../hooks/use-query-string-pages';
import useVideos from '../../hooks/use-videos';
import { SearchInput } from '../input';
import { ConnectLocalPagination, ConnectPagination } from '../pagination';
import { FilterButton, ConnectFilterSection } from '../video-filter';
import VideoGrid from '../video-grid';
import VideoList, { LocalVideoList } from '../video-list';
import styles from './styles.module.scss';
/**
 * Types
 */
import { LocalLibraryProps, VideoLibraryProps } from './types';

const LIBRARY_TYPE_LOCALSORAGE_KEY = 'videopress-library-type';

const LibraryType = {
        List: 'list',
        Grid: 'grid',
} as const;

type LibraryType = typeof LibraryType[ keyof typeof LibraryType ];

const VideoLibraryWrapper = ( {
        children,
        totalVideos = 0,
        libraryType = LibraryType.List,
        onChangeType,
        hideFilter = false,
        title,
        disabled,
}: {
        children: React.ReactNode;
        libraryType?: LibraryType;
        totalVideos?: number;
        onChangeType?: () => void;
        hideFilter?: boolean;
        title?: string;
        disabled?: boolean;
} ) => {
        const { setSearch, search, isFetching } = useVideos();
        const { setPageOnURL } = useQueryStringPages();

        const onSearchHandler = searchQuery => {
                // clear the pagination, setting it back to page 1
                setPageOnURL( 1 );
                setSearch( searchQuery );
        };

        const [ searchQuery, setSearchQuery ] = useState( search );
        const [ isLg ] = useBreakpointMatch( 'lg' );

        const [ isFilterActive, setIsFilterActive ] = useState( false );

        const singularTotalVideosLabel = __( '1 Video', 'jetpack-videopress-pkg' );
        const pluralTotalVideosLabel = sprintf(
                /* translators: placeholder is the number of videos */
                __( '%s Videos', 'jetpack-videopress-pkg' ),
                totalVideos
        );
        const totalVideosLabel = totalVideos === 1 ? singularTotalVideosLabel : pluralTotalVideosLabel;

        return (
                <div className={ styles[ 'library-wrapper' ] }>
                        <Text variant="headline-small" mb={ 1 }>
                                { title }
                        </Text>
                        { ! isLg && <Text className={ styles[ 'total-sm' ] }>{ totalVideosLabel }</Text> }
                        <div className={ styles[ 'total-filter-wrapper' ] }>
                                { isLg && <Text>{ totalVideosLabel }</Text> }
                                { hideFilter ? null : (
                                        <div className={ styles[ 'filter-wrapper' ] }>
                                                <SearchInput
                                                        className={ classnames( styles[ 'search-input' ], { [ styles.small ]: ! isLg } ) }
                                                        onSearch={ onSearchHandler }
                                                        value={ searchQuery }
                                                        loading={ isFetching }
                                                        onChange={ setSearchQuery }
                                                        disabled={ disabled }
                                                />

                                                <FilterButton
                                                        onClick={ () => setIsFilterActive( v => ! v ) }
                                                        isActive={ isFilterActive }
                                                        disabled={ disabled }
                                                />

                                                <Button
                                                        variant="tertiary"
                                                        size="small"
                                                        icon={ libraryType === LibraryType.List ? grid : formatListBullets }
                                                        onClick={ onChangeType }
                                                />
                                        </div>
                                ) }
                        </div>
                        { isFilterActive && <ConnectFilterSection className={ styles[ 'filter-section' ] } /> }
                        { children }
                </div>
        );
};

export const VideoPressLibrary = ( { videos, totalVideos, loading }: VideoLibraryProps ) => {
        const history = useHistory();
        const { search } = useVideos();

        const libraryTypeFromLocalStorage = localStorage.getItem(
                LIBRARY_TYPE_LOCALSORAGE_KEY
        ) as LibraryType;

        const [ libraryType, setLibraryType ] = useState< LibraryType >(
                libraryTypeFromLocalStorage ?? LibraryType.Grid
        );

        const uploading = videos?.some?.( video => video.uploading );

        const toggleType = () => {
                setLibraryType( current => {
                        const next = current === LibraryType.Grid ? LibraryType.List : LibraryType.Grid;
                        localStorage.setItem( LIBRARY_TYPE_LOCALSORAGE_KEY, next );
                        return next;
                } );
        };

        const handleClickEditDetails = video => {
                history.push( `/video/${ video?.id }/edit` );
        };

        const library =
                libraryType === LibraryType.Grid ? (
                        <VideoGrid
                                videos={ videos }
                                onVideoDetailsClick={ handleClickEditDetails }
                                loading={ loading }
                                count={ uploading ? videos.length : 6 }
                        />
                ) : (
                        <VideoList
                                videos={ videos }
                                onVideoDetailsClick={ handleClickEditDetails }
                                hidePlays
                                loading={ loading }
                        />
                );

        return (
                <VideoLibraryWrapper
                        totalVideos={ totalVideos }
                        onChangeType={ toggleType }
                        libraryType={ libraryType }
                        title={ __( 'Your VideoPress library', 'jetpack-videopress-pkg' ) }
                >
                        { videos.length > 0 || loading ? (
                                library
                        ) : (
                                <Text>
                                        { search.trim()
                                                ? createInterpolateElement(
                                                                sprintf(
                                                                        /* translators: placeholder is the search term */
                                                                        __( 'No videos match your search for <em>%s</em>.', 'jetpack-videopress-pkg' ),
                                                                        search
                                                                ),
                                                                {
                                                                        em: <em className={ styles[ 'query-no-results' ] } />,
                                                                }
                                                  )
                                                : __( 'No videos match your filtering criteria.', 'jetpack-videopress-pkg' ) }
                                </Text>
                        ) }
                        <ConnectPagination className={ styles.pagination } />
                </VideoLibraryWrapper>
        );
};

export const LocalLibrary = ( {
        videos,
        totalVideos,
        loading,
        uploading,
        onUploadClick,
}: LocalLibraryProps ) => {
        return (
                <VideoLibraryWrapper
                        totalVideos={ totalVideos }
                        hideFilter
                        title={ __( 'Local videos', 'jetpack-videopress-pkg' ) }
                >
                        <LocalVideoList
                                videos={ videos }
                                loading={ loading }
                                onActionClick={ onUploadClick }
                                uploading={ uploading }
                        />
                        <ConnectLocalPagination className={ styles.pagination } />
                </VideoLibraryWrapper>
        );
};