rrweb-player Issues

Today I have a ton of time and I'll tackle the session UI.

I spent literally the whole day - 6 hours - trying to get the rrweb-player to resize properly. Never thought this would be such a big deal. Why wouldn't they make it fit the parent instead of having hardcoded pixel sizes? And why isn't this very obvious use case documented? Absolutely baffled.

I tried so many approaches, and in the end managed to get... something working. It's far from ideal but lets me move on from this horrible experience and do something else.

I'm replacing the hardcoded player pixel width with viewport width in a react hook. Then I'm using css scale to resize the actual recording. To calculate the scale, I need the parent width and the frame width. I hardcoded the frame width to 1920 but this will break the replays for mobile. I should be getting the actual max width of the replay and setting that, but I can't look at this shit anymore, so It's going to have to be good enough for now.

useEffect(() => {
    document.querySelector('.rr-player')?.setAttribute('style', 'width:60vw; height:45vw;');
    document.querySelector('.rr-player__frame')?.setAttribute('style', 'width:60vw;height:45vw;');
    document
      .querySelector('.replayer-wrapper')
      ?.setAttribute('style', `transform: scale(${width / frameWidth}) translate(-50%,-50%);`);
  }, [width]);

  useEffect(() => {
    const handleResize = () => {
      const w = document.getElementById('player-root').getBoundingClientRect().width;
      setWidth(w);
    };

    window.addEventListener('resize', handleResize);
    return () => window.removeEventListener('resize', handleResize);
  }, []);

I also had to copy the css they provide (horrible stuff, random svelte classes) and reference it manually to remove the ugly shadow.

That leaves me with this:

The resizing isn't really correct if you open the sidebar.

I have another issue. Seems like I'm somehow not destroying the old players, even though I'm calling the provided destroy method, and every instance is generating hundreds or thousands of errors per second.

Waited all week just to spend the whole day to achieve nothing. Pretty fucking pissed off.

Alright, took a break, recharged, then tried a different approach. I went to the svelte player source code and used Claude to rewrite it for react. Some tweaks here and there, and after 90 minutes I have a fully responsive and fast player. Not many errors in the console. Seems like the bitch fit was unwarranted.

The biggest technical takeaway I think is that css scale is the best way to resize iframes dynamically.

I still have to implement the controls, but that shouldn't be difficult.

Added some simple controls and I'll leave it at that.