LBRYCommunity/lbry-desktop
1
0
Fork 0
Code Issues 596 Pull requests 6 Packages Projects Releases 238 Wiki Activity

update publishing messages: (#3794)

Browse source 
increase lbrytv limit until tv transcoding
warn about bitrate
warn about strange types
more reliably convey size limit message
This commit is contained in:
jessopb 2020-03-06 18:11:16 -05:00 committed by GitHub
parent f07182bca3
commit 815ab193aa
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 157 additions and 24 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
flow-typed/web-file.js vendored
View file

@ -2,5 +2,6 @@ declare type WebFile = {
name: string,
title?: string,
path?: string,
size?: string,
size: string,
type: string,
}

13
static/app-strings.json
View file

@ -1003,7 +1003,6 @@
"Model": "Model",
"Binary": "Binary",
"Other": "Other",
"For video content, use MP4s in H264/AAC format and a friendly bitrate (720p) for more reliable streaming.": "For video content, use MP4s in H264/AAC format and a friendly bitrate (720p) for more reliable streaming.",
"Show reposts": "Show reposts",
"Show reposts from the creators you follow.": "Show reposts from the creators you follow.",
"You can try refreshing to fix it. If you still have issues, your anti-virus software or firewall may be preventing startup.": "You can try refreshing to fix it. If you still have issues, your anti-virus software or firewall may be preventing startup.",
@ -1017,5 +1016,15 @@
"Add tags that are relevant to your content. If mature content, ensure it is tagged mature. Tag abuse and missing mature tags will not be tolerated.": "Add tags that are relevant to your content. If mature content, ensure it is tagged mature. Tag abuse and missing mature tags will not be tolerated.",
"%selectTagsLabel% (%number% left)": "%selectTagsLabel% (%number% left)",
"Matching": "Matching",
"No matching tags": "No matching tags"
"No matching tags": "No matching tags",
"Please check your deposit amount.": "Please check your deposit amount.",
"For video content, use MP4s in H264/AAC format and a friendly bitrate (1080p) for more reliable streaming.": "For video content, use MP4s in H264/AAC format and a friendly bitrate (1080p) for more reliable streaming.",
"Checking your video...": "Checking your video...",
"Your video may not be the best format. Use MP4s in H264/AAC format and a friendly bitrate (1080p) for more reliable streaming.": "Your video may not be the best format. Use MP4s in H264/AAC format and a friendly bitrate (1080p) for more reliable streaming.",
"Publishing Guide": "Publishing Guide",
"This is equivalent to a password. Do not post or share this.": "This is equivalent to a password. Do not post or share this.",
"For video content, use MP4s in H264/AAC format and a friendly bitrate (720p) for more reliable streaming.": "For video content, use MP4s in H264/AAC format and a friendly bitrate (720p) for more reliable streaming.",
"Your video may not be the best format. Use MP4s in H264/AAC format and a friendly bitrate (720p) for more reliable streaming.": "Your video may not be the best format. Use MP4s in H264/AAC format and a friendly bitrate (720p) for more reliable streaming.",
"Your video has a bitrate over 6 mbps. We suggest transcoding to provide viewers the best experience.": "Your video has a bitrate over 6 mbps. 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.": "Your video has a bitrate over 5 mbps. We suggest transcoding to provide viewers the best experience."
}

152
ui/component/publishFile/view.jsx
View file

@ -1,6 +1,6 @@
// @flow
import * as ICONS from 'constants/icons';
import React from 'react';
import React, { useState, useEffect } from 'react';
import { regexInvalidURI } from 'lbry-redux';
import FileSelector from 'component/common/file-selector';
import Button from 'component/button';
@ -33,6 +33,24 @@ function PublishFile(props: Props) {
clearPublish,
} = props;
const [duration, setDuration] = useState(0);
const [size, setSize] = useState(0);
const [oversized, setOversized] = useState(false);
const [isVid, setIsVid] = useState(false);
const RECOMMENDED_BITRATE = 6000000;
const TV_PUBLISH_SIZE_LIMIT: number = 1073741824;
const UPLOAD_SIZE_MESSAGE = 'Lbrytv uploads are limited to 1 GB. Download the app for unrestricted publishing.';
// clear warnings
useEffect(() => {
if (!filePath || filePath === '' || filePath.name === '') {
setDuration(0);
setSize(0);
setIsVid(false);
setOversized(false);
}
}, [filePath]);
let currentFile = '';
if (filePath) {
if (typeof filePath === 'string') {
@ -42,19 +60,129 @@ function PublishFile(props: Props) {
}
}
function getBitrate(size, duration) {
const s = Number(size);
const d = Number(duration);
if (s && d) {
return (s * 8) / d;
} else {
return 0;
}
}
function getMessage() {
// @if TARGET='web'
if (oversized) {
return (
<p className="help--error">
{__(UPLOAD_SIZE_MESSAGE)}{' '}
<Button button="link" label={__('Publishing Guide')} href="https://lbry.com/faq/video-publishing-guide" />
</p>
);
}
// @endif
if (isVid && duration && getBitrate(size, duration) > RECOMMENDED_BITRATE) {
return (
<p className="help--warning">
{__('Your video has a bitrate over 5 mbps. We suggest transcoding to provide viewers the best experience.')}{' '}
<Button button="link" label={__('Publishing Guide')} href="https://lbry.com/faq/video-publishing-guide" />
</p>
);
}
if (isVid && !duration) {
return (
<p className="help--warning">
{__(
'Your video may not be the best format. Use MP4s in H264/AAC format and a friendly bitrate (720p) for more reliable streaming.'
)}{' '}
<Button button="link" label={__('Publishing Guide')} href="https://lbry.com/faq/video-publishing-guide" />
</p>
);
}
if (!!isStillEditing && name) {
return (
<p className="help">
{__("If you don't choose a file, the file from your existing claim %name% will be used", { name: name })}
</p>
);
}
// @if TARGET='web'
if (!isStillEditing) {
return (
<p className="help">
{__(
'For video content, use MP4s in H264/AAC format and a friendly bitrate (720p) for more reliable streaming. Lbrytv uploads are restricted to 1GB.'
)}{' '}
<Button button="link" label={__('Publishing Guide')} href="https://lbry.com/faq/video-publishing-guide" />
</p>
);
}
// @endif
// @if TARGET='app'
if (!isStillEditing) {
return (
<p className="help">
{__(
'For video content, use MP4s in H264/AAC format and a friendly bitrate (720p) for more reliable streaming.'
)}{' '}
<Button button="link" label={__('Publishing Guide')} href="https://lbry.com/faq/video-publishing-guide" />
</p>
);
}
// @endif
}
function handleFileChange(file: WebFile) {
const { showToast } = props;
window.URL = window.URL || window.webkitURL;
// if electron, we'll set filePath to the path string because SDK is handling publishing.
// if web, we set the filePath (dumb name) to the File() object
// File.path will be undefined from web due to browser security, so it will default to the File Object.
setSize(file ? file.size : 0);
setDuration(0);
setOversized(false);
// select file, start to select a new one, then cancel
if (!file) {
updatePublishForm({ filePath: '', name: '' });
return;
}
// if video, extract duration so we can warn about bitrate
const contentType = file.type.split('/');
const isVideo = contentType[0] === 'video';
const isMp4 = contentType[1] === 'mp4';
if (isVideo) {
if (isMp4) {
const video = document.createElement('video');
video.preload = 'metadata';
video.onloadedmetadata = function() {
setDuration(video.duration);
setSize(file.size);
setIsVid(isVideo);
window.URL.revokeObjectURL(video.src);
};
video.onerror = function() {
setDuration(0);
setSize(file.size);
setIsVid(isVideo);
};
video.src = window.URL.createObjectURL(file);
} else {
setSize(file.size);
setDuration(0);
setIsVid(isVideo);
}
}
// @if TARGET='web'
// we only need to enforce file sizes on 'web'
const PUBLISH_SIZE_LIMIT: number = 512000000;
if (typeof file !== 'string') {
if (file && file.size && Number(file.size) > PUBLISH_SIZE_LIMIT) {
showToast(__('File uploads currently limited to 500MB. Download the app for unlimited publishing.'));
if (file && file.size && Number(file.size) > TV_PUBLISH_SIZE_LIMIT) {
setOversized(true);
showToast(__(UPLOAD_SIZE_MESSAGE));
updatePublishForm({ filePath: '', name: '' });
return;
}
@ -103,19 +231,7 @@ function PublishFile(props: Props) {
actions={
<React.Fragment>
<FileSelector disabled={disabled} currentPath={currentFile} onFileChosen={handleFileChange} />
{!isStillEditing && (
<p className="help">
{__(
'For video content, use MP4s in H264/AAC format and a friendly bitrate (720p) for more reliable streaming.'
)}{' '}
<Button button="link" label={__('Learn more')} href="https://lbry.com/faq/how-to-publish" />.
</p>
)}
{!!isStillEditing && name && (
<p className="help">
{__("If you don't choose a file, the file from your existing claim %name% will be used", { name: name })}
</p>
)}
{getMessage()}
</React.Fragment>
}
/>

9
ui/scss/init/_gui.scss
View file

@ -208,8 +208,8 @@ a {
}
.help--warning {
background-color: var(--color-warning);
color: var(--color-black);
@extend .help;
color: var(--color-text-help-warning);
}
.help--inline {
@ -246,6 +246,11 @@ a {
color: var(--color-text-error);
}
.help--error {
@extend .help;
color: var(--color-text-error);
}
.thumbnail-preview {
width: var(--thumbnail-preview-width);
height: var(--thumbnail-preview-height);

1
ui/scss/themes/dark.scss
View file

@ -44,6 +44,7 @@
// Text
--color-text: #eeeeee;
--color-text-error: #f5748c;
--color-text-help-warning: #f5ec74;
--color-text-empty: #bbbbbb;
--color-text-help: #bbbbbb;
--color-text-subtitle: #9fafc0;

1
ui/scss/themes/light.scss
View file

@ -24,6 +24,7 @@
--color-text-help: #999999;
--color-text-subtitle: #767676;
--color-text-warning: #212529;
--color-text-help-warning: #989b20;
--color-text-warning--background: var(--lbry-yellow-1);
--color-blockquote: var(--color-gray-3);