fix: skip addition of src attribute for HLS videos (#1446)

PostHog · Oct 1, 2024 · 79e0657 · 79e0657
1 parent 519adfc
commit 79e0657
Show file tree

Hide file tree

Showing 5 changed files with 1,031 additions and 870 deletions.
diff --git a/patches/rrweb@2.0.0-alpha.13.patch b/patches/rrweb@2.0.0-alpha.13.patch
@@ -166,6 +166,19 @@ index ea868845c4fad3276aa8e5f74abfd3568b466d11..965505de44975e718d431a4e9a62e753
  /* eslint-enable */
 
  export { WorkerFactory as default };
+diff --git a/es/rrweb/packages/rrweb/src/record/mutation.js b/es/rrweb/packages/rrweb/src/record/mutation.js
+index 30ea08b22210dde2f6e27c1adf83e0164a47554f..11334f600856e1ed7dcbdea28e8c2dc38a6b6742 100644
+--- a/es/rrweb/packages/rrweb/src/record/mutation.js
++++ b/es/rrweb/packages/rrweb/src/record/mutation.js
+@@ -386,7 +386,7 @@ class MutationBuffer {
+                         (m.oldValue || '').toLowerCase() === 'password') {
+                         target.setAttribute('data-rr-is-password', 'true');
+                     }
+-                    if (!ignoreAttribute(target.tagName, attributeName)) {
++                    if (!ignoreAttribute(target.tagName, attributeName, value)) {
+                         item.attributes[attributeName] = transformAttribute(this.doc, toLowerCase(target.tagName), toLowerCase(attributeName), value);
+                         if (attributeName === 'style') {
+                             if (!this.unattachedDoc) {
 diff --git a/es/rrweb/packages/rrweb/src/record/observers/canvas/canvas-manager.js b/es/rrweb/packages/rrweb/src/record/observers/canvas/canvas-manager.js
 index da2c103fe6b1408a5996f0eb3bf047571e434cc2..f5b060c7e0728a3e2c6cf62b01d97282f2484ac3 100644
 --- a/es/rrweb/packages/rrweb/src/record/observers/canvas/canvas-manager.js
@@ -224,7 +237,7 @@ index da2c103fe6b1408a5996f0eb3bf047571e434cc2..f5b060c7e0728a3e2c6cf62b01d97282
                  }, [bitmap]);
              }));
 diff --git a/es/rrweb/packages/rrweb-snapshot/es/rrweb-snapshot.js b/es/rrweb/packages/rrweb-snapshot/es/rrweb-snapshot.js
-index 0fc7d4bcafc9be822347f9437658478fd77d9972..bb4114b638b7d1173ef50b639a58de7d707c474f 100644
+index 0fc7d4bcafc9be822347f9437658478fd77d9972..b5a59feb930d0582488f64f8509deb668ff3de56 100644
 --- a/es/rrweb/packages/rrweb-snapshot/es/rrweb-snapshot.js
 +++ b/es/rrweb/packages/rrweb-snapshot/es/rrweb-snapshot.js
 @@ -48,7 +48,7 @@ function stringifyStylesheet(s) {
@@ -236,7 +249,19 @@ index 0fc7d4bcafc9be822347f9437658478fd77d9972..bb4114b638b7d1173ef50b639a58de7d
              : null;
      }
      catch (error) {
-@@ -641,9 +641,18 @@ function serializeElementNode(n, options) {
+@@ -385,8 +385,9 @@ function transformAttribute(doc, tagName, name, value) {
+     }
+     return value;
+ }
+-function ignoreAttribute(tagName, name, _value) {
+-    return (tagName === 'video' || tagName === 'audio') && name === 'autoplay';
++function ignoreAttribute(tagName, name, value) {
++    return (((tagName === 'video' || tagName === 'audio') && name === 'autoplay') ||
++            (tagName === 'video' && name === 'src' && value && value.startsWith('blob:http')));
+ }
+ function _isBlockedElement(element, blockClass, blockSelector) {
+     try {
+@@ -641,9 +642,18 @@ function serializeElementNode(n, options) {
          }
      }
      if (tagName === 'link' && inlineStylesheet) {

diff --git a/playground/nextjs/package.json b/playground/nextjs/package.json
@@ -13,23 +13,24 @@
         "link-posthog-js": "cd ../../ && pnpm link --global && cd playground/nextjs && pnpm link --global posthog-js"
     },
     "dependencies": {
-        "@lottiefiles/react-lottie-player": "^3.5.3",
+        "@lottiefiles/react-lottie-player": "^3.5.4",
         "@types/node": "18.13.0",
         "@types/react": "18.0.28",
         "@types/react-dom": "18.0.10",
         "cookie": "^0.6.0",
         "eslint": "8.34.0",
         "eslint-config-next": "13.1.6",
+        "hls.js": "^1.5.15",
         "next": "13.5.6",
-        "posthog-js": "1.128.3",
+        "posthog-js": "1.166.0",
         "react": "18.2.0",
         "react-dom": "18.2.0",
         "typescript": "4.9.5"
     },
     "devDependencies": {
         "@types/cookie": "^0.6.0",
-        "autoprefixer": "^10.4.17",
-        "postcss": "^8.4.35",
-        "tailwindcss": "^3.4.1"
+        "autoprefixer": "^10.4.20",
+        "postcss": "^8.4.47",
+        "tailwindcss": "^3.4.13"
     }
 }
diff --git a/playground/nextjs/pages/replay-examples/media.tsx b/playground/nextjs/pages/replay-examples/media.tsx
@@ -1,15 +1,43 @@
+import Hls from 'hls.js'
+import { useEffect, useRef } from 'react'
+
 export default function Media() {
+    const hlsVideoEl = useRef<HTMLVideoElement>(null)
+
+    useEffect(() => {
+        const videoEl = hlsVideoEl.current
+        if (videoEl) {
+            if (Hls.isSupported()) {
+                const hls = new Hls()
+                hls.loadSource('https://d2zihajmogu5jn.cloudfront.net/big-buck-bunny/master.m3u8')
+                hls.attachMedia(videoEl)
+            } else if (videoEl.canPlayType('application/vnd.apple.mpegurl')) {
+                videoEl.src = 'https://d2zihajmogu5jn.cloudfront.net/big-buck-bunny/master.m3u8'
+            }
+        }
+    }, [hlsVideoEl])
+
     return (
         <>
             <h1>Video</h1>
             <p>Useful testing for Replay handling video elements</p>
             <div style={{ margin: 10 }}>
                 <h3>Video</h3>
                 <video controls={true} style={{ width: 500 }}>
-                    <source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" />
+                    <source src="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" />
                 </video>
             </div>
 
+            <div style={{ margin: 10 }}>
+                <h3>HLS Video</h3>
+                <video
+                    ref={hlsVideoEl}
+                    controls={true}
+                    style={{ width: 500 }}
+                    hls-src="https://d2zihajmogu5jn.cloudfront.net/big-buck-bunny/master.m3u8"
+                />
+            </div>
+
             <div style={{ margin: 10 }}>
                 <h3>Audio</h3>
                 <audio controls={true}>