From cef06ff809a813de99b942b202d6751b9b44819f Mon Sep 17 00:00:00 2001
From: anoracleofra-code <anoracleofra@gmail.com>
Date: Mon, 9 Mar 2026 01:35:48 -0600
Subject: [PATCH] fix: use hls.js to support HLS video streams on non-Safari
 browsers

Former-commit-id: 4c846bf8056b1171e0d484f865c18a7c9eecade0
---
 frontend/package.json                |  3 +-
 frontend/src/components/NewsFeed.tsx | 43 ++++++++++++++++++++++++----
 2 files changed, 39 insertions(+), 7 deletions(-)

diff --git a/frontend/package.json b/frontend/package.json
index 5e5ee4b..59fa117 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -13,6 +13,7 @@
   "dependencies": {
     "@mapbox/point-geometry": "^1.1.0",
     "framer-motion": "^12.34.3",
+    "hls.js": "^1.6.15",
     "lucide-react": "^0.575.0",
     "maplibre-gl": "^4.7.1",
     "next": "16.1.6",
@@ -33,4 +34,4 @@
     "tailwindcss": "^4",
     "typescript": "^5"
   }
-}
\ No newline at end of file
+}
diff --git a/frontend/src/components/NewsFeed.tsx b/frontend/src/components/NewsFeed.tsx
index 01e847a..85f2a81 100644
--- a/frontend/src/components/NewsFeed.tsx
+++ b/frontend/src/components/NewsFeed.tsx
@@ -3,9 +3,43 @@
 import { useState } from 'react';
 import { motion, AnimatePresence } from 'framer-motion';
 import { AlertTriangle, Clock, ChevronDown, ChevronUp } from 'lucide-react';
-import React, { useEffect, useRef } from 'react';
+import React, { useEffect, useRef, useCallback } from 'react';
+import Hls from 'hls.js';
 import WikiImage from '@/components/WikiImage';
 
+// HLS video player — uses hls.js on Chrome/Firefox, native on Safari
+function HlsVideo({ url, className }: { url: string; className?: string }) {
+    const videoRef = useRef<HTMLVideoElement>(null);
+
+    useEffect(() => {
+        const video = videoRef.current;
+        if (!video || !url) return;
+
+        let hls: Hls | null = null;
+
+        if (Hls.isSupported()) {
+            hls = new Hls({ enableWorker: false, lowLatencyMode: true });
+            hls.loadSource(url);
+            hls.attachMedia(video);
+        } else if (video.canPlayType('application/vnd.apple.mpegurl')) {
+            // Safari native HLS
+            video.src = url;
+        }
+
+        return () => { hls?.destroy(); };
+    }, [url]);
+
+    return (
+        <video
+            ref={videoRef}
+            autoPlay
+            muted
+            playsInline
+            className={className}
+        />
+    );
+}
+
 // Format time from pubish string "Tue, 24 Feb 2026 15:30:00 GMT" to "15:30"
 function formatTime(pubDate: string) {
     try {
@@ -807,11 +841,8 @@ function NewsFeedInner({ data, selectedEntity, regionDossier, regionDossierLoadi
                             />
                         );
                         if (mt === 'hls') return (
-                            <video
-                                src={url}
-                                autoPlay
-                                muted
-                                playsInline
+                            <HlsVideo
+                                url={url}
                                 className="w-full h-full object-cover border border-cyan-900/50 rounded-sm filter contrast-125 saturate-50"
                             />
                         );