media info

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