Element-web: add option to view images full-size in lightbox

[uhoreg]

For very large pictures, the lightbox view may still be too small. It would be nice to be able to view the full-size image (with scrolling) if the image is bigger than the size available in the lightbox. Currently, the only way to view the image full-size is downloading the image. Especially needed for electron app.

[ara4n]

surely this is /only/ needed for the electron app? given on the webapp, opening it in its own tab lets you scroll around?

[ara4n]

oh, or is the problem that the button to open in its own tab is labelled 'download image' rather than 'view fullscreen' or similar?

[uhoreg]

well if #3322 gets fixed in such a way that the webapp also downloads, instead of opening in a new tab, then this issue would also be needed for the webapp. Otherwise, yeah, it would only be needed in the electron app.

[uhoreg]

I would imagine that one relatively easy fix for this would be as follows:

1. when the lightbox is shown, check the original size of the image
2. check the size of the lightbox area
3. if either the image's height or width are smaller than the lightbox's height or width respectively, show a magnifying glass toggle button
4. when the magnifying glass is toggled on, then add a class to the image that will override the max-width/max-height styles and allow the image to be full-size; when the magnifying glass is toggled off, remove the class
5. add "overflow:auto" to the lightbox display area so that the image will be scrolled
6. whenever the browser window is resized, re-check the size of the lightbox area

[pavi]

Its a very annoying bug for users with low resolutions. 💻 The issue gets worse when we actually use Riot Desktop for sharing screenshots. The low resolutiom implies there is no way someone can see the screenshot and make sense of text inside. 😭

[pacien]

What about using the user's entire screen using the fullscreen API and Element.requestFullscreen?

Displaying "full" pictures using a lightbox in the same window that caused the original image to be scaled down is a bit useless.

[t3chguy]

What about using the user's entire screen using the fullscreen API and Element.requestFullscreen?

This doesn't get great UX,
sure it shows it on full-screen but you have no obvious way to close it (in electron) you have to press Escape. There's also no maginifier functionality

[pacien]

sure it shows it on full-screen but you have no obvious way to close it (in electron) you have to press Escape.

.exitFullscreen() when clicking on the "X" in the top-right corner like with the current lightbox?
Riot-web could take some inspiration from the way Telegram desktop shows full-screen images.

[blendmaster]

Not being able to view images full-size is extra annoying in E2E encrypted rooms in the element-desktop. The only way to view the locally-decrypted images is to download it locally, then go and find the downloaded file and view it. In element-web you an at least view the decrypted blob:// url in a new tab.

[nmalcolm]

I'm surprised this has been open for 4 years considering how painfully annoying it is. The lightbox is pretty much useless and I'd quite rather the option to open the image in my browser at this point.