feat: create LiveStreamPlayer component

Author: andresdlt03

common-front/lib/components/LiveStreamPlayer/LiveStreamPlayer.tsx

@@ -0,0 +1,43 @@
+import React, { useEffect, useRef } from 'react';
+import Hls from 'hls.js';
+
+type Props = {
+    src: string;
+    width?: string;
+    height?: string;
+    borderRadius?: string;
+};
+
+const LiveStreamPlayer: React.FC<Props> = ({ src, width = '100%', height = '100%', borderRadius = '8px' }) => {
+    const videoRef = useRef<HTMLVideoElement | null>(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 no soportado');
+            }
+        }
+    }, [src]);
+
+    return (
+        <div>
+            <video
+                ref={videoRef}
+                controls
+                style={{ width: width, height: height, borderRadius: borderRadius }}
+            />
+        </div>
+    );
+};
+
+export default LiveStreamPlayer;

common-front/package-lock.json

@@ -21,6 +21,7 @@
         "@types/react": "^18.2.0",
         "@vitejs/plugin-react": "^4.0.0",
         "@zerollup/ts-transform-paths": "^1.7.18",
+        "hls.js": "^1.6.2",
         "lodash": "^4.17.21",
         "math": "^0.0.3",
         "react": "^18.2.0",