3 files changed, 57 insertions, 2 deletions

diff --git a/src/js/app.js b/src/js/app.js
index 99597b1..2e53754 100644
--- a/src/js/app.js
+++ b/src/js/app.js
@@ -1,5 +1,6 @@
 import { load as load_template } from './templates';
 import * as player from './player';
+import * as playlist from './playlist';
 import Mustache from 'mustache';
 
 import { mediaplayer } from 'agl-js-api';
@@ -12,6 +13,7 @@ var page = {
 export function show() {
     document.body.innerHTML = Mustache.render(template, page);
     player.init(document.getElementById('PlayerContainer'));
+    playlist.init(document.getElementById('PlaylistContainer'));
 }
 
 export function init() {
diff --git a/src/js/player.js b/src/js/player.js
index 1ccdb1d..b31c2c6 100644
--- a/src/js/player.js
+++ b/src/js/player.js
@@ -64,8 +64,12 @@ export function init(node) {
     });
 }
 
-export function play() {
-    mediaplayer.play();
+export function play(trackIndex) {
+    if( trackIndex ) {
+        mediaplayer.pickTrack(trackIndex);
+    } else {
+        mediaplayer.play();
+    }
 }
 
 export function pause() {
diff --git a/src/js/playlist.js b/src/js/playlist.js
new file mode 100644
index 0000000..4739efc
--- /dev/null
+++ b/src/js/playlist.js
@@ -0,0 +1,49 @@
+import { load as load_template } from './templates';
+import Mustache from 'mustache';
+
+import { mediaplayer } from 'agl-js-api';
+
+var template;
+var root;
+var currentTrackIndex;
+var page = {
+    playlist: {},
+    isPlaying: function() {
+        return this.selected;
+    }
+};
+
+function load() {
+    mediaplayer.playlist().then(function(playlist){
+        page.playlist = playlist.list;
+        show();
+    });
+}
+
+export function show() {
+    root.innerHTML = Mustache.render(template, page);
+}
+
+
+export function init(node) {
+
+    mediaplayer.on_playlist_changes(function(playlist){
+        page.playlist = playlist.list;
+        show();
+    });
+
+    mediaplayer.on_metadata_changes(function(metadata){
+        if( metadata && metadata.track && metadata.track.index !== currentTrackIndex ) {
+            currentTrackIndex = metadata.track.index;
+            load();
+        } 
+    });
+    load_template('playlist.template.html').then(function(result) {
+        template = result;
+        root = node;
+        Mustache.parse(template);
+        show();
+    }, function(error) {
+        console.error('ERRROR loading main template', error);
+    });
+}
\ No newline at end of file