feat(ui): Upgrade `rrweb-player` and fix mouse on replays (#32494)

The mouse did not have any styles and was not showing up on replays.

package.json

@@ -129,7 +129,7 @@
     "react-virtualized": "^9.22.3",
     "reflux": "0.4.1",
     "regenerator-runtime": "^0.13.3",
-    "rrweb-player": "^0.7.6",
+    "rrweb-player": "^0.7.13",
     "scroll-to-element": "^2.0.0",
     "sprintf-js": "1.0.3",
     "style-loader": "^3.0.0",

static/app/components/events/rrwebReplayer/index.tsx

@@ -5,6 +5,80 @@ import space from 'sentry/styles/space';
 import BaseRRWebReplayer from './rrWebReplayer';
 
 const RRWebReplayer = styled(BaseRRWebReplayer)`
+  .replayer-mouse {
+    position: absolute;
+    width: 32px;
+    height: 32px;
+    transition: left 0.05s linear, top 0.05s linear;
+    background-size: contain;
+    background-repeat: no-repeat;
+    background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iMTkiIHZpZXdCb3g9IjAgMCAxMiAxOSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTAgMTZWMEwxMS42IDExLjZINC44TDQuNCAxMS43TDAgMTZaIiBmaWxsPSJ3aGl0ZSIvPgo8cGF0aCBkPSJNOS4xIDE2LjdMNS41IDE4LjJMMC43OTk5OTkgNy4xTDQuNSA1LjZMOS4xIDE2LjdaIiBmaWxsPSJ3aGl0ZSIvPgo8cGF0aCBkPSJNNC42NzQ1MSA4LjYxODUxTDIuODMwMzEgOS4zOTI3MUw1LjkyNzExIDE2Ljc2OTVMNy43NzEzMSAxNS45OTUzTDQuNjc0NTEgOC42MTg1MVoiIGZpbGw9ImJsYWNrIi8+CjxwYXRoIGQ9Ik0xIDIuNFYxMy42TDQgMTAuN0w0LjQgMTAuNkg5LjJMMSAyLjRaIiBmaWxsPSJibGFjayIvPgo8L3N2Zz4K');
+    border-color: transparent;
+  }
+  .replayer-mouse:after {
+    content: '';
+    display: inline-block;
+    width: 32px;
+    height: 32px;
+    background: ${p => p.theme.purple300};
+    border-radius: 100%;
+    transform: translate(-50%, -50%);
+    opacity: 0.3;
+  }
+  .replayer-mouse.active:after {
+    animation: click 0.2s ease-in-out 1;
+  }
+  .replayer-mouse.touch-device {
+    background-image: none;
+    width: 70px;
+    height: 70px;
+    border-radius: 100%;
+    margin-left: -37px;
+    margin-top: -37px;
+    border: 4px solid rgba(73, 80, 246, 0);
+    transition: left 0s linear, top 0s linear, border-color 0.2s ease-in-out;
+  }
+  .replayer-mouse.touch-device.touch-active {
+    border-color: ${p => p.theme.purple200};
+    transition: left 0.25s linear, top 0.25s linear, border-color 0.2s ease-in-out;
+  }
+  .replayer-mouse.touch-device:after {
+    opacity: 0;
+  }
+  .replayer-mouse.touch-device.active:after {
+    animation: touch-click 0.2s ease-in-out 1;
+  }
+  .replayer-mouse-tail {
+    position: absolute;
+    pointer-events: none;
+  }
+  @keyframes click {
+    0% {
+      opacity: 0.3;
+      width: 20px;
+      height: 20px;
+    }
+    50% {
+      opacity: 0.5;
+      width: 10px;
+      height: 10px;
+    }
+  }
+  @keyframes touch-click {
+    0% {
+      opacity: 0;
+      width: 20px;
+      height: 20px;
+    }
+    50% {
+      opacity: 0.5;
+      width: 10px;
+      height: 10px;
+    }
+  }
+  .replayer-wrapper > iframe {
+    border: none;
+  }
   .rr-player {
     width: auto !important;
     height: auto !important;

yarn.lock

@@ -4070,10 +4070,10 @@
   dependencies:
     "@types/node" "*"
 
-"@types/css-font-loading-module@0.0.4":
-  version "0.0.4"
-  resolved "https://registry.yarnpkg.com/@types/css-font-loading-module/-/css-font-loading-module-0.0.4.tgz#94a835e27d1af444c65cba88523533c174463d64"
-  integrity sha512-ENdXf7MW4m9HeDojB2Ukbi7lYMIuQNBHVf98dbzaiG4EEJREBd6oleVAjrLRCrp7dm6CK1mmdmU9tcgF61acbw==
+"@types/css-font-loading-module@0.0.7":
+  version "0.0.7"
+  resolved "https://registry.yarnpkg.com/@types/css-font-loading-module/-/css-font-loading-module-0.0.7.tgz#2f98ede46acc0975de85c0b7b0ebe06041d24601"
+  integrity sha512-nl09VhutdjINdWyXxHWN/w9zlNCfr60JUqJbd24YXUuCwgeL0TpFSdElCwb6cxfB6ybE19Gjj4g0jsgkXxKv1Q==
 
 "@types/diff@5.0.1":
   version "5.0.1"
@@ -5661,6 +5661,11 @@ balanced-match@^2.0.0:
   resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-2.0.0.tgz#dc70f920d78db8b858535795867bf48f820633d9"
   integrity sha512-1ugUSr8BHXRnK23KfuYS+gVMC3LB8QGH9W1iGtDPsNWoQbgtXSExkBu2aDR4epiGWZOjZsj6lDl/N/AqqTC3UA==
 
+base64-arraybuffer@^1.0.1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/base64-arraybuffer/-/base64-arraybuffer-1.0.2.tgz#1c37589a7c4b0746e34bd1feb951da2df01c1bdc"
+  integrity sha512-I3yl4r9QB5ZRY3XuJVEPfc2XhZO6YweFPI+UovAzn+8/hb3oJ6lnysaFcjVpkCPfVWFUDvoZ8kmVDP7WyRtYtQ==
+
 base64-js@^1.3.1:
   version "1.5.1"
   resolved "https://registry.yarnpkg.com/base64-js/-/base64-js-1.5.1.tgz#1b1b440160a5bf7ad40b650f095963481903930a"
@@ -13878,29 +13883,30 @@ ripemd160@^2.0.0, ripemd160@^2.0.1:
     hash-base "^3.0.0"
     inherits "^2.0.1"
 
-rrweb-player@^0.7.6:
-  version "0.7.6"
-  resolved "https://registry.yarnpkg.com/rrweb-player/-/rrweb-player-0.7.6.tgz#e4dfab8b69a4f7671d68fb31544fdb30fec7338f"
-  integrity sha512-7MeIQpZq6Pv9jBOciMLUS4y93jYHlA+NsZXA2UiXMl5ELGwWHYwrtGl6uaOuItAvGzCUvSBKOH4s6Zn+lnIfYg==
+rrweb-player@^0.7.13:
+  version "0.7.13"
+  resolved "https://registry.yarnpkg.com/rrweb-player/-/rrweb-player-0.7.13.tgz#f78c31568aa2cb673a8e713b86989bda118e25fa"
+  integrity sha512-xdBpUNj0Q4LkYSlhLcOTNbpuCS/7lQon57DVqblZdJyDJl+h3OovvK2D0KWBCVkrnzXibxfWA1cDmRAVU+g3Ww==
   dependencies:
     "@tsconfig/svelte" "^1.0.0"
-    rrweb "^1.0.4"
+    rrweb "^1.1.2"
 
-rrweb-snapshot@^1.1.8:
-  version "1.1.8"
-  resolved "https://registry.yarnpkg.com/rrweb-snapshot/-/rrweb-snapshot-1.1.8.tgz#57c3a8003a6ebbe4a2e2f5be29e30a47a8b1eb03"
-  integrity sha512-wi8T9IVobEwlns7U2m8cbPfoihsNAMpTI+UBe4KUjclU2N+vtowD2U1Rq8PleiFTDvcseHvkQDmEIZoZLXFzwg==
+rrweb-snapshot@^1.1.13:
+  version "1.1.13"
+  resolved "https://registry.yarnpkg.com/rrweb-snapshot/-/rrweb-snapshot-1.1.13.tgz#fc15adb7eb6354c859c8d594f57b09e1f5bccdd8"
+  integrity sha512-lv4vBSJ5orBcRoJnjLvtly6cSsctC+TNm5orVzYRL9SH3LmtSpQ+wI4bw7eh4AcyKoUf0x4pe1Bn632GggmKWQ==
 
-rrweb@^1.0.4:
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/rrweb/-/rrweb-1.0.4.tgz#a63931c4ed5c0dc50c1ee6d1b03abaf18cf529e2"
-  integrity sha512-JMnLF9QWMBwwmtxCUHJ38kjtDALvDfx2JsfiI6nOtj2qWWsSkwPJWfgWk3tSQzy1FD1ZXlFJPERIFjMrSBzn5w==
+rrweb@^1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/rrweb/-/rrweb-1.1.2.tgz#65279c8528dcfff7158bb31ed21323d3f26a741f"
+  integrity sha512-D1r3MdfYshY7rA8lN3R0cXqeY6fTtgHlkLQM4lxkU+TdKi023/hNQz6tvDJbXGX3HWGa4mRAmQs3S2uGho6Nsw==
   dependencies:
-    "@types/css-font-loading-module" "0.0.4"
+    "@types/css-font-loading-module" "0.0.7"
     "@xstate/fsm" "^1.4.0"
+    base64-arraybuffer "^1.0.1"
     fflate "^0.4.4"
     mitt "^1.1.3"
-    rrweb-snapshot "^1.1.8"
+    rrweb-snapshot "^1.1.13"
 
 rst-selector-parser@^2.2.3:
   version "2.2.3"