diff --git a/patches/rrweb@2.0.0-alpha.13.patch b/patches/rrweb@2.0.0-alpha.13.patch index 0d2e3558c..63e3444ed 100644 --- 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 index 4811df568..9f2d195b3 100644 --- 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 index 97b886c56..6de33358f 100644 --- a/playground/nextjs/pages/replay-examples/media.tsx +++ b/playground/nextjs/pages/replay-examples/media.tsx @@ -1,4 +1,22 @@ +import Hls from 'hls.js' +import { useEffect, useRef } from 'react' + export default function Media() { + const hlsVideoEl = useRef(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 ( <>

Video

@@ -6,10 +24,20 @@ export default function Media() {

Video

+
+

HLS Video

+
+

Audio