When a first version will be released, dev tools should not be shown, we could do a toggle or something, to show the dev tools.when needed.

• Split styles in multiple files (see Webpack behavior with that)
• Use variables for colors
• ... bla

and all that stuff. Use SCSS just for nesting is ridiculous.

If we can improve as much as possible the app consistency, that'd be great.

localStorage is not accessible in the main process, and it's a problem for some features, for example for remmembering the window position. Take a look at Level https://www.npmjs.com/package/level

• Find an alternative for localStorage (level ?)

Now we're close from a first pre-release, It's now time do discuss about distribution through a website.

It is said here it's supposed to work, but it doesn't https://www.chromium.org/audio-video

edit/tl;dr: 21/11/2016: Flac codecs shipped with Chromium 56 (January 31st, 2017), Electron may follow a few weeks later

In < Playlist / >, create a drag&drop management system to rearrange tracks.

What

• Reduce sound interuption between two songs

Currently, when a song is over, the src of the audio tag is changed, but the tag has to preload the file a bit. So there is a micro interruption of a few miliseconds.

• Crossfading option between song ?

How

Instead of having a single Audio object, need to have an array of 3: [previous, current, next]. Then when playing next or previous, it should be faster, cause tracks will already be loaded + Pop/Shift audio when needed. not working :[

We can't click on overflows to scroll down the page cause it's too thin. Keep a cool design but be able to scroll clicking on the overflow.

This project looks great. If you have a chance, do you mind adding installation instructions?

Library stop refresh signal is sent while entering in "the last folder" instead of "the last track of the last folder"

https://github.com/nwjs/nw.js
https://github.com/atom/atom-shell

Just an idea. (e.g. now, the primary color is blue)

When the window is resized, positioning is going wrong.

• Queue
• Random/Shuffle buttons (should be aligned on the left)
• Track time elapsed (should be aligne on the right)

Migrating to es6, mixins could not be used, and shortcuts were ripped out.

• Space -> play/pause
• arrows in ArtistsList
• enter in ArtistsList

Add tabs to settings view, otherwise we'll get a mess

As the features are almost all there, and the code is getting terrible to read, we have to refactor the whole stuff.

Main work

• Convert es5 to es6, then transpile with babel
• Leave global Instance states behind and use Flux pattern
• Upgrade to react 0.14
• Switch from gulp to webpack
• Switch from routie.js to react-router
• Switch from nconf to localStorage
• Update all packages

Code

• Code Consistency
• Comments
• Clean components

Smaller stuff

• change the way themes are implemented

Other interesting stuff to considered/discussed:

• Throw Bower apart
• Switch from nedb to linvodb3 https://github.com/Ivshti/linvodb3

The branch used for that is full-refactoring.

probably more to come, it's gonna be a heavy work.

Someting is getting wrong when we rollback a shuffle. There are duplicates, and other wrong stuff.

• remove Action call from Store
• wrong order & duplicates
• what if search has changed ?

Deleting a folder from the library is not correctly done

• Settings View #3
• Library View #4
• Player #5

Currently, the track search feature is called with an onchange event on the search input. With 100 tracks it's ok, but when you have 3000 of them, the search being synchronous take a huge amount of time and resources.

Search should be async. Something like:

• start to write in search input
• if nothing was written for like 400ms, then trigger search
  (best solution imo)

or

• start searching onchange, but do not display anything
• if nothing was written for 400ms, then display results

just ideas.

Chrome can read them, but I'm not sure that musicmetadata can parse them.

edit: Uncaught Error: Could not find metadata header

The longer is the library list, the more performances are poor, just by selecting a track for exemple. (With like, 5000 tracks).

See what we can do.

https://facebook.github.io/react/docs/advanced-performance.html

Currently, it is an array of integers. It should be an array of track IDs.

<input type={'range'} min={'0'} max={'100'} onChange={ this.setVolume } /> is ok.

But I'd like the volume at 100 at start. But when setting the value parameter:
<input type={'range'} min={'0'} max={'100'} value={'100'} onChange={ this.setVolume } />, then, even if the change event is triggered while changing volume, the selector stay at the same place.

I think it is related to Electron and not React, but I'm not sure.

Hey man, I'm interested, what language are you going to use ? :)

What kind of player will it be, do you have any source of inspiration ?

👍

• Be able to click and drag to select an exact time of a song
• Add a tooltip onHover to get the time at the cursor position
• When player is paused, click on the playing bar does not update the blue bar

It implicates a new view, and contextmenus changes and a kinda heavy work to create reusable component.

• Routing
• Playlist view
• Navigation
• Create
• Rename
• Delete
• Add tracks to playlist
• Remove tracks from playlist
• Dynamically update TracksList on playlist update
• Rearrange tracks in playlist (to be discussed) later
• Adapt TracksList to be usable elsewhere
• Fix tracks load between Library and Playlist (tempfix)
• Create playlist from TracksList
• Adapt dark theme
• Fix search in playlists

nothing to say more.

• After adding some folders to the library and then come back to the tracks list view, the whole app is lagging as hell.
• Resetting the library should AppActions.player.stop() then empty ArtistsList
• Updating the library does not refresh ArtistsList

or another name more explicit, cause playlist will be another thing.

including Babel and scss compilation. (Use Babel only for the jsx compilation, do not rewrite everything in es6, not for the moment)

Hey there, great job you doing on this. I really like it.

I was looking into the CSS codebase and wanted to ask what you link about using SASS (+ components) ?

without destroying design, that'd be great.

It may happen, e.g. using git-annex, that in the music directory are symlinks that point in or out of the music library. It would be nice to be able to ignore symlinks pointing inside|outside the music library. Another option would be to be able to ignore certain directories (the .git in the case of git-annex).

As the app is getting bigger, the app has to be rewritten with Flux in mind. Otherwise the code will be unreadable. es6 is a good option too.

After that we should be able to launch a first beta or someting.

or something.

Only occurs when using ReactCSSTransitionGroup to animate notifications

After triggering some notifications, I get this warning for an unknown reason. When caught, a notification does not disappear.

There must be a problem in alert.js, they react keys seem correct.

Warning: transition(): tried to perform an animation without an animationend or transitionend event after timeout (5000ms). You should either disable this transition in JS or add a CSS animation/transition.

Tracks with a #

There is a problem to investigate, but the track n° are incorrect.

We're having problem wiith big libraries, TracksList render time is getting longer and longer, >3000 tracks make the render update noticeable with the eye.

We should implement what Atom has done with the editor view: render tracks in group (tiles), and only show the tiles needed when scrolling.

• Tracks as tiles (absolute + translate3d transformation)
• Show only needed tiles
• Use onScroll on .tracks-list-body instead of onWheel
• Move chunkArray to Store to improve performance even more ? (wontdo, not really needed, it takes 0.15ms)
• Fix multi-select with maj.

helpers:
http://blog.atom.io/2015/06/24/rendering-improvements.html
http://blog.atom.io/2014/07/02/moving-atom-to-react.html

The app should remember some things when reopening.

• volume
• window dimensions
• window position

notice: localStorage does not work in main.js

App icon is missing.
That's so stupid I didn't even think about that.

As from now you are using the Bootstrap 3 grid, how about using a pre existing or an own build flexbox based grid ?

Ideally, at each release, 3 apps should be built:

• .exe (installer xor not)
• .app
• .deb

Here are some tools:
https://github.com/maxogden/electron-packager
https://www.npmjs.com/package/electron-builder

And a related issue on Electron electron/electron#673

Here are how the build "should" be. All of this can be done in a script, preferably in JavaScript rather than in bash or something.

TODO

• Start the script ?
• Check if the ignore parameter works
• Remove sources and add compiled files and assets

That's important. Many friends told me it would be great.

It shouldn't be done right now as some major changes are on the road.