refactor current file selection on publish area

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:
+  filePath: string | WebFile,
-  // Todo -> add appropiate types
-  filePath: ?any,
   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;

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:
+  filePath: string | WebFile,
-  // Todo ->  add types back
-  filePath: ?any, // 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);
+      }
     }
-
+  }, [filePath, currentFile, handleFileChange, updateOptimizeState]);
-    // 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;
-    }
-  }
 
   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: WebFile) {
-  function handleFileChange(file) {
     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.size && Number(file.size) > TV_PUBLISH_SIZE_LIMIT) {
-      if (file && file.size && Number(file.size) > TV_PUBLISH_SIZE_LIMIT) {
+      setOversized(true);
-        setOversized(true);
+      showToast(__(UPLOAD_SIZE_MESSAGE));
-        showToast(__(UPLOAD_SIZE_MESSAGE));
+      updatePublishForm({ filePath: '', name: '' });
-        updatePublishForm({ filePath: '', name: '' });
+      return;
-        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);
   }
 

ui/constants/publish_types.js

@@ -1,4 +0,0 @@
-// Publish from drag-drop UI
-export const DROP = 'drop';
-// Publish a post ( text / markdown )
-export const POST = 'post';