GitHub/trunk-server
1
0
Fork 0
mirror of https://github.com/openmhz/trunk-server.git synced 2026-11-14 09:48:10 -05:00
Code Issues Packages Projects Releases Wiki Activity

media info

Browse Source
This commit is contained in:
Luke Berndt
2023-02-14 21:57:20 -05:00
parent 0e8f3fecc8
commit 143490d93e
2 changed files with 129 additions and 87 deletions
Download Patch File Download Diff File Expand all files Collapse all files

73
frontend/src/Call/Calls.js
View File

@@ -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 { Link, useLocation, useParams, useNavigate } from 'react-router-dom';
import FilterModal from "./components/FilterModal"; import FilterModal from "./components/FilterModal";
import GroupModal from "./components/GroupModal"; import GroupModal from "./components/GroupModal";
@@ -6,7 +6,7 @@ import CalendarModal from "./components/CalendarModal";
import CallPlayer from "./CallPlayer"; import CallPlayer from "./CallPlayer";
import { useSelector, useDispatch } from 'react-redux' import { useSelector, useDispatch } from 'react-redux'
import { setFilter, setDateFilter } from "../features/callPlayer/callPlayerSlice"; 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 { useGetGroupsQuery, useGetSystemsQuery, } from '../features/api/apiSlice'
import { selectSystem } from "../features/systems/systemsSlice"; import { selectSystem } from "../features/systems/systemsSlice";
import { import {
@@ -64,15 +64,19 @@ function Calls(props) {
const pathname = useLocation().pathname; const pathname = useLocation().pathname;
let currentCallId = false; let currentCallId = false;
let system = false; //let system = false;
if (currentCall) { if (currentCall) {
currentCallId = currentCall._id; currentCallId = currentCall._id;
} }
if (allSystems) { let system = useMemo(() => {
system = allSystems.systems.find( (system) => system.shortName === shortName) if (allSystems) {
} return allSystems.systems.find((system) => system.shortName === shortName)
} else {
return false;
}
}, [allSystems, shortName])
const handlePusherClick = () => { const handlePusherClick = () => {
if (sidebarOpened) setSidebarOpened(false); if (sidebarOpened) setSidebarOpened(false);
@@ -110,12 +114,12 @@ function Calls(props) {
case 'calls': case 'calls':
if (positionRef.current) { if (positionRef.current) {
pageYOffset.current = {direction: "top", position: positionRef.current.clientHeight}; pageYOffset.current = { direction: "top", position: positionRef.current.clientHeight };
} }
setSelectCallId(message._id); setSelectCallId(message._id);
dispatch(addCall(message)); dispatch(addCall(message));
const time = new Date(message.time); 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 break
default: default:
break break
@@ -199,34 +203,34 @@ function Calls(props) {
} }
const handleNewer = () => { const handleNewer = () => {
if (positionRef.current) { if (positionRef.current) {
pageYOffset.current = {direction: "top", position: positionRef.current.clientHeight}; pageYOffset.current = { direction: "top", position: positionRef.current.clientHeight };
} }
if (!live) { if (!live) {
dispatch(getNewerCalls({})); 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);
} }
} }
}, [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(() => { useEffect(() => {
socket.on('connect', () => { socket.on('connect', () => {
console.log("Socket Connect"); console.log("Socket Connect");

143
frontend/src/Call/components/CallInfoPane.js
View File

@@ -1,19 +1,17 @@
import React, { useState } from "react"; import React, { useMemo, useEffect } from "react";
import { useCallLink } from "./CallLinks"; import { useCallLink } from "./CallLinks";
import {skipToken} from '@reduxjs/toolkit/query' import { skipToken } from '@reduxjs/toolkit/query'
import { useGetGroupsQuery, useGetTalkgroupsQuery } from '../../features/api/apiSlice' import { useGetSystemsQuery, useGetTalkgroupsQuery } from '../../features/api/apiSlice'
import { Link, useLocation, useParams, useNavigate } from 'react-router-dom'; import { useParams } from 'react-router-dom';
import { import {
Header, Header,
Divider, Divider,
List, List,
Segment,
Statistic, Statistic,
Icon, Icon,
Menu, Menu
Tab
} from "semantic-ui-react"; } from "semantic-ui-react";
import PlaylistBuilder from "./PlaylistBuilder"
// ---------------------------------------------------- // ----------------------------------------------------
function CallInfoPane(props) { function CallInfoPane(props) {
@@ -25,15 +23,23 @@ function CallInfoPane(props) {
let callTime = "-"; let callTime = "-";
let talkgroupNum = "-"; let talkgroupNum = "-";
let header = "Call Info" 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);
if (currentCall) {
const { data: talkgroupsData, isSuccess: isTalkgroupsSuccess } = useGetTalkgroupsQuery(currentCall?currentCall.shortName:skipToken);
if (currentCall) {
if ((talkgroupsData) && talkgroupsData.talkgroups[currentCall.talkgroupNum]) { if ((talkgroupsData) && talkgroupsData.talkgroups[currentCall.talkgroupNum]) {
header = talkgroupsData.talkgroups[currentCall.talkgroupNum].description; header = talkgroupsData.talkgroups[currentCall.talkgroupNum].description;
title = talkgroupsData.talkgroups[currentCall.talkgroupNum].description;
} else {
title = `TG: ${currentCall.talkgroupNum}`;
} }
const time = new Date(currentCall.time); const time = new Date(currentCall.time);
callTime = time.toLocaleTimeString(); callTime = time.toLocaleTimeString();
@@ -47,51 +53,82 @@ function CallInfoPane(props) {
talkgroupNum = currentCall.talkgroupNum; 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 ( return (
<> <>
<Header as='h1'>{header}</Header> <Header as='h1'>{header}</Header>
<List bulleted horizontal link> <List bulleted horizontal link>
{srcList} {srcList}
</List> </List>
<Divider /> <Divider />
<Statistic size='small'> <Statistic size='small'>
<Statistic.Label>Seconds</Statistic.Label> <Statistic.Label>Seconds</Statistic.Label>
<Statistic.Value>{callLength}</Statistic.Value> <Statistic.Value>{callLength}</Statistic.Value>
</Statistic> </Statistic>
<Statistic size='small'> <Statistic size='small'>
<Statistic.Label>Talkgroup</Statistic.Label> <Statistic.Label>Talkgroup</Statistic.Label>
<Statistic.Value>{talkgroupNum}</Statistic.Value> <Statistic.Value>{talkgroupNum}</Statistic.Value>
</Statistic> </Statistic>
<List divided verticalAlign='middle'> <List divided verticalAlign='middle'>
<List.Item> <List.Item>
<Icon name="wait" /> <Icon name="wait" />
<List.Content> <List.Content>
{callTime} {callTime}
</List.Content> </List.Content>
</List.Item> </List.Item>
<List.Item> <List.Item>
<Icon name="calendar outline" /> <Icon name="calendar outline" />
<List.Content> <List.Content>
{callDate} {callDate}
</List.Content> </List.Content>
</List.Item> </List.Item>
<List.Item> <List.Item>
<Icon name="cubes" /> <Icon name="cubes" />
<List.Content> <List.Content>
{callFreq} MHz {callFreq} MHz
</List.Content> </List.Content>
</List.Item> </List.Item>
</List> </List>
<Divider /> <Divider />
<Menu secondary fluid widths={2}> <Menu secondary fluid widths={2}>
<Menu.Item name="download" href={callDownload}><Icon name="download" />Download</Menu.Item> <Menu.Item name="download" href={callDownload}><Icon name="download" />Download</Menu.Item>
<Menu.Item name="link" href={callLink}><Icon name="at" />Link</Menu.Item> <Menu.Item name="link" href={callLink}><Icon name="at" />Link</Menu.Item>
</Menu> </Menu>
</> </>
); );
} }