FUNCT Added playlist

9 files changed, 86 insertions, 9 deletions

diff --git a/src/index.js b/src/index.js
index db5cbe3..f1644ae 100644
--- a/src/index.js
+++ b/src/index.js
@@ -16,6 +16,7 @@
 /* JS */
 import * as app from './js/app';
 import * as player from './js/player';
+import * as playlist from './js/playlist';
 
 import { api } from 'agl-js-api';
 
@@ -23,6 +24,7 @@ import { api } from 'agl-js-api';
 import './styles/app.scss';
 
 window.player = player;
+window.playlist = playlist;
 
 api.init();
 app.init();
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
diff --git a/src/styles/app.scss b/src/styles/app.scss
index 014e722..f76d9ec 100644
--- a/src/styles/app.scss
+++ b/src/styles/app.scss
@@ -1,6 +1,5 @@
 $body-bg: transparent;
 $body-color: #FFFFFF;
-$list-group-bg: transparent;
 $font-size-base: 1.5rem;
 $input-bg: transparent;
 $input-color: #FFFFFF;
@@ -9,5 +8,4 @@ $input-color: #FFFFFF;
 @import "main.scss";
 @import "portrait.scss";
 @import "landscape.scss";
-@import "~@fortawesome/fontawesome-free/css/all.min.css";
-
+@import "~@fortawesome/fontawesome-free/css/all.min.css";
\ No newline at end of file
diff --git a/src/styles/main.scss b/src/styles/main.scss
index b0aede7..ab40398 100644
--- a/src/styles/main.scss
+++ b/src/styles/main.scss
@@ -13,6 +13,12 @@ body {
         background: rgba(0, 0, 0, 0.5);
     }
 
+    .playlistContainer {
+        margin: 15px 0;
+        overflow: scroll;
+        bottom: 200px;
+    }
+
     .log {
         display: none;
         position: absolute;
diff --git a/src/styles/portrait.scss b/src/styles/portrait.scss
index f8db5e4..11e77b1 100644
--- a/src/styles/portrait.scss
+++ b/src/styles/portrait.scss
@@ -5,6 +5,5 @@
         background-position: top center;
         background-repeat: no-repeat;
         background-color: transparent;
-        height: 992px;
     }
 }
\ No newline at end of file
diff --git a/src/templates/main.template.html b/src/templates/main.template.html
index 4f9bd70..8f553bf 100644
--- a/src/templates/main.template.html
+++ b/src/templates/main.template.html
@@ -1,10 +1,12 @@
 <div class="container-fluid">
     <div class="row">
-        <div class="col-lg-6 col-md-12 playlistContainer" id="PlaylistContainer">
+        <div class="col-12 playlistContainer fixed-top" id="PlaylistContainer">
             
         </div>
-        <div class="col-lg-6 col-md-12 playerContainer" id="PlayerContainer">
-           
+    </div>
+    <div class="row">
+        <div class="col-12 playerContainer fixed-bottom" id="PlayerContainer">
+            
         </div>
     </div>
 </div>
diff --git a/src/templates/playlist.template.html b/src/templates/playlist.template.html
new file mode 100644
index 0000000..d01f0d6
--- /dev/null
+++ b/src/templates/playlist.template.html
@@ -0,0 +1,15 @@
+<div class="list-group">
+    {{ #playlist }}
+        <a href="#" 
+            class="list-group-item list-group-item-action {{ #isPlaying }}active{{ /isPlaying }}" 
+            onclick="player.play({{index}})">
+            <h6>
+                {{ title }}
+                <small class="text-muted">{{ genre }}</small>
+            </h6>
+            <small>
+                {{ artist }}
+            </small>
+        </a>
+    {{ /playlist }}
+</div>
\ No newline at end of file