From 7f85f4079d6231824d314c88bd2ccd1b81f665f7 Mon Sep 17 00:00:00 2001
From: Luke Berndt <lukekb@gmail.com>
Date: Thu, 19 Jan 2023 21:29:18 -0500
Subject: [PATCH] Should fix some of the UI Issues

---
 frontend/src/Call/CallPlayer.js             |  2 +-
 frontend/src/Call/Calls.js                  |  5 ++--
 frontend/src/Call/components/GroupModal.js  |  3 +-
 frontend/src/Call/components/ListCalls.js   |  4 ++-
 frontend/src/Call/components/MediaPlayer.js | 31 +++++++++++----------
 5 files changed, 23 insertions(+), 22 deletions(-)

diff --git a/frontend/src/Call/CallPlayer.js b/frontend/src/Call/CallPlayer.js
index 09f962e..d0aa799 100644
--- a/frontend/src/Call/CallPlayer.js
+++ b/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);
diff --git a/frontend/src/Call/Calls.js b/frontend/src/Call/Calls.js
index 9ad7793..256e869 100644
--- a/frontend/src/Call/Calls.js
+++ b/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])
diff --git a/frontend/src/Call/components/GroupModal.js b/frontend/src/Call/components/GroupModal.js
index 9b9b450..6f9632f 100644
--- a/frontend/src/Call/components/GroupModal.js
+++ b/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 >
diff --git a/frontend/src/Call/components/ListCalls.js b/frontend/src/Call/components/ListCalls.js
index 3a6059d..15eef24 100644
--- a/frontend/src/Call/components/ListCalls.js
+++ b/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 (
diff --git a/frontend/src/Call/components/MediaPlayer.js b/frontend/src/Call/components/MediaPlayer.js
index 49e5a56..46524c2 100644
--- a/frontend/src/Call/components/MediaPlayer.js
+++ b/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]);