From b73c66bd7f9f07efe5a783181fa4df9470a7dc97 Mon Sep 17 00:00:00 2001
From: Luke Pulverenti <luke.pulverenti@gmail.com>
Date: Wed, 18 Mar 2015 00:09:31 -0400
Subject: [PATCH] add transition to remote control

---
 dashboard-ui/nowplaying.html             |   5 +-
 dashboard-ui/scripts/edititemmetadata.js |  37 ++++++-
 dashboard-ui/scripts/extensions.js       | 124 +++++++++++++----------
 dashboard-ui/scripts/mediacontroller.js  |   2 +-
 dashboard-ui/scripts/nowplayingbar.js    |  20 ++--
 dashboard-ui/scripts/nowplayingpage.js   |  21 ++++
 dashboard-ui/scripts/remotecontrol.js    |   1 -
 dashboard-ui/scripts/supporterkeypage.js |   2 +
 8 files changed, 142 insertions(+), 70 deletions(-)
diff --git a/dashboard-ui/nowplaying.html b/dashboard-ui/nowplaying.html
index 89cfdf448f..52e81ca440 100644
--- a/dashboard-ui/nowplaying.html
+++ b/dashboard-ui/nowplaying.html
@@ -4,7 +4,7 @@
     <title>${TitleMediaBrowser}</title>
 </head>
 <body>
-    <div id="nowPlayingPage" data-role="page" class="page libraryPage nowPlayingPage" data-contextname="${TitleRemoteControl}">
+    <div id="nowPlayingPage" data-role="page" class="page libraryPage nowPlayingPage" data-contextname="${TitleRemoteControl}" data-theme="b">
 
         <div class="libraryViewNav">
             <a href="#" class="ui-btn-active tabButton" data-tab="tabNowPlaying">${TabNowPlaying}</a>
@@ -135,7 +135,7 @@
         <div data-role="popup" id="popupSubtitleTrackMenu" data-transition="flip">
             <div class="trackList"></div>
         </div>
-        
+
         <div class="chapterMenuOverlay" style="display: none;"></div>
         <div class="chapterMenu" style="display: none;">
             <div class="chapterMenuInner">
@@ -146,6 +146,7 @@
             $('.sendMessageForm').off('submit', NowPlayingPage.onMessageSubmit).on('submit', NowPlayingPage.onMessageSubmit);
             $('.typeTextForm').off('submit', NowPlayingPage.onSendStringSubmit).on('submit', NowPlayingPage.onSendStringSubmit);
         </script>
+
     </div>
 </body>
 </html>
diff --git a/dashboard-ui/scripts/edititemmetadata.js b/dashboard-ui/scripts/edititemmetadata.js
index 22cbc6beff..658615cb3c 100644
--- a/dashboard-ui/scripts/edititemmetadata.js
+++ b/dashboard-ui/scripts/edititemmetadata.js
@@ -15,6 +15,7 @@
 
     function reload(page) {
 
+        unbindItemChanged(page);
         Dashboard.showLoadingMsg();
 
         var promise1 = MetadataEditor.getItemPromise();
@@ -94,6 +95,7 @@
                 }
 
                 Dashboard.hideLoadingMsg();
+                bindItemChanged(page);
             });
 
         });
@@ -924,12 +926,16 @@
 
         self.submitUpdatedItem = function (form, item) {
 
+            var page = $(form).parents('.page');
+            unbindItemChanged(page);
+
             function afterContentTypeUpdated() {
 
                 Dashboard.alert(Globalize.translate('MessageItemSaved'));
 
                 MetadataEditor.getItemPromise().done(function (i) {
-                    $(form).parents('.page').trigger('itemsaved', [i]);
+                    page.trigger('itemsaved', [i]);
+                    bindItemChanged(page);
                 });
             }
 
@@ -1338,6 +1344,30 @@
         });
     }
 
+    function onWebSocketMessageReceived(e, data) {
+
+        var msg = data;
+
+        if (msg.MessageType === "LibraryChanged") {
+
+            if (msg.Data.ItemsUpdated.indexOf(currentItem.Id) != -1) {
+
+                console.log('Item updated - reloading metadata');
+                reload($.mobile.activePage);
+            }
+        }
+    }
+
+    function bindItemChanged(page) {
+
+        $(ApiClient).on("websocketmessage", onWebSocketMessageReceived);
+    }
+
+    function unbindItemChanged(page) {
+
+        $(ApiClient).off("websocketmessage", onWebSocketMessageReceived);
+    }
+
     $(document).on('pageinit', "#editItemMetadataPage", function () {
 
         var page = this;
@@ -1412,11 +1442,10 @@
 
     }).on('pagehide', "#editItemMetadataPage", function () {
 
+        var page = this;
         $(LibraryBrowser).off('itemdeleting.editor');
 
-        var page = this;
-
-        reload(page);
+        unbindItemChanged(page);
 
     });
 
diff --git a/dashboard-ui/scripts/extensions.js b/dashboard-ui/scripts/extensions.js
index f8467a9cd9..ba2aad90d4 100644
--- a/dashboard-ui/scripts/extensions.js
+++ b/dashboard-ui/scripts/extensions.js
@@ -508,59 +508,6 @@ function ticks_to_human(str) {
     return time;
 };
 
-/******************************************************************************/
-/*********************************** EASING ***********************************/
-/******************************************************************************/
-
-(function () {
-
-    // based on easing equations from Robert Penner (http://www.robertpenner.com/easing)
-
-    var baseEasings = {};
-
-    $.each(["Quad", "Cubic", "Quart", "Quint", "Expo"], function (i, name) {
-        baseEasings[name] = function (p) {
-            return Math.pow(p, i + 2);
-        };
-    });
-
-    $.extend(baseEasings, {
-        Sine: function (p) {
-            return 1 - Math.cos(p * Math.PI / 2);
-        },
-        Circ: function (p) {
-            return 1 - Math.sqrt(1 - p * p);
-        },
-        Elastic: function (p) {
-            return p === 0 || p === 1 ? p :
-                -Math.pow(2, 8 * (p - 1)) * Math.sin(((p - 1) * 80 - 7.5) * Math.PI / 15);
-        },
-        Back: function (p) {
-            return p * p * (3 * p - 2);
-        },
-        Bounce: function (p) {
-            var pow2,
-                bounce = 4;
-
-            while (p < ((pow2 = Math.pow(2, --bounce)) - 1) / 11) { }
-            return 1 / Math.pow(4, 3 - bounce) - 7.5625 * Math.pow((pow2 * 3 - 2) / 22 - p, 2);
-        }
-    });
-
-    $.each(baseEasings, function (name, easeIn) {
-        $.easing["easeIn" + name] = easeIn;
-        $.easing["easeOut" + name] = function (p) {
-            return 1 - easeIn(1 - p);
-        };
-        $.easing["easeInOut" + name] = function (p) {
-            return p < 0.5 ?
-                easeIn(p * 2) / 2 :
-                1 - easeIn(p * -2 + 2) / 2;
-        };
-    });
-
-})();
-
 (function (window) {
 
     // Mimic Globalize api
@@ -582,4 +529,73 @@ function ticks_to_human(str) {
         }
     };
 
-})(window);
\ No newline at end of file
+})(window);
+
+(function () {
+    var supportTouch = $.support.touch,
+            scrollEvent = "touchmove scroll",
+            touchStartEvent = supportTouch ? "touchstart" : "mousedown",
+            touchStopEvent = supportTouch ? "touchend" : "mouseup",
+            touchMoveEvent = supportTouch ? "touchmove" : "mousemove";
+    $.event.special.swipeupdown = {
+        setup: function () {
+            var thisObject = this;
+            var $this = $(thisObject);
+            $this.bind(touchStartEvent, function (event) {
+                var data = event.originalEvent.touches ?
+                        event.originalEvent.touches[0] :
+                        event,
+                        start = {
+                            time: (new Date).getTime(),
+                            coords: [data.pageX, data.pageY],
+                            origin: $(event.target)
+                        },
+                        stop;
+
+                function moveHandler(event) {
+                    if (!start) {
+                        return;
+                    }
+                    var data = event.originalEvent.touches ?
+                            event.originalEvent.touches[0] :
+                            event;
+                    stop = {
+                        time: (new Date).getTime(),
+                        coords: [data.pageX, data.pageY]
+                    };
+
+                    // prevent scrolling
+                    if (Math.abs(start.coords[1] - stop.coords[1]) > 10) {
+                        event.preventDefault();
+                    }
+                }
+                $this
+                        .bind(touchMoveEvent, moveHandler)
+                        .one(touchStopEvent, function (event) {
+                            $this.unbind(touchMoveEvent, moveHandler);
+                            if (start && stop) {
+                                if (stop.time - start.time < 1000 &&
+                                        Math.abs(start.coords[1] - stop.coords[1]) > 30 &&
+                                        Math.abs(start.coords[0] - stop.coords[0]) < 75) {
+                                    start.origin
+                                            .trigger("swipeupdown")
+                                            .trigger(start.coords[1] > stop.coords[1] ? "swipeup" : "swipedown");
+                                }
+                            }
+                            start = stop = undefined;
+                        });
+            });
+        }
+    };
+    $.each({
+        swipedown: "swipeupdown",
+        swipeup: "swipeupdown"
+    }, function (event, sourceEvent) {
+        $.event.special[event] = {
+            setup: function () {
+                $(this).bind(sourceEvent, $.noop);
+            }
+        };
+    });
+
+})();
\ No newline at end of file
diff --git a/dashboard-ui/scripts/mediacontroller.js b/dashboard-ui/scripts/mediacontroller.js
index fb569980fd..dd90f33dcb 100644
--- a/dashboard-ui/scripts/mediacontroller.js
+++ b/dashboard-ui/scripts/mediacontroller.js
@@ -506,7 +506,7 @@
         html += '<div class="players"></div>';
 
         html += '<br/>';
-        html += '<p><a href="nowplaying.html" data-role="button" data-icon="remote">' + Globalize.translate('ButtonRemoteControl') + '</a></p>';
+        html += '<p><a href="nowplaying.html" data-role="button" data-icon="remote" data-transition="slideup">' + Globalize.translate('ButtonRemoteControl') + '</a></p>';
 
         html += '</div>';
 
diff --git a/dashboard-ui/scripts/nowplayingbar.js b/dashboard-ui/scripts/nowplayingbar.js
index 666deb9957..f481af54fc 100644
--- a/dashboard-ui/scripts/nowplayingbar.js
+++ b/dashboard-ui/scripts/nowplayingbar.js
@@ -23,7 +23,7 @@
         html += '<div class="nowPlayingBar" style="display:none;">';
         html += '<div style="display:inline-block;width:12px;"></div>';
 
-        html += '<a class="mediaButton remoteControlButton" title="' + Globalize.translate('ButtonRemoteControl') + '" href="nowplaying.html" data-role="button" data-icon="remote" data-iconpos="notext" data-inline="true">' + Globalize.translate('ButtonRemoteControl') + '</a>';
+        html += '<a class="mediaButton remoteControlButton" title="' + Globalize.translate('ButtonRemoteControl') + '" href="nowplaying.html" data-transition="slideup" data-role="button" data-icon="remote" data-iconpos="notext" data-inline="true">' + Globalize.translate('ButtonRemoteControl') + '</a>';
 
         html += '<a id="playlistButton" class="mediaButton playlistButton" href="playlist.html" data-role="button" data-icon="bullets" data-iconpos="notext" data-inline="true" title="' + Globalize.translate('ButtonPlaylist') + '">' + Globalize.translate('ButtonPlaylist') + '</a>';
         html += '<button id="previousTrackButton" class="mediaButton previousTrackButton" title="' + Globalize.translate('ButtonPreviousTrack') + '" type="button" data-icon="previous-track" data-iconpos="notext" data-inline="true">' + Globalize.translate('ButtonPreviousTrack') + '</button>';
@@ -62,6 +62,10 @@
         nowPlayingImageElement = $('.nowPlayingImage', elem);
         nowPlayingTextElement = $('.nowPlayingText', elem);
 
+        $(elem).on('swipeup', function () {
+            Dashboard.navigate('nowplaying.html');
+        });
+
         unmuteButton = $('.unmuteButton', elem).on('click', function () {
 
             if (currentPlayer) {
@@ -156,11 +160,11 @@
 
         return elem;
     }
-    
+
     function showButton(button) {
         button.removeClass('hide');
     }
-    
+
     function hideButton(button) {
         button.addClass('hide');
     }
@@ -294,7 +298,7 @@
         nowPlayingTextElement.html(nameHtml);
 
         var url;
-        
+
         var nowPlayingItem = state.NowPlayingItem;
 
         if (nowPlayingItem.PrimaryImageTag) {
@@ -338,7 +342,7 @@
         }
 
         currentImgUrl = url;
-        
+
         nowPlayingImageElement.html('<img src="' + url + '" />');
     }
 
@@ -405,8 +409,8 @@
 
         var player = this;
 
-        player.getPlayerState().done(function(state) {
-            
+        player.getPlayerState().done(function (state) {
+
             if (player.isDefaultPlayer && state.NowPlayingItem && state.NowPlayingItem.MediaType == 'Video') {
                 return;
             }
@@ -427,7 +431,7 @@
                 player.beginPlayerUpdates();
             }
 
-            onStateChanged.call(player, {type: 'init'}, state);
+            onStateChanged.call(player, { type: 'init' }, state);
         });
 
         $(player).on('playbackstart.nowplayingbar', onPlaybackStart)
diff --git a/dashboard-ui/scripts/nowplayingpage.js b/dashboard-ui/scripts/nowplayingpage.js
index 4b80c2e934..747767fc7c 100644
--- a/dashboard-ui/scripts/nowplayingpage.js
+++ b/dashboard-ui/scripts/nowplayingpage.js
@@ -365,6 +365,12 @@
                 currentPlayer.seek(Math.floor(newPositionTicks));
             }
         });
+
+        $(page).on('swipedown', function () {
+
+            document.title = new Date().getTime();
+            history.back();
+        });
     }
 
     function onPlaybackStart(e, state) {
@@ -592,6 +598,18 @@
         updateSupportedCommands(page, supportedCommands);
     }
 
+    function showIntro() {
+        
+        if (store.getItem('remotecontrolswipedown') != '1') {
+            Dashboard.alert({
+                message: Globalize.translate('MessageSwipeDownOnRemoteControl'),
+                title: Globalize.translate('HeaderAlert')
+            });
+            store.setItem('remotecontrolswipedown', '1');
+        }
+
+    }
+
     $(document).on('pageinit', "#nowPlayingPage", function () {
 
         var page = this;
@@ -615,6 +633,9 @@
 
         });
 
+
+        showIntro();
+
     }).on('pagehide', "#nowPlayingPage", function () {
 
         releaseCurrentPlayer();
diff --git a/dashboard-ui/scripts/remotecontrol.js b/dashboard-ui/scripts/remotecontrol.js
index a1e7888771..a8ae221878 100644
--- a/dashboard-ui/scripts/remotecontrol.js
+++ b/dashboard-ui/scripts/remotecontrol.js
@@ -344,7 +344,6 @@
         }
     }
 
-
     function initializeApiClient(apiClient) {
         $(apiClient).on("websocketmessage", onWebSocketMessageReceived).on("websocketopen", onWebSocketConnectionChange);
     }
diff --git a/dashboard-ui/scripts/supporterkeypage.js b/dashboard-ui/scripts/supporterkeypage.js
index 58a8cf7a8b..8464880244 100644
--- a/dashboard-ui/scripts/supporterkeypage.js
+++ b/dashboard-ui/scripts/supporterkeypage.js
@@ -209,6 +209,8 @@ $(document).on('pageshow', "#supporterKeyPage", SupporterKeyPage.onPageShow);
 
             html += '<ul data-role="listview" data-inset="true">';
 
+            html += '<li data-role="list-divider">' + Globalize.translate('HeaderUsers');
+
             html += result.Users.map(getUserHtml).join('');
 
             html += '</ul>';
