Merge pull request rdubigny#7 from flyingrub/refactor-ui

Refactor UI

app/application.js

@@ -24,13 +24,7 @@ let Application = Mn.Application.extend({
         // All track initialization
         let allTracks = new Tracks([], { type: 'all' });
 
-        allTracks.fetch({
-            success: () => { // For now initialize upNext with all track
-                this.allTracks.get('tracks').each(track => {
-                    this.upNext.get('tracks').add(track);
-                });
-            }
-        });
+        allTracks.fetch();
         this.allTracks = new Playlist({
             title: "All Songs",
             tracks: allTracks

app/collections/playlists.js

@@ -27,14 +27,25 @@ const Playlists = Backbone.Collection.extend({
         if (method == 'read') {
             cozysdk.run('Playlist', 'all', {}, (err, res) => {
                 if (res) {
-                    let playlists = JSON.parse('' + res);
-                    for (let i = 0; i < playlists.length; i++) {
-                        this.add(playlists[i].value);
+                    if (options && options.success) {
+                        options.success(res);
+                    }
+                } else {
+                    if (options && options.error) {
+                        options.error(err);
                     }
-                    options.success();
                 }
             });
         }
+    },
+
+    parse(resp, options) {
+        let playlists = JSON.parse('' + resp);
+        let result = [];
+        for (let i = 0; i < playlists.length; i++) {
+            result.push(playlists[i].value);
+        }
+        return result;
     }
 });
 

app/collections/tracks.js

@@ -22,6 +22,7 @@ const Tracks = Backbone.Collection.extend({
                 this.shuffleUpNext
             );
         }
+        this.on('change:hidden', this.removeTrack, this);
     },
 
     // UpNext : shuffle
@@ -51,6 +52,10 @@ const Tracks = Backbone.Collection.extend({
         );
     },
 
+    removeTrack(track) {
+        this.remove(track);
+    },
+
     comparator(model) {
         if (this.type == 'upNext' && application.appState.get('shuffle')) {
             return undefined;
@@ -60,17 +65,28 @@ const Tracks = Backbone.Collection.extend({
     },
 
     sync(method, model, options) {
-        if (method == 'read' && this.type) {
-            cozysdk.run('Track', this.type, {}, (err, res) => {
+        if (method == 'read' && this.type == "all") {
+            cozysdk.run('Track', 'playable', {}, (err, res) => {
                 if (res) {
-                    let tracks = JSON.parse('' + res);
-                    for (let i = 0; i < tracks.length; i++) {
-                        this.add(tracks[i].value);
+                    if (options && options.success) {
+                        options.success(res);
+                    }
+                } else {
+                    if (options && options.error) {
+                        options.error(err);
                     }
-                    options.success();
                 }
             });
         }
+    },
+
+    parse(resp, options) {
+        let result = [];
+        let tracks = JSON.parse('' + resp);
+        for (let i = 0; i < tracks.length; i++) {
+            result.push(tracks[i].value);
+        }
+        return result;
     }
 });
 

app/libs/file.js

@@ -29,8 +29,11 @@ function getAllTracksFileId(musicFiles) {
             }
             saveTrack(musicFiles, tracksFileId);
             deleteTrack(allTracksFiles, musicFilesFileId);
-            let msg = t('all your audio files have been added');
-            application.channel.request('notification', msg);
+            let notification = {
+                status: 'ok',
+                message: t('all your audio files have been added')
+            }
+            application.channel.request('notification', notification);
         }
     });
 }

app/libs/soundcloud.js

@@ -32,8 +32,11 @@ class Soundcloud {
                 if (!exist) {
                     this.importTrack(track);
                 } else {
-                    let msg = t('track is already in the database');
-                    application.channel.request('notification', msg);
+                    let notification = {
+                        status: 'ko',
+                        message: t('track is already in the database')
+                    }
+                    application.channel.request('notification', notification);
                 }
             }
         });
@@ -42,7 +45,11 @@ class Soundcloud {
     // Set the track's metas and save it.
     importTrack(track) {
         if (!track.streamable) {
-            alert('This track is not streamable');
+            let notification = {
+                status: 'ko',
+                message: 'This track is not streamable'
+            }
+            application.channel.request('notification', notification);
             return;
         }
         let newTrack = new Track();
@@ -57,8 +64,11 @@ class Soundcloud {
             duration: track.duration
         });
         application.allTracks.get('tracks').create(newTrack);
-        let msg = t('stream track imported');
-        application.channel.request('notification', msg);
+        let notification = {
+            status: 'ok',
+            message: t('stream track imported')
+        }
+        application.channel.request('notification', notification);
     }
 
     // Add our clientID to the current url

app/models/playlist.js

@@ -13,7 +13,9 @@ const Playlist = Backbone.Model.extend({
     },
 
     initialize(attributes, options) {
-        let tracks = attributes.tracks || new Tracks([], {});
+        let tracks = attributes.tracks || new Tracks(tracks, {
+            type: 'playlist'
+        });
         this.set('tracks', tracks);
     },
 
@@ -56,7 +58,24 @@ const Playlist = Backbone.Model.extend({
 
     // Add a track to the playlist
     addTrack(track) {
-        this.set('tracks', this.get('tracks').push(track));
+        let tracks = this.get('tracks');
+        tracks.push(track);
+        if (tracks.type == 'playlist') this.save();
+    },
+
+    // Remove a track to the playlist
+    removeTrack(track) {
+        let tracks = this.get('tracks');
+        tracks.remove(track);
+        if (tracks.type == 'playlist') this.save();
+    },
+
+    parse(attrs, options) {
+        if (attrs) {
+            let tracks = attrs.tracks;
+            attrs.tracks = new Tracks(tracks, { type: 'playlist'});
+            return attrs
+        }
     }
 });
 

app/styles/app.styl

@@ -7,6 +7,8 @@ $text-dark = #32363f
 $text-light = #788195
 $text = #92a0b2
 $red = #ef4c57
+$svg = #696d78
+$svg-red = #f14a53
 
 @import 'reset'
 global-reset()
@@ -26,6 +28,8 @@ div[role='application']
 ::-moz-focus-inner
     border: 0
 
+input
+    all: unset
 button
     all: unset
     cursor: pointer
@@ -45,6 +49,9 @@ placeholder()
     &:-ms-input-placeholder
         {block}
 
-@import 'content'
+@import 'tracks'
+@import 'header'
+@import 'track-actions'
+@import 'popup-menu'
 @import 'toolbar'
 @import 'player'