Should fix some of the UI Issues

This commit is contained in:
Luke Berndt
2023-01-19 21:29:18 -05:00
parent fef88f3517
commit 7f85f4079d
5 changed files with 23 additions and 22 deletions

View File

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

View File

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

View File

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

View File

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

View File

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