Add simple Duration component to improve demo

In place of #30

src/demo/App.js

@@ -6,14 +6,16 @@ import './App.scss'
 import './Range.scss'
 
 import ReactPlayer from '../ReactPlayer'
+import Duration from './Duration'
 
 export default class App extends Component {
   state = {
     url: null,
     playing: true,
     volume: 0.8,
     played: 0,
-    loaded: 0
+    loaded: 0,
+    duration: 0
   };
   load = url => {
     this.setState({
@@ -204,7 +206,15 @@ export default class App extends Component {
             </tr>
             <tr>
               <th>duration</th>
-              <td>{ this.state.duration }</td>
+              <td><Duration seconds={duration} /></td>
+            </tr>
+            <tr>
+              <th>elapsed</th>
+              <td><Duration seconds={duration * played} /></td>
+            </tr>
+            <tr>
+              <th>remaining</th>
+              <td><Duration seconds={duration * (1 - played)} /></td>
             </tr>
           </tbody></table>
         </section>

src/demo/Duration.js

@@ -0,0 +1,24 @@
+import React from 'react'
+
+export default function Duration ({ className, seconds }) {
+  return (
+    <time dateTime={`P${Math.round(seconds)}S`} className={className}>
+      { format(seconds) }
+    </time>
+  )
+}
+
+function format (seconds) {
+  const date = new Date(seconds * 1000)
+  const hh = date.getHours()
+  const mm = date.getMinutes()
+  const ss = pad(date.getSeconds())
+  if (hh) {
+    return `${hh}:${pad(mm)}:${ss}`
+  }
+  return `${mm}:${ss}`
+}
+
+function pad (string) {
+  return ('0' + string).slice(-2)
+}