From 143490d93e76d6ddcb9e66c5b6285575b0d8a583 Mon Sep 17 00:00:00 2001
From: Luke Berndt <lukekb@gmail.com>
Date: Tue, 14 Feb 2023 21:57:20 -0500
Subject: [PATCH] media info

---
 frontend/src/Call/Calls.js                   |  73 +++++-----
 frontend/src/Call/components/CallInfoPane.js | 143 ++++++++++++-------
 2 files changed, 129 insertions(+), 87 deletions(-)

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 (
     <>
-    <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>
+    </>
   );
 }