replayPlayer.tsx 9.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316
  1. import {Fragment, useCallback, useEffect, useRef, useState} from 'react';
  2. import styled from '@emotion/styled';
  3. import {useResizeObserver} from '@react-aria/utils';
  4. import NegativeSpaceContainer from 'sentry/components/container/negativeSpaceContainer';
  5. import LoadingIndicator from 'sentry/components/loadingIndicator';
  6. import BufferingOverlay from 'sentry/components/replays/player/bufferingOverlay';
  7. import FastForwardBadge from 'sentry/components/replays/player/fastForwardBadge';
  8. import {useReplayContext} from 'sentry/components/replays/replayContext';
  9. import {trackAnalytics} from 'sentry/utils/analytics';
  10. import useOrganization from 'sentry/utils/useOrganization';
  11. import PlayerDOMAlert from './playerDOMAlert';
  12. type Dimensions = ReturnType<typeof useReplayContext>['dimensions'];
  13. interface Props {
  14. className?: string;
  15. isPreview?: boolean;
  16. overlayContent?: React.ReactNode;
  17. }
  18. function useVideoSizeLogger({
  19. videoDimensions,
  20. windowDimensions,
  21. }: {
  22. videoDimensions: Dimensions;
  23. windowDimensions: Dimensions;
  24. }) {
  25. const organization = useOrganization();
  26. const [didLog, setDidLog] = useState<boolean>(false);
  27. const {analyticsContext} = useReplayContext();
  28. useEffect(() => {
  29. if (didLog || (videoDimensions.width === 0 && videoDimensions.height === 0)) {
  30. return;
  31. }
  32. const aspect_ratio =
  33. videoDimensions.width > videoDimensions.height ? 'landscape' : 'portrait';
  34. const scale = Math.min(
  35. windowDimensions.width / videoDimensions.width,
  36. windowDimensions.height / videoDimensions.height,
  37. 1
  38. );
  39. const scale_bucket = (Math.floor(scale * 10) * 10) as Parameters<
  40. typeof trackAnalytics<'replay.render-player'>
  41. >[1]['scale_bucket'];
  42. trackAnalytics('replay.render-player', {
  43. organization,
  44. aspect_ratio,
  45. context: analyticsContext,
  46. scale_bucket,
  47. });
  48. setDidLog(true);
  49. }, [organization, windowDimensions, videoDimensions, didLog, analyticsContext]);
  50. }
  51. function BasePlayerRoot({className, overlayContent, isPreview = false}: Props) {
  52. const {
  53. dimensions: videoDimensions,
  54. fastForwardSpeed,
  55. setRoot,
  56. isBuffering,
  57. isVideoBuffering,
  58. isFetching,
  59. isFinished,
  60. isVideoReplay,
  61. } = useReplayContext();
  62. const windowEl = useRef<HTMLDivElement>(null);
  63. const viewEl = useRef<HTMLDivElement>(null);
  64. const [windowDimensions, setWindowDimensions] = useState<Dimensions>({
  65. width: 0,
  66. height: 0,
  67. });
  68. useVideoSizeLogger({videoDimensions, windowDimensions});
  69. // Sets the parent element where the player
  70. // instance will use as root (i.e. where it will
  71. // create an iframe)
  72. useEffect(() => {
  73. // XXX: This is smelly, but without the
  74. // dependence on `isFetching` here, will result
  75. // in ReplayContext creating a new Replayer
  76. // instance before events are hydrated. This
  77. // resulted in the `recording(Start/End)Frame`
  78. // as the only two events when we instanciated
  79. // Replayer and the rrweb Replayer requires all
  80. // events to be present when instanciated.
  81. if (!isFetching) {
  82. setRoot(viewEl.current);
  83. }
  84. return () => {
  85. setRoot(null);
  86. };
  87. }, [setRoot, isFetching]);
  88. // Read the initial width & height where the player will be inserted, this is
  89. // so we can shrink the video into the available space.
  90. // If the size of the container changes, we can re-calculate the scaling factor
  91. const updateWindowDimensions = useCallback(
  92. () =>
  93. setWindowDimensions({
  94. width: windowEl.current?.clientWidth || 0,
  95. height: windowEl.current?.clientHeight || 0,
  96. }),
  97. [setWindowDimensions]
  98. );
  99. useResizeObserver({ref: windowEl, onResize: updateWindowDimensions});
  100. // If your browser doesn't have ResizeObserver then set the size once.
  101. useEffect(() => {
  102. if (typeof window.ResizeObserver !== 'undefined') {
  103. return;
  104. }
  105. updateWindowDimensions();
  106. }, [updateWindowDimensions]);
  107. // Update the scale of the view whenever dimensions have changed.
  108. useEffect(() => {
  109. if (viewEl.current) {
  110. const scale = Math.min(
  111. windowDimensions.width / videoDimensions.width,
  112. windowDimensions.height / videoDimensions.height,
  113. 1
  114. );
  115. if (scale) {
  116. viewEl.current.style['transform-origin'] = 'top left';
  117. viewEl.current.style.transform = `scale(${scale})`;
  118. viewEl.current.style.width = `${videoDimensions.width * scale}px`;
  119. viewEl.current.style.height = `${videoDimensions.height * scale}px`;
  120. }
  121. }
  122. }, [windowDimensions, videoDimensions]);
  123. return (
  124. <Fragment>
  125. {isFinished && overlayContent && (
  126. <Overlay>
  127. <OverlayInnerWrapper>{overlayContent}</OverlayInnerWrapper>
  128. </Overlay>
  129. )}
  130. <StyledNegativeSpaceContainer ref={windowEl} className="sentry-block">
  131. <div ref={viewEl} className={className} />
  132. {fastForwardSpeed ? <PositionedFastForward speed={fastForwardSpeed} /> : null}
  133. {isBuffering || isVideoBuffering ? <PositionedBuffering /> : null}
  134. {isPreview || isVideoReplay ? null : <PlayerDOMAlert />}
  135. {isFetching ? <PositionedLoadingIndicator /> : null}
  136. </StyledNegativeSpaceContainer>
  137. </Fragment>
  138. );
  139. }
  140. const PositionedFastForward = styled(FastForwardBadge)`
  141. position: absolute;
  142. left: 0;
  143. bottom: 0;
  144. `;
  145. const PositionedBuffering = styled(BufferingOverlay)`
  146. position: absolute;
  147. top: 0;
  148. left: 0;
  149. right: 0;
  150. bottom: 0;
  151. `;
  152. const PositionedLoadingIndicator = styled(LoadingIndicator)`
  153. position: absolute;
  154. `;
  155. // Base styles, to make the Replayer instance work
  156. const PlayerRoot = styled(BasePlayerRoot)`
  157. .replayer-wrapper {
  158. user-select: none;
  159. }
  160. .replayer-wrapper > .replayer-mouse {
  161. pointer-events: none;
  162. }
  163. .replayer-wrapper > .replayer-mouse-tail {
  164. position: absolute;
  165. pointer-events: none;
  166. }
  167. /* Override default user-agent styles */
  168. .replayer-wrapper > iframe {
  169. border: none;
  170. background: white;
  171. /* Set pointer-events to make it easier to right-click & inspect */
  172. pointer-events: initial !important;
  173. }
  174. `;
  175. // Sentry-specific styles for the player.
  176. // The elements we have to work with are:
  177. // ```css
  178. // div.replayer-wrapper {}
  179. // div.replayer-wrapper > div.replayer-mouse {}
  180. // div.replayer-wrapper > canvas.replayer-mouse-tail {}
  181. // div.replayer-wrapper > iframe {}
  182. // ```
  183. // The mouse-tail is also configured for color/size in `app/components/replays/replayContext.tsx`
  184. const SentryPlayerRoot = styled(PlayerRoot)`
  185. .replayer-mouse {
  186. position: absolute;
  187. width: 32px;
  188. height: 32px;
  189. transition:
  190. left 0.05s linear,
  191. top 0.05s linear;
  192. background-size: contain;
  193. background-repeat: no-repeat;
  194. background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iMTkiIHZpZXdCb3g9IjAgMCAxMiAxOSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTAgMTZWMEwxMS42IDExLjZINC44TDQuNCAxMS43TDAgMTZaIiBmaWxsPSJ3aGl0ZSIvPgo8cGF0aCBkPSJNOS4xIDE2LjdMNS41IDE4LjJMMC43OTk5OTkgNy4xTDQuNSA1LjZMOS4xIDE2LjdaIiBmaWxsPSJ3aGl0ZSIvPgo8cGF0aCBkPSJNNC42NzQ1MSA4LjYxODUxTDIuODMwMzEgOS4zOTI3MUw1LjkyNzExIDE2Ljc2OTVMNy43NzEzMSAxNS45OTUzTDQuNjc0NTEgOC42MTg1MVoiIGZpbGw9ImJsYWNrIi8+CjxwYXRoIGQ9Ik0xIDIuNFYxMy42TDQgMTAuN0w0LjQgMTAuNkg5LjJMMSAyLjRaIiBmaWxsPSJibGFjayIvPgo8L3N2Zz4K');
  195. border-color: transparent;
  196. }
  197. .replayer-mouse:after {
  198. content: '';
  199. display: inline-block;
  200. width: 32px;
  201. height: 32px;
  202. background: ${p => p.theme.purple300};
  203. border-radius: 100%;
  204. transform: translate(-50%, -50%);
  205. opacity: 0.3;
  206. }
  207. .replayer-mouse.active:after {
  208. animation: click 0.2s ease-in-out 1;
  209. }
  210. .replayer-mouse.touch-device {
  211. background-image: none;
  212. width: 70px;
  213. height: 70px;
  214. border-radius: 100%;
  215. margin-left: -37px;
  216. margin-top: -37px;
  217. border: 4px solid rgba(73, 80, 246, 0);
  218. transition:
  219. left 0s linear,
  220. top 0s linear,
  221. border-color 0.2s ease-in-out;
  222. }
  223. .replayer-mouse.touch-device.touch-active {
  224. border-color: ${p => p.theme.purple200};
  225. transition:
  226. left 0.25s linear,
  227. top 0.25s linear,
  228. border-color 0.2s ease-in-out;
  229. }
  230. .replayer-mouse.touch-device:after {
  231. opacity: 0;
  232. }
  233. .replayer-mouse.touch-device.active:after {
  234. animation: touch-click 0.2s ease-in-out 1;
  235. }
  236. @keyframes click {
  237. 0% {
  238. opacity: 0.3;
  239. width: 20px;
  240. height: 20px;
  241. }
  242. 50% {
  243. opacity: 0.5;
  244. width: 10px;
  245. height: 10px;
  246. }
  247. }
  248. @keyframes touch-click {
  249. 0% {
  250. opacity: 0;
  251. width: 20px;
  252. height: 20px;
  253. }
  254. 50% {
  255. opacity: 0.5;
  256. width: 10px;
  257. height: 10px;
  258. }
  259. }
  260. `;
  261. const Overlay = styled('div')`
  262. position: absolute;
  263. top: 0;
  264. left: 0;
  265. right: 0;
  266. bottom: 0;
  267. background-color: rgba(0, 0, 0, 0.5);
  268. z-index: 1;
  269. `;
  270. const OverlayInnerWrapper = styled('div')`
  271. position: absolute;
  272. top: 50%;
  273. left: 50%;
  274. transform: translate(-50%, -50%);
  275. color: white;
  276. display: flex;
  277. justify-content: center;
  278. flex-direction: column;
  279. align-items: center;
  280. gap: 9px;
  281. `;
  282. const StyledNegativeSpaceContainer = styled(NegativeSpaceContainer)`
  283. position: relative;
  284. width: 100%;
  285. height: 100%;
  286. `;
  287. export default SentryPlayerRoot;