refactor: modern-image layout title width and elements visibility

[Samillion]

Pinging: @Commander07 @Keith94 @Xurdejl

Ok, so I merged the main layouts, now focusing on improving the looks of things.

Changes:

• Title width should now be handled and displayed better with extremely long filenames
• Playlist button and skip buttons should have better visibility now

To do:

• Anything else?

Test script: /dev_modernimage_refactor/modernz.lua

[Xurdejl]

The only thing I could say is that the title sometimes squeezes when it's too long.

To do:

• Anything else?

Not about the image layout, but I guess something similar could be done for GIFs. Since they don't have sound, all the left buttons except the playlist aren’t needed.

[Keith94]

What about having the next and previous buttons be aligned to the right side along with the other buttons?

[Samillion]

The only thing I could say is that the title sometimes stretches when it's too long.

Terribly sorry for the bother, could you give me an example of a filename? or a character count?

What about having the next and previous buttons be aligned to the right side along with the other buttons?

Excuse my French, but that is a fuckin great idea! It will make dealing with the title so much easier lol

[Keith94]

Haha glad you agree. They honestly looked a little lonely floating by themselves.

[Xurdejl]

Terribly sorry for the bother, could you give me an example of a filename? or a character count?

Sorry, I meant squeeze. I think there was an issue about that because it also happened in the video layout but can't seem to find it.

[Samillion]

Oh, that's intentional. It clips the area. In essence, it's like a counterpart to maxchars.

The title has a specific width, once it goes beyond that, we use ass tags to \\clip

ModernZ/modernz.lua

Line 1631 in 077e64e

lo.style = string.format("%s{\\clip(0,%f,%f,%f)}", osc_styles.title, geo.y - geo.h, geo.x + geo.w, geo.y + geo.h)

It has a side effect that it will change font type, because mpv font is limited, so it picks whatever your OS can cover with. (Arial, Sans Serif...etc)

[Samillion]

Forgot to note, the clipping should look much better once I apply Keith's idea.

[Xurdejl]

Oh, then everything else looks perfect. The only idea I can think of is having zoom in/out on scroll wheel in the image mode.

[Keith94]

zoom in/out on scroll wheel in the image mode.

There may be some scripts out in the wild that can achieve similar things like that? I didn't test but came across this report earlier.

https://github.com/occivink/mpv-image-viewer?tab=readme-ov-file#scripts

[Samillion]

Should be easily implemented within ModernZ without external scripts. I think. I hope lol.

Since technically we can just add zoom in/out buttons and have them apply the effect on click/scroll

[Xurdejl]

Yes, by default the keybinds are "alt +" and "alt -" for zooming in and out.

[Samillion]

[Samillion]

This is the auto-profile I'll be using for image viewer mode: (personal use)

[Image-View]
    profile-cond=p['current-tracks/video'] and p['current-tracks/video'].image and not p['current-tracks/video'].albumart
    osd-playing-msg=${media-title} [${?width:${width}x${height}}]
    reset-on-next-file=video-zoom,panscan,video-unscaled
    prefetch-playlist=yes
    script-opts-append=modernz-title=${media-title} [${?width:${width}x${height}}]
    script-opts-append=modernz-titlefontsize=24
    script-opts-append=modernz-showwindowtitle=no
    script-opts-append=modernz-showplaylist=yes
    script-opts-append=modernz-downloadbutton=yes
    script-opts-append=modernz-fade_alpha=100
    script-opts-append=modernz-tick_delay=0.03

I'll include it in the docs later as an example, so that users know how to adjust both general mpv options and ModernZ specific options.

How should I add the zoom in/out button?

• Two buttons, one for in one for out?
• One button with multi-function?

[Samillion]

I'll merge, then I'll open an issue to discuss further elements for image viewer mode. To keep things organized between PRs.