FUNCT Added player

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