feat: add srt metadata to editview

src/api/manager/job/syncInventory.ts

@@ -19,31 +19,31 @@ async function getSourcesFromAPI(): Promise<SourceWithoutLastConnected[]> {
     .map((result) => result.value);
   const sources: SourceWithoutLastConnected[] = resolvedIngests.flatMap(
     (ingest) => {
-      return ingest.sources.map(
-        (source) =>
-          ({
-            status: source.active ? 'new' : 'gone',
-            name: source.name,
-            type: 'camera',
-            tags: {
-              location: 'Unknown'
-            },
-            ingest_name: ingest.name,
-            ingest_source_name: source.name,
-            ingest_type: source.type,
-            video_stream: {
-              width: source?.video_stream?.width,
-              height: source?.video_stream?.height,
-              frame_rate:
-                source?.video_stream?.frame_rate_n /
-                source?.video_stream?.frame_rate_d
-            },
-            audio_stream: {
-              number_of_channels: source?.audio_stream?.number_of_channels,
-              sample_rate: source?.audio_stream?.sample_rate
-            }
-          } satisfies SourceWithoutLastConnected)
-      );
+      return ingest.sources.map((source) => {
+        return {
+          status: source.active ? 'new' : 'gone',
+          name: source.name,
+          type: 'camera',
+          tags: {
+            location: 'Unknown'
+          },
+          ingest_name: ingest.name,
+          ingest_source_name: source.name,
+          ingest_type: source.type,
+          video_stream: {
+            width: source?.video_stream?.width,
+            height: source?.video_stream?.height,
+            frame_rate:
+              source?.video_stream?.frame_rate_n /
+              source?.video_stream?.frame_rate_d
+          },
+          audio_stream: {
+            number_of_channels: source?.audio_stream?.number_of_channels,
+            sample_rate: source?.audio_stream?.sample_rate
+          },
+          srt: source.srt
+        } satisfies SourceWithoutLastConnected;
+      });
     }
   );
   return sources;
@@ -101,7 +101,9 @@ export async function runSyncInventory() {
     return {
       ...inventorySource,
       status: statusUpdateCheck(inventorySource, apiSource, lastConnected),
-      lastConnected: lastConnected
+      lastConnected: lastConnected,
+      // Add srt metadata if missing from SRT sources
+      srt: (apiSource.ingest_type === 'SRT' && apiSource.srt) || undefined
     } satisfies WithId<Source>;
   });
 

src/components/inventory/EditViewContext.tsx

@@ -17,6 +17,7 @@ import {
 } from '../../interfaces/Source';
 import { API_SECRET_KEY } from '../../utils/constants';
 import { zeroBased } from './editView/AudioChannels/utils';
+import { ResourcesSrt } from '../../../types/ateliere-live';
 
 export interface IInput {
   name: string;
@@ -39,6 +40,7 @@ interface IContext {
   videoStream: VideoStream;
   audioStream: AudioStream;
   sourceMetadata: IReadOnlyMetadata;
+  srtMetaData?: ResourcesSrt;
 }
 
 export const EditViewContext = createContext<IContext>({
@@ -51,7 +53,8 @@ export const EditViewContext = createContext<IContext>({
   isSame: true,
   videoStream: {},
   audioStream: {},
-  sourceMetadata: {}
+  sourceMetadata: {},
+  srtMetaData: undefined
 });
 
 export default function Context({
@@ -139,6 +142,7 @@ export default function Context({
     ingestServer: source.ingest_name,
     originalName: source.ingest_source_name
   };
+  const srtMetaData = source.srt;
 
   return (
     <EditViewContext.Provider
@@ -149,7 +153,8 @@ export default function Context({
         loading,
         videoStream,
         audioStream,
-        sourceMetadata
+        sourceMetadata,
+        srtMetaData
       }}
     >
       <form

src/components/inventory/editView/EditView.tsx

@@ -5,8 +5,6 @@ import { SourceWithId } from '../../../interfaces/Source';
 import UpdateButtons from './UpdateButtons';
 import AudioChannels from './AudioChannels/AudioChannels';
 import ImageComponent from '../../image/ImageComponent';
-import { useContext } from 'react';
-import { GlobalContext } from '../../../contexts/GlobalContext';
 
 export default function EditView({
   source,
@@ -25,7 +23,7 @@ export default function EditView({
 }) {
   return (
     <EditViewContext source={source} updateSource={updateSource}>
-      <div className="flex flex-row mb-10 h-[22rem]">
+      <div className="flex flex-row mb-10">
         <div className="relative w-[34rem]">
           <ImageComponent src={getSourceThumbnail(source)} />
         </div>

src/components/inventory/editView/GeneralSettings.tsx

@@ -16,7 +16,8 @@ export default function GeneralSettings({ locked }: GeneralSettingsProps) {
     saved: [saved, setSaved],
     videoStream,
     audioStream,
-    sourceMetadata
+    sourceMetadata,
+    srtMetaData
   } = useContext(EditViewContext);
 
   const t = useTranslate();
@@ -33,6 +34,12 @@ export default function GeneralSettings({ locked }: GeneralSettingsProps) {
     }));
   };
 
+  const getValueWithBackup = (value?: string | number) => {
+    const backedUpValue = value || t('missing');
+    const classNameString = value ? '' : 'italic text-light';
+    return <h2 className={classNameString}>{backedUpValue}</h2>;
+  };
+
   const { height, width, frame_rate: frameRate } = videoStream;
   const { sample_rate: sampleRate } = audioStream;
   const { ingestServer, originalName } = sourceMetadata;
@@ -90,19 +97,67 @@ export default function GeneralSettings({ locked }: GeneralSettingsProps) {
         </div>
       </div>
 
-      {height && width && (
+      {height !== undefined && width !== undefined && (
         <div className="flex mb-5">
           <h2 className="flex w-[100px] items-center">{t('video')}</h2>
           <h2>{videoSettings(width, height, frameRate)}</h2>
         </div>
       )}
 
-      {sampleRate && (
+      {sampleRate !== undefined && (
         <div className="flex mb-5">
           <h2 className="flex w-[100px] items-center">{t('audio')}</h2>
           <h2>{getHertz(sampleRate)}</h2>
         </div>
       )}
+
+      {srtMetaData && (
+        <>
+          <h1 className="w-1/2 mb-2 mt-8 font-bold border-b-2">
+            {t('inventory_list.srt_metadata')}
+          </h1>
+          <div className="flex mb-5">
+            <h2 className="flex w-[100px] items-center">{t('preset.mode')}</h2>
+            {getValueWithBackup(srtMetaData.srt_mode)}
+          </div>
+          <div className="flex mb-5">
+            <h2 className="flex w-[100px] items-center">
+              {t('preset.video_format')}
+            </h2>
+            {getValueWithBackup(srtMetaData.video_format)}
+          </div>
+          <div className="flex mb-5">
+            <h2 className="flex w-[100px] items-center">
+              {t('inventory_list.latency')}
+            </h2>
+            {getValueWithBackup(srtMetaData.latency_ms)}
+          </div>
+          <div className="flex mb-5">
+            <h2 className="flex w-[100px] items-center">
+              {srtMetaData.srt_mode === 'listener'
+                ? t('inventory_list.local_ip')
+                : t('inventory_list.remote_ip')}
+            </h2>
+            {getValueWithBackup(
+              srtMetaData.srt_mode === 'listener'
+                ? srtMetaData.local_ip
+                : srtMetaData.remote_ip
+            )}
+          </div>
+          <div className="flex mb-5">
+            <h2 className="flex w-[100px] items-center">
+              {srtMetaData.srt_mode === 'listener'
+                ? t('inventory_list.local_port')
+                : t('inventory_list.remote_port')}
+            </h2>
+            {getValueWithBackup(
+              srtMetaData.srt_mode === 'listener'
+                ? srtMetaData.local_port
+                : srtMetaData.remote_port
+            )}
+          </div>
+        </>
+      )}
     </div>
   );
 }

src/i18n/locales/en.ts

@@ -560,6 +560,7 @@ export const en = {
     most_recent_connection: 'Most recent connection',
     create_srt: 'Create SRT',
     create_srt_source: 'Create SRT source',
+    srt_metadata: 'SRT Metadata',
     local_ip: 'Local IP',
     local_port: 'Local port',
     remote_ip: 'Remote IP',
@@ -581,6 +582,7 @@ export const en = {
   apply: 'Apply',
   save: 'Save',
   saved: 'Saved!',
+  missing: 'Missing',
   name: 'Name',
   location: 'Location',
   type: 'Type',

src/i18n/locales/sv.ts

@@ -562,6 +562,7 @@ export const sv = {
     most_recent_connection: 'Senast anslutning',
     create_srt: 'Skapa SRT',
     create_srt_source: 'Skapa SRT källa',
+    srt_metadata: 'SRT Metadata',
     local_ip: 'Lokal IP',
     local_port: 'Lokal port',
     remote_ip: 'Remote IP',
@@ -583,6 +584,7 @@ export const sv = {
   apply: 'Applicera',
   save: 'Spara',
   saved: 'Sparat!',
+  missing: 'Saknas',
   name: 'Namn',
   location: 'Plats',
   type: 'Typ',

src/interfaces/Source.ts

@@ -1,5 +1,6 @@
 import { ObjectId, WithId } from 'mongodb';
 import { HTMLSource, MediaSource } from './renderingEngine';
+import { ResourcesSrt } from '../../types/ateliere-live';
 export type SourceType = 'camera' | 'graphics' | 'microphone';
 export type SourceStatus = 'ready' | 'new' | 'gone' | 'purge';
 export type Type = 'ingest_source' | 'html' | 'mediaplayer';
@@ -33,6 +34,7 @@ export interface Source {
   video_stream: VideoStream;
   audio_stream: AudioStream;
   lastConnected: Date;
+  srt?: ResourcesSrt;
 }
 
 export interface SourceReference {