Standardized file/image/document viewer

[jancborchardt]

WIP in https://github.com/nextcloud/viewer

---

Problem

The current image viewer is part of Gallery and not well-maintained, and we should take the move to Vue as an opportunity to make it more snappy and follow our guidelines. We need to improve the experience of our file viewing.

Proposal

It should be a generalized viewer, not only usable by Files but also others like

• Mail: attachments, or clicking on inline images
• Contacts: profile pictures
• Social: any posted pictures
• Talk: files posted in chat
• Deck: attachments of a task
• Files shared via link
• etc.

We will initially start with images, but should also allow other viewers to hook in. When you go through the slideshow of a folder, people expect to see images but also videos for example.

Filetypes we need to support:

• Pixel graphics like: jpg, png, gif, tiff, bmp
• Vector graphics like: svg
• Special formats like: heic & heif (iOS live)
• …

We could also let apps like the PDF viewer and texteditor hook into it to use the same interface.

Design

The interface should focus on viewing the content, so the image should be displayed as large as possible, but shrink to fit the view and not displayed larger. Zooming needs to be possible via mouse scrolling or pinch/spread on touch interfaces or touchpad.

The background visible next to images #000 black. The background immediately behind images themselves needs to have a slightly checkered white/grey background so png and svg with transparency are still properly visible.

There should only be the necessary interface:

• Top left a back arrow to exit the view
• Top centered the filename
• Top right a share action with "Share" label and a 3-dot menu (with further actions, all which are available in Files too) right next to it (mirroring the actions in the list and grid view).

Additionally:

• Tapping/clicking on the right side should advance to the next image (will also have an arrow on the center right)
• Tapping/clicking on the left side goes to the previous image (will also have an arrow on the center left)
• Next/previous should honor the sorting selected in the Files view, or whatwver sorting of the app.
• There should be a play/pause function for the slideshow directly below the right arrow (not on the bottom right)

All of the interface elements should slowly fade out after 3-5 seconds of no mouse or finger move events. As soon as there is a moise move or finger move event they should quickly fade back in.

If actions like sharing or details are used, the sidebar should appear from the right, shrinking the image. Just like in Files. We probably need to adjust the style, maybe using a dark style in the viewer by default because otherwise the light/dark change is too jarring.

[BatPio]

@jancborchardt Hi, In my opinion the biggest problem in using Nextcloud as a photo manager is very slow preview generation. Please consider repairing this bug

[mat-m]

@jancborchardt You're talking about guidelines; If you are talking about UI guidelines, I didn't find them. Is there a place with them ?

[jancborchardt]

@mat-m hi! :) Our general design page is at https://nextcloud.com/design/, and more specific design guidelines including layouts, HTML blocks and coding guidelines are at https://docs.nextcloud.com/server/15/developer_manual/design/

Note that this is an enhancement planned for Nextcloud 16 which @skjnldsv and I will be working on. If you want to get involved you are very welcome! This is a very big issue though, and I recommend getting started with smaller ones, such as design issues also marked as "good first issue".

[v1r0x]

@jancborchardt I totally agree with you. I have implemented a very similar setup with a fixed container (modal) where different file types can hook in. There is no API, so can't really move that to nextcloud. But I already have components for

• Images
• 3D files
• CSV as table
• Markdown (+ rendering)
• PDF
• HTML rendering
• DICOM
• Audio visualization
• Archive Files (as tree and download option for each single file)
• Videos
• and an edit mode for all text based (csv, md, html, xml, json, ...) filetypes

A container that holds all components of different file types would really help to create file plugins, as most of the design/modal stuff is already done.

[jancborchardt]

@v1r0x cool, thanks! So would the components be useful for Nextcloud, or how can we step-by-step make it possible to be used by Nextcloud? :)

@skjnldsv @juliushaertl what do you think, is that something we could reuse? Possibly by using Vue components?

[v1r0x]

@jancborchardt should be easy to simply "copy" them to nextcloud. First step should be a file loader where other components can hook in. Then I could copy my components to the nc vue components or wherever those components should be

[skjnldsv]

@jancborchardt yes, this should be a component. Will make things easier for other apps :)

[skjnldsv]

Shall we create a all-in-one package? Or a viewer with various plugins for each filetype?
Thoughts? I'm more about a all-in-one. We already have too many repos. And it should not be such a difference to add support for other types after that.

[juliusknorr]

We still should have a plugin-based approach, so apps can hook into for custom file types, but I think it would actually be fine to include standard types by default (images/text).

[skjnldsv]

Ah yes, make sense!
So let's say we create a plug-in option but nextcloud should not use that. We let external apps use it, but nextcloud should keep this all-in-one viewer?

[juliusknorr]

I think it still makes sense to ship integration like the video player, pdf viewer or markdown renderer separate apps, so they can still be disabled by the admin. So we would keep our plugin based approach for those.

[skjnldsv]

@juliushaertl I have no particular feelings towards one or the other. :)
More input from @nextcloud/designers ?
@jancborchardt ?

[jancborchardt]

I don’t really have special feelings about that either, but I’d say to balance simplicity, ease of contribution, ease of install and also modularity & stability, we could:

• Have a the core viewer support images, videos and text files by default (this is pretty standard, comparable to iOS and Android) – maybe even PDF?
• Have plugins for special things like Markdown, DICOM files, 3D files etc.

But I’m also fine with a core viewer and everything else being pluggable. As long as the default install includes the defaults like images, video, pdf, text etc.

[skjnldsv]

@juliushaertl what default do you think we should have? :)

[juliusknorr]

What Jan said... 😉

[skjnldsv]

Perfect then! Thanks both of you :)

[MorrisJobke]

@skjnldsv What is the status here? Is there a PR ready somewhere?

[skjnldsv]

@MorrisJobke nope, still working on local. I'll push something soon :)

[MorrisJobke]

@MorrisJobke nope, still working on local. I'll push something soon :)

How soon? Friday is freeze ;)

[MorrisJobke]

Found it in https://github.com/nextcloud/viewer xD

[skjnldsv]

@MorrisJobke shhhh it's a secret!!! ㊙️

BTW, since this is an external app, freeze doesn't really matter. We'll be abme to ship the app with 16, but any new updates will be able to come later no matter if 16.0.x is out :)

[MorrisJobke]

BTW, since this is an external app, freeze doesn't really matter. We'll be abme to ship the app with 16, but any new updates will be able to come later no matter if 16.0.x is out :)

But if we ship it we should also stick to the freezes then. Otherwise it makes very little sense. Sure we can ship updates via App Store, but still it should work and be stable enough 😉

[skjnldsv]

WIP in https://github.com/nextcloud/viewer

[rullzer]

Lets track it there then ;)