From 865b65303f4237116286a91d9e5fee592e1457ca Mon Sep 17 00:00:00 2001 From: David Newell Date: Tue, 1 Oct 2024 13:21:51 +0100 Subject: [PATCH 1/2] add hls example --- playground/nextjs/package.json | 11 +- .../nextjs/pages/replay-examples/media.tsx | 30 +- playground/nextjs/pnpm-lock.yaml | 1825 +++++++++-------- 3 files changed, 1001 insertions(+), 865 deletions(-) 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