Support UI on mobile form factor

[Josua-SR]

Bug/Feature description

Cozy does not fully scale to contemporary smartphone display sizes, making UI elements either appear out of place and hard to interact, or located beyond the edges of the screen.

Feature Request: Make it so that Cozy UI can scale to those extreme non-desktop aspect ratios.

Steps to reproduce

Execute on a mobile device, or narrow portrait display, e.g. Pinephone ...

Operating System: Linux (any)

[bilelmoussaoui]

I think a good start would be moving the player widgets from the headerbar as it's very crowded and move the switcher of the different three views there instead. While moving the rest of the player widgets to an "action bar"

[geigi]

Thanks for reporting :) This is something I do have on the roadmap but there is some stuff I want to implement first (finalize m4b support).

I also plan to refine the three sections (author, reader, recent) and add more options and maybe remove the reader option.

My first idea was to implement it similar to Lollypop where the media player is in the titlebar in desktop size but moves to the bottom in a separate action bar on smaller sizes. Although I do agree that Cozy's titlebar does look a little bit crowded due to having more options (sleep timer, ...). In both cases a action bar needs to be created so both options can be easily tested :)

[bugaevc]

Please also take a look at how GNOME Music and Podcasts deal with this — they put player controls on the bottom, full-width, and use the headerbar for navigation instead.

[bertob]

My first idea was to implement it similar to Lollypop where the media player is in the titlebar in desktop size but moves to the bottom in a separate action bar on smaller sizes.

FWIW I don't think Lollypop is a good example to follow here, it would also be much nicer if it moved the playback controls to the bottom :)

[thibaultamartin]

@geigi additionnally, if you're unsure how to do something with libhandy you can join the #libhandy:gnome.org Matrix room to ask for a bit of help. The maintainers are very knowledgeable and helpful :)

[geigi]

Thanks for your input :) What are the main advantages to put the controls in a separate action bar from your point of view? Maybe there are some points that I'm missing.

@thibaultamartin thanks for the hint! I've already looked a bit into it but for more advanced stuff this will be helpful :)

[bertob]

What are the main advantages to put the controls in a separate action bar

Structurally audio player apps (including music, podcast, or similar apps) usually consist of two separate areas: The library and the player. A clean split between the two areas makes the UI cleaner and easier to understand. For example, it allows keeping the regular stack navigation for the library and having an overlay bottom sheet for the playback screen.

There are also a number of practical advantages, such as more space for controls (the current headerbar is pretty crowded) and better ergonomics on mobile.

[trymeouteh]

I would like to see Cozy support for linux mobile devices like linux phones and tablets

[TheOPtimal]

Lollypop has the player in the headerbar while in desktop mode, but then moves it to the bottom in mobile mode. It works very well.

[archisman-panigrahi]

I can successfully use Cozy in my Android phone running Ubuntu 20.04 base image in Termux. While the landscape mode works, it would be great to be able to use Cozy in portrait mode (it cannot be scaled to portrait mode right now).

[archisman-panigrahi]

This has been partially implemented in version 1.1.0. Can anyone with a mobile device test it natively?

It works with Ubuntu on my Android phone.

[Josua-SR]

\o/ Thank you for the heads-up - from your picture that looks quite nice!

So I have tried the flatpak version on my pinephone (manjaro plasma mobile). Observations:

1. welcome page

   • in landscape mode seems fine, logo is fully centered on screen - "Welcome!" and its subtitle is only visible by scrolling, blue continue button at the upper right visible and clickable
   • in portrait mode off-center - right part cut off. On screen is visible the logo, the welcome message, but not the blue continue-button at the top. The screen cuts off to the right at the end of "let's get cozy." - exactly before the dot.

2. User feedback settings page: same as welcome page

3. Main UI: First thing I see is an Import your Audiobooks Dialogue. Looks fine in portrait and landscape :) I can see all user interface elements also, looking nice imo!

At this point I have not imported any audio files into my library yet.

4. switching between "Recent", "Author" and "Reader" does not work. By default I start with "Recent" highlighted (darker grey). Touching Actor or Reader shows the Import Audiobooks dialogue for part of a second, then the largest UI area between the top menu bar and the playback controls near the bottom is jsut empty grey. Recent is still highlighted.

5. The menu under the 3 horizontal bars button upper right does not appear to work. I touch it once, and small menu pops up. But on that touching Preferences, Help, About, ... has no effect but for closing of the menu.

Perhaps I will try later tonight with some actual audio files added ;)

[geigi]

Thanks for both of your feedback! This helps a lot :) maybe the dialogs (settings, about) need some extra work to open in a mobile environment. I haven't touched those yet and focused on the main window.

[geigi]

Most of your observations should be fixed in the next release :) About the menu items I'm not really sure why it isn't working. Help should open the GitHub issues website. I've also started to implement a new preference window which should work on mobile.

[archisman-panigrahi]

Right now the "seek bar" vanishes when the window size is small. It would be convenient to still have the seek bar. How about a seek bar at a position like this? There is a lot of vertical space, and taking some more vertical space would not be a problem.

[mikeshenson]

1) NICE APP! Thank you!

Could add the buttons in red? (they do not have to be red) I like the slider, but it is hard on my PinePhone.

Phone: PinePhone OE: Arch Linux Arm GUI: Phosh Cozy: 1.1.2

[mikeshenson]

On the Author and Reader tabs, can you make the books smaller as the window gets smaller?

Phone: PinePhone OE: Arch Linux Arm GUI: Phosh Cozy: 1.1.2

[geigi]

Thanks for your feedback guys :) @apandada1 This is definitely something I want to add in the future. I'm also thinking about a full mobile player page like most mobile players do have. @mikeshenson The sleep timer needs an overhaul and there is already an issue open: #383 so this will be something for the future :)

Regarding your second issue: I don't know if there is a way to make the album art automatically resize in a responsive manner. But in your something is a bit off. It should look more like this:

Do you always have the author/reader selection at the left and the albums at the right? On mobile it should be separate pages.

[michaelnew]

The menu under the 3 horizontal bars button upper right does not appear to work. I touch it once, and small menu pops up. But on that touching Preferences, Help, About, ... has no effect but for closing of the menu.

Two things that are interesting about this:

1. The menu works fine if you plug in a mouse and use that rather than using touch input
2. The same thing happens when using the menu for foliate

So maybe it's a GTK bug?

EDIT: actually, it looks like it's this upstream bug. Hopefully it gets fixed soon.