refactor current file selection on publish area
This commit is contained in:
parent
ec40a4f8ab
commit
fa9020340d
3 changed files with 29 additions and 63 deletions
|
@ -2,7 +2,6 @@
|
|||
import React from 'react';
|
||||
import * as ICONS from 'constants/icons';
|
||||
import * as PAGES from 'constants/pages';
|
||||
import * as PUBLISH_TYPES from 'constants/publish_types';
|
||||
import Icon from 'component/common/icon';
|
||||
import classnames from 'classnames';
|
||||
import useDragDrop from 'effects/use-drag-drop';
|
||||
|
@ -11,9 +10,7 @@ import { withRouter } from 'react-router';
|
|||
import { useRadioState, Radio, RadioGroup } from 'reakit/Radio';
|
||||
|
||||
type Props = {
|
||||
// Lazy fix for flow errors:
|
||||
// Todo -> add appropiate types
|
||||
filePath: ?any,
|
||||
filePath: string | WebFile,
|
||||
clearPublish: () => void,
|
||||
updatePublishForm: ({}) => void,
|
||||
// React router
|
||||
|
@ -122,7 +119,7 @@ function FileDrop(props: Props) {
|
|||
if (files.length === 1) {
|
||||
// Handle single file publish
|
||||
setSelectedFile(files[0]);
|
||||
updatePublishForm({ filePath: { publish: PUBLISH_TYPES.DROP, webFile: files[0] } });
|
||||
updatePublishForm({ filePath: files[0] });
|
||||
}
|
||||
}
|
||||
// Handle files
|
||||
|
@ -130,16 +127,18 @@ function FileDrop(props: Props) {
|
|||
|
||||
// Wait for publish state update:
|
||||
React.useEffect(() => {
|
||||
/*
|
||||
// Publish form has a file
|
||||
if (selectedFile && filePath && filePath.webFile !== undefined) {
|
||||
if (selectedFile && filePath) {
|
||||
// Update completed
|
||||
if (selectedFile.path === filePath.webFile.path) {
|
||||
if (selectedFile.path === filePath.path) {
|
||||
// Done! close the drop area:
|
||||
setFiles([]);
|
||||
// Go to publish area
|
||||
navigateToPublish();
|
||||
}
|
||||
}
|
||||
*/
|
||||
}, [filePath, selectedFile, navigateToPublish, setFiles]);
|
||||
|
||||
const multipleFiles = files.length > 1;
|
||||
|
|
|
@ -1,6 +1,5 @@
|
|||
// @flow
|
||||
import * as ICONS from 'constants/icons';
|
||||
import * as PUBLISH_TYPES from 'constants/publish_types';
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { regexInvalidURI } from 'lbry-redux';
|
||||
import FileSelector from 'component/common/file-selector';
|
||||
|
@ -12,9 +11,7 @@ import I18nMessage from '../i18nMessage';
|
|||
|
||||
type Props = {
|
||||
name: ?string,
|
||||
// Lazy fix for flow errors:
|
||||
// Todo -> add types back
|
||||
filePath: ?any, // string || WebFile
|
||||
filePath: string | WebFile,
|
||||
isStillEditing: boolean,
|
||||
balance: number,
|
||||
updatePublishForm: ({}) => void,
|
||||
|
@ -50,7 +47,8 @@ function PublishFile(props: Props) {
|
|||
|
||||
const { available } = ffmpegStatus;
|
||||
const [oversized, setOversized] = useState(false);
|
||||
const [selectedFile, setSelectedFile] = useState(null);
|
||||
const [currentFile, setCurrentFile] = useState(null);
|
||||
|
||||
const RECOMMENDED_BITRATE = 6000000;
|
||||
const TV_PUBLISH_SIZE_LIMIT: number = 1073741824;
|
||||
const UPLOAD_SIZE_MESSAGE = 'Lbry.tv uploads are limited to 1 GB. Download the app for unrestricted publishing.';
|
||||
|
@ -64,42 +62,16 @@ function PublishFile(props: Props) {
|
|||
// clear warnings
|
||||
useEffect(() => {
|
||||
if (!filePath || filePath === '') {
|
||||
updateOptimizeState(0, 0, false);
|
||||
setCurrentFile('');
|
||||
setOversized(false);
|
||||
updateOptimizeState(0, 0, false);
|
||||
} else if (typeof filePath !== 'string') {
|
||||
// Update currentFile file
|
||||
if (filePath.name !== currentFile && filePath.path !== currentFile) {
|
||||
handleFileChange(filePath);
|
||||
}
|
||||
}
|
||||
|
||||
// Process dropped file
|
||||
if (filePath && filePath.publish === PUBLISH_TYPES.DROP && filePath.webFile !== undefined) {
|
||||
setSelectedFile(filePath.webFile);
|
||||
}
|
||||
|
||||
/*
|
||||
// Process a post:
|
||||
// See: https://github.com/lbryio/lbry-desktop/issues/4105
|
||||
|
||||
if(filePath && filePath.publish === PUBLISH_TYPES.POST) {
|
||||
console.info("Writing a post...")
|
||||
}
|
||||
*/
|
||||
}, [filePath]);
|
||||
|
||||
// File selected by user
|
||||
useEffect(() => {
|
||||
if (selectedFile !== undefined || selectedFile !== null) {
|
||||
handleFileChange(selectedFile);
|
||||
}
|
||||
}, [selectedFile]);
|
||||
|
||||
let currentFile = '';
|
||||
if (filePath) {
|
||||
// Desktiop publish
|
||||
if (typeof filePath === 'string') {
|
||||
currentFile = filePath;
|
||||
} else if (filePath.webFile === undefined && typeof filePath.name === 'string') {
|
||||
// Web publish
|
||||
currentFile = filePath.name;
|
||||
}
|
||||
}
|
||||
}, [filePath, currentFile, handleFileChange, updateOptimizeState]);
|
||||
|
||||
function updateOptimizeState(duration, size, isvid) {
|
||||
updatePublishForm({ fileDur: duration, fileSize: size, fileVid: isvid });
|
||||
|
@ -204,13 +176,9 @@ function PublishFile(props: Props) {
|
|||
}
|
||||
|
||||
// Lazy fix for flow errors:
|
||||
// Todo -> add types back: ( file: WebFile )
|
||||
function handleFileChange(file) {
|
||||
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.
|
||||
setOversized(false);
|
||||
|
||||
// select file, start to select a new one, then cancel
|
||||
|
@ -218,7 +186,8 @@ function PublishFile(props: Props) {
|
|||
updatePublishForm({ filePath: '', name: '' });
|
||||
return;
|
||||
}
|
||||
// if video, extract duration so we can warn about bitrate
|
||||
|
||||
// if video, extract duration so we can warn about bitrateif (typeof file !== 'string') {
|
||||
const contentType = file.type.split('/');
|
||||
const isVideo = contentType[0] === 'video';
|
||||
const isMp4 = contentType[1] === 'mp4';
|
||||
|
@ -241,17 +210,17 @@ function PublishFile(props: Props) {
|
|||
|
||||
// @if TARGET='web'
|
||||
// we only need to enforce file sizes on 'web'
|
||||
if (typeof file !== 'string') {
|
||||
if (file && file.size && Number(file.size) > TV_PUBLISH_SIZE_LIMIT) {
|
||||
setOversized(true);
|
||||
showToast(__(UPLOAD_SIZE_MESSAGE));
|
||||
updatePublishForm({ filePath: '', name: '' });
|
||||
return;
|
||||
}
|
||||
if (file.size && Number(file.size) > TV_PUBLISH_SIZE_LIMIT) {
|
||||
setOversized(true);
|
||||
showToast(__(UPLOAD_SIZE_MESSAGE));
|
||||
updatePublishForm({ filePath: '', name: '' });
|
||||
return;
|
||||
}
|
||||
// @endif
|
||||
|
||||
const publishFormParams: { filePath: string | WebFile, name?: string, optimize?: boolean } = {
|
||||
// if electron, we'll set filePath to the path string because SDK is handling publishing.
|
||||
// File.path will be undefined from web due to browser security, so it will default to the File Object.
|
||||
filePath: file.path || file,
|
||||
};
|
||||
// Strip off extention and replace invalid characters
|
||||
|
@ -261,6 +230,8 @@ function PublishFile(props: Props) {
|
|||
if (!isStillEditing) {
|
||||
publishFormParams.name = parsedFileName;
|
||||
}
|
||||
// File path is not supported on web for security reasons so we use the name instead.
|
||||
setCurrentFile(file.path || file.name);
|
||||
updatePublishForm(publishFormParams);
|
||||
}
|
||||
|
||||
|
|
|
@ -1,4 +0,0 @@
|
|||
// Publish from drag-drop UI
|
||||
export const DROP = 'drop';
|
||||
// Publish a post ( text / markdown )
|
||||
export const POST = 'post';
|
Loading…
Reference in a new issue