add system name

frontend/src/Call/CallPlayer.js

@@ -6,6 +6,7 @@ import CallInfo from "./components/CallInfo";
 import ListCalls from "./components/ListCalls";
 import { useSelector, useDispatch } from 'react-redux'
 import { useGetTalkgroupsQuery } from '../features/api/apiSlice'
+import { playedCall  } from "../features/calls/callsSlice";
 import { useInView } from 'react-intersection-observer';
 import {
   Container,
@@ -72,6 +73,7 @@ function CallPlayer(props) {
 
   const playCall = (data) => {
     setCurrentCall(data.call);
+    dispatch(playedCall(data.call._id));
     setIsPlaying(true);
   }
 
@@ -83,6 +85,7 @@ function CallPlayer(props) {
         const nextCall = callsData.entities[nextCallId];
 
         setCurrentCall(nextCall);
+        dispatch(playedCall(nextCall._id));
         setIsPlaying(true);
       } else {
         setIsPlaying(false);
@@ -93,7 +96,7 @@ function CallPlayer(props) {
   }
 
   useEffect(() => {
-    if (loadNewerInView && callsData && (callsData.ids.length > 0)) {
+    if (!live && loadNewerInView && callsData && (callsData.ids.length > 0)) {
       handleNewer();
     }
   }, [loadNewerInView]);
@@ -115,7 +118,9 @@ function CallPlayer(props) {
     if (selectCallId && callsData && !isPlaying && autoPlay) {
       const call = callsData.entities[selectCallId];
       if (call) {
+        setIsPlaying(true);
         setCurrentCall(call);
+        dispatch(playedCall(call._id));
       }
     }
   }, [selectCallId, callsData])

frontend/src/Call/Calls.js

@@ -7,8 +7,8 @@ import CallPlayer from "./CallPlayer";
 import { useSelector, useDispatch } from 'react-redux'
 import { setLive, setFilter, setDateFilter } from "../features/callPlayer/callPlayerSlice";
 import { getCalls, addCall, getOlderCalls, getNewerCalls  } from "../features/calls/callsSlice";
-import { useGetGroupsQuery, useGetTalkgroupsQuery } from '../features/api/apiSlice'
-
+import { useGetGroupsQuery, useGetSystemsQuery, } from '../features/api/apiSlice'
+import { selectSystem } from "../features/systems/systemsSlice";
 import {
   Container,
   Label,
@@ -30,9 +30,10 @@ const socket = io(process.env.REACT_APP_BACKEND_SERVER);
 function Calls(props) {
 
   const { shortName } = useParams();
-
+  const { data: allSystems, isSuccess } = useGetSystemsQuery();
   const { data: groupsData, isSuccess: isGroupsSuccess } = useGetGroupsQuery(shortName);
   const { loading: callsLoading, data: callsData } = useSelector((state) => state.calls);
+
   const [autoPlay, setAutoPlay] = useState(true);
   const [currentCall, setCurrentCall] = useState(false);
   const [urlOptions, setUrlOptions] = useState(false);
@@ -61,12 +62,15 @@ function Calls(props) {
   const pathname = useLocation().pathname;
 
   let currentCallId = false;
-
+  let system = false;
 
   if (currentCall) {
     currentCallId = currentCall._id;
   }
 
+  if (allSystems) {
+    system = allSystems.systems.find( (system) => system.shortName === shortName)
+  }
 
   const handlePusherClick = () => {
     if (sidebarOpened) setSidebarOpened(false);
@@ -210,8 +214,10 @@ useLayoutEffect(() => {
   if (pageYOffset.current) {
   const scrollAmount = parseInt(positionRef.current.clientHeight) - parseInt(pageYOffset.current.position);
     if (pageYOffset.current.direction == "top") {
-    window.scrollBy({left: 0, top: scrollAmount, behavior: "auto"});
+      window.scrollBy({left: 0, top: scrollAmount, behavior: "auto"});
+      pageYOffset.current = {direction: "bottom", position: positionRef.current.clientHeight}; // reset PageY to be the current height incase callsData changes for other reasons
     } else {
+      pageYOffset.current = {direction: "bottom", position: positionRef.current.clientHeight};
       //window.scrollBy(0, -1 * scrollAmount);
     }
   }
@@ -381,7 +387,7 @@ useLayoutEffect(() => {
           <Label horizontal={true} color="grey" className="desktop-only">{filterLabel}</Label>
         </Menu.Item>
         <Container className="desktop-only" textAlign='center' style={{ fontSize: '1.5rem', paddingLeft: '1em', paddingTop: '.5em' }}>
-          {/*system && system.name*/}
+          {system && system.name}
         </Container>
         <Menu.Menu position="right">
           <Menu.Item name='archive-btn' onClick={handleCalendarToggle} active={!live}>

frontend/src/Call/components/CallItem.js

@@ -89,11 +89,21 @@ const CallItem = (props) => {
   } else {
     talkgroup = talkgroups.talkgroups[call.talkgroupNum].description;
   }
+
+  let playStatus = (<></>)
+  if (activeCall) {
+    playStatus = (<Icon name="play"  size='small' color="green"/>)
+    
+  } else if (!call.played) {
+    playStatus = (<Icon name="chevron right" size='small' disabled/>)
+  } 
+
   return (
     <Table.Row draggable="true" onClick={(e) => props.onClick({ call: call }, e)} {...rowSelected} onDragStart={onDragStart} data-callid={call._id}>
-      <Table.Cell>  {call.len} </Table.Cell>
-      <Table.Cell> {talkgroup} </Table.Cell>
-      <Table.Cell> {time.toLocaleTimeString()} </Table.Cell>
+      <Table.Cell>{playStatus}</Table.Cell>
+      <Table.Cell>{call.len}</Table.Cell>
+      <Table.Cell>{talkgroup}</Table.Cell>
+      <Table.Cell>{time.toLocaleTimeString()}</Table.Cell>
       <Table.Cell onMouseEnter={() => setStarVisible(true)} onMouseLeave={() => setStarVisible(false)} onClick={handleStarClicked}>{starButton}</Table.Cell>
     </Table.Row>
   );

frontend/src/Call/components/ListCalls.js

@@ -33,6 +33,7 @@ const ListCalls = (props) => {
         <Table id="calls" unstackable  >
           <Table.Header >
             <Table.Row>
+            <Table.HeaderCell> </Table.HeaderCell>
               <Table.HeaderCell>Len</Table.HeaderCell>
               <Table.HeaderCell>Talkgroup</Table.HeaderCell>
               <Table.HeaderCell>Time</Table.HeaderCell>

frontend/src/Call/components/MediaPlayer.js

@@ -18,9 +18,20 @@ const MediaPlayer = (props) => {
   const [isPlaying, setIsPlaying] = useState(false);
   const parentHandlePlayPause = props.onPlayPause
 
-  const handlePause = () => { setIsPlaying(false); parentHandlePlayPause(false); }
-  const handlePlay = () => { setIsPlaying(true); parentHandlePlayPause(true); }
-  const playPause = () => { const audio = audioRef.current.audioEl.current; if (isPlaying) { audio.pause(); } else { audio.play(); } }
+  const handlePause = () => { setIsPlaying(false);  }
+  const handlePlay = () => { setIsPlaying(true);  }
+  const playPause = () => { 
+    const audio = audioRef.current.audioEl.current; 
+    if (isPlaying) { 
+      setIsPlaying(false); 
+      parentHandlePlayPause(false); 
+      audio.pause(); 
+    } else { 
+      setIsPlaying(true); 
+      parentHandlePlayPause(true);
+      audio.play(); 
+    } 
+  }
 
   const call = props.call;