Merge pull request #63 from olzzon/develop

Develop

Author: olzzon

.vscode/tasks.json

@@ -0,0 +1,17 @@
+{
+	// See https://go.microsoft.com/fwlink/?LinkId=733558 
+	// for the documentation about the tasks.json format
+	"version": "2.0.0",
+	"tasks": [
+		{
+			"label": "start",
+			"type": "npm",
+			"script": "start",
+			"problemMatcher": [
+				"$tsc"
+			],
+			"isBackground": true,
+			"promptOnClose": false
+		}
+	]
+}

README.md

@@ -80,12 +80,6 @@ To set the state send these OSC commands from you Automation to ProducersAudioMi
 /ch/1/mix/faderlevel - float {between 0 and 1}
 #### Set channel label:
 /ch/1/label - string {name of channel}
-#### Set group to PGM:
-/grp/1/pgm - integer: { 0 or 1 }
-#### Set group to PST:
-/grp/1/pst - integer: { 0 or 1 }
-#### Set group faderlevel:
-/grp/1/faderlevel - float {between 0 and 1}
 #### Crossfade between PGM and PST:
 /take
 #### Set snap 1-xx to PST:
@@ -94,10 +88,10 @@ To set the state send these OSC commands from you Automation to ProducersAudioMi
 /fadetoblack
 #### Hide or show channel strips on GUI: 
 /ch/{value1}/visible - integer { 0 or 1 }
-#### Hide or show group strips on GUI: 
-/grp/{value1}/visible - integer { 0 or 1 }
 
 ## Get state:
+#### Get full state of all channels:
+/state/full -  returns a json string with an array of channels: { pgmOn: boolean, pstOn: boolean, faderLevel: boolean }
 #### Get state channel PGM:
 /state/ch/1/mix/pgm - returns pgm state integer { 0 or 1 }
 #### get state channel PST:
@@ -110,3 +104,7 @@ To set the state send these OSC commands from you Automation to ProducersAudioMi
 /state/ch/1/mix/pst - returns pgm state integer { 0 or 1 }
 #### Get state group faderlevel:
 /state/ch/1/mix/faderlevel - float {between 0 and 1}
+
+## Check connectivity
+/ping/{value}
+_In response to a ping, sisyfos will reply with /pong and the provided value_

package.json

@@ -10,9 +10,9 @@
     },
     "contributors": [
         {
-        "name": "Jan Starzak",
-        "email": "jan@superfly.tv",
-        "url": "https://superfly.tv"
+            "name": "Jan Starzak",
+            "email": "jan@superfly.tv",
+            "url": "https://superfly.tv"
         }
     ],
     "keywords": [
@@ -32,18 +32,18 @@
         "build": "yarn tsc && webpack --config webpack.build.config.js --mode production",
         "build-now": "webpack --config webpack.build.config.js --mode production",
         "package": "yarn run build",
-        "postpackage": "electron-packager ./ --out=./builds --overwrite",
+        "postpackage": "electron-packager --overwrite ./ --out=./builds --overwrite",
         "package-linux": "electron-packager . sisyfos-audio-controller --overwrite --asar=true --platform=linux --arch=x64  --prune=true --out=builds",
         "package-win": "electron-packager . sisyfos-audio-controller --overwrite --asar=true --platform=win32 --arch=x64  --prune=true --out=builds",
         "package-release": "yarn package && yarn package-win && yarn package-linux"
-
     },
     "dependencies": {
         "@types/hoist-non-react-statics": "^3.3.1",
         "@types/react-redux": "^7.0.9",
         "@types/react-select": "^2.0.19",
         "casparcg-connection": "^4.7.0",
         "classnames": "^2.2.6",
+        "emberplus": "https://github.com/olzzon/tv-automation-emberplus-connection.git",
         "osc": "https://github.com/PieceMeta/osc.js/tarball/master",
         "react": "^16.8.6",
         "react-dom": "^16.8.6",

src/@types/emberplus/index.d.ts

@@ -0,0 +1 @@
+declare module 'emberplus';

src/assets/css/ChannelSettings.css

@@ -59,4 +59,8 @@
 	width: 90%;
 	font-size: 30px;
     line-height: 50px;
+}
+
+.channel-settings-group > button.active {
+	border-color: rgb(17, 0, 255);
 }

src/assets/css/GrpFader.css

@@ -11,6 +11,8 @@ import { loadSnapshotState, saveSnapshotState } from '../utils/SettingsStorage';
 import { MixerGenericConnection } from '../utils/MixerConnection';
 import { AutomationConnection } from '../utils/AutomationConnection';
 import { HuiMidiRemoteConnection } from '../utils/HuiMidiRemoteConnection';
+import { MixerProtocolPresets } from '../constants/MixerProtocolPresets';
+
 import { Store, AnyAction } from 'redux';
 import { ISettings } from '../reducers/settingsReducer';
 import { IChannels } from '../reducers/channelsReducer';
@@ -30,7 +32,12 @@ class App extends React.Component<IAppProps> {
         (window as any).automationConnection = new AutomationConnection();
         (window as any).huiRemoteConnection = new HuiMidiRemoteConnection();
         this.snapShopStoreTimer();
-        loadSnapshotState(this.props.store.channels[0], this.props.store.settings[0].numberOfChannels);
+        let selectedProtocol = MixerProtocolPresets[this.props.store.settings[0].mixerProtocol];
+        let numberOfChannels: Array<number> = [];
+        selectedProtocol.channelTypes.forEach((item, index) => {
+            numberOfChannels.push(this.props.store.settings[0].numberOfChannelsInType[index]);
+        });
+        loadSnapshotState(this.props.store.channels[0], numberOfChannels);
     }
 
     public shouldComponentUpdate(nextProps: IAppProps) {

src/components/App.tsx

@@ -7,13 +7,16 @@ import { Store } from 'redux';
 
 //assets:
 import '../assets/css/Channel.css';
-import { IMixerProtocol, MixerProtocolPresets, IMixerProtocolGeneric, ICasparCGMixerGeometry } from '../constants/MixerProtocolPresets';
-import { any } from 'prop-types';
+import { MixerProtocolPresets} from '../constants/MixerProtocolPresets';
+import { IMixerProtocolGeneric, ICasparCGMixerGeometry } from '../constants/MixerProtocolInterface';
+import { any, number } from 'prop-types';
 
 interface IChannelInjectProps {
     pgmOn: boolean,
     pstOn: boolean,
     pflOn: boolean,
+    channelType: number,
+    channelTypeIndex: number,
     showChannel: boolean,
     faderLevel: number,
     label: string,
@@ -115,8 +118,14 @@ class Channel extends React.Component<IChannelProps & IChannelInjectProps & Stor
             <input className="channel-volume-slider"
                 id="typeinp"
                 type="range"
-                min={this.mixerProtocol.fader.min}
-                max={this.mixerProtocol.fader.max}
+                min={this.mixerProtocol.channelTypes[0].toMixer.CHANNEL_FADER_LEVEL[0].mixerMessage != 'none' ?
+                    this.mixerProtocol.channelTypes[0].toMixer.CHANNEL_FADER_LEVEL[0].min
+                    : this.mixerProtocol.channelTypes[0].toMixer.CHANNEL_OUT_GAIN[0].min
+                }
+                max={this.mixerProtocol.channelTypes[0].toMixer.CHANNEL_FADER_LEVEL[0].mixerMessage != 'none' ?
+                    this.mixerProtocol.channelTypes[0].toMixer.CHANNEL_FADER_LEVEL[0].max
+                    : this.mixerProtocol.channelTypes[0].toMixer.CHANNEL_OUT_GAIN[0].max
+                }
                 step={this.mixerProtocol.fader.step}
                 value= {this.props.faderLevel}
                 onChange={event => {
@@ -220,10 +229,13 @@ class Channel extends React.Component<IChannelProps & IChannelInjectProps & Stor
         this.props.showChannel === false ?
             <div></div>
             :
-            <div className={ClassNames("channel-body", {
-                "with-snaps": this.props.showSnaps,
-                "with-pfl": this.props.showPfl
-            })}>
+            <div
+                style={{backgroundColor: this.mixerProtocol.channelTypes[this.props.channelType].channelTypeColor}}
+                className={
+                    ClassNames("channel-body", {
+                    "with-snaps": this.props.showSnaps,
+                    "with-pfl": this.props.showPfl
+                })}>
                 {this.channelSettings()}
                 {this.fader()}
                 <VuMeter channelIndex = {this.channelIndex}/>
@@ -240,7 +252,7 @@ class Channel extends React.Component<IChannelProps & IChannelInjectProps & Stor
                     : null
                 }
                 <div className="channel-name">
-                    {this.props.label != "" ? this.props.label : ("CH " + (this.channelIndex + 1)) }
+                    {this.props.label != "" ? this.props.label : (this.mixerProtocol.channelTypes[this.props.channelType].channelTypeName + " " + (this.props.channelTypeIndex + 1)) }
                 </div>
                 <div className="channel-snap-body">
                     {this.props.snapOn
@@ -261,6 +273,8 @@ const mapStateToProps = (state: any, props: any): IChannelInjectProps => {
         pflOn: state.channels[0].channel[props.channelIndex].pflOn,
         showChannel: state.channels[0].channel[props.channelIndex].showChannel,
         faderLevel: state.channels[0].channel[props.channelIndex].faderLevel,
+        channelType: state.channels[0].channel[props.channelIndex].channelType,
+        channelTypeIndex: state.channels[0].channel[props.channelIndex].channelTypeIndex,
         label: state.channels[0].channel[props.channelIndex].label,
         snapOn: state.channels[0].channel[props.channelIndex].snapOn.map((item: number) => {return item}),
         mixerProtocol: state.settings[0].mixerProtocol,

src/components/Channel.tsx

@@ -1,13 +1,16 @@
 import React from 'react';
 
 import '../assets/css/ChannelSettings.css';
-import { IMixerProtocolGeneric, MixerProtocolPresets, ICasparCGMixerGeometry } from '../constants/MixerProtocolPresets';
+import { MixerProtocolPresets } from '../constants/MixerProtocolPresets';
+import { IMixerProtocolGeneric, ICasparCGMixerGeometry } from '../constants/MixerProtocolInterface';
 import { Store } from 'redux';
 import { connect } from 'react-redux';
+import { IStore } from '../reducers/indexReducer';
 
 interface IChannelSettingsInjectProps {
 	label: string,
 	mixerProtocol: string,
+	sourceOption: string
 }
 
 interface IChannelProps {
@@ -26,7 +29,7 @@ class ChannelSettings extends React.PureComponent<IChannelProps & IChannelSettin
 			this.mixerProtocol = protocol;
 		}
 	}
-	
+
 	handleOption = (prop: string, option: string) => {
 		this.props.dispatch({
 			type: 'SET_OPTION',
@@ -54,23 +57,29 @@ class ChannelSettings extends React.PureComponent<IChannelProps & IChannelSettin
 						return (
 							<div className="channel-settings-group" key={prop}>
 								{Object.getOwnPropertyNames(this.mixerProtocol!.sourceOptions!.options[prop]).map(option => {
-									console.log(prop, option)
-									return <button key={option} className="channel-settings-group-item" onClick={() => this.handleOption(prop, this.mixerProtocol!.sourceOptions!.options[prop][option])}>{option}</button>
+									return <button
+										key={option}
+										className={"channel-settings-group-item" +
+											(this.props.sourceOption === this.mixerProtocol!.sourceOptions!.options[prop][option] ? ' active' : '')
+										}
+										onClick={() => this.handleOption(prop, this.mixerProtocol!.sourceOptions!.options[prop][option])}>
+											{option}
+									</button>
 								}) || null}
 							</div>
 						)
-					})}	
+					})}
             </div>
         )
     }
 }
 
 const mapStateToProps = (state: any, props: any): IChannelSettingsInjectProps => {
-	console.log(state.channels[0].channel, props.channelIndex);
     return {
         label: state.channels[0].channel[props.channelIndex].label,
-        mixerProtocol: state.settings[0].mixerProtocol
+		mixerProtocol: state.settings[0].mixerProtocol,
+		sourceOption: (state.channels[0].channel[props.channelIndex].private || {})['channel_layout']
     }
 }
 
-export default connect<any, IChannelSettingsInjectProps>(mapStateToProps)(ChannelSettings) as any;
+export default connect<any, IChannelSettingsInjectProps>(mapStateToProps)(ChannelSettings) as any;

src/components/ChannelSettings.tsx

@@ -2,7 +2,6 @@ import * as React from 'react';
 import { connect } from "react-redux";
 
 import Channel from './Channel';
-import GrpFader from './GrpFader';
 import '../assets/css/Channels.css';
 import { Store } from 'redux';
 import { IAppProps } from './App';
@@ -14,7 +13,7 @@ class Channels extends React.Component<IAppProps & Store> {
     }
 
     public shouldComponentUpdate(nextProps: IAppProps) {
-        return false;
+        return this.props.store.settings[0].showOptions !== nextProps.store.settings[0].showOptions;
     }
 
 
@@ -78,13 +77,6 @@ class Channels extends React.Component<IAppProps & Store> {
                         />
                 })
             }
-            {this.props.store.channels[0].grpFader.map((none: any, index: number) => {
-                return <GrpFader
-                            faderIndex = {index}
-                            key={index}
-                        />
-                })
-            }
             <br/>
             <div className="channels-mix-body">
                 <button