Add max bitrate messaging
Disable form on error Fix resetting
This commit is contained in:
parent
e37a6c66be
commit
fc99d85efc
3 changed files with 29 additions and 4 deletions
|
@ -52,6 +52,7 @@ type Props = {
|
|||
channelSignature: { signature?: string, signing_ts?: string },
|
||||
isCheckingLivestreams: boolean,
|
||||
setWaitForFile: (boolean) => void,
|
||||
setOverMaxBitrate: (boolean) => void,
|
||||
fileSource: string,
|
||||
changeFileSource: (string) => void,
|
||||
inEditMode: boolean,
|
||||
|
@ -88,12 +89,14 @@ function PublishFile(props: Props) {
|
|||
channelSignature,
|
||||
isCheckingLivestreams,
|
||||
setWaitForFile,
|
||||
setOverMaxBitrate,
|
||||
fileSource,
|
||||
changeFileSource,
|
||||
inEditMode,
|
||||
} = props;
|
||||
|
||||
const RECOMMENDED_BITRATE = 6000000;
|
||||
const MAX_BITRATE = 12000000;
|
||||
const TV_PUBLISH_SIZE_LIMIT_BYTES = WEB_PUBLISH_SIZE_LIMIT_GB * 1073741824;
|
||||
const TV_PUBLISH_SIZE_LIMIT_GB_STR = String(WEB_PUBLISH_SIZE_LIMIT_GB);
|
||||
|
||||
|
@ -191,6 +194,7 @@ function PublishFile(props: Props) {
|
|||
if (!filePath || filePath === '') {
|
||||
setCurrentFile('');
|
||||
setOversized(false);
|
||||
setOverMaxBitrate(false);
|
||||
updateFileInfo(0, 0, false);
|
||||
} else if (typeof filePath !== 'string') {
|
||||
// Update currentFile file
|
||||
|
@ -260,10 +264,24 @@ function PublishFile(props: Props) {
|
|||
);
|
||||
}
|
||||
// @endif
|
||||
if (isVid && duration && getBitrate(size, duration) > RECOMMENDED_BITRATE) {
|
||||
let bitRate = getBitrate(size, duration);
|
||||
let overMaxBitrate = bitRate > MAX_BITRATE;
|
||||
if (overMaxBitrate) {
|
||||
setOverMaxBitrate(true);
|
||||
} else {
|
||||
setOverMaxBitrate(false);
|
||||
}
|
||||
|
||||
if (isVid && duration && bitRate > RECOMMENDED_BITRATE) {
|
||||
return (
|
||||
<p className="help--warning">
|
||||
{__('Your video has a bitrate over 5 Mbps. We suggest transcoding to provide viewers the best experience.')}{' '}
|
||||
{overMaxBitrate
|
||||
? __(
|
||||
'Your video has a bitrate over ~12 Mbps and cannot be processed at this time. We suggest transcoding to provide viewers the best experience.'
|
||||
)
|
||||
: __(
|
||||
'Your video has a bitrate over 5 Mbps. We suggest transcoding to provide viewers the best experience.'
|
||||
)}{' '}
|
||||
<Button
|
||||
button="link"
|
||||
label={__('Upload Guide')}
|
||||
|
@ -377,6 +395,7 @@ function PublishFile(props: Props) {
|
|||
const { showToast } = props;
|
||||
window.URL = window.URL || window.webkitURL;
|
||||
setOversized(false);
|
||||
setOverMaxBitrate(false);
|
||||
|
||||
// select file, start to select a new one, then cancel
|
||||
if (!file) {
|
||||
|
@ -441,7 +460,7 @@ function PublishFile(props: Props) {
|
|||
if (file.size && Number(file.size) > TV_PUBLISH_SIZE_LIMIT_BYTES) {
|
||||
setOversized(true);
|
||||
showToast(__(UPLOAD_SIZE_MESSAGE));
|
||||
updatePublishForm({ filePath: '', name: '' });
|
||||
updatePublishForm({ filePath: '' });
|
||||
return;
|
||||
}
|
||||
// @endif
|
||||
|
|
|
@ -210,6 +210,7 @@ function PublishForm(props: Props) {
|
|||
const [prevFileText, setPrevFileText] = React.useState('');
|
||||
|
||||
const [waitForFile, setWaitForFile] = useState(false);
|
||||
const [overMaxBitrate, setOverMaxBitrate] = useState(false);
|
||||
const [livestreamData, setLivestreamData] = React.useState([]);
|
||||
const [signedMessage, setSignedMessage] = React.useState({ signature: undefined, signing_ts: undefined });
|
||||
const signedMessageStr = JSON.stringify(signedMessage);
|
||||
|
@ -238,6 +239,7 @@ function PublishForm(props: Props) {
|
|||
name &&
|
||||
isNameValid(name) &&
|
||||
title &&
|
||||
!overMaxBitrate &&
|
||||
bid &&
|
||||
thumbnail &&
|
||||
!bidError &&
|
||||
|
@ -598,6 +600,7 @@ function PublishForm(props: Props) {
|
|||
livestreamData={livestreamData}
|
||||
subtitle={customSubtitle}
|
||||
setWaitForFile={setWaitForFile}
|
||||
setOverMaxBitrate={setOverMaxBitrate}
|
||||
isCheckingLivestreams={isCheckingLivestreams}
|
||||
checkLivestreams={fetchLivestreams}
|
||||
channelId={claimChannelId}
|
||||
|
@ -682,7 +685,7 @@ function PublishForm(props: Props) {
|
|||
</div>
|
||||
<p className="help">
|
||||
{!formDisabled && !formValid ? (
|
||||
<PublishFormErrors mode={mode} waitForFile={waitingForFile} />
|
||||
<PublishFormErrors mode={mode} waitForFile={waitingForFile} overMaxBitrate={overMaxBitrate} />
|
||||
) : (
|
||||
<I18nMessage
|
||||
tokens={{
|
||||
|
|
|
@ -16,6 +16,7 @@ type Props = {
|
|||
thumbnail: string,
|
||||
thumbnailError: boolean,
|
||||
waitForFile: boolean,
|
||||
overMaxBitrate: boolean,
|
||||
};
|
||||
|
||||
function PublishFormErrors(props: Props) {
|
||||
|
@ -31,6 +32,7 @@ function PublishFormErrors(props: Props) {
|
|||
thumbnail,
|
||||
thumbnailError,
|
||||
waitForFile,
|
||||
overMaxBitrate,
|
||||
} = props;
|
||||
// These are extra help
|
||||
// If there is an error it will be presented as an inline error as well
|
||||
|
@ -41,6 +43,7 @@ function PublishFormErrors(props: Props) {
|
|||
return (
|
||||
<div className="error__text">
|
||||
{waitForFile && <div>{__('Choose a replay file, or select None')}</div>}
|
||||
{overMaxBitrate && <div>{__('Bitrate is over the max, please transcode or choose another file.')}</div>}
|
||||
{!title && <div>{__('A title is required')}</div>}
|
||||
{!name && <div>{__('A URL is required')}</div>}
|
||||
{name && !isNameValid(name) && INVALID_NAME_ERROR}
|
||||
|
|
Loading…
Reference in a new issue