FUNCT Add loop support to player

2 files changed, 18 insertions, 1 deletions

diff --git a/src/js/player.js b/src/js/player.js
index b31c2c6..5efdc2c 100644
--- a/src/js/player.js
+++ b/src/js/player.js
@@ -7,6 +7,7 @@ var template;
 var root;
 var page = {
     metadata: {},
+    isLooping: false,
     getPosition: function() {
         if ( this.metadata && this.metadata.position ) {
             return formatTime(this.metadata.position);
@@ -64,6 +65,20 @@ export function init(node) {
     });
 }
 
+export function loop() {
+    if( !page.isLooping ) {
+        mediaplayer.loop('track').then(function() {
+            page.isLooping = true;
+            show();
+        });
+    } else {
+        mediaplayer.loop('playlist').then(function() {
+            page.isLooping = false;
+            show();
+        });
+    }
+}
+
 export function play(trackIndex) {
     if( trackIndex ) {
         mediaplayer.pickTrack(trackIndex);
diff --git a/src/templates/player.template.html b/src/templates/player.template.html
index 5b5a7ab..ebf98cc 100644
--- a/src/templates/player.template.html
+++ b/src/templates/player.template.html
@@ -1,7 +1,9 @@
 <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">
+            <button type="button" 
+                class="btn {{ ^isLooping }}btn-outline-secondary{{ /isLooping }} {{ #isLooping }}btn-danger{{ /isLooping }}" 
+                onclick="player.loop();">
                 <i class="fas fa-retweet"></i>
             </button>
         </div>