From 815ab193aa417eb08ed5fcc18ce2f54da4fe58d9 Mon Sep 17 00:00:00 2001 From: jessopb <36554050+jessopb@users.noreply.github.com> Date: Fri, 6 Mar 2020 18:11:16 -0500 Subject: [PATCH] update publishing messages: (#3794) increase lbrytv limit until tv transcoding warn about bitrate warn about strange types more reliably convey size limit message --- flow-typed/web-file.js | 3 +- static/app-strings.json | 15 ++- ui/component/publishFile/view.jsx | 152 ++++++++++++++++++++++++++---- ui/scss/init/_gui.scss | 9 +- ui/scss/themes/dark.scss | 1 + ui/scss/themes/light.scss | 1 + 6 files changed, 157 insertions(+), 24 deletions(-) diff --git a/flow-typed/web-file.js b/flow-typed/web-file.js index 6bb0a4d10..afc6bf195 100644 --- a/flow-typed/web-file.js +++ b/flow-typed/web-file.js @@ -2,5 +2,6 @@ declare type WebFile = { name: string, title?: string, path?: string, - size?: string, + size: string, + type: string, } diff --git a/static/app-strings.json b/static/app-strings.json index 7623a60b7..d42b553e4 100644 --- a/static/app-strings.json +++ b/static/app-strings.json @@ -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." +} \ No newline at end of file diff --git a/ui/component/publishFile/view.jsx b/ui/component/publishFile/view.jsx index 43c83c382..1d846ad0c 100644 --- a/ui/component/publishFile/view.jsx +++ b/ui/component/publishFile/view.jsx @@ -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 ( +
+ {__(UPLOAD_SIZE_MESSAGE)}{' '} + +
+ ); + } + // @endif + if (isVid && duration && getBitrate(size, duration) > RECOMMENDED_BITRATE) { + return ( ++ {__('Your video has a bitrate over 5 mbps. We suggest transcoding to provide viewers the best experience.')}{' '} + +
+ ); + } + + if (isVid && !duration) { + return ( ++ {__( + 'Your video may not be the best format. Use MP4s in H264/AAC format and a friendly bitrate (720p) for more reliable streaming.' + )}{' '} + +
+ ); + } + + if (!!isStillEditing && name) { + return ( ++ {__("If you don't choose a file, the file from your existing claim %name% will be used", { name: name })} +
+ ); + } + // @if TARGET='web' + if (!isStillEditing) { + return ( ++ {__( + 'For video content, use MP4s in H264/AAC format and a friendly bitrate (720p) for more reliable streaming. Lbrytv uploads are restricted to 1GB.' + )}{' '} + +
+ ); + } + // @endif + + // @if TARGET='app' + if (!isStillEditing) { + return ( ++ {__( + 'For video content, use MP4s in H264/AAC format and a friendly bitrate (720p) for more reliable streaming.' + )}{' '} + +
+ ); + } + // @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={- {__( - 'For video content, use MP4s in H264/AAC format and a friendly bitrate (720p) for more reliable streaming.' - )}{' '} - . -
- )} - {!!isStillEditing && name && ( -- {__("If you don't choose a file, the file from your existing claim %name% will be used", { name: name })} -
- )} + {getMessage()}