fix(replays): pause replay on visibilitychange hidden (#36009)

### Changes
- Adds a document 'visibilitychange' event listener to pause playback when `document.visibilityState !== 'visible'`

### Notes
RRWeb events don't seem register until visibility state comes back to the page. So a lot of the player logic seems to sort of fall apart when that happens. I think simply pausing it is probably the best bet. I tested some of the example players on the RRWeb website and it looks like they do the same.

#35512 is similar but could possibly be a different bug. I haven't been able to reproduce it since the tooltip mentioned in the ticket is no longer part of the breadcrumb item UI.

Closes #35912

static/app/components/replays/replayContext.tsx

@@ -292,9 +292,20 @@ export function Provider({children, replay, initialTimeOffset = 0, value = {}}:
   );
 
   useEffect(() => {
+    const handleVisibilityChange = () => {
+      if (document.visibilityState !== 'visible') {
+        replayerRef.current?.pause();
+      }
+    };
+
     if (replayerRef.current && events) {
       initRoot(replayerRef.current.wrapper.parentElement as RootElem);
+      document.addEventListener('visibilitychange', handleVisibilityChange);
     }
+
+    return () => {
+      document.removeEventListener('visibilitychange', handleVisibilityChange);
+    };
   }, [initRoot, events]);
 
   const getCurrentTime = useCallback(