Use physical pixel size for preview resolution #899

connection-reset · 2021-05-16T13:23:21Z

Fixes #898

MDN has an example for <canvas> that I basically copied.
The apparent image size stays the same, zoom still works like before.

Does not watch for devicePixelRatio changes, eg when moving the browser window from a low DPI screen to a high DPI screen.

skjnldsv · 2021-05-17T06:13:13Z

/backport to stable21

skjnldsv · 2021-05-17T06:13:17Z

/backport to stable20

skjnldsv · 2021-05-17T06:13:24Z

/backport to stable19

beardhatcode

Hi @connection-reset , thanks for your contribution 👍 .

I looked at your patch, I think the code could be improved by extracting the Math.floors into variables. (Or even better: extract everything behind the ? into a variable)

connection-reset · 2021-05-23T15:24:26Z

I made width and height into variables. I tried out moving the whole URL Params into a variable, it is actually worse.

beardhatcode · 2021-05-23T15:32:16Z

@connection-reset i changed It to what I think it should be. (and accidentally closed the PR for a sec, sorry)

Do you think this is OK @connection-reset?

connection-reset · 2021-05-23T15:34:46Z

That is fine by me, I care more about how the preview looks than how the code does.

beardhatcode · 2021-05-23T15:37:28Z

@skjnldsv could you squash and merge this if this is OK for you? (The failing test is the sidebar test )

(devicePixelRatio has existed in all browsers since 2011 apparently, so this shouldn't break in any browser except IE)

        Spec                                              Tests  Passing  Failing  Pending  Skipped  
  ┌────────────────────────────────────────────────────────────────────────────────────────────────┐
  │ ✔  audio.mpeg.spec.js                       00:15        6        6        -        -        - │
  ├────────────────────────────────────────────────────────────────────────────────────────────────┤
  │ ✔  audio.ogg.spec.js                        00:13        6        6        -        -        - │
  ├────────────────────────────────────────────────────────────────────────────────────────────────┤
  │ ✔  audios.spec.js                           00:15        9        9        -        -        - │
  ├────────────────────────────────────────────────────────────────────────────────────────────────┤
  │ ✔  delete.spec.js                           00:19        7        7        -        -        - │
  ├────────────────────────────────────────────────────────────────────────────────────────────────┤
  │ ✔  download-share-disabled.spec.js          00:22        9        9        -        -        - │
  ├────────────────────────────────────────────────────────────────────────────────────────────────┤
  │ ✔  download-share.spec.js                   00:20       11       11        -        -        - │
  ├────────────────────────────────────────────────────────────────────────────────────────────────┤
  │ ✔  download.spec.js                         00:19        5        5        -        -        - │
  ├────────────────────────────────────────────────────────────────────────────────────────────────┤
  │ ✔  files-shares.spec.js                     00:22       26       26        -        -        - │
  ├────────────────────────────────────────────────────────────────────────────────────────────────┤
  │ ✔  files.spec.js                            00:08        2        2        -        -        - │
  ├────────────────────────────────────────────────────────────────────────────────────────────────┤
  │ ✔  image-small.png.spec.js                  00:11        6        6        -        -        - │
  ├────────────────────────────────────────────────────────────────────────────────────────────────┤
  │ ✔  image.gif.spec.js                        00:12        6        6        -        -        - │
  ├────────────────────────────────────────────────────────────────────────────────────────────────┤
  │ ✔  image.heic.spec.js                       00:15        7        7        -        -        - │
  ├────────────────────────────────────────────────────────────────────────────────────────────────┤
  │ ✔  image.png.spec.js                        00:17        7        7        -        -        - │
  ├────────────────────────────────────────────────────────────────────────────────────────────────┤
  │ ✔  image.svg.spec.js                        00:11        7        7        -        -        - │
  ├────────────────────────────────────────────────────────────────────────────────────────────────┤
  │ ✔  image.webp.spec.js                       00:13        7        7        -        -        - │
  ├────────────────────────────────────────────────────────────────────────────────────────────────┤
  │ ✔  images-custom-list-loadmore.spec.js      00:17       18       18        -        -        - │
  ├────────────────────────────────────────────────────────────────────────────────────────────────┤
  │ ✔  images-custom-list.spec.js               00:16       14       14        -        -        - │
  ├────────────────────────────────────────────────────────────────────────────────────────────────┤
  │ ✔  images.spec.js                           00:16       18       18        -        -        - │
  ├────────────────────────────────────────────────────────────────────────────────────────────────┤
  │ ✔  oddname/oddname-audio.spec.js            00:44       30       30        -        -        - │
  ├────────────────────────────────────────────────────────────────────────────────────────────────┤
  │ ✔  oddname/oddname-image.spec.js            01:33       60       60        -        -        - │
  ├────────────────────────────────────────────────────────────────────────────────────────────────┤
  │ ✔  oddname/oddname-video.spec.js            01:14       50       50        -        -        - │
  ├────────────────────────────────────────────────────────────────────────────────────────────────┤
  │ ✔  oddname/oddname.js                         3ms        -        -        -        -        - │
  ├────────────────────────────────────────────────────────────────────────────────────────────────┤
  │ ✖  sidebar.spec.js                          02:48       14        7        7        -        - │
  ├────────────────────────────────────────────────────────────────────────────────────────────────┤
  │ ✔  video.mkv.spec.js                        00:12        6        6        -        -        - │
  ├────────────────────────────────────────────────────────────────────────────────────────────────┤
  │ ✔  video.mp4.spec.js                        00:12        6        6        -        -        - │
  ├────────────────────────────────────────────────────────────────────────────────────────────────┤
  │ ✔  video.ogv.spec.js                        00:12        6        6        -        -        - │
  ├────────────────────────────────────────────────────────────────────────────────────────────────┤
  │ ✔  video.webm.spec.js                       00:13        6        6        -        -        - │
  ├────────────────────────────────────────────────────────────────────────────────────────────────┤
  │ ✔  videos.spec.js                           00:17        9        9        -        -        - │
  └────────────────────────────────────────────────────────────────────────────────────────────────┘
    ✖  1 of 28 failed (4%)                      12:18      358      351        7        -        -

szaimen · 2021-05-23T22:59:30Z

I am interested to know what happens if you limit the max preview size to below your screens resolution. Will it fail to request the preview?
Also it will be interesting to know if it still works with those values applied:
https://github.com/nextcloud/vm/blob/67c5a8814e396f99e12ef5319288d7704a0e52be/apps/previewgenerator.sh#L232-L236

connection-reset · 2021-05-24T07:38:58Z

It will not fail, this patch makes no change to how previews work.

beardhatcode · 2021-05-24T07:48:44Z

@szaimen, this PR only changes the "max preview width" and "max preview height" send to the server when requesting a preview. The Nextcloud server will then return the largest preview it can give. So with preview_max_y = 2048 you will never get a preview higher than 2048px even if you request one of height 100000000px.

beardhatcode · 2021-06-01T17:32:13Z

@skjnldsv I rebased this on master

skjnldsv · 2021-06-04T06:31:15Z

Also it will be interesting to know if it still works with those values applied:
nextcloud/vm@67c5a88/apps/previewgenerator.sh#L232-L236

Vm is not officially supported nor maintained by us. We strongly encourage to make sure any default config fits your needs :)
In any case, requesting a preview will always fallback to closest power of 4 (capped by the max config). 2048 here 🤷

src/mixins/PreviewUrl.js

szaimen · 2021-06-04T08:27:31Z

Vm is not officially supported nor maintained by us.

I know :)

We strongly encourage to make sure any default config fits your needs :)
In any case, requesting a preview will always fallback to closest power of 4 (capped by the max config). 2048 here 🤷

Great, sounds good! :)

beardhatcode · 2021-06-05T08:48:56Z

@skjnldsv , I'll merge this if the tests pass. Works for me locally

Code was inspired by code in an MDN page (in the public domain) https://developer.mozilla.org/en-US/docs/Web/API/Window/devicePixelRatio getPreviewIfAny: extract queryParams to get preview Signed-off-by: Robbert Gurdeep Singh <[email protected]> Signed-off-by: Axel Pirek <[email protected]>

skjnldsv approved these changes May 17, 2021

View reviewed changes

skjnldsv added 4. to release Ready to be released and/or waiting for tests to finish bug Something isn't working labels May 17, 2021

backportbot-nextcloud bot added the backport-request Pending backport by the backport-bot label May 17, 2021

beardhatcode requested changes May 23, 2021

View reviewed changes

beardhatcode approved these changes May 23, 2021

View reviewed changes

beardhatcode closed this May 23, 2021

beardhatcode reopened this May 23, 2021

beardhatcode requested a review from skjnldsv June 1, 2021 17:32

skjnldsv approved these changes Jun 4, 2021

View reviewed changes

skjnldsv reviewed Jun 4, 2021

View reviewed changes

src/mixins/PreviewUrl.js Show resolved Hide resolved

skjnldsv reviewed Jun 4, 2021

View reviewed changes

src/mixins/PreviewUrl.js Show resolved Hide resolved

skjnldsv reviewed Jun 4, 2021

View reviewed changes

src/mixins/PreviewUrl.js Show resolved Hide resolved

skjnldsv merged commit 46e17ee into nextcloud:master Jun 5, 2021

backportbot-nextcloud bot mentioned this pull request Jun 5, 2021

[stable21] Use physical pixel size for preview resolution #937

Merged

MorrisJobke mentioned this pull request Jun 10, 2021

22.0.0 Beta 4 nextcloud/server#27458

Merged

59 tasks

szaimen mentioned this pull request Jun 18, 2021

Thumbnails size in file list doesn't match requested preview size nextcloud/server#13709

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Use physical pixel size for preview resolution #899

Use physical pixel size for preview resolution #899

connection-reset commented May 16, 2021

skjnldsv commented May 17, 2021

skjnldsv commented May 17, 2021

skjnldsv commented May 17, 2021

beardhatcode left a comment

connection-reset commented May 23, 2021

beardhatcode commented May 23, 2021 •

edited

Loading

connection-reset commented May 23, 2021

beardhatcode commented May 23, 2021 •

edited

Loading

szaimen commented May 23, 2021 •

edited

Loading

connection-reset commented May 24, 2021

beardhatcode commented May 24, 2021

beardhatcode commented Jun 1, 2021

skjnldsv commented Jun 4, 2021

szaimen commented Jun 4, 2021

beardhatcode commented Jun 5, 2021 •

edited

Loading

Use physical pixel size for preview resolution #899

Use physical pixel size for preview resolution #899

Conversation

connection-reset commented May 16, 2021

skjnldsv commented May 17, 2021

skjnldsv commented May 17, 2021

skjnldsv commented May 17, 2021

beardhatcode left a comment

Choose a reason for hiding this comment

connection-reset commented May 23, 2021

beardhatcode commented May 23, 2021 • edited Loading

connection-reset commented May 23, 2021

beardhatcode commented May 23, 2021 • edited Loading

szaimen commented May 23, 2021 • edited Loading

connection-reset commented May 24, 2021

beardhatcode commented May 24, 2021

beardhatcode commented Jun 1, 2021

skjnldsv commented Jun 4, 2021

szaimen commented Jun 4, 2021

beardhatcode commented Jun 5, 2021 • edited Loading

beardhatcode commented May 23, 2021 •

edited

Loading

beardhatcode commented May 23, 2021 •

edited

Loading

szaimen commented May 23, 2021 •

edited

Loading

beardhatcode commented Jun 5, 2021 •

edited

Loading