diff options
| -rw-r--r-- | src/index.js | 2 | ||||
| -rw-r--r-- | src/js/app.js | 2 | ||||
| -rw-r--r-- | src/js/player.js | 8 | ||||
| -rw-r--r-- | src/js/playlist.js | 49 | ||||
| -rw-r--r-- | src/styles/app.scss | 4 | ||||
| -rw-r--r-- | src/styles/main.scss | 6 | ||||
| -rw-r--r-- | src/styles/portrait.scss | 1 | ||||
| -rw-r--r-- | src/templates/main.template.html | 8 | ||||
| -rw-r--r-- | src/templates/playlist.template.html | 15 |
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 |