Merge pull request #17 from olzzon/develop

Overlay and Wipe fix and improvements

Example-using-overlay/ToTemplateSubfolder/HTML-Bundt/css/style.css

@@ -29,7 +29,7 @@ HTML,BODY {
 	top:36px;
 	-webkit-transform-origin: 0% 100%;
 	-webkit-transform: scale(0.0,0.0);
-	background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#bebebe), color-stop(23%,#e6e6e6), color-stop(50%,#bebebe), color-stop(78%,#e6e6e6), color-stop(100%,#bebebe));
+	background: -webkit-gradient(linear, left bottom, right top, color-stop(0%,#c20000), color-stop(26%,#a32626), color-stop(49%,#b60b0b), color-stop(73%,#be3232), color-stop(100%,#ce0c0c));
 	background-size: 400% 100%;
 }
 
@@ -73,4 +73,4 @@ HTML,BODY {
 	font-family:SourceSansPro-Bold;
 	text-shadow: 2px 2px 7px rgba(0, 0, 0, 1);
 	text-transform: uppercase;
-}
+}

src/components/App.js

@@ -19,6 +19,7 @@ import {cleanUpFilename} from '../util/filePathStringHandling';
 import CcgLoadPlay from '../util/CcgLoadPlay';
 import HandleAutoNext from '../util/HandleAutoNext';
 import HandleOverlay from '../util/HandleOverlay';
+import HandleShortcuts from '../util/HandleShortcuts';
 
 //CSS files:
 import '../assets/css/Rmc-tabs.css';
@@ -46,19 +47,8 @@ class App extends PureComponent {
         this.updatePlayingStatus = this.updatePlayingStatus.bind(this);
     }
 
-    static getDerivedStateFromError(error) {
-        // Update state so the next render will show the fallback UI.
-        return { hasError: true };
-    }
-
-    componentDidCatch(error, info) {
-        // You can also log the error to an error reporting service
-        logErrorToMyService(error, info);
-    }
 
     componentWillMount() {
-        //Setup Keyboard shortcuts:
-        document.addEventListener("keydown", this._handleKeyDown.bind(this));
 
         //Define Output Tabs:
 
@@ -79,6 +69,7 @@ class App extends PureComponent {
         this.ccgLoadPlay = new CcgLoadPlay(this.ccgConnection);
         this.handleOverlay = new HandleOverlay(this.ccgConnection);
         this.handleAutoNext = new HandleAutoNext(this.ccgLoadPlay);
+        this.handleShortcuts = new HandleShortcuts(this.ccgLoadPlay);
 
         // Initialize CasparCG subscriptions:
         this.ccgSubscribeInfoData();
@@ -243,36 +234,6 @@ class App extends PureComponent {
         });
     }
 
-    //Shortcut for mix and take
-    _handleKeyDown(event) {
-
-        //TODO: Shorcut does not work after moving to App.js (still referencing to old Thumbnail)
-
-        //Play PVW 1-4 key 1-4:
-        const pvwPlay = JSON.stringify(this.props.store.appNavReducer[0].appNav.activeTab+1).charCodeAt(0);
-        //Play PGM 1-4 key: QWER:
-        const pgmPlay = ["Q", "W", "E", "R"][this.props.store.appNavReducer[0].appNav.activeTab].charCodeAt(0);
-
-        switch( event.keyCode ) {
-            case pvwPlay:
-                this.ccgLoadPlay.playMedia(
-                    10,
-                    this.state.thumbActiveBgIndex,
-                    this.state.thumbActiveIndex
-                );
-                break;
-            case pgmPlay:
-                this.ccgLoadPlay.playMedia(
-                    10,
-                    this.state.thumbActiveIndex,
-                    this.state.thumbActiveBgIndex
-                );
-                break;
-            default:
-                break;
-        }
-    }
-
     //Rendering functions:
 
     renderHeader() {

src/components/Settings.js

@@ -19,6 +19,7 @@ class SettingsPage extends Component {
         this.handleTabDataFolder = this.handleTabDataFolder.bind(this);
         this.handleTabDataOverlayFolder = this.handleTabDataOverlayFolder.bind(this);
         this.handleTabDataWipe = this.handleTabDataWipe.bind(this);
+        this.handleTabDataWipeOffset = this.handleTabDataWipeOffset.bind(this);
         this.handleSubmit = this.handleSubmit.bind(this);
         this.renderChannelSettings = this.renderChannelSettings.bind(this);
     }
@@ -58,7 +59,6 @@ class SettingsPage extends Component {
         );
     }
 
-
     handleTabDataWipe(event) {
         var settingsCopy= Object.assign({}, this.state.settings);
         settingsCopy.tabData[event.target.name].wipe = event.target.value;
@@ -68,6 +68,14 @@ class SettingsPage extends Component {
     }
 
 
+    handleTabDataWipeOffset(event) {
+        var settingsCopy= Object.assign({}, this.state.settings);
+        settingsCopy.tabData[event.target.name].wipeOffset = event.target.value;
+        this.setState(
+            {settings: settingsCopy}
+        );
+    }
+
     handleSubmit(event) {
         saveSettings(this.state.settings);
     }
@@ -91,6 +99,10 @@ class SettingsPage extends Component {
                     WIPE :
                     <input name={index} type="text" value={item.wipe} onChange={this.handleTabDataWipe} />
                 </label>
+                <label className="Settings-input-field">
+                    WIPE OFFSET :
+                    <input name={index} type="text" value={item.wipeOffset} onChange={this.handleTabDataWipeOffset} />
+                </label>
             </div>
         )
     }

src/components/Thumbnail.js

@@ -70,6 +70,7 @@ class Thumbnail extends PureComponent {
                     length: items.length
                 }
             });
+
             items.map((item, index) => {
                 var currentAtIndex = this.props.store.dataReducer[0].data.channel[this.props.ccgOutputProps-1].thumbList[index] | { name: ''};
                 if (item.name != currentAtIndex)
@@ -87,15 +88,15 @@ class Thumbnail extends PureComponent {
 
                     this.props.ccgConnectionProps.dataRetrieve(item.name + ".meta")
                     .then((data) => {
-                        window.store.dispatch({
+                        this.props.dispatch({
                             type:'SET_META_LIST',
                             index: index,
                             tab: this.props.ccgOutputProps-1,
                             metaList: JSON.parse(data.response.data).channel[this.props.ccgOutputProps-1].metaList
                         });
                     })
                     .catch((error) => {
-                        window.store.dispatch({
+                        this.props.dispatch({
                             type:'SET_EMPTY_META',
                             index: index,
                             tab: this.props.ccgOutputProps-1

src/reducers/dataReducer.js

@@ -64,6 +64,9 @@ export const dataReducer = ((state = defaultDataReducerState, action) => {
                 nextState[0].data.ccgTimeCounter[index] = secondsToTimeCode(item.timeLeft);
             });
             return nextState;
+        case 'SET_MEDIA_PAUSED':
+            nextState[0].data.ccgInfo[action.index].layers[9].foreground.paused = action.paused;
+            return nextState;
         case 'SET_THUMB_LENGTH':
             if (action.data.length < nextState[0].data.channel[action.data.tab].thumbList.length) {
                 nextState[0].data.channel[action.data.tab].thumbList.length = action.data.length;

src/reducers/settingsReducer.js

@@ -3,10 +3,10 @@ const defaultSettingsReducerState = [{
         ipAddress: 'localhost',
         port: '5250',
         tabData: [
-            { key: 1, title: 'SCREEN 1', subFolder: '', loop: false, autoPlay: false, overlayFolder: '', wipe: ''},
-            { key: 2, title: 'SCREEN 2', subFolder: '', loop: false, autoPlay: false, overlayFolder: '', wipe: ''},
-            { key: 3, title: 'SCREEN 3', subFolder: '', loop: false, autoPlay: false, overlayFolder: '', wipe: ''},
-            { key: 4, title: 'SCREEN 4', subFolder: '', loop: false, autoPlay: false, overlayFolder: '', wipe: ''}
+            { key: 1, title: 'SCREEN 1', subFolder: '', loop: false, autoPlay: false, overlayFolder: '', wipe: '', wipeOffset: 0.0},
+            { key: 2, title: 'SCREEN 2', subFolder: '', loop: false, autoPlay: false, overlayFolder: '', wipe: '', wipeOffset: 0.0},
+            { key: 3, title: 'SCREEN 3', subFolder: '', loop: false, autoPlay: false, overlayFolder: '', wipe: '', wipeOffset: 0.0},
+            { key: 4, title: 'SCREEN 4', subFolder: '', loop: false, autoPlay: false, overlayFolder: '', wipe: '', wipeOffset: 0.0}
         ]
     }
 }];
@@ -25,6 +25,7 @@ export const settingsReducer = ((state = defaultSettingsReducerState, action) =>
                 nextState[0].settings.tabData[index].autoPlay = action.data.tabData[index].autoPlay || false;
                 nextState[0].settings.tabData[index].overlayFolder = action.data.tabData[index].overlayFolder || '';
                 nextState[0].settings.tabData[index].wipe = action.data.tabData[index].wipe || '';
+                nextState[0].settings.tabData[index].wipeOffset = action.data.tabData[index].wipeOffset || 0.0;
             });
             return nextState;
         case 'LOOP_STATUS':

src/util/CcgLoadPlay.js

@@ -38,6 +38,7 @@ class CcgLoadPlay {
     }
 
     playMedia(output, layer, index, indexBg) {
+        this.ccgConnection.clear(output,20);
         this.ccgConnection.play(
             output,
             layer,
@@ -46,13 +47,25 @@ class CcgLoadPlay {
             'MIX',
             MIX_DURATION
         );
+        window.store.dispatch({
+            type:'SET_MEDIA_PAUSED',
+            index: (output-1),
+            paused: false
+        });
         this.loadBgMedia(output, 10, indexBg);
     }
 
     loadMedia(output, layer, index) {
         if (this.store.settingsReducer[0].settings.tabData[output-1].autoPlay) {
             this.playMedia(output, 10, index, this.store.dataReducer[0].data.channel[output-1].thumbActiveBgIndex);
         } else {
+            window.store.dispatch({
+                type:'SET_MEDIA_PAUSED',
+                index: (output-1),
+                paused: true
+            });
+            this.ccgConnection.clear(output, 20);
+            this.ccgConnection.clear(output, 21);
             this.ccgConnection.load(
                 output,
                 layer,

src/util/HandleOverlay.js

@@ -5,33 +5,52 @@ class HandleOverlay {
         const unsubscribe = store.subscribe(() => {
             this.store = window.store.getState();
         });
+
+        this.overlayIsStarted = [false, false, false, false];
+        this.wipeIsStarted = [false, false, false, false];
     }
 
     overlay(item, indexChannel) {
         const thumbIndex = this.store.dataReducer[0].data.channel[indexChannel].thumbActiveIndex;
         const metaData = this.store.dataReducer[0].data.channel[indexChannel].thumbList[thumbIndex].metaList;
         const overlayFolder = this.store.settingsReducer[0].settings.tabData[indexChannel].overlayFolder;
+
         if (overlayFolder != '' && !this.store.dataReducer[0].data.ccgInfo[indexChannel].layers[9].foreground.paused) {
             metaData.map((metaItem) => {
-                if (metaItem.startTime < item.time && item.time < (metaItem.startTime + 0.10)) {
+                if (metaItem.startTime < 0.08) {
+                    metaItem.startTime = 0.08;
+                }
+                if (metaItem.startTime < item.time && item.time < (metaItem.startTime + 0.0799) && !this.overlayIsStarted) {
                     console.log("Lower third on: ", metaItem.startTime, item.time, metaItem.templateData[0].data);
                     this.ccgConnection.cgAdd(
                         1,20, 1,
                         overlayFolder + metaItem.templatePath,
                         1,
                         this.metaDataToXml(metaItem)
                     );
-                }
-                if ((metaItem.startTime + metaItem.duration) < item.time && item.time < (metaItem.startTime + metaItem.duration + 0.08)) {
+                    this.overlayIsStarted = true;
+                } else if ((metaItem.startTime + metaItem.duration) < item.time && item.time < (metaItem.startTime + metaItem.duration + 0.0799) && !this.overlayIsStarted) {
                     console.log("Lower third OFF: ", (metaItem.startTime + metaItem.duration), item.time, metaItem.templateData[0].data);
-                    this.ccgConnection.clear(1,20);
-                }
-                //ToDo: better timing of Wipe (start half the lenght) and only when autoNext is engaged
-                if (1.15 > item.timeLeft && item.timeLeft > 1.10 && this.store.settingsReducer[0].settings.tabData[indexChannel].autoPlay) {
-                    this.ccgConnection.play(1, 11, this.store.settingsReducer[0].settings.tabData[indexChannel].wipe);
+                    this.ccgConnection.clear(indexChannel + 1, 20);
+                    this.overlayIsStarted = true;
+                } else {
+                    this.overlayIsStarted = false;
                 }
+
             });
         }
+        //ToDo: only fire once.
+        if (this.store.settingsReducer[0].settings.tabData[indexChannel].wipe != '' &&
+            this.store.settingsReducer[0].settings.tabData[indexChannel].autoPlay
+        ) {
+            let wipeOffset = parseFloat(this.store.settingsReducer[0].settings.tabData[indexChannel].wipeOffset);
+            if (wipeOffset < item.timeLeft && item.timeLeft < (wipeOffset + 0.0799) && !this.wipeIsStarted) {
+                this.ccgConnection.play(1, 21, this.store.settingsReducer[0].settings.tabData[indexChannel].wipe);
+                this.wipeIsStarted = true;
+            } else {
+                this.wipeIsStarted = false;
+            }
+        }
     }
 
     metaDataToXml(metaData) {

src/util/HandleShortcuts.js

@@ -0,0 +1,37 @@
+class HandleShortcuts {
+    constructor(ccgLoadPlay) {
+        this.ccgLoadPlay = ccgLoadPlay;
+        const unsubscribe = store.subscribe(() => {
+            this.store = window.store.getState();
+        });
+        //Setup Keyboard shortcuts:
+        document.addEventListener("keydown", this._handleKeyDown.bind(this));
+    }
+
+    //Shortcut for mix and take
+    _handleKeyDown(event) {
+        //Corresponding output for QWER shortcut:
+        const keyTuple = {Q: 1, W: 2, E: 3, R: 4};
+
+        //Only Allow Active Tab to shortcut:
+        //key: 1-4
+        const pvwPlay = JSON.stringify(this.store.appNavReducer[0].appNav.activeTab+1).charCodeAt(0);
+        //key: QWER:
+        const pgmPlay = ["Q", "W", "E", "R"][this.store.appNavReducer[0].appNav.activeTab].charCodeAt(0);
+
+        switch( event.keyCode ) {
+            case pvwPlay:
+                this.ccgLoadPlay.pvwPlay(parseInt(String.fromCharCode(event.keyCode)));
+                break;
+            case pgmPlay:
+                console.log("Play output : ", keyTuple[String.fromCharCode(event.keyCode)]);
+                this.ccgLoadPlay.pgmPlay(keyTuple[String.fromCharCode(event.keyCode)]);
+                break;
+            default:
+                break;
+        }
+    }
+
+}
+
+export default HandleShortcuts;