support sending out playstate commands

ApiClient.js

@@ -3271,6 +3271,24 @@ MediaBrowser.ApiClient = function ($, navigator, JSON, WebSocket, setTimeout) {
                 url: url
             });
         };
+
+        self.sendPlayStateCommand = function (sessionId, command, options) {
+
+            if (!sessionId) {
+                throw new Error("null sessionId");
+            }
+
+            if (!command) {
+                throw new Error("null command");
+            }
+
+            var url = self.getUrl("Sessions/" + sessionId + "/Playing/" + command, options || {});
+
+            return self.ajax({
+                type: "POST",
+                url: url
+            });
+        };
     }
 
 }(jQuery, navigator, window.JSON, window.WebSocket, setTimeout);

dashboard-ui/scripts/remotecontrol.js

@@ -682,6 +682,63 @@
             });
 
         }
+
+        $('.btnStop', popup).on('click', function () {
+
+            var id = $('#selectSession', popup).val();
+
+            ApiClient.sendPlayStateCommand(id, 'Stop');
+        });
+
+        $('.btnPause', popup).on('click', function () {
+
+            var id = $('#selectSession', popup).val();
+
+            ApiClient.sendPlayStateCommand(id, 'Pause');
+        });
+
+        $('.btnPlay', popup).on('click', function () {
+
+            var id = $('#selectSession', popup).val();
+
+            ApiClient.sendPlayStateCommand(id, 'Unpause');
+        });
+
+        $('.btnNextTrack', popup).on('click', function () {
+
+            var id = $('#selectSession', popup).val();
+
+            ApiClient.sendPlayStateCommand(id, 'NextTrack');
+        });
+
+        $('.btnPreviousTrack', popup).on('click', function () {
+
+            var id = $('#selectSession', popup).val();
+
+            ApiClient.sendPlayStateCommand(id, 'PreviousTrack');
+        });
+
+        $("#positionSlider", popup).on("slidestart", function () {
+
+            this.isSliding = true;
+
+        }).on("slidestop", function () {
+
+            var id = $('#selectSession', popup).val();
+
+            var percent = $(this).val();
+
+            var duration = parseInt($(this).attr('data-duration'));
+
+            var position = duration * percent / 100;
+
+            ApiClient.sendPlayStateCommand(id, 'Seek',
+                {
+                    SeekPosition: parseInt(position)
+                });
+
+            this.isSliding = false;
+        });
     }
 
     function getPlaybackHtml() {
@@ -700,7 +757,7 @@
         html += '<span class="duration"></span>';
         html += '</div>';
 
-        html += '<input type="range" name="positionSlider" id="positionSlider" min="0" max="100" value="50" style="display:none;" />';
+        html += '<input type="range" name="positionSlider" id="positionSlider" min="0" max="100" value="50" step=".1" style="display:none;" />';
         html += '</div>';
 
         html += '<div style="text-align:center; margin: 0 0 2em;">';
@@ -771,7 +828,13 @@
 
         var percent = duration ? 100 * time / duration : 0;
 
-        $('#positionSlider', elem).val(percent).slider('refresh');
+        var slider = $('#positionSlider', elem);
+        
+        if (!slider[0].isSliding) {
+            slider.val(percent).slider('refresh');
+        }
+
+        slider.attr('data-duration', duration);
 
         $('.nowPlayingTime', elem).html(Dashboard.getDisplayTime(time));
         $('.duration', elem).html(Dashboard.getDisplayTime(duration));

packages.config

@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <packages>
-  <package id="MediaBrowser.ApiClient.Javascript" version="3.0.142" targetFramework="net45" />
+  <package id="MediaBrowser.ApiClient.Javascript" version="3.0.143" targetFramework="net45" />
   <package id="ServiceStack.Common" version="3.9.54" targetFramework="net45" />
   <package id="ServiceStack.Text" version="3.9.54" targetFramework="net45" />
 </packages>