[gnome-music/gril-pls: 2/2] playlist design

[Eslam Mostafa <cseslam src gnome org>]

commit 16c8e16ab1a9a257dfb36ecdad5693c0603bc651
Author: Eslam Mostafa <me eslammostafa com>
Date:   Sun Jun 16 18:04:41 2013 +0200

    playlist design

 data/PlayListControls.ui       |   48 --------------------
 data/application.css           |   13 +++++
 data/gnome-music.gresource.xml |    2 +
 src/view.js                    |   88 +++++++++++++++++++++++++++++++++++-
 src/widgets.js                 |   97 ++++++++++++++++++++++++++++++++++++++-
 src/window.js                  |   13 +++--
 6 files changed, 204 insertions(+), 57 deletions(-)
---
diff --git a/data/application.css b/data/application.css
index 0642bcd..352eb1a 100644
--- a/data/application.css
+++ b/data/application.css
@@ -25,6 +25,19 @@
     background-color: #77757A;
 }
 
+.playlist-controls-white{
+    background-color: #d7dad7;
+}
+.playlist-controls-white:selected{
+    background-color: #888A85;
+}
+.playlist-controls-dark{
+    background-color: #282528;
+}
+.playlist-controls-dark:selected{
+    background-color: #77757A;
+}
+
 .songs-list {
     box-shadow: inset 0 -1px shade(@borders, 1.30);
     background-color: @theme_bg_color;
diff --git a/data/gnome-music.gresource.xml b/data/gnome-music.gresource.xml
index 6e6b91f..cd4259f 100644
--- a/data/gnome-music.gresource.xml
+++ b/data/gnome-music.gresource.xml
@@ -9,5 +9,7 @@
     <file preprocess="xml-stripblanks">PlayerToolbar.ui</file>
     <file preprocess="xml-stripblanks">TrackWidget.ui</file>
     <file preprocess="xml-stripblanks">NoMusic.ui</file>
+    <file preprocess="xml-stripblanks">PlaylistControls.ui</file>
+    <file preprocess="xml-stripblanks">PlaylistSongs.ui</file>
   </gresource>
 </gresources>
diff --git a/src/view.js b/src/view.js
index fad596b..e9fd2cf 100644
--- a/src/view.js
+++ b/src/view.js
@@ -496,7 +496,93 @@ const Playlists = new Lang.Class({
 
     _init: function(header_bar, player) {
         this.parent("Playlists", header_bar);
-        this._playlist= {};
+        this._playlists = {};
+        //this.countQuery = Query.playlist_count;
+/*        this._playlistSongsWidget = new Gtk.Frame({
+            shadow_type: Gtk.ShadowType.NONE
+        });
+        this.playlistSongs = new Widgets.PlaylistSongs(playlist, this.player);
+        this._playlistSongsWidget.add(this.playlistSongs);
+*/
+        this.view.set_view_type(Gd.MainViewType.LIST);
+        this.view.set_hexpand(false);
+//        this._playlistSongsWidget.set_hexpand(true);
+        let builder = new Gtk.Builder();
+        builder.add_from_resource('/org/gnome/music/PlaylistSongs.ui');
+        this._playlistSongsWidget = builder.get_object('container');
+        this._songsListWidget = new Widgets.SongsList();
+        this._playlistSongsWidget.pack_end(this._songsListWidget, true, true, 0);
+        this.view.get_style_context().add_class("artist-panel");
+        this.view.get_generic_view().get_selection().set_mode(Gtk.SelectionMode.SINGLE);
+        builder.add_from_resource('/org/gnome/music/PlaylistControls.ui');
+        let controls = builder.get_object('playlistControls');
+        this._grid.attach(new Gtk.Separator(), 0, 1, 1, 1);
+        this._grid.attach(controls, 0, 2, 1, 1);
+        this._grid.attach(new Gtk.Separator({orientation: Gtk.Orientation.VERTICAL}), 1, 0, 1, 3);
+        this._grid.attach(this._playlistSongsWidget, 2, 0, 2, 2);
+        this._addListRenderers();
+        if(Gtk.Settings.get_default().gtk_application_prefer_dark_theme) {
+            this.view.get_generic_view().get_style_context().add_class("artist-panel-dark");
+            controls.get_style_context().add_class("playlist-controls-dark");
+        } else {
+            this.view.get_generic_view().get_style_context().add_class("artist-panel-white");
+            controls.get_style_context().add_class("playlist-controls-white");
+        }
+        this.show_all();
+    },
+
+    _addListRenderers: function() {
+        let listWidget = this.view.get_generic_view();
+
+        var cols = listWidget.get_columns()
+        var cells = cols[0].get_cells()
+        cells[2].visible = false
+
+        let typeRenderer =
+            new Gd.StyledTextRenderer({ xpad: 0 });
+        typeRenderer.ellipsize = 3;
+        typeRenderer.xalign = 0.0;
+        typeRenderer.yalign = 0.5;
+        typeRenderer.height = 48;
+        typeRenderer.width = 220;
+        listWidget.add_renderer(typeRenderer, Lang.bind(this,
+            function(col, cell, model, iter) {
+                typeRenderer.text = model.get_value(iter, 0);
+            }));
+    },
+
+    _onItemActivated: function (widget, id, path) {
+        let iter = this._model.get_iter (path)[1];
+        let playlist = this._model.get_value (iter, 0);
+        let url = this._playlists[playlist.toLowerCase()]['url'];
+        this._songsListWidget.update(url);
+    },
+
+    _addItem: function (source, param, item) {
+        this._offset += 1;
+        if (item == null)
+            return
+        var playlist = "Unknown"
+        if (item.get_title() != null)
+            playlist = item.get_title();
+        if (item.get_string(Grl.METADATA_KEY_TITLE) != null)
+            playlist = item.get_string(Grl.METADATA_KEY_TITLE)
+        var url = item.get_string(Grl.METADATA_KEY_URL)
+        if (this._playlists[playlist.toLowerCase()] == undefined) {
+            var iter = this._model.append();
+            this._playlists[playlist.toLowerCase()] = {"iter": iter, "url": url}
+            this._model.set(
+                iter,
+                [0, 1, 2, 3],
+                [playlist, playlist, playlist, playlist]
+            );
+        }
+    },
+
+    populate: function () {
+        if(grilo.tracker != null) {
+            grilo.populatePlaylists(this._offset, Lang.bind(this, this._addItem, null));
+        }
     },
 });
 
diff --git a/src/widgets.js b/src/widgets.js
index 5c3b2ba..f6d2475 100644
--- a/src/widgets.js
+++ b/src/widgets.js
@@ -322,14 +322,105 @@ const AlbumWidget = new Lang.Class({
 });
 Signals.addSignalMethods(AlbumWidget.prototype);
 
+const SongsList = new Lang.Class({
+    Name: "SongsList",
+    Extends: Gd.MainView,
+
+    _init: function(){
+        this.parent();
+        this.playlist = null;
+        this._model = Gtk.ListStore.new([
+            GObject.TYPE_STRING,
+            GObject.TYPE_STRING,
+            GObject.TYPE_STRING,
+            GObject.TYPE_STRING,
+            GdkPixbuf.Pixbuf,
+            GObject.TYPE_OBJECT,
+            GObject.TYPE_BOOLEAN,
+            GObject.TYPE_STRING,
+            GObject.TYPE_BOOLEAN,
+            GObject.TYPE_BOOLEAN
+        ]);
+        this.set_view_type(Gd.MainViewType.ICON);
+        this.set_model(this._model);
+        this.show_all();
+    },
+
+    update: function(playlistUrl) {
+        log(playlistUrl);
+        this.playlist = playlistUrl;
+        this._populate();
+        this.show_all();
+    },
+
+    _addItem: function(source, param, item) {
+        this._offset += 1;
+        log("addItem Song: "+item);
+        if (item == null)
+            return;
+        log("Song: "+item);
+        var iter = this._model.append();
+        var song = "Unknown"
+        if (item.get_string(Grl.METADATA_KEY_ARTIST) != null)
+            song = item.get_string(Grl.METADATA_KEY_ARTIST)
+        if ((item.get_title() == null) && (item.get_url() != null)) {
+            song.set_title (extractFileName(item.get_url()));
+        }
+        this._model.set(iter, [0, 1, 2, 3], [song, song, song, song]);
+    },
+
+    _populate: function() {
+        if(grilo.filesystem != null) {
+            log('populate');
+            grilo.getPlaylistSongs(this.playlist, Lang.bind(this, this._addItem, null));
+        }
+    }
+
+});
+
+/*const PlaylistSongs = new Lang.Class({
+    Name: "PlaylistSongs",
+    Extends: Gtk.VBox,
+
+    _init: function (playlist, player) {
+        this.player = player;
+        this.playlist = playlist;
+        this.parent();
+        this.ui = new Gtk.Builder();
+        this.ui.add_from_resource('/org/gnome/music/ArtistAlbumsWidget.ui');
+        this.set_border_width(0);
+        this.ui.get_object("artist").set_label(this.playlist);
+        this.widgets = [];
+        this._vbox = new Gtk.VBox();
+        this._songsBox = new SongsList(this.playlist);
+        this._scrolledWindow = new Gtk.ScrolledWindow();
+        this._scrolledWindow.set_policy(
+            Gtk.PolicyType.NEVER,
+            Gtk.PolicyType.AUTOMATIC
+        );
+        this._scrolledWindow.add(this._vbox);
+        this._vbox.pack_start(this.ui.get_object("ArtistAlbumsWidget"), false, false, 0);
+        this._vbox.pack_start(this._songsBox, false, false, 16);
+        this.pack_start(this._scrolledWindow, true, true, 0);
+
+        this.show_all();
+    },
+
+    update: function(playlist) {
+        this._songsBox = null;
+        this._songsBox = new SongsList(playlist);
+    },
+
+});*/
+
 const ArtistAlbums = new Lang.Class({
     Name: "ArtistAlbumsWidget",
     Extends: Gtk.VBox,
 
     _init: function (artist, albums, player) {
-        this.player = player
-        this.artist = artist
-        this.albums = albums
+        this.player = player;
+        this.artist = artist;
+        this.albums = albums;
         this.parent();
         this.ui = new Gtk.Builder();
         this.ui.add_from_resource('/org/gnome/music/ArtistAlbumsWidget.ui');
diff --git a/src/window.js b/src/window.js
index 1d7f25e..295317b 100644
--- a/src/window.js
+++ b/src/window.js
@@ -92,7 +92,7 @@ const MainWindow = new Lang.Class({
         this.connect("destroy",Lang.bind(this, function(){
             this._stack.disconnect(this._onNotifyModelId);
         }));
-  
+
         this.views[0].populate();
         }
         //To revert to the No Music View when no songs are found
@@ -108,11 +108,14 @@ const MainWindow = new Lang.Class({
     },
 
     _onNotifyMode: function(stack, param) {
-        // Slide out artist list on switching to artists view
+        // Slide out artist list on switching to artists view;
         if(stack.get_visible_child().title == "Artists"){
-            stack.get_visible_child().stack.set_visible_child_name("dummy")
-            stack.get_visible_child().stack.set_visible_child_name("artists")
-        }
+            stack.get_visible_child().stack.set_visible_child_name("dummy");
+            stack.get_visible_child().stack.set_visible_child_name("artists");
+        }/* else if(stack.get_visible_child.title == "Playlists"){
+            stack.get_visible_child().stack.set_visible_child_name("dummy");
+            stack.get_visible_child().stack.set_visible_child_name("playlists");
+        }*/
     },
 
     _toggleView: function(btn, i) {