GitHub/trunk-server
1
0
Fork 0
mirror of https://github.com/openmhz/trunk-server.git synced 2026-11-12 16:57:39 -05:00
Code Issues Packages Projects Releases Wiki Activity

headings

Browse Source
This commit is contained in:
Luke Berndt
2021-02-17 22:05:14 -05:00
parent af2e291139
commit eb2414bda8
45 changed files with 205 additions and 253 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
.gitignore vendored
View File

@@ -6,3 +6,4 @@ account/.eslintcache
admin/.eslintcache admin/.eslintcache
frontend/.eslintcache frontend/.eslintcache
admin/.eslintcache admin/.eslintcache
data/*

3
README.md
View File

@@ -111,6 +111,9 @@ You can then browser to:
- openmhz.test - openmhz.test
- admin.openmhz.test - admin.openmhz.test
*Interesting Note*: Safari 13+ does not like the **.test** TLD and doesn't seem to want to store cookies from the TLD. It seems to work fine in production when you are using a real TLD. I guess use Chrome for local testing or a different TLD for testing, like local.
https://stackoverflow.com/questions/62023857/sharing-cookies-across-test-sub-domains-in-safari-13-not-possible
### Debugging React Apps using Hot Reloading ### Debugging React Apps using Hot Reloading
If you are trying to make changes to any of react frontends, it is a huge pain to have to compile to site and rebuild the container each time you make a change. Instead, simply run the react app in development mode. This will work for the frontends for the: If you are trying to make changes to any of react frontends, it is a huge pain to have to compile to site and rebuild the container each time you make a change. Instead, simply run the react app in development mode. This will work for the frontends for the:
- admin frontend - admin frontend

BIN
account/public/android-chrome-192x192.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.7 KiB

BIN
account/public/android-chrome-512x512.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 15 KiB

BIN
account/public/apple-touch-icon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.5 KiB

BIN
account/public/favicon-16x16.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 403 B

BIN
account/public/favicon-32x32.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 627 B

BIN
account/public/favicon.ico
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.5 KiB

After

Width:  |  Height:  |  Size: 15 KiB

10
account/public/index.html
View File

@@ -6,15 +6,15 @@
<meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" /> <meta name="theme-color" content="#000000" />
<meta <meta
name="description" name="%REACT_APP_SITE_NAME%"
content="Web site created using create-react-app" content="Listen to live Police and Fire radio broadcasts. Archived for 30 days and searchable."
/> />
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" /> <link rel="apple-touch-icon" href="%PUBLIC_URL%/apple-touch-icon.png" />
<!-- <!--
manifest.json provides metadata used when your web app is installed on a manifest.json provides metadata used when your web app is installed on a
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/ user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
--> -->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" /> <link rel="manifest" href="%PUBLIC_URL%/site.webmanifest" />
<!-- <!--
Notice the use of %PUBLIC_URL% in the tags above. Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build. It will be replaced with the URL of the `public` folder during the build.
@@ -24,7 +24,7 @@
work correctly both with client-side routing and a non-root public URL. work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`. Learn how to configure a non-root public URL by running `npm run build`.
--> -->
<title>React Redux App</title> <title>%REACT_APP_SITE_NAME%</title>
</head> </head>
<body> <body>
<noscript>You need to enable JavaScript to run this app.</noscript> <noscript>You need to enable JavaScript to run this app.</noscript>

BIN
account/public/logo192.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 4.1 KiB

BIN
account/public/logo512.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 12 KiB

25
account/public/manifest.json
View File

@@ -1,25 +0,0 @@
{
"short_name": "React App",
"name": "Create React App Sample",
"icons": [
{
"src": "favicon.ico",
"sizes": "64x64 32x32 24x24 16x16",
"type": "image/x-icon"
},
{
"src": "logo192.png",
"type": "image/png",
"sizes": "192x192"
},
{
"src": "logo512.png",
"type": "image/png",
"sizes": "512x512"
}
],
"start_url": ".",
"display": "standalone",
"theme_color": "#000000",
"background_color": "#ffffff"
}

1
account/public/site.webmanifest Normal file
View File

@@ -0,0 +1 @@
{"name":"","short_name":"","icons":[{"src":"/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffffff","background_color":"#ffffff","display":"standalone"}

8
account/server/config/express.js
View File

@@ -28,8 +28,8 @@ module.exports = function(app, passport) {
const sess = { const sess = {
/*saveUninitialized: false, /*saveUninitialized: false,
resave: false,*/ resave: false,*/
resave: true, resave: false,
saveUninitialized: true, saveUninitialized: false,
secret: secrets.sessionSecret, secret: secrets.sessionSecret,
proxy: true, proxy: true,
name: "sessionId", name: "sessionId",
@@ -48,12 +48,12 @@ module.exports = function(app, passport) {
console.log('--------------------------'); console.log('--------------------------');
console.log('===> 😊 Starting Server . . .'); console.log('===> 😊 Starting Server . . .');
console.log('===> Environment: ' + node_env); console.log('===> Environment: ' + node_env);
/*if(node_env === 'production') { if(node_env === 'production') {
console.log('===> 🚦 Note: In order for authentication to work in production'); console.log('===> 🚦 Note: In order for authentication to work in production');
console.log('===> you will need a secure HTTPS connection'); console.log('===> you will need a secure HTTPS connection');
sess.cookie.secure = true; // Serve secure cookies sess.cookie.secure = true; // Serve secure cookies
sess.cookie.httpOnly = false; sess.cookie.httpOnly = false;
}*/ }
app.use(session(sess)) app.use(session(sess))

2
account/server/controllers/users.js
View File

@@ -21,7 +21,7 @@ exports.isLoggedIn = function(req, res, next) {
exports.authenticated = function(req, res, next) { exports.authenticated = function(req, res, next) {
res.header('Cache-Control', 'private, no-cache, no-store, must-revalidate'); res.header('Cache-Control', 'private, no-cache, no-store, must-revalidate');
//console.log("account/server/controllers/users.js - exports.authenticated() Auth check for user: " + req.user + " is: " + req.isAuthenticated()); console.log("account/server/controllers/users.js - exports.authenticated() Auth check for user: " + req.user + " is: " + req.isAuthenticated());
if (req.isAuthenticated()) { if (req.isAuthenticated()) {
var clientUser = (({ var clientUser = (({
firstName, firstName,

BIN
admin/public/android-chrome-192x192.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.7 KiB

BIN
admin/public/android-chrome-512x512.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 15 KiB

BIN
admin/public/apple-touch-icon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.5 KiB

BIN
admin/public/favicon-16x16.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 403 B

BIN
admin/public/favicon-32x32.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 627 B

BIN
admin/public/favicon.ico
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.5 KiB

After

Width:  |  Height:  |  Size: 15 KiB

10
admin/public/index.html
View File

@@ -6,15 +6,15 @@
<meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" /> <meta name="theme-color" content="#000000" />
<meta <meta
name="description" name="%REACT_APP_SITE_NAME%"
content="Web site created using create-react-app" content="Listen to live Police and Fire radio broadcasts. Archived for 30 days and searchable."
/> />
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" /> <link rel="apple-touch-icon" href="%PUBLIC_URL%/apple-touch-icon.png" />
<!-- <!--
manifest.json provides metadata used when your web app is installed on a manifest.json provides metadata used when your web app is installed on a
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/ user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
--> -->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" /> <link rel="manifest" href="%PUBLIC_URL%/site.webmanifest" />
<!-- <!--
Notice the use of %PUBLIC_URL% in the tags above. Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build. It will be replaced with the URL of the `public` folder during the build.
@@ -24,7 +24,7 @@
work correctly both with client-side routing and a non-root public URL. work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`. Learn how to configure a non-root public URL by running `npm run build`.
--> -->
<title>React Redux App</title> <title>%REACT_APP_SITE_NAME%</title>
</head> </head>
<body> <body>
<noscript>You need to enable JavaScript to run this app.</noscript> <noscript>You need to enable JavaScript to run this app.</noscript>

BIN
admin/public/logo192.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 4.1 KiB

BIN
admin/public/logo512.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 12 KiB

25
admin/public/manifest.json
View File

@@ -1,25 +0,0 @@
{
"short_name": "React App",
"name": "Create React App Sample",
"icons": [
{
"src": "favicon.ico",
"sizes": "64x64 32x32 24x24 16x16",
"type": "image/x-icon"
},
{
"src": "logo192.png",
"type": "image/png",
"sizes": "192x192"
},
{
"src": "logo512.png",
"type": "image/png",
"sizes": "512x512"
}
],
"start_url": ".",
"display": "standalone",
"theme_color": "#000000",
"background_color": "#ffffff"
}

1
admin/public/site.webmanifest Normal file
View File

@@ -0,0 +1 @@
{"name":"","short_name":"","icons":[{"src":"/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffffff","background_color":"#ffffff","display":"standalone"}

8
admin/server/config/express.js
View File

@@ -26,8 +26,8 @@ module.exports = function(app, passport) {
app.use(express.static(path.join(process.cwd(), 'public'))); app.use(express.static(path.join(process.cwd(), 'public')));
const sess = { const sess = {
resave: true, resave: false,
saveUninitialized: true, saveUninitialized: false,
secret: secrets.sessionSecret, secret: secrets.sessionSecret,
proxy: true, proxy: true,
name: "sessionId", name: "sessionId",
@@ -46,12 +46,12 @@ module.exports = function(app, passport) {
console.log('--------------------------'); console.log('--------------------------');
console.log('===> 😊 Starting Server . . .'); console.log('===> 😊 Starting Server . . .');
console.log('===> Environment: ' + node_env); console.log('===> Environment: ' + node_env);
/*
if(node_env === 'production') { if(node_env === 'production') {
console.log('===> 🚦 Note: In order for authentication to work in production'); console.log('===> 🚦 Note: In order for authentication to work in production');
console.log('===> you will need a secure HTTPS connection'); console.log('===> you will need a secure HTTPS connection');
sess.cookie.secure = true; // Serve secure cookies sess.cookie.secure = true; // Serve secure cookies
}*/ }
app.use(session(sess)) app.use(session(sess))

3
docker-compose.yml
View File

@@ -55,6 +55,7 @@ services:
pid: "host" pid: "host"
environment: environment:
- MONGO_NODE_DRIVER_HOST=mongo - MONGO_NODE_DRIVER_HOST=mongo
- NODE_ENV
- REACT_APP_BACKEND_SERVER - REACT_APP_BACKEND_SERVER
- REACT_APP_ADMIN_SERVER - REACT_APP_ADMIN_SERVER
- REACT_APP_FRONTEND_SERVER - REACT_APP_FRONTEND_SERVER
@@ -98,6 +99,7 @@ services:
- REACT_APP_FRONTEND_SERVER - REACT_APP_FRONTEND_SERVER
- REACT_APP_SITE_NAME - REACT_APP_SITE_NAME
- MONGO_NODE_DRIVER_HOST=mongo - MONGO_NODE_DRIVER_HOST=mongo
- NODE_ENV
depends_on: depends_on:
- mongo - mongo
networks: networks:
@@ -132,6 +134,7 @@ services:
- REACT_APP_SITE_NAME - REACT_APP_SITE_NAME
- REACT_APP_ADMIN_EMAIL - REACT_APP_ADMIN_EMAIL
- REACT_APP_COOKIE_DOMAIN - REACT_APP_COOKIE_DOMAIN
- NODE_ENV
depends_on: depends_on:
- mongo - mongo
networks: networks:

2
frontend/.eslintcache
View File

File diff suppressed because one or more lines are too long

BIN
frontend/public/android-chrome-192x192.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.7 KiB

BIN
frontend/public/android-chrome-512x512.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 15 KiB

BIN
frontend/public/apple-touch-icon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.5 KiB

BIN
frontend/public/favicon-16x16.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 403 B

BIN
frontend/public/favicon-32x32.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 627 B

BIN
frontend/public/favicon.ico
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.5 KiB

After

Width:  |  Height:  |  Size: 15 KiB

10
frontend/public/index.html
View File

@@ -6,15 +6,15 @@
<meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" /> <meta name="theme-color" content="#000000" />
<meta <meta
name="description" name="%REACT_APP_SITE_NAME%"
content="Web site created using create-react-app" content="Listen to live Police and Fire radio broadcasts. Archived for 30 days and searchable."
/> />
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" /> <link rel="apple-touch-icon" href="%PUBLIC_URL%/apple-touch-icon.png" />
<!-- <!--
manifest.json provides metadata used when your web app is installed on a manifest.json provides metadata used when your web app is installed on a
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/ user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
--> -->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" /> <link rel="manifest" href="%PUBLIC_URL%/site.webmanifest" />
<!-- <!--
Notice the use of %PUBLIC_URL% in the tags above. Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build. It will be replaced with the URL of the `public` folder during the build.
@@ -28,7 +28,7 @@
<script> <script>
window.socket = io('%REACT_APP_BACKEND_SERVER%'); window.socket = io('%REACT_APP_BACKEND_SERVER%');
</script> </script>
<title>React Redux App</title> <title>%REACT_APP_SITE_NAME%</title>
</head> </head>
<body> <body>
<noscript>You need to enable JavaScript to run this app.</noscript> <noscript>You need to enable JavaScript to run this app.</noscript>

BIN
frontend/public/logo192.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 4.1 KiB

BIN
frontend/public/logo512.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 12 KiB

25
frontend/public/manifest.json
View File

@@ -1,25 +0,0 @@
{
"short_name": "React App",
"name": "Create React App Sample",
"icons": [
{
"src": "favicon.ico",
"sizes": "64x64 32x32 24x24 16x16",
"type": "image/x-icon"
},
{
"src": "logo192.png",
"type": "image/png",
"sizes": "192x192"
},
{
"src": "logo512.png",
"type": "image/png",
"sizes": "512x512"
}
],
"start_url": ".",
"display": "standalone",
"theme_color": "#000000",
"background_color": "#ffffff"
}

1
frontend/public/site.webmanifest Normal file
View File

@@ -0,0 +1 @@
{"name":"","short_name":"","icons":[{"src":"/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffffff","background_color":"#ffffff","display":"standalone"}

6
frontend/src/Call/CallItem.js
View File

@@ -99,7 +99,11 @@ render() {
} }
if (this.props.activeCall) { if (this.props.activeCall) {
rowSelected={positive: true} rowSelected={positive: true,
color: "blue",
key: "blue",
inverted: true
}
} }
var talkgroup; var talkgroup;
if ((typeof this.props.talkgroups == 'undefined') || (typeof this.props.talkgroups[call.talkgroupNum] == 'undefined')) { if ((typeof this.props.talkgroups == 'undefined') || (typeof this.props.talkgroups[call.talkgroupNum] == 'undefined')) {

301
frontend/src/Call/CallPlayer.js
View File

@@ -1,5 +1,5 @@
import React from "react"; import React from "react";
import {Link} from 'react-router-dom'; import { Link } from 'react-router-dom';
import MediaPlayer from "./MediaPlayer"; import MediaPlayer from "./MediaPlayer";
import FilterModal from "./FilterModalContainer"; import FilterModal from "./FilterModalContainer";
import GroupModal from "./GroupModalContainer"; import GroupModal from "./GroupModalContainer";
@@ -16,7 +16,7 @@ import {
Icon, Icon,
Sidebar Sidebar
} from "semantic-ui-react"; } from "semantic-ui-react";
import {Waypoint} from 'react-waypoint'; import { Waypoint } from 'react-waypoint';
import "./CallPlayer.css"; import "./CallPlayer.css";
//import setupSocket from '../socket/SetupSocket.js' //import setupSocket from '../socket/SetupSocket.js'
import queryString from '../query-string'; import queryString from '../query-string';
@@ -47,6 +47,7 @@ class CallPlayer extends React.Component {
this.handleCalendarToggle = this.handleCalendarToggle.bind(this); this.handleCalendarToggle = this.handleCalendarToggle.bind(this);
this.handleCalendarClose = this.handleCalendarClose.bind(this); this.handleCalendarClose = this.handleCalendarClose.bind(this);
this.handleLiveToggle = this.handleLiveToggle.bind(this); this.handleLiveToggle = this.handleLiveToggle.bind(this);
this.handlePlayPause = this.handlePlayPause.bind(this);
this.getFilter = this.getFilter.bind(this); this.getFilter = this.getFilter.bind(this);
this.socket = window.socket; this.socket = window.socket;
this.setupSocket = this.setupSocket.bind(this); this.setupSocket = this.setupSocket.bind(this);
@@ -74,6 +75,9 @@ class CallPlayer extends React.Component {
switchAutoPlay = () => this.setState({ switchAutoPlay = () => this.setState({
autoPlay: !this.state.autoPlay autoPlay: !this.state.autoPlay
}) })
handlePlayPause = (playing) => this.setState({
isPlaying: playing
})
handlePusherClick = () => { handlePusherClick = () => {
const { sidebarOpened } = this.state const { sidebarOpened } = this.state
@@ -90,13 +94,13 @@ class CallPlayer extends React.Component {
supportVisible: !this.state.supportVisible supportVisible: !this.state.supportVisible
}) })
handleContextRef = contextRef => this.setState({contextRef}) handleContextRef = contextRef => this.setState({ contextRef })
changeUrl = url => this.props.callActions.changeUrl(url) changeUrl = url => this.props.callActions.changeUrl(url)
loadNewerCalls() { loadNewerCalls() {
if (!this.props.callsIsWaiting) { if (!this.props.callsIsWaiting) {
console.log("Loading Newer Calls"); console.log("Loading Newer Calls");
this.props.callActions.fetchNewerCalls( this.props.newestCallTime.getTime()); this.props.callActions.fetchNewerCalls(this.props.newestCallTime.getTime());
} else { } else {
console.log("Calls still loading - can't load newer calls"); console.log("Calls still loading - can't load newer calls");
} }
@@ -105,7 +109,7 @@ class CallPlayer extends React.Component {
loadOlderCalls() { loadOlderCalls() {
if (!this.props.callsIsWaiting) { if (!this.props.callsIsWaiting) {
console.log("Loading Older Calls"); console.log("Loading Older Calls");
this.props.callActions.fetchOlderCalls( this.props.oldestCallTime.getTime()); this.props.callActions.fetchOlderCalls(this.props.oldestCallTime.getTime());
} else { } else {
console.log("Calls still loading - can't load older calls"); console.log("Calls still loading - can't load older calls");
} }
@@ -116,16 +120,16 @@ class CallPlayer extends React.Component {
}) })
getFilter() { getFilter() {
var filter = {type: 'all', code: "", filterStarred: false}; var filter = { type: 'all', code: "", filterStarred: false };
switch(this.props.filterType) { switch (this.props.filterType) {
case 1: case 1:
filter.type = "group"; filter.type = "group";
filter.code = this.props.filterGroupId; filter.code = this.props.filterGroupId;
break; break;
case 2: case 2:
filter.type = "talkgroup"; filter.type = "talkgroup";
filter.code = this.props.filterTalkgroups; filter.code = this.props.filterTalkgroups;
break; break;
default: default:
case 0: case 0:
filter.type = "all"; filter.type = "all";
@@ -142,13 +146,13 @@ class CallPlayer extends React.Component {
this.socket.on('new message', this.addCall); this.socket.on('new message', this.addCall);
this.socket.on('reconnect', (attempts) => { this.socket.on('reconnect', (attempts) => {
console.log("Socket Reconnected after attempts: " + attempts); // true console.log("Socket Reconnected after attempts: " + attempts); // true
if (this.props.live) { if (this.props.live) {
var filter = this.getFilter(); var filter = this.getFilter();
this.startSocket(this.props.shortName, filter.type, filter.code, filter.filterStarred); this.startSocket(this.props.shortName, filter.type, filter.code, filter.filterStarred);
} }
}) })
} }
startSocket(shortName, filterType="", filterCode="", filterStarred=false) { startSocket(shortName, filterType = "", filterCode = "", filterStarred = false) {
this.socket.emit("start", { this.socket.emit("start", {
filterCode: filterCode, filterCode: filterCode,
filterType: filterType, filterType: filterType,
@@ -157,14 +161,14 @@ class CallPlayer extends React.Component {
shortName: shortName shortName: shortName
}); });
} }
stopSocket(){ stopSocket() {
this.socket.emit("stop"); this.socket.emit("stop");
} }
handleLiveToggle() { handleLiveToggle() {
if (!this.props.live) { if (!this.props.live) {
this.props.callActions.setDateFilter(false); this.props.callActions.setDateFilter(false);
this.props.callActions.setLive(false); this.props.callActions.setLive(false);
this.setState({ callUrl: "", callId: false}); this.setState({ callUrl: "", callId: false });
this.props.callActions.fetchCalls(); this.props.callActions.fetchCalls();
var filter = this.getFilter(); var filter = this.getFilter();
this.startSocket(this.props.shortName, filter.type, filter.code, filter.filterStarred); this.startSocket(this.props.shortName, filter.type, filter.code, filter.filterStarred);
@@ -175,26 +179,26 @@ class CallPlayer extends React.Component {
var search = "?" var search = "?"
switch (props.filterType) { switch (props.filterType) {
case 1: case 1:
search = search + `filter-type=group&filter-code=${props.filterGroupId}`; search = search + `filter-type=group&filter-code=${props.filterGroupId}`;
break; break;
case 2: case 2:
search = search + `filter-type=talkgroup&filter-code=${props.filterTalkgroups}`; search = search + `filter-type=talkgroup&filter-code=${props.filterTalkgroups}`;
break; break;
default: default:
case 0: case 0:
break; break;
} }
if (props.filterDate) { if (props.filterDate) {
if (search.length!==1) { if (search.length !== 1) {
search = search + '&'; search = search + '&';
} }
search = search + `time=${props.filterDate}`; search = search + `time=${props.filterDate}`;
} }
if (props.filterStarred) { if (props.filterStarred) {
if (search.length!==1) { if (search.length !== 1) {
search = search + '&'; search = search + '&';
} }
search = search + `starred=true`; search = search + `starred=true`;
@@ -214,7 +218,7 @@ class CallPlayer extends React.Component {
this.props.callActions.setLive(false); this.props.callActions.setLive(false);
this.props.callActions.fetchCalls(); this.props.callActions.fetchCalls();
this.setState({ callUrl: "", callId: false}); this.setState({ callUrl: "", callId: false });
this.stopSocket(); this.stopSocket();
//this.socket.close(); //this.socket.close();
@@ -225,7 +229,7 @@ class CallPlayer extends React.Component {
this.setState({ this.setState({
groupVisible: !this.state.groupVisible groupVisible: !this.state.groupVisible
}); });
this.props.callActions.fetchCalls(); this.props.callActions.fetchCalls();
} }
handleSupportClose() { handleSupportClose() {
@@ -239,7 +243,7 @@ class CallPlayer extends React.Component {
filterVisible: !this.state.filterVisible filterVisible: !this.state.filterVisible
}); });
if (didUpdate) { if (didUpdate) {
this.setState({callUrl: "", callId: false}); this.setState({ callUrl: "", callId: false });
this.props.callActions.fetchCalls(); this.props.callActions.fetchCalls();
} }
} }
@@ -252,17 +256,16 @@ class CallPlayer extends React.Component {
const nextCall = this.props.callsById[nextCallId]; const nextCall = this.props.callsById[nextCallId];
var callUrl = nextCall.url; var callUrl = nextCall.url;
this.setState({callUrl: callUrl, callId: nextCallId, sourceIndex: 0, isPlaying: true}, () => { audio.playSource(callUrl)}); //scrollToComponent(this.currentCallRef.current); this.setState({ callUrl: callUrl, callId: nextCallId, sourceIndex: 0, isPlaying: true }, () => { audio.playSource(callUrl) }); //scrollToComponent(this.currentCallRef.current);
if (this.currentCallRef.current) { if (this.currentCallRef.current) {
this.currentCallRef.current.scrollIntoView({ this.currentCallRef.current.scrollIntoView({
behavior: "smooth", behavior: "smooth",
block: "center", block: "center",
}); });
} }
this.props.callActions.fetchCallInfo( nextCallId); this.props.callActions.fetchCallInfo(nextCallId);
} else { } else {
this.setState({isPlaying: false}); this.setState({ isPlaying: false });
} }
} }
@@ -274,8 +277,8 @@ class CallPlayer extends React.Component {
callId: data.call._id, callId: data.call._id,
sourceIndex: 0, sourceIndex: 0,
isPlaying: true isPlaying: true
}, () => { audio.playSource(callUrl);}); //scrollToComponent(this.currentCallRef.current); }, () => { audio.playSource(callUrl); }); //scrollToComponent(this.currentCallRef.current);
this.props.callActions.fetchCallInfo( data.call._id); this.props.callActions.fetchCallInfo(data.call._id);
} }
addCall(data) { addCall(data) {
@@ -286,7 +289,13 @@ class CallPlayer extends React.Component {
this.props.callActions.addCall(message); this.props.callActions.addCall(message);
const newCall = this.props.callsById[this.props.callsAllIds[0]]; const newCall = this.props.callsById[this.props.callsAllIds[0]];
if (!this.state.isPlaying && this.state.autoPlay) { if (!this.state.isPlaying && this.state.autoPlay) {
this.playCall({call: newCall}); this.playCall({ call: newCall });
if (this.currentCallRef.current) {
this.currentCallRef.current.scrollIntoView({
behavior: "smooth",
block: "center",
});
}
} }
break break
default: default:
@@ -313,8 +322,8 @@ class CallPlayer extends React.Component {
// is there a star filter? // is there a star filter?
if (uri.hasOwnProperty('starred')) { if (uri.hasOwnProperty('starred')) {
const starred = uri['starred']; const starred = uri['starred'];
filter.filterStarred = starred === 'true'? true : false; filter.filterStarred = starred === 'true' ? true : false;
this.setState({urlOptions: true}); this.setState({ urlOptions: true });
} }
// is there a time based filter? // is there a time based filter?
@@ -322,12 +331,13 @@ class CallPlayer extends React.Component {
const date = new Date(parseInt(uri['time'])); const date = new Date(parseInt(uri['time']));
filter.filterDate = date.getTime(); filter.filterDate = date.getTime();
filter.live = false; filter.live = false;
this.setState({urlOptions: true}); this.setState({ urlOptions: true });
} }
// is this just for one call? // is this just for one call?
if (uri.hasOwnProperty('call-id')) { if (uri.hasOwnProperty('call-id')) {
const _id = uri['call-id']; const _id = uri['call-id'];
const currentCall = this.props.callsById[this.state.callId];
filter.live = false; filter.live = false;
this.setState({ this.setState({
callId: _id, callId: _id,
@@ -335,31 +345,38 @@ class CallPlayer extends React.Component {
urlOptions: true, urlOptions: true,
autoPlay: false autoPlay: false
}); });
this.props.callActions.fetchCallInfo( _id); this.props.callActions.fetchCallInfo(_id);
if (this.currentCallRef.current) {
this.currentCallRef.current.scrollIntoView({
behavior: "smooth",
block: "center",
});
}
} }
var filterType="all"; var filterType = "all";
var filterCode=""; var filterCode = "";
// is there a Filter set? // is there a Filter set?
if ((uri.hasOwnProperty('filter-code')) && (uri.hasOwnProperty('filter-type'))) { if ((uri.hasOwnProperty('filter-code')) && (uri.hasOwnProperty('filter-type'))) {
this.setState({urlOptions: true}); this.setState({ urlOptions: true });
// The Filter is a group // The Filter is a group
if (uri['filter-type'] === "group") { if (uri['filter-type'] === "group") {
filter.filterType = 1; filter.filterType = 1;
filter.filterGroupId = uri["filter-code"]; filter.filterGroupId = uri["filter-code"];
filterType="group"; filterType = "group";
filterCode = uri["filter-code"]; filterCode = uri["filter-code"];
} }
// The Filter is talkgroups // The Filter is talkgroups
if (uri['filter-type'] === 'talkgroup') { if (uri['filter-type'] === 'talkgroup') {
const tg = uri["filter-code"].split(',').map(Number); const tg = uri["filter-code"].split(',').map(Number);
filter.filterType=2; filter.filterType = 2;
filter.filterTalkgroups=tg; filter.filterTalkgroups = tg;
filterType="talkgroup"; filterType = "talkgroup";
filterCode = tg; filterCode = tg;
} }
} }
@@ -380,13 +397,13 @@ class CallPlayer extends React.Component {
while (i--) { while (i--) {
if (a1[i] !== a2[i]) if (a1[i] !== a2[i])
return false; return false;
} }
return true return true
} }
componentWillUpdate(nextProps) { componentWillUpdate(nextProps) {
if (!this.props.groups && nextProps.groups) { if (!this.props.groups && nextProps.groups) {
if (!this.state.urlOptions && (nextProps.groups.length > 0 )) { if (!this.state.urlOptions && (nextProps.groups.length > 0)) {
this.setState({ this.setState({
groupVisible: true groupVisible: true
}); });
@@ -399,30 +416,30 @@ class CallPlayer extends React.Component {
var filterCode = ''; var filterCode = '';
switch (nextProps.filterType) { switch (nextProps.filterType) {
case 1: case 1:
typeString = 'group'; typeString = 'group';
filterCode = nextProps.filterGroupId; filterCode = nextProps.filterGroupId;
break; break;
case 2: case 2:
typeString = 'talkgroup'; typeString = 'talkgroup';
filterCode = nextProps.filterTalkgroups; filterCode = nextProps.filterTalkgroups;
break; break;
default: default:
case 0: case 0:
typeString = "all"; typeString = "all";
filterCode = ''; filterCode = '';
break; break;
} }
this.updateUri(nextProps); this.updateUri(nextProps);
if (this.props.live) { if (this.props.live) {
this.startSocket(this.props.shortName, typeString, filterCode, nextProps.filterStarred); this.startSocket(this.props.shortName, typeString, filterCode, nextProps.filterStarred);
} }
} }
const callsChanged = nextProps.callsAllIds[0] !== this.props.callsAllIds[0]; const callsChanged = nextProps.callsAllIds[0] !== this.props.callsAllIds[0];
if (callsChanged) { if (callsChanged) {
const {contextRef} = this.state; const { contextRef } = this.state;
this.scrollPos = contextRef.scrollTop; this.scrollPos = contextRef.scrollTop;
this.prevHeight = contextRef.clientHeight; this.prevHeight = contextRef.clientHeight;
this.autoScroll = true; this.autoScroll = true;
@@ -430,31 +447,25 @@ class CallPlayer extends React.Component {
if (this.state.callId && !this.state.callUrl) { if (this.state.callId && !this.state.callUrl) {
const call = this.props.callsById[this.state.callId]; const call = this.props.callsById[this.state.callId];
if (call) { if (call) {
this.setState({callUrl: call.url }); this.setState({ callUrl: call.url });
} }
} }
} }
componentDidUpdate(prevProps, prevState) { componentDidUpdate(prevProps, prevState) {
const {contextRef} = this.state const { contextRef } = this.state
//console.log( contextRef.clientHeight - this.prevHeight ); //console.log( contextRef.clientHeight - this.prevHeight );
if (this.autoScroll) { if (this.autoScroll) {
this.autoScroll = false; this.autoScroll = false;
window.scrollBy(0, contextRef.clientHeight - this.prevHeight); window.scrollBy(0, contextRef.clientHeight - this.prevHeight);
} }
if (this.state.callId != prevState.callId) { }
/*this.currentCallRef.current.scrollIntoView({
behavior: "smooth",
block: "start",
});*/
}
}
//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
render() { render() {
const {contextRef} = this.state const { contextRef } = this.state
const { sidebarOpened } = this.state const { sidebarOpened } = this.state
var archiveLabel = ""; var archiveLabel = "";
if (this.props.filterDate) { if (this.props.filterDate) {
@@ -473,7 +484,7 @@ class CallPlayer extends React.Component {
callInfoHeader = this.props.talkgroups[currentCall.talkgroupNum].description; callInfoHeader = this.props.talkgroups[currentCall.talkgroupNum].description;
} }
const callDate = new Date(currentCall.time); const callDate = new Date(currentCall.time);
callLink = "/system/" + this.props.shortName + "?call-id=" + currentCall._id + "&time=" + (callDate.getTime()+1); callLink = "/system/" + this.props.shortName + "?call-id=" + currentCall._id + "&time=" + (callDate.getTime() + 1);
callDownload = currentCall.url; callDownload = currentCall.url;
} }
var archive = process.env.REACT_APP_ARCHIVE_DAYS var archive = process.env.REACT_APP_ARCHIVE_DAYS
@@ -497,87 +508,87 @@ class CallPlayer extends React.Component {
)) ))
}*/ }*/
return ( return (
<div ref={this.handleContextRef}> <div ref={this.handleContextRef}>
<FilterModal shortName={this.props.shortName} open={this.state.filterVisible} onClose={this.handleFilterClose}/> <FilterModal shortName={this.props.shortName} open={this.state.filterVisible} onClose={this.handleFilterClose} />
<CalendarModal open={this.state.calendarVisible} onClose={this.handleCalendarClose} archive={archive} key={this.props.shortName}/> <CalendarModal open={this.state.calendarVisible} onClose={this.handleCalendarClose} archive={archive} key={this.props.shortName} />
<GroupModal shortName={this.props.shortName} open={this.state.groupVisible} onClose={this.handleGroupClose}/> <GroupModal shortName={this.props.shortName} open={this.state.groupVisible} onClose={this.handleGroupClose} />
<SupportModal open={this.state.supportVisible} onClose={this.handleSupportClose}/> <SupportModal open={this.state.supportVisible} onClose={this.handleSupportClose} />
<Sidebar as={Menu} animation='overlay' inverted vertical visible={sidebarOpened} <Sidebar as={Menu} animation='overlay' inverted vertical visible={sidebarOpened}
onClick={this.handlePusherClick} duration={50} width='thin'> onClick={this.handlePusherClick} duration={50} width='thin'>
<Menu.Item onClick={this.handlePusherClick} > <Menu.Item onClick={this.handlePusherClick} >
<span> </span><Icon name="close" inverted={true} link={true} size='small'/></Menu.Item> <span> </span><Icon name="close" inverted={true} link={true} size='small' /></Menu.Item>
<Link to="/"><Menu.Item link>Home</Menu.Item></Link> <Link to="/"><Menu.Item link>Home</Menu.Item></Link>
<Link to="/systems"><Menu.Item link>Systems</Menu.Item></Link> <Link to="/systems"><Menu.Item link>Systems</Menu.Item></Link>
<Link to="/about"><Menu.Item link>About</Menu.Item></Link> <Link to="/about"><Menu.Item link>About</Menu.Item></Link>
</Sidebar> </Sidebar>
<Menu fixed="top"> <Menu fixed="top">
<Menu.Item onClick={this.handleSidebarToggle}> <Menu.Item onClick={this.handleSidebarToggle}>
<Icon name='sidebar' /> <Icon name='sidebar' />
</Menu.Item> </Menu.Item>
<Menu.Item name='filter-btn' onClick={this.handleFilterToggle}> <Menu.Item name='filter-btn' onClick={this.handleFilterToggle}>
<Icon name="filter"/> <Icon name="filter" />
<span className="desktop-only">Filter</span> <span className="desktop-only">Filter</span>
<Label horizontal={true} color="grey" className="desktop-only">{filterLabel}</Label> <Label horizontal={true} color="grey" className="desktop-only">{filterLabel}</Label>
</Menu.Item> </Menu.Item>
<Container className="desktop-only" textAlign='center' style={{fontSize:'1.5rem', paddingLeft: '1em', paddingTop: '.5em'}}> <Container className="desktop-only" textAlign='center' style={{ fontSize: '1.5rem', paddingLeft: '1em', paddingTop: '.5em' }}>
{this.props.system &&this.props.system.name} {this.props.system && this.props.system.name}
</Container>
<Menu.Menu position="right">
<Menu.Item name='archive-btn' onClick={this.handleCalendarToggle} active={!this.props.live}>
<Icon name="calendar" />
<span className="desktop-only">
{
archiveLabel
? archiveLabel
: "Archive"
}
</span>
</Menu.Item>
<Menu.Item name='live-btn' onClick={this.handleLiveToggle} active={this.props.live}>
<Icon name="unmute" />
<span className="desktop-only">Live</span>
</Menu.Item>
</Menu.Menu>
</Menu>
<Container className="main">
<Sidebar.Pushable>
<Sidebar.Pusher
onClick={this.handlePusherClick}
style={{ minHeight: '100vh' }}
>
<Waypoint onEnter={this.loadNewerCalls} />
<ListCalls callsAllIds={this.props.callsAllIds} currentCallRef={this.currentCallRef} callsById={this.props.callsById} activeCallId={this.state.callId} talkgroups={this.props.talkgroups} playCall={this.playCall} />
</Sidebar.Pusher>
</Sidebar.Pushable>
<Waypoint onEnter={this.loadOlderCalls} />
<Rail position='right' className="desktop-only" dimmed={sidebarOpened ? "true" : "false"} >
<Sticky context={contextRef} offset={60}>
<CallInfo call={currentCall} header={callInfoHeader} />
</Sticky>
</Rail>
</Container> </Container>
<Menu.Menu position="right">
<Menu.Item name='archive-btn' onClick={this.handleCalendarToggle} active={!this.props.live}>
<Icon name="calendar"/>
<span className="desktop-only">
{
archiveLabel
? archiveLabel
: "Archive"
}
</span>
</Menu.Item>
<Menu.Item name='live-btn' onClick={this.handleLiveToggle} active={this.props.live}>
<Icon name="unmute"/>
<span className="desktop-only">Live</span>
</Menu.Item>
</Menu.Menu>
</Menu>
<Menu fixed="bottom" compact inverted >
<Menu.Item active={this.state.autoPlay} onClick={() => this.switchAutoPlay()}><Icon name="level up" /><span className="desktop-only">Autoplay</span></Menu.Item>
<MediaPlayer ref={this.audioRef} call={currentCall} onEnded={this.callEnded} onPlayPause={this.handlePlayPause}/>
<Menu.Menu position="right" className="desktop-only">
<Menu.Item onClick={this.handleSupportToggle}><Icon name="coffee" />Support OpenMHz</Menu.Item>
<Menu.Item><a href={callDownload}><Icon name="download" />Download</a></Menu.Item>
<Menu.Item><a href={callLink}><Icon name="at" />Link</a></Menu.Item>
</Menu.Menu>
</Menu>
</div>
<Container className="main">
<Sidebar.Pushable>
<Sidebar.Pusher
onClick={this.handlePusherClick}
style={{ minHeight: '100vh' }}
>
<Waypoint onEnter={this.loadNewerCalls}/>
<ListCalls callsAllIds={this.props.callsAllIds} currentCallRef={this.currentCallRef} callsById={this.props.callsById} activeCallId={this.state.callId} talkgroups={this.props.talkgroups} playCall={this.playCall} />
</Sidebar.Pusher>
</Sidebar.Pushable>
<Waypoint onEnter={this.loadOlderCalls}/>
<Rail position='right' className="desktop-only" dimmed={sidebarOpened ? "true" : "false"} >
<Sticky context={contextRef} offset={60}>
<CallInfo call={currentCall} header={callInfoHeader} />
</Sticky>
</Rail>
</Container>
<Menu fixed="bottom" compact inverted >
<Menu.Item active={this.state.autoPlay} onClick={() => this.switchAutoPlay()}><Icon name="level up"/><span className="desktop-only">Autoplay</span></Menu.Item>
<MediaPlayer ref={this.audioRef} call={currentCall} onEnded={this.callEnded}/>
<Menu.Menu position="right" className="desktop-only">
<Menu.Item onClick={this.handleSupportToggle}><Icon name="coffee"/>Support OpenMHz</Menu.Item>
<Menu.Item><a href={callDownload}><Icon name="download"/>Download</a></Menu.Item>
<Menu.Item><a href={callLink}><Icon name="at"/>Link</a></Menu.Item>
</Menu.Menu>
</Menu>
</div>
); );
} }
} }

4
frontend/src/Call/MediaPlayer.js
View File

@@ -23,8 +23,8 @@ class MediaPlayer extends React.Component {
isPlaying: false isPlaying: false
} }
} }
handlePause = () => { this.setState({isPlaying: false}); } handlePause = () => { this.setState({isPlaying: false}); this.props.onPlayPause(false); }
handlePlay = () => { this.setState({isPlaying: true}); } handlePlay = () => { this.setState({isPlaying: true}); this.props.onPlayPause(true); }
playPause = () => {const audio = this.audioRef.current.audioEl.current; if (this.state.isPlaying) {audio.pause();} else {audio.play();}} playPause = () => {const audio = this.audioRef.current.audioEl.current; if (this.state.isPlaying) {audio.pause();} else {audio.play();}}
playSource(callUrl) { playSource(callUrl) {
const audio = this.audioRef.current.audioEl.current; const audio = this.audioRef.current.audioEl.current;

1
prod.env.example
View File

@@ -12,6 +12,7 @@ export TAG=2.0
export REACT_APP_ARCHIVE_DAYS=30 export REACT_APP_ARCHIVE_DAYS=30
export STAGE=prod export STAGE=prod
export NODE_ENV="production"
export PROTOCOL="https://" export PROTOCOL="https://"
export REACT_APP_BACKEND_SERVER="${PROTOCOL}api.${DOMAIN_NAME}" export REACT_APP_BACKEND_SERVER="${PROTOCOL}api.${DOMAIN_NAME}"

1
test.env.example
View File

@@ -12,6 +12,7 @@ export TAG=2.0
export REACT_APP_ARCHIVE_DAYS=30 export REACT_APP_ARCHIVE_DAYS=30
export STAGE=test export STAGE=test
export NODE_ENV="test"
export PROTOCOL="http://" export PROTOCOL="http://"
export REACT_APP_BACKEND_SERVER="${PROTOCOL}api.${DOMAIN_NAME}" export REACT_APP_BACKEND_SERVER="${PROTOCOL}api.${DOMAIN_NAME}"