lbry-desktop/ui/component/publishFile/view.jsx

375 lines
12 KiB
React
Raw Normal View History

// @flow
2020-08-05 19:19:15 +02:00
import type { Node } from 'react';
2019-09-27 20:56:15 +02:00
import * as ICONS from 'constants/icons';
import React, { useState, useEffect } from 'react';
import { regexInvalidURI } from 'util/lbryURI';
2020-07-29 22:30:26 +02:00
import PostEditor from 'component/postEditor';
import FileSelector from 'component/common/file-selector';
import Button from 'component/button';
2019-09-27 20:56:15 +02:00
import Card from 'component/common/card';
import { FormField } from 'component/common/form';
import Spinner from 'component/spinner';
import I18nMessage from 'component/i18nMessage';
import usePersistedState from 'effects/use-persisted-state';
import * as PUBLISH_MODES from 'constants/publish_types';
import PublishName from 'component/publishName';
type Props = {
uri: ?string,
mode: ?string,
name: ?string,
title: ?string,
filePath: ?string,
fileMimeType: ?string,
isStillEditing: boolean,
balance: number,
updatePublishForm: ({}) => void,
2019-09-27 20:56:15 +02:00
disabled: boolean,
publishing: boolean,
showToast: (string) => void,
inProgress: boolean,
clearPublish: () => void,
ffmpegStatus: any,
optimize: boolean,
size: number,
duration: number,
isVid: boolean,
subtitle: string,
setPublishMode: (string) => void,
setPrevFileText: (string) => void,
2020-08-05 19:19:15 +02:00
header: Node,
channelId: string,
setWaitForFile: (boolean) => void,
};
function PublishFile(props: Props) {
const {
uri,
mode,
name,
title,
balance,
filePath,
fileMimeType,
isStillEditing,
updatePublishForm,
disabled,
publishing,
inProgress,
clearPublish,
optimize,
ffmpegStatus = {},
size,
duration,
isVid,
setPublishMode,
setPrevFileText,
header,
subtitle,
} = props;
const RECOMMENDED_BITRATE = 6000000;
const PROCESSING_MB_PER_SECOND = 0.5;
const MINUTES_THRESHOLD = 30;
const HOURS_THRESHOLD = MINUTES_THRESHOLD * 60;
const MARKDOWN_FILE_EXTENSIONS = ['txt', 'md', 'markdown'];
const sizeInMB = Number(size) / 1000000;
const secondsToProcess = sizeInMB / PROCESSING_MB_PER_SECOND;
const ffmpegAvail = ffmpegStatus.available;
const currentFile = filePath;
const [currentFileType, setCurrentFileType] = useState(null);
const [optimizeAvail, setOptimizeAvail] = useState(false);
const [userOptimize, setUserOptimize] = usePersistedState('publish-file-user-optimize', false);
// Reset filePath if publish mode changed
useEffect(() => {
2020-07-29 22:30:26 +02:00
if (mode === PUBLISH_MODES.POST) {
if (currentFileType !== 'text/markdown' && !isStillEditing) {
2020-07-30 00:55:48 +02:00
updatePublishForm({ filePath: '' });
}
}
}, [currentFileType, mode, isStillEditing, updatePublishForm]);
useEffect(() => {
const isOptimizeAvail = currentFile && currentFile !== '' && isVid && ffmpegAvail;
const finalOptimizeState = isOptimizeAvail && userOptimize;
setOptimizeAvail(isOptimizeAvail);
updatePublishForm({ optimize: finalOptimizeState });
}, [currentFile, filePath, isVid, ffmpegAvail, userOptimize, updatePublishForm]);
function updateFileInfo(duration, size, isvid) {
updatePublishForm({ fileDur: duration, fileSize: size, fileVid: isvid });
}
function getBitrate(size, duration) {
const s = Number(size);
const d = Number(duration);
if (s && d) {
return (s * 8) / d;
} else {
return 0;
}
}
function getTimeForMB(s) {
if (s < MINUTES_THRESHOLD) {
return Math.floor(secondsToProcess);
} else if (s >= MINUTES_THRESHOLD && s < HOURS_THRESHOLD) {
return Math.floor(secondsToProcess / 60);
} else {
return Math.floor(secondsToProcess / 60 / 60);
}
}
function getUnitsForMB(s) {
if (s < MINUTES_THRESHOLD) {
if (secondsToProcess > 1) return __('seconds');
return __('second');
} else if (s >= MINUTES_THRESHOLD && s < HOURS_THRESHOLD) {
if (Math.floor(secondsToProcess / 60) > 1) return __('minutes');
return __('minute');
} else {
if (Math.floor(secondsToProcess / 3600) > 1) return __('hours');
return __('hour');
}
}
function getUploadMessage() {
if (isVid && duration && getBitrate(size, duration) > RECOMMENDED_BITRATE) {
return (
<p className="help--warning">
2020-05-12 20:57:02 +02:00
{__('Your video has a bitrate over 5 Mbps. We suggest transcoding to provide viewers the best experience.')}{' '}
2020-07-23 19:02:07 +02:00
<Button button="link" label={__('Upload Guide')} href="https://lbry.com/faq/video-publishing-guide" />
</p>
);
}
if (isVid && !duration) {
return (
<p className="help--warning">
{__(
2020-05-12 20:57:02 +02:00
'Your video may not be the best format. Use MP4s in H264/AAC format and a friendly bitrate (under 5 Mbps) and resolution (720p) for more reliable streaming.'
)}{' '}
2020-07-23 19:02:07 +02:00
<Button button="link" label={__('Upload 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 (!isStillEditing) {
return (
<p className="help">
{__(
2020-05-12 20:57:02 +02:00
'For video content, use MP4s in H264/AAC format and a friendly bitrate (under 5 Mbps) and resolution (720p) for more reliable streaming.'
)}{' '}
2020-07-23 19:02:07 +02:00
<Button button="link" label={__('Upload Guide')} href="https://lbry.com/faq/video-publishing-guide" />
</p>
);
}
}
2020-07-30 00:55:48 +02:00
function parseName(newName) {
let INVALID_URI_CHARS = new RegExp(regexInvalidURI, 'gu');
return newName.replace(INVALID_URI_CHARS, '-');
}
2020-07-30 06:03:56 +02:00
function handleTitleChange(event) {
const title = event.target.value;
2020-07-30 00:55:48 +02:00
// Update title
2020-07-30 06:03:56 +02:00
updatePublishForm({ title });
2020-07-30 00:55:48 +02:00
}
2020-08-11 04:08:03 +02:00
function handleFileReaderLoaded(event: ProgressEvent) {
// See: https://github.com/facebook/flow/issues/3470
if (event.target instanceof FileReader) {
const text = event.target.result;
updatePublishForm({ fileText: text });
setPublishMode(PUBLISH_MODES.POST);
}
}
function handleFileChange(fileWithPath: FileWithPath, clearName = true) {
window.URL = window.URL || window.webkitURL;
// select file, start to select a new one, then cancel
if (!fileWithPath) {
2021-04-23 18:57:51 +02:00
if (isStillEditing || !clearName) {
updatePublishForm({ filePath: '' });
} else {
updatePublishForm({ filePath: '', name: '' });
}
return;
}
// if video, extract duration so we can warn about bitrate if (typeof file !== 'string')
const file = fileWithPath.file;
2020-05-28 16:45:56 +02:00
const contentType = file.type && file.type.split('/');
const isVideo = contentType && contentType[0] === 'video';
const isMp4 = contentType && contentType[1] === 'mp4';
2020-08-24 22:45:08 +02:00
let isTextPost = false;
2020-08-24 22:45:08 +02:00
if (contentType && contentType[0] === 'text') {
isTextPost = contentType[1] === 'plain' || contentType[1] === 'markdown';
setCurrentFileType(contentType);
} else if (file.name) {
// If user's machine is missing a valid content type registration
// for markdown content: text/markdown, file extension will be used instead
const extension = file.name.split('.').pop();
2020-08-24 22:45:08 +02:00
isTextPost = MARKDOWN_FILE_EXTENSIONS.includes(extension);
}
if (isVideo) {
if (isMp4) {
const video = document.createElement('video');
video.preload = 'metadata';
video.onloadedmetadata = () => {
updateFileInfo(video.duration, file.size, isVideo);
window.URL.revokeObjectURL(video.src);
};
video.onerror = () => {
updateFileInfo(0, file.size, isVideo);
};
video.src = window.URL.createObjectURL(file);
} else {
updateFileInfo(0, file.size, isVideo);
}
} else {
updateFileInfo(0, file.size, isVideo);
}
2020-08-24 22:45:08 +02:00
if (isTextPost) {
// Create reader
const reader = new FileReader();
// Handler for file reader
2020-08-11 04:08:03 +02:00
reader.addEventListener('load', handleFileReaderLoaded);
// Read file contents
reader.readAsText(file);
setCurrentFileType('text/markdown');
} else {
setPublishMode(PUBLISH_MODES.FILE);
}
const publishFormParams: { filePath: string, name?: string, optimize?: boolean } = {
filePath: fileWithPath.path,
};
2019-11-01 18:27:01 +01:00
// Strip off extention and replace invalid characters
let fileName = name || (file.name && file.name.substring(0, file.name.lastIndexOf('.'))) || '';
2020-07-30 00:55:48 +02:00
if (!isStillEditing) {
2020-07-30 00:55:48 +02:00
publishFormParams.name = parseName(fileName);
}
2020-07-30 06:03:56 +02:00
updatePublishForm(publishFormParams);
}
2021-04-14 17:56:45 +02:00
const showFileUpload = mode === PUBLISH_MODES.FILE;
2020-07-29 22:30:26 +02:00
const isPublishPost = mode === PUBLISH_MODES.POST;
return (
2019-09-27 20:56:15 +02:00
<Card
className={disabled || balance === 0 ? 'card--disabled' : ''}
title={
2020-08-05 19:19:15 +02:00
<div>
{header} {/* display mode buttons from parent */}
{publishing && <Spinner type={'small'} />}
2020-08-05 19:19:15 +02:00
{inProgress && (
<div>
2021-09-21 10:47:45 +02:00
<Button
button="close"
label={__('New --[clears Publish Form]--')}
icon={ICONS.REFRESH}
onClick={clearPublish}
/>
2020-08-05 19:19:15 +02:00
</div>
)}
</div>
}
subtitle={subtitle || (isStillEditing && __('You are currently editing your upload.'))}
2019-09-27 20:56:15 +02:00
actions={
<React.Fragment>
<PublishName uri={uri} />
<FormField
type="text"
name="content_title"
label={__('Title')}
placeholder={__('Descriptive titles work best')}
disabled={disabled}
value={title}
2020-07-30 00:55:48 +02:00
onChange={handleTitleChange}
/>
{showFileUpload && (
2021-10-19 06:49:51 +02:00
<>
<FileSelector
type="openFile"
2021-10-19 06:49:51 +02:00
label={__('File')}
disabled={disabled}
currentPath={currentFile}
onFileChosen={handleFileChange}
// https://stackoverflow.com/questions/19107685/safari-input-type-file-accept-video-ignores-mp4-files
placeholder={__('Select file to upload')}
/>
{getUploadMessage()}
</>
)}
{showFileUpload && (
<FormField
type="checkbox"
checked={userOptimize}
disabled={!optimizeAvail}
onChange={() => setUserOptimize(!userOptimize)}
label={__('Optimize and transcode video')}
name="optimize"
/>
)}
{showFileUpload && !ffmpegAvail && (
<p className="help">
<I18nMessage
tokens={{
settings_link: <Button button="link" navigate="/$/settings" label={__('Settings')} />,
}}
>
FFmpeg not configured. More in %settings_link%.
</I18nMessage>
</p>
)}
{showFileUpload && Boolean(size) && ffmpegAvail && optimize && isVid && (
<p className="help">
<I18nMessage
tokens={{
size: Math.ceil(sizeInMB),
processTime: getTimeForMB(sizeInMB),
units: getUnitsForMB(sizeInMB),
}}
>
2020-05-12 20:57:02 +02:00
Transcoding this %size% MB file should take under %processTime% %units%.
</I18nMessage>
</p>
)}
{isPublishPost && (
<PostEditor
label={__('Post --[noun, markdown post tab button]--')}
uri={uri}
disabled={disabled}
fileMimeType={fileMimeType}
setPrevFileText={setPrevFileText}
setCurrentFileType={setCurrentFileType}
/>
)}
2019-09-27 20:56:15 +02:00
</React.Fragment>
}
/>
);
}
export default PublishFile;