Don't show milliseconds in the left duration timer in the editor (wul…

…kano#557)

As discussed in Slack, it's just noise. We already show it when you hover the progress bar.

renderer/components/editor/controls/left.js

@@ -18,7 +18,7 @@ class LeftControls extends React.Component {
               <PauseIcon shadow size="26px" fill="#fff" hoverFill="#fff" onClick={pause}/>
           }
         </div>
-        <div className="time">{formatTime(currentTime)}</div>
+        <div className="time">{formatTime(currentTime, {showMilliseconds: false})}</div>
         <style jsx>{`
             .container {
               display: flex;

renderer/components/editor/controls/preview.js

@@ -25,7 +25,7 @@ class Preview extends React.Component {
     return (
       <div className="container" onMouseMove={event => event.stopPropagation()}>
         <video ref={this.videoRef} preload="auto" src={src}/>
-        <div className="time">{formatTime(time, duration)}</div>
+        <div className="time">{formatTime(time, {extra: duration})}</div>
         <style jsx>{`
           .container {
             flex: 1;

renderer/utils/format-time.js

@@ -1,17 +1,24 @@
 import moment from 'moment';
 
-const formatTime = (time, duration) => {
-  const durationFormatted = duration ?
+const formatTime = (time, options) => {
+  options = {
+    showMilliseconds: true,
+    ...options
+  };
+
+  const format = `m:ss${options.showMilliseconds ? '.SS' : ''}`;
+
+  const durationFormatted = options.extra ?
     `  (${moment()
       .startOf('day')
-      .milliseconds(duration * 1000)
-      .format('m:ss.SS')})` :
+      .milliseconds(options.extra * 1000)
+      .format(format)})` :
     '';
 
   return `${moment()
     .startOf('day')
     .milliseconds(time * 1000)
-    .format('m:ss.SS')}${durationFormatted}`;
+    .format(format)}${durationFormatted}`;
 };
 
 export default formatTime;