diff --git a/common-front/lib/components/LiveStreamPlayer/LiveStreamPlayer.tsx b/common-front/lib/components/LiveStreamPlayer/LiveStreamPlayer.tsx new file mode 100644 index 000000000..7278c68de --- /dev/null +++ b/common-front/lib/components/LiveStreamPlayer/LiveStreamPlayer.tsx @@ -0,0 +1,39 @@ +import React, { useEffect, useRef } from 'react'; +import Hls from 'hls.js'; + +type Props = { + src: string; + width?: string; + height?: string; + borderRadius?: string; +}; + +export const LiveStreamPlayer = ({ src, width = '100%', height = '100%', borderRadius = '8px' }: Props) => { + const videoRef = useRef(null); + + useEffect(() => { + const video = videoRef.current; + + if (video) { + if (video.canPlayType('application/vnd.apple.mpegurl')) { + video.src = src; + } else if (Hls.isSupported()) { + const hls = new Hls(); + hls.loadSource(src); + hls.attachMedia(video); + + return () => hls.destroy(); + } else { + console.error('HLS not supported'); + } + } + }, [src]); + + return ( +