From fd806cdd2c52d5d413f068a531cd11584b6bbaee Mon Sep 17 00:00:00 2001 From: olzzon Date: Sun, 26 May 2019 08:43:18 +0200 Subject: [PATCH 1/7] feat: GraphQl mediaFolders implemented --- src/components/App.js | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/components/App.js b/src/components/App.js index e9e3c7d8..238fa2da 100755 --- a/src/components/App.js +++ b/src/components/App.js @@ -77,6 +77,10 @@ class App extends PureComponent { port: this.props.store.settings[0].port, autoConnect: true, }); + this.ccgConnection.infoPaths() + .then((response) =>{ + console.log("List of paths : ", response); + }); loadClipToolCommonSettings(this.ccgConnection, this.props.store.settings, this.props.store.appNav[0].showSettingsActive); this.ccgLoadPlay = new CcgLoadPlay(this.ccgConnection); From 1659c998c277aba2173129fd3bf6a4354582fb14 Mon Sep 17 00:00:00 2001 From: olzzon Date: Sun, 26 May 2019 20:20:55 +0200 Subject: [PATCH 2/7] feat: Select folder from pull-down menu in settings, gets folderlist by query mediaFolders to casparcg-state-scanner --- package.json | 7 ++++--- src/assets/css/Settings.css | 3 +++ src/components/App.js | 20 ++++++++++++++++++-- src/components/Settings.js | 13 ++++++++++--- 4 files changed, 35 insertions(+), 8 deletions(-) diff --git a/package.json b/package.json index 0e98ea60..4392945a 100755 --- a/package.json +++ b/package.json @@ -24,9 +24,9 @@ "npm": ">=5.0.0", "yarn": ">=1.0.0" }, - "browserslist": [ - "last 1 Electron versions" - ], + "browserslist": [ + "last 1 Electron versions" + ], "main": "main.js", "scripts": { "prod": "webpack --mode production --config webpack.build.config.js && electron --noDevServer .", @@ -51,6 +51,7 @@ "react-apollo": "^2.5.1", "react-dom": "^16.8.3", "react-redux": "^6.0.0", + "react-select": "^2.4.3", "react-sortablejs": "^1.4.0", "redux": "^4.0.1", "rmc-tabs": "^1.2.27", diff --git a/src/assets/css/Settings.css b/src/assets/css/Settings.css index ca0c78ce..9e501c43 100644 --- a/src/assets/css/Settings.css +++ b/src/assets/css/Settings.css @@ -38,6 +38,9 @@ color: rgb(255, 255, 255); } +.Settings-input-selector { + color: blue; +} input[type=text] { text-align: right; diff --git a/src/components/App.js b/src/components/App.js index 238fa2da..1ff33e0c 100755 --- a/src/components/App.js +++ b/src/components/App.js @@ -4,7 +4,7 @@ import { Tabs } from 'rmc-tabs'; //Apollo-Client Graphql implementation: import gql from "graphql-tag"; -import { ALL_CHANNELS_QUERY, ALL_CHANNELS_SUBSCRIPTION } from '../graphql/CasparCgQuery'; +import { ALL_CHANNELS_QUERY, ALL_CHANNELS_SUBSCRIPTION, MEDIA_FOLDERS_QUERY } from '../graphql/CasparCgQuery'; //Redux: import { connect } from "react-redux"; @@ -248,6 +248,22 @@ class App extends PureComponent { ccgMediaFilesChanged() { var _this2 = this; + + //Get list of media folders: + window.apolloClient.query({ + query: gql` + { + mediaFolders { + folder + } + }` + }) + .then((response) => { + this.mediaFolders = response.data.mediaFolders.map((item)=> { + return {value: item.folder, label: item.folder}; + }); + }); + //Subscribe to CasparCG-State changes: window.apolloClient.subscribe({ query: gql` @@ -604,7 +620,7 @@ class App extends PureComponent { : "" } {this.props.store.appNav[0].showSettingsActive ? - + : null }
diff --git a/src/components/Settings.js b/src/components/Settings.js index 6fa2cbf4..f25835b5 100644 --- a/src/components/Settings.js +++ b/src/components/Settings.js @@ -1,5 +1,7 @@ import React, { Component } from 'react'; import '../assets/css/Settings.css'; +import Select from 'react-select'; + //Redux: import { connect } from "react-redux"; @@ -52,9 +54,9 @@ class SettingsPage extends Component { ); } - handleTabMediaFolder(event) { + handleTabMediaFolder(index, event) { var settingsCopy= Object.assign({}, this.state.settings); - settingsCopy.tabData[event.target.name].subFolder = event.target.value; + settingsCopy.tabData[index].subFolder = event.value; this.setState( {settings: settingsCopy} ); @@ -107,7 +109,12 @@ class SettingsPage extends Component {
@@ -144,14 +163,17 @@ class SettingsPage extends Component {
From 153742f7da9e5342e8dde4649a1faf2cfce576c9 Mon Sep 17 00:00:00 2001 From: olzzon Date: Mon, 27 May 2019 08:27:04 +0200 Subject: [PATCH 4/7] style: added borders around settings parts --- src/assets/css/Settings.css | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/src/assets/css/Settings.css b/src/assets/css/Settings.css index 18b04cfe..fd26ff37 100644 --- a/src/assets/css/Settings.css +++ b/src/assets/css/Settings.css @@ -29,7 +29,11 @@ flex-wrap: wrap; margin-top: 20px; font-size: 1.1em; + text-align: left; background-color: rgb(56, 56, 56); + border-width: 1px; + border-style: solid; + border-color: rgba(230, 230, 230, 0.63); } .Settings-input-field { @@ -45,7 +49,7 @@ } input[type=text] { - text-align: right; + text-align: left; margin: 5px; font-size: 1.1em; border: 1px solid rgb(104, 104, 104); From 67cbe27484a3ebaea8dac7ead8ffc1ab46259aa8 Mon Sep 17 00:00:00 2001 From: olzzon Date: Mon, 27 May 2019 14:31:11 +0200 Subject: [PATCH 5/7] feat: dropdown selectors for dataFolder and overlayFolder in settings --- src/assets/css/Settings.css | 1 + src/components/App.js | 38 ++++++++++++++++++++++++++++++++++--- src/components/Settings.js | 32 ++++++++++++++++++++----------- 3 files changed, 57 insertions(+), 14 deletions(-) diff --git a/src/assets/css/Settings.css b/src/assets/css/Settings.css index fd26ff37..7e7ba628 100644 --- a/src/assets/css/Settings.css +++ b/src/assets/css/Settings.css @@ -45,6 +45,7 @@ .Settings-input-selector { color: rgb(13, 13, 66); + min-width: 220px; margin: 5px; } diff --git a/src/components/App.js b/src/components/App.js index 1ff33e0c..cafbe7af 100755 --- a/src/components/App.js +++ b/src/components/App.js @@ -251,8 +251,7 @@ class App extends PureComponent { //Get list of media folders: window.apolloClient.query({ - query: gql` - { + query: gql`{ mediaFolders { folder } @@ -264,6 +263,34 @@ class App extends PureComponent { }); }); + //Get list of data folders: + window.apolloClient.query({ + query: gql`{ + dataFolders { + folder + } + }` + }) + .then((response) => { + this.dataFolders = response.data.dataFolders.map((item)=> { + return {value: item.folder, label: item.folder}; + }); + }); + + //Get list of template folders: + window.apolloClient.query({ + query: gql`{ + templateFolders { + folder + } + }` + }) + .then((response) => { + this.templateFolders = response.data.templateFolders.map((item)=> { + return {value: item.folder, label: item.folder}; + }); + }); + //Subscribe to CasparCG-State changes: window.apolloClient.subscribe({ query: gql` @@ -620,7 +647,12 @@ class App extends PureComponent { : "" } {this.props.store.appNav[0].showSettingsActive ? - + : null }
diff --git a/src/components/Settings.js b/src/components/Settings.js index 2c76b8bb..3692e1fe 100644 --- a/src/components/Settings.js +++ b/src/components/Settings.js @@ -14,14 +14,14 @@ const selectorColorStyles = { control: styles => ({ ...styles, backgroundColor: '#676767', color: 'white', border: 0 }), option: (styles) => { return { - backgroundColor: '#676767', + backgroundColor: '#AAAAAA', color: 'white' }; }, singleValue: styles => ({ ...styles, color: 'white' }), +}; -}; class SettingsPage extends Component { constructor(props) { @@ -69,24 +69,24 @@ class SettingsPage extends Component { handleTabMediaFolder(index, event) { var settingsCopy= Object.assign({}, this.state.settings); - settingsCopy.tabData[index].subFolder = event.value; + settingsCopy.tabData[index].subFolder = event.value + "/"; this.setState( {settings: settingsCopy} ); } - handleTabDataFolder(event) { + handleTabDataFolder(index, event) { var settingsCopy= Object.assign({}, this.state.settings); - settingsCopy.tabData[event.target.name].dataFolder = event.target.value; + settingsCopy.tabData[index].dataFolder = event.value + "/"; this.setState( {settings: settingsCopy} ); } - handleTabOverlayFolder(event) { + handleTabOverlayFolder(index, event) { var settingsCopy= Object.assign({}, this.state.settings); - settingsCopy.tabData[event.target.name].overlayFolder = event.target.value; + settingsCopy.tabData[index].overlayFolder = event.value + "/"; this.setState( {settings: settingsCopy} ); @@ -133,13 +133,23 @@ class SettingsPage extends Component { +

diff --git a/src/reducers/settingsReducer.js b/src/reducers/settingsReducer.js index f8d08267..2aa4dafc 100644 --- a/src/reducers/settingsReducer.js +++ b/src/reducers/settingsReducer.js @@ -6,6 +6,7 @@ const defaultSettingsReducerState = () => { port: '5250', selectView: 0, disableDragNDrop: false, + disableOverlay: false, tabData: [] }]; for (let i=0; i<4; i++) { @@ -33,6 +34,7 @@ export const settings = ((state = defaultSettingsReducerState(), action) => { nextState[0].port = action.data.port; nextState[0].selectView = action.data.selectView || 0; nextState[0].disableDragNDrop = action.data.disableDragNDrop || false; + nextState[0].disableOverlay = action.data.disableOverlay || false; nextState[0].tabData.map((item, index) => { item.title = tabData[index].title || ''; item.subFolder = tabData[index].subFolder || ''; diff --git a/src/util/filePathStringHandling.js b/src/util/filePathStringHandling.js index d7ea8eed..4bc9b12c 100644 --- a/src/util/filePathStringHandling.js +++ b/src/util/filePathStringHandling.js @@ -2,8 +2,6 @@ export const cleanUpFilename = (filename) => { // casparcg-connection library bug: returns filename with media// or media/ return (filename.replace(/\\/g, '/') - .replace('media//', '') - .replace('media/', '') .toUpperCase() .replace(/\..+$/, '') ); From 6dad196d59eda3fc65d65fea26b4b5d2b13f4645 Mon Sep 17 00:00:00 2001 From: olzzon Date: Tue, 28 May 2019 13:36:52 +0200 Subject: [PATCH 7/7] feat: ClipTool only settings. Disables OVERLAY and AUTONEXT function on clint (if more than one client is connected, only one should add overlay and control autonext) --- src/components/App.js | 12 +++++++----- 1 file changed, 7 insertions(+), 5 deletions(-) diff --git a/src/components/App.js b/src/components/App.js index cafbe7af..ff069164 100755 --- a/src/components/App.js +++ b/src/components/App.js @@ -196,11 +196,13 @@ class App extends PureComponent { type:'SET_TIMELEFT', data: response.data, }); - response.data.timeLeft.map((item, index) => { - _this2.handleAutoNext.autoNext(item, index); - _this2.handleOverlay.handleOverlay(item, index); - _this2.handleOverlay.handleWipe(item, index); - }); + if (!_this2.props.store.settings[0].disableOverlay) { + response.data.timeLeft.map((item, index) => { + _this2.handleAutoNext.autoNext(item, index); + _this2.handleOverlay.handleOverlay(item, index); + _this2.handleOverlay.handleWipe(item, index); + }); + } }, error(err) { console.error('Subscription error: ', err); }, });