From fa9020340d732feb06317b22bb943170606576de Mon Sep 17 00:00:00 2001 From: btzr-io Date: Thu, 14 May 2020 16:32:35 -0500 Subject: [PATCH] refactor current file selection on publish area --- ui/component/fileDrop/view.jsx | 13 +++--- ui/component/publishFile/view.jsx | 75 ++++++++++--------------------- ui/constants/publish_types.js | 4 -- 3 files changed, 29 insertions(+), 63 deletions(-) delete mode 100644 ui/constants/publish_types.js diff --git a/ui/component/fileDrop/view.jsx b/ui/component/fileDrop/view.jsx index cadfe068a..dd90383b7 100644 --- a/ui/component/fileDrop/view.jsx +++ b/ui/component/fileDrop/view.jsx @@ -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; diff --git a/ui/component/publishFile/view.jsx b/ui/component/publishFile/view.jsx index 9d534bfbf..29ecc4008 100644 --- a/ui/component/publishFile/view.jsx +++ b/ui/component/publishFile/view.jsx @@ -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); } diff --git a/ui/constants/publish_types.js b/ui/constants/publish_types.js deleted file mode 100644 index 6037bd0c5..000000000 --- a/ui/constants/publish_types.js +++ /dev/null @@ -1,4 +0,0 @@ -// Publish from drag-drop UI -export const DROP = 'drop'; -// Publish a post ( text / markdown ) -export const POST = 'post';