Skip to content

Commit

Permalink
Merge pull request #48 from olzzon/develop
Browse files Browse the repository at this point in the history 
mediaFolder, dataFolder and templateFolder pulldown menu
  • Loading branch information
@olzzon
olzzon committed May 28, 2019
2 parents fc98124 + 6dad196 commit 12523c5
Show file tree
Hide file tree
Showing 6 changed files with 150 additions and 28 deletions.
7 changes: 4 additions & 3 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 .",
Expand All @@ -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",
Expand Down
21 changes: 17 additions & 4 deletions src/assets/css/Settings.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
top: 0px;
left: 2vw;
width: 96vw;
background-color: rgb(44, 44, 44);
background-color: rgb(31, 31, 31);
border-width: 1px;
border-style: solid;
border-color: rgba(156, 156, 156, 0.63);
Expand All @@ -27,20 +27,33 @@
display:flex;
flex-direction: row;
flex-wrap: wrap;
margin-top: 10px;
margin-top: 20px;
font-size: 1.1em;
background-color: rgb(31, 31, 31);
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 {
white-space: nowrap;
margin: 5px;
min-width: 220px;
color: rgb(255, 255, 255);
background-color: rgb(49, 49, 49);
border-width: 1px;
border-style: solid;
border-color: rgb(34, 34, 34);
}

.Settings-input-selector {
color: rgb(13, 13, 66);
margin: 5px;
}

input[type=text] {
text-align: right;
text-align: left;
margin: 5px;
font-size: 1.1em;
border: 1px solid rgb(104, 104, 104);
Expand Down
68 changes: 61 additions & 7 deletions src/components/App.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand Down Expand Up @@ -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);
Expand Down Expand Up @@ -192,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); },
});
Expand Down Expand Up @@ -244,6 +250,49 @@ 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};
});
});

//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`
Expand Down Expand Up @@ -600,7 +649,12 @@ class App extends PureComponent {
<this.renderControlHeader/> : ""
}
{this.props.store.appNav[0].showSettingsActive ?
<SettingsPage ccgConnectionProps = { this.ccgConnection }/>
<SettingsPage
mediaFoldersProps = { this.mediaFolders }
dataFoldersProps = { this.dataFolders }
templateFoldersProps = { this.templateFolders }
ccgConnectionProps = { this.ccgConnection }
/>
: null
}
<div className="App-body">
Expand Down
78 changes: 66 additions & 12 deletions src/components/Settings.js
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,27 @@
import React, { Component } from 'react';
import '../assets/css/Settings.css';
import Select from 'react-select';


//Redux:
import { connect } from "react-redux";

//Utils:
import { saveSettings } from '../util/SettingsStorage';

//Set style for Select dropdown component:
const selectorColorStyles = {
control: styles => ({ ...styles, backgroundColor: '#676767', color: 'white', border: 0 }),
option: (styles) => {
return {
backgroundColor: '#AAAAAA',
color: 'white'
};
},
singleValue: styles => ({ ...styles, color: 'white' }),
};


class SettingsPage extends Component {

constructor(props) {
Expand All @@ -16,6 +31,7 @@ class SettingsPage extends Component {
};
this.handleChange = this.handleChange.bind(this);
this.handleDisableDragNDrop = this.handleDisableDragNDrop.bind(this);
this.handleDisableOverlay = this.handleDisableOverlay.bind(this);
this.handleTabTitle = this.handleTabTitle.bind(this);
this.handleTabMediaFolder = this.handleTabMediaFolder.bind(this);
this.handleTabDataFolder = this.handleTabDataFolder.bind(this);
Expand All @@ -39,11 +55,20 @@ class SettingsPage extends Component {

handleDisableDragNDrop(event) {
var settingsCopy= Object.assign({}, this.state.settings);
settingsCopy[event.target.name] = event.target.checked;
settingsCopy.disableDragNDrop = event.target.checked;
this.setState(
{settings: settingsCopy}
);
}

handleDisableOverlay(event) {
var settingsCopy= Object.assign({}, this.state.settings);
settingsCopy.disableOverlay = event.target.checked;
this.setState(
{settings: settingsCopy}
);
}

handleTabTitle(event) {
var settingsCopy= Object.assign({}, this.state.settings);
settingsCopy.tabData[event.target.name].title = event.target.value;
Expand All @@ -52,26 +77,26 @@ 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}
);
}


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}
);
Expand Down Expand Up @@ -102,27 +127,48 @@ class SettingsPage extends Component {
return (
<div className="Settings-channel-form" onSubmit={this.handleSubmit}>
<label className="Settings-input-field">
OUT {index+1} :
OUT {index+1} NAME :
<br/>
<input name={index} type="text" value={item.title} onChange={this.handleTabTitle} />
</label>
<label className="Settings-input-field">
MEDIAFOLDER :
<input name={index} type="text" value={item.subFolder} onChange={this.handleTabMediaFolder} />
<Select
styles={selectorColorStyles}
className="Settings-input-selector"
value={{label: item.subFolder, value: item.subFolder}}
onChange={(event) => this.handleTabMediaFolder(index, event)}
options={this.props.mediaFoldersProps}
/>
</label>
<label className="Settings-input-field">
DATAFOLDER :
<input name={index} type="text" value={item.dataFolder} onChange={this.handleTabDataFolder} />
<Select
styles={selectorColorStyles}
className="Settings-input-selector"
value={{label: item.dataFolder, value: item.dataFolder}}
onChange={(event) => this.handleTabDataFolder(index, event)}
options={this.props.dataFoldersProps}
/>
</label>
<label className="Settings-input-field">
TEMPLATEFOLDER :
<input name={index} type="text" value={item.overlayFolder} onChange={this.handleTabOverlayFolder} />
<Select
styles={selectorColorStyles}
className="Settings-input-selector"
value={{label: item.overlayFolder, value: item.overlayFolder}}
onChange={(event) => this.handleTabOverlayFolder(index, event)}
options={this.props.templateFoldersProps}
/>
</label>
<label className="Settings-input-field">
WIPE :
<br/>
<input name={index} type="text" value={item.wipe} onChange={this.handleTabWipe} />
</label>
<label className="Settings-input-field">
WIPE OFFSET :
<br/>
<input name={index} type="text" value={item.wipeOffset} onChange={this.handleTabWipeOffset} />
</label>
</div>
Expand All @@ -137,16 +183,24 @@ class SettingsPage extends Component {
<div className="Settings-channel-form">
<label className="Settings-input-field">
IP ADDRESS :
<br/>
<input name="ipAddress" type="text" value={this.state.settings.ipAddress} onChange={this.handleChange} />
</label>
<label className="Settings-input-field">
PORT :
<br/>
<input name="port" type="text" value={this.state.settings.port} onChange={this.handleChange} />
</label>
<label className="Settings-input-field">
DISABLE DRAG´N´DROP :
<input name="disableDragNDrop" type="checkbox" checked={this.state.settings.disableDragNDrop} onChange={this.handleDisableDragNDrop} />
<br/>
<input type="checkbox" checked={this.state.settings.disableDragNDrop} onChange={this.handleDisableDragNDrop} />
</label>
<label className="Settings-input-field">
CLIPTOOL ONLY :
<br/>
<input type="checkbox" checked={this.state.settings.disableOverlay} onChange={this.handleDisableOverlay} />
</label>
</div>

<br/>
Expand Down
2 changes: 2 additions & 0 deletions src/reducers/settingsReducer.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ const defaultSettingsReducerState = () => {
port: '5250',
selectView: 0,
disableDragNDrop: false,
disableOverlay: false,
tabData: []
}];
for (let i=0; i<4; i++) {
Expand Down Expand Up @@ -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 || '';
Expand Down
2 changes: 0 additions & 2 deletions src/util/filePathStringHandling.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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(/\..+$/, '')
);
Expand Down

0 comments on commit 12523c5

Please sign in to comment.