diff options
| -rw-r--r-- | src/index.js | 3 | ||||
| -rw-r--r-- | src/js/app.js | 4 | ||||
| -rw-r--r-- | src/js/player.js | 81 | ||||
| -rw-r--r-- | src/styles/main.scss | 4 | ||||
| -rw-r--r-- | src/templates/main.template.html | 11 | ||||
| -rw-r--r-- | src/templates/player.template.html | 53 |
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 |