Maximize image on click

[rinigus]

When clicking on image, maximize it instead of opening in the external application (browser).

That would require some way of navigatation back. As an example, drawer can be used (from bottom or some other side) allowing users to swipe it out. In addition, X in the corner could be used as well.

[mirukana]

The image viewer has been added to the dev branch.

For navigating back, we can't use a swipable drawer since that would conflict with flicking the image, but there's a X button at the bottom. Other than that, these controls are available:

• Left click on the image (mouse only): expand to window size if the image's origin size is smaller than the window, else expand to original size
• Tap on the image (touch screen/pen only): reveal the info and button bars when auto-hidden (bars will auto-hide only when they overlap with a big enough displayed image)
• Any mouse movement: reveal auto-hidden bars
• Double click on the image: toggle fullscreen
• Middle click anywhere: open externally
• Right click anywhere: close the viewer, back to chat
• Drag when displayed image is bigger than window to pan
• Wheel to pan up/down, hold shift or alt to pan left/right
• Ctrl+wheel to control zoom
• Other available keyboard shortcuts are listed here

I'd like to add pinching gestures to rotate and zoom using PinchHandler, but I have no way to test this without a touch screen, would you be willing to contribute?

[rinigus]

Sure, I will be glad to help. Just let me know when it is ready for testing and which branch I should pull in.

[mirukana]

It should be ready so you can pull dev, thanks.

[rinigus]

I'll be able to test tonight.

[rinigus]

From testing:

• on mobile, tap opens file in a separate application, as according to the configured image://png preferences. Example output:

 20:32:19 | Done: file:///home/nemo/.var/app/io.github.mirukana.mirage/cache/mirage/downloads/jameshjacksonjr.modular.im/Screenshot_20200721_010_6a4be624a682611b8a14c05014847e253d7fa678.png

• on desktop, I think all works as it should. click with mouse, double click. All very nice.

No idea why it is refusing to do so on mobile. The both were tested using flatpak versions.

[rinigus]

PS: used version 87ad3ccab1e9e5ba31e3258c25ec4b7e84ecbdf6

[mirukana]

Maybe the middle click handler is getting triggered accidentally? Try adding print("left", window.settings.media.openExternallyOnClick) here and print("middle", window.settings.media.openExternallyOnClick) here.

[rinigus]

Yes, you get ~ 10:13:33 | middle false on click

[mirukana]

What happens if you add acceptedPointerTypes: PointerDevice.GenericPointer | PointerDevice.Pen to the middle click TapHandler?

[rinigus]

yes, was just testing the similar one: acceptedDevices: PointerDevice.Mouse | PointerDevice.Stylus. the one I tested, filtered it out. and shows picture zoomed in.

cannot pan though, as pointer events are processed by panel under and while I try to pan, messages move up-down there

[mirukana]

When you said "tap opens file in a separate application", did you mean tap on the timeline thumbnail, or tap on the image in the viewer itself?

[rinigus]

in the timeline thumbnail. The fix with acceptedDevices: PointerDevice.Mouse | PointerDevice.Stylus worked, as I expect your proposed fix would work as well.

Issue now is in inability to pan&zoom of the image when in image viewer. This is due to the mouse/tap events being handled by timeline (that's probably the term which you looked for)

[mirukana]

As a possible workaround, can you try adding enabled: ! window.anyPopup to the UI component?

[rinigus]

I will test it tonight

[rinigus]

It did help in terms of not moving the main pane, but not for panning and zooming. Occasionally, after some panning gestures were tried, an image was opened externally again, as before from timeline.

[mirukana]

Might be fixed as a side-effect of https://github.com/mirukana/mirage/commit/8fbe59f6eb55b7a20e85beea95a47d1e4652a180, but probably not.

I'll close this since the feature is now out in 0.6.1 and I have no way of debugging or fixing the touch screen problem myself, please open a new issue for that.

[rinigus]

Thank you very much, I understand the difficulty very well