Add max bitrate messaging

Disable form on error

Fix resetting
This commit is contained in:
Thomas Zarebczan 2022-02-01 17:02:30 -05:00 committed by Thomas Zarebczan
parent e37a6c66be
commit fc99d85efc
3 changed files with 29 additions and 4 deletions

View file

@ -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

View file

@ -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={{

View file

@ -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}