getsentry
[Replay Details] Implement support for visualizing 'gaps' in the replay timeline
Per figma: https://www.figma.com/design/LC8Uhws6ruiNYUkObfqcjv/Specs%3A-Segment-Gaps-in-Mobile-Replay?node-id=0-1&t=9GoyanWjtcULZMIX-0
There might be cases where the 'gap' still has events inside it. Therefore the gap should be rendered behind all other content, including the 'ticks' within the timeline.
Initially the gap should be merged with support for mobile background & foreground events. But it should be applicable to use web focus & blur events just as easily, we can decide on that later.
### Tasks
- [x] Create gaps in timeline
- [x] Add in tooltip
- [x] Implement gap in segments visualization
- [ ] Refactor tooltip to look like designs (tooltip with time is on top of the timeline + scrubber & hovering on scrubber has same behaviour as timeline))
- [x] [BUG] zooming timeline breaks in https://sentry-sdks.sentry.io/replays/2298b9c818db427cae385baf7945dc5b/?project=5428559&project=5428557&project=5428561&query=&referrer=%2Freplays%2F&statsPeriod=14d&yAxis=count%28%29
Gaps are currently available for Sentry for dogfooding, and it's based on timestamps of frame breadcrumbs (https://github.com/getsentry/sentry/pull/74406). We'll still look at adding support for gaps when segments are missing.
Timeline gaps are based on video events as of https://github.com/getsentry/sentry/pull/79274. Currently all gaps are visible on the timeline for the SDK team to see how often there's gaps in the video. Before releasing this feature, this would need to be revisited to ensure that the gaps shown don't cause any confusion (probably by implementing a minimum gap time)
Gaps are looking good in general but we'll verify the dev experience in react native before GA'ing
@ryan953 @c298lee Marking as "super low" effort and "p0" because its done.
