diff --git a/frontend/notes.md b/frontend/notes.md
index aa1fbc0..ba0e3dc 100644
--- a/frontend/notes.md
+++ b/frontend/notes.md
@@ -8,7 +8,6 @@
- [React Date Picker](https://github.com/Hacker0x01/react-datepicker) - the popup calendar that lets you pick a date. Used in the calendar Modal.
- [React Audio Player](https://github.com/justinmc/react-audio-player) - This is a light React wrapper around the HTML5 audio tag. It provides the ability to manipulate the player and listen to events through a nice React interface
- [date-fns](https://date-fns.org) - date-fns provides the most comprehensive, yet simple and consistent toolset for manipulating JavaScript dates in a browser & Node.js. Used in the calendar modal to figure out how far apart days are.
-- [react-waypoint](https://github.com/civiccc/react-waypoint) - A React component to execute a function whenever you scroll to an element. Works in all containers that can scroll, including the window. Used to help scroll the list of calls.
- [Semantic UI](https://react.semantic-ui.com/usage) - The UI frontend
- [react-router-dom](https://reactrouter.com/web/guides/quick-start) - Adds routes to React
## Environment Variables
diff --git a/frontend/package.json b/frontend/package.json
index 72beafe..b06ba2b 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -18,7 +18,6 @@
"react-redux": "^7.1.3",
"react-router-dom": "5.2.0",
"react-scripts": "4.0.1",
- "react-waypoint": "9.0.3",
"redux-thunk": "2.3.0",
"semantic-ui-css": "2.4.1",
"semantic-ui-react": "2.0.1"
diff --git a/frontend/src/Call/CallItem.js b/frontend/src/Call/CallItem.js
index b7f5fb5..d41949d 100644
--- a/frontend/src/Call/CallItem.js
+++ b/frontend/src/Call/CallItem.js
@@ -102,7 +102,7 @@ render() {
rowSelected={positive: true,
color: "blue",
key: "blue",
- inverted: true
+ inverted: "true"
}
}
var talkgroup;
diff --git a/frontend/src/Call/CallPlayer.js b/frontend/src/Call/CallPlayer.js
index 846d96e..c160762 100644
--- a/frontend/src/Call/CallPlayer.js
+++ b/frontend/src/Call/CallPlayer.js
@@ -14,9 +14,9 @@ import {
Sticky,
Menu,
Icon,
- Sidebar
+ Sidebar,
+ Visibility
} from "semantic-ui-react";
-import { Waypoint } from 'react-waypoint';
import "./CallPlayer.css";
//import setupSocket from '../socket/SetupSocket.js'
import queryString from '../query-string';
@@ -62,6 +62,7 @@ class CallPlayer extends React.Component {
callId: false,
playTime: 0,
sourceIndex: 0,
+ callScroll: false,
urlOptions: false,
isPlaying: false,
sidebarOpened: false,
@@ -98,21 +99,16 @@ class CallPlayer extends React.Component {
changeUrl = url => this.props.callActions.changeUrl(url)
loadNewerCalls() {
- if (!this.props.callsIsWaiting) {
+
console.log("Loading Newer Calls");
this.props.callActions.fetchNewerCalls(this.props.newestCallTime.getTime());
- } else {
- console.log("Calls still loading - can't load newer calls");
- }
}
loadOlderCalls() {
- if (!this.props.callsIsWaiting) {
+
console.log("Loading Older Calls");
this.props.callActions.fetchOlderCalls(this.props.oldestCallTime.getTime());
- } else {
- console.log("Calls still loading - can't load older calls");
- }
+
}
handleCalendarToggle = () => this.setState({
@@ -337,22 +333,20 @@ class CallPlayer extends React.Component {
// is this just for one call?
if (uri.hasOwnProperty('call-id')) {
const _id = uri['call-id'];
- const currentCall = this.props.callsById[this.state.callId];
+ const date = new Date(parseInt(uri['time']));
+
filter.live = false;
this.setState({
callId: _id,
sourceIndex: 0,
urlOptions: true,
- autoPlay: false
+ autoPlay: false,
+ callScroll: true
});
this.props.callActions.fetchCallInfo(_id);
+ this.props.callActions.setCallTime(date);
- if (this.currentCallRef.current) {
- this.currentCallRef.current.scrollIntoView({
- behavior: "smooth",
- block: "center",
- });
- }
+
}
@@ -382,6 +376,9 @@ class CallPlayer extends React.Component {
}
this.props.callActions.setFilter(filter);
+
+ // When a time/date is provided in the URL, it will be added to the filter
+ // When fetchCalls is called it will selected calls that are older
this.props.callActions.fetchCalls();
this.props.talkgroupActions.fetchTalkgroups(this.props.shortName);
this.props.groupActions.fetchGroups(this.props.shortName);
@@ -460,6 +457,19 @@ class CallPlayer extends React.Component {
this.autoScroll = false;
window.scrollBy(0, contextRef.clientHeight - this.prevHeight);
}
+
+ // scroll to a call once the calls have loaded
+ if (this.state.callScroll && (this.props.callsAllIds.length > prevProps.callsAllIds.length)){
+ this.setState({callScroll: false});
+ if (this.currentCallRef.current) {
+ this.currentCallRef.current.scrollIntoView({
+ behavior: "auto",
+ block: "center",
+ });
+ }
+ this.scrollPos = contextRef.scrollTop;
+ this.prevHeight = contextRef.clientHeight;
+ }
}
//https://stackoverflow.com/questions/36559661/how-can-i-dispatch-from-child-components-in-react-redux
@@ -560,11 +570,11 @@ class CallPlayer extends React.Component {
onClick={this.handlePusherClick}
style={{ minHeight: '100vh' }}
>
-
+
+
-
diff --git a/frontend/src/Call/ListCalls.js b/frontend/src/Call/ListCalls.js
index 582b4a6..57b22bc 100644
--- a/frontend/src/Call/ListCalls.js
+++ b/frontend/src/Call/ListCalls.js
@@ -9,12 +9,6 @@ import "./CallPlayer.css";
// ----------------------------------------------------
class ListCalls extends React.Component {
- constructor(props) {
- super(props);
-
- //this.currentCallRef = React.createRef();
- }
-
//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
@@ -34,7 +28,7 @@ class ListCalls extends React.Component {
{this.props.callsAllIds.map((callId, index) => {
if (callId === this.props.activeCallId) {
- return (