98 lines
2.8 KiB
JavaScript
98 lines
2.8 KiB
JavaScript
import Button from 'react-bootstrap/Button';
|
|
import {__, _x, _n, _nx} from '@wordpress/i18n';
|
|
import {useState} from '@wordpress/element';
|
|
import Form from 'react-bootstrap/Form';
|
|
import InputGroup from 'react-bootstrap/InputGroup';
|
|
import Row from 'react-bootstrap/Row';
|
|
import Col from 'react-bootstrap/Col';
|
|
import {VideoSize} from "./VideoAttributes";
|
|
import UploadModal from "./UploadModal";
|
|
|
|
function Header({orderBy, setOrderBy, search, setSearch, selectVideo, getVideos}) {
|
|
|
|
const sizeOf = function (bytes) {
|
|
if (bytes === 0) {
|
|
return '0 B';
|
|
}
|
|
var e = Math.floor(Math.log(bytes) / Math.log(1024));
|
|
return (
|
|
(bytes / Math.pow(1024, e)).toFixed(1) +
|
|
' ' +
|
|
' KMGTP'.charAt(e) +
|
|
'B'
|
|
);
|
|
};
|
|
|
|
return (
|
|
<Row className="align-items-center">
|
|
<Col sm={8} md={3} className="mb-3 mb-lg-0">
|
|
<InputGroup>
|
|
<InputGroup.Text>
|
|
<span className="dashicons dashicons-search"></span>
|
|
</InputGroup.Text>
|
|
<Form.Control
|
|
placeholder={__('Search', 'infinite-uploads')}
|
|
aria-label={__('Search', 'infinite-uploads')}
|
|
value={search}
|
|
onChange={(e) => setSearch(e.target.value)}
|
|
/>
|
|
</InputGroup>
|
|
</Col>
|
|
<Col sm={4} md={2} className="mb-3 mb-lg-0">
|
|
<InputGroup>
|
|
<InputGroup.Text>
|
|
{__('Sort', 'infinite-uploads')}
|
|
</InputGroup.Text>
|
|
<Form.Select
|
|
aria-label={__(
|
|
'Sort by select',
|
|
'infinite-uploads'
|
|
)}
|
|
value={orderBy}
|
|
onChange={(e) => setOrderBy(e.target.value)}
|
|
>
|
|
>
|
|
<option value="title">
|
|
{__('Title', 'infinite-uploads')}
|
|
</option>
|
|
<option value="date">
|
|
{__('Date', 'infinite-uploads')}
|
|
</option>
|
|
</Form.Select>
|
|
</InputGroup>
|
|
</Col>
|
|
<Col className="mb-3 mb-lg-0">
|
|
<Row className="justify-content-center flex-nowrap">
|
|
<Col className="col-auto">
|
|
<p className="mb-0">{__("Video Count", 'infinite-uploads')}</p>
|
|
<span className="h4 text-nowrap">{IUP_VIDEO.settings.VideoCount}</span>
|
|
</Col>
|
|
<Col className="col-auto">
|
|
<p className="mb-0">{__("Library Storage", 'infinite-uploads')}</p>
|
|
<span className="h4 text-nowrap">{sizeOf(IUP_VIDEO.settings.StorageUsage)}</span>
|
|
</Col>
|
|
<Col className="col-auto">
|
|
<p className="mb-0">{__("Video Bandwidth", 'infinite-uploads')}</p>
|
|
<span className="h4 text-nowrap">{sizeOf(IUP_VIDEO.settings.TrafficUsage)}</span>
|
|
</Col>
|
|
</Row>
|
|
</Col>
|
|
<Col className="d-flex justify-content-end mb-3 mb-lg-0">
|
|
<Button
|
|
variant="outline-secondary"
|
|
className="rounded-pill text-nowrap"
|
|
href={IUP_VIDEO.settingsUrl}
|
|
>
|
|
<span className="dashicons dashicons-admin-generic"></span>
|
|
{__('Settings', 'infinite-uploads')}
|
|
</Button>
|
|
{!selectVideo && (
|
|
<UploadModal getVideos={getVideos}/>
|
|
)}
|
|
</Col>
|
|
</Row>
|
|
);
|
|
}
|
|
|
|
export default Header;
|