Merge pull request #97 from tv2/UT-258/fixChannelViewBug

fix: fixes channelview 2 and above not working
tv2 · Sep 20, 2023 · b864182 · b864182
2 parents 5e086e0 + a54ae6d
commit b864182
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 5 deletions.
diff --git a/src/client/shared/services/browser-service.ts b/src/client/shared/services/browser-service.ts
@@ -1,3 +1,7 @@
+import { ReduxSettingsService } from '../../../shared/services/redux-settings-service'
+import { reduxStore, state } from '../../../shared/store'
+import { setGenerics } from '../../../shared/actions/settings-action'
+
 enum SelectedView {
     THUMBNAIL = 'thumbnail',
     TEXT = 'textview',
@@ -12,10 +16,13 @@ interface BrowserSelectedView {
 
 export class BrowserService {
     private view: BrowserSelectedView
+    private readonly reduxSettingsService: ReduxSettingsService
 
     constructor() {
+        this.reduxSettingsService = new ReduxSettingsService()
         const search = new URLSearchParams(window.location.search)
         this.view = this.getCurrentSelectedView(search)
+        this.setMinimumOutputSettingsIfMissing()
     }
 
     private getCurrentSelectedView(
@@ -48,6 +55,30 @@ export class BrowserService {
         }
     }
 
+    /**
+     * @remarks
+     * The Redux state is only initialized with 1 output settings, which causes issues for channel view above 1.
+     * Once finished connecting to the backend, the actual settings will have been received.
+     * Until then simply set the redux state to contain default settings, with entries matching the channel number.
+     * @private
+     */
+    private setMinimumOutputSettingsIfMissing() {
+        if (
+            !this.isChannelView() ||
+            this.reduxSettingsService.getAllOutputSettings(state.settings)
+                .length >= this.view.channel
+        ) {
+            return
+        }
+        reduxStore.dispatch(
+            setGenerics(
+                this.reduxSettingsService.getDefaultGenericSettings(
+                    this.view.channel
+                )
+            )
+        )
+    }
+
     private getQueryChannel(search: URLSearchParams): number {
         const channel = search.get(SelectedView.CHANNEL)
         return channel ? Math.max(parseInt(channel), 1) : 1

diff --git a/src/shared/reducers/settings-reducer.ts b/src/shared/reducers/settings-reducer.ts
@@ -1,14 +1,17 @@
 import {
+    CasparcgConfig,
     CasparcgConfigChannel,
+    GenericSettings,
     OutputSettings,
     SettingsState,
-} from './../models/settings-models'
+} from '../models/settings-models'
 import { ReduxSettingsService } from '../services/redux-settings-service'
 import { getVideoFormat } from '../video-format'
 import * as IO from './../actions/settings-action'
 
 function defaultSettingsReducerState(): SettingsState {
-    const generics = new ReduxSettingsService().getDefaultGenericSettings()
+    const generics: GenericSettings =
+        new ReduxSettingsService().getDefaultGenericSettings()
     return {
         ccgConfig: {
             channels: [],
@@ -35,7 +38,7 @@ export function settings(
 
     switch (action.type) {
         case IO.UPDATE_SETTINGS: {
-            const config = { ...nextState.ccgConfig }
+            const config: CasparcgConfig = { ...nextState.ccgConfig }
             config.channels = [
                 ...action.channels.map(updateChannelConfigWithVideoFormat),
             ]

diff --git a/src/shared/services/redux-settings-service.ts b/src/shared/services/redux-settings-service.ts
@@ -125,10 +125,10 @@ export class ReduxSettingsService {
         return settingsState.generics
     }
 
-    public getDefaultGenericSettings(): GenericSettings {
+    public getDefaultGenericSettings(arrayLength: number = 1): GenericSettings {
         return {
             ccgSettings: defaultCcgSettingsState,
-            outputSettings: Array(1).fill({
+            outputSettings: Array(arrayLength).fill({
                 ...defaultOutputSettingsState,
             }),
         }