From c018f44379e400d7935b61e3d592ed04f03b78ef Mon Sep 17 00:00:00 2001
From: Luke Pulverenti <luke.pulverenti@gmail.com>
Date: Thu, 11 Jul 2013 16:25:12 -0400
Subject: [PATCH] added remote control menu

---
 dashboard-ui/css/images/remote.png           | Bin 0 -> 1732 bytes
 dashboard-ui/css/librarybrowser.css          |   2 +-
 dashboard-ui/css/remotecontrol.css           |   4 +
 dashboard-ui/scripts/Itemdetailpage.js       |   2 +-
 dashboard-ui/scripts/itembynamedetailpage.js |   2 +-
 dashboard-ui/scripts/librarybrowser.js       |   2 +
 dashboard-ui/scripts/mediaplayer.js          |   6 +-
 dashboard-ui/scripts/moviegenres.js          |   2 +-
 dashboard-ui/scripts/moviepeople.js          |   2 +-
 dashboard-ui/scripts/moviestudios.js         |   2 +-
 dashboard-ui/scripts/musicgenres.js          |   2 +-
 dashboard-ui/scripts/remotecontrol.js        | 243 ++++++++++++++++++-
 12 files changed, 254 insertions(+), 15 deletions(-)
 create mode 100644 dashboard-ui/css/images/remote.png

diff --git a/dashboard-ui/css/images/remote.png b/dashboard-ui/css/images/remote.png
new file mode 100644
index 0000000000000000000000000000000000000000..66f8a55271589d3595be94c9eae14ac57330ea85
GIT binary patch
literal 1732
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
a%={0whwE!@GM&f(0000<MNUMnLSTX!ra%n<

literal 0
HcmV?d00001

diff --git a/dashboard-ui/css/librarybrowser.css b/dashboard-ui/css/librarybrowser.css
index 5ab21f8bbe..08833be252 100644
--- a/dashboard-ui/css/librarybrowser.css
+++ b/dashboard-ui/css/librarybrowser.css
@@ -484,7 +484,7 @@ a.itemTag:hover {
         display: inline-block;
     }
 
-    .viewMenuImageLink {
+    .viewMenuImageLink:not(.remoteControlMenuLink) {
         display: none;
     }
 
diff --git a/dashboard-ui/css/remotecontrol.css b/dashboard-ui/css/remotecontrol.css
index 4a4d1ad376..56cb86ddf6 100644
--- a/dashboard-ui/css/remotecontrol.css
+++ b/dashboard-ui/css/remotecontrol.css
@@ -52,6 +52,10 @@
     height: 50px;
 }
 
+.nowPlaying .ui-slider-track {
+    margin-left: 15px!important;
+}
+
 @media all and (max-width: 550px) {
     .nowPlayingCell + .nowPlayingCell {
         display: none;
diff --git a/dashboard-ui/scripts/Itemdetailpage.js b/dashboard-ui/scripts/Itemdetailpage.js
index 84bb702f55..1ba81aa05a 100644
--- a/dashboard-ui/scripts/Itemdetailpage.js
+++ b/dashboard-ui/scripts/Itemdetailpage.js
@@ -883,7 +883,7 @@
 
         $('#btnRemote', page).on('click', function () {
 
-            RemoteControl.showMenu({
+            RemoteControl.showMenuForItem({
 
                 item: currentItem,
                 context: getContext(currentItem),
diff --git a/dashboard-ui/scripts/itembynamedetailpage.js b/dashboard-ui/scripts/itembynamedetailpage.js
index a70908315d..99223f9a9d 100644
--- a/dashboard-ui/scripts/itembynamedetailpage.js
+++ b/dashboard-ui/scripts/itembynamedetailpage.js
@@ -489,7 +489,7 @@
 
         $('#btnRemote', page).on('click', function () {
 
-            RemoteControl.showMenu({ item: currentItem, context: getParameterByName('context') || '' });
+            RemoteControl.showMenuForItem({ item: currentItem, context: getParameterByName('context') || '' });
         });
 
         $('#btnEdit', page).on('click', function () {
diff --git a/dashboard-ui/scripts/librarybrowser.js b/dashboard-ui/scripts/librarybrowser.js
index 0c3fe87aeb..adb0b7fc9a 100644
--- a/dashboard-ui/scripts/librarybrowser.js
+++ b/dashboard-ui/scripts/librarybrowser.js
@@ -1815,6 +1815,8 @@
             html += '<a class="viewMenuLink viewMenuTextLink' + (view == 'games' ? selectedCssClass : '') + '" href="gamesrecommended.html">' + (view == 'games' ? selectedHtml : '') + '<span class="viewName">Games</span></a>';
         }
 
+        html += '<a class="viewMenuLink viewMenuImageLink remoteControlMenuLink" href="#" onclick="RemoteControl.showMenu();" title="Remote Control"><img src="css/images/remote.png" alt="Remote Control" /></a>';
+
         html += '<div class="viewMenuSecondary">';
 
         html += Search.getSearchHtml();
diff --git a/dashboard-ui/scripts/mediaplayer.js b/dashboard-ui/scripts/mediaplayer.js
index 079dcc5a74..6b36b28f3c 100644
--- a/dashboard-ui/scripts/mediaplayer.js
+++ b/dashboard-ui/scripts/mediaplayer.js
@@ -101,7 +101,7 @@
 
             clearProgressInterval();
 
-            var intervalTime = ApiClient.isWebSocketOpen() ? 10000 : 30000;
+            var intervalTime = ApiClient.isWebSocketOpen() ? 5000 : 20000;
 
             currentProgressInterval = setInterval(function () {
 
@@ -831,6 +831,10 @@
 
         self.playInternal = function (item, startPosition, user) {
 
+            if (item == null) {
+                throw new Error("item cannot be null");
+            }
+            
             if (self.isPlaying()) {
                 self.stop();
             }
diff --git a/dashboard-ui/scripts/moviegenres.js b/dashboard-ui/scripts/moviegenres.js
index 46c50739c8..0f352d6137 100644
--- a/dashboard-ui/scripts/moviegenres.js
+++ b/dashboard-ui/scripts/moviegenres.js
@@ -5,7 +5,7 @@
 
         SortBy: "SortName",
         SortOrder: "Ascending",
-        IncludeItemTypes: "Movie",
+        IncludeItemTypes: "Movie,Trailer",
         Recursive: true,
         Fields: "ItemCounts,DateCreated,UserData",
         StartIndex: 0
diff --git a/dashboard-ui/scripts/moviepeople.js b/dashboard-ui/scripts/moviepeople.js
index 618cae0790..dc54635fb6 100644
--- a/dashboard-ui/scripts/moviepeople.js
+++ b/dashboard-ui/scripts/moviepeople.js
@@ -5,7 +5,7 @@
 
         SortBy: "SortName",
         SortOrder: "Ascending",
-        IncludeItemTypes: "Movie",
+        IncludeItemTypes: "Movie,Trailer",
         Recursive: true,
         Fields: "ItemCounts,DateCreated,UserData",
         PersonTypes: "",
diff --git a/dashboard-ui/scripts/moviestudios.js b/dashboard-ui/scripts/moviestudios.js
index 7336b4bd3f..a3516f145f 100644
--- a/dashboard-ui/scripts/moviestudios.js
+++ b/dashboard-ui/scripts/moviestudios.js
@@ -5,7 +5,7 @@
 
         SortBy: "SortName",
         SortOrder: "Ascending",
-        IncludeItemTypes: "Movie",
+        IncludeItemTypes: "Movie,Trailer",
         Recursive: true,
         Fields: "ItemCounts,DateCreated,UserData",
         StartIndex: 0
diff --git a/dashboard-ui/scripts/musicgenres.js b/dashboard-ui/scripts/musicgenres.js
index bb46318561..b63545aec2 100644
--- a/dashboard-ui/scripts/musicgenres.js
+++ b/dashboard-ui/scripts/musicgenres.js
@@ -5,7 +5,7 @@
 
         SortBy: "SortName",
         SortOrder: "Ascending",
-        IncludeItemTypes: "Audio",
+        IncludeItemTypes: "Audio,MusicVideo",
         Recursive: true,
         Fields: "ItemCounts,DateCreated,UserData",
         StartIndex: 0
diff --git a/dashboard-ui/scripts/remotecontrol.js b/dashboard-ui/scripts/remotecontrol.js
index 7895159dd3..a6b4ab7b14 100644
--- a/dashboard-ui/scripts/remotecontrol.js
+++ b/dashboard-ui/scripts/remotecontrol.js
@@ -27,7 +27,7 @@
 
     }
 
-    function showMenu(options, sessionsPromise) {
+    function showMenuForItem(options, sessionsPromise) {
 
         var playFromRendered;
         var trailersRendered;
@@ -204,11 +204,12 @@
 
             var deviceId = ApiClient.deviceId();
 
+            // don't display the current session
             sessions = sessions.filter(function (s) {
                 return s.DeviceId != deviceId;
             });
 
-            renderSessions(sessions, options, elem);
+            renderSessionsInPlayMenu(sessions, options, elem);
 
             if (ApiClient.isWebSocketOpen()) {
                 ApiClient.sendWebSocketMessage("SessionsStart", "1500,1500");
@@ -216,7 +217,7 @@
                 $(ApiClient).on("websocketmessage.remotecontrol", function (e, msg) {
 
                     if (msg.MessageType === "Sessions") {
-                        refreshSessions(msg.Data, elem);
+                        updateSessionsInPlayMenu(msg.Data, elem);
                     }
                 });
 
@@ -392,7 +393,7 @@
         $('.chkSelectPlayTime:first', elem).checked(true);
     }
 
-    function renderSessions(sessions, options, elem) {
+    function renderSessionsInPlayMenu(sessions, options, elem) {
 
         if (!sessions.length) {
             elem.html('<p>There are currently no available media browser sessions to control.</p>');
@@ -536,7 +537,7 @@
         return html;
     }
 
-    function refreshSessions(sessions, elem) {
+    function updateSessionsInPlayMenu(sessions, elem) {
 
         for (var i = 0, length = sessions.length; i < length; i++) {
 
@@ -612,12 +613,240 @@
         $('.chkSelectItem:first', elem).checked(true);
     }
 
+    function showMenu(sessions) {
+
+        var html = '<div data-role="popup" id="remoteControlFlyout">';
+
+        html += '<div class="ui-corner-top ui-bar-a" style="text-align:center;">';
+        html += '<div style="margin:.5em 0;">Remote Control</div>';
+        html += '</div>';
+
+        html += '<div data-role="content" class="ui-corner-bottom ui-content">';
+
+        html += '<div class="sessionsPopupContent">';
+
+        // Add controls here
+        html += '<div><label for="selectSession">Select session</label>';
+        html += '<select id="selectSession" name="selectSession" data-mini="true"></select></div>';
+
+        html += '</div>';
+
+        html += '<div class="nowPlayingInfo" style="margin:1em 0;">';
+
+        html += '<div class="nowPlaying" style="display:none;">';
+
+        html += getPlaybackHtml();
+
+        html += '</div>';
+
+        html += '<p class="nothingPlaying" style="display:none;">Nothing is currently playing.</p>';
+
+        html += '</div>';
+
+        html += '<p style="text-align:center;margin:.75em 0 0;">';
+
+        html += '<button type="button" data-icon="delete" onclick="$(\'#remoteControlFlyout\').popup(\'close\');" data-theme="a" data-mini="true" data-inline="true">Close</button>';
+
+        html += '</p>';
+
+        html += '</div>';
+
+        html += '</div>';
+
+        $(document.body).append(html);
+
+        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();
+        });
+
+        renderSessionsInControlMenu(popup, sessions);
+        updateSessionInfo(popup, sessions);
+
+        if (ApiClient.isWebSocketOpen()) {
+            ApiClient.sendWebSocketMessage("SessionsStart", "1500,1500");
+
+            $(ApiClient).on("websocketmessage.remotecontrol", function (e, msg) {
+
+                if (msg.MessageType === "Sessions") {
+
+                    // Update existing data
+                    updateSessionInfo(popup, msg.Data);
+                }
+            });
+
+        }
+    }
+
+    function getPlaybackHtml() {
+
+        var html = '';
+
+        html += '<p class="nowPlayingTitle" style="text-align:center;margin-top:2em;"></p>';
+
+        html += '<p class="nowPlayingImage" style="text-align:center;"></p>';
+
+        html += '<div style="text-align:center;margin: 1em 0 1em;">';
+
+        html += '<div style="text-align:right;vertical-align:middle;padding-right:20px;font-weight: bold;">';
+        html += '<span class="nowPlayingTime"></span>';
+        html += '<span> / </span>';
+        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 += '</div>';
+
+        html += '<div style="text-align:center; margin: 0 0 2em;">';
+        html += '<button class="btnPreviousTrack" type="button" data-icon="step-backward" data-inline="true" data-iconpos="notext">Previous track</button>';
+        html += '<span class="btnPauseParent"><button class="btnPause" type="button" data-icon="pause" data-inline="true" data-iconpos="notext">Pause</button></span>';
+        html += '<span class="btnPlayParent"><button class="btnPlay" type="button" data-icon="play" data-inline="true" data-iconpos="notext">Play</button></span>';
+        html += '<button class="btnStop" type="button" data-icon="stop" data-inline="true" data-iconpos="notext">Stop</button>';
+        html += '<button class="btnNextTrack" type="button" data-icon="step-forward" data-inline="true" data-iconpos="notext">Next track</button>';
+        html += '</div>';
+
+
+        return html;
+    }
+
+    function updateSessionInfo(popup, sessions) {
+
+        var id = $('#selectSession', popup).val();
+
+        // don't display the current session
+        var session = sessions.filter(function (s) {
+            return s.Id == id;
+        })[0];
+
+        if (session && session.NowPlayingItem) {
+
+            $('.nothingPlaying', popup).hide();
+
+            var elem = $('.nowPlaying', popup).show();
+
+            updateNowPlaying(elem, session);
+
+        } else {
+
+            $('.nothingPlaying', popup).show();
+            $('.nowPlaying', popup).hide();
+        }
+    }
+
+    function updateNowPlaying(elem, session) {
+
+        var item = session.NowPlayingItem;
+
+        $('.nowPlayingTitle', elem).html(item.Name);
+
+        var imageContainer = $('.nowPlayingImage', elem);
+
+        if (item.PrimaryImageTag) {
+            imageContainer.show();
+
+            var img = $('img', imageContainer)[0];
+
+            var imgUrl = ApiClient.getImageUrl(item.Id, {
+                maxheight: 200,
+                type: 'Primary',
+                tag: item.PrimaryImageTag
+            });
+            
+            if (!img || img.src.toLowerCase().indexOf(imgUrl.toLowerCase()) == -1) {
+                imageContainer.html('<img style="max-height:100px;" src="' + imgUrl + '" />');
+            }
+            
+        } else {
+            imageContainer.hide();
+        }
+
+        var time = session.NowPlayingPositionTicks || 0;
+        var duration = item.RunTimeTicks || 0;
+
+        var percent = duration ? 100 * time / duration : 0;
+
+        $('#positionSlider', elem).val(percent).slider('refresh');
+
+        $('.nowPlayingTime', elem).html(Dashboard.getDisplayTime(time));
+        $('.duration', elem).html(Dashboard.getDisplayTime(duration));
+
+        if (session.IsPaused) {
+            $('.btnPauseParent', elem).hide();
+            $('.btnPlayParent', elem).show();
+        } else {
+            $('.btnPauseParent', elem).show();
+            $('.btnPlayParent', elem).hide();
+        }
+    }
+
+    function renderSessionsInControlMenu(popup, sessions) {
+
+        var deviceId = ApiClient.deviceId();
+
+        // don't display the current session
+        sessions = sessions.filter(function (s) {
+            return s.DeviceId != deviceId && s.SupportsRemoteControl;
+        });
+
+        var elem = $('#selectSession', popup);
+
+        var currentValue = elem.val();
+
+        if (currentValue) {
+
+            // Make sure the session is still active
+            var currentSession = sessions.filter(function (s) {
+                return s.Id == currentValue;
+            })[0];
+
+            if (!currentSession) {
+                currentValue = null;
+            }
+        }
+
+        if (!currentValue && sessions.length) {
+            currentValue = sessions[0].Id;
+        }
+
+        var html = '';
+
+        for (var i = 0, length = sessions.length; i < length; i++) {
+
+            var session = sessions[i];
+
+            var text = session.Client + ' - ' + session.DeviceName;
+
+            if (session.UserName) {
+                text += ' - ' + session.UserName;
+            }
+
+            html += '<option value="' + session.Id + '">' + text + '</option>';
+        }
+
+        elem.html(html).val(currentValue).selectmenu('refresh');
+
+    }
+
     function remoteControl() {
 
         var self = this;
 
-        self.showMenu = function (options) {
-            showMenu(options, ApiClient.getSessions({ SupportsRemoteControl: true }));
+        self.showMenuForItem = function (options) {
+            showMenuForItem(options, ApiClient.getSessions({ SupportsRemoteControl: true }));
+        };
+
+        self.showMenu = function () {
+            ApiClient.getSessions({ SupportsRemoteControl: true }).done(function (sessions) {
+
+                showMenu(sessions);
+
+            });
         };
     }