Should fix some of the UI Issues

frontend/src/Call/CallPlayer.js

@@ -120,7 +120,7 @@ function CallPlayer(props) {
   }, [loadOlderInView]);
 
   useEffect(() => {
-    if ( selectCallId && callsData && !currentCall) {
+    if ( selectCallId && callsData ) {
       const call = callsData.entities[selectCallId];
       if (call) {
         setCurrentCall(call);

frontend/src/Call/Calls.js

@@ -314,17 +314,16 @@ function Calls(props) {
     updateUri();
   }, [filterGroupId, filterTalkgroups, filterType, filterDate, filterStarred, selectCallId])
 
-/*
+
   useEffect(() => {
     if (!urlOptions && groupsData && (groupsData.length > 0)) {
       setGroupVisible(true);
     }
-  }, [groupsData])*/
+  }, [groupsData])
 
   useLayoutEffect( () => {
     const scrollAmount = parseInt(positionRef.current.clientHeight) - parseInt(pageYOffset.current);
     if (scrollAmount > 0) {
-      console.log("useLayoutEffect for callsData -  ref: " + pageYOffset.current + " current: " + positionRef.current.clientHeight + " Scroll Amount: " + scrollAmount)
       window.scrollBy(0, scrollAmount);
     }
   }, [callsData])

frontend/src/Call/components/GroupModal.js

@@ -14,7 +14,6 @@ import "./FilterModal.css";
 function GroupModal (props) {
   const shortName = useSelector((state) => state.callPlayer.shortName);
   const { data, isError, isLoading, isSuccess,error } = useGetGroupsQuery(props.shortName);
-  const [open, setOpen] = useState(false);
   const [selectedGroup, setSelectedGroup] = useState(false);
   const dispatch = useDispatch()
   const onClose = props.onClose;
@@ -49,7 +48,7 @@ function GroupModal (props) {
 
   return (
 
-    <Modal open={props.open} onClose={() => setOpen(false)} onOpen={() => setOpen(true)} size='tiny'>
+    <Modal open={props.open} onClose={onClose} size='tiny'>
    
       <Modal.Header>Select a Group</Modal.Header>
       <Modal.Content >

frontend/src/Call/components/ListCalls.js

@@ -14,13 +14,15 @@ const ListCalls = (props) => {
   //https://stackoverflow.com/questions/36559661/how-can-i-dispatch-from-child-components-in-react-redux
   //https://stackoverflow.com/questions/42597602/react-onclick-pass-event-with-parameter
 
+
+  /*
     useEffect(() => {
       if (activeCallRef.current) {
         activeCallRef.current.scrollIntoView({
           block: "center",
         });
     }
-  });
+  });*/
 
     const callsData = props.callsData;
     return (

frontend/src/Call/components/MediaPlayer.js

@@ -1,4 +1,4 @@
-import React, {  useEffect, useState } from "react";
+import React, { useEffect, useState } from "react";
 import {
   Menu,
   Icon,
@@ -30,22 +30,23 @@ const MediaPlayer = (props) => {
     const onEnded = props.onEnded;
     setSourceIndex(0);
     if (call) {
-    audio.src = call.url;
-    const playPromise = audio.play();
+      audio.src = call.url;
+      const playPromise = audio.play();
 
-    // In browsers that don’t yet support this functionality,
-    // playPromise won’t be defined.
-    if (playPromise !== undefined) {
-      playPromise.then(function () {
+      // In browsers that don’t yet support this functionality,
+      // playPromise won’t be defined.
+      if (playPromise !== undefined) {
+        playPromise.then(function () {
 
-      }).catch(function (error) {
-        console.log("Automatic playback failed: " + error);
-        onEnded();
-        // Show a UI element to let the user manually start playback.
-      });
-    } else {
-      audio.src = false;
-    }
+        }).catch(function (error) {
+          console.log("Automatic playback failed: " + error);
+          handlePause();
+          onEnded();
+          // Show a UI element to let the user manually start playback.
+        });
+      } else {
+        audio.src = false;
+      }
     }
   }, [call]);