ref(replay): Refactor video-replay related css (#82514)

This moves two bits of mobile-replay video-replay CSS closer to where
it's needed.

first, i moved the `.video-replayer` class down from
[videoReplayerWithInteractions.tsx](https://github.com/getsentry/sentry/compare/ryan953/ref-video-replayer-css?expand=1#diff-fddd507998d34043d72bbf4f1aef9e995a8cfea4ce3903d460102fb8faf815c2)
and into
[videoReplayer.tsx](https://github.com/getsentry/sentry/compare/ryan953/ref-video-replayer-css?expand=1#diff-e351f1b474cf18c091f79bc29e785970cbbb5da2d4a623b5b4e7e9272dfd9670)
with the new name `.video-replayer-wrapper`.

Then i updated the selectors to use sibling selections. So if the video
wrapper exists it'll kick in.

We want the `opacity` rule to kick in no matter the use-case, so that
stays inside styles.tsx. But the absolute positioning is only for the
older `static/app/components/replays/replayPlayer.tsx` and not the newer
`static/app/components/replays/player/replayPlayer.tsx`.

The newer one, when it gets support for video replays, will use
`<Stacked>` instead of `postition:absolute;` like this.

Author: ryan953

static/app/components/replays/player/styles.tsx

@@ -19,6 +19,9 @@ export const baseReplayerCss = css`
     border: none;
     background: white;
   }
+  .video-replayer-wrapper + .replayer-wrapper > iframe {
+    opacity: 0;
+  }
 
   &[data-inspectable='true'] .replayer-wrapper > iframe {
     /* Set pointer-events to make it easier to right-click & inspect */
@@ -111,18 +114,4 @@ export const sentryReplayerCss = (theme: Theme) => css`
       height: 10px;
     }
   }
-
-  /* Correctly positions the canvas for video replays and shows the purple "mousetails" */
-  &.video-replayer {
-    .replayer-wrapper {
-      position: absolute;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
-    }
-    .replayer-wrapper > iframe {
-      opacity: 0;
-    }
-  }
 `;

static/app/components/replays/replayPlayer.tsx

@@ -217,6 +217,14 @@ const SentryPlayerRoot = styled(BasePlayerRoot)`
   ${baseReplayerCss}
   /* Sentry-specific styles for the player */
   ${p => sentryReplayerCss(p.theme)}
+
+  .video-replayer-wrapper + .replayer-wrapper {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+  }
 `;
 
 const Overlay = styled('div')`

static/app/components/replays/videoReplayer.tsx

@@ -90,6 +90,7 @@ export class VideoReplayer {
     this.config = config;
 
     this.wrapper = document.createElement('div');
+    this.wrapper.className = 'video-replayer-wrapper';
     root.appendChild(this.wrapper);
 
     this._trackList = this._attachments.map(({timestamp}, i) => [timestamp, i]);

static/app/components/replays/videoReplayerWithInteractions.tsx

@@ -65,8 +65,6 @@ export class VideoReplayerWithInteractions {
       config: this.config,
     });
 
-    root.classList.add('video-replayer');
-
     const grouped = Object.groupBy(touchEvents, (t: any) => t.data.pointerId);
     Object.values(grouped).forEach(t => {
       if (t?.length !== 2) {