search

nextcloud / server

☁️ Nextcloud server, a safe home for all your data
https://nextcloud.com
GNU Affero General Public License v3.0
27.38k stars 4.07k forks source link

Standardized file/image/document viewer #12382

Closed jancborchardt closed 5 years ago

jancborchardt commented 6 years ago

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

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:

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:

Additionally:

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.

nextcloud-bot commented 6 years ago

GitMate.io thinks possibly related issues are https://github.com/nextcloud/server/issues/8241 (image), https://github.com/nextcloud/server/issues/12288 (Files/image viewer: Icons invisible in dark mode), https://github.com/nextcloud/server/issues/11947 (Standardize headings), https://github.com/nextcloud/server/issues/11574 (After deleting image, the preview files remain forever), and https://github.com/nextcloud/server/issues/545 (OCR all images without changing image files).

BatPio commented 5 years ago

@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 commented 5 years ago

@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 commented 5 years ago

@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 commented 5 years ago

@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

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 commented 5 years ago

@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 commented 5 years ago

@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 commented 5 years ago

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

skjnldsv commented 5 years ago

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 commented 5 years ago

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 commented 5 years ago

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 commented 5 years ago

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 commented 5 years ago

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

jancborchardt commented 5 years ago

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:

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 commented 5 years ago

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

juliusknorr commented 5 years ago

What Jan said... :wink:

skjnldsv commented 5 years ago

Perfect then! Thanks both of you :)

MorrisJobke commented 5 years ago

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

skjnldsv commented 5 years ago

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

MorrisJobke commented 5 years ago

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

How soon? Friday is freeze ;)

MorrisJobke commented 5 years ago

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

skjnldsv commented 5 years ago

@MorrisJobke shhhh it's a secret!!! :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 commented 5 years ago

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 commented 5 years ago

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

rullzer commented 5 years ago

Lets track it there then ;)