Added a preview for the video and clamped times

package.json

@@ -1,7 +1,7 @@
 {
   "name": "stacc",
   "description": "An application to help effectively convert videos into Gifs",
-  "version": "0.3.1",
+  "version": "0.3.2",
   "license": "MIT",
   "scripts": {
     "dev": "electron-webpack dev",
@@ -59,7 +59,7 @@
     },
     "dmg": {
       "icon": "build/icon.icns",
-      "title": "Stacc 0.3.1"
+      "title": "Stacc 0.3.2"
     }
   }
 }

src/renderer/components/App/App.js

@@ -176,12 +176,26 @@ class App extends React.Component {
     };
 
     if (name === 'start') {
+      let endTime = value + this.state.properties.duration;
+
+      if (endTime > this.state.videoInfo.duration) {
+        state.properties[name] = this.state.videoInfo.duration - this.state.properties.duration;
+      }
+
       state.activeTime = value;
     }
 
     if (name === 'duration') {
       let endTime = this.state.properties.start + value;
 
+      if (value > 5000) {
+        this.addMessage("Over 5s will produce large file size", "error");
+      }
+
+      if (endTime > this.state.videoInfo.duration) {
+        state.properties[name] = this.state.videoInfo.duration - this.state.properties.start;
+      }
+
       // TODO Cut down over length
 
       state.activeTime = endTime;
@@ -245,6 +259,8 @@ class App extends React.Component {
                   hasFiles={file}/>
                 <VideoPreview
                   time={activeTime}
+                  start={properties.start}
+                  duration={properties.duration}
                   className="app__drop__video"
                   file={file}/>
               </div>

src/renderer/components/Controls/TimeInput.js

@@ -12,7 +12,7 @@ import classNames from 'classnames';
 import "./TimeInput.scss";
 
 function padTime(value) {
-	return value.toString().padStart(2, '0');
+	return Math.floor(value).toString().padStart(2, '0');
 }
 
 function clamp(value, min, max) {

src/renderer/components/VideoPreview/VideoPreview.js

@@ -7,6 +7,7 @@ import classNames from 'classnames';
 // Redux
 
 // Components
+import Icon from '../UI/Icon/Icon';
 
 // CSS, Requires
 import "./VideoPreview.scss";
@@ -20,6 +21,10 @@ class VideoPreview extends React.Component {
     time: 0
   };
 
+  state = {
+    playing: false
+  }
+
   componentDidUpdate(oldProps) {
     if ((oldProps.time !== this.props.time || oldProps.file !== this.props.file) && this.video) {
       this.video.currentTime = this.props.time / 1000;
@@ -53,8 +58,38 @@ class VideoPreview extends React.Component {
     return valid.includes(extname);
   }
 
+  onClick = e => {
+    if (this.props.file) {
+      if (this.state.playing) {
+        this.video.pause();
+      } else {
+        this.video.play();
+      }
+
+      this.setState({
+        playing: !this.state.playing
+      });
+    }
+  }
+
+  onTimeUpdate = e => {
+    if (this.state.playing) {
+      if (e.target.currentTime > (this.props.start + this.props.duration) / 1000) {
+        e.target.currentTime = this.props.start / 1000;
+      }
+    }
+  }
+
+  onEnded = e => {
+    if (this.state.playing) {
+      e.target.currentTime = this.props.start / 1000;
+      e.target.play();
+    }
+  }
+
   render() {
     const { className, file } = this.props;
+    const { playing } = this.state;
 
     const cls = classNames(
       className,
@@ -73,7 +108,17 @@ class VideoPreview extends React.Component {
           <h3>Oh no!</h3>
           <p>No preview available for this file type</p>
         </div>
-        <video ref={this.setRef} className="videopreview__video" src={this.displayFile(file)}/>
+        <div className="videopreview__controls">
+          { playing ? <Icon size="large" icon="pause"/> : <Icon size="large" icon="play"/>}
+        </div>
+        <video
+          muted
+          onClick={this.onClick}
+          ref={this.setRef}
+          className="videopreview__video"
+          onTimeUpdate={this.onTimeUpdate}
+          onEnded={this.onEnded}
+          src={this.displayFile(file)}/>
       </div>
     );
 

src/renderer/components/VideoPreview/VideoPreview.scss

@@ -58,4 +58,38 @@
       transform: translate3d(-50%, -50%, 0);
     }
   }
+
+  &__controls {
+    position: absolute;
+
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+
+    display: flex;
+
+    align-items: center;
+    justify-content: center;
+
+    color: white;
+
+    pointer-events: none;
+
+    mix-blend-mode: difference;
+
+    transform: scale(0.9);
+    opacity: 0;
+
+    transition: {
+      duration: var(--ui-duration-normal);
+      property: transform, opacity;
+      timing-function: var(--ui-timing-function);
+    }
+
+    .videopreview--show:not(.videopreview--no-preview):hover & {
+      opacity: 1;
+      transform: scale(1);
+    }
+  }
 }