189 lines
8.4 KiB
JavaScript
189 lines
8.4 KiB
JavaScript
import {useEffect, useState} from '@wordpress/element';
|
|
import {__, _x, _n, _nx} from '@wordpress/i18n';
|
|
import Container from 'react-bootstrap/Container';
|
|
import Row from 'react-bootstrap/Row';
|
|
import Col from 'react-bootstrap/Col';
|
|
import Card from "react-bootstrap/Card";
|
|
import Spinner from 'react-bootstrap/Spinner';
|
|
import Form from 'react-bootstrap/Form';
|
|
import PlayerCheckbox from "./PlayerCheckbox";
|
|
import ResCheckbox from "./ResCheckbox";
|
|
import ColorPick from "./ColorPick";
|
|
import Tabs from "react-bootstrap/Tabs";
|
|
import Tab from "react-bootstrap/Tab";
|
|
import Button from "react-bootstrap/Button";
|
|
|
|
export default function Settings() {
|
|
const [loading, setLoading] = useState(false);
|
|
const [settings, setSettings] = useState(IUP_VIDEO.settings);
|
|
|
|
function updateSettings() {
|
|
setLoading(true);
|
|
const formData = new FormData();
|
|
formData.append('settings', JSON.stringify(settings));
|
|
formData.append('nonce', IUP_VIDEO.nonce);
|
|
|
|
const options = {
|
|
method: 'POST',
|
|
headers: {
|
|
Accept: 'application/json',
|
|
},
|
|
body: formData,
|
|
};
|
|
|
|
fetch(`${ajaxurl}?action=infinite-uploads-video-settings`, options)
|
|
.then((response) => response.json())
|
|
.then((data) => {
|
|
if (data.success) {
|
|
setSettings(data.data);
|
|
} else {
|
|
console.error(data.data);
|
|
}
|
|
setLoading(false);
|
|
})
|
|
.catch((error) => {
|
|
console.log('Error:', error);
|
|
setLoading(false);
|
|
});
|
|
}
|
|
|
|
if (!settings) {
|
|
return (
|
|
<h2>{__('Video library not yet connected.', 'infinite-uploads')}</h2>
|
|
)
|
|
}
|
|
|
|
return (
|
|
<Container fluid>
|
|
<Row className="justify-content-between align-items-center">
|
|
<Col>
|
|
<h1 className="text-muted mb-3">
|
|
<img
|
|
src={IUP_VIDEO.assetBase + '/img/iu-logo-gray.svg'}
|
|
alt="Infinite Uploads Logo"
|
|
height="32"
|
|
width="32"
|
|
className="me-2"
|
|
/>
|
|
{__('Infinite Uploads Video Settings', 'infinite-uploads')}
|
|
</h1>
|
|
</Col>
|
|
<Col>
|
|
<Button variant="primary" className="float-end" href={IUP_VIDEO.libraryUrl}>
|
|
{__('Video Library', 'infinite-uploads')}
|
|
</Button>
|
|
</Col>
|
|
</Row>
|
|
|
|
<Card>
|
|
<Card.Body>
|
|
<Tabs
|
|
defaultActiveKey="player"
|
|
id="video-settings-tabs"
|
|
className="mb-3"
|
|
>
|
|
<Tab eventKey="player" title={__('Player', 'infinite-uploads')} className="mt-4">
|
|
<Row className="justify-content-center mb-5" xs={1} md={2}>
|
|
<Col>
|
|
<h5>{__('Main Player Color', 'infinite-uploads')}</h5>
|
|
<p className="lead">{__('Select the primary color that will be displayed for the controls in the video player.', 'infinite-uploads')}</p>
|
|
</Col>
|
|
<Col>
|
|
<ColorPick {...{settings, setSettings}} />
|
|
</Col>
|
|
</Row>
|
|
<Row className="justify-content-center mb-5" xs={1} md={2}>
|
|
<Col>
|
|
<h5>{__('Player Language', 'infinite-uploads')}</h5>
|
|
<p className="lead">{__('Select the default language that will be displayed in the video player.', 'infinite-uploads')}</p>
|
|
</Col>
|
|
<Col>
|
|
<Form.Select size="lg" value={settings.UILanguage} onChange={(e) => setSettings({...settings, UILanguage: e.target.value})}>
|
|
<option value="en" label="English"></option>
|
|
<option value="ar" label="Arabic"></option>
|
|
<option value="bu" label="Bulgarian"></option>
|
|
<option value="cn" label="Chinese"></option>
|
|
<option value="cz" label="Czech"></option>
|
|
<option value="dk" label="Danish"></option>
|
|
<option value="nl" label="Dutch"></option>
|
|
<option value="fi" label="Finnish"></option>
|
|
<option value="fr" label="French"></option>
|
|
<option value="de" label="German"></option>
|
|
<option value="gr" label="Greek"></option>
|
|
<option value="hu" label="Hungarian"></option>
|
|
<option value="id" label="Indonesian"></option>
|
|
<option value="it" label="Italian"></option>
|
|
<option value="jp" label="Japanese"></option>
|
|
<option value="kr" label="Korean"></option>
|
|
<option value="no" label="Norwegian"></option>
|
|
<option value="pl" label="Polish"></option>
|
|
<option value="pt" label="Portuguese"></option>
|
|
<option value="ro" label="Romanian"></option>
|
|
<option value="rs" label="Serbian"></option>
|
|
<option value="sk" label="Slovakian"></option>
|
|
<option value="si" label="Slovenian"></option>
|
|
<option value="es" label="Spanish"></option>
|
|
<option value="se" label="Swedish"></option>
|
|
<option value="ru" label="Russian"></option>
|
|
<option value="th" label="Thai"></option>
|
|
<option value="tr" label="Turkish"></option>
|
|
<option value="ua" label="Ukrainian"></option>
|
|
<option value="vn" label="Vietnamese"></option>
|
|
</Form.Select>
|
|
</Col>
|
|
</Row>
|
|
<Row className="justify-content-center mb-5" xs={1} md={2}>
|
|
<Col>
|
|
<h5>{__('Player Controls', 'infinite-uploads')}</h5>
|
|
<p className="lead">{__('Select the UI controls that will be displayed on the player.', 'infinite-uploads')}</p>
|
|
</Col>
|
|
<Col className="d-flex flex-wrap justify-content-between">
|
|
<Row>
|
|
<PlayerCheckbox control="play" icon="controls-play" label={__('Play / Pause', 'infinite-uploads')} {...{settings, setSettings}} />
|
|
<PlayerCheckbox control="play-large" icon="video-alt3" label={__('Center Play Button', 'infinite-uploads')} {...{settings, setSettings}} />
|
|
<PlayerCheckbox control="volume" icon="controls-volumeon" label={__('Volume', 'infinite-uploads')} {...{settings, setSettings}} />
|
|
<PlayerCheckbox control="mute" icon="controls-volumeoff" label={__('Mute', 'infinite-uploads')} {...{settings, setSettings}} />
|
|
<PlayerCheckbox control="pip" icon="external" label={__('Picture-in-Picture', 'infinite-uploads')} {...{settings, setSettings}} />
|
|
<PlayerCheckbox control="settings" icon="admin-generic" label={__('Settings', 'infinite-uploads')} {...{settings, setSettings}} />
|
|
<PlayerCheckbox control="captions" icon="format-status" label={__('Captions', 'infinite-uploads')} {...{settings, setSettings}} />
|
|
<PlayerCheckbox control="current-time" icon="clock" label={__('Current Time', 'infinite-uploads')} {...{settings, setSettings}} />
|
|
<PlayerCheckbox control="duration" icon="editor-video" label={__('Duration', 'infinite-uploads')} {...{settings, setSettings}} />
|
|
<PlayerCheckbox control="rewind" icon="controls-skipback" label={__('10s Backward', 'infinite-uploads')} {...{settings, setSettings}} />
|
|
<PlayerCheckbox control="fast-forward" icon="controls-skipforward" label={__('10s Forward', 'infinite-uploads')} {...{settings, setSettings}} />
|
|
<PlayerCheckbox control="progress" icon="leftright" label={__('Progress Bar', 'infinite-uploads')} {...{settings, setSettings}} />
|
|
<PlayerCheckbox control="fullscreen" icon="fullscreen-alt" label={__('Full Screen', 'infinite-uploads')} {...{settings, setSettings}} />
|
|
</Row>
|
|
</Col>
|
|
</Row>
|
|
</Tab>
|
|
<Tab eventKey="encoding" title={__('Encoding', 'infinite-uploads')} className="mt-4">
|
|
<Row className="justify-content-center mb-5" xs={1} md={2}>
|
|
<Col>
|
|
<h5>{__('Enabled Resolutions', 'infinite-uploads')}</h5>
|
|
<p className="lead">{__('Select the enabled resolutions that will be encoded on upload. More resolutions provide a more efficient streaming service to users, but require more storage space. Resolutions larger than the original video will be skipped.', 'infinite-uploads')}</p>
|
|
</Col>
|
|
<Col>
|
|
<ResCheckbox {...{settings, setSettings}} px={240} bitrate={600}/>
|
|
<ResCheckbox {...{settings, setSettings}} px={360} bitrate={800}/>
|
|
<ResCheckbox {...{settings, setSettings}} px={480} bitrate={1400}/>
|
|
<ResCheckbox {...{settings, setSettings}} px={720} bitrate={2800}/>
|
|
<ResCheckbox {...{settings, setSettings}} px={1080} bitrate={5000}/>
|
|
<ResCheckbox {...{settings, setSettings}} px={1440} bitrate={8000}/>
|
|
<ResCheckbox {...{settings, setSettings}} px={2160} bitrate={25000}/>
|
|
</Col>
|
|
</Row>
|
|
</Tab>
|
|
</Tabs>
|
|
|
|
<Row className="justify-content-center mb-3">
|
|
<Col className="text-center">
|
|
<Button variant="info" className="text-nowrap text-white px-4" onClick={updateSettings} disabled={loading}>{__('Save Settings', 'infinite-uploads')}</Button>
|
|
</Col>
|
|
</Row>
|
|
</Card.Body>
|
|
</Card>
|
|
|
|
</Container>
|
|
);
|
|
}
|