feat: add files page #669

hacdias · 2018-05-23T22:43:36Z

Start building the files page. This is a minimal version with some controls working: delete, inspect, navigation and file upload. You can also preview music, pdf, video, pictures, audio and text files.

License: MIT
Signed-off-by: Henrique Dias [email protected]

olizilla · 2018-05-31T09:11:08Z

👀 now!

olizilla

This is great work @hacdias. Only minor changes needed.

olizilla · 2018-05-31T10:07:49Z

src/bundles/files.js

+    })
+}
+
+function runAndFetch ({ dispatch, getIpfs, store }, type, action, args) {


olizilla · 2018-05-31T11:03:09Z

src/App.js

+  'selectRoute',
+  'doUpdateUrl',
+  'doInitIpfs',
+  'doGetGatewayUrl',


doGetGatewayUrl can be removed here, it's not used.

olizilla · 2018-05-31T11:13:27Z

src/bundles/ipfs.js

@@ -27,5 +38,21 @@ export default {
    }

    dispatch({ type: 'IPFS_INIT_FINISHED' })
+  },
+
+  doGetGatewayUrl: () => async ({ dispatch }) => {


doGetGatewayUrl isn't called? I think it's a good plan to have something like this. We might end up with both a "publicGatewayUrl" that points to https://ipfs.io most of the time, and an "localGatewayUrl" that usually points to localhost. I think we've got something like that in companion already.

What you have is good for now. We need to think about how we make this work against a js-ipfs instance, as we connect to window.ipfs, so we can't be sure that the user has http gateway. We could just use the public one in that case, but it would be neat if we could load the users files directly via window.ipfs rather than assuming an http gateway.

Uhh, forgot to call it. Now it's called after doInitIPFS. 😄 It doesn't work when using companion though because it doesn't allow .config.get.

We should start thinking on adding window.ipfs in "privileged mode" for WebUI, which provides access to all APIs and has no sandboxing.

Initial idea was to add a mechanism for pre-emptively requesting permissions, as suggested in ipfs/ipfs-companion#454 (comment) and ipfs/ipfs-companion#454 (comment), it could be extended with sandbox flag:

window.ipfs.proxy.acl.whitelist(['config.get'], {sandboxing: false})

The problem is that other dapps could easily disable sandboxing this way.
Not sure if we are able to secure it without some sort of pubkey crypto, which requires us to maintain key for signing webui request for access to privileged APIs.

Is this a blocker or just an inconvenience?
Are you able to work with HTTP API until we sort this out?

olizilla · 2018-05-31T11:16:47Z

src/files/FilesPage.js

+
+const empty = (
+  <div>
+    <h2>It seems a bit lonely here :(</h2>


@akrych when you get time, could you create some ideas for a "you have no files yet, why not add some" page for the files view? It could use some of the space to introduce some IPFS or at least some of the issues around "they are only on your machine until a peer fetches them from you", and "this is p2p. this is not a cloud"

olizilla · 2018-05-31T11:17:46Z

src/files/FilesPage.js

+  }
+
+  componentWillMount () {
+    console.log('WUOLL MOUNT')


I don't even remember why I added this listeners... 😆

olizilla · 2018-05-31T11:25:09Z

src/files/file-input/FileInput.js

+
+    for (const file of raw) {
+      promises.push(readAsBuffer(file))
+      console.log(file)


Let's use https://github.com/visionmedia/debug for this kind of logging.

olizilla · 2018-05-31T11:25:59Z

src/files/file-preview/FilePreview.js

+          </object>
+        )
+      case 'video':
+        console.log('Ivdeo')


olizilla · 2018-05-31T11:36:48Z

src/files/file-preview/FilePreview.js

+      default:
+        const cantPreview = (
+          <div>
+            Sorry, we can not preview this file..


There are going to be a bunch of media types we can't preview in a browser... @akrych can you add designs for "preview page for file types where we can't show a preview of the content". We can still ask IPFS for a file size at least, but that isn't much.

More generally, I think that doing a good job of showing a preview for all types of files is a lot of work. Like, many files will say they are are "video" but that doesn't mean we have the codecs to play them. Same for audio.

We could do extra work and unpack zip files and show their structure but then we've got tar,7zip,rar etc which would each need custom previews.

Then there is all the text flavours. Do we go full github and try and render all of them too? W

We need to at least catch all the scenarios where the current browser can't preview a file that might normally be playable. Showing a video element, that just shows a gray box is a bad user experience, and worse than just saying we can't preview it.

We could preview files in browser tabs for now, and let the browser decide what to do with it. It's not great, but it avoids a load of edge cases for until we're ready to do all the work that a robust, general purpose preview page will need.

@lidel @alanshaw @hacdias what are your thoughts on this?

I agree with @olizilla , not sure if we want to go into the rabbit hole of adding file previews of too many formats. It will be time consuming and it could easily be added later via PRs (great opportunity for contributors). That being said, two additional ideas below.

Improving UX without real previews

It may have more sense to rename it to "File Details" (as it does not imply preview is always possible).

Even if we can't play a .mov video or open a .docx document, we can visually communicate to user if a file is a video, document, archive.

To roughly determine if preview can be rendered, we could do proper mime-type sniffing via something like file-type (it only needs the first 4100 bytes of every file).

In absence of real preview for specific format, the screen could display file size, detected mime-type with some human-readable description of the file type, a different Icon for popular mime-types (or just generic image/sound/video/document/archive/unknown) and a Download button to enable user to open file in third-party handler provided by OS.

Previews for web-safe formats

If we want to have minimal support for previews we should aim at low hanging fruits: images, text files and basic audio and video player for formats supported by the browser with a fallback Download button if it can't be played for some reason.

olizilla · 2018-05-31T11:37:43Z

src/files/file-preview/FilePreview.js

+
+        if (!this.state.content) {
+          this.loadContent()
+          return <div>Loading</div>


@akrych can you give us some design directions on "page loading" and "component loading" states please.

olizilla · 2018-05-31T11:47:41Z

src/files/type-from-ext/extensions/audio.json

@@ -12,7 +12,6 @@
  "aac",
  "mp2",
  "mp3",


As we want to look up a file type from an encoding, a map or object would be a better mechanism for storing these lookups.

extToType.js

{ amr: 'audio', bw: 'audio', jpg: 'image', jpeg: 'image', mp4: 'video' // ...and on and on }

This ensures that we don't put the same extension in more than one file and keeps lookups as fast as possible and allows us to easily add new icon types for specific extensions if we need to.

olizilla · 2018-05-31T11:53:28Z

The layout for the action items needs to be tweaked, the buttons jiggle depending on how many items are selected.

Also, I suggest changing the design so that when switching from 1 selected item to 2+, the options that are no longer applicable remain visible, but are disabled and have reduced opacity. We can tooltip them to say "only available for individual files". I'd reorder the options so that the ones that get disabled are to the right hand side. The position of the buttons should remain the same regardless of how many items are selected.

olizilla · 2018-05-31T11:56:07Z

Uploading large files kills chrome. We have this issue in companion, and we solve it by blocking the upload and warning the user.

@lidel @alanshaw should we port that logic to window.ipfs? or at lease wrap window.ipfs with it, as any app that tries to do it is going to hit this problem. It's not ideal but I think it's better that we throw an error that the developer can catch rather than letting the tab fail.

olizilla · 2018-05-31T11:57:39Z

@akrych the files list looks beautiful, but I'm concerned that the information density is too low for a file list. The user can't see many files in a single screen. Can we tighten it up a little without spoiling the feeling?

olizilla · 2018-05-31T11:59:31Z

@hacdias being able to click through to the IPLD explorer is totally rad. I wonder if we can ask MFS if it know the local mfs path for a given CID... that way the IPLD page could offer a link back to the files view if a node is a unixfs one.

lidel · 2018-05-31T16:35:37Z

Uploading large files kills chrome. [..] should we port that logic to window.ipfs?

@olizilla extracted this discussion into separate issue: ipfs-inactive/ipfs-postmsg-proxy#33

hacdias · 2018-05-31T18:02:36Z

@olizilla thanks for your review 😄 I don't think we can take an hash and get its path on MFS right now. There doesn't seem to be an API for that.

hacdias · 2018-06-04T15:00:21Z

@olizilla I fixed most of the issues you mentioned. Can we merge this?

akrych · 2018-06-04T15:14:26Z

@akrych the files list looks beautiful, but I'm concerned that the information density is too low for a file list. The user can't see many files in a single screen. Can we tighten it up a little without spoiling the feeling?

Yeah, we can tight it up :) I think we can make smaller margins (18px) on the top and bottom of file icon

olizilla · 2018-06-05T07:58:45Z

@hacdias can you fix up the action bar layout jiggle, then we can merge this.

hacdias requested review from olizilla, alanshaw and lidel May 23, 2018 22:43

lidel added the revamp label May 24, 2018

hacdias added 17 commits May 24, 2018 14:54

starting files page ::D

6b5c046

feat: delete and inspect

81a7171

hide title

b71169e

feat: add doFilesRename

338ef51

add previews

9b81b00

fix links, package json and remove route

5acc5d6

fix breadcrumbs

c7b8854

add message when folder is empty

12508ac

add alternative message file preview

af62ed4

display titlte

4b6fd6b

make tests pass

72bcab7

readd unsupported message

88dbb95

feat: rename is working with ugly prompt

9d74d90

better renaming

2e1ce94

add mkdir bundle

87331b3

add bundle files write

136deee

Upload files working

3837533

hacdias force-pushed the feat/revamp/files branch from b3298a2 to 3837533 Compare May 24, 2018 13:54

hacdias added 4 commits May 24, 2018 15:00

add max width to bar

7648cd2

fix small issues

6dd84ce

simplify some fns

b8eb6a1

fix link on test

bfca078

olizilla requested changes May 31, 2018

View reviewed changes

hacdias added 4 commits May 31, 2018 17:19

fix: remove doGetGatewayUrl from App

3371e3c

fix: remove unused hooks

5d9514a

refactor: move readAsBuffer to files bundle

566605d

remove unnecessary console.log

a2fe297

lidel mentioned this pull request May 31, 2018

Improve error handling related to big uploads ipfs-inactive/ipfs-postmsg-proxy#33

Open

call doGetGatewayUrl

6344b9d

make extenstions to type a map

28878bf

fix: avoid action bar jiggle

1251464

hacdias merged commit 2a76554 into revamp Jun 5, 2018

hacdias deleted the feat/revamp/files branch June 5, 2018 11:34

hacdias mentioned this pull request Jul 9, 2018

File Browser Revamp #704

Closed

18 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: add files page #669

feat: add files page #669

hacdias commented May 23, 2018 •

edited

Loading

olizilla commented May 31, 2018

olizilla left a comment

olizilla May 31, 2018

olizilla May 31, 2018

olizilla May 31, 2018

hacdias May 31, 2018

lidel May 31, 2018 •

edited

Loading

olizilla May 31, 2018

olizilla May 31, 2018

hacdias May 31, 2018

olizilla May 31, 2018

olizilla May 31, 2018

olizilla May 31, 2018

lidel May 31, 2018 •

edited

Loading

olizilla May 31, 2018

olizilla May 31, 2018

olizilla commented May 31, 2018

olizilla commented May 31, 2018

olizilla commented May 31, 2018

olizilla commented May 31, 2018

lidel commented May 31, 2018

hacdias commented May 31, 2018

hacdias commented Jun 4, 2018

akrych commented Jun 4, 2018 •

edited

Loading

olizilla commented Jun 5, 2018

@@ @@ -12,7 +12,6 @@ @@
                 "aac",
                 "mp2",
                 "mp3",

feat: add files page #669

feat: add files page #669

Conversation

hacdias commented May 23, 2018 • edited Loading

olizilla commented May 31, 2018

olizilla left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

lidel May 31, 2018 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

lidel May 31, 2018 • edited Loading

Choose a reason for hiding this comment

Improving UX without real previews

Previews for web-safe formats

Choose a reason for hiding this comment

Choose a reason for hiding this comment

olizilla commented May 31, 2018

olizilla commented May 31, 2018

olizilla commented May 31, 2018

olizilla commented May 31, 2018

lidel commented May 31, 2018

hacdias commented May 31, 2018

hacdias commented Jun 4, 2018

akrych commented Jun 4, 2018 • edited Loading

olizilla commented Jun 5, 2018

hacdias commented May 23, 2018 •

edited

Loading

lidel May 31, 2018 •

edited

Loading

lidel May 31, 2018 •

edited

Loading

akrych commented Jun 4, 2018 •

edited

Loading