Implement a 10 foot display mode

[OonihiloO]

From the users feedback, the display of the APP on TV is not great: texts are too small to be easily readable.

As a 10 foot client, is, form a browser point of view, just another desktop (media queries won't help), and that the concept of display mode has been introduced (to support the compact and the wide mode at first), this seem to be the easy way to go.

As a roon-web-stack user, I want to have a readable and nice display on TV, with an easy setup. As a roon-web-stack maintainer, I want to ensure that display mode versatility scalable, as it's one of the core motivation for this project.

[arthursoares]

First of kudos on the initiative. I'm interested in contributing to the project, as a product manager with limited coding experience.

Do you have some references or inspiration for the 100ft mode? I agree with you that it is a big difference to the regular view in other devices. A TV interface tends to be a lot more passive than interactive.

[OonihiloO]

Hi @arthursoares, thanks for your interest. I'm right now not that available for this project, but, this feature could be a quick win too. My main concern is I don't own any TV... so prototyping and such is not the easiest. What I had in mind:

• Bigger fonts, everywhere, to make them readable at a distance
• Bigger action buttons (maybe even more than what was linked to the font size increase)
• What is now the compact layout as a base
• No display of the zone queue (to make room for bigger track info) and reuse of the queue display in modal, as on mobile, via an action button

As the aspect ratio is known and fixed for these displays, the impact on the various size adjustments could be dealt properly. My main interrogation is regarding content browsing, but maybe just increasing the font size there too could do the trick, at the cost of less content displayed on screen.

Another unknown part is the behaviour of the remote control. It should be more coherent now, but, once again, not tested.

What's on your mind regarding this feature?

[OonihiloO]

Hi @arthursoares, sorry for the long time without news, I've been focused on other stuffs. Even if I've been silent for the last months, I've found time to both prepare the application and start working on a 10ft layout. The first version is almost ready (it's actually more ambitious that what I had in mind in my previous comment), and I'd like to know if you would be interested in beta-testing it and iterating on it as you were offering it. Regards

[arthursoares]

@OonihiloO That would be great. Let me know how I can collaborate :)

[OonihiloO]

@arthursoares: I release a beta tag on docker to test stuff at home, from the raspberry pi that I use to deploy the app. So if you pull nihiluxorg/roon-web-stack:beta from 'docker hub', you'll have access to this beta version. If all that doesn't overlap what you call your limited coding experience, let me know I'll be glad to guide you through these steps.

The actual state of this beta is very rough and experimental, but it's useable and feedbacks are welcome, especially as I don't have a TV to test my assumption on interface and navigation.

You'll have access to another feature in this beta: the ability to record custom actions (create your own shortcuts, like the Radios or Artists, etc.). These are saved on the backend and can be selected as action in any client (for instance: create your actions on desktop, use them on mobile or on the TV). Feedbacks on this feature are welcome too.

[arthursoares]

@OonihiloO I quickly tested running the docker image with the beta tag, but it failed to run on my system (x86/64)

standard_init_linux.go:230: exec user process caused: exec format error

If you want to point to a sha, I can also build and run locally :)

[OonihiloO]

@arthursoares my bad! I just have arm64 computers around and forgot to locally build and push a x86/64 image. I've pushed a freshly built but untested x86/64 image under the beta tag, let me know if you still face issues to run it.

[OonihiloO]

@arthursoares: no news, good news? I'm not regularly working on this project, so I've decided to wait for your feedbacks before moving forward. Wish you the very best.

[OonihiloO]

Hey @arthursoares, as it might take time to have a good 10 Feet layout implemented, I'm thinking about releasing the v0.0.8 without it. To prepare this eventuality, I've created a new tag beta-10-feet that will have the WIP regarding this new layout. The beta tag will have just all other changes (it's actually a local build of main). The new images under these tags have been updated, so switch to beta-10-feet to test this new layout.

[arthursoares]

@OonihiloO hello! Sorry for the absence, I'm preparing for a month holiday, and was caught up with some work handover! I look forward to test it on Sunday when I'm back in Berlin.

[OonihiloO]

@OonihiloO hello! Sorry for the absence, I'm preparing for a month holiday, and was caught up with some work handover! I look forward to test it on Sunday when I'm back in Berlin.

No prob! Neither of us is paid, so this is a full async collaboration! Life goes first, this must stay a " I'm doing this for fun project". By the way, once again, that you for your proposition to help That's also why I want to put this feature out of the release train for now, like that, no pressure :-) Enjoy your holiday, I'll be happy to read you when that will be a good time on your side.

[arthursoares]

Hello @OonihiloO, I finally came back from holidays and spent some time getting my personal machine back with a development workspace. I've managed to build and run locally the latest at main. Is there a specific behavior to trigger the 10ft Display Mode? Are you filtering by resolution or WebAgent? This is where I'm currently at.

[OonihiloO]

Hello @arthursoares, I hope your holidays went smooth and you're fully rested. I haven't published the branch on GitHub yet, but I release a docker image (that is still very WIP). I've realized that providing a good navigation experience might be a lot of work, so I've backported the code needed to prepare this feature in main, waiting to see if properly doing this is faisable. If you want to try this beta, you must pull the tag beta-10-feet:

docker pull nihiluxorg/roon-web-stack:beta-10-feet

Also, following your comment, I've had a quick look on user-agent detection: it might be a strange rabbit hole (with a lot of missing cases). For now, you'll have to go through the settings and select the 10 Feet display mode there. I hope it's not to cumbersome, wish you the very best.

[arthursoares]

Hi @OonihiloO,

First off, I wanted to thank you for sharing this project and for all the hard work you've put into it. I finally had the chance to fully explore it, and I must say, my initial impressions are very positive. The feature looks and works amazingly well, especially for a beta version. I didn't encounter any bugs during my use (though I wasn't specifically testing for them), so kudos on a solid build!

I wanted to share some general thoughts and suggestions based on my use case, which might be useful as you continue development:

My Use Case:

I'm using the software on a Raspberry Pi (or iPad) connected to a display with an external DAC. My setup is quite simple—I primarily use it as a display to monitor what's currently playing (Album Art + Track / Artist information).

General Feedback:

Display Format:

Since I'm using a 16:9 or 16:10 display, I noticed that this format doesn't make the best use of the square album artwork. Adding some space or padding around the main frame could improve the visual experience.

A design approach similar to Apple Music on Apple TV could be inspiring. They use a blurred background gradient derived from the album art, which looks aesthetically pleasing and enhances the overall visual experience.

Track Meta Display:

I found the superimposition of the track metadata (Title + Artist) over the album art a bit distracting. Depending on the track, this can cover a significant portion of the artwork. Perhaps dedicating a separate space for this information, rather than overlaying it on the album art, could make for a cleaner and more user-friendly design.

Visual References:

I'll add a couple of images to illustrate what I mean more clearly. I hope these can be helpful for future design tweaks.

Thank you for your efforts on this project. I'm excited to see how it evolves and would be happy to continue providing feedback if that would be useful.

• https://www.apple.com/newsroom/images/product/apple-music/Apple-Music-Sing-hero_big.jpg.large.jpg
• https://www.reddit.com/media?url=https://preview.redd.it/tvos-16-2-new-apple-music-now-playing-interface-v0-8t1xz4ukwk4a1.jpg?width%3D1080%26crop%3Dsmart%26auto%3Dwebp%26s%3D8d3a9ddf45cde118868d5975b02c6b6c022f4e5d
• https://www.reddit.com/media?url=https://preview.redd.it/tvos-16-2-new-apple-music-now-playing-interface-v0-i8zw35ukwk4a1.jpg?width%3D4032%26format%3Dpjpg%26auto%3Dwebp%26s%3D44cbebaddb814516457f5400b65b09d38d755387

[OonihiloO]

hi @arthursoares, thanks for your feedbacks! Regarding the usage of gradient background, I've had a quick look and there's no trivial and effective solution to do that in web. So whereas I agree it would look smooth, I'm not planning to spend time on this (at least for now). I'm right now (very sparely) looking at enhancing navigation through remote and keyboard (and spatial navigation is not that easy to do properly). I think this is a must have for a proper implementation for the big TV screen. I might implement first a minimal layout that would reuse some graphical ideas tested in this beta. It could be a good answer to your use case. I keep in mind your comment on reorganizing the information. My first goal has always been to display the largest cover possible, but, as you say, the overlay with the track info is also distractive or eating the cover... not that ideal. I'll let you know when I'd made some changes on this beta, if you'd like to have a look.

[arthursoares]

@OonihiloO I've been using the 10ft mode over the last days in my setup, and it has been a great addition. I replaced the RPi case that had a Display and was running Roopie for another distro in which I could run the Raspberry with an external display.

Do you plan on making the 10ft display available on the repo for further customizations? I'm looking forward to make some tweaking and experiments with it.

[OonihiloO]

Hi @arthursoares, happy to see you happily using this layout. I wanted to first implement a functional spatial navigation before releasing this feature. The goal is to deliver this layout with a decent user experience through a TV remote. I've iterated a few solutions, but none I've been good enough. I'm also starting a new job, so I don't have that much time for this project. I'm gonna push the branch though, to let you play with it.

[OonihiloO]

Here it is: https://github.com/nihilux-org/roon-web-stack/tree/feat/10-feet-layout