Radio Station names are truncated in Radio Browser in mobile app

[dunxd]

Checklist

• I have updated to the latest available Home Assistant version.
• I have cleared the cache of my browser.
• I have tried a different browser to see if it is related to my browser.

Describe the issue you are experiencing

When viewing the list of radio stations with the mobile app, the names are truncated cutting off everything after the first 9 characters in some cases. This makes it impossible to locate a specific radio station - e.g. BBC has 109 entries in the Radio Browser database starting with "BBC Radio". The icons for the radio station are often not helpful to identify the specific station, so the text needs to be.

I expect this is an issue specific to smaller devices, as the truncation is less of an issue when viewing Home Assistant interface through a desktop browser where there is more width available.

Describe the behavior you expected

It would be better if the entire name was wrapped if necessary rather than truncating away useful information. A list option would be nice, rather than limiting the number of items displayed based on an often empty or info free image. In cases where multiple streams are available for the same station, it would be even more helpful to have some way of displaying additional info to tell the difference between the entries, such as the format, bitrate etc. For example, BBC Radio 6 Music has 6 entries in the Radio Browser database, all named the same, but with different qualities.

Steps to reproduce the issue

1. Install Radio Browser app
2. Browse radio stations from any entry point, such as Media > Radio Browser > United Kingdom
3. Try and locate a specific radio station starting with "BBC Radio"
4. Same issue with radio stations in other countries

What version of Home Assistant Core has the issue?

2023.10.3

What was the last working version of Home Assistant Core?

No response

In which browser are you experiencing the issue with?

Companion App 2023.10.2-full

Which operating system are you using to run this browser?

Android 13

State of relevant entities

No response

Problem-relevant frontend configuration

No response

Javascript errors shown in your browser console/inspector

No response

Additional information

Originally logged at home-assistant/core#101704 where it was suggested I repost it here. Someone suggested it may be an issue with the media browser, and indeed the truncation happens there, so anything other than a short filename with most relevant info at the start of not useful.

[budius]

Reposting my comment here from the original core/issues/101704 to add the info here:

---

Thanks for the nice bug report, I don't develop at home assistant, but as a developer I appreciate.

I came to GitHub to file the same report, so, +1 here, following this and hoping for a fix soon.

The problem is also very noticeable on the German language stations. There are hundreds of them and stations often have multiple streams.

I expect this is an issue specific to smaller devices, as the truncation is less of an issue when viewing Home Assistant interface through a desktop browser where there is more width available.

A correction, this is an issue everywhere! I got a medium/big phone (pixel 7) and also tested on my 15" laptop. On the bigger screen the grid is rendered in a dialog/popup that still truncate the names.

Thanks! Following the thread!

[karwosts]

I propose a grid / list toggle option in #18256.

I'm not much of a CSS designer so I'll leave dealing with the truncation for someone else, but this should help alleviate your difficulties.

[dunxd]

Following the PR in Media Browser (#18256), the suggestion was made that Radio Browser could just default to list view rather than requiring a change in Media Browser to allow users to switch views. How hard is that?

[bramkragten]

@dunxd not hard, the integration provides a media class, based on that type the layout is chosen currently:

https://github.com/home-assistant/core/blob/dev/homeassistant/components/radio_browser/media_source.py#L206-L207

Changing that to something else will change the layout, or maybe we even have to add a new one.

This are the current settings:

frontend/src/data/media-player.ts

Lines 116 to 167 in d2caed2

	export const MediaClassBrowserSettings: {
	[type: string]: MediaClassBrowserSetting;
	} = {
	album: { icon: mdiAlbum, layout: "grid" },
	app: { icon: mdiApplication, layout: "grid" },
	artist: { icon: mdiAccountMusic, layout: "grid", show_list_images: true },
	channel: {
	icon: mdiTelevisionClassic,
	thumbnail_ratio: "portrait",
	layout: "grid",
	},
	composer: {
	icon: mdiAccountMusicOutline,
	layout: "grid",
	show_list_images: true,
	},
	contributing_artist: {
	icon: mdiAccountMusic,
	layout: "grid",
	show_list_images: true,
	},
	directory: { icon: mdiFolder, layout: "grid", show_list_images: true },
	episode: {
	icon: mdiTelevisionClassic,
	layout: "grid",
	thumbnail_ratio: "portrait",
	},
	game: {
	icon: mdiGamepadVariant,
	layout: "grid",
	thumbnail_ratio: "portrait",
	},
	genre: { icon: mdiDramaMasks, layout: "grid", show_list_images: true },
	image: { icon: mdiImage, layout: "grid" },
	movie: { icon: mdiMovie, thumbnail_ratio: "portrait", layout: "grid" },
	music: { icon: mdiMusic },
	playlist: { icon: mdiPlaylistMusic, layout: "grid", show_list_images: true },
	podcast: { icon: mdiPodcast, layout: "grid" },
	season: {
	icon: mdiTelevisionClassic,
	layout: "grid",
	thumbnail_ratio: "portrait",
	},
	track: { icon: mdiFileMusic },
	tv_show: {
	icon: mdiTelevisionClassic,
	layout: "grid",
	thumbnail_ratio: "portrait",
	},
	url: { icon: mdiWeb },
	video: { icon: mdiVideo, layout: "grid" },
	};

With these changes for example:

diff --git a/homeassistant/components/radio_browser/media_source.py b/homeassistant/components/radio_browser/media_source.py
index dffbdc42db..1fcb2b0bad 100644
--- a/homeassistant/components/radio_browser/media_source.py
+++ b/homeassistant/components/radio_browser/media_source.py
@@ -82,12 +82,12 @@ class RadioMediaSource(MediaSource):
         return BrowseMediaSource(
             domain=DOMAIN,
             identifier=None,
-            media_class=MediaClass.CHANNEL,
+            media_class=MediaClass.DIRECTORY,
             media_content_type=MediaType.MUSIC,
             title=self.entry.title,
             can_play=False,
             can_expand=True,
-            children_media_class=MediaClass.DIRECTORY,
+            children_media_class=MediaClass.MUSIC,
             children=[
                 *await self._async_build_popular(radios, item),
                 *await self._async_build_by_tag(radios, item),

You get this:

[budius]

Any updates here?
The changes shown by @bramkragten are perfect. What's the hold up?

[github-actions]

There hasn't been any activity on this issue recently. Due to the high number of incoming GitHub notifications, we have to clean some of the old issues, as many of them have already been resolved with the latest updates.
Please make sure to update to the latest Home Assistant version and check if that solves the issue. Let us know if that works for you by adding a comment 👍
This issue has now been marked as stale and will be closed if no further activity occurs. Thank you for your contributions.