Text scrolling for dynamic text

[maaso]

Hi,

I'm attempting to use Bubble card to visualize the currently playing song on my Sonos players. I use a Button card set to text mode, with by default an empty text, which I dynamically upadate with the following custom template:

${card.querySelector('.bubble-name').innerText = hass.states['media_player.dlna'].attributes.media_title === 'None' ? '' : hass.states['media_player.dlna'].attributes.media_title}

This works very well, unless there is a very long song title or artist name:

As you can see the artist name gets cut off and doesn't scroll.

I'm assuming this is because the detection on whether the text should scroll or not is not retriggered when the text is updated by the custom template. Is there any way to trigger it manually?

I realize that this is a bit of niche use case, so if this is not possible I'm fine with that :)

[Clooos]

Hi! I'm already aware of this but thank you for opening an issue, this will helps me to not forget about it 😁

I've already tried to fix it in the past, this one is a bit tricky and I will probably try again at some point.

[StaleLoafOfBread]

Make your name SCROLLING_TEXT_TO_REPLACE then give this style a shot:

${(() => {
    const bubbleNameContainer = card.querySelector('.bubble-name.name .scrolling-container span');
    if (bubbleNameContainer) {
        bubbleNameContainer.innerHTML = bubbleNameContainer.innerHTML.replace(/SCROLLING_TEXT_TO_REPLACE/g, 'New Text');
    }
})()}

Important to note that the original name must be long enough to induce a scroll for this to work. Could adapt the code to add all the scrolling divs for you but I figure this way is more future proof in case how scrolling is handled changes in the future.

Also, if the new text isn't long enough, it doesn't quite look right. So this solution is certainly not perfect but it might be good enough for your specific issue or at least a good starting point.

Tested on v2.3.4-beta.1