Scrolling text problem when get the title from YouTube

[Sakurasao]

Describe the bug

I get it but for the media provider when it gets the title, and it is only when playing something from youtube and for the browser I am using is edge and it bugs when it detects the total length of

this is the normal one when scroll if the title more than 150px

when i change current video with other or play next video the title got like glitch and turn to false state which normally when i use previous version of zebar 2.6.1 it doesn't like this

but when I try to pause and play the video again the title scrolls back to normal and this problem I only get when playing on youtube
if I play on YouTube music, spotify and everything else is fine, I don't get bugs like this, I don't know this is actually a bug or not but someone please help me out

Reproduction

No response

Stack trace or error logs (if applicable)

Checking scrolling: {isOverflowing: false, isPlaying: undefined}
index-ChazkqJ1.js:40 23:14:43:819 [desktop-events] Incoming provider emission: {configHash: '[{"type":"media"}]', result: {…}}
index-ChazkqJ1.js:40 Checking scrolling: {isOverflowing: true, isPlaying: true}
index-ChazkqJ1.js:40 23:14:44:272 [desktop-events] Incoming provider emission: {configHash: '[{"type":"media"}]', result: {…}}
index-ChazkqJ1.js:40 Checking scrolling: {isOverflowing: false, isPlaying: true}

Version number

Zebar 2.7.0

[lars-berger]

Would you mind double checking if this a regression from 2.6.1? Just checked and we haven't had changes to the media provider since the previous release (changes). Is there a difference in the output from the provider?

[Sakurasao]

i have check and you're right there is nothing change but i got this issue after i update my Zebar to 2.7.0, and i have updated my Vite Zebar to 2.7.0 and check it again if this issue still exists but nothing changes, I still got this bug

  useEffect(() => {
    const { current } = titleRef;
    if (!current) return;
  
    const isOverflowing = current.scrollWidth > current.clientWidth;
    const media = output.media;
    const sessionId = media?.session?.sessionId || '';
    const mediaTitle = media?.session?.title || '';
    const isYouTube = sessionId.includes('youtube.com') || mediaTitle.includes('YouTube');
  
    console.log('Checking scrolling:', { isOverflowing, isPlaying, isYouTube });
  
    if (isYouTube) {
      setIsScrolling(isOverflowing || isPlaying);
    } else {
      setIsScrolling(isOverflowing && isPlaying);
    }
  }, [displayText, isPlaying, mediaTitle]);

and i need to bypass whenever i got session id from YouTube isOverflowing must be true or that issue will always exist
so, I can't make if title i got from YouTube to be dynamic if to long it will scroll and if short doesn't need to scroll
and when i try to debug more further there is glitch when detecting the title, and again this glitch only when i play videos on YouTube, i don't know if i have doing something wrong with my code but i haven't change anything after i update my Zebar for this media part

[Sakurasao]

Function

  const media = output.media;
  const mediaTitle = media?.session?.title || '';
  const mediaArtist = media?.session?.artist || '';

  const isPlaying = useMemo(() => media?.session?.isPlaying, [media?.session?.isPlaying]);

  const displayText = useMemo(() => {
    if (!isPlaying) return 'Peaceful Time...';
    return mediaTitle === '' ? '' : mediaArtist === '' ? mediaTitle : `${mediaTitle} - ${mediaArtist}`;
  }, [mediaTitle, mediaArtist, isPlaying]);

  useEffect(() => {
    const { current } = titleRef;
    if (!current) return;
  
    const isOverflowing = current.scrollWidth > current.clientWidth;
    const media = output.media;
    const sessionId = media?.session?.sessionId || '';
    const mediaTitle = media?.session?.title || '';
    const isYouTube = sessionId.includes('youtube.com') || mediaTitle.includes('YouTube');
  
    console.log('Checking scrolling:', { isOverflowing, isPlaying, isYouTube });
  
    if (isYouTube) {
      setIsScrolling(isOverflowing || isPlaying);
    } else {
      setIsScrolling(isOverflowing && isPlaying);
    }
  }, [displayText, isPlaying, mediaTitle]);

Content

<div style={{ display: 'flex', gap: '0.25rem', alignItems: 'center' }}>
            <i className="nf nf-md-music_note" style={{ fontSize: '12px', marginRight: '1px', paddingTop: '0.3px', rotate: '5deg' }}></i>
            <span style={{ letterSpacing: '2px', marginRight: '2px' }}>:</span>
            <div style={{ position: 'relative', maxWidth: '160px', overflow: 'hidden', maskImage: isScrolling ? 'linear-gradient(to right, transparent, black 1rem, black calc(100% - 1rem), transparent)' : undefined, marginTop: '0.5px', }}>
              <div style={isScrolling ? { display: 'flex', width: 'fit-content', animation: 'marquee 25s linear infinite', gap: '0.25rem', paddingLeft: '0.25rem', } : {}}>
                <p ref={titleRef} style={{ whiteSpace: 'nowrap', margin: 0, letterSpacing: '1px' }}>
                  {displayText.replace(/(- YouTube Music|- YouTube|- Spotify| YouTube Music| YouTube)/g, '')}
                </p>
                {isScrolling ? (
                  <p style={{ whiteSpace: 'nowrap', margin: 0, letterSpacing: '2px' }}>
                    {displayText.replace(/(- YouTube Music|- YouTube|- Spotify| YouTube Music| YouTube)/g, '')}
                  </p>
                ) : null}
              </div>
            </div>
          </div>

css

@keyframes marquee {
  0% {
      transform: translateX(0%);
  }
  100% {
      transform: translateX(-50%);
  }
}