diff --git a/frontend/src/Call/Calls.js b/frontend/src/Call/Calls.js
index 2030ef0..703386e 100644
--- a/frontend/src/Call/Calls.js
+++ b/frontend/src/Call/Calls.js
@@ -1,4 +1,4 @@
-import React, { useEffect, useLayoutEffect, useState, useRef, useCallback } from "react";
+import React, { useEffect, useLayoutEffect, useState, useRef, useCallback, useMemo } from "react";
import { Link, useLocation, useParams, useNavigate } from 'react-router-dom';
import FilterModal from "./components/FilterModal";
import GroupModal from "./components/GroupModal";
@@ -6,7 +6,7 @@ import CalendarModal from "./components/CalendarModal";
import CallPlayer from "./CallPlayer";
import { useSelector, useDispatch } from 'react-redux'
import { setFilter, setDateFilter } from "../features/callPlayer/callPlayerSlice";
-import { getCalls, addCall, getOlderCalls, getNewerCalls } from "../features/calls/callsSlice";
+import { getCalls, addCall, getOlderCalls, getNewerCalls } from "../features/calls/callsSlice";
import { useGetGroupsQuery, useGetSystemsQuery, } from '../features/api/apiSlice'
import { selectSystem } from "../features/systems/systemsSlice";
import {
@@ -64,15 +64,19 @@ function Calls(props) {
const pathname = useLocation().pathname;
let currentCallId = false;
- let system = false;
+ //let system = false;
if (currentCall) {
currentCallId = currentCall._id;
}
- if (allSystems) {
- system = allSystems.systems.find( (system) => system.shortName === shortName)
- }
+ let system = useMemo(() => {
+ if (allSystems) {
+ return allSystems.systems.find((system) => system.shortName === shortName)
+ } else {
+ return false;
+ }
+ }, [allSystems, shortName])
const handlePusherClick = () => {
if (sidebarOpened) setSidebarOpened(false);
@@ -110,12 +114,12 @@ function Calls(props) {
case 'calls':
if (positionRef.current) {
- pageYOffset.current = {direction: "top", position: positionRef.current.clientHeight};
+ pageYOffset.current = { direction: "top", position: positionRef.current.clientHeight };
}
setSelectCallId(message._id);
dispatch(addCall(message));
const time = new Date(message.time);
- console.log("Got Socket Message: " + message._id + " Start Time: " + time.toLocaleTimeString() );
+ console.log("Got Socket Message: " + message._id + " Start Time: " + time.toLocaleTimeString());
break
default:
break
@@ -199,34 +203,34 @@ function Calls(props) {
}
-const handleNewer = () => {
- if (positionRef.current) {
- pageYOffset.current = {direction: "top", position: positionRef.current.clientHeight};
- }
- if (!live) {
- dispatch(getNewerCalls({}));
- }
-}
-
-const handleOlder = () => {
- if (positionRef.current) {
- pageYOffset.current = {direction: "bottom", position: positionRef.current.clientHeight};
- }
- dispatch(getOlderCalls({}));
-}
-
-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"});
- 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);
+ const handleNewer = () => {
+ if (positionRef.current) {
+ pageYOffset.current = { direction: "top", position: positionRef.current.clientHeight };
+ }
+ if (!live) {
+ dispatch(getNewerCalls({}));
}
}
-}, [callsData])
+
+ const handleOlder = () => {
+ if (positionRef.current) {
+ pageYOffset.current = { direction: "bottom", position: positionRef.current.clientHeight };
+ }
+ dispatch(getOlderCalls({}));
+ }
+
+ 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" });
+ 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);
+ }
+ }
+ }, [callsData])
@@ -297,6 +301,7 @@ useLayoutEffect(() => {
+
useEffect(() => {
socket.on('connect', () => {
console.log("Socket Connect");
diff --git a/frontend/src/Call/components/CallInfoPane.js b/frontend/src/Call/components/CallInfoPane.js
index 6d70c34..f902358 100644
--- a/frontend/src/Call/components/CallInfoPane.js
+++ b/frontend/src/Call/components/CallInfoPane.js
@@ -1,19 +1,17 @@
-import React, { useState } from "react";
+import React, { useMemo, useEffect } from "react";
import { useCallLink } from "./CallLinks";
-import {skipToken} from '@reduxjs/toolkit/query'
-import { useGetGroupsQuery, useGetTalkgroupsQuery } from '../../features/api/apiSlice'
-import { Link, useLocation, useParams, useNavigate } from 'react-router-dom';
+import { skipToken } from '@reduxjs/toolkit/query'
+import { useGetSystemsQuery, useGetTalkgroupsQuery } from '../../features/api/apiSlice'
+import { useParams } from 'react-router-dom';
import {
Header,
Divider,
List,
- Segment,
Statistic,
Icon,
- Menu,
- Tab
+ Menu
} from "semantic-ui-react";
-import PlaylistBuilder from "./PlaylistBuilder"
+
// ----------------------------------------------------
function CallInfoPane(props) {
@@ -25,15 +23,23 @@ function CallInfoPane(props) {
let callTime = "-";
let talkgroupNum = "-";
let header = "Call Info"
- const currentCall = props.call?props.call:false;
+ let title = ""
+ const currentCall = props.call ? props.call : false;
+ const { callLink, callDownload, callTweet } = useCallLink(props.call)
+ const { data: allSystems, isSuccess } = useGetSystemsQuery();
+ let { shortName } = useParams();
+ if (!shortName && currentCall) {
+ shortName = currentCall.shortName;
+ }
+ const { data: talkgroupsData, isSuccess: isTalkgroupsSuccess } = useGetTalkgroupsQuery(shortName ? shortName : skipToken);
-
- const { data: talkgroupsData, isSuccess: isTalkgroupsSuccess } = useGetTalkgroupsQuery(currentCall?currentCall.shortName:skipToken);
-
- if (currentCall) {
+ if (currentCall) {
if ((talkgroupsData) && talkgroupsData.talkgroups[currentCall.talkgroupNum]) {
header = talkgroupsData.talkgroups[currentCall.talkgroupNum].description;
+ title = talkgroupsData.talkgroups[currentCall.talkgroupNum].description;
+ } else {
+ title = `TG: ${currentCall.talkgroupNum}`;
}
const time = new Date(currentCall.time);
callTime = time.toLocaleTimeString();
@@ -47,51 +53,82 @@ function CallInfoPane(props) {
talkgroupNum = currentCall.talkgroupNum;
}
- const { callLink, callDownload, callTweet } = useCallLink(props.call)
+ let system = false;
+ if (allSystems) {
+ system = allSystems.systems.find((system) => system.shortName === shortName)
+ }
+
+/*
+ let system = useMemo(() => {
+ if (allSystems) {
+ return allSystems.systems.find((system) => system.shortName === currentCall.shortName)
+ } else {
+ return false;
+ }
+ }, [allSystems, currentCall.shortName])*/
+
+ useEffect(() => {
+ // When audio starts playing...
+ if ('mediaSession' in navigator) {
+
+ navigator.mediaSession.metadata = new MediaMetadata({
+ title: title,
+ artist: 'OpenMHz',
+ album: system ? system.name : "",
+ artwork: [
+ { src: '/favicon-32x32.png', sizes: '32x32', type: 'image/png' },
+ { src: '/android-chrome-192x192.png', sizes: '192x192', type: 'image/png' },
+ { src: '/android-chrome-192x192.png', sizes: '512x512', type: 'image/png' },
+ ]
+ });
+ }
+ }, [currentCall])
+
+
return (
<>
-
-
- {srcList}
-
-
-
- Seconds
- {callLength}
-
-
- Talkgroup
- {talkgroupNum}
-
+
+
+ {srcList}
+
+
+
+ Seconds
+ {callLength}
+
+
+ Talkgroup
+ {talkgroupNum}
+
-
-
-
-
- {callTime}
-
-
-
-
-
- {callDate}
-
-
-
-
-
- {callFreq} MHz
-
-
-
-
-
-
+
+
+
+
+ {callTime}
+
+
+
+
+
+ {callDate}
+
+
+
+
+
+ {callFreq} MHz
+
+
+
+
+
+
);
}