more remote control

dashboard-ui/css/remotecontrol.css

@@ -20,13 +20,13 @@
     }
 
     .tblRemoteControl td {
-        padding: 2px 5px;
+        padding: 5px;
         border-top: 1px solid #ccc;
         text-align: left;
     }
 
     .tblRemoteControl th {
-        padding: 2px 5px;
+        padding: 3px 5px;
         text-align: left;
     }
 

dashboard-ui/scripts/remotecontrol.js

@@ -1,6 +1,33 @@
 (function (window, document, $) {
 
-    function showMenu(options, sessionsPromise, usersPromise) {
+    function sendPlayFolderCommand(item, sessionId, popup) {
+
+        ApiClient.getItems(Dashboard.getCurrentUserId(), {
+
+            ParentId: item.Id,
+            Filters: "IsNotFolder",
+            SortBy: "SortName",
+            Recursive: true,
+            Limit: 100
+
+        }).done(function (result) {
+
+            ApiClient.sendPlayCommand(sessionId, {
+
+                ItemIds: result.Items.map(function (i) {
+                    return i.Id;
+                }).join(','),
+
+                PlayCommand: $('#fldPlayCommand', popup).val()
+            });
+
+            popup.popup("close");
+
+        });
+
+    }
+
+    function showMenu(options, sessionsPromise) {
 
         var playFromRendered;
         var trailersRendered;
@@ -26,10 +53,10 @@
 
         html += '</div>';
 
-        html += '<p style="text-align:center;margin:.5em 0 0;">';
+        html += '<p style="text-align:center;margin:.75em 0 0;">';
 
         html += '<span id="playButtonContainer" onclick="$(\'#fldPlayCommand\').val(\'PlayNow\');" style="display:none;"><button type="submit" data-icon="play" data-theme="b" data-mini="true" data-inline="true">Play</button></span>';
-        
+
         html += '<span id="queueButtonContainer" onclick="$(\'#fldPlayCommand\').val(\'PlayLast\');" style="display:none;"><button type="submit" data-icon="play" data-theme="b" data-mini="true" data-inline="true">Queue</button></span>';
 
         html += '<span id="okButtonContainer"><button type="submit" data-icon="ok" data-theme="b" data-mini="true" data-inline="true">Ok</button></span>';
@@ -46,6 +73,12 @@
 
         var popup = $('#remoteControlFlyout').popup({ history: false, tolerance: 0, corners: false }).trigger('create').popup("open").on("popupafterclose", function () {
 
+            if (ApiClient.isWebSocketOpen()) {
+                ApiClient.sendWebSocketMessage("SessionsStop");
+            }
+
+            $(ApiClient).off("websocketmessage.remotecontrol");
+
             $(this).off("popupafterclose").remove();
         });
 
@@ -102,7 +135,23 @@
 
                 });
             }
-            else if (command == "Play" || command == "PlayFromChapter") {
+            else if (command == "Play") {
+
+                if (item.IsFolder) {
+
+                    sendPlayFolderCommand(item, sessionIds[0], popup);
+
+                    return false;
+                }
+
+                promise = ApiClient.sendPlayCommand(sessionIds[0], {
+
+                    ItemIds: [item.Id].join(','),
+                    PlayCommand: $('#fldPlayCommand', popup).val()
+
+                });
+            }
+            else if (command == "PlayFromChapter") {
 
                 var checkedChapter = $('.chkSelectPlayTime:checked', popup);
 
@@ -143,7 +192,7 @@
 
             promise.done(function () {
 
-                $('#remoteControlFlyout').popup("close");
+                popup.popup("close");
             });
 
             return false;
@@ -151,15 +200,27 @@
 
         var elem = $('.sessionsPopupContent');
 
-        $.when(sessionsPromise, usersPromise).done(function (response1, response2) {
+        sessionsPromise.done(function (sessions) {
 
             var deviceId = ApiClient.deviceId();
 
-            var sessions = response1[0].filter(function (s) {
+            sessions = sessions.filter(function (s) {
                 return s.DeviceId != deviceId;
             });
 
-            renderSessions(sessions, response2[0], options, elem);
+            renderSessions(sessions, options, elem);
+
+            if (ApiClient.isWebSocketOpen()) {
+                ApiClient.sendWebSocketMessage("SessionsStart", "1500,1500");
+
+                $(ApiClient).on("websocketmessage.remotecontrol", function (e, msg) {
+
+                    if (msg.MessageType === "Sessions") {
+                        refreshSessions(msg.Data, elem);
+                    }
+                });
+
+            }
 
             $('#selectCommand', popup).on('change', function () {
 
@@ -197,7 +258,7 @@
                         renderPlayFromOptions(playFromMenu, item);
                     }
 
-                    $('#remoteControlFlyout').popup("reposition", { tolerance: 0 });
+                    popup.popup("reposition", { tolerance: 0 });
                 }
                 else if (value == "Trailer") {
 
@@ -212,7 +273,7 @@
 
                             renderVideos(trailersElem, trailers, 'Trailers');
 
-                            $('#remoteControlFlyout').popup("reposition", { tolerance: 0 });
+                            popup.popup("reposition", { tolerance: 0 });
                         });
                     }
                 }
@@ -229,7 +290,7 @@
 
                             renderVideos(specialFeaturesElem, videos, 'Special Features');
 
-                            $('#remoteControlFlyout').popup("reposition", { tolerance: 0 });
+                            popup.popup("reposition", { tolerance: 0 });
                         });
                     }
                 }
@@ -263,7 +324,7 @@
 
                             renderVideos(themeVideosElem, result.Items, 'Theme Videos');
 
-                            $('#remoteControlFlyout').popup("reposition", { tolerance: 0 });
+                            popup.popup("reposition", { tolerance: 0 });
                         });
                     }
                 }
@@ -331,7 +392,7 @@
         $('.chkSelectPlayTime:first', elem).checked(true);
     }
 
-    function renderSessions(sessions, users, options, elem) {
+    function renderSessions(sessions, options, elem) {
 
         if (!sessions.length) {
             elem.html('<p>There are currently no available media browser sessions to control.</p>');
@@ -350,7 +411,11 @@
 
         if (item.Type != 'Person' && item.Type != 'Genre' && item.Type != 'Studio' && item.Type != 'Artist') {
 
-            html += '<option value="Play">Play</label>';
+            if (item.IsFolder) {
+                html += '<option value="Play">Play All</label>';
+            } else {
+                html += '<option value="Play">Play</label>';
+            }
 
             if (!item.IsFolder && item.UserData && item.UserData.PlaybackPositionTicks) {
                 html += '<option value="Resume">Resume</label>';
@@ -396,6 +461,7 @@
         html += '<th>Device</th>';
         html += '<th>User</th>';
         html += '<th class="nowPlayingCell">Now Playing</th>';
+        html += '<th class="nowPlayingCell">Time</th>';
         html += '</tr></thead>';
 
         html += '<tbody>';
@@ -410,26 +476,30 @@
             html += '<td>' + session.Client + '</td>';
             html += '<td>' + session.DeviceName + '</td>';
 
-            html += '<td>';
+            html += '<td class="tdUserName">';
 
-            var user = null;
+            html += session.UserName || '';
 
-            if (session.UserId) {
+            html += '</td>';
 
-                user = users.filter(function (u) {
+            if (session.NowPlayingItem) {
-                    return u.Id == session.UserId;
-                })[0];
 
+                html += '<td class="nowPlayingCell tdNowPlayingName">';
+                html += session.NowPlayingItem ? session.NowPlayingItem.Name : '';
+                html += '</td>';
+
+                html += '<td class="nowPlayingCell tdNowPlayingTime">';
+
+                html += getSessionNowPlayingTime(session);
+
+                html += '</td>';
+
+            } else {
+
+                html += '<td class="nowPlayingCell"></td>';
+                html += '<td class="nowPlayingCell"></td>';
             }
 
-            html += user ? user.Name : '&nbsp;';
-
-            html += '</td>';
-
-            html += '<td class="nowPlayingCell">';
-            html += session.NowPlayingItem ? session.NowPlayingItem.Name : '';
-            html += '</td>';
-
             html += '</tr>';
         }
 
@@ -448,6 +518,40 @@
         $('#remoteControlFlyout').popup("reposition", { tolerance: 0 });
     }
 
+    function getSessionNowPlayingTime(session) {
+
+        var html = '';
+
+        if (session.NowPlayingItem) {
+
+            html += DashboardPage.getDisplayText(session.NowPlayingPositionTicks || 0);
+
+            if (session.NowPlayingItem.RunTimeTicks) {
+
+                html += " / ";
+                html += DashboardPage.getDisplayText(session.NowPlayingItem.RunTimeTicks);
+            }
+        }
+
+        return html;
+    }
+
+    function refreshSessions(sessions, elem) {
+
+        for (var i = 0, length = sessions.length; i < length; i++) {
+
+            var session = sessions[i];
+
+            var sessionElem = $('.trSession[data-sessionid=' + session.Id + ']', elem);
+
+            $('.tdUserName', sessionElem).html(session.UserName || '');
+            $('.tdNowPlayingTime', sessionElem).html(getSessionNowPlayingTime(session));
+            $('.tdNowPlayingName', sessionElem).html(session.NowPlayingItem ? session.NowPlayingItem.Name : '');
+
+        }
+
+    }
+
     function renderVideos(elem, videos, header) {
 
         var html = '';
@@ -513,7 +617,7 @@
         var self = this;
 
         self.showMenu = function (options) {
-            showMenu(options, ApiClient.getSessions({ SupportsRemoteControl: true }), ApiClient.getUsers());
+            showMenu(options, ApiClient.getSessions({ SupportsRemoteControl: true }));
         };
     }