feat: output stream-id & output bug fix (#39)

Eyevinn · Oct 15, 2024 · de2d760 · de2d760
1 parent 30d8e9b
commit de2d760
Show file tree

Hide file tree

Showing 9 changed files with 35 additions and 8 deletions.
diff --git a/src/api/ateliereLive/pipelines/pipelines.ts b/src/api/ateliereLive/pipelines/pipelines.ts
@@ -288,7 +288,8 @@ function buildOutputStreamSettings(
       srt_mode: s.srt_mode, // 'listener' or 'caller'
       srt_latency_ms: s.srt_latency_ms, // 120
       srt_passphrase: s.srt_passphrase, // ''
-      video_gop_length: s.video_gop_length
+      video_gop_length: s.video_gop_length,
+      srt_stream_id: s.srt_stream_id
     };
   });
   Log().info(`Creating streams for output ${output.uuid}.'`, outputSettings);

diff --git a/src/app/production/[id]/page.tsx b/src/app/production/[id]/page.tsx
@@ -52,6 +52,7 @@ import { useWebsocket } from '../../../hooks/useWebsocket';
 import { ConfigureMultiviewButton } from '../../../components/modal/configureMultiviewModal/ConfigureMultiviewButton';
 import { useUpdateSourceInputSlotOnMultiviewLayouts } from '../../../hooks/useUpdateSourceInputSlotOnMultiviewLayouts';
 import { useCheckProductionPipelines } from '../../../hooks/useCheckProductionPipelines';
+import cloneDeep from 'lodash.clonedeep';
 
 export default function ProductionConfiguration({ params }: PageProps) {
   const t = useTranslate();
@@ -185,11 +186,19 @@ export default function ProductionConfiguration({ params }: PageProps) {
     pipelineName?: string,
     id?: string
   ) => {
+    const selectedPresetCopy = cloneDeep(selectedPreset);
+    const foundPipeline = selectedPresetCopy?.pipelines[pipelineIndex];
+    if (foundPipeline) {
+      foundPipeline.outputs = [];
+      foundPipeline.pipeline_name = pipelineName;
+    }
+    setSelectedPreset(selectedPresetCopy);
     setProductionSetup((prevState) => {
       const updatedPipelines = prevState?.production_settings.pipelines;
       if (!updatedPipelines) return;
       updatedPipelines[pipelineIndex].pipeline_name = pipelineName;
       updatedPipelines[pipelineIndex].pipeline_id = id;
+      updatedPipelines[pipelineIndex].outputs = [];
       putProduction(prevState._id, {
         ...prevState,
         production_settings: {
@@ -371,7 +380,7 @@ export default function ProductionConfiguration({ params }: PageProps) {
     const id = `${preset.name}-${index}-id`;
     return (
       <li
-        key={preset.name}
+        key={preset.name + index}
         className="flex w-40 px-1 mb-1 hover:bg-gray-600"
         onClick={() => {
           updateSelectedPreset(preset);
@@ -810,7 +819,7 @@ export default function ProductionConfiguration({ params }: PageProps) {
                   return (
                     <PipelineNameDropDown
                       disabled={productionSetup.isActive || locked}
-                      key={pipeline.pipeline_readable_name}
+                      key={pipeline.pipeline_readable_name + i}
                       label={pipeline.pipeline_readable_name}
                       options={pipelines?.map((pipeline) => ({
                         option: pipeline.name,

diff --git a/src/components/modal/configureOutputModal/ConfigureOutputModal.tsx b/src/components/modal/configureOutputModal/ConfigureOutputModal.tsx
@@ -1,8 +1,8 @@
 import { Preset } from '../../../interfaces/preset';
 import { Modal } from '../Modal';
 import Decision from './Decision';
-import PipelineOutputConfig, { PipelineTypes } from './PipelineOutputConfig';
-import { useState } from 'react';
+import PipelineOutputConfig from './PipelineOutputConfig';
+import { useEffect, useState } from 'react';
 import { PipelineOutput, PipelineSettings } from '../../../interfaces/pipeline';
 import { usePipelines } from '../../../hooks/pipelines';
 import cloneDeep from 'lodash.clonedeep';
@@ -16,7 +16,6 @@ type ConfigureOutputModalProps = {
 
 export interface OutputStream {
   name: string;
-  id: string;
   pipelineIndex: number;
   ip: string;
   srtMode: string;
@@ -25,6 +24,7 @@ export interface OutputStream {
   videoFormat: string;
   videoBit: number;
   videoKiloBit: number;
+  srt_stream_id: string;
 }
 
 const DEFAULT_PORT_MUMBER = 9900;
@@ -44,6 +44,10 @@ export function ConfigureOutputModal({
 
   const [pipes] = usePipelines();
 
+  useEffect(() => {
+    setPipelines(preset.pipelines || []);
+  }, [preset]);
+
   const onSave = () => {
     const locations = pipelines
       .map((p) =>

diff --git a/src/components/modal/configureOutputModal/PipelineOutputConfig.tsx b/src/components/modal/configureOutputModal/PipelineOutputConfig.tsx
@@ -45,6 +45,7 @@ const createNewStream = (portNumber: number, pipeline: PipelineSettings) => {
     srt_mode: 'listener',
     srt_passphrase: '',
     video_gop_length: 50,
+    srt_stream_id: '',
     ...getStreamEncoderSettings(pipeline)
   };
 };
@@ -115,6 +116,9 @@ const PipelineOutputConfig: React.FC<PipelineOutputConfigProps> = (props) => {
         case 'srtPassphrase':
           newStream.srt_passphrase = value;
           break;
+        case 'srt_stream_id':
+          newStream.srt_stream_id = value;
+          break;
       }
       setUpdatedOutputs(newOutputs);
     }
@@ -142,15 +146,15 @@ const PipelineOutputConfig: React.FC<PipelineOutputConfigProps> = (props) => {
     ): OutputStream => {
       return {
         name: `Stream ${index + 1}`,
-        id: '',
         pipelineIndex: 0,
         ip: stream.local_ip,
         srtMode: stream.srt_mode,
         srtPassphrase: stream.srt_passphrase,
         port: stream.local_port,
         videoFormat: stream.video_format,
         videoBit: stream.video_bit_depth,
-        videoKiloBit: stream.video_kilobit_rate
+        videoKiloBit: stream.video_kilobit_rate,
+        srt_stream_id: stream.srt_stream_id
       };
     };
     return outputStreams.map((stream, index) => {

diff --git a/src/components/modal/configureOutputModal/StreamAccordion.tsx b/src/components/modal/configureOutputModal/StreamAccordion.tsx
@@ -56,6 +56,11 @@ export default function StreamAccordion({
 
       <div className={`${active ? 'block' : 'hidden'} w-full`}>
         <div className="bg-container rounded text-p">
+          <Input
+            label={t('preset.srt_stream_id')}
+            value={stream.srt_stream_id}
+            update={(value) => update('srt_stream_id', value)}
+          />
           <Options
             label={t('preset.mode')}
             options={[{ label: 'listener' }, { label: 'caller' }]}

diff --git a/src/components/startProduction/ConfigureOutputButton.tsx b/src/components/startProduction/ConfigureOutputButton.tsx
@@ -6,6 +6,7 @@ import { Preset } from '../../interfaces/preset';
 import { useTranslate } from '../../i18n/useTranslate';
 import { Button } from '../button/Button';
 import { ConfigureOutputModal } from '../modal/configureOutputModal/ConfigureOutputModal';
+import { PipelineSettings } from '../../interfaces/pipeline';
 
 type ConfigureOutputButtonProps = {
   preset?: Preset;

diff --git a/src/i18n/locales/en.ts b/src/i18n/locales/en.ts
@@ -649,6 +649,7 @@ export const en = {
     port: 'Port',
     mode: 'Mode',
     srt_passphrase: 'Passphrase',
+    srt_stream_id: 'SRT ID',
     video_settings: 'Video settings',
     video_format: 'Format',
     video_bit_depth: 'Bit depth',

diff --git a/src/i18n/locales/sv.ts b/src/i18n/locales/sv.ts
@@ -653,6 +653,7 @@ export const sv = {
     port: 'Port',
     mode: 'Läge',
     srt_passphrase: 'Lösenord',
+    srt_stream_id: 'SRT ID',
     video_settings: 'Videoinställningar',
     video_format: 'Format',
     video_bit_depth: 'Bit depth',

diff --git a/src/interfaces/pipeline.ts b/src/interfaces/pipeline.ts
@@ -101,6 +101,7 @@ export interface PipelineOutputSettings {
   video_format: string;
   video_gop_length: number;
   video_kilobit_rate: number;
+  srt_stream_id: string;
 }
 
 export interface PipelineStreamSettings {