summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
-rw-r--r--src/index.js3
-rw-r--r--src/js/app.js4
-rw-r--r--src/js/player.js81
-rw-r--r--src/styles/main.scss4
-rw-r--r--src/templates/main.template.html11
-rw-r--r--src/templates/player.template.html53
6 files changed, 154 insertions, 2 deletions
diff --git a/src/index.js b/src/index.js
index 484dffa..db5cbe3 100644
--- a/src/index.js
+++ b/src/index.js
@@ -15,11 +15,14 @@
*/
/* JS */
import * as app from './js/app';
+import * as player from './js/player';
import { api } from 'agl-js-api';
/* CSS */
import './styles/app.scss';
+window.player = player;
+
api.init();
app.init();
diff --git a/src/js/app.js b/src/js/app.js
index a0ec650..99597b1 100644
--- a/src/js/app.js
+++ b/src/js/app.js
@@ -1,7 +1,8 @@
import { load as load_template } from './templates';
+import * as player from './player';
import Mustache from 'mustache';
-import { lowcan } from 'agl-js-api';
+import { mediaplayer } from 'agl-js-api';
var template;
var page = {
@@ -10,6 +11,7 @@ var page = {
export function show() {
document.body.innerHTML = Mustache.render(template, page);
+ player.init(document.getElementById('PlayerContainer'));
}
export function init() {
diff --git a/src/js/player.js b/src/js/player.js
new file mode 100644
index 0000000..1ccdb1d
--- /dev/null
+++ b/src/js/player.js
@@ -0,0 +1,81 @@
+import { load as load_template } from './templates';
+import Mustache from 'mustache';
+
+import { mediaplayer } from 'agl-js-api';
+
+var template;
+var root;
+var page = {
+ metadata: {},
+ getPosition: function() {
+ if ( this.metadata && this.metadata.position ) {
+ return formatTime(this.metadata.position);
+ } else {
+ return '--:--';
+ }
+ },
+ getDuration: function(){
+ if ( this.metadata && this.metadata.track && this.metadata.track.duration ) {
+ return formatTime(this.metadata.track.duration);
+ } else {
+ return '--:--';
+ }
+ },
+ getPercentage: function() {
+ if ( this.metadata && this.metadata.position && this.metadata.track && this.metadata.track.duration) {
+ return Math.floor((this.metadata.position/this.metadata.track.duration)*100);
+ }
+ },
+ isPlaying: function() {
+ return this.metadata && this.metadata.status === 'playing';
+ }
+};
+
+function twoDigit(number) {
+ if( number < 10 ) {
+ return '0'+number;
+ } else {
+ return number;
+ }
+}
+
+function formatTime(time) {
+ return twoDigit(Math.floor(time/60000))+':'+twoDigit(Math.floor((time/1000)%60));
+}
+
+export function show() {
+ root.innerHTML = Mustache.render(template, page);
+}
+
+export function init(node) {
+
+ mediaplayer.on_metadata_changes(function(metadata){
+ console.log(metadata);
+ page.metadata = metadata;
+ show();
+ });
+ load_template('player.template.html').then(function(result) {
+ template = result;
+ root = node;
+ Mustache.parse(template);
+ show();
+ }, function(error) {
+ console.error('ERRROR loading main template', error);
+ });
+}
+
+export function play() {
+ mediaplayer.play();
+}
+
+export function pause() {
+ mediaplayer.pause();
+}
+
+export function previous() {
+ mediaplayer.previous();
+}
+
+export function next() {
+ mediaplayer.next();
+} \ No newline at end of file
diff --git a/src/styles/main.scss b/src/styles/main.scss
index e1d6ceb..b0aede7 100644
--- a/src/styles/main.scss
+++ b/src/styles/main.scss
@@ -9,6 +9,10 @@ html {
}
body {
+ .playerContainer {
+ background: rgba(0, 0, 0, 0.5);
+ }
+
.log {
display: none;
position: absolute;
diff --git a/src/templates/main.template.html b/src/templates/main.template.html
index 0f3081c..4f9bd70 100644
--- a/src/templates/main.template.html
+++ b/src/templates/main.template.html
@@ -1 +1,10 @@
-This is the mediaplayer \ No newline at end of file
+<div class="container-fluid">
+ <div class="row">
+ <div class="col-lg-6 col-md-12 playlistContainer" id="PlaylistContainer">
+
+ </div>
+ <div class="col-lg-6 col-md-12 playerContainer" id="PlayerContainer">
+
+ </div>
+ </div>
+</div>
diff --git a/src/templates/player.template.html b/src/templates/player.template.html
new file mode 100644
index 0000000..5b5a7ab
--- /dev/null
+++ b/src/templates/player.template.html
@@ -0,0 +1,53 @@
+<div class="container-fluid">
+ <div class="row align-items-center mt-3">
+ <div class="col-2 text-left">
+ <button type="button" class="btn btn-light">
+ <i class="fas fa-retweet"></i>
+ </button>
+ </div>
+ <div class="col-8 text-center">
+ {{ metadata.track.title }}
+ </div>
+ <div class="col-2">
+
+ </div>
+ </div>
+ <div class="row">
+ <div class="col-2 text-left">
+ {{ getPosition }}
+ </div>
+ <div class="col-8 text-center">
+ {{ metadata.track.artist }}
+ </div>
+ <div class="col-2 text-right">
+ {{ getDuration }}
+ </div>
+ </div>
+ <div class="row">
+ <div class="col-12">
+ <div class="progress">
+ <div class="progress-bar" role="progressbar" style="width: {{getPercentage}}%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
+ </div>
+ </div>
+ </div>
+ <div class="row my-3">
+ <div class="col-12 text-center">
+ <button type="button" class="btn btn-primary" onclick="player.previous()">
+ <i class="fas fa-arrow-left"></i>
+ </button>
+ {{ #isPlaying }}
+ <button type="button" class="btn btn-primary" onclick="player.pause()">
+ <i class="fas fa-pause"></i>
+ </button>
+ {{ /isPlaying }}
+ {{ ^isPlaying }}
+ <button type="button" class="btn btn-primary" onclick="player.play()">
+ <i class="fas fa-play"></i>
+ </button>
+ {{ /isPlaying }}
+ <button type="button" class="btn btn-primary" onclick="player.next()">
+ <i class="fas fa-arrow-right"></i>
+ </button>
+ </div>
+ </div>
+</div> \ No newline at end of file