Make the repeat button interactive

Issue: tiliado/nuvolaplayer#21 Signed-off-by: Jiří Janoušek <[email protected]>
tiliado · Sep 13, 2018 · d8dee1d · d8dee1d
1 parent 05d8c9c
commit d8dee1d
Show file tree

Hide file tree

Showing 2 changed files with 72 additions and 3 deletions.
diff --git a/nuvolasdk/data/demo/demo/main.js b/nuvolasdk/data/demo/demo/main.js
@@ -7,7 +7,9 @@ Demo.Icons = {
   STAR_FULL_WHITE: 'icons/ic_star_white_48dp.png',
   STAR_OUTLINE_WHITE: 'icons/ic_star_border_white_48dp.png',
   STAR_FULL_BLACK: 'icons/ic_star_24px.svg',
-  STAR_OUTLINE_BLACK: 'icons/ic_star_border_24px.svg'
+  STAR_OUTLINE_BLACK: 'icons/ic_star_border_24px.svg',
+  REPEAT: 'icons/ic_repeat_48px.svg',
+  REPEAT_ONE: 'icons/ic_repeat_one_48px.svg',
 }
 
 Demo.AlbumCovers = {
@@ -18,6 +20,16 @@ Demo.AlbumCovers = {
   PURPLE: 'resources/album-purple.png'
 }
 
+Demo.Repeat = {
+	NONE: 0,
+	TRACK: 1,
+	PLAYLIST: 2
+}
+
+Demo.Storage = {
+  REPEAT: "repeat"
+}
+
 Demo.greenScreen = function (show) {
   document.getElementById('green-screen').style.display = show ? 'block' : 'none'
 }
@@ -82,6 +94,7 @@ Demo.Player = function () {
     track: document.getElementById('track-title'),
     artist: document.getElementById('track-artist'),
     album: document.getElementById('track-album'),
+    repeat: document.getElementById('repeat'),
     rating: document.getElementById('rating'),
     ratingChange: document.getElementById('rating-change'),
     progressbar: document.getElementById('progressbar'),
@@ -114,11 +127,14 @@ Demo.Player = function () {
   this.elm.pp.onclick = this.togglePlay.bind(this)
   this.elm.prev.onclick = this.prev.bind(this)
   this.elm.next.onclick = this.next.bind(this)
+  this.elm.repeat.onclick = this.toggleRepeat.bind(this)
   this.setStatus(0)
   this.pos = -1
   this.timer = -1
   this.timerId = 0
   this.setVisibility(false)
+  this.repeat = null
+  this.setRepeat(1 * (window.localStorage.getItem(Demo.Storage.REPEAT) || 0))
 }
 
 Demo.Songs =
@@ -283,7 +299,8 @@ Demo.Player.prototype.next = function () {
     this.setPos(this.pos + 1)
     return true
   }
-  return false
+  this.setPos(0)
+  return true
 }
 
 Demo.Player.prototype.prev = function () {
@@ -367,4 +384,31 @@ Demo.Player.prototype.changeRating = function (rating) {
   }
 }
 
+Demo.Player.prototype.setRepeat = function (repeat) {
+	window.localStorage.setItem(Demo.Storage.REPEAT, "" + repeat)
+	this.repeat = repeat
+	var elm = this.elm.repeat
+	switch (repeat) {
+		case Demo.Repeat.TRACK:
+			elm.classList.remove('btn-secondary')
+			elm.classList.add('btn-info')
+			elm.firstChild.src = Demo.Icons.REPEAT_ONE
+			break
+		case Demo.Repeat.PLAYLIST:
+			elm.classList.remove('btn-secondary')
+			elm.classList.add('btn-info')
+			elm.firstChild.src = Demo.Icons.REPEAT
+			break
+		default:
+			elm.classList.add('btn-secondary')
+			elm.classList.remove('btn-info')
+			elm.firstChild.src = Demo.Icons.REPEAT
+			break
+	}
+}
+
+Demo.Player.prototype.toggleRepeat = function () {
+	this.setRepeat(this.repeat === Demo.Repeat.PLAYLIST ? 0 : this.repeat + 1)
+}
+
 window.player = new Demo.Player()
diff --git a/nuvolasdk/data/demo/integrate.js b/nuvolasdk/data/demo/integrate.js
@@ -29,6 +29,7 @@
 
   var PlaybackState = Nuvola.PlaybackState
   var PlayerAction = Nuvola.PlayerAction
+  var PlayerRepeat = Nuvola.PlayerRepeat
   var _ = Nuvola.Translate.gettext
 
   // Define rating options - 5 states with state id 0-5 representing 0-5 stars
@@ -117,13 +118,33 @@
     player.setCanRate(state !== PlaybackState.UNKNOWN)
     player.setCanSeek(state !== PlaybackState.UNKNOWN && elms.progressbar)
     player.setCanChangeVolume(!!elms.volumebar)
+    var repeat = this._getRepeat()
+    Nuvola.actions.updateEnabledFlag(PlayerAction.REPEAT, repeat !== null)
+    Nuvola.actions.updateState(PlayerAction.REPEAT, repeat || 0)
     Nuvola.actions.updateEnabledFlag(ACTION_RATING, state !== PlaybackState.UNKNOWN)
     Nuvola.actions.updateState(ACTION_RATING, stars)
 
     // Schedule the next update
     setTimeout(this.update.bind(this), 500)
   }
 
+  WebApp._getRepeat = function () {
+	  var elm = this._getElements().repeat
+	  if (!elm) {
+		  return null
+	  }
+    if (elm.firstChild.src.endsWith('ic_repeat_one_48px.svg')) {
+      return PlayerRepeat.TRACK
+    }
+    return elm.classList.contains('btn-info') ? PlayerRepeat.PLAYLIST : PlayerRepeat.NONE
+  }
+
+  WebApp._setRepeat = function (repeat) {
+    while (this._getRepeat() !== repeat) {
+      Nuvola.clickOnElement(this._getElements().repeat)
+    }
+  }
+
   WebApp._onActionActivated = function (emitter, name, param) {
     var elms = this._getElements()
     switch (name) {
@@ -147,6 +168,9 @@
       case PlayerAction.NEXT_SONG:
         Nuvola.clickOnElement(elms.next)
         break
+      case PlayerAction.REPEAT:
+        this._setRepeat(param)
+        break
       case ACTION_RATING:
         this._setRating(param)
         break
@@ -210,7 +234,8 @@
       repeat: document.getElementById('repeat'),
       shuffle: document.getElementById('shuffle'),
       progressbar: document.getElementById('progressbar'),
-      volumebar: document.getElementById('volume-bar')
+      volumebar: document.getElementById('volume-bar'),
+      repeat: document.getElementById('repeat')
     }
     for (var key in elms) {
       if (elms[key] && elms[key].disabled) {