From 61f36b5782854e161932c55c4aa432c3c319c989 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ante=20Br=C3=A4hler?=
 <58339175+antebrl@users.noreply.github.com>
Date: Wed, 11 Dec 2024 23:19:20 +0000
Subject: [PATCH] fix: reloading only if necessary

---
 backend/services/ChannelService.js                          | 2 +-
 frontend/src/App.tsx                                        | 6 ++++--
 frontend/src/components/VideoPlayer.tsx                     | 2 +-
 .../add_channel/{AddChannelModal.tsx => ChannelModal.tsx}   | 6 +++---
 4 files changed, 9 insertions(+), 7 deletions(-)
 rename frontend/src/components/add_channel/{AddChannelModal.tsx => ChannelModal.tsx} (98%)

diff --git a/backend/services/ChannelService.js b/backend/services/ChannelService.js
index f4b41ff..c4ca7c9 100644
--- a/backend/services/ChannelService.js
+++ b/backend/services/ChannelService.js
@@ -95,7 +95,7 @@ class ChannelService {
         }
 
         const streamChanged = updatedAttributes.url != this.currentChannel.url || 
-                              updatedAttributes.headers != this.currentChannel.headers || 
+                              JSON.stringify(updatedAttributes.headers) != JSON.stringify(this.currentChannel.headers) || 
                               updatedAttributes.restream != this.currentChannel.restream;
 
         const channel = this.channels[channelIndex];
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 06fb428..2fbeb29 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -3,7 +3,7 @@ import { Search, Plus, Settings, Users, Radio, Tv2 } from 'lucide-react';
 import VideoPlayer from './components/VideoPlayer';
 import ChannelList from './components/ChannelList';
 import Chat from './components/chat/Chat';
-import AddChannelModal from './components/add_channel/AddChannelModal';
+import ChannelModal from './components/add_channel/ChannelModal';
 import { Channel } from './types';
 import socketService from './services/SocketService';
 import apiService from './services/ApiService';
@@ -54,7 +54,9 @@ function App() {
 
           if(selectedChannel?.id === updatedChannel.id) {
 
+            // Reload stream if the stream attributes (url, headers) have changed
             if((selectedChannel?.url != updatedChannel.url || JSON.stringify(selectedChannel?.headers) != JSON.stringify(updatedChannel.headers)) && selectedChannel?.restream == updatedChannel.restream){ 
+              //TODO: find a better solution instead of reloading (problem is m3u8 needs time to refresh server-side)
               setTimeout(() => {
                 window.location.reload(); 
               }, 3000);
@@ -163,7 +165,7 @@ function App() {
           </div>
         </div>
 
-        <AddChannelModal
+        <ChannelModal
           isOpen={isModalOpen}
           onClose={() => {
             setIsModalOpen(false)
diff --git a/frontend/src/components/VideoPlayer.tsx b/frontend/src/components/VideoPlayer.tsx
index 99058c8..5a6dd05 100644
--- a/frontend/src/components/VideoPlayer.tsx
+++ b/frontend/src/components/VideoPlayer.tsx
@@ -173,7 +173,7 @@ function VideoPlayer({ channel, syncEnabled }: VideoPlayerProps) {
         hlsRef.current.destroy();
       }
     };
-  }, [channel?.url, channel?.restream, channel?.headers, syncEnabled]);
+  }, [channel?.url, channel?.restream, syncEnabled]);
 
   const handleVideoClick = (event: React.MouseEvent<HTMLVideoElement>) => {
     if (videoRef.current?.muted) {
diff --git a/frontend/src/components/add_channel/AddChannelModal.tsx b/frontend/src/components/add_channel/ChannelModal.tsx
similarity index 98%
rename from frontend/src/components/add_channel/AddChannelModal.tsx
rename to frontend/src/components/add_channel/ChannelModal.tsx
index e53a133..ff0d9d0 100644
--- a/frontend/src/components/add_channel/AddChannelModal.tsx
+++ b/frontend/src/components/add_channel/ChannelModal.tsx
@@ -4,13 +4,13 @@ import socketService from '../../services/SocketService';
 import { CustomHeader, Channel } from '../../types';
 import CustomHeaderInput from './CustomHeaderInput';
 
-interface AddChannelModalProps {
+interface ChannelModalProps {
   isOpen: boolean;
   onClose: () => void;
   channel?: Channel | null;
 }
 
-function AddChannelModal({ isOpen, onClose, channel }: AddChannelModalProps) {
+function ChannelModal({ isOpen, onClose, channel }: ChannelModalProps) {
   const [name, setName] = useState('');
   const [url, setUrl] = useState('');
   const [avatar, setAvatar] = useState('');
@@ -239,4 +239,4 @@ function AddChannelModal({ isOpen, onClose, channel }: AddChannelModalProps) {
   );
 }
 
-export default AddChannelModal;
\ No newline at end of file
+export default ChannelModal;
\ No newline at end of file