Scroll long track titles

Ask the Community Customization
1

Instead of truncating the track title, make it scroll from right to left, so user can see the entire title of the track

Screenshot 2024-05-15 at 5.56.42 PM
Screenshot 2024-05-15 at 5.56.42 PM1368×539 36.5 KB

1 Like
3

Hi @Raymond_Wade :wave:

I’ve discussed your case with the devs and they’ll try to customize the widget for you.

I’ll let you know once I receive a response from them :slightly_smiling_face:

4

Thank you for waiting @Raymond_Wade!

Our devs suggested adding a scrolling animation for the titles in your widget.

Here are 2 variants:



Could you please let me know if you like these animations? If yes, which one would you prefer to implement to your widget?

5

I prefer the bottom where it starts on the left side. That way the user will see the title on load and not have to wait for it to scroll across.

1 Like
6

Got it!

I’ve shared your feedback with the devs and will get back to you once the solution is provided :slightly_smiling_face:

1 Like
7

Thank you, I appreciate it. If they can add or allow a toggle option to loop the scrolling indefinitely, that would be an awesome bonus :wink: :grin:

1 Like
8

Okay! I’ve shared this addition as well. Hopefully, our devs will find a way to loop the animation :slightly_smiling_face:

9

Thank you for waiting @Raymond_Wade :wave:

Please add this code to the Custom CSS field on the Style tab of your widget’s settings:

[class*="Small__Title"] {
  width: fit-content;
  white-space: nowrap;
  text-overflow: initial;
}

And this script should be added to the Custom JS field:


const duration = 6000;

let animation = null;
const animate = () => {
    setTimeout(() => {
        animation?.cancel();

        const title = document.querySelector('[class*="Small__Title-sc"]');
        const titleWidth = Math.floor(title.getBoundingClientRect().width);
        const parent = document.querySelector('[class*="Small__Info-sc"]');
        const parentWidth = Math.floor(parent.getBoundingClientRect().width);
        if (titleWidth > parentWidth) {
            animation = title.animate({
                    transform: ['translateX(0px)', 'translateX(0px)', `translateX(-${titleWidth - parentWidth}px)`, `translateX(-${titleWidth - parentWidth}px)`],
                    offset: [0, 0.1, 0.8],
                },
                {
                    iterations: Infinity,
                    duration: duration,
                    delay: 1000,
                });
        }
    }, 100);
};

const waitForElement = (selector, root = document) => new Promise(res => {
    let i = 0;

    const check = () => {
        const component = root.querySelector(selector);

        if (component) {
            res(component);
        } else if (i !== 50) {
            setTimeout(check, 100);
            i++;
        }
    };

    check();
});

waitForElement("[class*='Small__Title-sc']")
    .then(() => {
        animate();
        const button = document.querySelector('[class*="Prev__Component-sc"]');
        button.addEventListener('click', () => {
            animate();
        });
        const next = document.querySelector('[class*="Next__Component-sc"]');
        next.addEventListener('click', () => {
            animate();
        });
        const tracks = document.querySelectorAll('[class*="PlaylistItem__PlaylistItemComponent-sc"]');
        tracks.forEach((el) => {
            el.addEventListener('click', () => {
                animate();
            });
        });
    });

Please check it and let me know if you like the result :wink: