ui/component/common/file-list.jsx

@@ -0,0 +1,62 @@
+// @flow
+import React from 'react';
+import * as ICONS from 'constants/icons';
+import Icon from 'component/common/icon';
+import classnames from 'classnames';
+import { useRadioState, Radio, RadioGroup } from 'reakit/Radio';
+
+type Props = {
+  files: Array<WebFile>,
+  onChange: (WebFile | void) => void,
+};
+
+function FileList(props: Props) {
+  const { files, onChange } = props;
+  const radio = useRadioState();
+
+  const getFile = (value?: string) => {
+    if (files && files.length) {
+      return files.find((file: WebFile) => file.name === value);
+    }
+  };
+
+  React.useEffect(() => {
+    if (radio.stops.length) {
+      if (!radio.currentId) {
+        radio.first();
+      } else {
+        const first = radio.stops[0].ref.current;
+        // First auto-selection
+        if (first && first.id === radio.currentId && !radio.state) {
+          radio.setState(first.value);
+        }
+
+        if (onChange && radio.state && radio.state !== '') {
+          const file = getFile(radio.state);
+          onChange(file);
+        }
+      }
+    }
+  }, [radio, onChange]);
+
+  return (
+    <div className={'file-list'}>
+      <RadioGroup {...radio} aria-label="files">
+        {files.map((entry, index) => {
+          const item = radio.stops[index];
+          const selected = item && item.id === radio.currentId;
+
+          return (
+            <label key={entry.name} className={classnames(selected && 'selected')}>
+              <Radio {...radio} value={entry.name} />
+              <Icon size={18} selected={selected} icon={selected ? ICONS.COMPLETED : ICONS.CIRCLE} />
+              <span>{entry.name}</span>
+            </label>
+          );
+        })}
+      </RadioGroup>
+    </div>
+  );
+}
+
+export default FileList;

ui/component/fileDrop/index.js

@@ -1,32 +1,22 @@
 import { connect } from 'react-redux';
-import {
-  selectBalance,
-  selectIsStillEditing,
-  makeSelectPublishFormValue,
-  doUpdatePublishForm,
-  doToast,
-  doClearPublish,
-} from 'lbry-redux';
-import { selectFfmpegStatus } from 'redux/selectors/settings';
+
+import { doToast, doClearPublish, doUpdatePublishForm, makeSelectPublishFormValue } from 'lbry-redux';
+
+import { selectModal } from 'redux/selectors/app';
+import { doOpenModal } from 'redux/actions/app';
+
 import FileDrop from './view';
 
 const select = state => ({
-  name: makeSelectPublishFormValue('name')(state),
+  modal: selectModal(state),
   filePath: makeSelectPublishFormValue('filePath')(state),
-  optimize: makeSelectPublishFormValue('optimize')(state),
-  isStillEditing: selectIsStillEditing(state),
-  balance: selectBalance(state),
-  publishing: makeSelectPublishFormValue('publishing')(state),
-  ffmpegStatus: selectFfmpegStatus(state),
-  size: makeSelectPublishFormValue('fileSize')(state),
-  duration: makeSelectPublishFormValue('fileDur')(state),
-  isVid: makeSelectPublishFormValue('fileVid')(state),
 });
 
 const perform = dispatch => ({
+  openModal: (modal, props) => dispatch(doOpenModal(modal, props)),
+  showToast: message => dispatch(doToast({ message, isError: true })),
   clearPublish: () => dispatch(doClearPublish()),
   updatePublishForm: value => dispatch(doUpdatePublishForm(value)),
-  showToast: message => dispatch(doToast({ message, isError: true })),
 });
 
 export default connect(select, perform)(FileDrop);

ui/component/fileDrop/view.jsx

@@ -2,17 +2,20 @@
 import React from 'react';
 import * as ICONS from 'constants/icons';
 import * as PAGES from 'constants/pages';
-import Icon from 'component/common/icon';
+import * as MODALS from 'constants/modal_types';
 import classnames from 'classnames';
 import useDragDrop from 'effects/use-drag-drop';
 import { getTree } from 'util/web-file-system';
 import { withRouter } from 'react-router';
-import { useRadioState, Radio, RadioGroup } from 'reakit/Radio';
+import Icon from 'component/common/icon';
+import FileList from 'component/common/file-list';
 
 type Props = {
+  modal: { id: string, modalProps: {} },
   filePath: string | WebFile,
   clearPublish: () => void,
   updatePublishForm: ({}) => void,
+  openModal: (id: string, { files: Array<WebFile> }) => void,
   // React router
   history: {
     entities: {}[],
@@ -25,51 +28,14 @@ type Props = {
   },
 };
 
-type FileListProps = {
-  files: Array<WebFile>,
-  onSelected: string => void,
-};
-
+const HIDE_TIME_OUT = 600;
+const NAVIGATE_TIME_OUT = 300;
 const PUBLISH_URL = `/$/${PAGES.PUBLISH}`;
 
-function FileList(props: FileListProps) {
-  const { files, onSelected } = props;
-  const radio = useRadioState();
-
-  React.useEffect(() => {
-    if (!radio.currentId) {
-      radio.first();
-    }
-
-    if (radio.state && radio.state !== '') {
-      onSelected(radio.state);
-    }
-  }, [radio, onSelected]);
-
-  return (
-    <RadioGroup {...radio} aria-label="fruits">
-      {files.map((entry, index) => {
-        const item = radio.stops[index];
-        const selected = item && item.id === radio.currentId;
-
-        return (
-          <label key={entry.name} className={classnames(selected && 'selected')}>
-            <Radio {...radio} value={entry.name} />
-            <Icon size={18} selected={selected} icon={selected ? ICONS.COMPLETED : ICONS.CIRCLE} />
-            <span>{entry.name}</span>
-          </label>
-        );
-      })}
-    </RadioGroup>
-  );
-}
-
 function FileDrop(props: Props) {
-  const { history, filePath, updatePublishForm } = props;
+  const { modal, history, openModal, updatePublishForm } = props;
   const { drag, dropData } = useDragDrop();
-  const [show, setShow] = React.useState(false);
   const [files, setFiles] = React.useState([]);
-  const [selectedFile, setSelectedFile] = React.useState('');
   const [error, setError] = React.useState(false);
 
   const navigateToPublish = React.useCallback(() => {
@@ -80,18 +46,29 @@ function FileDrop(props: Props) {
     }
   }, [history]);
 
-  const handleFileSelected = name => {
-    if (files && files.length) {
-      const selected = files.find(file => file.name === name);
-      if (selected && selected.name !== (selectedFile && selectedFile.name)) {
-        setSelectedFile(selected);
-      }
+  // Delay hide and navigation for a smooth transition
+  const hideDropArea = () => {
+    setTimeout(() => {
+      setFiles([]);
+      setTimeout(() => navigateToPublish(), NAVIGATE_TIME_OUT);
+    }, HIDE_TIME_OUT);
+  };
+
+  const handleFileSelected = selectedFile => {
+    updatePublishForm({ filePath: selectedFile });
+    hideDropArea();
+  };
+
+  // Firt file will be selected by default:
+  const handleFileChange = (file?: WebFile) => {
+    if (files && files.length && file) {
+      handleFileSelected(file);
     }
   };
 
   React.useEffect(() => {
     // Handle drop...
-    if (dropData) {
+    if (dropData && !files.length && (!modal || modal.id !== MODALS.FILE_SELECTION)) {
       getTree(dropData)
         .then(entries => {
           if (entries && entries.length) {
@@ -99,59 +76,30 @@ function FileDrop(props: Props) {
           }
         })
         .catch(error => {
-          // Invalid entry / entries
           setError(error || true);
         });
     }
-  }, [dropData]);
+  }, [dropData, files, modal]);
 
   React.useEffect(() => {
-    //  Files are drag over or already dropped
-    if (drag || files.length) {
-      setShow(true);
-      // No drag over or files dropped
-    } else if (!drag && !files.length) {
-      setShow(false);
-    }
-
-    // Filew dropped on drop area
+    // Files or directory dropped:
     if (!drag && files.length) {
-      if (files.length === 1) {
-        // Handle single file publish
-        setSelectedFile(files[0]);
-        updatePublishForm({ filePath: files[0] });
-      }
-    }
-    // Handle files
-  }, [drag, files, error, updatePublishForm, setSelectedFile]);
-
-  // Wait for publish state update:
-  React.useEffect(() => {
-    /*
-    // Publish form has a file
-    if (selectedFile && filePath) {
-      // Update completed
-      if (selectedFile.path === filePath.path) {
-        // Done! close the drop area:
+      // Handle multiple files selection
+      if (files.length > 1) {
+        openModal(MODALS.FILE_SELECTION, { files: files });
         setFiles([]);
-        // Go to publish area
-        navigateToPublish();
       }
     }
-    */
-  }, [filePath, selectedFile, navigateToPublish, setFiles]);
+  }, [drag, files, error]);
+
+  const show = files.length === 1 || (drag && (!modal || modal.id !== MODALS.FILE_SELECTION));
 
-  const multipleFiles = files.length > 1;
   return (
     <div className={classnames('file-drop', show && 'file-drop--show')}>
       <div className={classnames('card', 'file-drop__area')}>
-        <Icon size={64} icon={multipleFiles ? ICONS.ALERT : ICONS.PUBLISH} className={'main-icon'} />
-        <p>{multipleFiles ? `Only one file is allowed choose wisely` : `Drop here to publish!`} </p>
-        {files && files.length > 0 && (
-          <div className="file-drop__list">
-            <FileList files={files} onSelected={handleFileSelected} />
-          </div>
-        )}
+        <Icon size={64} icon={ICONS.PUBLISH} className={'main-icon'} />
+        <p>{`Drop here to publish!`} </p>
+        {files && files.length === 1 && <FileList files={files} onChange={handleFileChange} />}
       </div>
     </div>
   );

ui/constants/modal_types.js

@@ -3,6 +3,7 @@ export const CONFIRM_EXTERNAL_RESOURCE = 'confirm_external_resource';
 export const COMMENT_ACKNOWEDGEMENT = 'comment_acknowlegement';
 export const INCOMPATIBLE_DAEMON = 'incompatible_daemon';
 export const FILE_TIMEOUT = 'file_timeout';
+export const FILE_SELECTION = 'file_selection';
 export const DOWNLOADING = 'downloading';
 export const AUTO_GENERATE_THUMBNAIL = 'auto_generate_thumbnail';
 export const AUTO_UPDATE_DOWNLOADED = 'auto_update_downloaded';

ui/modal/modalFileSelection/index.js

@@ -0,0 +1,12 @@
+import { connect } from 'react-redux';
+import { doHideModal } from 'redux/actions/app';
+import { doUpdatePublishForm } from 'lbry-redux';
+
+import ModaFileSelection from './view';
+
+const perform = dispatch => ({
+  hideModal: props => dispatch(doHideModal(props)),
+  updatePublishForm: value => dispatch(doUpdatePublishForm(value)),
+});
+
+export default connect(null, perform)(ModaFileSelection);

ui/modal/modalFileSelection/view.jsx

@@ -0,0 +1,77 @@
+// @flow
+import * as ICONS from 'constants/icons';
+import * as PAGES from 'constants/pages';
+import React from 'react';
+import { Modal } from 'modal/modal';
+import { withRouter } from 'react-router';
+import Card from 'component/common/card';
+import Button from 'component/button';
+import FileList from 'component/common/file-list';
+
+type Props = {
+  files: Array<WebFile>,
+  hideModal: () => void,
+  updatePublishForm: ({}) => void,
+  history: {
+    location: { pathname: string },
+    push: string => void,
+  },
+};
+
+const PUBLISH_URL = `/$/${PAGES.PUBLISH}`;
+
+const ModalFileSelection = (props: Props) => {
+  const { history, files, hideModal, updatePublishForm } = props;
+  const [selectedFile, setSelectedFile] = React.useState(null);
+
+  const navigateToPublish = React.useCallback(() => {
+    // Navigate only if location is not publish area:
+    // - Prevent spam in history
+    if (history.location.pathname !== PUBLISH_URL) {
+      history.push(PUBLISH_URL);
+    }
+  }, [history]);
+
+  function handleCloseModal() {
+    hideModal();
+    setSelectedFile(null);
+  }
+
+  function handleSubmit() {
+    updatePublishForm({ filePath: selectedFile });
+    handleCloseModal();
+    navigateToPublish();
+  }
+
+  const handleFileChange = (file?: WebFile) => {
+    setSelectedFile(file);
+  };
+
+  return (
+    <Modal isOpen type="card" onAborted={handleCloseModal} onConfirmed={handleCloseModal}>
+      <Card
+        icon={ICONS.PUBLISH}
+        title={__('Choose a file')}
+        subtitle={__('Only one file is allowed, choose wisely:')}
+        actions={
+          <div>
+            <div>
+              <FileList files={files} onChange={handleFileChange} />
+            </div>
+            <div className="section__actions">
+              <Button
+                disabled={!selectedFile || !files || !files.length}
+                button="primary"
+                label={__('Accept')}
+                onClick={handleSubmit}
+              />
+              <Button button="link" label={__('Cancel')} onClick={handleCloseModal} />
+            </div>
+          </div>
+        }
+      />
+    </Modal>
+  );
+};
+
+export default withRouter(ModalFileSelection);

ui/modal/modalRouter/view.jsx

@@ -39,6 +39,7 @@ import ModalRepost from 'modal/modalRepost';
 import ModalSignOut from 'modal/modalSignOut';
 import ModalLiquidateSupports from 'modal/modalSupportsLiquidate';
 import ModalConfirmAge from 'modal/modalConfirmAge';
+import ModalFileSelection from 'modal/modalFileSelection';
 
 type Props = {
   modal: { id: string, modalProps: {} },
@@ -140,6 +141,8 @@ function ModalRouter(props: Props) {
       return <ModalLiquidateSupports {...modalProps} />;
     case MODALS.CONFIRM_AGE:
       return <ModalConfirmAge {...modalProps} />;
+    case MODALS.FILE_SELECTION:
+      return <ModalFileSelection {...modalProps} />;
     default:
       return null;
   }

ui/scss/all.scss

@@ -19,6 +19,7 @@
 @import 'component/expandable';
 @import 'component/expanding-details';
 @import 'component/file-drop';
+@import 'component/file-list';
 @import 'component/file-properties';
 @import 'component/file-render';
 @import 'component/footer';

ui/scss/component/_file-drop.scss

@@ -23,52 +23,15 @@
 
   .file-drop__area {
     display: flex;
+    min-width: 400px;
     align-items: center;
     flex-direction: column;
     padding: var(--spacing-large);
-    min-width: 400px;
-
-    .file-drop__list {
-      max-height: 200px;
-      overflow: auto;
-      width: 100%;
-
-      fieldset {
-        display: flex;
-        align-items: center;
-        flex-direction: column;
-        background: var(--color-menu-background);
-
-        label {
-          margin: 0;
-          display: flex;
-          align-items: center;
-          padding: var(--spacing-miniscule) var(--spacing-small);
-
-          &.selected {
-            background: rgba(0, 0, 0, 0.2);
-            box-shadow: inset 0 0 0 3px var(--color-focus);
-          }
-
-          .icon {
-            margin-right: var(--spacing-small);
-            opacity: 0.64;
-          }
-        }
-
-        input {
-          width: 0;
-          height: 0;
-          margin: 0;
-          padding: 0;
-          opacity: 0;
-        }
-      }
-    }
 
     .main-icon {
       margin: var(--spacing-small);
     }
+
     p {
       margin-bottom: var(--spacing-large);
     }

ui/scss/component/_file-list.scss

@@ -0,0 +1,37 @@
+.file-list {
+  max-height: 200px;
+  overflow: auto;
+  width: 100%;
+
+  fieldset {
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+    background: var(--color-menu-background);
+
+    label {
+      margin: 0;
+      display: flex;
+      align-items: center;
+      padding: var(--spacing-miniscule) var(--spacing-small);
+
+      &.selected {
+        background: rgba(0, 0, 0, 0.2);
+        box-shadow: inset 0 0 0 3px var(--color-focus);
+      }
+
+      .icon {
+        margin-right: var(--spacing-small);
+        opacity: 0.64;
+      }
+    }
+
+    input {
+      width: 0;
+      height: 0;
+      margin: 0;
+      padding: 0;
+      opacity: 0;
+    }
+  }
+}