Fixed Header - CountDown & PVW update

tv2 · Sep 28, 2018 · dfe6ad9 · dfe6ad9
1 parent b1799de
commit dfe6ad9
Show file tree

Hide file tree

Showing 4 changed files with 44 additions and 32 deletions.
diff --git a/src/assets/css/App.css b/src/assets/css/App.css
@@ -37,10 +37,10 @@ body {
 
 
 .App-title-background {
-  position: absolute;
+  position: relative;
   top: 5px;
   left: 25%;
-  width: 380px;
+  width: 500px;
   height: 115px;
   background-color: rgb(22, 22, 22);
   border-width: 0px;
@@ -49,39 +49,34 @@ body {
   box-shadow: 6px 6px 6px rgb(34, 34, 34);
 }
 
-
-.App-title {
-  position: relative;
-  top: 5px;
+.headerPgmCounter {
+  background-color: #aa0101;
   color: rgb(255, 255, 255);
-  font-size: 1.2em;
-  margin: 10px;
-  margin-left: 40px;
-  margin-right: 40px;
+  font-size: 1.6em;
+  margin-left: 5px;
+  margin-right: 5px;
 }
 
 .headerPvwThumbnailImage {
-  position: abolute;
-  top: 40px;
-  left: 16px;
   border-width: 2px;
   border-style:  solid;
-  border-color:  #aa0101;
-  width: 130px;
+  border-color:  #0a7500;
+  width: 170px;
   height: auto;
-  margin: 8px;  
+  margin-top: 6px;
+  margin-bottom: 4px;
+  margin-right: 8px;  
 }
 
 .headerPgmThumbnailImage {
-  position: abolute;
-  top: 40px;
-  left: 160px;
   border-width: 2px;
   border-style:  solid;
-  border-color:  #0a7500;
-  width: 130px;
+  border-color:  #aa0101;
+  width: 170px;
   height: auto;
-  margin: 8px;  
+  margin-top: 6px;
+  margin-bottom: 4px;
+  margin-left: 8px;  
 }
 
 .Reload-setup-background {

diff --git a/src/assets/css/Thumbnail.css b/src/assets/css/Thumbnail.css
@@ -23,9 +23,9 @@
 }
 
 .thumbnailImage {
-    border-width: 2px;
+    border-width: 4px;
     border-style:  solid;
-    border-color:  #ff000000;
+    border-color: red;
     width: 90%;
     height: auto;
     margin: 8px;

diff --git a/src/components/App.js b/src/components/App.js
@@ -46,12 +46,14 @@ class App extends Component {
       activeTabTitle: '',
       activePvwPix: '',
       activePgmPix: '',
+      pgmCounter: ''
     };
 
     this.checkConnectionStatus = this.checkConnectionStatus.bind(this);
     this.handleSettingsPage = this.handleSettingsPage.bind(this);
     this.setActivePgmPix = this.setActivePgmPix.bind(this);
     this.setActivePvwPix = this.setActivePvwPix.bind(this);
+    this.setPgmCounter = this.setPgmCounter.bind(this);
     this.renderHeader = this.renderHeader.bind(this);
 
   }
@@ -141,6 +143,9 @@ class App extends Component {
     this.setState({activePvwPix: pix});
   }
 
+  setPgmCounter(val) {
+    this.setState({pgmCounter: val});
+  }
   setActiveTab(tab) {
     this.setState({activeTab: tab});
   }
@@ -155,10 +160,11 @@ class App extends Component {
     return (
       <header className="App-header">
         <div className="App-title-background">
-          <a className="App-title">CasparCG Clip Tool</a> 
           <img src={this.state.activePvwPix} className="headerPvwThumbnailImage" />
+          <buttom className="headerPgmCounter">
+            {this.state.pgmCounter}
+          </buttom>
           <img src={this.state.activePgmPix} className="headerPgmThumbnailImage" />
-
         </div>
         <div className="Reload-setup-background">
           <button className="App-connection-status" 
@@ -207,6 +213,7 @@ class App extends Component {
             setActivePvwPixProps={this.setActivePvwPix.bind(this)}
             setActivePgmPixProps={this.setActivePgmPix.bind(this)}
             getTabStateProps={this.getTabState.bind(this)}
+            setPgmCounterProps={this.setPgmCounter.bind(this)}
           />
         </div>
         )

diff --git a/src/components/Thumbnail.js b/src/components/Thumbnail.js
@@ -19,6 +19,7 @@ class Thumbnail extends Component {
     //subFolderProps What folder to work on
     //setActivePgmPixProps Reference to Set Header PGMpix
     //setActivePvmPixProps Reference to Set Header Pvmpix
+    //setActivePgmCountProps Sets the timer in header
     //getTabStateProps returns TRUE/FALSE Is this tab loaded
 
     constructor(props) {
@@ -33,6 +34,7 @@ class Thumbnail extends Component {
             },
             thumbActiveIndex: 0,
             thumbActiveBgIndex: 0,
+            isTabActive: false,
         };
         this.updatePlayingStatus = this.updatePlayingStatus.bind(this);
         this.updateThumbnail = this.updateThumbnail.bind(this);
@@ -96,9 +98,16 @@ class Thumbnail extends Component {
     // Timer controlled playing & tally status
     updatePlayingStatus() {
         var forceUpdate = false;
-
+        var thisActive = this.props.getTabStateProps(this.props.ccgOutputProps);
+        if (!this.state.isTabActive && thisActive) {
+            this.setState({isTabActive: thisActive});
+            forceUpdate = true;
+        } else if (!thisActive)
+        {
+            this.setState({isTabActive: thisActive});
+        }
         //only update when tab is selected:
-        if (this.props.getTabStateProps(this.props.ccgOutputProps)) {
+        if (thisActive) {
             this.props.ccgConnectionProps.info(this.props.ccgOutputProps, 10)
             .then ((infoStatus)=>{
                 // casparcg-connection library bug: returns filename in either .filename or .location
@@ -127,12 +136,13 @@ class Thumbnail extends Component {
                             this.setStateThumbListElement(index, "loop", infoStatus.response.data.foreground.producer.loop);
                             this.updateThumbnail(index);
                             this.props.setActivePgmPixProps(item.thumbPix);
+                            this.props.setPgmCounterProps(this.framesToTimeCode(this.state.thumbActiveForegroundProducer["file-nb-frames"] - this.state.thumbActiveForegroundProducer["file-frame-number"]));
                         }
                     }
                     //Handle Background:
                     if(fileNameBg === item.name) {
 
-                        if(this.state.thumbActiveBgIndex != index) {
+                        if(forceUpdate || this.state.thumbActiveBgIndex != index) {
                             // Remove Old Green Tally
                             this.setStateThumbListElement(this.state.thumbActiveBgIndex, "tallyBg", false);
                             this.updateThumbnail(this.state.thumbActiveBgIndex);
@@ -233,7 +243,7 @@ class Thumbnail extends Component {
             hour + "." + minute + "." + sec
         );
         } else {
-            return "";
+            return "00.00.00";
         }
     }
 
@@ -251,9 +261,9 @@ class Thumbnail extends Component {
                     className="thumbnailImage" 
                     style = {Object.assign({},
                         this.state.thumbList[index].tally ? 
-                            {borderColor: 'red'} : {borderColor: ''},
+                            {borderWidth: '4px'} : {borderWidth: '0px'},
                             this.state.thumbList[index].tallyBg ? 
-                            {boxShadow: '0px 0px 1px 3px green'} : {boxShadow: ''} 
+                            {boxShadow: '0px 0px 1px 5px green'} : {boxShadow: ''} 
                     )}
                 />
                 <button className="thumbnailImageClickPvw"