Finishing touches

Author: Joshua Kifer

README.md

@@ -1,24 +1,31 @@
-# ElasticSuite
+# React MIDI Player
 
-## Candidate Evaluation Project.
+This project demonstrates a simple MIDI player.  MIDI files when added are saved to Local Storage.  Sample MIDI files can be found at [midiworld.com](http://www.midiworld.com/).
 
-### A Music Player
+---
 
 Requirements:
 
 - [x] Add music button, opens add music form
 - [x] Add music form, title, artist, album, file
 - [x] Queue list, displays title, artist, album
 - [x] Double-clicking in queue list plays selected song
-- [ ] When a song finishes playing, play next song in queue
-- [ ] Player status: current song title, artist, album, time elapsed, duration
-- [ ] Player interface: play, stop, previous, next, scrubber bar, should all actually function.
+- [x] When a song finishes playing, play next song in queue
+- [x] Player status: current song title, artist, album, time elapsed, duration
+- [x] Player interface: play, stop, previous, next, scrubber bar, should all actually function.
 
-Extra Credit:
+Extra:
 
 - [x] Actually playing audio. If not playing audio, just stub out file upload, playing, etc. Make each song just a two minute timer.
-- [ ] Simple UI theme in CSS.
+- [x] Simple UI theme in CSS.
 - [x] Persistence in local storage.
 
 ---
 
+### Install
+
+* Make sure yarn is available: `brew install yarn`
+* Install dependencies: `yarn`
+* Start the project: `yarn start`
+* Browse to the reported URL.
+

components/Editor.js

@@ -1,8 +1,8 @@
 import React from 'react'
 import { Form } from 'semantic-ui-react'
 
-export default ({ track, onFieldChange }) => (
-  <Form inverted>
+export default ({ inverted, track, onFieldChange }) => (
+  <Form inverted={inverted}>
     <Form.Field>
       <label>Title</label>
       <input

components/Library.js

@@ -1,8 +1,8 @@
 import React from 'react'
 import { Icon, List } from 'semantic-ui-react'
 
-export default ({ list, playing, onClickTrack, onDoubleClickTrack, onDeleteTrack }) => (
-  <List divided inverted selection>
+export default ({ inverted, list, playing, onClickTrack, onDoubleClickTrack, onDeleteTrack }) => (
+  <List divided inverted={inverted} selection>
     {Object.values(list).map(track => (
       <List.Item
         key={track.id}

components/Loader.js

@@ -18,7 +18,7 @@ function loadFile (file, then) {
   reader.readAsDataURL(file)
 }
 
-export default ({ onTrackLoaded }) => (
+export default ({ inverted, onTrackLoaded }) => (
   <div>
     <input multiple
       style={{ display: 'none' }}
@@ -29,6 +29,6 @@ export default ({ onTrackLoaded }) => (
         }
       }}
     />
-    <Button inverted onClick={event => event.target.previousSibling.click()}>Add Files</Button>
+    <Button inverted={inverted} onClick={event => event.target.previousSibling.click()}>Add Files</Button>
   </div>
 )

components/Main.js

@@ -1,6 +1,6 @@
 import React from 'react'
 import { playerFromMIDIBuffer } from 'hackmidi'
-import { Divider, Grid, Segment } from 'semantic-ui-react'
+import { Divider, Grid, Icon, Segment } from 'semantic-ui-react'
 
 import Player from './Player'
 import Editor from './Editor'
@@ -19,9 +19,10 @@ export default class Main extends React.Component {
       activity: {
         track: null,
         playing: false,
-        duration: 0,
-        position: 0
-      }
+        duration: 0.01,
+        position: 0.00000001
+      },
+      inverted: true
     })
     this.player = null
   }
@@ -35,8 +36,8 @@ export default class Main extends React.Component {
       activity: {
         track: null,
         playing: false,
-        duration: 0,
-        position: 0
+        duration: 0.01,
+        position: 0.00000001
       }
     })
   }
@@ -46,7 +47,6 @@ export default class Main extends React.Component {
     activity.playing = playing
     this.setState({ activity })
     if (position === activity.duration) this.playOffset(1)
-    console.log(activity)
   }
   componentDidUpdate () {
     // console.log(this.state.activity)
@@ -141,8 +141,8 @@ export default class Main extends React.Component {
     }
     return (
       <div style={style}>
-        <Segment inverted>
-          <Grid columns='two' stackable>
+        <Segment inverted={this.state.inverted}>
+          <Grid columns='2' stackable>
             <Grid.Row>
               <Grid.Column>
                 <Player
@@ -155,15 +155,28 @@ export default class Main extends React.Component {
                 />
               </Grid.Column>
               <Grid.Column verticalAlign='bottom' textAlign='right'>
-                <Loader onTrackLoaded={track => this.addTrack(track)} />
+                <div style={{ marginBottom: '3.8em' }}>
+                  {this.state.inverted
+                  ? <span>
+                    Dark&nbsp;&nbsp;
+                    <Icon name='toggle on' onClick={() => this.setState({inverted: false})} />
+                  </span>
+                  : <span>
+                    Light&nbsp;&nbsp;
+                    <Icon name='toggle off' onClick={() => this.setState({inverted: true})} />
+                  </span>
+                  }
+                </div>
+                <Loader onTrackLoaded={track => this.addTrack(track)} inverted={this.state.inverted} />
               </Grid.Column>
             </Grid.Row>
           </Grid>
           <Divider />
-          <Grid columns='two' stackable>
+          <Grid columns='2' stackable>
             <Grid.Row>
               <Grid.Column>
                 <Library
+                  inverted={this.state.inverted}
                   list={this.state.library}
                   playing={this.state.activity.track}
                   onClickTrack={track => this.selectTrack(track)}
@@ -173,7 +186,11 @@ export default class Main extends React.Component {
               </Grid.Column>
               <Grid.Column>
                 {this.state.selected &&
-                  <Editor track={this.state.selected} onFieldChange={data => this.updateSelected(data)} />}
+                  <Editor
+                    inverted={this.state.inverted}
+                    track={this.state.selected}
+                    onFieldChange={data => this.updateSelected(data)}
+                  />}
               </Grid.Column>
             </Grid.Row>
           </Grid>

components/Player.js

@@ -8,23 +8,26 @@ import { secondsToMinutes } from '../lib/time'
 export default ({ activity, onPlay, onPause, onPrevious, onNext, onSeek }) => (
   <div>
     <div style={{ textAlign: 'center', paddingBottom: '.2em' }}>
-      {activity.track ? <span>{activity.track.title}</span> : <span>&nbsp;</span>}
+      {activity.track
+        ? <span>
+          {activity.track.artist ? activity.track.artist + ' - ' : ''}
+          {activity.track.title}
+          {activity.track.album ? ' - ' + activity.track.album : ''}
+        </span> : <span>&nbsp;</span>}
     </div>
-    <div style={{  }}>
-      <div style={{ float: 'left', marginTop: '1.15em', marginRight: '2em'}}>
+    <div>
+      <div style={{ float: 'left', marginTop: '1.15em', marginRight: '1.5em' }}>
         {secondsToMinutes(activity.position)}
       </div>
       <Slider
         min={0}
         max={activity.duration}
         value={activity.position}
         format={secondsToMinutes}
-          // onChangeStart={this.handleChangeStart}
         onChange={onSeek}
-          // onChangeComplete={this.handleChangeComplete}
-        />
-      <div style={{ float: 'left', marginTop: '1.15em', marginLeft: '1em'}}>
-        {secondsToMinutes(activity.duration)}
+      />
+      <div style={{ float: 'left', marginTop: '1.15em', marginLeft: '1.4em' }}>
+        {secondsToMinutes(activity.duration - activity.position)}
       </div>
     </div>
     <div style={{ clear: 'both', textAlign: 'center' }}>

index.html

@@ -6,6 +6,15 @@
     <title>Elastic MIDI Jukebox</title>
     <!-- <script type='text/javascript' src='//www.midijs.net/lib/midi.js'></script> -->
     <!-- <script type='text/javascript' src='midi.js'></script> -->
+    <style>
+      .rangeslider {
+        float: left;
+        width: 70%;
+      }
+      .rangeslider__handle {
+        display: none !importan;
+      }
+    </style>
   </head>
   <body>
     <main></main>