feat: monitorview - settings in monitor setup, stored server side

olzzon · Mar 19, 2020 · 8837fce · 8837fce
1 parent 8a219d7
commit 8837fce
Show file tree

Hide file tree

Showing 8 changed files with 56 additions and 8 deletions.
diff --git a/client/assets/css/MiniChannel.css b/client/assets/css/MiniChannel.css
@@ -26,5 +26,11 @@
     font-size: 105%;
     background-color: rgba(39, 39, 39, 0.308);
     border-radius: 7px;
-    border-color: rgba(99, 99, 99, 0.301);
+    border-color: rgba(77, 77, 77, 0.301);
+}
+
+.monitor-channel-strip-button.on {
+    background-color: rgb(146, 146, 146);
+    border-color: rgba(102, 102, 102, 0.301);
+
 }
diff --git a/client/components/ChannelMonitorOptions.tsx b/client/components/ChannelMonitorOptions.tsx
@@ -7,7 +7,8 @@ import { Store } from 'redux';
 import { connect } from 'react-redux';
 import { TOGGLE_SHOW_MONITOR_OPTIONS } from '../../server/reducers/settingsActions'
 import { ISettings } from '../../server/reducers/settingsReducer';
-import { SOCKET_SET_AUX_LEVEL, SOCKET_SET_FADER_MONITOR } from '../../server/constants/SOCKET_IO_DISPATCHERS';
+import { SOCKET_SET_AUX_LEVEL, SOCKET_SET_FADER_MONITOR, SOCKET_SHOW_IN_MINI_MONITOR } from '../../server/constants/SOCKET_IO_DISPATCHERS';
+import { SHOW_IN_MINI_MONITOR } from '../../server/reducers/faderActions';
 
 interface IMonitorSettingsInjectProps {
     label: string,
@@ -86,6 +87,17 @@ class ChannelMonitorOptions extends React.PureComponent<IChannelProps & IMonitor
         }
     }
 
+
+    handleShowInMiniMonitor = (event: ChangeEvent<HTMLInputElement>) => {
+        window.socketIoClient.emit( 
+            SOCKET_SHOW_IN_MINI_MONITOR, 
+            {
+                faderIndex: this.faderIndex,
+                showInMiniMonitor: event.target.checked
+            }
+        )
+    }
+
     handleSetAux = (event: ChangeEvent<HTMLInputElement>) => {
         let value = parseFloat(event.target.value) || -1
         if (value > this.props.settings.numberOfAux || value < 0) {
@@ -133,6 +145,11 @@ class ChannelMonitorOptions extends React.PureComponent<IChannelProps & IMonitor
                     value={this.props.fader[this.faderIndex].monitor} 
                     onChange={(event) => this.handleSetAux(event)}
                 />
+                <input
+                            type="checkbox"
+                            checked={this.props.fader[this.faderIndex].showInMiniMonitor}
+                            onChange={(event) => this.handleShowInMiniMonitor(event)}
+                        />
                 <hr />
                 {this.props.channel.map((channel: any, index: number) => {
                     return <div 

diff --git a/client/components/MiniChannel.tsx b/client/components/MiniChannel.tsx
@@ -52,7 +52,7 @@ class MiniChannel extends React.Component<IChannelProps & IChannelInjectProps &
         return (
             <button
                 className={ClassNames("monitor-channel-strip-button", {
-                    'on': this.props.settings.showChanStrip
+                    'on': (this.props.settings.showChanStrip === this.props.channelTypeIndex)
                 })}
                 onClick={event => {
                     this.handleShowChanStrip();

diff --git a/client/components/MiniChannels.tsx b/client/components/MiniChannels.tsx
@@ -40,11 +40,15 @@ class Channels extends React.Component<IChannelsInjectProps & Store> {
     render() {
         return (
         <div className="mini-channels-body">
-            {this.props.faders.map((none: any, index: number) => {
-                return <MiniChannel
+            {this.props.faders.map((fader: IFader, index: number) => {
+                return ((fader.showInMiniMonitor) ? 
+                        <MiniChannel
                             faderIndex = {index}
                             key={index}
                         />
+                        :
+                        null
+                )
                 })
             }
             {(this.props.settings.showChanStrip >= 0) ?

diff --git a/server/MainThreadHandler.ts b/server/MainThreadHandler.ts
@@ -43,7 +43,9 @@ import {
     SOCKET_SET_LO_MID,
     SOCKET_SET_INPUT_OPTION,
     SOCKET_SAVE_CCG_FILE,
-    SOCKET_SET_DELAY_TIME
+    SOCKET_SET_DELAY_TIME,
+    SOCKET_SHOW_IN_MINI_MONITOR,
+
  } from './constants/SOCKET_IO_DISPATCHERS'
 import { 
     TOGGLE_PGM, 
@@ -61,7 +63,8 @@ import {
     SET_FADER_MONITOR,
     IGNORE_AUTOMATION,
     SET_FADER_LO_MID,
-    SET_FADER_DELAY_TIME
+    SET_FADER_DELAY_TIME,
+    SHOW_IN_MINI_MONITOR
 } from './reducers/faderActions';
 import { SET_FADER_LEVEL } from './reducers/faderActions';
 import { SET_ASSIGNED_FADER, SET_AUX_LEVEL } from './reducers/channelActions';
@@ -212,6 +215,16 @@ export class MainThreadHandlers {
                 this.updateFullClientStore()
             })
         )
+        .on(SOCKET_SHOW_IN_MINI_MONITOR, (
+            (payload: any) => { 
+                store.dispatch({
+                    type: SHOW_IN_MINI_MONITOR,
+                    faderIndex: payload.faderIndex,
+                    showInMiniMonitor: payload.showInMiniMonitor
+                });
+                this.updateFullClientStore()
+            })
+        )
         .on(SOCKET_SET_INPUT_OPTION, (
             (payload: any) => { 
                 mixerGenericConnection.updateChannelSettings(payload.channel, payload.prop, payload.option)

diff --git a/server/constants/SOCKET_IO_DISPATCHERS.ts b/server/constants/SOCKET_IO_DISPATCHERS.ts
@@ -4,6 +4,7 @@
 export const SOCKET_SET_FADERLEVEL = 'FaderLevel'
 export const SOCKET_SET_ASSIGNED_FADER = 'setAssignedFader'
 export const SOCKET_SET_FADER_MONITOR = 'FaderMonitor'
+export const SOCKET_SHOW_IN_MINI_MONITOR = 'showInMiniMonitor'
 export const SOCKET_SET_AUX_LEVEL = 'setAuxLevel'
 export const SOCKET_SET_INPUT_OPTION = 'setInputOption'
 export const SOCKET_SET_THRESHOLD = 'setThreshold'

diff --git a/server/reducers/faderActions.ts b/server/reducers/faderActions.ts
@@ -24,6 +24,7 @@ export const SET_PFL = 'SET_PFL'
 export const TOGGLE_MUTE = 'TOGGLE_MUTE'
 export const SET_MUTE = 'SET_MUTE'
 export const SHOW_CHANNEL = 'SHOW_CHANNEL'
+export const SHOW_IN_MINI_MONITOR = 'SHOW_IN_MINI_MONITOR'
 export const IGNORE_AUTOMATION = 'IGNORE_AUTOMATION'
 export const TOGGLE_SNAP = 'TOGGLE_SNAP'
 export const X_MIX = 'X_MIX'

diff --git a/server/reducers/fadersReducer.ts b/server/reducers/fadersReducer.ts
@@ -32,7 +32,8 @@ import {
     SET_FADER_MID,
     SET_FADER_HIGH,
     SET_FADER_MONITOR,
-    SET_SINGLE_FADER_STATE
+    SET_SINGLE_FADER_STATE,
+    SHOW_IN_MINI_MONITOR
 } from '../reducers/faderActions'
 
 export interface IFaders {
@@ -58,6 +59,7 @@ export interface IFader {
     delayTime: number
     monitor: number,
     showChannel: boolean,
+    showInMiniMonitor: boolean,
     ignoreAutomation: boolean,
     snapOn: Array<boolean>,
 }
@@ -92,6 +94,7 @@ const defaultFadersReducerState = (numberOfFaders: number): IFaders[] => {
                 delayTime: 0,
                 monitor: (index + 1), // route fader - aux 1:1 as default
                 showChannel: true,
+                showInMiniMonitor: false,
                 ignoreAutomation: false,
                 snapOn: [],
             });
@@ -218,6 +221,9 @@ export const faders = ((state = defaultFadersReducerState(0), action: any): Arra
         case SHOW_CHANNEL: //channel // showChannel
             nextState[0].fader[action.channel].showChannel = !!action.showChannel;
             return nextState;
+        case SHOW_IN_MINI_MONITOR: //faderIndexz // showInMiniMonitor
+            nextState[0].fader[action.faderIndex].showInMiniMonitor = !!action.showInMiniMonitor;
+            return nextState;
         case IGNORE_AUTOMATION: //channel // ignoreAutomation
             nextState[0].fader[action.channel].ignoreAutomation = !nextState[0].fader[action.channel].ignoreAutomation
             return nextState;