fixed some live stuff

This commit is contained in:
Luke Berndt
2023-02-03 11:08:29 -05:00
parent a91f981bf8
commit 22a9f36093
2 changed files with 24 additions and 22 deletions

View File

@@ -1,11 +1,11 @@
import React, { useEffect, useLayoutEffect, useState, useRef } from "react"; import React, { useEffect, useLayoutEffect, useState, useRef, useCallback } from "react";
import { Link, useLocation, useParams, useNavigate } from 'react-router-dom'; import { Link, useLocation, useParams, useNavigate } from 'react-router-dom';
import FilterModal from "./components/FilterModal"; import FilterModal from "./components/FilterModal";
import GroupModal from "./components/GroupModal"; import GroupModal from "./components/GroupModal";
import CalendarModal from "./components/CalendarModal"; import CalendarModal from "./components/CalendarModal";
import CallPlayer from "./CallPlayer"; import CallPlayer from "./CallPlayer";
import { useSelector, useDispatch } from 'react-redux' import { useSelector, useDispatch } from 'react-redux'
import { setLive, setFilter, setDateFilter } from "../features/callPlayer/callPlayerSlice"; import { setFilter, setDateFilter } from "../features/callPlayer/callPlayerSlice";
import { getCalls, addCall, getOlderCalls, getNewerCalls } from "../features/calls/callsSlice"; import { getCalls, addCall, getOlderCalls, getNewerCalls } from "../features/calls/callsSlice";
import { useGetGroupsQuery, useGetSystemsQuery, } from '../features/api/apiSlice' import { useGetGroupsQuery, useGetSystemsQuery, } from '../features/api/apiSlice'
import { selectSystem } from "../features/systems/systemsSlice"; import { selectSystem } from "../features/systems/systemsSlice";
@@ -21,6 +21,7 @@ import {
import "./CallPlayer.css"; import "./CallPlayer.css";
import queryString from '../query-string'; import queryString from '../query-string';
import io from 'socket.io-client'; import io from 'socket.io-client';
import { useCallLink } from "./components/CallLinks";
@@ -44,6 +45,7 @@ function Calls(props) {
const [calendarVisible, setCalendarVisible] = useState(false); const [calendarVisible, setCalendarVisible] = useState(false);
const [isConnected, setIsConnected] = useState(socket.connected); const [isConnected, setIsConnected] = useState(socket.connected);
const [selectCallId, setSelectCallId] = useState(false); const [selectCallId, setSelectCallId] = useState(false);
const [live, setLive] = useState(true);
const navigate = useNavigate(); const navigate = useNavigate();
const dispatch = useDispatch(); const dispatch = useDispatch();
@@ -57,7 +59,7 @@ function Calls(props) {
const filterTalkgroups = useSelector((state) => state.callPlayer.filterTalkgroups); const filterTalkgroups = useSelector((state) => state.callPlayer.filterTalkgroups);
const filterStarred = useSelector((state) => state.callPlayer.filterStarred); const filterStarred = useSelector((state) => state.callPlayer.filterStarred);
const filterDate = useSelector((state) => state.callPlayer.filterDate); const filterDate = useSelector((state) => state.callPlayer.filterDate);
const live = useSelector((state) => state.callPlayer.live); //const live = useSelector((state) => state.callPlayer.live);
const uri = queryString.parse(useLocation().search); const uri = queryString.parse(useLocation().search);
const pathname = useLocation().pathname; const pathname = useLocation().pathname;
@@ -131,6 +133,7 @@ function Calls(props) {
shortName: shortName shortName: shortName
}); });
} }
const stopSocket = () => { const stopSocket = () => {
console.log("Stopping Socket") console.log("Stopping Socket")
socket.emit("stop"); socket.emit("stop");
@@ -172,8 +175,8 @@ function Calls(props) {
const handleLiveToggle = (currentlyLive) => { const handleLiveToggle = (currentlyLive) => {
if (!live) { if (!live) {
dispatch(setDateFilter(false)); dispatch(setDateFilter(false));
dispatch(setLive(true));
dispatch(getCalls({})); dispatch(getCalls({}));
setLive(true);
startSocket(); startSocket();
} }
} }
@@ -182,7 +185,7 @@ function Calls(props) {
setCalendarVisible(!calendarVisible); setCalendarVisible(!calendarVisible);
if (didUpdate) { if (didUpdate) {
dispatch(setLive(false)); setLive(false);
stopSocket(); stopSocket();
} }
} }
@@ -233,7 +236,6 @@ useLayoutEffect(() => {
filterTalkgroups: [], filterTalkgroups: [],
filterGroupId: false, filterGroupId: false,
filterStarred: false, filterStarred: false,
live: true,
shortName: shortName shortName: shortName
}; };
@@ -248,7 +250,8 @@ useLayoutEffect(() => {
if (uri.hasOwnProperty('time')) { if (uri.hasOwnProperty('time')) {
const date = new Date(parseInt(uri['time'])); const date = new Date(parseInt(uri['time']));
filter.filterDate = date.getTime(); filter.filterDate = date.getTime();
filter.live = false; setLive(false);
//filter.live = false;
if (!urlOptions) setUrlOptions(true); if (!urlOptions) setUrlOptions(true);
} }
@@ -257,6 +260,7 @@ useLayoutEffect(() => {
const _id = uri['call-id']; const _id = uri['call-id'];
setSelectCallId(_id); setSelectCallId(_id);
setAutoPlay(false); setAutoPlay(false);
setLive(false);
if (!urlOptions) setUrlOptions(true); if (!urlOptions) setUrlOptions(true);
} }
@@ -289,9 +293,17 @@ useLayoutEffect(() => {
}; };
}, []); }, []);
useEffect(() => { useEffect(() => {
socket.on('connect', () => { socket.on('connect', () => {
console.log("Socket Connect"); console.log("Socket Connect");
setLive( (live) => {
if (live) {
startSocket();
}
})
setIsConnected(true); setIsConnected(true);
}); });
@@ -302,10 +314,11 @@ useLayoutEffect(() => {
socket.on('reconnect', (attempts) => { socket.on('reconnect', (attempts) => {
console.log("Socket Reconnected after attempts: " + attempts); // true console.log("Socket Reconnected after attempts: " + attempts); // true
setLive( (live) => {
if (live) { if (live) {
this.startSocket(); startSocket();
} }
})
}) })
socket.on("new message", handleSocketMessage); socket.on("new message", handleSocketMessage);

View File

@@ -15,17 +15,6 @@ server {
server_name ${DOMAIN_NAME} www.${DOMAIN_NAME}; server_name ${DOMAIN_NAME} www.${DOMAIN_NAME};
location /apple-touch-*.png {
return 444;
}
location /favicon.ico {
return 444;
}
location /apple-touch-icon-precomposed.png {
return 444;
}
location / { location / {
proxy_pass http://frontend:3000; proxy_pass http://frontend:3000;