mirror of
https://github.com/openmhz/trunk-server.git
synced 2026-11-12 08:47:40 -05:00
media info
This commit is contained in:
Luke Berndt
@@ -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");
|
||||
|
||||
@@ -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 (
|
||||
<>
|
||||
<Header as='h1'>{header}</Header>
|
||||
<List bulleted horizontal link>
|
||||
{srcList}
|
||||
</List>
|
||||
<Divider />
|
||||
<Statistic size='small'>
|
||||
<Statistic.Label>Seconds</Statistic.Label>
|
||||
<Statistic.Value>{callLength}</Statistic.Value>
|
||||
</Statistic>
|
||||
<Statistic size='small'>
|
||||
<Statistic.Label>Talkgroup</Statistic.Label>
|
||||
<Statistic.Value>{talkgroupNum}</Statistic.Value>
|
||||
</Statistic>
|
||||
<Header as='h1'>{header}</Header>
|
||||
<List bulleted horizontal link>
|
||||
{srcList}
|
||||
</List>
|
||||
<Divider />
|
||||
<Statistic size='small'>
|
||||
<Statistic.Label>Seconds</Statistic.Label>
|
||||
<Statistic.Value>{callLength}</Statistic.Value>
|
||||
</Statistic>
|
||||
<Statistic size='small'>
|
||||
<Statistic.Label>Talkgroup</Statistic.Label>
|
||||
<Statistic.Value>{talkgroupNum}</Statistic.Value>
|
||||
</Statistic>
|
||||
|
||||
<List divided verticalAlign='middle'>
|
||||
<List.Item>
|
||||
<Icon name="wait" />
|
||||
<List.Content>
|
||||
{callTime}
|
||||
</List.Content>
|
||||
</List.Item>
|
||||
<List.Item>
|
||||
<Icon name="calendar outline" />
|
||||
<List.Content>
|
||||
{callDate}
|
||||
</List.Content>
|
||||
</List.Item>
|
||||
<List.Item>
|
||||
<Icon name="cubes" />
|
||||
<List.Content>
|
||||
{callFreq} MHz
|
||||
</List.Content>
|
||||
</List.Item>
|
||||
</List>
|
||||
<Divider />
|
||||
<Menu secondary fluid widths={2}>
|
||||
<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>
|
||||
</>
|
||||
<List divided verticalAlign='middle'>
|
||||
<List.Item>
|
||||
<Icon name="wait" />
|
||||
<List.Content>
|
||||
{callTime}
|
||||
</List.Content>
|
||||
</List.Item>
|
||||
<List.Item>
|
||||
<Icon name="calendar outline" />
|
||||
<List.Content>
|
||||
{callDate}
|
||||
</List.Content>
|
||||
</List.Item>
|
||||
<List.Item>
|
||||
<Icon name="cubes" />
|
||||
<List.Content>
|
||||
{callFreq} MHz
|
||||
</List.Content>
|
||||
</List.Item>
|
||||
</List>
|
||||
<Divider />
|
||||
<Menu secondary fluid widths={2}>
|
||||
<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>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user