support for multiple systems in an Event

frontend/src/Call/CallPlayer.js

@@ -4,9 +4,9 @@ import MediaPlayer from "./components/MediaPlayer";
 import SupportModal from "./components/SupportModal";
 import CallInfo from "./components/CallInfo";
 import ListCalls from "./components/ListCalls";
-import { useDispatch } from 'react-redux'
+import { useSelector, useDispatch } from 'react-redux'
 import { getOlderCalls, getNewerCalls } from "../features/calls/callsSlice";
-import { useGetGroupsQuery, useGetTalkgroupsQuery } from '../features/api/apiSlice'
+import { useGetTalkgroupsQuery } from '../features/api/apiSlice'
 import { useInView } from 'react-intersection-observer';
 import {
   Container,
@@ -32,7 +32,6 @@ function CallPlayer(props) {
   const { shortName } = useParams();
   const selectCallId = props.selectCallId;
   const callsData = props.callsData;
-
   const { ref: loadOlderRef, inView: loadOlderInView } = useInView({
     /* Optional options */
     threshold: 0.5
@@ -53,6 +52,7 @@ function CallPlayer(props) {
   const stickyRef = useRef(); // lets us get the Y Scroll offset for the Call List
   const positionRef = useRef(); // lets us get the Y Scroll offset for the Call List
   const shouldPlayAddCallRef = useRef(); // we need to do this to make the current value of isPlaying available in the socket message callback
+  const live = useSelector((state) => state.callPlayer.live);
   shouldPlayAddCallRef.current = (!isPlaying && autoPlay)?true:false;
 
   let currentCallId = false;
@@ -92,7 +92,7 @@ function CallPlayer(props) {
   }
 
   useEffect(() => {
-    if (loadNewerInView && callsData && (callsData.ids.length > 0)) {
+    if (loadNewerInView && !live && callsData && (callsData.ids.length > 0)) {
       dispatch(getNewerCalls({}));
     }
   }, [loadNewerInView]);

frontend/src/Call/Calls.js

@@ -106,8 +106,9 @@ function Calls(props) {
     switch (message.type) {
       case 'calls':
 
+        if (positionRef.current) {
           pageYOffset.current = positionRef.current.clientHeight;
-
+        }
         setSelectCallId(message._id);
         dispatch(addCall(message));
 
@@ -295,15 +296,18 @@ function Calls(props) {
     updateUri();
   }, [filterGroupId, filterTalkgroups, filterType, filterDate, filterStarred, selectCallId])
 
-
   useEffect(() => {
     if (!urlOptions && groupsData && (groupsData.length > 0)) {
       setGroupVisible(true);
     }
   }, [groupsData])
 
+  useEffect(() => {
+    pageYOffset.current = positionRef.current.clientHeight;
+  }, [callsData])
+
   useLayoutEffect(() => {
-    const scrollAmount = parseInt(positionRef.current.clientHeight) - parseInt(pageYOffset.current);
+    const scrollAmount = parseInt(pageYOffset.current) - parseInt(positionRef.current.clientHeight);
     if (scrollAmount > 0) {
       window.scrollBy(0, scrollAmount);
     }

frontend/src/Call/components/PlaylistBuilder.js

@@ -19,6 +19,7 @@ import {
   Message
 } from "semantic-ui-react";
 import { useAddNewEventMutation, useGetTalkgroupsQuery } from '../../features/api/apiSlice'
+import { setPlaylist, addToPlaylist, removeFromPLaylist } from '../../features/callPlayer/callPlayerSlice';
 import PlaylistItem from "./PlaylistItem"
 
 function PlaylistBuilder(props) {
@@ -26,31 +27,17 @@ function PlaylistBuilder(props) {
   const { data: talkgroupsData, isSuccess: isTalkgroupsSuccess } = useGetTalkgroupsQuery(shortName);
   const [addNewEvent, { isLoading }] = useAddNewEventMutation()
   const { loading: callsLoading, data: callsData } = useSelector((state) => state.calls);
-  const [playlist, setPlaylist] = useState([]);
   const [open, setOpen] = React.useState(false);
   const [title, setTitle] = useState("")
   const [description, setDescription] = useState("")
   const handleTitleChange = (e, { name, value }) => setTitle(value);
   const handleDescriptionChange = (e, { name, value }) => setDescription(value);
+  const playlist = useSelector((state) => state.callPlayer.playlist);
+
+  const dispatch = useDispatch();
 
 
-  const compareCalls = (a, b) => {
-    const aTimestamp = new Date(a.time).getTime()
-    const bTimestamp = new Date(b.time).getTime()
-    if (aTimestamp > bTimestamp) {
-      return -1
-    } else {
-      return 1
-    }
-  }
-  const addCall = (call) => {
-    const found = playlist.find(c => c._id == call._id);
-    if (!found) {
-      playlist.push(call);
-      setPlaylist([...playlist.sort(compareCalls)])
-    }
 
-  }
 
   const onDragOver = (event) => {
     // It also receives a DragEvent.
@@ -67,6 +54,9 @@ function PlaylistBuilder(props) {
     event.preventDefault();
   }
 
+  const removeItem = (call) => {
+    dispatch(removeFromPLaylist(call))
+  }
 
   const onDrop = (event) => {
     // Here, we will:
@@ -74,18 +64,10 @@ function PlaylistBuilder(props) {
     // - and reset the DnD state
     var callId = event.dataTransfer.getData("call-id");
     console.log("Dropping: " + callId);
-    addCall(callsData.entities[callId])
+    dispatch(addToPlaylist(callsData.entities[callId]))
   }
 
-const removeItem = (call) => {
+
-  if (call) {
-    const found = playlist.findIndex(c => c._id == call._id);
-    if (found!=-1) {
-      playlist.splice(found,1)
-      setPlaylist([...playlist.sort(compareCalls)])
-    }
-  }
-}
 
   let listItems = "";
 
@@ -93,7 +75,9 @@ const removeItem = (call) => {
     let tgAlpha = call.talkgroupNum;
     if (talkgroupsData) {
       const talkgroup = talkgroupsData.talkgroups[call.talkgroupNum]
-      tgAlpha = talkgroup.alpha?talkgroup.alpha:tgAlpha;
+      if (talkgroup && talkgroup.alpha!=" ") {
+      tgAlpha = talkgroup.alpha;
+      }
     }
 
     return (<PlaylistItem call={call} tgAlpha={tgAlpha} index={index} removeItem={removeItem} />)
@@ -104,7 +88,6 @@ const removeItem = (call) => {
   }
 
   const handleSubmit = () => {
-    console.log(title)
     setOpen(false)
     const callIds = playlist.map((call) => call._id)
     const event = {
@@ -112,10 +95,10 @@ const removeItem = (call) => {
       description,
       callIds
     }
-   addNewEvent(event)
+    addNewEvent(event);
-    setTitle("")
+    setTitle("");
-    setDescription("")
+    setDescription("");
-    setPlaylist([])
+    dispatch(setPlaylist([]));
   }
 
   let content = (<Header as="h3" icon textAlign='center' style={{ paddingTop: "3em" }}><Icon name='target' />Drag Calls Here</Header>)
@@ -178,7 +161,7 @@ const removeItem = (call) => {
         {content}
       </Tab.Pane>
       <Menu fluid widths={2}>
-        <Menu.Item name="clear" onClick={() => setPlaylist([])}><Icon name='delete' />Clear</Menu.Item>
+        <Menu.Item name="clear" onClick={() => dispatch(setPlaylist([]))}><Icon name='delete' />Clear</Menu.Item>
         <Menu.Item active name="submit" onClick={submitPlaylist}><Icon name="cloud upload" />Submit</Menu.Item>
       </Menu>
     </>

frontend/src/features/callPlayer/callPlayerSlice.js

@@ -17,6 +17,16 @@ const initialState = {
   live: false
 }
 
+const compareCalls = (a, b) => {
+  const aTimestamp = new Date(a.time).getTime()
+  const bTimestamp = new Date(b.time).getTime()
+  if (aTimestamp > bTimestamp) {
+    return -1
+  } else {
+    return 1
+  }
+}
+
 export const callPlayerSlice = createSlice({
   name: 'callPlayer',
   initialState,
@@ -33,6 +43,23 @@ export const callPlayerSlice = createSlice({
       state.playlist = action.payload;
       }
     },
+    removeFromPlaylist: (state, action) => { 
+      const call = action.payload;
+      if (call) {
+        const found = state.playlist.findIndex(c => c._id == call._id);
+        if (found != -1) {
+          state.playlist = state.playlist.splice(found, 1)
+        }
+      }
+    },
+    addToPlaylist: (state, action) => {
+      const call = action.payload;
+      const found = state.playlist.find(c => c._id == call._id);
+      if (!found) {
+        const newlist = [...state.playlist, call];
+        state.playlist = newlist.sort(compareCalls);
+      }
+    },
     setFilter: (state,action) => {
       var filter={};
       state.live = !action.payload.live ? state.live : action.payload.live;
@@ -75,7 +102,7 @@ export const callPlayerSlice = createSlice({
 })
 
 // Action creators are generated for each case reducer function
-export const { setCurrentCallId, setCallTime, setFilter, setLive, setShortName, setDateFilter, setStarredFilter, setAllFilter, setGroupFilter, setTalkgroupFilter } = callPlayerSlice.actions
+export const { setCurrentCallId, setCallTime, setFilter, setLive, setPlaylist, removeFromPLaylist, addToPlaylist, setShortName, setDateFilter, setStarredFilter, setAllFilter, setGroupFilter, setTalkgroupFilter } = callPlayerSlice.actions
 
 export default callPlayerSlice.reducer