From 997339efe2a907f10ed665eadf400a49794c6872 Mon Sep 17 00:00:00 2001 From: Humberto Alfonso Díaz Date: Tue, 10 Dec 2019 08:19:07 +0100 Subject: FUNCT Added playlist --- src/index.js | 2 ++ src/js/app.js | 2 ++ src/js/player.js | 8 ++++-- src/js/playlist.js | 49 ++++++++++++++++++++++++++++++++++++ src/styles/app.scss | 4 +-- src/styles/main.scss | 6 +++++ src/styles/portrait.scss | 1 - src/templates/main.template.html | 8 +++--- src/templates/playlist.template.html | 15 +++++++++++ 9 files changed, 86 insertions(+), 9 deletions(-) create mode 100644 src/js/playlist.js create mode 100644 src/templates/playlist.template.html (limited to 'src') 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 @@
-
+
-
- +
+
+
+
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 @@ +
+ {{ #playlist }} + +
+ {{ title }} + {{ genre }} +
+ + {{ artist }} + + + {{ /playlist }} +
\ No newline at end of file -- cgit 1.2.3-korg