fix: reloading only if necessary

This commit is contained in:
Ante Brähler
2024-12-11 23:19:20 +00:00
parent 57c6f6eb80
commit 61f36b5782
4 changed files with 9 additions and 7 deletions

View File

@@ -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];

View File

@@ -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)

View File

@@ -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) {

View File

@@ -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;
export default ChannelModal;