feat: load CasparCG settings from Storage menu

olzzon · Jan 28, 2020 · c4e55e6 · c4e55e6
1 parent 6f807cd
commit c4e55e6
Show file tree

Hide file tree

Showing 8 changed files with 160 additions and 19 deletions.
diff --git a/client/components/CcgChannelSettings.tsx b/client/components/CcgChannelSettings.tsx
@@ -58,7 +58,8 @@ class CcgChannelInputSettings extends React.PureComponent<IChannelProps & IChann
 								}) || null}
 							</div>
 						)
-					})}
+					})
+				}
             </div>
         )
     }

diff --git a/client/components/RoutingStorage.tsx b/client/components/RoutingStorage.tsx
@@ -3,26 +3,31 @@ import React from 'react';
 import '../assets/css/RoutingStorage.css';
 import { Store } from 'redux';
 import { connect } from 'react-redux';
-import Popup from 'reactjs-popup'
 import { TOGGLE_SHOW_STORAGE } from '../../server/reducers/settingsActions'
-import { SOCKET_GET_SNAPSHOT_LIST, SOCKET_LOAD_SNAPSHOT, SOCKET_SAVE_SNAPSHOT } from '../../server/constants/SOCKET_IO_DISPATCHERS';
+import { 
+    SOCKET_GET_SNAPSHOT_LIST, 
+    SOCKET_LOAD_SNAPSHOT, 
+    SOCKET_SAVE_SNAPSHOT,
+    SOCKET_GET_CCG_LIST 
+} from '../../server/constants/SOCKET_IO_DISPATCHERS';
 
 interface IStorageProps {
     load: any
     save: any
 }
 class Storage extends React.PureComponent<IStorageProps & Store> {
     fileList: string[] = []
-    load: any
-    save: any
+    loadSnapshot: any
+    saveSnapshot: any
 
     constructor(props: any) {
         super(props);
-        this.load = this.props.load
-        this.save = this.props.save
+        this.loadSnapshot = this.props.load
+        this.saveSnapshot = this.props.save
 
         //Bindings:
-        this.ListFiles = this.ListFiles.bind(this)
+        this.ListSnapshotFiles = this.ListSnapshotFiles.bind(this)
+        this.ListCcgFiles = this.ListCcgFiles.bind(this)
         this.loadFile = this.loadFile.bind(this)
         this.saveFile = this.saveFile.bind(this)
     }
@@ -52,7 +57,7 @@ class Storage extends React.PureComponent<IStorageProps & Store> {
         this.handleClose()
     }
 
-    ListFiles(props: any) {
+    ListSnapshotFiles() {
         window.socketIoClient.emit(SOCKET_GET_SNAPSHOT_LIST)
         const listItems = window.snapshotFileList.map((file: string, index: number) => {
         return (
@@ -68,6 +73,22 @@ class Storage extends React.PureComponent<IStorageProps & Store> {
         );
     }
 
+    ListCcgFiles() {
+        window.socketIoClient.emit(SOCKET_GET_CCG_LIST)
+        const listItems = window.ccgFileList.map((file: string, index: number) => {
+        return (
+            <li key={index} onClick={this.loadFile} className="item">
+            {file}
+       </li>)
+        }
+        );
+        return (
+          <ul className="storage-list">
+            {listItems}
+            </ul>
+        );
+    }
+
     render() {
         return (
             <div className="channel-storage-body">
@@ -80,7 +101,10 @@ class Storage extends React.PureComponent<IStorageProps & Store> {
                 </button>
                 <hr/>
                 <h3>LOAD ROUTING :</h3>
-                <this.ListFiles files = {this.fileList}/>
+                <this.ListSnapshotFiles/>
+                <hr/>
+                <h3>LOAD CASPARCG :</h3>
+                <this.ListCcgFiles/>
             </div>
         )
     }

diff --git a/client/index.tsx b/client/index.tsx
@@ -8,7 +8,7 @@ import io from 'socket.io-client'
 import { createStore } from 'redux';
 import { Provider as ReduxProvider} from 'react-redux';
 import indexReducer from '../server/reducers/indexReducer';
-import { SOCKET_GET_SNAPSHOT_LIST } from '../server/constants/SOCKET_IO_DISPATCHERS';
+import { SOCKET_GET_SNAPSHOT_LIST, SOCKET_GET_CCG_LIST } from '../server/constants/SOCKET_IO_DISPATCHERS';
 
 declare global {
     interface Window {
@@ -17,7 +17,8 @@ declare global {
         mixerProtocolPresets: any
         mixerProtocolList: any
         socketIoClient: any
-        snapshotFileList: any
+        snapshotFileList: string[]
+        ccgFileList: string[]
     }
 }
 
@@ -30,6 +31,7 @@ const storeRedux = createStore(
 window.storeRedux = storeRedux
 window.socketIoClient = io()
 window.socketIoClient.emit(SOCKET_GET_SNAPSHOT_LIST)
+window.socketIoClient.emit(SOCKET_GET_CCG_LIST)
 
 
 console.log('Setting up SocketIO connection')

diff --git a/client/utils/SocketClientHandlers.ts b/client/utils/SocketClientHandlers.ts
@@ -1,7 +1,7 @@
 import { SET_COMPLETE_FADER_STATE, SET_VU_LEVEL, SET_SINGLE_FADER_STATE } from "../../server/reducers/faderActions";
 import { SET_COMPLETE_CH_STATE, SET_SINGLE_CH_STATE } from "../../server/reducers/channelActions";
 import { UPDATE_SETTINGS, SET_MIXER_ONLINE } from "../../server/reducers/settingsActions";
-import { SOCKET_SET_VU, SOCKET_RETURN_SNAPSHOT_LIST, SOCKET_SET_FULL_STORE, SOCKET_SET_STORE_FADER, SOCKET_SET_STORE_CHANNEL } from "../../server/constants/SOCKET_IO_DISPATCHERS";
+import { SOCKET_SET_VU, SOCKET_RETURN_SNAPSHOT_LIST, SOCKET_SET_FULL_STORE, SOCKET_SET_STORE_FADER, SOCKET_SET_STORE_CHANNEL, SOCKET_RETURN_CCG_LIST } from "../../server/constants/SOCKET_IO_DISPATCHERS";
 
 export const socketClientHandlers = () => {
     window.socketIoClient
@@ -52,7 +52,6 @@ export const socketClientHandlers = () => {
     )
     .on(SOCKET_SET_STORE_FADER, (
         (payload: any) => { 
-            // console.log('MIXERPROTOCOL RECEIVED :', payload)
             window.storeRedux.dispatch({
                 type:SET_SINGLE_FADER_STATE,
                 faderIndex: payload.faderIndex,
@@ -62,7 +61,6 @@ export const socketClientHandlers = () => {
     )
     .on(SOCKET_SET_STORE_CHANNEL, (
         (payload: any) => { 
-            // console.log('MIXERPROTOCOL RECEIVED :', payload)
             window.storeRedux.dispatch({
                 type:SET_SINGLE_CH_STATE,
                 channelIndex: payload.channelIndex,
@@ -72,7 +70,6 @@ export const socketClientHandlers = () => {
     )
     .on(SOCKET_SET_VU, (
         (payload: any) => { 
-            // console.log('MIXERPROTOCOL RECEIVED :', payload)
             window.storeRedux.dispatch({
                 type:SET_VU_LEVEL,
                 channel: payload.faderIndex,
@@ -82,8 +79,13 @@ export const socketClientHandlers = () => {
     )
     .on(SOCKET_RETURN_SNAPSHOT_LIST, (
         (payload: any) => { 
-            // console.log('MIXERPROTOCOL RECEIVED :', payload)
             window.snapshotFileList = payload
         })
     )
+    .on(SOCKET_RETURN_CCG_LIST, (
+        (payload: any) => { 
+            window.ccgFileList = payload
+        })
+    )
+
 }
diff --git a/server/MainThreadHandler.ts b/server/MainThreadHandler.ts
@@ -4,7 +4,12 @@ import { SnapshotHandler } from './utils/SnapshotHandler'
 import { socketServer } from './expressHandler'
 
 import { UPDATE_SETTINGS } from './reducers/settingsActions'
-import { loadSettings, saveSettings, getSnapShotList } from './utils/SettingsStorage'
+import { 
+    loadSettings, 
+    saveSettings, 
+    getSnapShotList,
+    getCcgSettingsList
+} from './utils/SettingsStorage'
 import { 
     SOCKET_TOGGLE_PGM, 
     SOCKET_TOGGLE_VO, 
@@ -14,7 +19,9 @@ import {
     SOCKET_SET_FADERLEVEL, 
     SOCKET_SAVE_SETTINGS, 
     SOCKET_GET_SNAPSHOT_LIST, 
-    SOCKET_RETURN_SNAPSHOT_LIST, 
+    SOCKET_RETURN_SNAPSHOT_LIST,
+    SOCKET_GET_CCG_LIST,
+    SOCKET_RETURN_CCG_LIST, 
     SOCKET_LOAD_SNAPSHOT, 
     SOCKET_SAVE_SNAPSHOT,
     SOCKET_SET_ASSIGNED_FADER,
@@ -152,6 +159,15 @@ export class MainThreadHandlers {
                 )
             })
         )
+        .on(SOCKET_GET_CCG_LIST, (
+            () => { 
+                logger.info('Get snapshot list', {})
+                socketServer.emit(
+                    SOCKET_RETURN_CCG_LIST, 
+                    getCcgSettingsList()
+                )
+            })
+        )
         .on(SOCKET_SAVE_SETTINGS, (
             (payload: any) => { 
                 logger.info('Save settings :' + String(payload), {})

diff --git a/server/constants/SOCKET_IO_DISPATCHERS.ts b/server/constants/SOCKET_IO_DISPATCHERS.ts
@@ -28,6 +28,8 @@ export const SOCKET_RESTART_SERVER = 'restartServer'
 export const SOCKET_SET_VU = 'setVu'
 export const SOCKET_GET_SNAPSHOT_LIST = 'getSnapshotList'
 export const SOCKET_RETURN_SNAPSHOT_LIST = 'returnSnapshotList'
+export const SOCKET_GET_CCG_LIST = 'getCcgList'
+export const SOCKET_RETURN_CCG_LIST = 'returnCcgList'
 export const SOCKET_LOAD_SNAPSHOT = 'loadSnapshot'
 export const SOCKET_SAVE_SNAPSHOT = 'saveSnapshot'
 

diff --git a/server/utils/SettingsStorage.ts b/server/utils/SettingsStorage.ts
@@ -102,3 +102,11 @@ export const getSnapShotList = () => {
     return files
 }
 
+export const getCcgSettingsList = () => {
+    const files = fs.readdirSync(path.resolve('storage')).filter((file: string) => { 
+        if (file.includes('.ccg')) {
+            return true
+        }
+    })
+    return files
+}
diff --git a/storage/default-casparcg.ccg b/storage/default-casparcg.ccg
@@ -0,0 +1,86 @@
+{
+	"label": "Sofie CasparCG Example",
+	"fromMixer": {
+		"CHANNEL_VU": [
+			["/channel/1/stage/layer/51/audio/1/pFS", "/channel/1/stage/layer/51/audio/2/pFS"],
+			["/channel/1/stage/layer/52/audio/1/pFS", "/channel/1/stage/layer/52/audio/2/pFS"],
+			["/channel/1/stage/layer/53/audio/1/pFS", "/channel/1/stage/layer/53/audio/2/pFS"],
+			["/channel/1/stage/layer/54/audio/1/pFS", "/channel/1/stage/layer/54/audio/2/pFS"],
+			["/channel/1/stage/layer/55/audio/1/pFS", "/channel/1/stage/layer/55/audio/2/pFS"],
+			["/channel/1/stage/layer/56/audio/1/pFS", "/channel/1/stage/layer/56/audio/2/pFS"]
+		]
+	},
+	"toMixer": {
+		"MONITOR_CHANNEL_FADER_LEVEL": [
+			[
+				{ "channel": 2, "layer": 51 }
+			],
+			[
+				{ "channel": 2, "layer": 52 }
+			],
+			[
+				{ "channel": 2, "layer": 53 }
+			],
+			[
+				{ "channel": 2, "layer": 54 }
+			],
+			[
+				{ "channel": 2, "layer": 55 }
+			],
+			[
+				{ "channel": 2, "layer": 56 }
+			]
+		],
+		"PGM_CHANNEL_FADER_LEVEL": [
+			[
+				{ "channel": 1, "layer": 51 },
+				{ "channel": 3, "layer": 51 }
+			],
+			[
+				{ "channel": 1, "layer": 52 },
+				{ "channel": 3, "layer": 52 }
+			],
+			[
+				{ "channel": 1, "layer": 53 },
+				{ "channel": 3, "layer": 53 }
+			],
+			[
+				{ "channel": 1, "layer": 54 },
+				{ "channel": 3, "layer": 54 }
+			],
+			[
+				{ "channel": 1, "layer": 55 },
+				{ "channel": 3, "layer": 55 }
+			],
+			[
+				{ "channel": 1, "layer": 56 },
+				{ "channel": 3, "layer": 56 }
+			]
+		]
+	},
+	"channelLabels": [
+		"RM1",
+		"RM2",
+		"RM3",
+		"RM4",
+		"RM5",
+		"MP1"
+	],
+	"sourceOptions": {
+		"sources": [
+			{ "channel": 2, "layer": 51 },
+			{ "channel": 2, "layer": 52 },
+			{ "channel": 2, "layer": 53 },
+			{ "channel": 2, "layer": 54 },
+			{ "channel": 2, "layer": 55 },
+			{ "channel": 2, "layer": 56 }
+		],
+		"options": {
+			"CHANNEL_LAYOUT": {
+				"1L-2R": "8ch2",
+				"1L-1R": "4ch-dleft",
+				"2L-2R": "4ch-dright"
+			}
+		}
+	}
+}
-Original file line number
+Diff line change
@@ Expand Up @@
     								}) || null}
     							</div>
     						)
-    					})}
+    					})
+    				}
                 </div>
             )
         }
@@ Expand Down @@