Files: thumbnails

[jancborchardt]

It would be the bomb to have small file previews as thumbnails instead of just useless file type icons. It’s probably a ton of work but would supercharge the Files app. The list items could also just be a bit bigger, or we make a separate list & grid view (although I think we can kick ass with having one great view).

[karlitschek]

I want to work on a general preview lib that we can use to generate thumbnails

[DeepDiver1975]

@jancborchardt @karlitschek
slightly off-topic: what about file viewing?
as off today we have different presentation for different files e.g. for pictures/photos we popup a lightbox.
odf and pdf fade-in and replace the files list - but both have a different look and feel (actually my fault ;-) )

what about unifying the look and feel of the file viewer?

[jancborchardt]

@DeepDiver1975 good question: ODF and PDF, or any view-only things should not replace the file list. Rather use this lightbox-style similar to the images (without white border though) and darken the background.

[jancborchardt]

Duplicate of #86, closing.

[happysysadm]

I don't know it this relevant to this issue, but I wonder if it is possible for OC to generate thumbs in 'offline mode' when a folder containing pictures is shared to someone else.

What I see is that thumbs are generated for each user at the time of browsing the folder. Which adds a delay to the navigation and make people think that the share doesn't work or that it is very slow.

Also, why not to have a unique thumbnail for a picture instead of one per user?

Thanks in advance
Manny

[georgehrke]

open tasks:

• delete thumbnails if files change.
• make it work with external filesystem files.
• movies support
• pdf support
• mp3/id3 support
• more file types

Edit:

• stream a few mb of remote storage to local cache
• unknown backend

[georgehrke]

@jancborchardt What kind of information should preview.png show if the mimetype is unknown or all attempts to generate a preview fail?

[georgehrke]

@jancborchardt @karlitschek What do you think about syntax highlighting for text based files?

[karlitschek]

@georgehrke Previews of Test files is definitely important. sSntax highlighting would be neat but this is mainly for developers useful who have sourcecode in their ownCloud. If easily doable, why not. More important would be .doc and .odt if you ask me. ;-) Yes. This is not easly ;-)

[georgehrke]

Previews of Test files is definitely important.

That's already implemented - https://github.com/owncloud/core/blob/oc_preview/lib/preview/txt.php

If easily doable, why not.

AFAIK there are only two libs and both are not suitable for this case, because they return pure HTML code ... (Geshi and Hyperlight)

More important would be .doc and .odt if you ask me

Absolutely, I'll take a look

[georgehrke]

I did some research and the best solution seems to be PHPDocX. There is an LGPL licensed community edition of it. It seems to be very easy to generate pdf files from docx. We could use the PDF preview backend to generate previews of the documents.

<?php

/**
 * Transform DOCX into PDF
 *
 * @category   Phpdocx
 * @package    examples
 * @subpackage easy
 * @copyright  Copyright (c) Narcea Producciones Multimedia S.L.
 *             (http://www.2mdc.com)
 * @license    LGPL
 * @version    3.0
 * @link       http://www.phpdocx.com
 * @since      File available since Release 3.0
 */
require_once '../../classes/TransformDoc.inc';
require_once '../../classes/CreateDocx.inc';

$docx = new CreateDocx();

$document = new TransformDoc();
$document->setStrFile('../files/Text.docx');
$document->generatePDF();

[karlitschek]

looks good

[georgehrke]

Well, phpdocx works, but it's definitely not perfect.

What's about using libreoffice-cl (or openoffice-cl) as primary solution and phpdocx as a fallback if libreoffice-cl is not available?

[georgehrke]

@jancborchardt What kind of information should preview.png show if all attempts to generate a preview fail? (aka unknown backend)

[jancborchardt]

@georgehrke fall back to the file type icon. We need bigger file type icons then but that’s a different story. :)

[georgehrke]

and what if there is no filetype icon for the mime type? ;)

[jancborchardt]

@georgehrke then the file type icon display thingy will fall back to the generic paper document thing icon. That already works now.

[georgehrke]

ok

[georgehrke]

thx :)

[georgehrke]

f89a23b

[georgehrke]

@jancborchardt Do you know a high resolution set of mimetype icons we could use?

[jancborchardt]

@georgehrke I checked and found a great one: https://github.com/teambox/Free-file-icons/ it’s by Teambox, a project management software of which the latest versions are sadly not open source anymore. But the icons are AGPL.

@georgehrke introducing the thumbnails and new file type icons goes well with a bit of whitespace rethinking for the files app. I suggest we up the row height to 44px (suggested touch target from Apple HIG) and use thumbnails of the same size (square). Then from the file type icons we use the 32px ones so they have a bit of breathing room.

Sounds good? @georgehrke do we want to work on that in a branch files-update or so?

[georgehrke]

sure

[karlitschek]

License should be OK. But do we have an option with MIT/BSD somewhere too?

[jancborchardt]

Ok, will check if there’s a good set with a more permissive license.

[jancborchardt]

Funnily enough, the well-designed Elementary icon set just released a new version 9 hours ago: http://danrabbit.deviantart.com/art/elementary-Icons-65437279
Their icon quality is very high and the file type icons are very nice and simple. It’s even SVG so it will also work great on retina. It’s also GPL though. I mailed the author before, I could ask him if he can make an exception to license it as MIT for us?

I’ll also continue to look, but I looked for icon sets before and Elementary is really one of the best (not even only when it comes to freely licensed ones).

[karlitschek]

@jancborchardt TYes. This would be great!

[jancborchardt]

Ok great, I got confirmation from Dan of Elementary via email that we can use the icons under MIT! :)

@georgehrke is it ok if I just join you in your oc_preview branch? I would make the Files rows higher and add the Elementary icons as said. Then you can add the previews for files where they can be generated. Cool?

[georgehrke]

On Jun 13, 2013, at 11:18 PM, Jan-Christoph Borchardt notifications@github.com wrote:

Ok cool, I got confirmation from Dan of Elementary via email that we can use the icons under MIT. :)

@georgehrke is it ok if I just join you in your oc_preview branch? I would make the Files rows higher and add the Elementary icons as said. Then you can add the previews for files where they can be generated. Cool?

Yeah :-)
—
Reply to this email directly or view it on GitHub.

[georgehrke]

@jancborchardt Do you want to add the icons as svg or png?

[jancborchardt]

@georgehrke didn’t come around to it yet but: Both SVG and PNG, as we need PNG for legacy browser support (IE8 and the like). SVG is way more awesome though because it’s scalable and works on retina by default. Do the thumbnails also work good with retina displays or do we need some extra magic there (like thumbnails in 2 different solutions or whatever)?

[georgehrke]

Do the thumbnails also work good with retina displays or do we need some extra magic there

I have no retina display, but it should work just fine as you can define the size of the preview

[jancborchardt]

@georgehrke I already padded the rows a bit and added some of the new icons, see the 2 commits in the branch. Do you still need to hook up something so thumbnails are generated or do I need to install smth?

[georgehrke]

@jancborchardt Would you mind adjusting the position of the checkbox?

[georgehrke]

Do the thumbnails also work good with retina displays or do we need some extra magic there

I have no retina display, but it should work just fine as you can define the size of the preview

Retina support is kind of tricky when we generate the path on the server side.
I tried to upscale the previews to 64x64 instead of 32x32, but the problem is that the CSS property 'background-size' is only supported in IE9+ … (AHH MICROSOFT )

(We need background-size to scale it down to 32x32)

We can still implement retina support later.
@raghunayyar The new files app will be released with oC6, right?

[jancborchardt]

@georgehrke wwwhat? Ok, that’s kind of shitty. Can we solve it differently, maybe with IMG tags? I’d say retina displays are more important than IE8 looking fully good.

Also yeah, I will adjust the position of the checkbox so that the whole area of the icon is clickable and the checkbox is in the bottom right or so.

[georgehrke]

In the new files app, those paths will be generated in the browser, right?

If the new files app will be released with oC 6, there is no need to implement it (twice).

[raghunayyar]

@georgehrke mostly yes, I will start working on it this August. :)

[ptsefton]

Our university is looking adopting oC for use with both research data and teaching resources, to support this, we have some basic requirements, which we would be happy to contribute code to implementing if they fit with community thinking. We're working on this in an app called Cr8it (crate-it).

• There should be web-ready views of as many file types as possible.
  • Thumbnails for images for online viewing, and at various sizes for export to EPUB, HTML etc.
  • HTML versions of documents, including Word, OpenDocmunent, spreadsheets, presentations etc.
  • Versions of video at various sample rates and formats for use in different situations
  • Pluggable support for other formats, eg scientific data formats and speciallist image formats
• By web-ready views, I mean:
  • Thumbnails for immediate viewing
  • HTML-wrapped snippets that can be combined together into EPUB books, or blogged etc
  • PDF versions of documents

It is important, if we're trying to support all that, to make sure that these views can be generated by a background process, and potentially farmed-out to multiple machines, there is no way we can ask users to wait while a video is re-formatted.

So what we'd like to see (and help with) would be:

• A way to register file-conversion processes and to make this configurable so admins can choose which views to support and flexible so users can see the views they want to see
• Some kind of dispatching system possibly using message queues to manage conversion
• A standard way to store various derived versions of files and make them available to any app
• One version of each view per file

Out short term approach has been to use some existing software with which we are familiar. We are using a repository system called The Fascinator to store the web-ready-views - this has a queue system as discussed above. The repository is using another open source package, Integrated Content Environment (ICE) to do many of the file conversions. Neither of these are packaged or easy to install, we're working on better instructions.

ICE uses open-office to create PDF and HTML versions of office documents. This is not perfect but it does a better job than most packages. We are working on a version that can use a Sharepoint server to create better versions of Word documents as well. The current test version of ICE takes a markdown-like approach to generating HTML, throwing out most formatting and looking for headings, indent, bullets and numbers to produce clean HTML5 (and soon XHTML for use in EPUB). ICE is a major code base created by the University of Southern Queensland, but they have more or less abandoned the open source version but it does have a lot work in it to deal with all sorts of conversion quirks that may be worth keeping.

So, if there is an emerging architecture for any of this we'd be really happy to contribute to implementing it.

[karlitschek]

@ptsefton Thanks a lot for your suggestions. Contributions here are very welcome. The architecture you suggested sounds very advanced and is perhaps suitable for a version 2 of the thumbnails system. At the moment we should get the library @georgehrke worked on merged because we need this for other ownCloud 6 features very soon.
Pull requests are very welcome of course :-)

[georgehrke]

Are previews necessary in the trash bin app?

[jancborchardt]

@georgehrke yes, previews everywhere. Especially for deleted files it’s important to quickly see which files are which, so you know which you want to restore.

[Niduroki]

#4022 deals with this?

[georgehrke]

#4022 deals with this?

Yes

[Niduroki]

Fixed with #4022

[jancborchardt]

To quote myself from the original issue: »It’s probably a ton of work but would supercharge the Files app.«

I guess @georgehrke agrees with the first part. I definitely think the Files app is supercharged.

🚀