Merge branch 'dev' of https://github.com/MediaBrowser/MediaBrowser into dev

dashboard-ui/scripts/actionsheet.js

@@ -0,0 +1,133 @@
+(function () {
+
+    function show(options) {
+
+        require(['paperbuttonstyle'], function () {
+            // items
+            // positionTo
+            // showCancel
+            // title
+            var id = 'dlg' + new Date().getTime();
+            var html = '';
+
+            var style = "";
+
+            var windowHeight = $(window).height();
+
+            // If the window height is under a certain amount, don't bother trying to position
+            // based on an element.
+            if (options.positionTo && windowHeight >= 540) {
+
+                var pos = $(options.positionTo).offset();
+
+                pos.top += $(options.positionTo).innerHeight() / 2;
+                pos.left += $(options.positionTo).innerWidth() / 2;
+
+                // Account for margins
+                pos.top -= 24;
+                pos.left -= 24;
+
+                // Account for popup size - we can't predict this yet so just estimate
+                pos.top -= (55 * options.items.length) / 2;
+                pos.left -= 80;
+
+                // Account for scroll position
+                pos.top -= $(window).scrollTop();
+                pos.left -= $(window).scrollLeft();
+
+                // Avoid showing too close to the bottom
+                pos.top = Math.min(pos.top, $(window).height() - 300);
+                pos.left = Math.min(pos.left, $(window).width() - 300);
+
+                // Do some boundary checking
+                pos.top = Math.max(pos.top, 0);
+                pos.left = Math.max(pos.left, 0);
+
+                style += 'position:fixed;top:' + pos.top + 'px;left:' + pos.left + 'px';
+            }
+
+            html += '<paper-dialog id="' + id + '" entry-animation="fade-in-animation" exit-animation="fade-out-animation" with-backdrop style="' + style + '">';
+
+            if (options.title) {
+                html += '<h2>';
+                html += options.title;
+                html += '</h2>';
+            }
+
+            // There seems to be a bug with this in safari causing it to immediately roll up to 0 height
+            var isScrollable = !$.browser.safari;
+
+            if (isScrollable) {
+                html += '<paper-dialog-scrollable>';
+            }
+
+            // If any items have an icon, give them all an icon just to make sure they're all lined up evenly
+            var renderIcon = options.items.filter(function (o) {
+                return o.ironIcon;
+            }).length;
+
+            html += '<paper-menu>';
+            for (var i = 0, length = options.items.length; i < length; i++) {
+
+                var option = options.items[i];
+
+                html += '<paper-menu-item class="actionSheetMenuItem" data-id="' + option.id + '" style="display:block;">';
+
+                if (option.ironIcon) {
+                    html += '<iron-icon icon="' + option.ironIcon + '"></iron-icon>';
+                }
+                else if (renderIcon) {
+                    html += '<iron-icon></iron-icon>';
+                }
+                html += '<span>' + option.name + '</span>';
+                html += '</paper-menu-item>';
+            }
+            html += '</paper-menu>';
+
+            if (isScrollable) {
+                html += '</paper-dialog-scrollable>';
+            }
+
+            if (options.showCancel) {
+                html += '<div class="buttons">';
+                html += '<paper-button dialog-dismiss>' + Globalize.translate('ButtonCancel') + '</paper-button>';
+                html += '</div>';
+            }
+
+            html += '</paper-dialog>';
+
+            $(document.body).append(html);
+
+            setTimeout(function () {
+                var dlg = document.getElementById(id);
+
+                dlg.open();
+
+                // Has to be assigned a z-index after the call to .open() 
+                $(dlg).on('iron-overlay-closed', function () {
+                    $(this).remove();
+                });
+
+                $('.actionSheetMenuItem', dlg).on('click', function () {
+
+                    var selectedId = this.getAttribute('data-id');
+
+                    // Add a delay here to allow the click animation to finish, for nice effect
+                    setTimeout(function () {
+
+                        dlg.close();
+
+                        if (options.callback) {
+                            options.callback(selectedId);
+                        }
+
+                    }, 100);
+                });
+            }, 100);
+        });
+    }
+
+    window.ActionSheetElement = {
+        show: show
+    };
+})();

dashboard-ui/scripts/addpluginpage.js

@@ -17,6 +17,7 @@
     }
 
     function populateVersions(packageInfo, page, installedPlugin) {
+
         var html = '';
 
         for (var i = 0, length = packageInfo.versions.length; i < length; i++) {
@@ -92,7 +93,7 @@
                 html += "</div>";
             }
 
-            $('#latestReviews', page).html(html).trigger('create');
+            Events.trigger($('#latestReviews', page).html(html)[0], 'create');
         });
     }
 
@@ -109,12 +110,12 @@
         $('.pluginName', page).html(pkg.name);
 
         if (pkg.targetSystem == 'Server') {
-            $("#btnInstallDiv", page).show();
+            $("#btnInstallDiv", page).visible(true);
             $("#nonServerMsg", page).hide();
-            $("#pSelectVersion", page).show();
+            $("#pSelectVersion", page).visible(true);
         } else {
-            $("#btnInstallDiv", page).hide();
-            $("#pSelectVersion", page).hide();
+            $("#btnInstallDiv", page).visible(false);
+            $("#pSelectVersion", page).visible(false);
 
             var msg = Globalize.translate('MessageInstallPluginFromApp');
             $("#nonServerMsg", page).html(msg).show();

dashboard-ui/scripts/alphapicker.js

@@ -39,28 +39,30 @@
 
         var page = this;
 
-        var picker = $('.alphabetPicker', page);
+        var picker = page.querySelector('.alphabetPicker');
 
-        if (!picker.length) {
+        if (!picker) {
             return;
         }
 
         $('.itemsContainer', page).addClass('itemsContainerWithAlphaPicker');
 
-        picker.html(getPickerHtml()).trigger('create').on('click', 'a', function () {
+        picker.innerHTML = getPickerHtml();
 
-            var elem = $(this);
+        Events.on(picker, 'click', 'a', function () {
 
-            var isSelected = elem.hasClass('selectedCharacter');
+            var elem = this;
+
+            var isSelected = elem.classList.contains('selectedCharacter');
 
             $('.selectedCharacter', picker).removeClass('selectedCharacter');
 
             if (!isSelected) {
 
-                elem.addClass('selectedCharacter');
-                picker.trigger('alphaselect', [this.innerHTML]);
+                elem.classList.add('selectedCharacter');
+                Events.trigger(picker, 'alphaselect', [this.innerHTML]);
             } else {
-                picker.trigger('alphaclear');
+                Events.trigger(picker, 'alphaclear');
             }
         });
     });
@@ -79,10 +81,10 @@
 
             if (this.innerHTML.toLowerCase() == val) {
 
-                $(this).addClass('selectedCharacter');
+                this.classList.add('selectedCharacter');
 
             } else {
-                $(this).removeClass('selectedCharacter');
+                this.classList.remove('selectedCharacter');
             }
 
         });

dashboard-ui/scripts/appsettings.js

@@ -1,7 +1,7 @@
-(function (window, store) {
+(function (window) {
 
     function update(key, val) {
-        store.setItem(key, val);
+        appStorage.setItem(key, val);
 
         Events.trigger(AppSettings, 'settingupdated', [key]);
     }
@@ -14,7 +14,7 @@
                 update('preferredVideoBitrate', val);
             }
 
-            return parseInt(store.getItem('preferredVideoBitrate') || '') || 1500000;
+            return parseInt(appStorage.getItem('preferredVideoBitrate') || '') || 1500000;
         },
         maxChromecastBitrate: function (val) {
 
@@ -22,7 +22,7 @@
                 update('chromecastBitrate', val);
             }
 
-            return parseInt(store.getItem('chromecastBitrate') || '') || 3000000;
+            return parseInt(appStorage.getItem('chromecastBitrate') || '') || 3000000;
         },
         enableChromecastAc3: function (val) {
 
@@ -30,7 +30,7 @@
                 update('enablechromecastac3', val.toString());
             }
 
-            return store.getItem('enablechromecastac3') == 'true';
+            return appStorage.getItem('enablechromecastac3') == 'true';
         },
         enableExternalPlayers: function (val) {
 
@@ -38,7 +38,7 @@
                 update('externalplayers', val.toString());
             }
 
-            return store.getItem('externalplayers') == 'true';
+            return appStorage.getItem('externalplayers') == 'true';
         },
         enableItemPreviews: function (val) {
 
@@ -46,7 +46,7 @@
                 update('enableItemPreviews', val.toString());
             }
 
-            return store.getItem('enableItemPreviews') == 'true';
+            return appStorage.getItem('enableItemPreviews') == 'true';
         },
         enableFullScreen: function (val) {
 
@@ -54,7 +54,7 @@
                 update('enableFullScreen', val.toString());
             }
 
-            return store.getItem('enableFullScreen') == 'true';
+            return appStorage.getItem('enableFullScreen') == 'true';
         },
         syncPath: function (val) {
 
@@ -62,10 +62,10 @@
                 update('syncPath', val.toString());
             }
 
-            return store.getItem('syncPath');
+            return appStorage.getItem('syncPath');
         }
 
     };
 
 
-})(window, window.appStorage);
+})(window);

dashboard-ui/scripts/autoorganizelog.js

@@ -285,8 +285,15 @@
             deleteOriginalFile(page, id);
         });
 
-        var pagingHtml = LibraryBrowser.getPagingHtml(query, result.TotalRecordCount, false, [], false);
-        $('.listTopPaging', page).html(pagingHtml).trigger('create');
+        var pagingHtml = LibraryBrowser.getQueryPagingHtml({
+            startIndex: query.StartIndex,
+            limit: query.Limit,
+            totalRecordCount: result.TotalRecordCount,
+            showLimit: false,
+            updatePageSizeSetting: false
+        });
+
+        page.querySelector('.listTopPaging').innerHTML = pagingHtml;
 
         if (result.TotalRecordCount > query.Limit && result.TotalRecordCount > 50) {
             $('.listBottomPaging', page).html(pagingHtml).trigger('create');
@@ -361,7 +368,7 @@
 
         $(ApiClient).on("websocketmessage.autoorganizelog", onWebSocketMessage);
 
-    }).on('pagehide', "#libraryFileOrganizerLogPage", function () {
+    }).on('pagebeforehide', "#libraryFileOrganizerLogPage", function () {
 
         var page = this;
 
@@ -372,7 +379,7 @@
             mode: 'off'
         });
 
-        $(ApiClient).off(".autoorganizelog");
+        $(ApiClient).off("websocketmessage.autoorganizelog", onWebSocketMessage);
     });
 
 })(jQuery, document, window);

dashboard-ui/scripts/backdrops.js

@@ -2,16 +2,26 @@
 
     function getElement() {
 
-        var elem = $('.backdropContainer');
+        //var elem = $('.backdropContainer');
 
-        if (!elem.length) {
+        //if (!elem.length) {
 
-            elem = $('<div class="backdropContainer"></div>').prependTo(document.body);
-        }
+        //    elem = $('<div class="backdropContainer"></div>').prependTo(document.body);
+        //}
 
+        var elem = document.documentElement;
+
+        elem.classList.add('backdropContainer');
         return elem;
     }
 
+    function clearBackdrop() {
+
+        var elem = document.documentElement;
+        elem.classList.remove('backdropContainer');
+        elem.style.backgroundImage = '';
+    }
+
     function getRandom(min, max) {
         return Math.floor(Math.random() * (max - min) + min);
     }
@@ -26,7 +36,7 @@
 
         if (data) {
 
-            console.log('Found backdrop id list in cache. Key: ' + key)
+            Logger.log('Found backdrop id list in cache. Key: ' + key)
             data = JSON.parse(data);
             deferred.resolveWith(null, [data]);
         } else {
@@ -61,7 +71,7 @@
 
     function setBackdropImage(elem, url) {
 
-        elem.lazyImage(url);
+        ImageLoader.lazyImage(elem, url);
     }
 
     function showBackdrop(type, parentId) {
@@ -99,20 +109,10 @@
 
     function setDefault(page) {
 
-        var backdropContainer = $('.backdropContainer');
+        getElement().style.backgroundImage = "url(css/images/splash.jpg)";
 
-        if (backdropContainer.length) {
-            backdropContainer.css('backgroundImage', 'url(css/images/splash.jpg)');
-        } else {
-            $(document.body).prepend('<div class="backdropContainer" style="background-image:url(css/images/splash.jpg);top:0;"></div>');
-        }
-
-        $(page).addClass('backdropPage staticBackdropPage');
-    }
-
-    function clearBackdrop() {
-
-        $('.backdropContainer').css('backgroundImage', '');
+        page.classList.add('backdropPage');
+        page.classList.add('staticBackdropPage');
     }
 
     function isEnabledByDefault() {
@@ -122,16 +122,6 @@
             return false;
         }
 
-        // It flickers too much in IE
-        if ($.browser.msie) {
-
-            return false;
-        }
-
-        if ($.browser.android && AppInfo.isNativeApp) {
-            return true;
-        }
-
         if ($.browser.mobile) {
             return false;
         }
@@ -163,7 +153,7 @@
         });
 
         if (images.length) {
-            $(page).addClass('backdropPage');
+            page.classList.add('backdropPage');
 
             var index = getRandom(0, images.length - 1);
             var item = images[index];
@@ -180,42 +170,40 @@
             setBackdropImage(getElement(), imgUrl);
 
         } else {
-            $(page).removeClass('backdropPage');
+            page.classList.remove('backdropPage');
         }
     }
 
     function setBackdropUrl(page, url) {
 
         if (url) {
-            $(page).addClass('backdropPage');
+            page.classList.add('backdropPage');
 
             setBackdropImage(getElement(), url);
 
         } else {
-            $(page).removeClass('backdropPage');
+            page.classList.remove('backdropPage');
             clearBackdrop();
         }
     }
 
-    $(document).on('pagebeforeshowready', ".page", function () {
+    Events.on(document, 'pagebeforeshowready', ".page", function () {
 
         var page = this;
 
-        var $page = $(page);
+        if (!page.classList.contains('staticBackdropPage')) {
 
-        if (!$page.hasClass('staticBackdropPage')) {
-
-            if ($page.hasClass('backdropPage')) {
+            if (page.classList.contains('backdropPage')) {
 
                 if (enabled()) {
                     var type = page.getAttribute('data-backdroptype');
 
-                    var parentId = $page.hasClass('globalBackdropPage') ? '' : LibraryMenu.getTopParentId();
+                    var parentId = page.classList.contains('globalBackdropPage') ? '' : LibraryMenu.getTopParentId();
 
                     showBackdrop(type, parentId);
 
                 } else {
-                    $page.removeClass('backdropPage');
+                    page.classList.remove('backdropPage');
                     clearBackdrop();
                 }
             } else {

dashboard-ui/scripts/channelitems.js

@@ -31,11 +31,11 @@
 
     function showLoadingMessage(page) {
 
-        $('#popupDialog', page).popup('open');
+        Dashboard.showModalLoadingMsg();
     }
 
     function hideLoadingMessage(page) {
-        $('#popupDialog', page).popup('close');
+        Dashboard.hideModalLoadingMsg();
     }
 
     function reloadFeatures(page) {
@@ -124,7 +124,7 @@
         ApiClient.getJSON(ApiClient.getUrl("Channels/" + channelId + "/Items", query)).done(function (result) {
 
             // Scroll back up so they can see the results from the beginning
-            $(document).scrollTop(0);
+            window.scrollTo(0, 0);
 
             var html = '';
             var pagingHtml = LibraryBrowser.getQueryPagingHtml({
@@ -136,7 +136,7 @@
                 updatePageSizeSetting: false
             });
 
-            $('.listTopPaging', page).html(pagingHtml).trigger('create');
+            page.querySelector('.listTopPaging').innerHTML = pagingHtml;
 
             updateFilterControls(page);
 
@@ -152,9 +152,9 @@
                 centerText: true
             });
 
-            var elem = $('#items', page).html(html).lazyChildren();
-
-            $(pagingHtml).appendTo(elem).trigger('create');
+            var elem = page.querySelector('#items');
+            elem.innerHTML = html + pagingHtml;
+            ImageLoader.lazyChildren(elem);
 
             $('.btnNextPage', page).on('click', function () {
                 query.StartIndex += query.Limit;
@@ -256,7 +256,7 @@
             reloadItems(page);
         });
 
-    }).on('pageshowready', "#channelItemsPage", function () {
+    }).on('pagebeforeshowready', "#channelItemsPage", function () {
 
         var page = this;
         var limit = LibraryBrowser.getDefaultPageSize();

dashboard-ui/scripts/channels.js

@@ -15,7 +15,7 @@
         ApiClient.getJSON(ApiClient.getUrl("Channels", query)).done(function (result) {
 
             // Scroll back up so they can see the results from the beginning
-            $(document).scrollTop(0);
+            window.scrollTo(0, 0);
 
             var html = '';
 
@@ -49,7 +49,9 @@
                 });
             }
 
-            $('#items', page).html(html).lazyChildren();
+            var elem = page.querySelector('#items');
+            elem.innerHTML = html;
+            ImageLoader.lazyChildren(elem);
 
             LibraryBrowser.saveQueryValues('channels', query);
 
@@ -61,7 +63,7 @@
 
     }
 
-    $(document).on('pageshowready', "#channelsPage", function () {
+    $(document).on('pagebeforeshowready', "#channelsPage", function () {
 
         LibraryBrowser.loadSavedQueryValues('channels', query);
 

dashboard-ui/scripts/channelslatest.js

@@ -2,10 +2,10 @@
 
     function reloadItems(page) {
 
-        Sections.loadLatestChannelItems($(".items", page), Dashboard.getCurrentUserId());
+        Sections.loadLatestChannelItems(page.querySelector('.items'), Dashboard.getCurrentUserId());
     }
 
-    $(document).on('pageshowready', "#channelsLatestPage", function () {
+    $(document).on('pagebeforeshowready', "#channelsLatestPage", function () {
 
         reloadItems(this);
 

dashboard-ui/scripts/chromecast.js

@@ -82,7 +82,7 @@
           this.sessionListener.bind(this),
           this.receiverListener.bind(this));
 
-        console.log('chromecast.initialize');
+        Logger.log('chromecast.initialize');
 
         chrome.cast.initialize(apiConfig, this.onInitSuccess.bind(this), this.errorHandler);
 
@@ -93,14 +93,14 @@
      */
     CastPlayer.prototype.onInitSuccess = function () {
         this.isInitialized = true;
-        console.log("chromecast init success");
+        Logger.log("chromecast init success");
     };
 
     /**
      * Generic error callback function 
      */
     CastPlayer.prototype.onError = function () {
-        console.log("chromecast error");
+        Logger.log("chromecast error");
     };
 
     /**
@@ -115,7 +115,7 @@
         this.session = e;
         if (this.session) {
 
-            console.log('sessionListener ' + JSON.stringify(e));
+            Logger.log('sessionListener ' + JSON.stringify(e));
 
             if (this.session.media[0]) {
                 this.onMediaDiscovered('activeSession', this.session.media[0]);
@@ -152,7 +152,7 @@
 
         }
         else if (message.type && message.type.indexOf('playback') == 0) {
-            $(this).trigger(message.type, [message.data]);
+            Events.trigger(this, message.type, [message.data]);
 
         }
     };
@@ -165,11 +165,11 @@
     CastPlayer.prototype.receiverListener = function (e) {
 
         if (e === 'available') {
-            console.log("chromecast receiver found");
+            Logger.log("chromecast receiver found");
             this.hasReceivers = true;
         }
         else {
-            console.log("chromecast receiver list empty");
+            Logger.log("chromecast receiver list empty");
             this.hasReceivers = false;
         }
     };
@@ -179,7 +179,7 @@
      */
     CastPlayer.prototype.sessionUpdateListener = function (isAlive) {
 
-        console.log('sessionUpdateListener alive: ' + isAlive);
+        Logger.log('sessionUpdateListener alive: ' + isAlive);
 
         if (isAlive) {
         }
@@ -188,7 +188,7 @@
             this.deviceState = DEVICE_STATE.IDLE;
             this.castPlayerState = PLAYER_STATE.IDLE;
 
-            console.log('sessionUpdateListener: setting currentMediaSession to null');
+            Logger.log('sessionUpdateListener: setting currentMediaSession to null');
             this.currentMediaSession = null;
 
             MediaController.removeActivePlayer(PlayerName);
@@ -201,7 +201,7 @@
      * session request in opt_sessionRequest. 
      */
     CastPlayer.prototype.launchApp = function () {
-        console.log("chromecast launching app...");
+        Logger.log("chromecast launching app...");
         chrome.cast.requestSession(this.onRequestSessionSuccess.bind(this), this.onLaunchError.bind(this));
     };
 
@@ -211,7 +211,7 @@
      */
     CastPlayer.prototype.onRequestSessionSuccess = function (e) {
 
-        console.log("chromecast session success: " + e.sessionId);
+        Logger.log("chromecast session success: " + e.sessionId);
         this.onSessionConnected(e);
     };
 
@@ -225,7 +225,7 @@
         this.session.addMediaListener(this.sessionMediaListener.bind(this));
         this.session.addUpdateListener(this.sessionUpdateListener.bind(this));
 
-        $(this).trigger('connect');
+        Events.trigger(this, 'connect');
 
         this.sendMessage({
             options: {},
@@ -238,7 +238,7 @@
      */
     CastPlayer.prototype.sessionMediaListener = function (e) {
 
-        console.log('sessionMediaListener');
+        Logger.log('sessionMediaListener');
         this.currentMediaSession = e;
         this.currentMediaSession.addUpdateListener(this.mediaStatusUpdateHandler);
     };
@@ -247,7 +247,7 @@
      * Callback function for launch error
      */
     CastPlayer.prototype.onLaunchError = function () {
-        console.log("chromecast launch error");
+        Logger.log("chromecast launch error");
         this.deviceState = DEVICE_STATE.ERROR;
 
         //Dashboard.alert({
@@ -273,11 +273,11 @@
      * Callback function for stop app success 
      */
     CastPlayer.prototype.onStopAppSuccess = function (message) {
-        console.log(message);
+        Logger.log(message);
         this.deviceState = DEVICE_STATE.IDLE;
         this.castPlayerState = PLAYER_STATE.IDLE;
 
-        console.log('onStopAppSuccess: setting currentMediaSession to null');
+        Logger.log('onStopAppSuccess: setting currentMediaSession to null');
         this.currentMediaSession = null;
     };
 
@@ -288,7 +288,7 @@
     CastPlayer.prototype.loadMedia = function (options, command) {
 
         if (!this.session) {
-            console.log("no session");
+            Logger.log("no session");
             return;
         }
 
@@ -365,13 +365,13 @@
     CastPlayer.prototype.sendMessageInternal = function (message) {
 
         message = JSON.stringify(message);
-        //console.log(message);
+        //Logger.log(message);
 
         this.session.sendMessage(messageNamespace, message, this.onPlayCommandSuccess.bind(this), this.errorHandler);
     };
 
     CastPlayer.prototype.onPlayCommandSuccess = function () {
-        console.log('Message was sent to receiver ok.');
+        Logger.log('Message was sent to receiver ok.');
     };
 
     /**
@@ -380,7 +380,7 @@
      */
     CastPlayer.prototype.onMediaDiscovered = function (how, mediaSession) {
 
-        console.log("chromecast new media session ID:" + mediaSession.mediaSessionId + ' (' + how + ')');
+        Logger.log("chromecast new media session ID:" + mediaSession.mediaSessionId + ' (' + how + ')');
         this.currentMediaSession = mediaSession;
 
         if (how == 'loadMedia') {
@@ -403,7 +403,7 @@
         if (e == false) {
             this.castPlayerState = PLAYER_STATE.IDLE;
         }
-        console.log("chromecast updating media: " + e);
+        Logger.log("chromecast updating media: " + e);
     };
 
     /**
@@ -413,7 +413,7 @@
     CastPlayer.prototype.setReceiverVolume = function (mute, vol) {
 
         if (!this.currentMediaSession) {
-            console.log('this.currentMediaSession is null');
+            Logger.log('this.currentMediaSession is null');
             return;
         }
 
@@ -441,7 +441,7 @@
      * Callback function for media command success 
      */
     CastPlayer.prototype.mediaCommandSuccessCallback = function (info, e) {
-        console.log(info);
+        Logger.log(info);
     };
 
     // Create Cast Player
@@ -468,27 +468,27 @@
 
             MediaController.setActivePlayer(PlayerName, self.getCurrentTargetInfo());
 
-            console.log('cc: connect');
+            Logger.log('cc: connect');
             // Reset this so the next query doesn't make it appear like content is playing.
             self.lastPlayerData = {};
         });
 
         $(castPlayer).on("playbackstart", function (e, data) {
 
-            console.log('cc: playbackstart');
+            Logger.log('cc: playbackstart');
 
             castPlayer.initializeCastPlayer();
 
             var state = self.getPlayerStateInternal(data);
-            $(self).trigger("playbackstart", [state]);
+            Events.trigger(self, "playbackstart", [state]);
         });
 
         $(castPlayer).on("playbackstop", function (e, data) {
 
-            console.log('cc: playbackstop');
+            Logger.log('cc: playbackstop');
             var state = self.getPlayerStateInternal(data);
 
-            $(self).trigger("playbackstop", [state]);
+            Events.trigger(self, "playbackstop", [state]);
 
             // Reset this so the next query doesn't make it appear like content is playing.
             self.lastPlayerData = {};
@@ -496,10 +496,10 @@
 
         $(castPlayer).on("playbackprogress", function (e, data) {
 
-            console.log('cc: positionchange');
+            Logger.log('cc: positionchange');
             var state = self.getPlayerStateInternal(data);
 
-            $(self).trigger("positionchange", [state]);
+            Events.trigger(self, "positionchange", [state]);
         });
 
         self.play = function (options) {
@@ -789,7 +789,7 @@
             data = data || self.lastPlayerData;
             self.lastPlayerData = data;
 
-            console.log(JSON.stringify(data));
+            Logger.log(JSON.stringify(data));
             return data;
         };
 

dashboard-ui/scripts/connectlogin.js

@@ -100,16 +100,26 @@
             $('.connectLoginForm', page).hide();
             $('.welcomeContainer', page).show();
             $('.manualServerForm', page).hide();
+            $('.signupForm', page).hide();
         }
         else if (mode == 'connect') {
             $('.connectLoginForm', page).show();
             $('.welcomeContainer', page).hide();
             $('.manualServerForm', page).hide();
+            $('.signupForm', page).hide();
         }
         else if (mode == 'manualserver') {
             $('.manualServerForm', page).show();
             $('.connectLoginForm', page).hide();
             $('.welcomeContainer', page).hide();
+            $('.signupForm', page).hide();
+        }
+        else if (mode == 'signup') {
+            $('.manualServerForm', page).hide();
+            $('.connectLoginForm', page).hide();
+            $('.welcomeContainer', page).hide();
+            $('.signupForm', page).show();
+            initSignup(page);
         }
     }
 
@@ -134,6 +144,74 @@
         return false;
     }
 
+    function onSignupFormSubmit() {
+
+        if (!supportInAppSignup()) {
+            return false;
+        }
+
+        var page = $(this).parents('.page');
+
+        ConnectionManager.signupForConnect($('#txtSignupEmail', page).val(), $('#txtSignupUsername', page).val(), $('#txtSignupPassword', page).val(), $('#txtSignupPasswordConfirm', page).val()).done(function () {
+
+            Dashboard.alert({
+                message: Globalize.translate('MessageThankYouForConnectSignUp'),
+                callback: function () {
+                    Dashboard.navigate('connectlogin.html?mode=welcome');
+                }
+            });
+
+        }).fail(function (result) {
+
+            if (result.errorCode == 'passwordmatch') {
+                Dashboard.alert({
+                    message: Globalize.translate('ErrorMessagePasswordNotMatchConfirm')
+                });
+            }
+            else if (result.errorCode == 'USERNAME_IN_USE') {
+                Dashboard.alert({
+                    message: Globalize.translate('ErrorMessageUsernameInUse')
+                });
+            }
+            else if (result.errorCode == 'EMAIL_IN_USE') {
+                Dashboard.alert({
+                    message: Globalize.translate('ErrorMessageEmailInUse')
+                });
+            } else {
+                Dashboard.alert({
+                    message: Globalize.translate('DefaultErrorMessage')
+                });
+            }
+
+        });
+
+        return false;
+    }
+
+    function requireCaptcha() {
+        return !AppInfo.isNativeApp && getWindowUrl().toLowerCase().indexOf('https') == 0;
+    }
+
+    function supportInAppSignup() {
+        return AppInfo.isNativeApp;
+        return AppInfo.isNativeApp || getWindowUrl().toLowerCase().indexOf('https') == 0;
+    }
+
+    function initSignup(page) {
+
+        if (!supportInAppSignup()) {
+            return;
+        }
+
+        if (!requireCaptcha()) {
+            return;
+        }
+
+        require(['https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit'], function () {
+
+        });
+    }
+
     $(document).on('pageinitdepends', "#connectLoginPage", function () {
 
         var page = this;
@@ -144,21 +222,52 @@
 
         $('.connectLoginForm').off('submit', onSubmit).on('submit', onSubmit);
         $('.manualServerForm').off('submit', onManualServerSubmit).on('submit', onManualServerSubmit);
+        $('.signupForm').off('submit', onSignupFormSubmit).on('submit', onSignupFormSubmit);
 
-    }).on('pageshowready', "#connectLoginPage", function () {
+        $('.btnSignupForConnect', page).on('click', function () {
+
+            if (supportInAppSignup()) {
+                Dashboard.navigate('connectlogin.html?mode=signup');
+                return false;
+            }
+        });
+
+        $('.btnCancelSignup', page).on('click', function () {
+
+            history.back();
+        });
+
+        $('.btnCancelManualServer', page).on('click', function () {
+
+            history.back();
+        });
+
+        $('.btnWelcomeNext', page).on('click', function () {
+            Dashboard.navigate('connectlogin.html?mode=connect');
+        });
+
+    }).on('pagebeforeshowready', "#connectLoginPage", function () {
 
         var page = this;
 
-        loadPage(page);
-
-        var link = '<a href="http://emby.media" target="_blank">http://emby.media</a>';
-        $('.embyIntroDownloadMessage', page).html(Globalize.translate('EmbyIntroDownloadMessage', link));
+        $('#txtSignupEmail', page).val('');
+        $('#txtSignupUsername', page).val('');
+        $('#txtSignupPassword', page).val('');
+        $('#txtSignupPasswordConfirm', page).val('');
 
         if (AppInfo.isNativeApp) {
             $('.skip', page).show();
         } else {
             $('.skip', page).hide();
         }
+
+        var link = '<a href="http://emby.media" target="_blank">http://emby.media</a>';
+        $('.embyIntroDownloadMessage', page).html(Globalize.translate('EmbyIntroDownloadMessage', link));
+
+    }).on('pageshowready', "#connectLoginPage", function () {
+
+        var page = this;
+        loadPage(page);
     });
 
     function submitManualServer(page) {
@@ -177,7 +286,6 @@
             handleConnectionResult(page, result);
 
         }).fail(function () {
-
             handleConnectionResult(page, {
                 State: MediaBrowser.ConnectionState.Unavailable
             });

dashboard-ui/scripts/dashboardpage.js

@@ -73,7 +73,7 @@
         var list = DashboardPage.sessionsList;
 
         if (list) {
-            console.log('refreshSessionsLocally');
+            Logger.log('refreshSessionsLocally');
             DashboardPage.renderActiveConnections($.mobile.activePage, list);
         }
     },
@@ -93,11 +93,7 @@
                 $('#ports', page).html(Globalize.translate('LabelRunningOnPort', '<b>' + systemInfo.HttpServerPortNumber + '</b>'));
             }
 
-            if (systemInfo.CanSelfRestart) {
-                $('.btnRestartContainer', page).removeClass('hide');
-            } else {
-                $('.btnRestartContainer', page).addClass('hide');
-            }
+            $('.btnRestartContainer', page).visible(systemInfo.CanSelfRestart);
 
             DashboardPage.renderUrls(page, systemInfo);
             DashboardPage.renderPendingInstallations(page, systemInfo);
@@ -142,7 +138,13 @@
 
             var pagingHtml = '';
             pagingHtml += '<div>';
-            pagingHtml += LibraryBrowser.getPagingHtml(query, result.TotalRecordCount, false, [], false);
+            pagingHtml += LibraryBrowser.getQueryPagingHtml({
+                startIndex: query.StartIndex,
+                limit: query.Limit,
+                totalRecordCount: result.TotalRecordCount,
+                showLimit: false,
+                updatePageSizeSetting: false
+            });
             pagingHtml += '</div>';
 
             html = html.join('') + pagingHtml;
@@ -682,10 +684,6 @@
 
             return "<img src='css/images/clients/dlna.png' />";
         }
-        if (clientLowered == "mbkinect") {
-
-            return "<img src='css/images/clients/mbkinect.png' />";
-        }
         if (clientLowered == "kodi" || clientLowered == "xbmc") {
             return "<img src='css/images/clients/kodi.png' />";
         }
@@ -777,7 +775,7 @@
 
                 html += "<span style='color:#009F00;margin-left:5px;margin-right:5px;'>" + progress + "%</span>";
 
-                html += '<button type="button" data-icon="stop" data-iconpos="notext" data-inline="true" data-mini="true" onclick="DashboardPage.stopTask(\'' + task.Id + '\');">' + Globalize.translate('ButtonStop') + '</button>';
+                html += '<button type="button" data-icon="delete" data-iconpos="notext" data-inline="true" data-mini="true" onclick="DashboardPage.stopTask(\'' + task.Id + '\');">' + Globalize.translate('ButtonStop') + '</button>';
             }
             else if (task.State == "Cancelling") {
                 html += '<span style="color:#cc0000;">' + Globalize.translate('LabelStopping') + '</span>';
@@ -1011,7 +1009,7 @@
     }
 };
 
-$(document).on('pageshowready', "#dashboardPage", DashboardPage.onPageShow).on('pagehide', "#dashboardPage", DashboardPage.onPageHide);
+$(document).on('pageshowready', "#dashboardPage", DashboardPage.onPageShow).on('pagebeforehide', "#dashboardPage", DashboardPage.onPageHide);
 
 (function ($, document, window) {
 
@@ -1024,23 +1022,19 @@ $(document).on('pageshowready', "#dashboardPage", DashboardPage.onPageShow).on('
             showOverlayTimeout = null;
         }
 
-        $('.cardOverlayTarget:visible', this).each(function () {
+        var elem = this.querySelector('.cardOverlayTarget');
 
-            var elem = this;
-
-            $(this).animate({ "height": "0" }, "fast", function () {
-
-                $(elem).hide();
+        if ($(elem).is(':visible')) {
+            require(["jquery", "velocity"], function ($, Velocity) {
 
+                Velocity.animate(elem, { "height": "0" },
+                {
+                    complete: function () {
+                        $(elem).hide();
+                    }
+                });
             });
-
-        });
-
-        $('.cardOverlayTarget:visible', this).stop().animate({ "height": "0" }, function () {
-
-            $(this).hide();
-
-        });
+        }
     }
 
     $.fn.createSessionItemMenus = function () {
@@ -1084,8 +1078,7 @@ $(document).on('pageshowready', "#dashboardPage", DashboardPage.onPageShow).on('
             return this;
         }
 
-        return this.off('.sessionItemMenu').on('mouseenter.sessionItemMenu', '.playingSession', onHoverIn)
-            .on('mouseleave.sessionItemMenu', '.playingSession', onHoverOut);
+        return this.off('mouseenter', '.playingSession', onHoverIn).off('mouseleave', '.playingSession', onHoverOut).on('mouseenter', '.playingSession', onHoverIn).on('mouseleave', '.playingSession', onHoverOut);
     };
 
 })(jQuery, document, window);
@@ -1163,7 +1156,13 @@ $(document).on('pageshowready', "#dashboardPage", DashboardPage.onPageShow).on('
 
             var query = { StartIndex: startIndex, Limit: limit };
 
-            html += LibraryBrowser.getPagingHtml(query, result.TotalRecordCount, false, limit, false);
+            html += LibraryBrowser.getQueryPagingHtml({
+                startIndex: query.StartIndex,
+                limit: query.Limit,
+                totalRecordCount: result.TotalRecordCount,
+                showLimit: false,
+                updatePageSizeSetting: false
+            });
         }
 
         $(elem).html(html).trigger('create');
@@ -1221,7 +1220,8 @@ $(document).on('pageshowready', "#dashboardPage", DashboardPage.onPageShow).on('
         elem.each(function () {
 
             reloadData(this);
-        });
+
+        }).addClass('activityLogListWidget');
 
         var apiClient = ApiClient;
 
@@ -1229,21 +1229,7 @@ $(document).on('pageshowready', "#dashboardPage", DashboardPage.onPageShow).on('
             return;
         }
 
-        $(apiClient).on('websocketmessage.activityloglistener', function (e, data) {
-
-            var msg = data;
-
-            if (msg.MessageType === "ActivityLogEntry") {
-                elem.each(function () {
-
-                    reloadData(this);
-                });
-            }
-
-        }).on('websocketopen.activityloglistener', function (e, data) {
-
-            startListening(apiClient);
-        });
+        $(apiClient).on('websocketmessage', onSocketMessage).on('websocketopen', onSocketOpen);
     }
 
     function startListening(apiClient) {
@@ -1262,22 +1248,41 @@ $(document).on('pageshowready', "#dashboardPage", DashboardPage.onPageShow).on('
 
     }
 
+    function onSocketOpen() {
+        
+        var apiClient = ApiClient;
+        if (apiClient) {
+            startListening(apiClient);
+        }
+    }
+
+    function onSocketMessage(e, data) {
+
+        var msg = data;
+
+        if (msg.MessageType === "ActivityLogEntry") {
+            $('.activityLogListWidget').each(function () {
+
+                reloadData(this);
+            });
+        }
+    }
+
     function destroyList(elem) {
 
         var apiClient = ApiClient;
 
         if (apiClient) {
-            $(apiClient).off('websocketopen.activityloglistener').off('websocketmessage.activityloglistener');
+            $(apiClient).off('websocketopen', onSocketOpen).off('websocketmessage', onSocketOpen);
 
             stopListening(apiClient);
         }
-
-        return this;
     }
 
     $.fn.activityLogList = function (action) {
 
         if (action == 'destroy') {
+            this.removeClass('activityLogListWidget');
             destroyList(this);
         } else {
             createList(this);
@@ -1306,7 +1311,7 @@ $(document).on('pageshowready', "#dashboardPage", DashboardPage.onPageShow).on('
             result.CustomPrefs[welcomeTourKey] = welcomeDismissValue;
             ApiClient.updateDisplayPreferences('dashboard', result, userId, 'dashboard');
 
-            $(page).off('.checktour');
+            $(page).off('pageshowready', onPageShowReadyCheckTour);
         });
     }
 
@@ -1363,6 +1368,16 @@ $(document).on('pageshowready', "#dashboardPage", DashboardPage.onPageShow).on('
         });
     }
 
+    function onPageShowReadyCheckTour() {
+        var page = this;
+
+        var apiClient = ApiClient;
+
+        if (apiClient && !AppInfo.isNativeApp) {
+            showWelcomeIfNeeded(page, apiClient);
+        }
+    }
+
     $(document).on('pageinitdepends', "#dashboardPage", function () {
 
         var page = this;
@@ -1371,17 +1386,7 @@ $(document).on('pageshowready', "#dashboardPage", DashboardPage.onPageShow).on('
             takeTour(page, Dashboard.getCurrentUserId());
         });
 
-    }).on('pageshowready.checktour', "#dashboardPage", function () {
-
-        var page = this;
-
-        var apiClient = ApiClient;
-
-        if (apiClient && !AppInfo.isNativeApp) {
-            showWelcomeIfNeeded(page, apiClient);
-        }
-
-    });
+    }).on('pageshowready', "#dashboardPage", onPageShowReadyCheckTour);
 
 })(jQuery, document, window);
 

dashboard-ui/scripts/dlnaserversettings.js

@@ -39,7 +39,7 @@
         return false;
     }
 
-    $(document).on('pageinitpdepends', "#dlnaServerSettingsPage", function () {
+    $(document).on('pageinitdepends', "#dlnaServerSettingsPage", function () {
 
         $('.dlnaServerSettingsForm').off('submit', onSubmit).on('submit', onSubmit);
 

dashboard-ui/scripts/editcollectionitems.js

@@ -96,7 +96,7 @@
         }).done(function (result) {
 
             // Scroll back up so they can see the results from the beginning
-            $(document).scrollTop(0);
+            window.scrollTo(0, 0);
 
             var html = result.Items.map(getTitleHtml).join('');
 
@@ -285,17 +285,11 @@
 
         reload(page);
 
-        $("body").on("popupafteropen.collections", ".popupIdentify", function (e) {
-            $("#txtLookupName").focus().select();
-        });
-
-    }).on('pagehide', "#editCollectionTitlesPage", function () {
+    }).on('pagebeforehide', "#editCollectionTitlesPage", function () {
 
         var page = this;
 
         currentItem = null;
-
-        $("body").off("popupafteropen.collections");
     });
 
 })(jQuery, document, window, window.FileReader, escape);

dashboard-ui/scripts/edititemimages.js

@@ -416,7 +416,7 @@
         };
         reader.onabort = function () {
             Dashboard.hideLoadingMsg();
-            console.log('File read cancelled');
+            Logger.log('File read cancelled');
         };
 
         // Closure to capture the file information.
@@ -596,7 +596,7 @@
             return false;
         });
 
-    }).on('pagehide', "#editItemImagesPage", function () {
+    }).on('pagebeforehide', "#editItemImagesPage", function () {
 
         var page = this;
 

dashboard-ui/scripts/edititemmetadata.js

@@ -32,6 +32,7 @@
 
             if (item.Type == "UserRootFolder") {
                 $('.editPageInnerContent', page).hide();
+                Dashboard.hideLoadingMsg();
                 return;
             } else {
                 $('.editPageInnerContent', page).show();
@@ -808,9 +809,9 @@
 
     function getAlbumArtists(form) {
 
-        return $('#txtAlbumArtist', form).val().trim().split(';').filter(function(s){
+        return $('#txtAlbumArtist', form).val().trim().split(';').filter(function (s) {
 
-        	return s.length > 0;
+            return s.length > 0;
 
         }).map(function (a) {
 
@@ -822,9 +823,9 @@
 
     function getArtists(form) {
 
-        return $('#txtArtist', form).val().trim().split(';').filter(function(s){
+        return $('#txtArtist', form).val().trim().split(';').filter(function (s) {
 
-        	return s.length > 0;
+            return s.length > 0;
 
         }).map(function (a) {
 
@@ -1361,7 +1362,7 @@
 
                 var page = $.mobile.activePage;
 
-                console.log('Item updated - reloading metadata');
+                Logger.log('Item updated - reloading metadata');
                 reload(page);
                 $('#refreshLoading', page).hide();
             }
@@ -1378,7 +1379,19 @@
         $(ApiClient).off("websocketmessage", onWebSocketMessageReceived);
     }
 
-    $(document).on('pageinit', "#editItemMetadataPage", function () {
+    function onItemDeleted(e, itemId) {
+
+        if (currentItem && currentItem.Id == itemId) {
+
+            if (currentItem.ParentId) {
+                Dashboard.navigate('edititemmetadata.html?id=' + currentItem.ParentId);
+            } else {
+                Dashboard.navigate('edititemmetadata.html');
+            }
+        }
+    }
+
+    $(document).on('pageinitdepends', "#editItemMetadataPage", function () {
 
         var page = this;
 
@@ -1427,7 +1440,7 @@
 
                 //$.mobile.urlHistory.ignoreNextHashChange = true;
                 window.location.hash = 'editItemMetadataPage?id=' + data.id;
-
+                alert(window.location.href);
                 reload(page);
             }
         });
@@ -1437,28 +1450,24 @@
             editPerson(page, {});
         });
 
-    }).on('pagebeforeshow', "#editItemMetadataPage", function () {
+        $('.editItemMetadataForm').off('submit', EditItemMetadataPage.onSubmit).on('submit', EditItemMetadataPage.onSubmit);
+        $('.popupIdentifyForm').off('submit', EditItemMetadataPage.onIdentificationFormSubmitted).on('submit', EditItemMetadataPage.onIdentificationFormSubmitted);
+        $('.popupEditPersonForm').off('submit', EditItemMetadataPage.onPersonInfoFormSubmit).on('submit', EditItemMetadataPage.onPersonInfoFormSubmit);
+        $('.popupAdvancedRefreshForm').off('submit', EditItemMetadataPage.onRefreshFormSubmit).on('submit', EditItemMetadataPage.onRefreshFormSubmit);
+        $('.identifyOptionsForm').off('submit', EditItemMetadataPage.onIdentificationOptionsSubmit).on('submit', EditItemMetadataPage.onIdentificationOptionsSubmit);
+
+    }).on('pageshowready', "#editItemMetadataPage", function () {
 
         var page = this;
 
         reload(page);
 
-        $(LibraryBrowser).on('itemdeleting.editor', function (e, itemId) {
+        $(LibraryBrowser).on('itemdeleting', onItemDeleted);
 
-            if (currentItem && currentItem.Id == itemId) {
-
-                if (currentItem.ParentId) {
-                    Dashboard.navigate('edititemmetadata.html?id=' + currentItem.ParentId);
-                } else {
-                    Dashboard.navigate('edititemmetadata.html');
-                }
-            }
-        });
-
-    }).on('pagehide', "#editItemMetadataPage", function () {
+    }).on('pagebeforehide', "#editItemMetadataPage", function () {
 
         var page = this;
-        $(LibraryBrowser).off('itemdeleting.editor');
+        $(LibraryBrowser).off('itemdeleting', onItemDeleted);
 
         unbindItemChanged(page);
 

dashboard-ui/scripts/edititemsubtitles.js

@@ -289,7 +289,7 @@
 
             if (msg.Data.ItemsUpdated.indexOf(currentItem.Id) != -1) {
 
-                console.log('Item updated - reloading subtitles');
+                Logger.log('Item updated - reloading subtitles');
                 reload($.mobile.activePage);
             }
         }
@@ -326,7 +326,7 @@
 
         $('.subtitleSearchForm').off('submit', onSearchSubmit).on('submit', onSearchSubmit);
 
-    }).on('pagebeforeshowready', "#editItemSubtitlesPage", function () {
+    }).on('pageshowready', "#editItemSubtitlesPage", function () {
 
         var page = this;
 
@@ -343,7 +343,7 @@
 
         $(ApiClient).on("websocketmessage", onWebSocketMessageReceived);
 
-    }).on('pagehide', "#editItemSubtitlesPage", function () {
+    }).on('pagebeforehide', "#editItemSubtitlesPage", function () {
 
         var page = this;
 

dashboard-ui/scripts/editorsidebar.js

@@ -269,6 +269,53 @@
         });
     }
 
+    function onNodeSelect(event, data) {
+        var node = data.node;
+
+        var eventData = {
+            id: node.id,
+            itemType: node.li_attr.itemtype
+        };
+
+        if (eventData.itemType != 'livetv' && eventData.itemType != 'mediafolders') {
+            $(this).trigger('itemclicked', [eventData]);
+        }
+    }
+
+    function onNodeOpen(event, data) {
+
+        var page = $(this).parents('.page')[0];
+        var node = data.node;
+
+        if (node.children && node.children) {
+            loadNodesToLoad(page, node);
+        }
+
+        if (node.li_attr && node.id != '#' && !node.li_attr.loadedFromServer) {
+
+            node.li_attr.loadedFromServer = true;
+
+            $.jstree.reference(".libraryTree", page).load_node(node.id, loadNodeCallback);
+        }
+    }
+
+    function onNodeLoad(event, data) {
+
+        var page = $(this).parents('.page')[0];
+        var node = data.node;
+
+        if (node.children && node.children) {
+            loadNodesToLoad(page, node);
+        }
+
+        if (node.li_attr && node.id != '#' && !node.li_attr.loadedFromServer) {
+
+            node.li_attr.loadedFromServer = true;
+
+            $.jstree.reference(".libraryTree", page).load_node(node.id, loadNodeCallback);
+        }
+    }
+
     function initializeTreeInternal(page, currentUser, openItems, selectedId) {
 
         nodesToLoad = [];
@@ -293,50 +340,7 @@
                 }
             }
 
-        }).off('select_node.jstree').on('select_node.jstree', function (event, data) {
-
-            var node = data.node;
-
-            var eventData = {
-                id: node.id,
-                itemType: node.li_attr.itemtype
-            };
-
-            if (eventData.itemType != 'livetv' && eventData.itemType != 'mediafolders') {
-                $(this).trigger('itemclicked', [eventData]);
-            }
-
-        }).off('open_node.jstree').on('open_node.jstree', function (event, data) {
-
-            var node = data.node;
-
-            if (node.children && node.children) {
-                loadNodesToLoad(page, node);
-            }
-
-            if (node.li_attr && node.id != '#' && !node.li_attr.loadedFromServer) {
-
-                node.li_attr.loadedFromServer = true;
-
-                $.jstree.reference(".libraryTree", page).load_node(node.id, loadNodeCallback);
-            }
-
-        }).off('load_node.jstree').on('load_node.jstree', function (event, data) {
-
-            var node = data.node;
-
-            if (node.children && node.children) {
-                loadNodesToLoad(page, node);
-            }
-
-            if (node.li_attr && node.id != '#' && !node.li_attr.loadedFromServer) {
-
-                node.li_attr.loadedFromServer = true;
-
-                $.jstree.reference(".libraryTree", page).load_node(node.id, loadNodeCallback);
-            }
-
-        });
+        }).off('select_node.jstree', onNodeSelect).on('select_node.jstree', onNodeSelect).off('open_node.jstree', onNodeOpen).on('open_node.jstree', onNodeOpen).off('load_node.jstree', onNodeLoad).on('load_node.jstree', onNodeLoad);
     }
 
     function loadNodesToLoad(page, node) {
@@ -423,11 +427,15 @@
 
         });
 
+    }).on('pageinitdepends', ".metadataEditorPage", function () {
+
+        Dashboard.importCss('css/metadataeditor.css');
+
     }).on('pagebeforehide', ".metadataEditorPage", function () {
 
         var page = this;
 
-        $('.libraryTree', page).off('select_node.jstree');
+        $('.libraryTree', page).off('select_node.jstree', onNodeSelect).off('open_node.jstree', onNodeOpen).off('load_node.jstree', onNodeLoad);
 
     });
 
@@ -486,10 +494,10 @@
             var deferred = DeferredBuilder.Deferred();
 
             require([
-                'thirdparty/jstree3.0.8/jstree.min',
-                'css!thirdparty/jstree3.0.8/themes/default/style.min'
+                'thirdparty/jstree3.0.8/jstree.min'
             ], function () {
 
+                Dashboard.importCss('thirdparty/jstree3.0.8/themes/default/style.min.css');
                 deferred.resolve();
             });
             return deferred.promise();

dashboard-ui/scripts/episodes.js

@@ -29,7 +29,7 @@
         ApiClient.getItems(Dashboard.getCurrentUserId(), query).done(function (result) {
 
             // Scroll back up so they can see the results from the beginning
-            $(document).scrollTop(0);
+            window.scrollTo(0, 0);
 
             var html = '';
             var pagingHtml = LibraryBrowser.getQueryPagingHtml({
@@ -41,7 +41,7 @@
                 addSelectionButton: true
             });
 
-            $('.listTopPaging', page).html(pagingHtml).trigger('create');
+            page.querySelector('.listTopPaging').innerHTML = pagingHtml;
 
             updateFilterControls();
             var trigger = false;
@@ -80,14 +80,14 @@
                 });
             }
 
-            var elem = $('.itemsContainer', page).html(html).lazyChildren();
+            var elem = page.querySelector('.itemsContainer');
+            elem.innerHTML = html + pagingHtml;
+            ImageLoader.lazyChildren(elem);
 
             if (trigger) {
-                elem.trigger('create');
+                Events.trigger(elem, 'create');
             }
 
-            $(pagingHtml).appendTo(elem).trigger('create');
-
             $('.btnNextPage', page).on('click', function () {
                 query.StartIndex += query.Limit;
                 reloadItems(page);
@@ -321,7 +321,7 @@
             reloadItems(page);
         });
 
-    }).on('pageshowready', "#episodesPage", function () {
+    }).on('pagebeforeshowready', "#episodesPage", function () {
 
         var page = this;
         query.ParentId = LibraryMenu.getTopParentId();
@@ -356,7 +356,7 @@
         LibraryBrowser.getSavedViewSetting(viewkey).done(function (val) {
 
             if (val) {
-                $('#selectView', page).val(val).selectmenu('refresh').trigger('change');
+                Events.trigger($('#selectView', page).val(val).selectmenu('refresh')[0], 'change');
             } else {
                 reloadItems(page);
             }

dashboard-ui/scripts/extensions.js

@@ -312,7 +312,7 @@ function replaceQueryString(url, param, value) {
     var re = new RegExp("([?|&])" + param + "=.*?(&|$)", "i");
     if (url.match(re))
         return url.replace(re, '$1' + param + "=" + value + '$2');
-    else {
+    else if (value) {
 
         if (url.indexOf('?') == -1) {
             return url + '?' + param + "=" + value;
@@ -320,6 +320,8 @@ function replaceQueryString(url, param, value) {
 
         return url + '&' + param + "=" + value;
     }
+
+    return url;
 }
 
 function parseISO8601Date(s, options) {
@@ -567,7 +569,7 @@ function ticks_to_human(str) {
                             $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[1] - stop.coords[1]) > 100 &&
                                         Math.abs(start.coords[0] - stop.coords[0]) < 75) {
                                     start.origin
                                             .trigger("swipeupdown")
@@ -590,4 +592,13 @@ function ticks_to_human(str) {
         };
     });
 
-})();
+})();
+
+// This only exists because the polymer elements get distorted when using regular jquery show/hide
+$.fn.visible = function(visible) {
+
+    if (visible) {
+        return this.removeClass('hide');
+    }
+    return this.addClass('hide');
+};

dashboard-ui/scripts/externalplayer.js

@@ -1,4 +1,4 @@
-(function (window, store) {
+(function (window) {
 
     function getDeviceProfile(serverAddress, deviceId, item, startPositionTicks, maxBitrate, mediaSourceId, audioStreamIndex, subtitleStreamIndex) {
 
@@ -397,7 +397,7 @@
 
             $('.sliderValue', elem).html(tooltext);
 
-            console.log("slidin", pct, self.currentDurationTicks, time);
+            Logger.log("slidin", pct, self.currentDurationTicks, time);
 
         });
     }
@@ -484,4 +484,4 @@
         showPlayerSelectionMenu: showPlayerSelectionMenu
     };
 
-})(window, window.appStorage);
+})(window);

dashboard-ui/scripts/favorites.js

@@ -9,7 +9,6 @@
             { name: Globalize.translate('HeaderFavoriteGames'), types: "Game", id: "favoriteGames", shape: 'autohome', preferThumb: false, showTitle: true },
             { name: Globalize.translate('HeaderFavoriteAlbums'), types: "MusicAlbum", id: "favoriteAlbums", shape: 'square', preferThumb: false, showTitle: true, overlayText: false, showParentTitle: true }
         ];
-
     }
 
     function loadSection(elem, userId, section, isSingleSection) {
@@ -33,7 +32,7 @@
             options.Limit = null;
         }
 
-        ApiClient.getItems(userId, options).done(function (result) {
+        return ApiClient.getItems(userId, options).done(function (result) {
 
             var html = '';
 
@@ -52,24 +51,25 @@
                     showDetailsMenu: true
                 });
 
-                if (result.TotalRecordCount > result.Items.length) {
-                    html += '<div class="itemsContainer">';
-
-                    var href = "favorites.html?sectionid=" + section.id;
-
-                    html += '<a data-role="button" href="' + href + '" data-mini="true" data-inline="true">' + Globalize.translate('ButtonMoreItems') + '</a>';
-                    html += '</div>';
-                }
                 html += '</div>';
+
+                if (result.TotalRecordCount > result.Items.length) {
+                    var href = "homefavorites.html?sectionid=" + section.id;
+
+                    html += '<a class="clearLink" href="' + href + '"><paper-button raised class="more">' + Globalize.translate('ButtonMoreItems') + '</paper-button></a>';
+                }
             }
 
-            elem = $(elem).html(html).trigger('create').lazyChildren();
-            elem.createCardMenus();
+            elem.innerHTML = html;
+            ImageLoader.lazyChildren(elem);
+            $(elem).createCardMenus();
         });
     }
 
     function loadSections(page, userId) {
 
+        Dashboard.showLoadingMsg();
+
         var sections = getSections();
 
         var sectionid = getParameterByName('sectionid');
@@ -95,23 +95,33 @@
             elem.html(html);
         }
 
+        var promises = [];
+
         for (i = 0, length = sections.length; i < length; i++) {
 
             var section = sections[i];
 
-            elem = $('.section' + section.id, page);
+            elem = page.querySelector('.section' + section.id);
 
-            loadSection(elem, userId, section, sections.length == 1);
+            promises.push(loadSection(elem, userId, section, sections.length == 1));
         }
+
+        $.when(promises).done(function () {
+            Dashboard.hideLoadingMsg();
+
+            LibraryBrowser.setLastRefreshed(page);
+        });
     }
 
-    $(document).on('pageshowready', "#favoritesPage", function () {
+    $(document).on('pagebeforeshowready', "#favoritesPage", function () {
 
         var page = this;
 
         var userId = Dashboard.getCurrentUserId();
 
-        loadSections(page, userId);
+        if (LibraryBrowser.needsRefresh(page)) {
+            loadSections(page, userId);
+        }
     });
 
 })(jQuery, document);

dashboard-ui/scripts/gamegenrepage.js

@@ -22,7 +22,7 @@
         ApiClient.getGameGenres(Dashboard.getCurrentUserId(), query).done(function (result) {
 
             // Scroll back up so they can see the results from the beginning
-            $(document).scrollTop(0);
+            window.scrollTo(0, 0);
 
             var html = '';
 
@@ -46,7 +46,9 @@
                 lazy: true
             });
 
-            $('#items', page).html(html).lazyChildren();
+            var elem = page.querySelector('#items');
+            elem.innerHTML = html;
+            ImageLoader.lazyChildren(elem);
 
             $('.btnNextPage', page).on('click', function () {
                 query.StartIndex += query.Limit;
@@ -96,7 +98,7 @@
             reloadItems(page);
         });
 
-    }).on('pageshowready', "#gameGenresPage", function () {
+    }).on('pagebeforeshowready', "#gameGenresPage", function () {
 
         query.ParentId = LibraryMenu.getTopParentId();
 

dashboard-ui/scripts/gamespage.js

@@ -28,7 +28,7 @@
         ApiClient.getItems(Dashboard.getCurrentUserId(), query).done(function (result) {
 
             // Scroll back up so they can see the results from the beginning
-            $(document).scrollTop(0);
+            window.scrollTo(0, 0);
 
             var html = '';
 
@@ -73,10 +73,12 @@
                 });
             }
 
-            $('#items', page).html(html).lazyChildren();
+            var elem = page.querySelector('#items');
+            elem.innerHTML = html;
+            ImageLoader.lazyChildren(elem);
 
             if (trigger) {
-                $('#items', page).trigger('create');
+                $(elem).trigger('create');
             }
 
             $('.btnNextPage', page).on('click', function () {
@@ -239,7 +241,7 @@
             reloadItems(page);
         });
 
-    }).on('pageshowready', "#gamesPage", function () {
+    }).on('pagebeforeshowready', "#gamesPage", function () {
 
         var page = this;
         query.ParentId = LibraryMenu.getTopParentId();

dashboard-ui/scripts/gamesrecommendedpage.js

@@ -1,6 +1,6 @@
 (function ($, document) {
 
-    $(document).on('pageshowready', "#gamesRecommendedPage", function () {
+    $(document).on('pagebeforeshowready', "#gamesRecommendedPage", function () {
 
         var parentId = LibraryMenu.getTopParentId();
         var userId = Dashboard.getCurrentUserId();

dashboard-ui/scripts/gamestudiospage.js

@@ -23,7 +23,7 @@
         ApiClient.getStudios(Dashboard.getCurrentUserId(), query).done(function (result) {
 
             // Scroll back up so they can see the results from the beginning
-            $(document).scrollTop(0);
+            window.scrollTo(0, 0);
 
             var html = '';
 
@@ -33,7 +33,7 @@
                 totalRecordCount: result.TotalRecordCount,
                 viewButton: true,
                 showLimit: false
-            })).trigger('create');
+            }));
 
             updateFilterControls(page);
 
@@ -48,7 +48,9 @@
                 
             });
 
-            $('#items', page).html(html).lazyChildren();
+            var elem = page.querySelector('#items');
+            elem.innerHTML = html;
+            ImageLoader.lazyChildren(elem);
 
             $('.btnNextPage', page).on('click', function () {
                 query.StartIndex += query.Limit;
@@ -98,7 +100,7 @@
             reloadItems(page);
         });
 
-    }).on('pageshowready', "#gameStudiosPage", function () {
+    }).on('pagebeforeshowready', "#gameStudiosPage", function () {
 
         query.ParentId = LibraryMenu.getTopParentId();
 

dashboard-ui/scripts/gamesystemspage.js

@@ -25,7 +25,7 @@
         ApiClient.getItems(Dashboard.getCurrentUserId(), query).done(function (result) {
 
             // Scroll back up so they can see the results from the beginning
-            $(document).scrollTop(0);
+            window.scrollTo(0, 0);
 
             updateFilterControls(page);
 
@@ -39,7 +39,9 @@
 
             });
 
-            $('#items', page).html(html).lazyChildren();
+            var elem = page.querySelector('#items');
+            elem.innerHTML = html;
+            ImageLoader.lazyChildren(elem);
 
             LibraryBrowser.saveQueryValues(getSavedQueryKey(), query);
 
@@ -52,7 +54,7 @@
         // Reset form values using the last used query
     }
 
-    $(document).on('pageshowready', "#gamesystemsPage", function () {
+    $(document).on('pagebeforeshowready', "#gamesystemsPage", function () {
 
         query.ParentId = LibraryMenu.getTopParentId();
 

dashboard-ui/scripts/homelatest.js

@@ -1,44 +0,0 @@
-(function ($, document) {
-
-    function loadSections(page, user) {
-
-        var userId = user.Id;
-
-        var i, length;
-        var sectionCount = 3;
-
-        var elem = $('.sections', page);
-
-        if (!elem.html().length) {
-            var html = '';
-            for (i = 0, length = sectionCount; i < length; i++) {
-
-                html += '<div class="homePageSection section' + i + '"></div>';
-            }
-
-            elem.html(html);
-        }
-
-        var context = 'home-latest';
-
-        var latestMediElem = $('.section0', page);
-
-        Sections.loadRecentlyAdded(latestMediElem, user, context).done(function () {
-
-            $('h1', latestMediElem).addClass('firstListHeader');
-        });
-        Sections.loadLatestLiveTvRecordings($(".section1", page), userId);
-        Sections.loadLatestChannelItems($(".section2", page), userId);
-    }
-
-    $(document).on('pageshowready', "#homeLatestPage", function () {
-
-        var page = this;
-
-        Dashboard.getCurrentUser().done(function (user) {
-            loadSections(page, user);
-        });
-
-    });
-
-})(jQuery, document);

dashboard-ui/scripts/homenextup.js

@@ -0,0 +1,195 @@
+(function ($, document) {
+
+    function getView() {
+
+        return 'Thumb';
+    }
+
+    function getResumeView() {
+
+        return 'Poster';
+    }
+
+    function reload(page) {
+
+        Dashboard.showLoadingMsg();
+
+        var context = '';
+
+        if (LibraryMenu.getTopParentId()) {
+
+            $('.scopedLibraryViewNav', page).show();
+            $('.globalNav', page).hide();
+            $('.scopedContent', page).show();
+            context = 'tv';
+
+            loadResume(page);
+
+        } else {
+            $('.scopedLibraryViewNav', page).hide();
+            $('.globalNav', page).show();
+            $('.scopedContent', page).hide();
+        }
+
+        loadNextUp(page, context || 'home-nextup');
+    }
+
+    function loadNextUp(page, context) {
+
+        var limit = AppInfo.hasLowImageBandwidth ?
+         16 :
+         24;
+
+        var query = {
+
+            Limit: limit,
+            Fields: "PrimaryImageAspectRatio,SeriesInfo,DateCreated,SyncInfo",
+            UserId: Dashboard.getCurrentUserId(),
+            ExcludeLocationTypes: "Virtual",
+            ImageTypeLimit: 1,
+            EnableImageTypes: "Primary,Backdrop,Banner,Thumb"
+        };
+
+        query.ParentId = LibraryMenu.getTopParentId();
+
+        ApiClient.getNextUpEpisodes(query).done(function (result) {
+
+            if (result.Items.length) {
+                $('.noNextUpItems', page).hide();
+            } else {
+                $('.noNextUpItems', page).show();
+            }
+
+            var view = getView();
+            var html = '';
+
+            if (view == 'ThumbCard') {
+
+                html += LibraryBrowser.getPosterViewHtml({
+                    items: result.Items,
+                    shape: "backdrop",
+                    showTitle: true,
+                    preferThumb: true,
+                    showParentTitle: true,
+                    lazy: true,
+                    cardLayout: true,
+                    context: 'tv',
+                    showDetailsMenu: true
+                });
+
+            } else if (view == 'Thumb') {
+
+                html += LibraryBrowser.getPosterViewHtml({
+                    items: result.Items,
+                    shape: "backdrop",
+                    showTitle: true,
+                    showParentTitle: true,
+                    overlayText: false,
+                    context: context,
+                    lazy: true,
+                    preferThumb: true,
+                    showDetailsMenu: true
+                });
+            }
+
+            var elem = page.querySelector('#nextUpItems');
+            elem.innerHTML = html;
+            ImageLoader.lazyChildren(elem);
+            Dashboard.hideLoadingMsg();
+
+            LibraryBrowser.setLastRefreshed(page);
+        });
+    }
+
+    function enableScrollX() {
+        return $.browser.mobile && AppInfo.enableAppLayouts;
+    }
+
+    function getThumbShape() {
+        return enableScrollX() ? 'overflowBackdrop' : 'backdrop';
+    }
+
+    function loadResume(page) {
+
+        var parentId = LibraryMenu.getTopParentId();
+
+        var screenWidth = $(window).width();
+
+        var limit = 6;
+
+        var options = {
+
+            SortBy: "DatePlayed",
+            SortOrder: "Descending",
+            IncludeItemTypes: "Episode",
+            Filters: "IsResumable",
+            Limit: limit,
+            Recursive: true,
+            Fields: "PrimaryImageAspectRatio,SeriesInfo,UserData,SyncInfo",
+            ExcludeLocationTypes: "Virtual",
+            ParentId: parentId,
+            ImageTypeLimit: 1,
+            EnableImageTypes: "Primary,Backdrop,Banner,Thumb"
+        };
+
+        ApiClient.getItems(Dashboard.getCurrentUserId(), options).done(function (result) {
+
+            if (result.Items.length) {
+                $('#resumableSection', page).show();
+            } else {
+                $('#resumableSection', page).hide();
+            }
+
+            var view = getResumeView();
+            var html = '';
+
+            if (view == 'PosterCard') {
+
+                html += LibraryBrowser.getPosterViewHtml({
+                    items: result.Items,
+                    shape: getThumbShape(),
+                    showTitle: true,
+                    showParentTitle: true,
+                    lazy: true,
+                    cardLayout: true,
+                    context: 'tv',
+                    showDetailsMenu: true
+                });
+
+            } else if (view == 'Poster') {
+
+                html += LibraryBrowser.getPosterViewHtml({
+                    items: result.Items,
+                    shape: getThumbShape(),
+                    showTitle: true,
+                    showParentTitle: true,
+                    overlayText: screenWidth >= 800 && !AppInfo.hasLowImageBandwidth,
+                    lazy: true,
+                    context: 'tv',
+                    showDetailsMenu: true
+                });
+            }
+
+            var elem = page.querySelector('#resumableItems');
+            elem.innerHTML = html;
+            ImageLoader.lazyChildren(elem);
+        });
+    }
+
+    $(document).on('pagebeforeshowready', "#homeNextUpPage", function () {
+
+        var page = this;
+
+        if (enableScrollX()) {
+            page.querySelector('#resumableItems').classList.add('hiddenScrollX');
+        } else {
+            page.querySelector('#resumableItems').classList.remove('hiddenScrollX');
+        }
+
+        if (LibraryBrowser.needsRefresh(page)) {
+            reload(page);
+        }
+    });
+
+
+})(jQuery, document);

dashboard-ui/scripts/homeupcoming.js

@@ -0,0 +1,72 @@
+(function ($, document) {
+
+    function loadUpcoming(page) {
+        Dashboard.showLoadingMsg();
+
+        var limit = AppInfo.hasLowImageBandwidth ?
+         24 :
+         40;
+
+        var query = {
+
+            Limit: limit,
+            Fields: "AirTime,UserData,SeriesStudio,SyncInfo",
+            UserId: Dashboard.getCurrentUserId(),
+            ImageTypeLimit: 1,
+            EnableImageTypes: "Primary,Backdrop,Banner,Thumb"
+        };
+
+        query.ParentId = LibraryMenu.getTopParentId();
+
+        var context = '';
+
+        if (query.ParentId) {
+
+            context = 'tv';
+
+        }
+
+        ApiClient.getJSON(ApiClient.getUrl("Shows/Upcoming", query)).done(function (result) {
+
+            var items = result.Items;
+
+            if (items.length) {
+                page.querySelector('.noItemsMessage').style.display = 'none';
+            } else {
+                page.querySelector('.noItemsMessage').style.display = 'block';
+            }
+
+            var elem = page.querySelector('#upcomingItems');
+            elem.innerHTML = LibraryBrowser.getPosterViewHtml({
+                items: items,
+                showLocationTypeIndicator: false,
+                shape: "backdrop",
+                showTitle: true,
+                showPremiereDate: true,
+                showPremiereDateIndex: true,
+                preferThumb: true,
+                context: context || 'home-upcoming',
+                lazy: true,
+                showDetailsMenu: true
+
+            });
+
+            ImageLoader.lazyChildren(elem);
+
+            Dashboard.hideLoadingMsg();
+
+            LibraryBrowser.setLastRefreshed(page);
+        });
+    }
+
+    $(document).on('pagebeforeshowready', "#homeUpcomingPage", function () {
+
+        var page = this;
+
+        if (LibraryBrowser.needsRefresh(page)) {
+            loadUpcoming(page);
+        }
+    });
+
+
+})(jQuery, document);

dashboard-ui/scripts/htmlmediarenderer.js

@@ -1,5 +1,7 @@
 (function () {
 
+    var supportsTextTracks;
+
     function htmlMediaRenderer(type) {
 
         var mediaElement;
@@ -44,7 +46,7 @@
         function onError() {
 
             var errorCode = this.error ? this.error.code : '';
-            console.log('Media element error code: ' + errorCode);
+            Logger.log('Media element error code: ' + errorCode);
 
             $(self).trigger('error');
         }
@@ -126,8 +128,8 @@
 
             var elem = $('.itemVideo');
 
-            return $(elem)
-            	.one('.loadedmetadata')
+            return elem
+            	.one('.loadedmetadata', onLoadedMetadata)
             	.one('playing', onOneVideoPlaying)
 	            .on('timeupdate', onTimeUpdate)
 	            .on('ended', onEnded)
@@ -135,6 +137,8 @@
 	            .on('play', onPlay)
 	            .on('pause', onPause)
 	            .on('playing', onPlaying)
+	            .on('click', onClick)
+	            .on('dblclick', onDblClick)
 	            .on('error', onError)[0];
         }
 
@@ -142,11 +146,11 @@
 
             if (mediaElement) {
                 if (val != null) {
-                    mediaElement.currentTime = val;
+                    mediaElement.currentTime = val / 1000;
                     return;
                 }
 
-                return mediaElement.currentTime;
+                return (mediaElement.currentTime || 0) * 1000;
             }
         };
 
@@ -216,7 +220,7 @@
             }
             else {
 
-                $(elem).one("loadedmetadata.mediaplayerevent", onLoadedMetadata);
+                $(elem).one("loadedmetadata", onLoadedMetadata);
             }
         };
 
@@ -235,7 +239,7 @@
             return false;
         };
 
-        self.destroy = function () {
+        self.cleanup = function (destroyRenderer) {
 
             self.setCurrentSrc(null);
 
@@ -243,7 +247,31 @@
 
             if (elem) {
 
-                $(elem).off();
+                if (elem.tagName == 'AUDIO') {
+
+                    Events.off(elem, 'timeupdate', onTimeUpdate);
+                    Events.off(elem, 'ended', onEnded);
+                    Events.off(elem, 'volumechange', onVolumeChange);
+                    Events.off(elem, 'playing', onOneAudioPlaying);
+                    Events.off(elem, 'play', onPlay);
+                    Events.off(elem, 'pause', onPause);
+                    Events.off(elem, 'playing', onPlaying);
+                    Events.off(elem, 'error', onError);
+
+                } else {
+
+                    Events.off(elem, 'loadedmetadata', onLoadedMetadata);
+                    Events.off(elem, 'playing', onOneVideoPlaying);
+                    Events.off(elem, 'timeupdate', onTimeUpdate);
+                    Events.off(elem, 'ended', onEnded);
+                    Events.off(elem, 'volumechange', onVolumeChange);
+                    Events.off(elem, 'play', onPlay);
+                    Events.off(elem, 'pause', onPause);
+                    Events.off(elem, 'playing', onPlaying);
+                    Events.off(elem, 'click', onClick);
+                    Events.off(elem, 'dblclick', onDblClick);
+                    Events.off(elem, 'error', onError);
+                }
 
                 if (elem.tagName.toLowerCase() != 'audio') {
                     $(elem).remove();
@@ -259,6 +287,86 @@
             }
         };
 
+        self.supportsTextTracks = function () {
+
+            if (supportsTextTracks == null) {
+                supportsTextTracks = document.createElement('video').textTracks != null;
+            }
+
+            // For now, until ready
+            return supportsTextTracks;
+        };
+
+        self.setCurrentTrackElement = function (trackIndex) {
+
+            Logger.log('Setting new text track index to: ' + trackIndex);
+
+            var allTracks = mediaElement.textTracks; // get list of tracks
+
+            var modes = ['disabled', 'showing', 'hidden'];
+
+            for (var i = 0; i < allTracks.length; i++) {
+
+                var mode;
+
+                if (trackIndex == i) {
+                    mode = 1; // show this track
+                } else {
+                    mode = 0; // hide all other tracks
+                }
+
+                Logger.log('Setting track ' + i + ' mode to: ' + mode);
+
+                // Safari uses integers for the mode property
+                // http://www.jwplayer.com/html5/scripting/
+                var useNumericMode = false;
+
+                if (!isNaN(allTracks[i].mode)) {
+                    useNumericMode = true;
+                }
+
+                if (useNumericMode) {
+                    allTracks[i].mode = mode;
+                } else {
+                    allTracks[i].mode = modes[mode];
+                }
+            }
+        };
+
+        self.updateTextStreamUrls = function (startPositionTicks) {
+
+            if (!self.supportsTextTracks()) {
+                return;
+            }
+
+            var allTracks = mediaElement.textTracks; // get list of tracks
+
+            for (var i = 0; i < allTracks.length; i++) {
+
+                var track = allTracks[i];
+
+                // This throws an error in IE, but is fine in chrome
+                // In IE it's not necessary anyway because changing the src seems to be enough
+                try {
+                    while (track.cues.length) {
+                        track.removeCue(track.cues[0]);
+                    }
+                } catch (e) {
+                    Logger.log('Error removing cue from textTrack');
+                }
+            }
+
+            $('track', mediaElement).each(function () {
+
+                var currentSrc = this.src;
+
+                currentSrc = replaceQueryString(currentSrc, 'startPositionTicks', startPositionTicks);
+
+                this.src = currentSrc;
+
+            });
+        };
+
         if (type == 'audio') {
             mediaElement = createAudioElement();
         }

dashboard-ui/scripts/indexpage.js

@@ -1,466 +1,5 @@
 (function ($, document) {
 
-    function getUserViews(userId) {
-
-        var deferred = $.Deferred();
-
-        ApiClient.getUserViews(userId).done(function (result) {
-
-            var items = result.Items;
-
-            deferred.resolveWith(null, [items]);
-        });
-
-        return deferred.promise();
-    }
-
-    function enableScrollX() {
-        return $.browser.mobile && AppInfo.enableAppLayouts;
-    }
-
-    function getThumbShape() {
-        return enableScrollX() ? 'overflowBackdrop' : 'backdrop';
-    }
-
-    function getLibraryButtonsHtml(items) {
-
-        var html = "";
-
-        // "My Library" backgrounds
-        for (var i = 0, length = items.length; i < length; i++) {
-
-            var item = items[i];
-
-            var icon;
-            var backgroundColor = 'rgba(82, 181, 75, 0.9)';
-
-            switch (item.CollectionType) {
-                case "movies":
-                    icon = "fa-film";
-                    backgroundColor = 'rgba(176, 94, 81, 0.9)';
-                    break;
-                case "music":
-                    icon = "fa-music";
-                    backgroundColor = 'rgba(217, 145, 67, 0.9)';
-                    break;
-                case "photos":
-                    icon = "fa-photo";
-                    backgroundColor = 'rgba(127, 0, 0, 0.9)';
-                    break;
-                case "livetv":
-                    icon = "fa-video-camera";
-                    backgroundColor = 'rgba(217, 145, 67, 0.9)';
-                    break;
-                case "tvshows":
-                    icon = "fa-video-camera";
-                    backgroundColor = 'rgba(77, 88, 164, 0.9)';
-                    break;
-                case "games":
-                    icon = "fa-gamepad";
-                    backgroundColor = 'rgba(183, 202, 72, 0.9)';
-                    break;
-                case "trailers":
-                    icon = "fa-film";
-                    backgroundColor = 'rgba(176, 94, 81, 0.9)';
-                    break;
-                case "homevideos":
-                    icon = "fa-video-camera";
-                    backgroundColor = 'rgba(110, 52, 32, 0.9)';
-                    break;
-                case "musicvideos":
-                    icon = "fa-video-camera";
-                    backgroundColor = 'rgba(143, 54, 168, 0.9)';
-                    break;
-                case "books":
-                    icon = "fa-book";
-                    break;
-                case "channels":
-                    icon = "fa-globe";
-                    backgroundColor = 'rgba(51, 136, 204, 0.9)';
-                    break;
-                case "playlists":
-                    icon = "fa-list";
-                    break;
-                default:
-                    icon = "fa-folder-o";
-                    break;
-            }
-
-            var cssClass = 'card smallBackdropCard buttonCard';
-
-            if (item.CollectionType) {
-                cssClass += ' ' + item.CollectionType + 'buttonCard';
-            }
-
-            var href = item.url || LibraryBrowser.getHref(item);
-
-            html += '<a data-itemid="' + item.Id + '" class="' + cssClass + '" href="' + href + '">';
-            html += '<div class="cardBox" style="background-color:' + backgroundColor + ';margin:4px;border-radius:4px;">';
-
-            html += "<div class='cardText' style='padding:8px 10px;color:#fff;font-size:14px;'>";
-            html += '<i class="fa ' + icon + '"></i>';
-            html += '<span style="margin-left:.7em;">' + item.Name + '</span>';
-            html += "</div>";
-
-            html += "</div>";
-
-            html += "</a>";
-        }
-
-        return html;
-    }
-
-    function loadlibraryButtons(elem, userId, index) {
-
-        return getUserViews(userId).done(function (items) {
-
-            var html = '<br/>';
-
-            if (index) {
-                html += '<h1 class="listHeader">' + Globalize.translate('HeaderMyMedia') + '</h1>';
-            }
-            html += '<div>';
-            html += getLibraryButtonsHtml(items);
-            html += '</div>';
-
-            $(elem).html(html);
-
-            handleLibraryLinkNavigations(elem);
-        });
-    }
-
-    function loadRecentlyAdded(elem, user, context) {
-
-        var limit = AppInfo.hasLowImageBandwidth ?
-         16 :
-         24;
-
-        var options = {
-
-            Limit: limit,
-            Fields: "PrimaryImageAspectRatio,SyncInfo",
-            ImageTypeLimit: 1,
-            EnableImageTypes: "Primary,Backdrop,Banner,Thumb"
-        };
-
-        return ApiClient.getJSON(ApiClient.getUrl('Users/' + user.Id + '/Items/Latest', options)).done(function (items) {
-
-            var html = '';
-
-            var cardLayout = false;
-
-            if (items.length) {
-                html += '<div>';
-                html += '<h1 style="display:inline-block; vertical-align:middle;" class="listHeader">' + Globalize.translate('HeaderLatestMedia') + '</h1>';
-
-                if (user.Policy.EnableUserPreferenceAccess && !AppInfo.isNativeApp) {
-                    html += '<a href="mypreferencesdisplay.html" class="accentButton"><i class="fa fa-pencil"></i>' + Globalize.translate('ButtonEdit') + '</a>';
-                }
-
-                html += '</div>';
-
-                html += '<div class="itemsContainer">';
-
-                html += LibraryBrowser.getPosterViewHtml({
-                    items: items,
-                    preferThumb: true,
-                    shape: 'backdrop',
-                    context: context || 'home',
-                    showUnplayedIndicator: false,
-                    showChildCountIndicator: true,
-                    lazy: true,
-                    cardLayout: cardLayout,
-                    showTitle: cardLayout,
-                    showYear: cardLayout,
-                    showDetailsMenu: true
-                });
-                html += '</div>';
-            }
-
-            $(elem).html(html).lazyChildren().createCardMenus();
-        });
-    }
-
-    function loadLatestChannelMedia(elem, userId) {
-
-        var screenWidth = $(window).width();
-
-        var options = {
-
-            Limit: screenWidth >= 2400 ? 10 : (screenWidth >= 1600 ? 10 : (screenWidth >= 1440 ? 8 : (screenWidth >= 800 ? 7 : 6))),
-            Fields: "PrimaryImageAspectRatio,SyncInfo",
-            Filters: "IsUnplayed",
-            UserId: userId
-        };
-
-        return ApiClient.getJSON(ApiClient.getUrl("Channels/Items/Latest", options)).done(function (result) {
-
-            var html = '';
-
-            if (result.Items.length) {
-                html += '<h1 class="listHeader">' + Globalize.translate('HeaderLatestChannelMedia') + '</h1>';
-                html += '<div class="itemsContainer">';
-                html += LibraryBrowser.getPosterViewHtml({
-                    items: result.Items,
-                    preferThumb: true,
-                    shape: 'auto',
-                    showTitle: true,
-                    centerText: true,
-                    lazy: true,
-                    showDetailsMenu: true
-                });
-                html += '</div>';
-            }
-
-            $(elem).html(html).lazyChildren().createCardMenus();
-        });
-    }
-
-    function loadLibraryTiles(elem, user, shape, index, autoHideOnMobile, showTitles) {
-
-        return getUserViews(user.Id).done(function (items) {
-
-            var html = '';
-
-            if (autoHideOnMobile) {
-                html += '<div class="hiddenSectionOnMobile">';
-            } else {
-                html += '<div>';
-            }
-
-            if (items.length) {
-
-                var cssClass = index !== 0 ? 'listHeader' : 'listHeader firstListHeader';
-
-                html += '<div>';
-                html += '<h1 style="display:inline-block; vertical-align:middle;" class="' + cssClass + '">' + Globalize.translate('HeaderMyMedia') + '</h1>';
-
-                if (user.Policy.EnableUserPreferenceAccess && !AppInfo.isNativeApp) {
-                    html += '<a href="mypreferencesdisplay.html" class="accentButton"><i class="fa fa-pencil"></i>' + Globalize.translate('ButtonEdit') + '</a>';
-                }
-
-                html += '</div>';
-
-                html += '<div class="homeTopViews">';
-                html += LibraryBrowser.getPosterViewHtml({
-                    items: items,
-                    shape: shape,
-                    showTitle: showTitles,
-                    centerText: true,
-                    lazy: true,
-                    autoThumb: true
-                });
-                html += '</div>';
-            }
-
-            html += '</div>';
-
-            if (autoHideOnMobile) {
-                html += '<div class="hiddenSectionOnNonMobile" style="margin-top:1em;">';
-                html += getLibraryButtonsHtml(items);
-                html += '</div>';
-            }
-
-            $(elem).html(html).lazyChildren().createCardMenus({ showDetailsMenu: false });
-
-            handleLibraryLinkNavigations(elem);
-        });
-    }
-
-    function loadResume(elem, userId) {
-
-        var screenWidth = $(window).width();
-
-        var options = {
-
-            SortBy: "DatePlayed",
-            SortOrder: "Descending",
-            MediaTypes: "Video",
-            Filters: "IsResumable",
-            Limit: screenWidth >= 1920 ? 10 : (screenWidth >= 1600 ? 8 : (screenWidth >= 1200 ? 9 : 6)),
-            Recursive: true,
-            Fields: "PrimaryImageAspectRatio,SyncInfo",
-            CollapseBoxSetItems: false,
-            ExcludeLocationTypes: "Virtual",
-            ImageTypeLimit: 1,
-            EnableImageTypes: "Primary,Backdrop,Banner,Thumb"
-        };
-
-        return ApiClient.getItems(userId, options).done(function (result) {
-
-            var html = '';
-
-            var cardLayout = AppInfo.hasLowImageBandwidth;
-
-            if (result.Items.length) {
-                html += '<h1 class="listHeader">' + Globalize.translate('HeaderResume') + '</h1>';
-                if (enableScrollX()) {
-                    html += '<div class="hiddenScrollX itemsContainer">';
-                } else {
-                    html += '<div class="itemsContainer">';
-                }
-                html += LibraryBrowser.getPosterViewHtml({
-                    items: result.Items,
-                    preferThumb: true,
-                    shape: getThumbShape(),
-                    overlayText: screenWidth >= 800 && !cardLayout,
-                    showTitle: true,
-                    showParentTitle: true,
-                    context: 'home',
-                    lazy: true,
-                    cardLayout: cardLayout,
-                    showDetailsMenu: true
-                });
-                html += '</div>';
-            }
-
-            $(elem).html(html).lazyChildren().createCardMenus();
-        });
-    }
-
-    function handleLibraryLinkNavigations(elem) {
-
-        $('a.posterItem', elem).on('click', function () {
-
-            var textElem = $('.posterItemText span', this);
-
-            if (!textElem.length) {
-                textElem = $('.posterItemText', this);
-            }
-            var text = textElem.html();
-
-            LibraryMenu.setText(text);
-        });
-    }
-
-    function loadLatestChannelItems(elem, userId, options) {
-
-        options = $.extend(options || {}, {
-
-            UserId: userId,
-            SupportsLatestItems: true
-        });
-
-        return ApiClient.getJSON(ApiClient.getUrl("Channels", options)).done(function (result) {
-
-            var channels = result.Items;
-
-            var channelsHtml = channels.map(function (c) {
-
-                return '<div id="channel' + c.Id + '"></div>';
-
-            }).join('');
-
-            $(elem).html(channelsHtml);
-
-            for (var i = 0, length = channels.length; i < length; i++) {
-
-                var channel = channels[i];
-
-                loadLatestChannelItemsFromChannel(elem, channel, i);
-            }
-
-        });
-    }
-
-    function loadLatestChannelItemsFromChannel(page, channel, index) {
-
-        var screenWidth = $(window).width();
-
-        var options = {
-
-            Limit: screenWidth >= 1600 ? 10 : (screenWidth >= 1440 ? 5 : (screenWidth >= 800 ? 6 : 6)),
-            Fields: "PrimaryImageAspectRatio,SyncInfo",
-            Filters: "IsUnplayed",
-            UserId: Dashboard.getCurrentUserId(),
-            ChannelIds: channel.Id
-        };
-
-        ApiClient.getJSON(ApiClient.getUrl("Channels/Items/Latest", options)).done(function (result) {
-
-            var html = '';
-
-            if (result.Items.length) {
-
-                var cssClass = index !== 0 ? 'listHeader' : 'listHeader firstListHeader';
-
-                html += '<div>';
-                var text = Globalize.translate('HeaderLatestFromChannel').replace('{0}', channel.Name);
-                html += '<h1 style="display:inline-block; vertical-align:middle;" class="' + cssClass + '">' + text + '</h1>';
-                html += '<a href="channelitems.html?context=channels&id=' + channel.Id + '" data-role="button" data-icon="arrow-r" data-mini="true" data-inline="true" data-iconpos="notext" class="sectionHeaderButton"></a>';
-                html += '</div>';
-            }
-            html += '<div class="itemsContainer">';
-            html += LibraryBrowser.getPosterViewHtml({
-                items: result.Items,
-                shape: 'autohome',
-                defaultShape: 'square',
-                showTitle: true,
-                centerText: true,
-                context: 'channels',
-                lazy: true,
-                showDetailsMenu: true
-            });
-            html += '</div>';
-
-            $('#channel' + channel.Id + '', page).html(html).lazyChildren().trigger('create').createCardMenus();
-        });
-    }
-
-    function loadLatestLiveTvRecordings(elem, userId, index) {
-
-        return ApiClient.getLiveTvRecordings({
-
-            userId: userId,
-            limit: 5,
-            IsInProgress: false
-
-        }).done(function (result) {
-
-            var html = '';
-
-            if (result.Items.length) {
-
-                var cssClass = index !== 0 ? 'listHeader' : 'listHeader firstListHeader';
-
-                html += '<div>';
-                html += '<h1 style="display:inline-block; vertical-align:middle;" class="' + cssClass + '">' + Globalize.translate('HeaderLatestTvRecordings') + '</h1>';
-                html += '<a href="livetvrecordings.html?context=livetv" data-role="button" data-icon="arrow-r" data-mini="true" data-inline="true" data-iconpos="notext" class="sectionHeaderButton"></a>';
-                html += '</div>';
-            }
-
-            var screenWidth = $(window).width();
-
-            html += LibraryBrowser.getPosterViewHtml({
-                items: result.Items,
-                shape: "autohome",
-                showTitle: true,
-                showParentTitle: true,
-                overlayText: screenWidth >= 600,
-                coverImage: true,
-                lazy: true,
-                showDetailsMenu: true
-            });
-
-            elem.html(html).lazyChildren().trigger('create');
-
-        });
-    }
-
-    window.Sections = {
-        loadRecentlyAdded: loadRecentlyAdded,
-        loadLatestChannelMedia: loadLatestChannelMedia,
-        loadLibraryTiles: loadLibraryTiles,
-        loadResume: loadResume,
-        loadLatestChannelItems: loadLatestChannelItems,
-        loadLatestLiveTvRecordings: loadLatestLiveTvRecordings,
-        loadlibraryButtons: loadlibraryButtons
-    };
-
-})(jQuery, document);
-
-(function ($, document) {
-
     var defaultFirstSection = 'smalllibrarytiles';
 
     function getDefaultSection(index) {
@@ -474,7 +13,7 @@
             case 2:
                 return 'latestmedia';
             case 3:
-                return '';
+                return 'latesttvrecordings';
             default:
                 return '';
         }
@@ -493,7 +32,7 @@
 
         var showLibraryTileNames = displayPreferences.CustomPrefs.enableLibraryTileNames != '0';
 
-        var elem = $('.section' + index, page);
+        var elem = page.querySelector('.section' + index);
 
         if (section == 'latestmedia') {
             return Sections.loadRecentlyAdded(elem, user);
@@ -538,16 +77,16 @@
         var i, length;
         var sectionCount = 4;
 
-        var elem = $('.sections', page);
+        var elem = page.querySelector('.sections');
 
-        if (!elem.html().length) {
+        if (!elem.innerHTML.length) {
             var html = '';
             for (i = 0, length = sectionCount; i < length; i++) {
 
                 html += '<div class="homePageSection section' + i + '"></div>';
             }
 
-            elem.html(html);
+            elem.innerHTML = html;
         }
 
         var promises = [];
@@ -578,6 +117,8 @@
             $('.welcomeMessage', page).hide();
         } else {
 
+            Dashboard.hideLoadingMsg();
+
             var elem = $('.welcomeMessage', page).show();
 
             if (displayPreferences.CustomPrefs[homePageTourKey]) {
@@ -627,32 +168,38 @@
 
         var page = this;
 
-        $('.btnTakeTour', page).on('click', function () {
+        Events.on(page.querySelector('.btnTakeTour'), 'click', function () {
             takeTour(page, Dashboard.getCurrentUserId());
         });
 
-    }).on('pageshowready', "#indexPage", function () {
+    }).on('pagebeforeshowready', "#indexPage", function () {
 
         var page = this;
 
-        if (window.ApiClient) {
-            var userId = Dashboard.getCurrentUserId();
+        if (LibraryBrowser.needsRefresh(page)) {
+            if (window.ApiClient) {
+                var userId = Dashboard.getCurrentUserId();
 
-            getDisplayPreferences('home', userId).done(function (result) {
+                Dashboard.showLoadingMsg();
 
-                Dashboard.getCurrentUser().done(function (user) {
+                getDisplayPreferences('home', userId).done(function (result) {
 
-                    loadSections(page, user, result).done(function () {
+                    Dashboard.getCurrentUser().done(function (user) {
+
+                        loadSections(page, user, result).done(function () {
+
+                            if (!AppInfo.isNativeApp) {
+                                showWelcomeIfNeeded(page, result);
+                            }
+                            Dashboard.hideLoadingMsg();
+
+                            LibraryBrowser.setLastRefreshed(page);
+                        });
 
-                        if (!AppInfo.isNativeApp) {
-                            showWelcomeIfNeeded(page, result);
-                        }
                     });
-
                 });
-            });
+            }
         }
-
     });
 
     function getDisplayPreferencesAppName() {

dashboard-ui/scripts/itembynamedetailpage.js

@@ -77,9 +77,9 @@
             Dashboard.getCurrentUser().done(function (user) {
 
                 if (MediaController.canPlay(item)) {
-                    $('.btnPlay', page).show();
+                    $('.btnPlay', page).visible(true);
                 } else {
-                    $('.btnPlay', page).hide();
+                    $('.btnPlay', page).visible(false);
                 }
 
                 if (SyncManager.isAvailable(item, user)) {
@@ -93,9 +93,9 @@
                 $('#itemImage', page).html(LibraryBrowser.getDetailImageHtml(item, editImagesHref, true));
 
                 if (LibraryBrowser.getMoreCommands(item, user).length) {
-                    $('.btnMoreCommands', page).show();
+                    $('.btnMoreCommands', page).visible(true);
                 } else {
-                    $('.btnMoreCommands', page).show();
+                    $('.btnMoreCommands', page).visible(false);
                 }
 
             });
@@ -315,10 +315,10 @@
     function renderDetails(page, item, context) {
 
         //LibraryBrowser.renderDetailPageBackdrop(page, item);
-        LibraryBrowser.renderOverview($('.itemOverview', page), item);
+        LibraryBrowser.renderOverview(page.querySelector('.itemOverview'), item);
 
         renderUserDataIcons(page, item);
-        LibraryBrowser.renderLinks($('#itemLinks', page), item);
+        LibraryBrowser.renderLinks(page.querySelector('#itemLinks'), item);
 
         LibraryBrowser.renderGenres($('.itemGenres', page), item, context);
 
@@ -439,7 +439,17 @@
             var html = '';
 
             if (result.TotalRecordCount > query.Limit) {
-                $('.listTopPaging', page).html(LibraryBrowser.getPagingHtml(query, result.TotalRecordCount, true)).trigger('create');
+
+                var pagingHtml = LibraryBrowser.getQueryPagingHtml({
+                    startIndex: query.StartIndex,
+                    limit: query.Limit,
+                    totalRecordCount: result.TotalRecordCount,
+                    showLimit: false,
+                    updatePageSizeSetting: false
+                });
+
+                page.querySelector('.listTopPaging').innerHTML = pagingHtml;
+
                 $('.viewSettings', page).show();
             } else {
                 $('.listTopPaging', page).html('');
@@ -509,9 +519,20 @@
                 });
             }
 
-            html += LibraryBrowser.getPagingHtml(query, result.TotalRecordCount);
+            html += LibraryBrowser.getQueryPagingHtml({
+                startIndex: query.StartIndex,
+                limit: query.Limit,
+                totalRecordCount: result.TotalRecordCount,
+                showLimit: false,
+                updatePageSizeSetting: false
+            });
 
-            $('#items', page).html(html).trigger('create').lazyChildren();
+            var elem = page.querySelector('#items');
+            elem.innerHTML = html;
+            ImageLoader.lazyChildren(elem);
+
+            // Do we still need this?
+            $(elem).trigger('create');
 
             $('.btnNextPage', page).on('click', function () {
 
@@ -571,13 +592,13 @@
             });
         });
 
-    }).on('pageshowready', "#itemByNameDetailPage", function () {
+    }).on('pagebeforeshowready', "#itemByNameDetailPage", function () {
 
         var page = this;
 
         reload(page);
 
-    }).on('pagehide', "#itemByNameDetailPage", function () {
+    }).on('pagebeforehide', "#itemByNameDetailPage", function () {
 
         currentItem = null;
     });

dashboard-ui/scripts/itemdetailpage.js

@@ -2,22 +2,6 @@
 
     var currentItem;
 
-    function getExternalPlayUrl(item) {
-
-        var providerIds = item.ProviderIds || {};
-        if (item.GameSystem == "Nintendo" && item.MediaType == "Game" && providerIds.NesBox && providerIds.NesBoxRom) {
-
-            return "http://nesbox.com/game/" + providerIds.NesBox + '/rom/' + providerIds.NesBoxRom;
-        }
-
-        if (item.GameSystem == "Super Nintendo" && item.MediaType == "Game" && providerIds.NesBox && providerIds.NesBoxRom) {
-
-            return "http://snesbox.com/game/" + providerIds.NesBox + '/rom/' + providerIds.NesBoxRom;
-        }
-
-        return null;
-    }
-
     function reload(page) {
 
         var id = getParameterByName('id');
@@ -49,20 +33,11 @@
             renderDetails(page, item, context);
             LibraryBrowser.renderDetailPageBackdrop(page, item);
 
-            var externalPlayUrl = getExternalPlayUrl(item);
-            $('.btnPlayExternal', page).attr('href', externalPlayUrl || '#');
-
-            if (externalPlayUrl) {
-                $('.btnPlayExternal', page).removeClass('hide');
-                $('.btnPlay', page).addClass('hide');
-            }
-            else if (MediaController.canPlay(item)) {
+            if (MediaController.canPlay(item)) {
                 $('.btnPlay', page).removeClass('hide');
-                $('.btnPlayExternal', page).addClass('hide');
             }
             else {
                 $('.btnPlay', page).addClass('hide');
-                $('.btnPlayExternal', page).addClass('hide');
             }
 
             if (item.LocalTrailerCount && item.PlayAccess == 'Full') {
@@ -96,11 +71,7 @@
                 $('.splitVersionContainer', page).hide();
             }
 
-            if (LibraryBrowser.getMoreCommands(item, user).length) {
-                $('.btnMoreCommands', page).show();
-            } else {
-                $('.btnMoreCommands', page).show();
-            }
+            $('.btnMoreCommands', page).visible(LibraryBrowser.getMoreCommands(item, user).length > 0);
 
             if (user.Policy.IsAdministrator) {
                 $('.chapterSettingsButton', page).show();
@@ -152,13 +123,13 @@
 
         var imageHref = user.Policy.IsAdministrator && item.MediaType != 'Photo' ? "edititemimages.html?id=" + item.Id : "";
 
-        LibraryBrowser.renderDetailImage($('.detailImageContainer', page), item, imageHref);
+        LibraryBrowser.renderDetailImage(page.querySelector('.detailImageContainer'), item, imageHref);
     }
 
     function onWebSocketMessage(e, data) {
 
         var msg = data;
-        var page = $.mobile.activePage;
+        var page = $($.mobile.activePage)[0];
 
         if (msg.MessageType === "UserDataChanged") {
 
@@ -252,12 +223,10 @@
         else if (context == 'home-latest') {
             elem = $('.homeTabs', page).show();
             $('a', elem).removeClass('ui-btn-active');
-            $('.lnkHomeLatest', page).addClass('ui-btn-active');
         }
         else if (context == 'photos' || context == 'photos-photos') {
             elem = $('.photoTabs', page).show();
             $('a', elem).removeClass('ui-btn-active');
-            $('.lnkHomeLatest', page).addClass('ui-btn-active');
 
             if (context == 'photos-photos') {
                 $('.lnkPhotos', page).addClass('ui-btn-active');
@@ -393,7 +362,7 @@
             $('#itemTagline', page).hide();
         }
 
-        LibraryBrowser.renderOverview($('.itemOverview', page), item);
+        LibraryBrowser.renderOverview(page.querySelector('.itemOverview'), item);
 
         $('.itemCommunityRating', page).html(LibraryBrowser.getRatingHtml(item));
 
@@ -406,7 +375,7 @@
         LibraryBrowser.renderGenres($('.itemGenres', page), item, context);
         LibraryBrowser.renderStudios($('.itemStudios', page), item, context);
         renderUserDataIcons(page, item);
-        LibraryBrowser.renderLinks($('.itemExternalLinks', page), item);
+        LibraryBrowser.renderLinks(page.querySelector('.itemExternalLinks'), item);
 
         $('.criticRatingScore', page).html((item.CriticRating || '0') + '%');
 
@@ -883,10 +852,12 @@
                 });
             }
 
-            var elem = $('.childrenItemsContainer', page).html(html).lazyChildren();
+            var elem = page.querySelector('.childrenItemsContainer');
+            elem.innerHTML = html;
+            ImageLoader.lazyChildren(elem);
 
             if (trigger) {
-                elem.trigger('create');
+                $(elem).trigger('create');
             }
 
             if (item.Type == "BoxSet") {
@@ -904,19 +875,19 @@
         });
 
         if (item.Type == "Season") {
-            $('#childrenTitle', page).html(Globalize.translate('HeaderEpisodes'));
+            page.querySelector('#childrenTitle').innerHTML = Globalize.translate('HeaderEpisodes');
         }
         else if (item.Type == "Series") {
-            $('#childrenTitle', page).html(Globalize.translate('HeaderSeasons'));
+            page.querySelector('#childrenTitle').innerHTML = Globalize.translate('HeaderSeasons');
         }
         else if (item.Type == "MusicAlbum") {
-            $('#childrenTitle', page).html(Globalize.translate('HeaderTracks'));
+            page.querySelector('#childrenTitle').innerHTML = Globalize.translate('HeaderTracks');
         }
         else if (item.Type == "GameSystem") {
-            $('#childrenTitle', page).html(Globalize.translate('HeaderGames'));
+            page.querySelector('#childrenTitle').innerHTML = Globalize.translate('HeaderGames');
         }
         else {
-            $('#childrenTitle', page).html(Globalize.translate('HeaderItems'));
+            page.querySelector('#childrenTitle').innerHTML = Globalize.translate('HeaderItems');
         }
     }
 
@@ -992,7 +963,9 @@
 
         html += '</div>';
 
-        $('.collectionItems', page).append(html).lazyChildren();
+        var collectionItems = page.querySelector('.collectionItems');
+        $(collectionItems).append(html);
+        ImageLoader.lazyChildren(collectionItems);
     }
 
     function renderUserDataIcons(page, item) {
@@ -1090,10 +1063,11 @@
         }
 
         if (limit && result.TotalRecordCount > limit) {
-            html += '<p style="margin: 0;padding-left: .5em;"><button class="moreCriticReviews" data-inline="true" data-mini="true">' + Globalize.translate('ButtonMoreItems') + '</button></p>';
+            html += '<p style="margin: 0;"><paper-button raised class="more moreCriticReviews">' + Globalize.translate('ButtonMoreItems') + '</paper-button></p>';
         }
 
-        $('#criticReviewsContent', page).html(html).trigger('create');
+        var criticReviewsContent = page.querySelector('#criticReviewsContent');
+        criticReviewsContent.innerHTML = html;
     }
 
     function renderThemeMedia(page, item) {
@@ -1248,10 +1222,12 @@
         }
 
         if (limit && chapters.length > limit) {
-            html += '<p style="margin: 0;padding-left: .5em;"><button class="moreScenes" data-inline="true" data-mini="true">' + Globalize.translate('ButtonMoreItems') + '</button></p>';
+            html += '<p style="margin: 0;"><paper-button raised class="more moreScenes">' + Globalize.translate('ButtonMoreItems') + '</paper-button></p>';
         }
 
-        $('#scenesContent', page).html(html).trigger('create').lazyChildren();
+        var scenesContent = page.querySelector('#scenesContent');
+        scenesContent.innerHTML = html;
+        ImageLoader.lazyChildren(scenesContent);
     }
 
     function renderMediaSources(page, item) {
@@ -1266,7 +1242,8 @@
             html = '<br/>' + html;
         }
 
-        $('#mediaInfoContent', page).html(html).trigger('create');
+        var mediaInfoContent = page.querySelector('#mediaInfoContent');
+        mediaInfoContent.innerHTML = html;
     }
 
     function getMediaSourceHtml(item, version) {
@@ -1480,7 +1457,7 @@
         }
 
         if (limit && items.length > limit) {
-            html += '<p style="margin: 0;padding-left: .5em;"><button class="' + moreButtonClass + '" data-inline="true" data-mini="true">' + Globalize.translate('ButtonMoreItems') + '</button></p>';
+            html += '<p style="margin: 0;padding-left:5px;"><paper-button raised class="more ' + moreButtonClass + '">' + Globalize.translate('ButtonMoreItems') + '</paper-button></p>';
         }
 
         return html;
@@ -1490,7 +1467,9 @@
 
         ApiClient.getSpecialFeatures(user.Id, item.Id).done(function (specials) {
 
-            $('#specialsContent', page).html(getVideosHtml(specials, user, limit, "moreSpecials")).lazyChildren().trigger('create');
+            var specialsContent = page.querySelector('#specialsContent');
+            specialsContent.innerHTML = getVideosHtml(specials, user, limit, "moreSpecials");
+            ImageLoader.lazyChildren(specialsContent);
 
         });
     }
@@ -1557,10 +1536,12 @@
         }
 
         if (limit && casts.length > limit) {
-            html += '<p style="margin: 0;padding-left: .5em;"><button class="morePeople" data-inline="true" data-mini="true">' + Globalize.translate('ButtonMoreItems') + '</button></p>';
+            html += '<p style="margin: 0;padding-left:5px;"><paper-button raised class="more morePeople">' + Globalize.translate('ButtonMoreItems') + '</paper-button></p>';
         }
 
-        $('#castContent', page).html(html).lazyChildren().trigger('create');
+        var castContent = page.querySelector('#castContent');
+        castContent.innerHTML = html;
+        ImageLoader.lazyChildren(castContent);
     }
 
     function play(startPosition) {
@@ -1604,7 +1585,13 @@
         });
     }
 
-    $(document).on('pageinit', "#itemDetailPage", function () {
+    function onItemDeleted(e, itemId) {
+        if (currentItem && currentItem.Id == itemId) {
+            Dashboard.navigate('index.html');
+        }
+    }
+
+    $(document).on('pageinitdepends', "#itemDetailPage", function () {
 
         var page = this;
 
@@ -1624,11 +1611,6 @@
             playTrailer(page);
         });
 
-        $('.btnPlayExternal', page).on('click', function () {
-
-            ApiClient.markPlayed(Dashboard.getCurrentUserId(), currentItem.Id, new Date());
-        });
-
         $('.btnSplitVersions', page).on('click', function () {
 
             splitVersions(page);
@@ -1661,54 +1643,47 @@
 
         });
 
-    }).on('pageshow', "#itemDetailPage", function () {
-
-        var page = this;
-
-        $(page).on("click.moreScenes", ".moreScenes", function () {
+        $(page).on("click", ".moreScenes", function () {
 
             Dashboard.getCurrentUser().done(function (user) {
                 renderScenes(page, currentItem, user);
             });
 
-        }).on("click.morePeople", ".morePeople", function () {
+        }).on("click", ".morePeople", function () {
 
             renderCast(page, currentItem, getContext(currentItem));
 
-        }).on("click.moreSpecials", ".moreSpecials", function () {
+        }).on("click", ".moreSpecials", function () {
 
             Dashboard.getCurrentUser().done(function (user) {
                 renderSpecials(page, currentItem, user);
             });
 
-        }).on("click.moreCriticReviews", ".moreCriticReviews", function () {
+        }).on("click", ".moreCriticReviews", function () {
 
             renderCriticReviews(page, currentItem);
 
         });
 
+    }).on('pagebeforeshowready', "#itemDetailPage", function () {
+
+        var page = this;
+
         reload(page);
 
-        $(ApiClient).on('websocketmessage', onWebSocketMessage);
+        Events.on(ApiClient, 'websocketmessage', onWebSocketMessage);
 
-        $(LibraryBrowser).on('itemdeleting.detailpage', function (e, itemId) {
+        Events.on(LibraryBrowser, 'itemdeleting', onItemDeleted);
 
-            if (currentItem && currentItem.Id == itemId) {
-                Dashboard.navigate('index.html');
-            }
-        });
+    }).on('pagebeforehide', "#itemDetailPage", function () {
 
-    }).on('pagehide', "#itemDetailPage", function () {
-
-        $(LibraryBrowser).off('itemdeleting.detailpage');
+        Events.off(LibraryBrowser, 'itemdeleting', onItemDeleted);
 
         currentItem = null;
 
         var page = this;
 
-        $(page).off("click.moreScenes").off("click.morePeople").off("click.moreSpecials").off("click.moreCriticReviews");
-
-        $(ApiClient).off('websocketmessage', onWebSocketMessage);
+        Events.off(ApiClient, 'websocketmessage', onWebSocketMessage);
     });
 
     function itemDetailPage() {
@@ -1720,5 +1695,4 @@
 
     window.ItemDetailPage = new itemDetailPage();
 
-
 })(jQuery, document, LibraryBrowser, window);

dashboard-ui/scripts/itemlistpage.js

@@ -34,7 +34,7 @@
             var result = r2[0];
 
             // Scroll back up so they can see the results from the beginning
-            $(document).scrollTop(0);
+            window.scrollTo(0, 0);
 
             var html = '';
             var pagingHtml = LibraryBrowser.getQueryPagingHtml({
@@ -45,7 +45,7 @@
                 showLimit: false
             });
 
-            $('.listTopPaging', page).html(pagingHtml).trigger('create');
+            page.querySelector('.listTopPaging').innerHTML = pagingHtml;
 
             updateFilterControls(page);
 
@@ -86,9 +86,9 @@
                 });
             }
 
-            var elem = $('#items', page).html(html).lazyChildren();
-
-            $(pagingHtml).appendTo(elem).trigger('create');
+            var elem = page.querySelector('#items');
+            elem.innerHTML = html + pagingHtml;
+            ImageLoader.lazyChildren(elem);
 
             $('.btnNextPage', page).on('click', function () {
                 query.StartIndex += query.Limit;
@@ -244,7 +244,7 @@
 
         $(page).on('click', '.mediaItem', onListItemClick);
 
-    }).on('pageshowready', "#itemListPage", function () {
+    }).on('pagebeforeshowready', "#itemListPage", function () {
 
         var page = this;
 
@@ -270,7 +270,7 @@
 
         updateFilterControls(page);
 
-    }).on('pagehide', "#itemListPage", function () {
+    }).on('pagebeforehide', "#itemListPage", function () {
 
         currentItem = null;
 

dashboard-ui/scripts/librarypathmapping.js

@@ -129,7 +129,7 @@
 
         });
 
-    }).on('pagehide', "#libraryPathMappingPage", function () {
+    }).on('pagebeforehide', "#libraryPathMappingPage", function () {
 
         currentConfig = null;
 

dashboard-ui/scripts/librarysettings.js

@@ -10,7 +10,7 @@
 
         $('#txtSeasonZeroName', page).val(config.SeasonZeroDisplayName);
 
-        $('#chkEnableRealtimeMonitor', page).checked(config.EnableRealtimeMonitor).checkboxradio("refresh");
+        $('#selectEnableRealtimeMonitor', page).val(config.EnableLibraryMonitor).selectmenu("refresh");
 
         $('#txtItemsByNamePath', page).val(config.ItemsByNamePath || '');
 
@@ -31,7 +31,7 @@
 
             config.SeasonZeroDisplayName = $('#txtSeasonZeroName', form).val();
 
-            config.EnableRealtimeMonitor = $('#chkEnableRealtimeMonitor', form).checked();
+            config.EnableLibraryMonitor = $('#selectEnableRealtimeMonitor', form).val();
 
             config.EnableAudioArchiveFiles = $('#chkEnableAudioArchiveFiles', form).checked();
             config.EnableVideoArchiveFiles = $('#chkEnableVideoArchiveFiles', form).checked();

dashboard-ui/scripts/livetvchannel.js

@@ -166,23 +166,23 @@
 
         var page = this;
 
-        $('#btnPlay', page).on('click', function () {
+        $('.btnPlay', page).on('click', function () {
             var userdata = currentItem.UserData || {};
-            LibraryBrowser.showPlayMenu(this, currentItem.Id, currentItem.Type, false, currentItem.MediaType, userdata.PlaybackPositionTicks);
+            LibraryBrowser.showPlayMenu(null, currentItem.Id, currentItem.Type, false, currentItem.MediaType, userdata.PlaybackPositionTicks);
         });
 
-        $('#btnEdit', page).on('click', function () {
+        $('.btnEdit', page).on('click', function () {
 
             Dashboard.navigate("edititemmetadata.html?channelid=" + currentItem.Id);
         });
 
-    }).on('pageshowready', "#liveTvChannelPage", function () {
+    }).on('pagebeforeshowready', "#liveTvChannelPage", function () {
 
         var page = this;
 
         reload(page);
 
-    }).on('pagehide', "#liveTvChannelPage", function () {
+    }).on('pagebeforehide', "#liveTvChannelPage", function () {
 
         currentItem = null;
         programs = null;

dashboard-ui/scripts/livetvchannels.js

@@ -18,11 +18,11 @@
 
     function showLoadingMessage(page) {
 
-        $('.popupLoading', page).popup('open');
+        Dashboard.showLoadingMsg();
     }
 
     function hideLoadingMessage(page) {
-        $('.popupLoading', page).popup('close');
+        Dashboard.hideLoadingMsg();
     }
 
     function renderChannels(page, result) {
@@ -39,7 +39,9 @@
 
         var html = getChannelsHtml(result.Items);
 
-        $('#items', page).html(html).lazyChildren();
+        var elem = page.querySelector('#items');
+        elem.innerHTML = html;
+        ImageLoader.lazyChildren(elem);
 
         $('.btnNextPage', page).on('click', function () {
             query.StartIndex += query.Limit;
@@ -63,6 +65,8 @@
             renderChannels(page, result);
 
             hideLoadingMessage(page);
+
+            LibraryBrowser.setLastRefreshed(page);
         });
     }
 
@@ -109,26 +113,18 @@
             reloadItems(page);
         });
 
-    }).on('pageshowready', "#liveTvChannelsPage", function () {
+    }).on('pagebeforeshowready', "#liveTvChannelsPage", function () {
 
         // Can't use pagebeforeshow here or the loading popup won't center correctly
         var page = this;
 
-        var limit = LibraryBrowser.getDefaultPageSize();
-
-        // If the default page size has changed, the start index will have to be reset
-        if (limit != query.Limit) {
-            query.Limit = limit;
-            query.StartIndex = 0;
+        if (LibraryBrowser.needsRefresh(page)) {
+            query.UserId = Dashboard.getCurrentUserId();
+            LibraryBrowser.loadSavedQueryValues('movies', query);
+            query.Limit = query.Limit || LibraryBrowser.getDefaultPageSize();
+            reloadItems(page);
+            updateFilterControls(this);
         }
-
-        query.UserId = Dashboard.getCurrentUserId();
-
-        LibraryBrowser.loadSavedQueryValues('movies', query);
-
-        reloadItems(page);
-        
-        updateFilterControls(this);
         
     });
 

dashboard-ui/scripts/livetvcomponents.js

@@ -85,7 +85,7 @@
                     airDate = parseISO8601Date(airDate, { toLocal: true }).toLocaleDateString();
                 }
                 catch (e) {
-                    console.log("Error parsing date: " + airDate);
+                    Logger.log("Error parsing date: " + airDate);
                 }
 
 
@@ -208,7 +208,7 @@
 
         if (currentPosterItem) {
 
-            $(currentPosterItem).off('click.overlay');
+            $(currentPosterItem).off('click');
             currentPosterItem = null;
         }
     }

dashboard-ui/scripts/livetvguide.js

@@ -19,15 +19,6 @@
 
     var channelsPromise;
 
-    function showLoadingMessage(page) {
-
-        $('.popupLoading', page).popup('open');
-    }
-
-    function hideLoadingMessage(page) {
-        $('.popupLoading', page).popup('close');
-    }
-
     function normalizeDateToTimeslot(date) {
 
         var minutesOffset = date.getMinutes() - cellCurationMinutes;
@@ -51,7 +42,7 @@
 
     function reloadGuide(page) {
 
-        showLoadingMessage(page);
+        Dashboard.showModalLoadingMsg();
 
         channelQuery.userId = Dashboard.getCurrentUserId();
 
@@ -62,7 +53,7 @@
         var date = currentDate;
 
         var nextDay = new Date(date.getTime() + msPerDay - 1);
-        console.log(nextDay);
+        Logger.log(nextDay);
         channelsPromise.done(function (channelsResult) {
 
             ApiClient.getLiveTvPrograms({
@@ -77,24 +68,35 @@
 
                 renderGuide(page, date, channelsResult.Items, programsResult.Items);
 
-                hideLoadingMessage(page);
+                Dashboard.hideModalLoadingMsg();
+
+                LibraryBrowser.setLastRefreshed(page);
 
             });
 
-            var channelPagingHtml = LibraryBrowser.getPagingHtml(channelQuery, channelsResult.TotalRecordCount, false, [10, 20, 30, 50, 100]);
-            $('.channelPaging', page).html(channelPagingHtml).trigger('create');
+            var channelPagingHtml = LibraryBrowser.getQueryPagingHtml({
+                startIndex: channelQuery.StartIndex,
+                limit: channelQuery.Limit,
+                totalRecordCount: channelsResult.TotalRecordCount,
+                updatePageSizeSetting: false,
+                showLimit: true
+            });
 
-            $('.btnNextPage', page).on('click', function () {
+            var channelPaging = page.querySelector('.channelPaging');
+            channelPaging.innerHTML = channelPagingHtml;
+            $(channelPaging).trigger('create');
+
+            Events.on(page.querySelector('.btnNextPage'), 'click', function () {
                 channelQuery.StartIndex += channelQuery.Limit;
                 reloadChannels(page);
             });
 
-            $('.btnPreviousPage', page).on('click', function () {
+            Events.on(page.querySelector('.btnPreviousPage'), 'click', function () {
                 channelQuery.StartIndex -= channelQuery.Limit;
                 reloadChannels(page);
             });
 
-            $('.selectPageSize', page).on('change', function () {
+            Events.on(page.querySelector('#selectPageSize'), 'change', function () {
                 channelQuery.Limit = parseInt(this.value);
                 channelQuery.StartIndex = 0;
                 reloadChannels(page);
@@ -263,7 +265,10 @@
             html.push(getChannelProgramsHtml(page, date, channels[i], programs));
         }
 
-        $('.programGrid', page).html(html.join('')).scrollTop(0).scrollLeft(0)
+        var programGrid = page.querySelector('.programGrid');
+        programGrid.innerHTML = html.join('');
+
+        $(programGrid).scrollTop(0).scrollLeft(0)
             .createGuideHoverMenu('.programCellInner');
     }
 
@@ -300,7 +305,7 @@
             html += '</div>';
         }
 
-        $('.channelList', page).html(html);
+        page.querySelector('.channelList').innerHTML = html;
     }
 
     function renderGuide(page, date, channels, programs) {
@@ -309,7 +314,7 @@
 
         var startDate = date;
         var endDate = new Date(startDate.getTime() + msPerDay);
-        $('.timeslotHeaders', page).html(getTimeslotHeadersHtml(startDate, endDate));
+        page.querySelector('.timeslotHeaders').innerHTML = getTimeslotHeadersHtml(startDate, endDate);
         renderPrograms(page, date, channels, programs);
     }
 
@@ -319,9 +324,8 @@
 
         if (!headersScrolling) {
             gridScrolling = true;
-            var grid = $(elem);
 
-            $('.timeslotHeaders', page).scrollLeft(grid.scrollLeft());
+            $(page.querySelector('.timeslotHeaders')).scrollLeft($(elem).scrollLeft());
             gridScrolling = false;
         }
     }
@@ -330,8 +334,7 @@
 
         if (!gridScrolling) {
             headersScrolling = true;
-            elem = $(elem);
-            $('.programGrid', page).scrollLeft(elem.scrollLeft());
+            $(page.querySelector('.programGrid')).scrollLeft($(elem).scrollLeft());
             headersScrolling = false;
         }
     }
@@ -344,9 +347,11 @@
 
         var text = LibraryBrowser.getFutureDateText(date);
         text = '<span class="currentDay">' + text.replace(' ', ' </span>');
-        $('.currentDate', page).html(text);
+        page.querySelector('.currentDate').innerHTML = text;
     }
 
+    var dateOptions = [];
+
     function setDateRange(page, guideInfo) {
 
         var today = new Date();
@@ -364,28 +369,24 @@
 
         start = new Date(Math.max(today, start));
 
-        var html = '';
+        dateOptions = [];
 
         while (start <= end) {
 
-
-            html += '<option value="' + start.getTime() + '">' + LibraryBrowser.getFutureDateText(start) + '</option>';
+            dateOptions.push({
+                name: LibraryBrowser.getFutureDateText(start),
+                id: start.getTime(),
+                ironIcon: 'today'
+            });
 
             start.setDate(start.getDate() + 1);
             start.setHours(0, 0, 0, 0);
         }
 
-        var elem = $('#selectDate', page).html(html).selectmenu('refresh');
-
-        if (currentDate) {
-            elem.val(currentDate.getTime()).selectmenu('refresh');
-        }
-
-        var val = elem.val();
         var date = new Date();
 
-        if (val) {
-            date.setTime(parseInt(val));
+        if (currentDate) {
+            date.setTime(currentDate.getTime());
         }
 
         changeDate(page, date);
@@ -403,14 +404,16 @@
 
     function reloadPage(page) {
 
-        showLoadingMessage(page);
-
         $('.guideRequiresUnlock', page).hide();
 
         RegistrationServices.validateFeature('livetv').done(function () {
+            Dashboard.showModalLoadingMsg();
+
             reloadPageAfterValidation(page, 1000);
         }).fail(function () {
 
+            Dashboard.showModalLoadingMsg();
+
             var limit = 5;
             $('.guideRequiresUnlock', page).show();
             $('.unlockText', page).html(Globalize.translate('MessageLiveTvGuideRequiresUnlock', limit));
@@ -419,35 +422,41 @@
         });
     }
 
+    function selectDate(page) {
+
+        require(['actionsheet'], function () {
+
+            ActionSheetElement.show({
+                items: dateOptions,
+                showCancel: true,
+                title: Globalize.translate('HeaderSelectDate'),
+                callback: function (id) {
+
+                    var date = new Date();
+                    date.setTime(parseInt(id));
+                    changeDate(page, date);
+                }
+            });
+
+        });
+    }
+
     $(document).on('pageinitdepends', "#liveTvGuidePage", function () {
 
         var page = this;
 
-        $('.programGrid', page).on('scroll', function () {
+        Events.on(page.querySelector('.programGrid'), 'scroll', function () {
 
             onProgramGridScroll(page, this);
         });
 
-        $('#selectDate', page).on('change', function () {
-
-            var date = new Date();
-            date.setTime(parseInt(this.value));
-
-            $('#popupConfig', page).popup('close');
-
-            setTimeout(function () {
-
-                changeDate(page, date);
-            }, 300);
-        });
-
         if ($.browser.mobile) {
-            $('.tvGuide', page).addClass('mobileGuide');
+            page.querySelector('.tvGuide').classList.add('mobileGuide');
         } else {
 
-            $('.tvGuide', page).removeClass('mobileGuide');
+            page.querySelector('.tvGuide').classList.remove('mobileGuide');
 
-            $('.timeslotHeaders', page).on('scroll', function () {
+            Events.on(page.querySelector('.timeslotHeaders'), 'scroll', function () {
 
                 onTimeslotHeadersScroll(page, this);
             });
@@ -456,14 +465,10 @@
         if (AppInfo.enableHeadRoom) {
             requirejs(["thirdparty/headroom"], function () {
 
-                $('.tvGuideHeader', page).each(function () {
-
-                    // construct an instance of Headroom, passing the element
-                    var headroom = new Headroom(this);
-                    // initialise
-                    headroom.init();
-
-                });
+                // construct an instance of Headroom, passing the element
+                var headroom = new Headroom(page.querySelector('.tvGuideHeader'));
+                // initialise
+                headroom.init();
             });
         }
 
@@ -472,10 +477,18 @@
             reloadPage(page);
         });
 
-    }).on('pageshowready', "#liveTvGuidePage", function () {
+        $('.btnSelectDate', page).on('click', function () {
+
+            selectDate(page);
+        });
+
+    }).on('pagebeforeshowready', "#liveTvGuidePage", function () {
 
         var page = this;
-        reloadPage(page);
+
+        if (LibraryBrowser.needsRefresh(page)) {
+            reloadPage(page);
+        }
     });
 
 })(jQuery, document);

dashboard-ui/scripts/livetvitems.js

@@ -31,7 +31,7 @@
         ApiClient.getLiveTvPrograms(query).done(function (result) {
 
             // Scroll back up so they can see the results from the beginning
-            $(document).scrollTop(0);
+            window.scrollTo(0, 0);
 
             var html = '';
             var pagingHtml = LibraryBrowser.getQueryPagingHtml({
@@ -42,7 +42,7 @@
                 showLimit: false
             });
 
-            $('.listTopPaging', page).html(pagingHtml).trigger('create');
+            page.querySelector('.listTopPaging').innerHTML = pagingHtml;
 
             updateFilterControls(page);
 
@@ -72,9 +72,9 @@
                 });
             }
 
-            var elem = $('.itemsContainer', page).html(html).lazyChildren();
-
-            $(pagingHtml).appendTo(elem).trigger('create');
+            var elem = page.querySelector('.itemsContainer');
+            elem.innerHTML = html + pagingHtml;
+            ImageLoader.lazyChildren(elem);
 
             $('.btnNextPage', page).on('click', function () {
                 query.StartIndex += query.Limit;
@@ -137,7 +137,7 @@
             reloadItems(page);
         });
 
-    }).on('pageshowready', "#liveTvItemsPage", function () {
+    }).on('pagebeforeshowready', "#liveTvItemsPage", function () {
 
         query.ParentId = LibraryMenu.getTopParentId();
 

dashboard-ui/scripts/livetvnewrecording.js

@@ -15,7 +15,7 @@
         $('.itemCommunityRating', page).html(LibraryBrowser.getRatingHtml(program));
 
         LibraryBrowser.renderGenres($('.itemGenres', page), program, context);
-        LibraryBrowser.renderOverview($('.itemOverview', page), program);
+        LibraryBrowser.renderOverview(page.querySelector('.itemOverview'), program);
 
         $('.itemMiscInfo', page).html(LibraryBrowser.getMiscInfoHtml(program));
 
@@ -175,7 +175,7 @@
 
         reload(page);
 
-    }).on('pagehide', "#liveTvNewRecordingPage", function () {
+    }).on('pagebeforehide', "#liveTvNewRecordingPage", function () {
 
         currentProgram = null;
 

dashboard-ui/scripts/livetvprogram.js

@@ -45,12 +45,12 @@
             $('.userDataIcons', page).html(LibraryBrowser.getUserDataIconsHtml(item));
 
             LibraryBrowser.renderGenres($('.itemGenres', page), item, context);
-            LibraryBrowser.renderOverview($('.itemOverview', page), item);
+            LibraryBrowser.renderOverview(page.querySelector('.itemOverview'), item);
             $('.itemMiscInfo', page).html(LibraryBrowser.getMiscInfoHtml(item));
 
             LiveTvHelpers.renderMiscProgramInfo($('.miscTvProgramInfo', page), item);
 
-            $(page).trigger('displayingitem', [{
+            Events.trigger(page, 'displayingitem', [{
 
                 item: item,
                 context: 'livetv'
@@ -98,7 +98,7 @@
 
         var page = this;
 
-        $('#btnRecord', page).on('click', function() {
+        $('.btnRecord', page).on('click', function() {
 
             var id = getParameterByName('id');
             
@@ -106,28 +106,28 @@
 
         });
 
-        $('#btnPlay', page).on('click', function () {
+        $('.btnPlay', page).on('click', function () {
 
             ApiClient.getLiveTvChannel(currentItem.ChannelId, Dashboard.getCurrentUserId()).done(function (channel) {
                 
                 var userdata = channel.UserData || {};
 
-                LibraryBrowser.showPlayMenu(this, channel.Id, channel.Type, false, channel.MediaType, userdata.PlaybackPositionTicks);
+                LibraryBrowser.showPlayMenu(null, channel.Id, channel.Type, false, channel.MediaType, userdata.PlaybackPositionTicks);
             });
         });
 
-        $('#btnCancelRecording', page).on('click', function () {
+        $('.btnCancelRecording', page).on('click', function () {
 
             deleteTimer(page, currentItem.TimerId);
         });
 
-    }).on('pageshowready', "#liveTvProgramPage", function () {
+    }).on('pagebeforeshowready', "#liveTvProgramPage", function () {
 
         var page = this;
 
         reload(page);
 
-    }).on('pagehide', "#liveTvProgramPage", function () {
+    }).on('pagebeforehide', "#liveTvProgramPage", function () {
 
         currentItem = null;
     });

dashboard-ui/scripts/livetvrecording.js

@@ -27,7 +27,7 @@
 
         var mediaType = currentItem.MediaType;
 
-        LibraryBrowser.showPlayMenu(this, currentItem.Id, currentItem.Type, false, mediaType, userdata.PlaybackPositionTicks);
+        LibraryBrowser.showPlayMenu(null, currentItem.Id, currentItem.Type, false, mediaType, userdata.PlaybackPositionTicks);
     }
 
     function renderRecording(page, item) {
@@ -50,7 +50,7 @@
         $('.userDataIcons', page).html(LibraryBrowser.getUserDataIconsHtml(item));
 
         LibraryBrowser.renderGenres($('.itemGenres', page), item, context);
-        LibraryBrowser.renderOverview($('.itemOverview', page), item);
+        LibraryBrowser.renderOverview(page.querySelector('.itemOverview'), item);
         $('.itemMiscInfo', page).html(LibraryBrowser.getMiscInfoHtml(item));
 
         LiveTvHelpers.renderMiscProgramInfo($('.miscTvProgramInfo', page), item);
@@ -106,8 +106,8 @@
 
         var page = this;
 
-        $('#btnDelete', page).on('click', deleteRecording);
-        $('#btnPlay', page).on('click', play);
+        $('.btnDelete', page).on('click', deleteRecording);
+        $('.btnPlay', page).on('click', play);
 
         $('.btnSync', page).on('click', function () {
 
@@ -122,7 +122,7 @@
 
         reload(page);
 
-    }).on('pagehide', "#liveTvRecordingPage", function () {
+    }).on('pagebeforehide', "#liveTvRecordingPage", function () {
 
         currentItem = null;
     });

dashboard-ui/scripts/livetvrecordinglist.js

@@ -14,11 +14,17 @@
         ApiClient.getLiveTvRecordings(query).done(function (result) {
 
             // Scroll back up so they can see the results from the beginning
-            $(document).scrollTop(0);
+            window.scrollTo(0, 0);
 
             var html = '';
 
-            $('.listTopPaging', page).html(LibraryBrowser.getPagingHtml(query, result.TotalRecordCount, true)).trigger('create');
+            $('.listTopPaging', page).html(LibraryBrowser.getQueryPagingHtml({
+                startIndex: query.StartIndex,
+                limit: query.Limit,
+                totalRecordCount: result.TotalRecordCount,
+                showLimit: false,
+                updatePageSizeSetting: false
+            }));
 
             updateFilterControls();
 
@@ -35,9 +41,17 @@
 
             });
 
-            html += LibraryBrowser.getPagingHtml(query, result.TotalRecordCount);
+            html += LibraryBrowser.getQueryPagingHtml({
+                startIndex: query.StartIndex,
+                limit: query.Limit,
+                totalRecordCount: result.TotalRecordCount,
+                showLimit: false,
+                updatePageSizeSetting: false
+            });
 
-            $('#items', page).html(html).lazyChildren();
+            var elem = page.querySelector('#items');
+            elem.innerHTML = html;
+            ImageLoader.lazyChildren(elem);
 
             $('.btnNextPage', page).on('click', function () {
                 query.StartIndex += query.Limit;
@@ -72,10 +86,10 @@
         var page = this;
 
 
-    }).on('pageshowready', "#liveTvRecordingListPage", function () {
+    }).on('pagebeforeshowready', "#liveTvRecordingListPage", function () {
 
         var page = this;
-        
+
         var limit = LibraryBrowser.getDefaultPageSize();
 
         // If the default page size has changed, the start index will have to be reset

dashboard-ui/scripts/livetvrecordings.js

@@ -89,6 +89,7 @@
 
             renderRecordings($('#latestRecordings', page), result.Items);
 
+            LibraryBrowser.setLastRefreshed(page);
         });
 
         ApiClient.getLiveTvRecordingGroups({
@@ -102,11 +103,13 @@
         });
     }
 
-    $(document).on('pageshowready', "#liveTvRecordingsPage", function () {
+    $(document).on('pagebeforeshowready', "#liveTvRecordingsPage", function () {
 
         var page = this;
 
-        reload(page);
+        if (LibraryBrowser.needsRefresh(page)) {
+            reload(page);
+        }
 
     });
 

dashboard-ui/scripts/livetvseriestimer.js

@@ -285,7 +285,7 @@
 
         reload(page);
 
-    }).on('pagehide', "#liveTvSeriesTimerPage", function () {
+    }).on('pagebeforehide', "#liveTvSeriesTimerPage", function () {
 
         currentItem = null;
     });

dashboard-ui/scripts/livetvseriestimers.js

@@ -97,6 +97,7 @@
 
             renderTimers(page, result.Items);
 
+            LibraryBrowser.setLastRefreshed(page);
         });
     }
 
@@ -116,11 +117,13 @@
         }).checkboxradio('refresh');
     }
 
-    $(document).on('pageshowready', "#liveTvSeriesTimersPage", function () {
+    $(document).on('pagebeforeshowready', "#liveTvSeriesTimersPage", function () {
 
         var page = this;
 
-        reload(page);
+        if (LibraryBrowser.needsRefresh(page)) {
+            reload(page);
+        }
 
     }).on('pageinit', "#liveTvSeriesTimersPage", function () {
 

dashboard-ui/scripts/livetvstatus.js

@@ -190,7 +190,7 @@
             taskKey: 'RefreshGuide'
         });
 
-    }).on('pagehide', "#liveTvStatusPage", function () {
+    }).on('pagebeforehide', "#liveTvStatusPage", function () {
 
         var page = this;
 

dashboard-ui/scripts/livetvsuggested.js

@@ -24,8 +24,12 @@
 
             });
 
-            $('.activeProgramItems', page).html(html).lazyChildren();
+            var elem = page.querySelector('.activeProgramItems');
+            elem.innerHTML = html;
+            ImageLoader.lazyChildren(elem);
             Dashboard.hideLoadingMsg();
+
+            LibraryBrowser.setLastRefreshed(page);
         });
     }
 
@@ -56,7 +60,9 @@
 
             });
 
-            $('.upcomingProgramItems', page).html(html).lazyChildren();
+            var elem = page.querySelector('.upcomingProgramItems');
+            elem.innerHTML = html;
+            ImageLoader.lazyChildren(elem);
         });
 
         ApiClient.getLiveTvRecommendedPrograms({
@@ -78,7 +84,9 @@
                 lazy: true
             });
 
-            $('.upcomingTvMovieItems', page).html(html).lazyChildren();
+            var elem = page.querySelector('.upcomingTvMovieItems');
+            elem.innerHTML = html;
+            ImageLoader.lazyChildren(elem);
         });
 
         ApiClient.getLiveTvRecommendedPrograms({
@@ -100,16 +108,19 @@
                 lazy: true
             });
 
-            $('.upcomingSportsItems', page).html(html).lazyChildren();
+            var elem = page.querySelector('.upcomingSportsItems');
+            elem.innerHTML = html;
+            ImageLoader.lazyChildren(elem);
         });
     }
 
-    $(document).on('pageshowready', "#liveTvSuggestedPage", function () {
+    $(document).on('pagebeforeshowready', "#liveTvSuggestedPage", function () {
 
         var page = this;
 
-        reload(page);
-
+        if (LibraryBrowser.needsRefresh(page)) {
+            reload(page);
+        }
     });
 
 })(jQuery, document);

dashboard-ui/scripts/livetvtimer.js

@@ -35,7 +35,7 @@
         $('.itemCommunityRating', page).html(LibraryBrowser.getRatingHtml(programInfo));
 
         LibraryBrowser.renderGenres($('.itemGenres', page), programInfo, context);
-        LibraryBrowser.renderOverview($('.itemOverview', page), programInfo);
+        LibraryBrowser.renderOverview(page.querySelector('.itemOverview'), programInfo);
 
         if (programInfo.ImageTags && programInfo.ImageTags.Primary) {
 
@@ -121,7 +121,7 @@
 
         reload(page);
 
-    }).on('pagehide', "#liveTvTimerPage", function () {
+    }).on('pagebeforehide', "#liveTvTimerPage", function () {
 
         currentItem = null;
     });

dashboard-ui/scripts/livetvtimers.js

@@ -104,14 +104,17 @@
 
             renderTimers(page, result.Items);
 
+            LibraryBrowser.setLastRefreshed(page);
         });
     }
 
-    $(document).on('pageshowready', "#liveTvTimersPage", function () {
+    $(document).on('pagebeforeshowready', "#liveTvTimersPage", function () {
 
         var page = this;
 
-        reload(page);
+        if (LibraryBrowser.needsRefresh(page)) {
+            reload(page);
+        }
     });
 
 })(jQuery, document);

dashboard-ui/scripts/loginpage.js

@@ -23,10 +23,7 @@
 
         LoginPage.getApiClient().done(function (apiClient) {
 
-            // Show all users on localhost
-            var promise1 = apiClient.getPublicUsers();
-
-            promise1.done(function (users) {
+            apiClient.getPublicUsers().done(function (users) {
 
                 var showManualForm = !users.length;
 
@@ -110,6 +107,8 @@
                 newUrl = "index.html";
             }
 
+            Dashboard.hideLoadingMsg();
+
             Dashboard.onServerChanged(user.Id, result.AccessToken, apiClient);
             Dashboard.navigate(newUrl);
 
@@ -221,4 +220,8 @@ $(document).on('pageinitdepends', "#loginPage", function () {
 
     $('.manualLoginForm', page).off('submit', LoginPage.onManualSubmit).on('submit', LoginPage.onManualSubmit);
 
+    $('.btnForgotPassword', page).on('click', function () {
+        Dashboard.navigate('forgotpassword.html');
+    });
+
 }).on('pageshowready', "#loginPage", LoginPage.onPageShow);

dashboard-ui/scripts/logpage.js

@@ -43,7 +43,7 @@
 
             html += '</ul>';
 
-            $('.serverLogs', page).html(html).trigger('create');
+            Events.trigger($('.serverLogs', page).html(html)[0], 'create');
 
         });
     });

dashboard-ui/scripts/mediacontroller.js

@@ -1,14 +1,14 @@
-(function ($, window, store) {
+(function ($, window) {
 
     function setMirrorModeEnabled(enabled) {
 
         var val = enabled ? '1' : '0';
 
-        store.setItem('displaymirror--' + Dashboard.getCurrentUserId(), val);
+        appStorage.setItem('displaymirror--' + Dashboard.getCurrentUserId(), val);
 
     }
     function isMirrorModeEnabled() {
-        return (store.getItem('displaymirror--' + Dashboard.getCurrentUserId()) || '') != '0';
+        return (appStorage.getItem('displaymirror--' + Dashboard.getCurrentUserId()) || '') != '0';
     }
 
     var currentDisplayInfo;
@@ -39,7 +39,7 @@
 
     function monitorPlayer(player) {
 
-        $(player).on('playbackstart.mediacontroller', function (e, state) {
+        Events.on(player, 'playbackstart', function (e, state) {
 
             var info = {
                 QueueableMediaTypes: state.NowPlayingItem.MediaType,
@@ -51,7 +51,9 @@
 
             ApiClient.reportPlaybackStart(info);
 
-        }).on('playbackstop.mediacontroller', function (e, state) {
+        });
+
+        Events.on(player, 'playbackstop', function (e, state) {
 
             var stopInfo = {
                 itemId: state.NowPlayingItem.Id,
@@ -72,6 +74,186 @@
         });
     }
 
+
+
+    function getTargetsHtml(targets) {
+
+        var playerInfo = MediaController.getPlayerInfo();
+
+        var html = '';
+        html += '<form>';
+
+        html += '<h3>' + Globalize.translate('HeaderSelectPlayer') + '</h3>';
+        html += '<fieldset data-role="controlgroup" data-mini="true">';
+
+        var checkedHtml;
+
+        for (var i = 0, length = targets.length; i < length; i++) {
+
+            var target = targets[i];
+
+            var id = 'radioPlayerTarget' + i;
+
+            var isChecked = target.id == playerInfo.id;
+            checkedHtml = isChecked ? ' checked="checked"' : '';
+
+            var mirror = (!target.isLocalPlayer && target.supportedCommands.indexOf('DisplayContent') != -1) ? 'true' : 'false';
+
+            html += '<input type="radio" class="radioSelectPlayerTarget" name="radioSelectPlayerTarget" data-mirror="' + mirror + '" data-commands="' + target.supportedCommands.join(',') + '" data-mediatypes="' + target.playableMediaTypes.join(',') + '" data-playername="' + target.playerName + '" data-targetid="' + target.id + '" data-targetname="' + target.name + '" data-devicename="' + (target.deviceName || '') + '" id="' + id + '" value="' + target.id + '"' + checkedHtml + '>';
+            html += '<label for="' + id + '" style="font-weight:normal;">' + target.name;
+
+            if (target.appName && target.appName != target.name) {
+                html += '<br/><span>' + target.appName + '</span>';
+            }
+
+            html += '</label>';
+        }
+
+        html += '</fieldset>';
+
+        html += '<p class="fieldDescription">' + Globalize.translate('LabelAllPlaysSentToPlayer') + '</p>';
+
+        checkedHtml = isMirrorModeEnabled() ? ' checked="checked"' : '';
+
+        html += '<div style="margin-top:1.5em;" class="fldMirrorMode"><label for="chkEnableMirrorMode">Enable display mirroring</label><input type="checkbox" class="chkEnableMirrorMode" id="chkEnableMirrorMode" data-mini="true"' + checkedHtml + ' /></div>';
+
+        html += '</form>';
+
+        return html;
+    }
+
+    function showPlayerSelection() {
+
+        var promise = MediaController.getTargets();
+
+        var html = '<div data-role="panel" data-position="right" data-display="overlay" data-position-fixed="true" id="playerSelectionPanel" data-theme="a">';
+
+        html += '<div class="players"></div>';
+
+        html += '<br/>';
+        html += '<p><a href="nowplaying.html" class="clearLink"><paper-button raised class="block"><iron-icon icon="tablet-android"></iron-icon><span>' + Globalize.translate('ButtonRemoteControl') + '</span></paper-button></a></p>';
+
+        html += '</div>';
+
+        $(document.body).append(html);
+
+        require(['jqmicons']);
+
+        var elem = $('#playerSelectionPanel').panel({}).trigger('create').panel("open").on("panelclose", function () {
+
+            $(this).off("panelclose").remove();
+        });
+
+        promise.done(function (targets) {
+
+            $('.players', elem).html(getTargetsHtml(targets)).trigger('create');
+
+            $('.chkEnableMirrorMode', elem).on('change', function () {
+                setMirrorModeEnabled(this.checked);
+
+                if (this.checked && currentDisplayInfo) {
+
+                    mirrorItem(currentDisplayInfo);
+
+                }
+
+            });
+
+            $('.radioSelectPlayerTarget', elem).off('change').on('change', function () {
+
+                var supportsMirror = this.getAttribute('data-mirror') == 'true';
+
+                if (supportsMirror) {
+                    $('.fldMirrorMode', elem).show();
+                } else {
+                    $('.fldMirrorMode', elem).hide();
+                }
+
+                var playerName = this.getAttribute('data-playername');
+                var targetId = this.getAttribute('data-targetid');
+                var targetName = this.getAttribute('data-targetname');
+                var deviceName = this.getAttribute('data-deviceName');
+                var playableMediaTypes = this.getAttribute('data-mediatypes').split(',');
+                var supportedCommands = this.getAttribute('data-commands').split(',');
+
+                MediaController.trySetActivePlayer(playerName, {
+                    id: targetId,
+                    name: targetName,
+                    playableMediaTypes: playableMediaTypes,
+                    supportedCommands: supportedCommands,
+                    deviceName: deviceName
+
+                });
+
+                if (currentDisplayInfo) {
+
+                    mirrorIfEnabled(currentDisplayInfo);
+                }
+
+            });
+
+            if ($('.radioSelectPlayerTarget:checked', elem)[0].getAttribute('data-mirror') == 'true') {
+                $('.fldMirrorMode', elem).show();
+            } else {
+                $('.fldMirrorMode', elem).hide();
+            }
+        });
+    }
+
+    function bindKeys(controller) {
+
+        var self = this;
+        var keyResult = {};
+
+        self.keyBinding = function (e) {
+
+            if (bypass()) return;
+
+            Logger.log("keyCode", e.keyCode);
+
+            if (keyResult[e.keyCode]) {
+                e.preventDefault();
+                keyResult[e.keyCode](e);
+            }
+        };
+
+        self.keyPrevent = function (e) {
+
+            if (bypass()) return;
+
+            var codes = [32, 38, 40, 37, 39, 81, 77, 65, 84, 83, 70];
+
+            if (codes.indexOf(e.keyCode) != -1) {
+                e.preventDefault();
+            }
+        };
+
+        keyResult[32] = function () { // spacebar
+
+            var player = controller.getCurrentPlayer();
+
+            player.getPlayerState().done(function (result) {
+
+                var state = result;
+
+                if (state.NowPlayingItem && state.PlayState) {
+                    if (state.PlayState.IsPaused) {
+                        player.unpause();
+                    } else {
+                        player.pause();
+                    }
+                }
+            });
+        };
+
+        var bypass = function () {
+            // Get active elem to see what type it is
+            var active = document.activeElement;
+            var type = active.type || active.tagName.toLowerCase();
+            return (type === "text" || type === "select" || type === "textarea" || type == "password");
+        };
+    }
+
     function mediaController() {
 
         var self = this;
@@ -81,7 +263,7 @@
 
         var keys = new bindKeys(self);
 
-        $(window).on("keydown", keys.keyBinding).on("keypress keyup", keys.keyPrevent);
+        $(window).on("keydown", keys.keyBinding).on("keypress", keys.keyPrevent).on("keyup", keys.keyPrevent);
 
         self.registerPlayer = function (player) {
 
@@ -122,10 +304,11 @@
                 throw new Error('null player');
             }
 
+            currentPairingId = null;
             currentPlayer = player;
             currentTargetInfo = targetInfo;
 
-            console.log('Active player: ' + JSON.stringify(currentTargetInfo));
+            Logger.log('Active player: ' + JSON.stringify(currentTargetInfo));
 
             triggerPlayerChange(player, targetInfo);
         };
@@ -154,7 +337,7 @@
                 currentPlayer = player;
                 currentTargetInfo = targetInfo;
 
-                console.log('Active player: ' + JSON.stringify(currentTargetInfo));
+                Logger.log('Active player: ' + JSON.stringify(currentTargetInfo));
 
                 triggerPlayerChange(player, targetInfo);
             });
@@ -400,7 +583,7 @@
 
             // Full list
             // https://github.com/MediaBrowser/MediaBrowser/blob/master/MediaBrowser.Model/Session/GeneralCommand.cs#L23
-            console.log('MediaController received command: ' + cmd.Name);
+            Logger.log('MediaController received command: ' + cmd.Name);
             switch (cmd.Name) {
 
                 case 'VolumeUp':
@@ -613,6 +796,8 @@
 
             return false;
         };
+
+        self.showPlayerSelection = showPlayerSelection;
     }
 
     window.MediaController = new mediaController();
@@ -690,188 +875,14 @@
         });
     });
 
-    function getTargetsHtml(targets) {
-
-        var playerInfo = MediaController.getPlayerInfo();
-
-        var html = '';
-        html += '<form>';
-
-        html += '<h3>' + Globalize.translate('HeaderSelectPlayer') + '</h3>';
-        html += '<fieldset data-role="controlgroup" data-mini="true">';
-
-        var checkedHtml;
-
-        for (var i = 0, length = targets.length; i < length; i++) {
-
-            var target = targets[i];
-
-            var id = 'radioPlayerTarget' + i;
-
-            var isChecked = target.id == playerInfo.id;
-            checkedHtml = isChecked ? ' checked="checked"' : '';
-
-            var mirror = (!target.isLocalPlayer && target.supportedCommands.indexOf('DisplayContent') != -1) ? 'true' : 'false';
-
-            html += '<input type="radio" class="radioSelectPlayerTarget" name="radioSelectPlayerTarget" data-mirror="' + mirror + '" data-commands="' + target.supportedCommands.join(',') + '" data-mediatypes="' + target.playableMediaTypes.join(',') + '" data-playername="' + target.playerName + '" data-targetid="' + target.id + '" data-targetname="' + target.name + '" data-devicename="' + (target.deviceName || '') + '" id="' + id + '" value="' + target.id + '"' + checkedHtml + '>';
-            html += '<label for="' + id + '" style="font-weight:normal;">' + target.name;
-
-            if (target.appName && target.appName != target.name) {
-                html += '<br/><span>' + target.appName + '</span>';
-            }
-
-            html += '</label>';
-        }
-
-        html += '</fieldset>';
-
-        html += '<p class="fieldDescription">' + Globalize.translate('LabelAllPlaysSentToPlayer') + '</p>';
-
-        checkedHtml = isMirrorModeEnabled() ? ' checked="checked"' : '';
-
-        html += '<div style="margin-top:1.5em;" class="fldMirrorMode"><label for="chkEnableMirrorMode">Enable display mirroring</label><input type="checkbox" class="chkEnableMirrorMode" id="chkEnableMirrorMode" data-mini="true"' + checkedHtml + ' /></div>';
-
-        html += '</form>';
-
-        return html;
-    }
-
-    function showPlayerSelection(page) {
-
-        var promise = MediaController.getTargets();
-
-        var html = '<div data-role="panel" data-position="right" data-display="overlay" data-position-fixed="true" id="playerSelectionPanel" data-theme="a">';
-
-        html += '<div class="players"></div>';
-
-        html += '<br/>';
-        html += '<p><a href="nowplaying.html" data-role="button" data-icon="remote" data-transition="slideup">' + Globalize.translate('ButtonRemoteControl') + '</a></p>';
-
-        html += '</div>';
-
-        $(document.body).append(html);
-
-        var elem = $('#playerSelectionPanel').panel({}).trigger('create').panel("open").on("panelclose", function () {
-
-            $(this).off("panelclose").remove();
-        });
-
-        promise.done(function (targets) {
-
-            $('.players', elem).html(getTargetsHtml(targets)).trigger('create');
-
-            $('.chkEnableMirrorMode', elem).on('change', function () {
-                setMirrorModeEnabled(this.checked);
-
-                if (this.checked && currentDisplayInfo) {
-
-                    mirrorItem(currentDisplayInfo);
-
-                }
-
-            });
-
-            $('.radioSelectPlayerTarget', elem).off('change').on('change', function () {
-
-                var supportsMirror = this.getAttribute('data-mirror') == 'true';
-
-                if (supportsMirror) {
-                    $('.fldMirrorMode', elem).show();
-                } else {
-                    $('.fldMirrorMode', elem).hide();
-                }
-
-                var playerName = this.getAttribute('data-playername');
-                var targetId = this.getAttribute('data-targetid');
-                var targetName = this.getAttribute('data-targetname');
-                var deviceName = this.getAttribute('data-deviceName');
-                var playableMediaTypes = this.getAttribute('data-mediatypes').split(',');
-                var supportedCommands = this.getAttribute('data-commands').split(',');
-
-                MediaController.trySetActivePlayer(playerName, {
-                    id: targetId,
-                    name: targetName,
-                    playableMediaTypes: playableMediaTypes,
-                    supportedCommands: supportedCommands,
-                    deviceName: deviceName
-
-                });
-
-                if (currentDisplayInfo) {
-
-                    mirrorIfEnabled(currentDisplayInfo);
-                }
-
-            });
-
-            if ($('.radioSelectPlayerTarget:checked', elem).attr('data-mirror') == 'true') {
-                $('.fldMirrorMode', elem).show();
-            } else {
-                $('.fldMirrorMode', elem).hide();
-            }
-        });
-    }
-
-    function bindKeys(controller) {
-
-        var self = this;
-        var keyResult = {};
-
-        self.keyBinding = function (e) {
-
-            if (bypass()) return;
-
-            console.log("keyCode", e.keyCode);
-
-            if (keyResult[e.keyCode]) {
-                e.preventDefault();
-                keyResult[e.keyCode](e);
-            }
-        };
-
-        self.keyPrevent = function (e) {
-
-            if (bypass()) return;
-
-            var codes = [32, 38, 40, 37, 39, 81, 77, 65, 84, 83, 70];
-
-            if (codes.indexOf(e.keyCode) != -1) {
-                e.preventDefault();
-            }
-        };
-
-        keyResult[32] = function () { // spacebar
-
-            var player = controller.getCurrentPlayer();
-
-            player.getPlayerState().done(function (result) {
-
-                var state = result;
-
-                if (state.NowPlayingItem && state.PlayState) {
-                    if (state.PlayState.IsPaused) {
-                        player.unpause();
-                    } else {
-                        player.pause();
-                    }
-                }
-            });
-        };
-
-        var bypass = function () {
-            // Get active elem to see what type it is
-            var active = document.activeElement;
-            var type = active.type || active.tagName.toLowerCase();
-            return (type === "text" || type === "select" || type === "textarea" || type == "password");
-        };
+    function onCastButtonClicked() {
+        
+        showPlayerSelection();
     }
 
     $(document).on('headercreated', function () {
 
-        $('.btnCast').off('.mediacontroller').on('click.mediacontroller', function () {
-
-            showPlayerSelection($.mobile.activePage);
-        });
+        $('.btnCast').off('click', onCastButtonClicked).on('click', onCastButtonClicked);
 
     }).on('pagebeforeshow', ".page", function () {
 
@@ -881,11 +892,9 @@
 
     }).on('displayingitem', ".libraryPage", function (e, info) {
 
-        var page = this;
-
         currentDisplayInfo = info;
 
         mirrorIfEnabled(info);
     });
 
-})(jQuery, window, window.appStorage);
+})(jQuery, window);

dashboard-ui/scripts/medialibrarypage.js

@@ -383,7 +383,7 @@ var WizardLibraryPage = {
             taskKey: 'RefreshLibrary'
         });
 
-    }).on('pagehide', "#mediaLibraryPage", function () {
+    }).on('pagebeforehide', "#mediaLibraryPage", function () {
 
         var page = this;
 

dashboard-ui/scripts/mediaplayer-video.js

@@ -9,7 +9,6 @@
         var unmuteButton = null;
         var volumeSlider = null;
         var positionSlider;
-        var isPositionSliderActive;
         var currentTimeElement;
 
         self.currentSubtitleStreamIndex = null;
@@ -59,20 +58,14 @@
             return document.fullscreen || document.mozFullScreen || document.webkitIsFullScreen || document.msFullscreenElement ? true : false;
         };
 
-        function onFlyoutClose() {
-            $('.itemVideo').css('visibility', 'visible');
-        }
-
-        function onPopupOpen(elem) {
-            elem.popup("open").parents(".ui-popup-container").css("margin-top", 30);
-
-            if ($.browser.safari) {
-                //$('.itemVideo').css('visibility', 'hidden');
-            }
-        }
-
         self.showChaptersFlyout = function () {
 
+            function onFlyoutClose() {
+                $('.itemVideo').css('visibility', 'visible');
+            }
+
+            require(['jqmicons']);
+
             var html = getChaptersFlyoutHtml();
 
             var elem = $('.videoChaptersPopup').html(html)
@@ -81,46 +74,187 @@
                 .off('popupafterclose', onFlyoutClose)
                 .on('popupafterclose', onFlyoutClose);
 
-            onPopupOpen(elem);
+            elem.popup("open").parents(".ui-popup-container").css("margin-top", 30);
         };
 
         self.showSubtitleMenu = function () {
 
-            var html = getSubtitleTracksHtml();
+            var streams = self.currentMediaSource.MediaStreams.filter(function (currentStream) {
+                return currentStream.Type == "Subtitle";
+            });
 
-            var elem = $('.videoSubtitlePopup').html(html)
-                .trigger('create')
-                .popup("option", "positionTo", $('.videoSubtitleButton'))
-                .off('popupafterclose', onFlyoutClose)
-                .on('popupafterclose', onFlyoutClose);
+            var currentIndex = self.currentSubtitleStreamIndex || -1;
 
-            onPopupOpen(elem);
+            streams.unshift({
+                Index: -1,
+                Language: "Off"
+            });
+
+            var menuItems = streams.map(function (stream) {
+
+                var attributes = [];
+
+                attributes.push(stream.Language || Globalize.translate('LabelUnknownLanguage'));
+
+                if (stream.Codec) {
+                    attributes.push(stream.Codec);
+                }
+
+                var name = attributes.join(' - ');
+
+                if (stream.IsDefault) {
+                    name += ' (D)';
+                }
+                if (stream.IsForced) {
+                    name += ' (F)';
+                }
+                if (stream.External) {
+                    name += ' (EXT)';
+                }
+
+                var opt = {
+                    name: name,
+                    id: stream.Index
+                };
+
+                if (stream.Index == currentIndex) {
+                    opt.ironIcon = "check";
+                }
+
+                return opt;
+            });
+
+            require(['actionsheet'], function () {
+
+                ActionSheetElement.show({
+                    items: menuItems,
+                    positionTo: $('.videoSubtitleButton')[0],
+                    callback: function (id) {
+
+                        var index = parseInt(id);
+                        if (index != currentIndex) {
+                            self.onSubtitleOptionSelected(index);
+                        }
+                    }
+                });
+
+            });
         };
 
         self.showQualityFlyout = function () {
 
-            var html = getQualityFlyoutHtml();
+            var currentSrc = self.getCurrentSrc(self.currentMediaRenderer).toLowerCase();
+            var isStatic = currentSrc.indexOf('static=true') != -1;
 
-            var elem = $('.videoQualityPopup').html(html)
-                .trigger('create')
-                .popup("option", "positionTo", $('.videoQualityButton'))
-                .off('popupafterclose', onFlyoutClose)
-                .on('popupafterclose', onFlyoutClose);
+            var videoStream = self.currentMediaSource.MediaStreams.filter(function (stream) {
+                return stream.Type == "Video";
+            })[0];
+            var videoWidth = videoStream ? videoStream.Width : null;
+            var videoHeight = videoStream ? videoStream.Height : null;
 
-            onPopupOpen(elem);
+            var options = self.getVideoQualityOptions(videoWidth, videoHeight);
+
+            if (isStatic) {
+                options[0].name = "Direct";
+            }
+
+            var menuItems = options.map(function (o) {
+
+                var opt = {
+                    name: o.name,
+                    id: o.bitrate
+                };
+
+                if (o.selected) {
+                    opt.ironIcon = "check";
+                }
+
+                return opt;
+            });
+
+            var selectedId = options.filter(function (o) {
+                return o.selected;
+            });
+            selectedId = selectedId.length ? selectedId[0].bitrate : null;
+            require(['actionsheet'], function () {
+
+                ActionSheetElement.show({
+                    items: menuItems,
+                    positionTo: $('.videoQualityButton')[0],
+                    callback: function (id) {
+
+                        var bitrate = parseInt(id);
+                        if (bitrate != selectedId) {
+                            self.onQualityOptionSelected(bitrate);
+                        }
+                    }
+                });
+
+            });
         };
 
         self.showAudioTracksFlyout = function () {
 
-            var html = getAudioTracksHtml();
+            var options = self.currentMediaSource.MediaStreams.filter(function (currentStream) {
+                return currentStream.Type == "Audio";
+            });
 
-            var elem = $('.videoAudioPopup').html(html)
-                .trigger('create')
-                .popup("option", "positionTo", $('.videoAudioButton'))
-                .off('popupafterclose', onFlyoutClose)
-                .on('popupafterclose', onFlyoutClose);
+            var currentIndex = getParameterByName('AudioStreamIndex', self.getCurrentSrc(self.currentMediaRenderer));
 
-            onPopupOpen(elem);
+            var menuItems = options.map(function (stream) {
+
+                var attributes = [];
+
+                attributes.push(stream.Language || Globalize.translate('LabelUnknownLanguage'));
+
+                if (stream.Codec) {
+                    attributes.push(stream.Codec);
+                }
+                if (stream.Profile) {
+                    attributes.push(stream.Profile);
+                }
+
+                if (stream.BitRate) {
+                    attributes.push((Math.floor(stream.BitRate / 1000)) + ' kbps');
+                }
+
+                if (stream.Channels) {
+                    attributes.push(stream.Channels + ' ch');
+                }
+
+                var name = attributes.join(' - ');
+
+                if (stream.IsDefault) {
+                    name += ' (D)';
+                }
+
+                var opt = {
+                    name: name,
+                    id: stream.Index
+                };
+
+                if (stream.Index == currentIndex) {
+                    opt.ironIcon = "check";
+                }
+
+                return opt;
+            });
+
+            require(['actionsheet'], function () {
+
+                ActionSheetElement.show({
+                    items: menuItems,
+                    positionTo: $('.videoAudioButton')[0],
+                    callback: function (id) {
+
+                        var index = parseInt(id);
+                        if (index != currentIndex) {
+                            self.onAudioOptionSelected(index);
+                        }
+                    }
+                });
+
+            });
         };
 
         self.setAudioStreamIndex = function (index) {
@@ -129,7 +263,7 @@
 
         self.setSubtitleStreamIndex = function (index) {
 
-            if (!self.supportsTextTracks()) {
+            if (!self.currentMediaRenderer.supportsTextTracks()) {
 
                 self.changeStream(self.getCurrentTicks(), { SubtitleStreamIndex: index });
                 self.currentSubtitleStreamIndex = index;
@@ -184,8 +318,6 @@
 
         self.setCurrentTrackElement = function (index) {
 
-            var modes = ['disabled', 'showing', 'hidden'];
-
             var textStreams = self.currentMediaSource.MediaStreams.filter(function (s) {
                 return s.DeliveryMethod == 'External';
             });
@@ -196,70 +328,12 @@
 
             var trackIndex = newStream ? textStreams.indexOf(newStream) : -1;
 
-            console.log('Setting new text track index to: ' + trackIndex);
-
-            var allTracks = self.currentMediaElement.textTracks; // get list of tracks
-
-            for (var i = 0; i < allTracks.length; i++) {
-
-                var mode;
-
-                if (trackIndex == i) {
-                    mode = 1; // show this track
-                } else {
-                    mode = 0; // hide all other tracks
-                }
-
-                console.log('Setting track ' + i + ' mode to: ' + mode);
-
-                // Safari uses integers for the mode property
-                // http://www.jwplayer.com/html5/scripting/
-                var useNumericMode = false;
-
-                if (!isNaN(allTracks[i].mode)) {
-                    useNumericMode = true;
-                }
-
-                if (useNumericMode) {
-                    allTracks[i].mode = mode;
-                } else {
-                    allTracks[i].mode = modes[mode];
-                }
-            }
+            self.currentMediaRenderer.setCurrentTrackElement(trackIndex);
         };
 
         self.updateTextStreamUrls = function (startPositionTicks) {
 
-            if (!self.supportsTextTracks()) {
-                return;
-            }
-
-            var allTracks = self.currentMediaElement.textTracks; // get list of tracks
-
-            for (var i = 0; i < allTracks.length; i++) {
-
-                var track = allTracks[i];
-
-                // This throws an error in IE, but is fine in chrome
-                // In IE it's not necessary anyway because changing the src seems to be enough
-                try {
-                    while (track.cues.length) {
-                        track.removeCue(track.cues[0]);
-                    }
-                } catch (e) {
-                    console.log('Error removing cue from textTrack');
-                }
-            }
-
-            $('track', self.currentMediaElement).each(function () {
-
-                var currentSrc = this.src;
-
-                currentSrc = replaceQueryString(currentSrc, 'startPositionTicks', startPositionTicks);
-
-                this.src = currentSrc;
-
-            });
+            self.currentMediaRenderer.updateTextStreamUrls(startPositionTicks);
         };
 
         self.updateNowPlayingInfo = function (item) {
@@ -395,7 +469,7 @@
                 var chapterIndex = 0;
                 html += item.Chapters.map(function (c) {
 
-                    var width = 320;
+                    var width = 240;
                     var chapterHtml = '<a class="card backdropCard chapterCard" href="#" style="margin-right:1em;width:' + width + 'px;" data-position="' + c.StartPositionTicks + '">';
                     chapterHtml += '<div class="cardBox">';
                     chapterHtml += '<div class="cardScalable">';
@@ -498,8 +572,6 @@
 
         function onPositionSliderChange() {
 
-            isPositionSliderActive = false;
-
             var newPercent = parseInt(this.value);
 
             var newPositionTicks = (newPercent / 100) * self.currentMediaSource.RunTimeTicks;
@@ -517,92 +589,133 @@
             $('.videoChaptersPopup').popup('close');
         };
 
-        self.onAudioOptionSelected = function (elem) {
+        self.onAudioOptionSelected = function (index) {
 
-            if (!$(elem).hasClass('selectedMediaPopupOption')) {
-                var index = parseInt(elem.getAttribute('data-value'));
-
-                self.setAudioStreamIndex(index);
-            }
-            $('.videoAudioPopup').popup('close');
+            self.setAudioStreamIndex(index);
         };
 
-        self.onSubtitleOptionSelected = function (elem) {
+        self.onSubtitleOptionSelected = function (index) {
 
-            if (!$(elem).hasClass('selectedMediaPopupOption')) {
-                var index = parseInt(elem.getAttribute('data-value'));
-
-                self.setSubtitleStreamIndex(index);
-            }
-            $('.videoSubtitlePopup').popup('close');
+            self.setSubtitleStreamIndex(index);
         };
 
-        self.onQualityOptionSelected = function (elem) {
+        self.onQualityOptionSelected = function (bitrate) {
 
-            if (!$(elem).hasClass('selectedMediaPopupOption')) {
-                var bitrate = parseInt(elem.getAttribute('data-value'));
+            AppSettings.maxStreamingBitrate(bitrate);
 
-                AppSettings.maxStreamingBitrate(bitrate);
+            $('.videoQualityPopup').popup('close');
 
-                $('.videoQualityPopup').popup('close');
-
-                self.changeStream(self.getCurrentTicks(), {
-                    Bitrate: bitrate
-                });
-            }
-
-            $('.videoSubtitlePopup').popup('close');
+            self.changeStream(self.getCurrentTicks(), {
+                Bitrate: bitrate
+            });
         };
 
-        $(function () {
+        function ensureVideoPlayerElements() {
+
+            var html = '<div id="mediaPlayer" data-theme="b" class="ui-bar-b" style="display: none;">';
+
+            html += '<div class="videoBackdrop">';
+            html += '<div id="videoPlayer">';
+
+            html += '<div id="videoElement">';
+            html += '<div id="play" class="status"></div>';
+            html += '<div id="pause" class="status"></div>';
+            html += '</div>';
+
+            html += '<div class="videoTopControls hiddenOnIdle">';
+            html += '<div class="videoTopControlsLogo"></div>';
+            html += '<div class="videoAdvancedControls">';
+
+            html += '<paper-icon-button icon="skip-previous" class="previousTrackButton mediaButton videoTrackControl" onclick="MediaPlayer.previousTrack();"></paper-icon-button>';
+            html += '<paper-icon-button icon="skip-next" class="nextTrackButton mediaButton videoTrackControl" onclick="MediaPlayer.nextTrack();"></paper-icon-button>';
+
+            // Embedding onclicks due to issues not firing in cordova safari
+            html += '<paper-icon-button icon="audiotrack" class="mediaButton videoAudioButton" onclick="MediaPlayer.showAudioTracksFlyout();"></paper-icon-button>';
+            html += '<div data-role="popup" class="videoAudioPopup videoPlayerPopup" data-history="false" data-theme="b"></div>';
+
+            html += '<paper-icon-button icon="subtitles" class="mediaButton videoSubtitleButton" onclick="MediaPlayer.showSubtitleMenu();"></paper-icon-button>';
+            html += '<div data-role="popup" class="videoSubtitlePopup videoPlayerPopup" data-history="false" data-theme="b"></div>';
+
+            html += '<paper-icon-button icon="videocam" class="mediaButton videoChaptersButton" onclick="MediaPlayer.showChaptersFlyout();"></paper-icon-button>';
+            html += '<div data-role="popup" class="videoChaptersPopup videoPlayerPopup" data-history="false" data-theme="b"></div>';
+
+            html += '<paper-icon-button icon="settings" class="mediaButton videoQualityButton" onclick="MediaPlayer.showQualityFlyout();"></paper-icon-button>';
+
+            html += '<paper-icon-button icon="close" class="mediaButton" onclick="MediaPlayer.stop();"></paper-icon-button>';
+
+            html += '</div>'; // videoAdvancedControls
+            html += '</div>'; // videoTopControls
+
+            // Create controls
+            html += '<div class="videoControls hiddenOnIdle">';
+
+            html += '<div class="nowPlayingInfo hiddenOnIdle">';
+            html += '<div class="nowPlayingImage"></div>';
+            html += '<div class="nowPlayingTabs"></div>';
+            html += '</div>'; // nowPlayingInfo
+
+            html += '<paper-icon-button icon="skip-previous" class="previousTrackButton mediaButton videoTrackControl" onclick="MediaPlayer.previousTrack();"></paper-icon-button>';
+
+            html += '<paper-icon-button id="video-playButton" icon="play-arrow" class="mediaButton unpauseButton" onclick="MediaPlayer.unpause();"></paper-icon-button>';
+            html += '<paper-icon-button id="video-pauseButton" icon="pause" class="mediaButton pauseButton" onclick="MediaPlayer.pause();"></paper-icon-button>';
+
+            html += '<paper-icon-button icon="skip-next" class="nextTrackButton mediaButton videoTrackControl" onclick="MediaPlayer.nextTrack();"></paper-icon-button>';
+
+            html += '<paper-slider pin step=".1" min="0" max="100" value="0" class="videoPositionSlider" style="width:300px;vertical-align:middle;margin-left:-1em;"></paper-slider>';
+
+            html += '<div class="currentTime">--:--</div>';
+
+            html += '<paper-icon-button icon="volume-up" class="muteButton mediaButton" onclick="MediaPlayer.mute();"></paper-icon-button>';
+            html += '<paper-icon-button icon="volume-off" class="unmuteButton mediaButton" onclick="MediaPlayer.unMute();"></paper-icon-button>';
+
+            html += '<paper-slider pin step="1" min="0" max="100" value="0" class="videoVolumeSlider" style="width:100px;vertical-align:middle;margin-left:-1em;"></paper-slider>';
+
+            html += '<paper-icon-button icon="fullscreen" class="mediaButton fullscreenButton" onclick="MediaPlayer.toggleFullscreen();" id="video-fullscreenButton"></paper-icon-button>';
+
+            html += '</div>'; // videoControls
+
+            html += '</div>'; // videoPlayer
+            html += '</div>'; // videoBackdrop
+            html += '</div>'; // mediaPlayer
+
+            var div = document.createElement('div');
+            div.innerHTML = html;
+            document.body.appendChild(div);
+        }
+
+        Dashboard.ready(function () {
+
+            ensureVideoPlayerElements();
 
             var parent = $("#mediaPlayer");
+
             muteButton = $('.muteButton', parent);
             unmuteButton = $('.unmuteButton', parent);
             currentTimeElement = $('.currentTime', parent);
 
-            positionSlider = $(".positionSlider", parent).on('slidestart', function (e) {
+            positionSlider = $(".videoPositionSlider", parent).on('change', onPositionSliderChange)[0];
 
-                isPositionSliderActive = true;
+            positionSlider._setPinValue = function (value) {
 
-            }).on('slidestop', onPositionSliderChange);
+                if (!self.currentMediaSource || !self.currentMediaSource.RunTimeTicks) {
+                    this.pinValue = '--:--';
+                    return;
+                }
 
-            volumeSlider = $('.volumeSlider', parent).on('slidestop', function () {
+                var ticks = self.currentMediaSource.RunTimeTicks;
+                ticks /= 100;
+                ticks *= value;
+
+                this.pinValue = Dashboard.getDisplayTime(ticks);
+            };
+
+            volumeSlider = $('.videoVolumeSlider', parent).on('change', function () {
 
                 var vol = this.value;
 
                 updateVolumeButtons(vol);
-                self.setVolume(vol * 100);
-            });
-
-            var trackChange = false;
-
-            var tooltip = $('<div id="slider-tooltip"></div>');
-
-            $(".videoControls .positionSliderContainer .slider").on("change", function (e) {
-                if (!trackChange) return;
-
-                var pct = $(this).val();
-
-                var time = self.currentDurationTicks * (Number(pct) * .01);
-
-                var tooltext = Dashboard.getDisplayTime(time);
-
-                tooltip.text(tooltext);
-
-                console.log("slidin", pct, self.currentDurationTicks, time);
-
-            }).on("slidestart", function (e) {
-                trackChange = true;
-
-                var handle = $(".videoControls .positionSliderContainer .ui-slider-handle");
-
-                handle.after(tooltip);
-            }).on("slidestop", function (e) {
-                trackChange = false;
-
-                tooltip.remove();
-            });
+                self.setVolume(vol);
+            })[0];
         });
 
         var idleHandlerTimeout;
@@ -623,7 +736,7 @@
                 idleState = true;
                 $('.hiddenOnIdle').addClass("inactive");
                 $('#videoPlayer').addClass('idlePlayer');
-            }, 4000);
+            }, 3500);
         }
 
         function updateVolumeButtons(vol) {
@@ -744,282 +857,73 @@
             return html;
         }
 
-        function getAudioTracksHtml() {
-
-            var streams = self.currentMediaSource.MediaStreams.filter(function (currentStream) {
-                return currentStream.Type == "Audio";
-            });
-
-            var currentIndex = getParameterByName('AudioStreamIndex', self.getCurrentSrc(self.currentMediaRenderer));
-
-            var html = '';
-            html += '<div class="videoPlayerPopupContent">';
-            html += '<ul data-role="listview" data-inset="true"><li data-role="list-divider">' + Globalize.translate('HeaderAudioTracks') + '</li>';
-            html += '</ul>';
-
-            html += '<div class="videoPlayerPopupScroller">';
-            html += '<ul data-role="listview" data-inset="true">';
-
-            html += streams.map(function (stream) {
-
-                var cssClass = "mediaPopupOption";
-
-                var selected = stream.Index == currentIndex;
-
-                // Need to embed onclick handler due to delegation not working in iOS cordova
-                var onclick = '';
-
-                if (selected) {
-                    cssClass += ' selectedMediaPopupOption';
-                } else {
-                    onclick = ' onclick="MediaPlayer.onAudioOptionSelected(this);"';
-                }
-
-                var optionHtml = '<li><a' + onclick + ' data-value="' + stream.Index + '" class="' + cssClass + '" href="#">';
-
-                optionHtml += '<p style="margin:0;">';
-
-                if (selected) {
-                    optionHtml += '<img src="css/images/checkmarkgreen.png" style="width:18px;border-radius:3px;margin-right:.5em;vertical-align:middle;" />';
-                }
-
-                var textLines = [];
-                textLines.push(stream.Language || Globalize.translate('LabelUnknownLanguage'));
-
-                var attributes = [];
-
-                if (stream.Codec) {
-                    attributes.push(stream.Codec);
-                }
-                if (stream.Profile) {
-                    attributes.push(stream.Profile);
-                }
-
-                if (stream.BitRate) {
-                    attributes.push((Math.floor(stream.BitRate / 1000)) + ' kbps');
-                }
-
-                if (stream.Channels) {
-                    attributes.push(stream.Channels + ' ch');
-                }
-
-                if (stream.IsDefault) {
-                    attributes.push('(D)');
-                }
-
-                if (attributes.length) {
-                    textLines.push(attributes.join('&nbsp;&#149;&nbsp;'));
-                }
-
-                optionHtml += textLines.join('<br/>');
-
-                optionHtml += '</p>';
-
-                optionHtml += '</a></li>';
-
-                return optionHtml;
-
-            }).join('');
-
-            html += '</ul>';
-            html += '</div>';
-
-            html += '</div>';
-
-            return html;
+        function onPopState() {
+            // Stop playback on browser back button nav
+            self.stop();
+            return;
         }
 
-        function getSubtitleTracksHtml() {
-
-            var streams = self.currentMediaSource.MediaStreams.filter(function (currentStream) {
-                return currentStream.Type == "Subtitle";
-            });
-
-            var currentIndex = self.currentSubtitleStreamIndex || -1;
-
-            streams.unshift({
-                Index: -1,
-                Language: "Off"
-            });
-
-            var html = '';
-            html += '<div class="videoPlayerPopupContent">';
-            html += '<ul data-role="listview" data-inset="true"><li data-role="list-divider">' + Globalize.translate('HeaderSubtitles') + '</li>';
-            html += '</ul>';
-
-            html += '<div class="videoPlayerPopupScroller">';
-            html += '<ul data-role="listview" data-inset="true">';
-
-            html += streams.map(function (stream) {
-
-                var cssClass = "mediaPopupOption";
-
-                var selected = stream.Index == currentIndex;
-
-                // Need to embed onclick handler due to delegation not working in iOS cordova
-                var onclick = '';
-
-                if (selected) {
-                    cssClass += ' selectedMediaPopupOption';
-                } else {
-                    onclick = ' onclick="MediaPlayer.onSubtitleOptionSelected(this);"';
-                }
-
-                var optionHtml = '<li><a' + onclick + ' data-value="' + stream.Index + '" class="' + cssClass + '" href="#">';
-
-                optionHtml += '<p style="margin:0;">';
-
-                if (selected) {
-                    optionHtml += '<img src="css/images/checkmarkgreen.png" style="width:18px;border-radius:3px;margin-right:.5em;vertical-align:middle;" />';
-                }
-
-                var textLines = [];
-                textLines.push(stream.Language || Globalize.translate('LabelUnknownLanguage'));
-
-                if (stream.Codec) {
-                    textLines.push(stream.Codec);
-                }
-
-                var attributes = [];
-
-                if (stream.IsDefault) {
-                    attributes.push('Default');
-                }
-                if (stream.IsForced) {
-                    attributes.push('Forced');
-                }
-                if (stream.IsExternal) {
-                    attributes.push('External');
-                }
-
-                if (attributes.length) {
-                    textLines.push(attributes.join('&nbsp;&#149;&nbsp;'));
-                }
-
-                optionHtml += textLines.join('<br/>');
-
-                optionHtml += '</p>';
-
-                optionHtml += '</a></li>';
-
-                return optionHtml;
-
-            }).join('');
-
-            html += '</ul>';
-            html += '</div>';
-
-            html += '</div>';
-
-            return html;
+        function onBodyMouseMove() {
+            idleHandler();
         }
 
-        function getQualityFlyoutHtml() {
+        function onFullScreenChange() {
+            if (self.isFullScreen()) {
+                enterFullScreen();
+                idleState = true;
 
-            var currentSrc = self.getCurrentSrc(self.currentMediaRenderer).toLowerCase();
-            var isStatic = currentSrc.indexOf('static=true') != -1;
-
-            var videoStream = self.currentMediaSource.MediaStreams.filter(function (stream) {
-                return stream.Type == "Video";
-            })[0];
-            var videoWidth = videoStream ? videoStream.Width : null;
-
-            var options = self.getVideoQualityOptions(videoWidth);
-
-            if (isStatic) {
-                options[0].name = "Direct";
+            } else {
+                exitFullScreenToWindow();
             }
-
-            var html = '';
-
-            html += '<div class="videoPlayerPopupContent">';
-            html += '<ul data-role="listview" data-inset="true"><li data-role="list-divider">' + Globalize.translate('HeaderVideoQuality') + '</li>';
-            html += '</ul>';
-
-            html += '<div class="videoPlayerPopupScroller">';
-            html += '<ul data-role="listview" data-inset="true">';
-
-            html += options.map(function (option) {
-
-                var cssClass = "mediaPopupOption";
-                // Need to embed onclick handler due to delegation not working in iOS cordova
-                var onclick = '';
-
-                if (option.selected) {
-                    cssClass += ' selectedMediaPopupOption';
-                } else {
-                    onclick = ' onclick="MediaPlayer.onQualityOptionSelected(this);"';
-                }
-
-                var optionHtml = '<li><a' + onclick + ' data-value="' + option.bitrate + '" class="' + cssClass + '" href="#">';
-
-                optionHtml += '<p style="margin:0;">';
-
-                if (option.selected) {
-                    optionHtml += '<img src="css/images/checkmarkgreen.png" style="width:18px;border-radius:3px;margin-right:.5em;vertical-align:middle;" />';
-                }
-
-                optionHtml += option.name;
-
-                optionHtml += '</p>';
-
-                optionHtml += '</a></li>';
-
-                return optionHtml;
-
-            }).join('');
-
-            html += '</ul>';
-            html += '</div>';
-
-            html += '</div>';
-
-            return html;
         }
 
-        function bindEventsForPlayback() {
+        function bindEventsForPlayback(mediaRenderer) {
 
             var hideElementsOnIdle = true;
 
             if (hideElementsOnIdle) {
-                $('.itemVideo').off('mousemove.videoplayer keydown.videoplayer scroll.videoplayer mousedown.videoplayer', idleHandler).on('mousemove.videoplayer keydown.videoplayer scroll.videoplayer mousedown.videoplayer', idleHandler).trigger('mousemove');
+
+                var itemVideo = document.querySelector('.itemVideo');
+                if (itemVideo) {
+                    Events.on(itemVideo, 'mousemove', idleHandler);
+                    Events.on(itemVideo, 'keydown', idleHandler);
+                    Events.on(itemVideo, 'scroll', idleHandler);
+                    Events.on(itemVideo, 'mousedown', idleHandler);
+                    idleHandler();
+                }
             }
 
-            $(document).on('webkitfullscreenchange.videoplayer mozfullscreenchange.videoplayer msfullscreenchange.videoplayer fullscreenchange.videoplayer', function (e) {
+            $(document).on('webkitfullscreenchange', onFullScreenChange);
+            $(document).on('mozfullscreenchange', onFullScreenChange);
+            $(document).on('msfullscreenchange', onFullScreenChange);
+            $(document).on('fullscreenchange', onFullScreenChange);
 
-                if (self.isFullScreen()) {
-                    enterFullScreen();
-                    idleState = true;
-
-                } else {
-                    exitFullScreenToWindow();
-                }
-            });
-
-            // Stop playback on browser back button nav
-            $(window).one("popstate.videoplayer", function () {
-                self.stop();
-                return;
-            });
+            $(window).one("popstate", onPopState);
 
             if (hideElementsOnIdle) {
-                $(document.body).on("mousemove.videoplayer", function () {
-
-                    idleHandler(this);
-                });
+                $(document.body).on("mousemove", onBodyMouseMove);
             }
         }
 
-        function unbindEventsForPlayback() {
+        function unbindEventsForPlayback(mediaRenderer) {
 
-            $(document).off('.videoplayer');
+            $(document).off('webkitfullscreenchange', onFullScreenChange);
+            $(document).off('mozfullscreenchange', onFullScreenChange);
+            $(document).off('msfullscreenchange', onFullScreenChange);
+            $(document).off('fullscreenchange', onFullScreenChange);
 
             // Stop playback on browser back button nav
-            $(window).off("popstate.videoplayer");
+            $(window).off("popstate", onPopState);
 
-            $(document.body).off("mousemove.videoplayer");
+            $(document.body).off("mousemove", onBodyMouseMove);
 
-            $('.itemVideo').off('mousemove.videoplayer keydown.videoplayer scroll.videoplayer mousedown.videoplayer');
+            var itemVideo = document.querySelector('.itemVideo');
+            if (itemVideo) {
+                Events.off(itemVideo, 'mousemove', idleHandler);
+                Events.off(itemVideo, 'keydown', idleHandler);
+                Events.off(itemVideo, 'scroll', idleHandler);
+                Events.off(itemVideo, 'mousedown', idleHandler);
+            }
         }
 
         self.canAutoPlayVideo = function () {
@@ -1045,7 +949,7 @@
 
             currentTimeElement.html('--:--');
 
-            unbindEventsForPlayback();
+            unbindEventsForPlayback(mediaRenderer);
         };
 
         self.playVideo = function (item, mediaSource, startPosition) {
@@ -1176,11 +1080,11 @@
             }
 
             if (AppInfo.hasPhysicalVolumeButtons) {
-                $('.volumeSliderContainer', videoControls).addClass('hide');
+                $(volumeSlider).visible(false);
                 $('.muteButton', videoControls).addClass('hide');
                 $('.unmuteButton', videoControls).addClass('hide');
             } else {
-                $('.volumeSliderContainer', videoControls).removeClass('hide');
+                $(volumeSlider).visible(true);
                 $('.muteButton', videoControls).removeClass('hide');
                 $('.unmuteButton', videoControls).removeClass('hide');
             }
@@ -1197,7 +1101,7 @@
 
             mediaRenderer.volume(initialVolume);
 
-            volumeSlider.val(initialVolume).slider('refresh');
+            volumeSlider.value = initialVolume * 100;
             updateVolumeButtons(initialVolume);
 
             $(mediaRenderer).on("volumechange.mediaplayerevent", function (e) {
@@ -1206,9 +1110,8 @@
 
             }).one("playing.mediaplayerevent", function () {
 
-
                 // For some reason this is firing at the start, so don't bind until playback has begun
-                $(this).on("ended.playbackstopped", self.onPlaybackStopped).one('ended.playnext', self.playNextAfterEnded);
+                $(this).on("ended", self.onPlaybackStopped).one('ended', self.playNextAfterEnded);
 
                 self.onPlaybackStart(this, item, mediaSource);
 
@@ -1232,7 +1135,7 @@
 
             }).on("timeupdate.mediaplayerevent", function () {
 
-                if (!isPositionSliderActive) {
+                if (!positionSlider.dragging) {
 
                     self.setCurrentTime(self.getCurrentTicks(this), positionSlider, currentTimeElement);
                 }
@@ -1279,13 +1182,13 @@
                 }
             });
 
-            bindEventsForPlayback();
+            bindEventsForPlayback(mediaRenderer);
 
-            mediaPlayerContainer.trigger("create");
+            mediaPlayerContainer.trigger('create');
 
             self.currentSubtitleStreamIndex = mediaSource.DefaultSubtitleStreamIndex;
 
-            $('body').addClass('bodyWithPopupOpen');
+            $(document.body).addClass('bodyWithPopupOpen');
 
             self.currentMediaRenderer = mediaRenderer;
             self.currentDurationTicks = self.currentMediaSource.RunTimeTicks;
@@ -1297,23 +1200,28 @@
             var index = self.currentPlaylistIndex(null);
             var length = self.playlist.length;
             var requiresNativeControls = !self.enableCustomVideoControls();
-            var controls = $(requiresNativeControls ? '.videoAdvancedControls' : '.videoControls');
 
             if (length < 2) {
                 $('.videoTrackControl').hide();
                 return;
             }
 
+            var controls = requiresNativeControls ? '.videoAdvancedControls' : '.videoControls';
+            controls = document.querySelector(controls);
+
+            var previousTrackButton = controls.getElementsByClassName('previousTrackButton')[0];
+            var nextTrackButton = controls.getElementsByClassName('nextTrackButton')[0];
+
             if (index === 0) {
-                $('.previousTrackButton', controls).attr('disabled', 'disabled');
+                previousTrackButton.setAttribute('disabled', 'disabled');
             } else {
-                $('.previousTrackButton', controls).removeAttr('disabled');
+                previousTrackButton.removeAttribute('disabled');
             }
 
             if ((index + 1) >= length) {
-                $('.nextTrackButton', controls).attr('disabled', 'disabled');
+                nextTrackButton.setAttribute('disabled', 'disabled');
             } else {
-                $('.nextTrackButton', controls).removeAttr('disabled');
+                nextTrackButton.removeAttribute('disabled');
             }
 
             $('.videoTrackControl', controls).show();

dashboard-ui/scripts/mediaplayer.js

@@ -1,4 +1,4 @@
-(function (document, setTimeout, clearTimeout, screen, store, $, setInterval, window) {
+(function (document, setTimeout, clearTimeout, screen, $, setInterval, window) {
 
     function mediaPlayer() {
 
@@ -38,53 +38,57 @@
 
         var canPlayAac = document.createElement('audio').canPlayType('audio/aac').replace(/no/, '');
 
-        self.getVideoQualityOptions = function (videoWidth) {
+        self.getVideoQualityOptions = function (videoWidth, videoHeight) {
 
             var bitrateSetting = AppSettings.maxStreamingBitrate();
 
             var maxAllowedWidth = videoWidth || 4096;
+            var maxAllowedHeight = videoHeight || 2304;
 
             var options = [];
 
             // Some 1080- videos are reported as 1912?
             if (maxAllowedWidth >= 1900) {
-                options.push({ name: '1080p - 30Mbps', maxWidth: 1920, bitrate: 30000000 });
-                options.push({ name: '1080p - 25Mbps', maxWidth: 1920, bitrate: 25000000 });
-                options.push({ name: '1080p - 20Mbps', maxWidth: 1920, bitrate: 20000000 });
-                options.push({ name: '1080p - 15Mbps', maxWidth: 1920, bitrate: 15000000 });
-                options.push({ name: '1080p - 10Mbps', maxWidth: 1920, bitrate: 10000000 });
-                options.push({ name: '1080p - 8Mbps', maxWidth: 1920, bitrate: 8000000 });
-                options.push({ name: '1080p - 6Mbps', maxWidth: 1920, bitrate: 6000000 });
-                options.push({ name: '1080p - 5Mbps', maxWidth: 1920, bitrate: 5000000 });
+
+                options.push({ name: '1080p - 30Mbps', maxHeight: 1080, bitrate: 30000000 });
+                options.push({ name: '1080p - 25Mbps', maxHeight: 1080, bitrate: 25000000 });
+                options.push({ name: '1080p - 20Mbps', maxHeight: 1080, bitrate: 20000000 });
+                options.push({ name: '1080p - 15Mbps', maxHeight: 1080, bitrate: 15000000 });
+                options.push({ name: '1080p - 10Mbps', maxHeight: 1080, bitrate: 10000000 });
+                options.push({ name: '1080p - 8Mbps', maxHeight: 1080, bitrate: 8000000 });
+                options.push({ name: '1080p - 6Mbps', maxHeight: 1080, bitrate: 6000000 });
+                options.push({ name: '1080p - 5Mbps', maxHeight: 1080, bitrate: 5000000 });
+
             } else if (maxAllowedWidth >= 1260) {
-                options.push({ name: '720p - 10Mbps', maxWidth: 1280, bitrate: 10000000 });
-                options.push({ name: '720p - 8Mbps', maxWidth: 1280, bitrate: 8000000 });
-                options.push({ name: '720p - 6Mbps', maxWidth: 1280, bitrate: 6000000 });
-                options.push({ name: '720p - 5Mbps', maxWidth: 1280, bitrate: 5000000 });
-            } else if (maxAllowedWidth >= 460) {
-                options.push({ name: '480p - 4Mbps', maxWidth: 720, bitrate: 4000000 });
-                options.push({ name: '480p - 3Mbps', maxWidth: 720, bitrate: 3000000 });
-                options.push({ name: '480p - 2.5Mbps', maxWidth: 720, bitrate: 2500000 });
-                options.push({ name: '480p - 2Mbps', maxWidth: 720, bitrate: 2000000 });
-                options.push({ name: '480p - 1.5Mbps', maxWidth: 720, bitrate: 1500000 });
+                options.push({ name: '720p - 10Mbps', maxHeight: 720, bitrate: 10000000 });
+                options.push({ name: '720p - 8Mbps', maxHeight: 720, bitrate: 8000000 });
+                options.push({ name: '720p - 6Mbps', maxHeight: 720, bitrate: 6000000 });
+                options.push({ name: '720p - 5Mbps', maxHeight: 720, bitrate: 5000000 });
+
+            } else if (maxAllowedWidth >= 700) {
+                options.push({ name: '480p - 4Mbps', maxHeight: 480, bitrate: 4000000 });
+                options.push({ name: '480p - 3Mbps', maxHeight: 480, bitrate: 3000000 });
+                options.push({ name: '480p - 2.5Mbps', maxHeight: 480, bitrate: 2500000 });
+                options.push({ name: '480p - 2Mbps', maxHeight: 480, bitrate: 2000000 });
+                options.push({ name: '480p - 1.5Mbps', maxHeight: 480, bitrate: 1500000 });
             }
 
             if (maxAllowedWidth >= 1260) {
-                options.push({ name: '720p - 4Mbps', maxWidth: 1280, bitrate: 4000000 });
-                options.push({ name: '720p - 3Mbps', maxWidth: 1280, bitrate: 3000000 });
-                options.push({ name: '720p - 2Mbps', maxWidth: 1280, bitrate: 2000000 });
+                options.push({ name: '720p - 4Mbps', maxHeight: 720, bitrate: 4000000 });
+                options.push({ name: '720p - 3Mbps', maxHeight: 720, bitrate: 3000000 });
+                options.push({ name: '720p - 2Mbps', maxHeight: 720, bitrate: 2000000 });
 
                 // The extra 1 is because they're keyed off the bitrate value
-                options.push({ name: '720p - 1.5Mbps', maxWidth: 1280, bitrate: 1500001 });
-                options.push({ name: '720p - 1Mbps', maxWidth: 1280, bitrate: 1000001 });
+                options.push({ name: '720p - 1.5Mbps', maxHeight: 720, bitrate: 1500001 });
+                options.push({ name: '720p - 1Mbps', maxHeight: 720, bitrate: 1000001 });
             }
 
-            options.push({ name: '480p - 1.0Mbps', maxWidth: 720, bitrate: 1000000 });
-            options.push({ name: '480p - 720kbps', maxWidth: 720, bitrate: 720000 });
-            options.push({ name: '480p - 420kbps', maxWidth: 720, bitrate: 420000 });
-            options.push({ name: '360p', maxWidth: 640, bitrate: 400000 });
-            options.push({ name: '240p', maxWidth: 426, bitrate: 320000 });
-            options.push({ name: '144p', maxWidth: 256, bitrate: 192000 });
+            options.push({ name: '480p - 1.0Mbps', maxHeight: 480, bitrate: 1000000 });
+            options.push({ name: '480p - 720kbps', maxHeight: 480, bitrate: 720000 });
+            options.push({ name: '480p - 420kbps', maxHeight: 480, bitrate: 420000 });
+            options.push({ name: '360p', maxHeight: 360, bitrate: 400000 });
+            options.push({ name: '240p', maxHeight: 240, bitrate: 320000 });
+            options.push({ name: '144p', maxHeight: 144, bitrate: 192000 });
 
             var i, length, option;
             var selectedIndex = -1;
@@ -107,12 +111,12 @@
             return options;
         };
 
-        self.getDeviceProfile = function (maxWidth) {
+        self.getDeviceProfile = function (maxHeight) {
 
-            if (!maxWidth) {
-                maxWidth = self.getVideoQualityOptions().filter(function (q) {
+            if (!maxHeight) {
+                maxHeight = self.getVideoQualityOptions().filter(function (q) {
                     return q.selected;
-                })[0].maxWidth;
+                })[0].maxHeight;
             }
 
             var bitrateSetting = AppSettings.maxStreamingBitrate();
@@ -161,6 +165,15 @@
                 });
             }
 
+            var directPlayAudioContainers = AppInfo.directPlayAudioContainers;
+
+            if (directPlayAudioContainers && directPlayAudioContainers.length) {
+                profile.DirectPlayProfiles.push({
+                    Container: directPlayAudioContainers.join(','),
+                    Type: 'Audio'
+                });
+            }
+
             if (canPlayWebm) {
                 profile.DirectPlayProfiles.push({
                     Container: 'webm',
@@ -339,8 +352,8 @@
                 },
                 {
                     Condition: 'LessThanEqual',
-                    Property: 'Width',
-                    Value: maxWidth
+                    Property: 'Height',
+                    Value: maxHeight
                 }]
             });
 
@@ -356,8 +369,8 @@
                 },
                 {
                     Condition: 'LessThanEqual',
-                    Property: 'Width',
-                    Value: maxWidth
+                    Property: 'Height',
+                    Value: maxHeight
                 }]
             });
 
@@ -394,6 +407,17 @@
             return profile;
         };
 
+        var supportsTextTracks;
+        self.supportsTextTracks = function () {
+
+            if (supportsTextTracks == null) {
+                supportsTextTracks = document.createElement('video').textTracks != null;
+            }
+
+            // For now, until ready
+            return supportsTextTracks;
+        };
+
         self.updateCanClientSeek = function (mediaRenderer) {
 
             var duration = mediaRenderer.duration();
@@ -407,7 +431,7 @@
 
         self.getCurrentTicks = function (mediaRenderer) {
 
-            var playerTime = Math.floor(10000000 * (mediaRenderer || self.currentMediaRenderer).currentTime());
+            var playerTime = Math.floor(10000 * (mediaRenderer || self.currentMediaRenderer).currentTime());
 
             playerTime += self.startTimeTicksOffset;
 
@@ -449,15 +473,15 @@
         self.canPlayNativeHls = function () {
 
             // Don't use HLS on android 4.x, regardless of what the browser reports
-            if ($.browser.android) {
-                var agent = navigator.userAgent.toLowerCase();
+            //if ($.browser.android) {
+            //    var agent = navigator.userAgent.toLowerCase();
 
-                for (var i = 0; i <= 4; i++) {
-                    if (agent.indexOf('android 4.' + i) != -1) {
-                        return false;
-                    }
-                }
-            }
+            //    for (var i = 0; i <= 4; i++) {
+            //        if (agent.indexOf('android 4.' + i) != -1) {
+            //            return false;
+            //        }
+            //    }
+            //}
 
             var media = document.createElement('video');
 
@@ -486,7 +510,7 @@
 
             if (canClientSeek && params == null) {
 
-                mediaRenderer.currentTime(ticks / (1000 * 10000));
+                mediaRenderer.currentTime(ticks / 10000);
                 return;
             }
 
@@ -533,11 +557,16 @@
 
             clearProgressInterval();
 
-            $(mediaRenderer).off('ended.playbackstopped').off('ended.playnext').one("play", function () {
+            Events.off(mediaRenderer, 'ended', self.onPlaybackStopped);
+            Events.off(mediaRenderer, 'ended', self.playNextAfterEnded);
+            
+            $(mediaRenderer).one("play", function () {
 
                 self.updateCanClientSeek(this);
 
-                $(this).on('ended.playbackstopped', self.onPlaybackStopped).one('ended.playnext', self.playNextAfterEnded);
+                Events.on(this, 'ended', self.onPlaybackStopped);
+                
+                $(this).one('ended', self.playNextAfterEnded);
 
                 self.startProgressInterval();
                 sendProgressUpdate();
@@ -548,14 +577,14 @@
                 ApiClient.stopActiveEncodings(playSessionId).done(function () {
 
                     self.startTimeTicksOffset = newPositionTicks;
-                    mediaRenderer.setCurrentSrc(url);
+                    mediaRenderer.setCurrentSrc(url, self.currentItem, self.currentMediaSource);
 
                 });
 
                 self.updateTextStreamUrls(newPositionTicks || 0);
             } else {
                 self.startTimeTicksOffset = newPositionTicks;
-                mediaRenderer.setCurrentSrc(url);
+                mediaRenderer.setCurrentSrc(url, self.currentItem, self.currentMediaSource);
             }
         }
 
@@ -575,13 +604,14 @@
                     var percent = ticks / self.currentDurationTicks;
                     percent *= 100;
 
-                    positionSlider.val(percent).slider('enable').slider('refresh');
+                    positionSlider.disabled = false;
+                    positionSlider.value = percent;
                 }
             } else {
 
                 if (positionSlider) {
 
-                    positionSlider.slider('disable').slider('refresh');
+                    positionSlider.disabled = true;
                 }
             }
 
@@ -591,19 +621,7 @@
 
             var state = self.getPlayerStateInternal(self.currentMediaRenderer, self.currentItem, self.currentMediaSource);
 
-            $(self).trigger('positionchange', [state]);
-        };
-
-        var supportsTextTracks;
-
-        self.supportsTextTracks = function () {
-
-            if (supportsTextTracks == null) {
-                supportsTextTracks = document.createElement('video').textTracks != null;
-            }
-
-            // For now, until ready
-            return supportsTextTracks;
+            Events.trigger(self, 'positionchange', [state]);
         };
 
         self.canQueueMediaType = function (mediaType) {
@@ -843,7 +861,7 @@
             }
 
             if (self.isPlaying()) {
-                self.stop();
+                self.stop(false);
             }
 
             if (item.MediaType !== 'Audio' && item.MediaType !== 'Video') {
@@ -1029,7 +1047,7 @@
 
             if (newItem) {
 
-                console.log('playing next track');
+                Logger.log('playing next track');
 
                 self.playInternal(newItem, 0, function () {
                     self.setPlaylistState(newIndex);
@@ -1167,7 +1185,7 @@
 
             if (self.currentMediaRenderer) {
 
-                console.log('MediaPlayer toggling mute');
+                Logger.log('MediaPlayer toggling mute');
 
                 if (self.volume()) {
                     self.mute();
@@ -1196,7 +1214,7 @@
 
             if (self.currentMediaRenderer) {
 
-                console.log('MediaPlayer setting volume to ' + val);
+                Logger.log('MediaPlayer setting volume to ' + val);
                 self.currentMediaRenderer.volume(val / 100);
 
                 self.onVolumeChanged(self.currentMediaRenderer);
@@ -1208,13 +1226,13 @@
         self.saveVolume = function (val) {
 
             if (val) {
-                store.setItem("volume", val);
+                appStorage.setItem("volume", val);
             }
 
         };
 
         self.getSavedVolume = function () {
-            return store.getItem("volume") || 0.5;
+            return appStorage.getItem("volume") || 0.5;
         };
 
         self.shuffle = function (id) {
@@ -1332,7 +1350,7 @@
 
         };
 
-        self.stop = function () {
+        self.stop = function (destroyRenderer) {
 
             var mediaRenderer = self.currentMediaRenderer;
 
@@ -1340,16 +1358,21 @@
 
                 mediaRenderer.stop();
 
-                $(mediaRenderer).off("ended.playnext").one("ended", function () {
+                Events.off(mediaRenderer, 'ended', self.playNextAfterEnded);
 
-                    $(this).off();
+                $(mediaRenderer).one("ended", function() {
+
+                    $(this).off('.mediaplayerevent');
+
+                    this.cleanup(destroyRenderer);
 
-                    this.destroy();
                     self.currentMediaRenderer = null;
                     self.currentItem = null;
                     self.currentMediaSource = null;
 
-                }).trigger("ended");
+                });
+                
+                Events.trigger(mediaRenderer, "ended");
 
             } else {
                 self.currentMediaRenderer = null;
@@ -1517,7 +1540,7 @@
 
             var state = self.getPlayerStateInternal(mediaRenderer, item, mediaSource);
 
-            $(self).trigger('playbackstart', [state]);
+            Events.trigger(self, 'playbackstart', [state]);
 
             self.startProgressInterval();
         };
@@ -1528,7 +1551,7 @@
 
             var state = self.getPlayerStateInternal(mediaRenderer, self.currentItem, self.currentMediaSource);
 
-            $(self).trigger('volumechange', [state]);
+            Events.trigger(self, 'volumechange', [state]);
         };
 
         self.cleanup = function () {
@@ -1537,13 +1560,15 @@
 
         self.onPlaybackStopped = function () {
 
-            console.log('playback stopped');
+            Logger.log('playback stopped');
 
-            $('body').removeClass('bodyWithPopupOpen');
+            document.body.classList.remove('bodyWithPopupOpen');
 
             var mediaRenderer = this;
 
-            $(mediaRenderer).off('.mediaplayerevent').off('ended.playbackstopped');
+            Events.off(mediaRenderer, '.mediaplayerevent');
+            
+            Events.off(mediaRenderer, 'ended', self.onPlaybackStopped);
 
             self.cleanup(mediaRenderer);
 
@@ -1562,17 +1587,17 @@
 
             var state = self.getPlayerStateInternal(mediaRenderer, item, mediaSource);
 
-            $(self).trigger('playbackstop', [state]);
+            Events.trigger(self, 'playbackstop', [state]);
         };
 
         self.onPlaystateChange = function (mediaRenderer) {
 
             var state = self.getPlayerStateInternal(mediaRenderer, self.currentItem, self.currentMediaSource);
 
-            $(self).trigger('playstatechange', [state]);
+            Events.trigger(self, 'playstatechange', [state]);
         };
 
-        $(window).on("beforeunload", function () {
+        Events.on(window, "beforeunload", function () {
 
             // Try to report playback stopped before the browser closes
             if (self.currentItem && self.currentMediaRenderer && currentProgressInterval) {
@@ -1657,26 +1682,30 @@
             // Set volume first to avoid an audible change
             mediaRenderer.volume(initialVolume);
             mediaRenderer.setPoster(self.getPosterUrl(item));
-            mediaRenderer.setCurrentSrc(audioUrl);
+            mediaRenderer.setCurrentSrc(audioUrl, item, mediaSource);
 
-            $(mediaRenderer).on("volumechange.mediaplayerevent", function () {
+            Events.on(mediaRenderer, "volumechange.mediaplayerevent", function() {
 
-                console.log('audio element event: volumechange');
+                Logger.log('audio element event: volumechange');
 
                 self.onVolumeChanged(this);
 
-            }).one("playing.mediaplayerevent", function () {
+            });
 
-                console.log('audio element event: playing');
+            $(mediaRenderer).one("playing.mediaplayerevent", function () {
+
+                Logger.log('audio element event: playing');
 
                 // For some reason this is firing at the start, so don't bind until playback has begun
-                $(this).on("ended.playbackstopped", self.onPlaybackStopped).one('ended.playnext', self.playNextAfterEnded);
+                Events.on(this, 'ended', self.onPlaybackStopped);
+
+                $(this).one('ended', self.playNextAfterEnded);
 
                 self.onPlaybackStart(this, item, mediaSource);
 
             }).on("pause.mediaplayerevent", function () {
 
-                console.log('audio element event: pause');
+                Logger.log('audio element event: pause');
 
                 self.onPlaystateChange(this);
 
@@ -1685,7 +1714,7 @@
 
             }).on("playing.mediaplayerevent", function () {
 
-                console.log('audio element event: playing');
+                Logger.log('audio element event: playing');
 
                 self.onPlaystateChange(this);
 
@@ -1716,4 +1745,4 @@
     });
 
 
-})(document, setTimeout, clearTimeout, screen, window.appStorage, $, setInterval, window);
+})(document, setTimeout, clearTimeout, screen, $, setInterval, window);

dashboard-ui/scripts/metadatasubtitles.js

@@ -32,7 +32,7 @@
 
         html += '</div>';
 
-        $('.downloadLanguages', page).html(html).trigger("create");
+        $('.downloadLanguages', page).html(html).trigger('create');
 
         var langs = config.DownloadLanguages || [];
 

dashboard-ui/scripts/moviecollections.js

@@ -33,21 +33,16 @@
             var user = response2[0];
 
             // Scroll back up so they can see the results from the beginning
-            $(document).scrollTop(0);
+            window.scrollTo(0, 0);
 
             var html = '';
 
-            var addiontalButtonsHtml = user.Policy.IsAdministrator ?
-                ('<button class="btnNewCollection" data-mini="true" data-icon="plus" data-inline="true" data-iconpos="notext">' + Globalize.translate('ButtonNew') + '</button>') :
-                '';
-
             $('.listTopPaging', page).html(LibraryBrowser.getQueryPagingHtml({
                 startIndex: query.StartIndex,
                 limit: query.Limit,
                 totalRecordCount: result.TotalRecordCount,
                 viewButton: true,
                 showLimit: false,
-                additionalButtonsHtml: addiontalButtonsHtml
             })).trigger('create');
 
             updateFilterControls(page);
@@ -116,10 +111,12 @@
                 $('.noItemsMessage', page).show();
             }
 
-            $('.itemsContainer', page).html(html).lazyChildren();
+            var elem = page.querySelector('.itemsContainer');
+            elem.innerHTML = html;
+            ImageLoader.lazyChildren(elem);
 
             if (trigger) {
-                $('.itemsContainer', page).trigger('create');
+                $(elem).trigger('create');
             }
 
             $('.btnNextPage', page).on('click', function () {
@@ -168,8 +165,6 @@
         $('#chkThemeSong', page).checked(query.HasThemeSong == true).checkboxradio('refresh');
         $('#chkThemeVideo', page).checked(query.HasThemeVideo == true).checkboxradio('refresh');
 
-        $('.alphabetPicker', page).alphaValue(query.NameStartsWithOrGreater);
-
         $('#selectPageSize', page).val(query.Limit).selectmenu('refresh');
     }
 
@@ -228,20 +223,6 @@
             reloadItems(page);
         });
 
-        $('.alphabetPicker', this).on('alphaselect', function (e, character) {
-
-            query.NameStartsWithOrGreater = character;
-            query.StartIndex = 0;
-
-            reloadItems(page);
-
-        }).on('alphaclear', function (e) {
-
-            query.NameStartsWithOrGreater = '';
-
-            reloadItems(page);
-        });
-
         $('#selectView', this).on('change', function () {
 
             view = this.value;
@@ -257,7 +238,7 @@
             reloadItems(page);
         });
 
-    }).on('pageshowready', "#boxsetsPage", function () {
+    }).on('pagebeforeshowready', "#boxsetsPage", function () {
 
         var page = this;
 
@@ -380,6 +361,9 @@
 
         $('.fldSelectedItemIds', panel).val(items.join(','));
 
+
+        require(['jqmicons']);
+
         if (items.length) {
             $('.fldSelectCollection', panel).show();
             populateCollections(panel);

dashboard-ui/scripts/moviegenres.js

@@ -25,7 +25,7 @@
         ApiClient.getGenres(Dashboard.getCurrentUserId(), query).done(function (result) {
 
             // Scroll back up so they can see the results from the beginning
-            $(document).scrollTop(0);
+            window.scrollTo(0, 0);
 
             var html = '';
 
@@ -85,7 +85,9 @@
                 });
             }
 
-            $('#items', page).html(html).lazyChildren();
+            var elem = page.querySelector('#items');
+            elem.innerHTML = html;
+            ImageLoader.lazyChildren(elem);
 
             $('.btnNextPage', page).on('click', function () {
                 query.StartIndex += query.Limit;
@@ -154,7 +156,7 @@
             LibraryBrowser.saveViewSetting(getSavedQueryKey(), view);
         });
 
-    }).on('pageshowready', "#movieGenresPage", function () {
+    }).on('pagebeforeshowready', "#movieGenresPage", function () {
 
         var page = this;
         query.ParentId = LibraryMenu.getTopParentId();

dashboard-ui/scripts/moviepeople.js

@@ -27,7 +27,7 @@
         ApiClient.getPeople(Dashboard.getCurrentUserId(), query).done(function (result) {
 
             // Scroll back up so they can see the results from the beginning
-            $(document).scrollTop(0);
+            window.scrollTo(0, 0);
 
             var html = '';
             var pagingHtml = LibraryBrowser.getQueryPagingHtml({
@@ -40,7 +40,7 @@
                 pageSizeKey: pageSizeKey
             });
 
-            $('.listTopPaging', page).html(pagingHtml).trigger('create');
+            page.querySelector('.listTopPaging').innerHTML = pagingHtml;
 
             updateFilterControls(page);
 
@@ -54,9 +54,9 @@
                 lazy: true
             });
 
-            var elem = $('#items', page).html(html).lazyChildren();
-
-            $(pagingHtml).appendTo(elem).trigger('create');
+            var elem = page.querySelector('#items');
+            elem.innerHTML = html + pagingHtml;
+            ImageLoader.lazyChildren(elem);
 
             $('.btnNextPage', page).on('click', function () {
                 query.StartIndex += query.Limit;
@@ -140,7 +140,7 @@
             reloadItems(page);
         });
 
-    }).on('pageshowready', "#moviePeoplePage", function () {
+    }).on('pagebeforeshowready', "#moviePeoplePage", function () {
 
         query.ParentId = LibraryMenu.getTopParentId();
 

dashboard-ui/scripts/movies.js

@@ -29,7 +29,7 @@
         ApiClient.getItems(userId, query).done(function (result) {
 
             // Scroll back up so they can see the results from the beginning
-            $(document).scrollTop(0);
+            window.scrollTo(0, 0);
 
             var html = '';
 
@@ -43,7 +43,7 @@
 
             });
 
-            $('.listTopPaging', page).html(pagingHtml).trigger('create');
+            page.querySelector('.listTopPaging').innerHTML = pagingHtml;
 
             updateFilterControls(page);
             var trigger = false;
@@ -129,14 +129,14 @@
                 });
             }
 
-            var elem = $('.itemsContainer', page).html(html).lazyChildren();
+            var elem = page.querySelector('.itemsContainer');
+            elem.innerHTML = html + pagingHtml;
+            ImageLoader.lazyChildren(elem);
 
             if (trigger) {
-                $(elem).trigger('create');
+                Events.trigger(elem, 'create');
             }
 
-            $(pagingHtml).appendTo(elem).trigger('create');
-
             $('.btnNextPage', page).on('click', function () {
                 query.StartIndex += query.Limit;
                 reloadItems(page);
@@ -399,7 +399,7 @@
             reloadItems(page);
         });
 
-    }).on('pageshowready', "#moviesPage", function () {
+    }).on('pagebeforeshowready', "#moviesPage", function () {
 
         query.ParentId = LibraryMenu.getTopParentId();
 

dashboard-ui/scripts/moviesrecommended.js

@@ -67,7 +67,7 @@
                 });
             }
 
-            $('#recentlyAddedItems', page).html(html).lazyChildren().trigger('create');
+            $('#recentlyAddedItems', page).html(html).lazyChildren();
         });
     }
 
@@ -128,7 +128,7 @@
                 });
             }
 
-            $('#resumableItems', page).html(html).lazyChildren().trigger('create');
+            $('#resumableItems', page).html(html).lazyChildren();
 
         });
     }
@@ -235,24 +235,27 @@
 
         $('.recommendations', page).createCardMenus();
 
-    }).on('pageshowready', "#moviesRecommendedPage", function () {
+    }).on('pagebeforeshowready', "#moviesRecommendedPage", function () {
 
         var parentId = LibraryMenu.getTopParentId();
 
         var page = this;
         var userId = Dashboard.getCurrentUserId();
 
+        var containers = page.querySelectorAll('.itemsContainer');
         if (enableScrollX()) {
-            $('.itemsContainer', page).addClass('hiddenScrollX');
+            $(containers).addClass('hiddenScrollX');
         } else {
-            $('.itemsContainer', page).removeClass('hiddenScrollX');
+            $(containers).removeClass('hiddenScrollX');
         }
 
-        loadResume(page, userId, parentId);
-        loadLatest(page, userId, parentId);
+        if (LibraryBrowser.needsRefresh(page)) {
+            loadResume(page, userId, parentId);
+            loadLatest(page, userId, parentId);
 
-        if (AppInfo.enableMovieHomeSuggestions) {
-            loadSuggestions(page, userId, parentId);
+            if (AppInfo.enableMovieHomeSuggestions) {
+                loadSuggestions(page, userId, parentId);
+            }
         }
 
     });

dashboard-ui/scripts/moviestudios.js

@@ -23,7 +23,7 @@
         ApiClient.getStudios(Dashboard.getCurrentUserId(), query).done(function (result) {
 
             // Scroll back up so they can see the results from the beginning
-            $(document).scrollTop(0);
+            window.scrollTo(0, 0);
 
             var html = '';
             var pagingHtml = LibraryBrowser.getQueryPagingHtml({
@@ -34,7 +34,7 @@
                 showLimit: false
             });
 
-            $('.listTopPaging', page).html(pagingHtml).trigger('create');
+            page.querySelector('.listTopPaging').innerHTML = pagingHtml;
 
             updateFilterControls(page);
 
@@ -48,9 +48,9 @@
                 lazy: true
             });
 
-            var elem = $('#items', page).html(html).lazyChildren().trigger('create');
-
-            $(pagingHtml).appendTo(elem).trigger('create');
+            var elem = page.querySelector('#items');
+            elem.innerHTML = html + pagingHtml;
+            ImageLoader.lazyChildren(elem);
 
             $('.btnNextPage', page).on('click', function () {
                 query.StartIndex += query.Limit;
@@ -99,7 +99,7 @@
             reloadItems(page);
         });
 
-    }).on('pageshowready', "#movieStudiosPage", function () {
+    }).on('pagebeforeshowready', "#movieStudiosPage", function () {
 
         query.ParentId = LibraryMenu.getTopParentId();
 

dashboard-ui/scripts/movietrailers.js

@@ -28,7 +28,7 @@
         ApiClient.getJSON(ApiClient.getUrl('Trailers', query)).done(function (result) {
 
             // Scroll back up so they can see the results from the beginning
-            $(document).scrollTop(0);
+            window.scrollTo(0, 0);
 
             if (result.Items.length) {
                 $('.noItemsMessage', page).hide();
@@ -46,7 +46,7 @@
                 showLimit: false
             });
 
-            $('.listTopPaging', page).html(pagingHtml).trigger('create');
+            page.querySelector('.listTopPaging').innerHTML = pagingHtml;
 
             updateFilterControls(page);
 
@@ -58,9 +58,9 @@
                 showDetailsMenu: true
             });
 
-            var elem = $('.itemsContainer', page).html(html).lazyChildren();
-
-            $(pagingHtml).appendTo(elem).trigger('create');
+            var elem = page.querySelector('.itemsContainer');
+            elem.innerHTML = html + pagingHtml;
+            ImageLoader.lazyChildren(elem);
 
             $('.btnNextPage', page).on('click', function () {
                 query.StartIndex += query.Limit;
@@ -212,7 +212,7 @@
 
         $('.popupTrailerReelForm').off('submit', onSubmit).on('submit', onSubmit);
 
-    }).on('pageshowready', "#movieTrailersPage", function () {
+    }).on('pagebeforeshowready', "#movieTrailersPage", function () {
 
         query.ParentId = LibraryMenu.getTopParentId();
 

dashboard-ui/scripts/musicalbumartists.js

@@ -28,7 +28,7 @@
         ApiClient.getAlbumArtists(Dashboard.getCurrentUserId(), query).done(function (result) {
 
             // Scroll back up so they can see the results from the beginning
-            $(document).scrollTop(0);
+            window.scrollTo(0, 0);
 
             var html = '';
             var pagingHtml = LibraryBrowser.getQueryPagingHtml({
@@ -41,7 +41,7 @@
                 pageSizeKey: pageSizeKey
             });
 
-            $('.listTopPaging', page).html(pagingHtml).trigger('create');
+            page.querySelector('.listTopPaging').innerHTML = pagingHtml;
 
             updateFilterControls(page);
             var trigger = false;
@@ -80,14 +80,14 @@
                 });
             }
 
-            var elem = $('#items', page).html(html).lazyChildren();
+            var elem = page.querySelector('#items');
+            elem.innerHTML = html + pagingHtml;
+            ImageLoader.lazyChildren(elem);
 
             if (trigger) {
-                elem.trigger('create');
+                $(elem).trigger('create');
             }
 
-            $(pagingHtml).appendTo(elem).trigger('create');
-
             $('.btnNextPage', page).on('click', function () {
                 query.StartIndex += query.Limit;
                 reloadItems(page);
@@ -190,7 +190,7 @@
             reloadItems(page);
         });
 
-    }).on('pageshowready', "#musicAlbumArtistsPage", function () {
+    }).on('pagebeforeshowready', "#musicAlbumArtistsPage", function () {
 
         var page = this;
         query.ParentId = LibraryMenu.getTopParentId();

dashboard-ui/scripts/musicalbums.js

@@ -27,7 +27,7 @@
         ApiClient.getItems(Dashboard.getCurrentUserId(), query).done(function (result) {
 
             // Scroll back up so they can see the results from the beginning
-            $(document).scrollTop(0);
+            window.scrollTo(0, 0);
 
             var html = '';
             var pagingHtml = LibraryBrowser.getQueryPagingHtml({
@@ -39,7 +39,7 @@
                 addSelectionButton: true
             });
 
-            $('.listTopPaging', page).html(pagingHtml).trigger('create');
+            page.querySelector('.listTopPaging').innerHTML = pagingHtml;
 
             updateFilterControls(page);
             var trigger = false;
@@ -88,14 +88,14 @@
                 });
             }
 
-            var elem = $('#items', page).html(html).lazyChildren();
+            var elem = page.querySelector('#items');
+            elem.innerHTML = html + pagingHtml;
+            ImageLoader.lazyChildren(elem);
 
             if (trigger) {
-                elem.trigger('create');
+                $(elem).trigger('create');
             }
 
-            $(pagingHtml).appendTo(elem).trigger('create');
-
             $('.btnNextPage', page).on('click', function () {
                 query.StartIndex += query.Limit;
                 reloadItems(page);
@@ -242,7 +242,7 @@
             reloadItems(page);
         });
 
-    }).on('pageshowready', "#musicAlbumsPage", function () {
+    }).on('pagebeforeshowready', "#musicAlbumsPage", function () {
 
         query.ParentId = LibraryMenu.getTopParentId();
 

dashboard-ui/scripts/musicartists.js

@@ -28,7 +28,7 @@
         ApiClient.getArtists(Dashboard.getCurrentUserId(), query).done(function (result) {
 
             // Scroll back up so they can see the results from the beginning
-            $(document).scrollTop(0);
+            window.scrollTo(0, 0);
 
             var html = '';
 
@@ -42,7 +42,7 @@
                 pageSizeKey: pageSizeKey
             });
 
-            $('.listTopPaging', page).html(pagingHtml).trigger('create');
+            page.querySelector('.listTopPaging').innerHTML = pagingHtml;
 
             updateFilterControls(page);
             var trigger = false;
@@ -81,14 +81,14 @@
                 });
             }
 
-            var elem = $('.itemsContainer', page).html(html).lazyChildren();
+            var elem = page.querySelector('.itemsContainer');
+            elem.innerHTML = html + pagingHtml;
+            ImageLoader.lazyChildren(elem);
 
             if (trigger) {
-                elem.trigger('create');
+                $(elem).trigger('create');
             }
 
-            $(pagingHtml).appendTo(elem).trigger('create');
-
             $('.btnNextPage', page).on('click', function () {
                 query.StartIndex += query.Limit;
                 reloadItems(page);
@@ -191,7 +191,7 @@
             reloadItems(page);
         });
 
-    }).on('pageshowready', "#musicArtistsPage", function () {
+    }).on('pagebeforeshowready', "#musicArtistsPage", function () {
 
         var page = this;
 

dashboard-ui/scripts/musicgenres.js

@@ -25,7 +25,7 @@
         ApiClient.getMusicGenres(Dashboard.getCurrentUserId(), query).done(function (result) {
 
             // Scroll back up so they can see the results from the beginning
-            $(document).scrollTop(0);
+            window.scrollTo(0, 0);
 
             var html = '';
 
@@ -65,7 +65,9 @@
                 });
             }
 
-            $('#items', page).html(html).lazyChildren();
+            var elem = page.querySelector('#items');
+            elem.innerHTML = html;
+            ImageLoader.lazyChildren(elem);
 
             $('.btnNextPage', page).on('click', function () {
                 query.StartIndex += query.Limit;
@@ -115,7 +117,7 @@
             reloadItems(page);
         });
 
-    }).on('pageshowready', "#musicGenresPage", function () {
+    }).on('pagebeforeshowready', "#musicGenresPage", function () {
 
         query.ParentId = LibraryMenu.getTopParentId();
 

dashboard-ui/scripts/musicrecommended.js

@@ -17,6 +17,8 @@
 
     function loadLatest(page, parentId) {
 
+        Dashboard.showLoadingMsg();
+
         var userId = Dashboard.getCurrentUserId();
 
         var options = {
@@ -30,7 +32,8 @@
 
         ApiClient.getJSON(ApiClient.getUrl('Users/' + userId + '/Items/Latest', options)).done(function (items) {
 
-            $('#recentlyAddedSongs', page).html(LibraryBrowser.getPosterViewHtml({
+            var elem = page.querySelector('#recentlyAddedSongs');
+            elem.innerHTML = LibraryBrowser.getPosterViewHtml({
                 items: items,
                 showUnplayedIndicator: false,
                 showLatestItemsPopup: false,
@@ -40,8 +43,12 @@
                 lazy: true,
                 cardLayout: true
 
-            })).lazyChildren();
+            });
+            ImageLoader.lazyChildren(elem);
 
+            Dashboard.hideLoadingMsg();
+
+            LibraryBrowser.setLastRefreshed(page);
         });
     }
 
@@ -63,13 +70,16 @@
 
         ApiClient.getItems(Dashboard.getCurrentUserId(), options).done(function (result) {
 
+            var elem;
+
             if (result.Items.length) {
-                $('#recentlyPlayed', page).show();
+                elem = $('#recentlyPlayed', page).show()[0];
             } else {
-                $('#recentlyPlayed', page).hide();
+                elem = $('#recentlyPlayed', page).hide()[0];
             }
 
-            $('#recentlyPlayedSongs', page).html(LibraryBrowser.getPosterViewHtml({
+            var itemsContainer = elem.querySelector('.itemsContainer');
+            itemsContainer.innerHTML = LibraryBrowser.getPosterViewHtml({
                 items: result.Items,
                 showUnplayedIndicator: false,
                 shape: getSquareShape(),
@@ -79,7 +89,8 @@
                 lazy: true,
                 cardLayout: true
 
-            })).lazyChildren();
+            });
+            ImageLoader.lazyChildren(itemsContainer);
 
         });
 
@@ -103,13 +114,16 @@
 
         ApiClient.getItems(Dashboard.getCurrentUserId(), options).done(function (result) {
 
+            var elem;
+
             if (result.Items.length) {
-                $('#topPlayed', page).show();
+                elem = $('#topPlayed', page).show()[0];
             } else {
-                $('#topPlayed', page).hide();
+                elem = $('#topPlayed', page).hide()[0];
             }
 
-            $('#topPlayedSongs', page).html(LibraryBrowser.getPosterViewHtml({
+            var itemsContainer = elem.querySelector('.itemsContainer');
+            itemsContainer.innerHTML = LibraryBrowser.getPosterViewHtml({
                 items: result.Items,
                 showUnplayedIndicator: false,
                 shape: getSquareShape(),
@@ -119,7 +133,8 @@
                 lazy: true,
                 cardLayout: true
 
-            })).lazyChildren();
+            });
+            ImageLoader.lazyChildren(itemsContainer);
 
         });
 
@@ -144,12 +159,13 @@
             var elem;
 
             if (result.Items.length) {
-                elem = $('#playlists', page).show();
+                elem = $('#playlists', page).show()[0];
             } else {
-                elem = $('#playlists', page).hide();
+                elem = $('#playlists', page).hide()[0];
             }
 
-            $('.itemsContainer', elem).html(LibraryBrowser.getPosterViewHtml({
+            var itemsContainer = elem.querySelector('.itemsContainer');
+            itemsContainer.innerHTML = LibraryBrowser.getPosterViewHtml({
                 items: result.Items,
                 shape: getSquareShape(),
                 showTitle: true,
@@ -159,26 +175,30 @@
                 showItemCounts: true,
                 cardLayout: true
 
-            })).lazyChildren();
+            });
+            ImageLoader.lazyChildren(itemsContainer);
 
         });
     }
 
-    $(document).on('pageshowready', "#musicRecommendedPage", function () {
+    $(document).on('pagebeforeshowready', "#musicRecommendedPage", function () {
 
         var parentId = LibraryMenu.getTopParentId();
 
         var page = this;
 
-        loadLatest(page, parentId);
-        loadPlaylists(page, parentId);
-        loadRecentlyPlayed(page, parentId);
-        loadFrequentlyPlayed(page, parentId);
-
+        var containers = page.querySelectorAll('.itemsContainer');
         if (enableScrollX()) {
-            $('.itemsContainer', page).addClass('hiddenScrollX');
+            $(containers).addClass('hiddenScrollX');
         } else {
-            $('.itemsContainer', page).removeClass('hiddenScrollX');
+            $(containers).removeClass('hiddenScrollX');
+        }
+
+        if (LibraryBrowser.needsRefresh(page)) {
+            loadLatest(page, parentId);
+            loadPlaylists(page, parentId);
+            loadRecentlyPlayed(page, parentId);
+            loadFrequentlyPlayed(page, parentId);
         }
     });
 

dashboard-ui/scripts/musicvideos.js

@@ -25,7 +25,7 @@
         ApiClient.getItems(Dashboard.getCurrentUserId(), query).done(function (result) {
 
             // Scroll back up so they can see the results from the beginning
-            $(document).scrollTop(0);
+            window.scrollTo(0, 0);
 
             var html = '';
 
@@ -65,7 +65,9 @@
                 });
             }
 
-            $('#items', page).html(html).trigger('create').lazyChildren();
+            var elem = page.querySelector('#items');
+            elem.innerHTML = html;
+            ImageLoader.lazyChildren(elem);
 
             $('.btnNextPage', page).on('click', function () {
                 query.StartIndex += query.Limit;
@@ -183,7 +185,7 @@
             reloadItems(page);
         });
 
-    }).on('pageshowready', "#musicVideosPage", function () {
+    }).on('pagebeforeshowready', "#musicVideosPage", function () {
 
         var page = this;
 

dashboard-ui/scripts/mypreferencesdisplay.js

@@ -236,8 +236,7 @@
         ApiClient.updateUserConfiguration(user.Id, user.Configuration).done(function () {
             Dashboard.alert(Globalize.translate('SettingsSaved'));
 
-            loadForm(page, user, false);
-
+            loadForm(page, user);
         });
     }
 

dashboard-ui/scripts/mypreferenceswebclient.js

@@ -41,7 +41,7 @@
         ApiClient.updateDisplayPreferences('home', displayPreferences, userId, 'webclient').done(function () {
 
             Dashboard.alert(Globalize.translate('SettingsSaved'));
-
+            Dashboard.hideLoadingMsg();
         });
     }
 

dashboard-ui/scripts/myprofile.js

@@ -11,7 +11,7 @@
         ApiClient.getUser(userId).done(function (user) {
 
             $('.username', page).html(user.Name);
-            $('#uploadUserImage', page).val('').trigger('change');
+            Events.trigger($('#uploadUserImage', page).val('')[0], 'change');
 
             Dashboard.setPageTitle(user.Name);
 

dashboard-ui/scripts/notifications.js

@@ -95,7 +95,13 @@
 
             var query = { StartIndex: startIndex, Limit: limit };
 
-            html += LibraryBrowser.getPagingHtml(query, totalRecordCount, false, limit, false);
+            html += LibraryBrowser.getQueryPagingHtml({
+                startIndex: query.StartIndex,
+                limit: query.Limit,
+                totalRecordCount: totalRecordCount,
+                showLimit: false,
+                updatePageSizeSetting: false
+            });
         }
 
         for (var i = 0, length = list.length; i < length; i++) {

dashboard-ui/scripts/nowplayingbar.js

@@ -5,15 +5,13 @@
     var currentTimeElement;
     var nowPlayingImageElement;
     var nowPlayingTextElement;
+    var nowPlayingUserData;
     var unmuteButton;
     var muteButton;
     var volumeSlider;
-    var volumeSliderContainer;
-    var isVolumeSliderActive;
     var unpauseButton;
     var pauseButton;
     var positionSlider;
-    var isPositionSliderActive;
 
     var lastPlayerState;
 
@@ -21,35 +19,48 @@
 
         var html = '';
 
+        // add return false because on iOS clicking the bar often ends up clicking the content underneath. 
         html += '<div class="nowPlayingBar" style="display:none;">';
 
-        html += '<div class="nowPlayingImage"></div>';
-        html += '<div class="nowPlayingText"></div>';
-
-        html += '<a class="mediaButton remoteControlButton imageButton" href="nowplaying.html" data-transition="slideup" title="' + Globalize.translate('ButtonRemoteControl') + '"><i class="fa fa-tablet"></i></a>';
-        html += '<a class="mediaButton playlistButton imageButton" href="nowplaying.html?tab=Playlist" data-transition="slideup" title="' + Globalize.translate('ButtonPlaylist') + '"><i class="fa fa-list"></i></a>';
-
-        html += '<button class="mediaButton previousTrackButton imageButton" title="' + Globalize.translate('ButtonPreviousTrack') + '" type="button" data-role="none"><i class="fa fa-step-backward"></i></button>';
-
-        html += '<button class="mediaButton unpauseButton imageButton" title="' + Globalize.translate('ButtonPlay') + '" type="button" data-role="none"><i class="fa fa-play"></i></button>';
-        html += '<button class="mediaButton pauseButton imageButton" title="' + Globalize.translate('ButtonPause') + '" type="button" data-role="none"><i class="fa fa-pause"></i></button>';
-
-        html += '<button class="mediaButton stopButton imageButton" title="' + Globalize.translate('ButtonStop') + '" type="button" data-role="none"><i class="fa fa-stop"></i></button>';
-
-        html += '<button class="mediaButton nextTrackButton imageButton" title="' + Globalize.translate('ButtonNextTrack') + '" type="button" data-role="none"><i class="fa fa-step-forward"></i></button>';
-
-        html += '<div id="mediaElement"></div>';
-
-        html += '<div class="positionSliderContainer sliderContainer">';
-        html += '<input type="range" class="mediaSlider positionSlider slider" step=".001" min="0" max="100" value="0" style="display:none;" data-mini="true" data-theme="a" data-highlight="true" />';
+        html += '<div class="nowPlayingBarPositionContainer">';
+        html += '<paper-slider pin step=".1" min="0" max="100" value="0" class="nowPlayingBarPositionSlider"></paper-slider>';
         html += '</div>';
 
-        html += '<div class="currentTime"></div>';
-        html += '<button class="mediaButton muteButton imageButton" title="' + Globalize.translate('ButtonMute') + '" type="button" data-role="none"><i class="fa fa-volume-up"></i></button>';
-        html += '<button class="mediaButton unmuteButton imageButton" title="' + Globalize.translate('ButtonUnmute') + '" type="button" data-role="none"><i class="fa fa-volume-off"></i></button>';
+        html += '<div class="nowPlayingBarInfoContainer">';
+        html += '<div class="nowPlayingImage"></div>';
+        html += '<div class="nowPlayingBarText"></div>';
+        html += '</div>';
+
+        // The onclicks are needed due to the return false above
+        html += '<div class="nowPlayingBarCenter">';
+
+        html += '<paper-icon-button icon="skip-previous" class="previousTrackButton mediaButton"></paper-icon-button>';
+
+        html += '<paper-icon-button icon="play-arrow" class="mediaButton unpauseButton"></paper-icon-button>';
+        html += '<paper-icon-button icon="pause" class="mediaButton pauseButton"></paper-icon-button>';
+
+        html += '<paper-icon-button icon="stop" class="stopButton mediaButton"></paper-icon-button>';
+
+        html += '<paper-icon-button icon="skip-next" class="nextTrackButton mediaButton"></paper-icon-button>';
+
+        html += '<div class="nowPlayingBarCurrentTime"></div>';
+        html += '</div>';
+
+        html += '<div class="nowPlayingBarRight">';
+
+        html += '<paper-icon-button icon="volume-up" class="muteButton mediaButton"></paper-icon-button>';
+        html += '<paper-icon-button icon="volume-off" class="unmuteButton mediaButton"></paper-icon-button>';
+
+        html += '<paper-slider pin step="1" min="0" max="100" value="0" class="nowPlayingBarVolumeSlider" style="width:100px;vertical-align:middle;"></paper-slider>';
+
+        html += '<div class="nowPlayingBarUserDataButtons">';
+        html += '</div>';
+
+        html += '<paper-icon-button icon="play-arrow" class="mediaButton unpauseButton"></paper-icon-button>';
+        html += '<paper-icon-button icon="pause" class="mediaButton pauseButton"></paper-icon-button>';
+        html += '<paper-icon-button icon="tablet-android" onclick="Dashboard.navigate(\'nowplaying.html\', false);" class="mediaButton remoteControlButton"></paper-icon-button>';
+        html += '<paper-icon-button icon="queue-music" onclick="Dashboard.navigate(\'nowplaying.html?tab=Playlist\', false);" class="mediaButton playlistButton"></paper-icon-button>';
 
-        html += '<div class="volumeSliderContainer sliderContainer">';
-        html += '<input type="range" class="mediaSlider volumeSlider slider" step=".05" min="0" max="100" value="0" style="display:none;" data-mini="true" data-theme="a" data-highlight="true" />';
         html += '</div>';
 
         html += '</div>';
@@ -59,9 +70,10 @@
 
     function bindEvents(elem) {
 
-        currentTimeElement = $('.currentTime', elem);
+        currentTimeElement = $('.nowPlayingBarCurrentTime', elem);
         nowPlayingImageElement = $('.nowPlayingImage', elem);
-        nowPlayingTextElement = $('.nowPlayingText', elem);
+        nowPlayingTextElement = $('.nowPlayingBarText', elem);
+        nowPlayingUserData = $('.nowPlayingBarUserDataButtons', elem);
 
         $(elem).on('swipeup', function () {
             Dashboard.navigate('nowplaying.html');
@@ -116,28 +128,15 @@
             }
         });
 
-        volumeSlider = $('.volumeSlider', elem).on('slidestart', function () {
-
-            isVolumeSliderActive = true;
-
-        }).on('slidestop', function () {
-
-            isVolumeSliderActive = false;
+        volumeSlider = $('.nowPlayingBarVolumeSlider', elem).on('change', function () {
 
             if (currentPlayer) {
                 currentPlayer.setVolume(this.value);
             }
-        });
 
-        volumeSliderContainer = $('.volumeSliderContainer', elem);
+        })[0];
 
-        positionSlider = $('.positionSlider', elem).on('slidestart', function () {
-
-            isPositionSliderActive = true;
-
-        }).on('slidestop', function () {
-
-            isPositionSliderActive = false;
+        positionSlider = $('.nowPlayingBarPositionSlider', elem).on('change', function () {
 
             if (currentPlayer && lastPlayerState) {
 
@@ -146,18 +145,40 @@
 
                 currentPlayer.seek(Math.floor(newPositionTicks));
             }
-        });
+
+        })[0];
+
+        positionSlider._setPinValue = function (value) {
+
+            var state = lastPlayerState;
+
+            if (!state || !state.NowPlayingItem || !state.NowPlayingItem.RunTimeTicks) {
+                this.pinValue = '--:--';
+                return;
+            }
+
+            var ticks = state.NowPlayingItem.RunTimeTicks;
+            ticks /= 100;
+            ticks *= value;
+
+            this.pinValue = Dashboard.getDisplayTime(ticks);
+        };
     }
 
     function getNowPlayingBar() {
 
-        var elem = $('.nowPlayingBar');
+        var elem = document.querySelector('.nowPlayingBar');
 
-        if (elem.length) {
+        if (elem) {
             return elem;
         }
 
-        elem = $(getNowPlayingBarHtml()).insertBefore('#footerNotifications').trigger('create');
+        elem = $(getNowPlayingBarHtml()).insertBefore('#footerNotifications')[0];
+
+        if (($.browser.safari || !AppInfo.isNativeApp) && $.browser.mobile) {
+            // Not handled well here. The wrong elements receive events, bar doesn't update quickly enough, etc.
+            elem.classList.add('noMediaProgress');
+        }
 
         bindEvents(elem);
 
@@ -174,7 +195,7 @@
 
     function updatePlayerState(state) {
 
-        if (state.NowPlayingItem && !$($.mobile.activePage).hasClass('nowPlayingPage')) {
+        if (state.NowPlayingItem) {
             showNowPlayingBar();
         } else {
             hideNowPlayingBar();
@@ -205,27 +226,21 @@
         updatePlayerVolumeState(state, playerInfo);
 
         var nowPlayingItem = state.NowPlayingItem || {};
-        if (!isPositionSliderActive) {
+        if (!positionSlider.dragging) {
 
             if (nowPlayingItem && nowPlayingItem.RunTimeTicks) {
 
                 var pct = playState.PositionTicks / nowPlayingItem.RunTimeTicks;
                 pct *= 100;
 
-                positionSlider.val(pct);
+                positionSlider.value = pct;
 
             } else {
 
-                positionSlider.val(0);
+                positionSlider.value = 0;
             }
 
-            if (playState.CanSeek) {
-                positionSlider.slider("enable");
-            } else {
-                positionSlider.slider("disable");
-            }
-
-            positionSlider.slider('refresh');
+            positionSlider.disabled = !playState.CanSeek;
         }
 
         var timeText = Dashboard.getDisplayTime(playState.PositionTicks);
@@ -256,12 +271,6 @@
         var showUnmuteButton = true;
         var showVolumeSlider = true;
 
-        //if (supportedCommands.indexOf('SetVolume') == -1) {
-        //    volumeSlider.prop('disabled', 'disabled');
-        //} else {
-        //    volumeSlider.prop('disabled', '');
-        //}
-
         if (supportedCommands.indexOf('Mute') == -1) {
             showMuteButton = false;
         }
@@ -300,17 +309,11 @@
             hideButton(unmuteButton);
         }
 
-        if (showVolumeSlider) {
-            volumeSliderContainer.show();
-        } else {
-            volumeSliderContainer.hide();
-        }
+        $(volumeSlider).visible(showVolumeSlider);
 
-        if (!isVolumeSliderActive) {
-            volumeSlider.val(playState.VolumeLevel || 0);
+        if (!volumeSlider.dragging) {
+            volumeSlider.value = playState.VolumeLevel || 0;
         }
-
-        volumeSlider.slider('refresh');
     }
 
     var currentImgUrl;
@@ -324,10 +327,14 @@
             nowPlayingTextElement.removeClass('nowPlayingDoubleText');
         }
 
+        if (state.NowPlayingItem.Id) {
+            nameHtml = '<a style="color:inherit;text-decoration:none;" href="' + LibraryBrowser.getHref(state.NowPlayingItem) + '">' + nameHtml + '</a>';
+        }
+
         nowPlayingTextElement.html(nameHtml);
 
         var url;
-        var imgHeight = 50;
+        var imgHeight = 90;
 
         var nowPlayingItem = state.NowPlayingItem;
 
@@ -373,12 +380,22 @@
 
         currentImgUrl = url;
 
-        nowPlayingImageElement.html('<img src="' + url + '" />');
+        var imgHtml = '<img src="' + url + '" />';
+
+        nowPlayingImageElement.html(imgHtml);
+
+        if (nowPlayingItem.Id) {
+            ApiClient.getItem(Dashboard.getCurrentUserId(), nowPlayingItem.Id).done(function (item) {
+                nowPlayingUserData.html(LibraryBrowser.getUserDataIconsHtml(item, false));
+            });
+        } else {
+            nowPlayingUserData.html('');
+        }
     }
 
     function onPlaybackStart(e, state) {
 
-        console.log('nowplaying event: ' + e.type);
+        Logger.log('nowplaying event: ' + e.type);
 
         var player = this;
 
@@ -391,19 +408,24 @@
 
         var nowPlayingBar = getNowPlayingBar();
 
-        nowPlayingBar.show();
+        $(nowPlayingBar).show();
     }
 
     function hideNowPlayingBar() {
 
         // Use a timeout to prevent the bar from hiding and showing quickly
         // in the event of a stop->play command
-        getNowPlayingBar().hide();
+
+        // Don't call getNowPlayingBar here because we don't want to end up creating it just to hide it
+        var elem = document.getElementsByClassName('nowPlayingBar')[0];
+        if (elem) {
+            elem.style.display = 'none';
+        }
     }
 
     function onPlaybackStopped(e, state) {
 
-        console.log('nowplaying event: ' + e.type);
+        Logger.log('nowplaying event: ' + e.type);
         var player = this;
 
         player.endPlayerUpdates();
@@ -413,7 +435,7 @@
 
     function onStateChanged(e, state) {
 
-        //console.log('nowplaying event: ' + e.type);
+        //Logger.log('nowplaying event: ' + e.type);
         var player = this;
 
         if (player.isDefaultPlayer && state.NowPlayingItem && state.NowPlayingItem.MediaType == 'Video') {
@@ -427,7 +449,12 @@
 
         if (currentPlayer) {
 
-            $(currentPlayer).off('.nowplayingbar');
+            $(currentPlayer).off('playbackstart', onPlaybackStart)
+                .off('playbackstop', onPlaybackStopped)
+                .off('volumechange', onVolumeChanged)
+                .off('playstatechange', onStateChanged)
+                .off('positionchange', onStateChanged);
+
             currentPlayer.endPlayerUpdates();
             currentPlayer = null;
 
@@ -464,16 +491,16 @@
             onStateChanged.call(player, { type: 'init' }, state);
         });
 
-        $(player).on('playbackstart.nowplayingbar', onPlaybackStart)
-            .on('playbackstop.nowplayingbar', onPlaybackStopped)
-            .on('volumechange.nowplayingbar', onVolumeChanged)
-            .on('playstatechange.nowplayingbar', onStateChanged)
-            .on('positionchange.nowplayingbar', onStateChanged);
+        $(player).on('playbackstart', onPlaybackStart)
+            .on('playbackstop', onPlaybackStopped)
+            .on('volumechange', onVolumeChanged)
+            .on('playstatechange', onStateChanged)
+            .on('positionchange', onStateChanged);
     }
 
     Dashboard.ready(function () {
 
-        $(MediaController).on('playerchange', function () {
+        Events.on(MediaController, 'playerchange', function () {
 
             bindToPlayer(MediaController.getCurrentPlayer());
         });

dashboard-ui/scripts/nowplayingpage.js

@@ -2,7 +2,6 @@
 
     var currentPlayer;
     var lastPlayerState;
-    var isPositionSliderActive;
 
     function populateChapters(elem, chapters, itemId, runtimeTicks) {
 
@@ -53,7 +52,9 @@
             html += "</div>";
         }
 
-        elem.html(html).trigger('create').lazyChildren();
+        elem.innerHTML = html;
+        ImageLoader.lazyChildren(elem);
+        $(elem).trigger('create');
     }
 
     function selectCurrentChapter(elem, positionTicks) {
@@ -70,30 +71,31 @@
 
         var chapterElem = matches[matches.length - 1];
 
-        $(chapterElem).addClass('currentChapter');
+        chapterElem.classList.add('currentChapter');
 
         chapterElem.scrollIntoView();
 
-        elem[0].scrollLeft += 50;
+        elem.scrollLeft += 50;
     }
 
     function showChapterMenu(page, item, currentPositionTicks) {
 
         $('.chapterMenuOverlay', page).show();
 
-        var elem = $('.chapterMenu', page).show();
+        var elem = page.querySelector('.chapterMenu');
+        $(elem).show();
 
-        if (item.Id == elem.attr('data-itemid')) {
+        if (item.Id == elem.getAttribute('data-itemid')) {
 
             selectCurrentChapter(elem, currentPositionTicks);
             return;
         }
 
-        var innerElem = $('.chapterMenuInner', elem);
+        var innerElem = elem.querySelector('.chapterMenuInner');
 
         populateChapters(innerElem, item.Chapters, item.Id, item.RunTimeTicks);
 
-        elem.attr('data-itemid', item.Id);
+        elem.setAttribute('data-itemid', item.Id);
 
         selectCurrentChapter(elem, currentPositionTicks);
     }
@@ -104,125 +106,106 @@
         $('.chapterMenu', page).hide();
     }
 
-    function showAudioMenu(page, item, currentIndex) {
+    function showAudioMenu(page, button, item, currentIndex) {
 
         var streams = (item.MediaStreams || []).filter(function (i) {
 
             return i.Type == 'Audio';
         });
 
-        var elem = $('#popupAudioTrackMenu', page);
+        var menuItems = streams.map(function (s) {
 
-        var html = '<ul data-role="listview" data-inset="true" style="min-width: 210px;"><li data-role="list-divider">' + Globalize.translate('HeaderSelectAudio') + '</li>';
-
-        html += streams.map(function (s) {
-
-            var streamHtml = '<li><a data-index="' + s.Index + '" href="#" class="lnkTrackOption">';
-
-            streamHtml += '<h3>';
-
-            if (s.Index == currentIndex) {
-                streamHtml += '<img src="css/images/checkmarkgreen.png" style="width:18px;border-radius:3px;margin-right:.5em;vertical-align:top;" />';
-            }
-
-            streamHtml += (s.Codec || '').toUpperCase();
+            var name = (s.Codec || '').toUpperCase();
 
             if (s.Profile) {
-                streamHtml += ' ' + s.Profile;
+                name += ' ' + s.Profile;
             }
 
-            streamHtml += '</h3><p>';
-
-            var extras = [];
-
             if (s.Language) {
-                extras.push(s.Language);
+                name += ' · ' + s.Language;
             }
             if (s.Layout) {
-                extras.push(s.Layout);
+                name += ' · ' + s.Layout;
             }
             else if (s.Channels) {
-                extras.push(s.Channels + ' ch');
+                name += ' · ' + s.Channels + ' ch';
             }
 
-            if (s.BitRate) {
-                extras.push((parseInt(s.BitRate / 1000)) + ' kbps');
+            var menuItem = {
+                name: name,
+                id: s.Index
+            };
+
+            if (s.Index == currentIndex) {
+                menuItem.ironIcon = 'check';
             }
 
-            streamHtml += extras.join(' - ');
+            return menuItem;
+        });
 
-            streamHtml += '</p></a></li>';
+        require(['actionsheet'], function () {
 
-            return streamHtml;
+            ActionSheetElement.show({
+                items: menuItems,
+                positionTo: button,
+                callback: function (id) {
 
-        }).join('');
+                    currentPlayer.setAudioStreamIndex(parseInt(id));
+                }
+            });
 
-        html += '</ul>';
-
-        $('.trackList', elem).html(html).trigger('create');
-
-        elem.popup('open');
+        });
     }
 
-    function showSubtitleMenu(page, item, currentIndex) {
-
-        var currentStreamImage = '<img src="css/images/checkmarkgreen.png" style="width:18px;border-radius:3px;margin-right:.5em;vertical-align:top;" />';
+    function showSubtitleMenu(page, button, item, currentIndex) {
 
         var streams = (item.MediaStreams || []).filter(function (i) {
 
             return i.Type == 'Subtitle';
         });
 
-        var elem = $('#popupSubtitleTrackMenu', page);
+        var menuItems = streams.map(function (s) {
 
-        var html = '<ul data-role="listview" data-inset="true" style="min-width: 210px;"><li data-role="list-divider">' + Globalize.translate('HeaderSelectSubtitles') + '</li>';
-
-        html += '<li><a href="#" data-index="-1" class="lnkTrackOption"><h3>';
-
-        if (currentIndex == null) {
-            html += currentStreamImage;
-        }
-
-        html += 'Off';
-        html += '</h3></a></li>';
-
-        html += streams.map(function (s) {
-
-            var streamHtml = '<li><a data-index="' + s.Index + '" href="#" class="lnkTrackOption">';
-
-            streamHtml += '<h3>';
-
-            if (s.Index == currentIndex) {
-                streamHtml += currentStreamImage;
-            }
-
-            streamHtml += (s.Language || Globalize.translate('LabelUnknownLanguage'));
+            var name = (s.Language || Globalize.translate('LabelUnknownLanguage'));
 
             if (s.IsDefault && s.IsForced) {
-                streamHtml += ' ' + Globalize.translate('LabelDefaultForcedStream');
+                name += ' · ' + Globalize.translate('LabelDefaultForcedStream');
             }
             else if (s.IsDefault) {
-                streamHtml += ' ' + Globalize.translate('LabelDefaultStream');
+                name += ' · ' + Globalize.translate('LabelDefaultStream');
             }
             else if (s.IsForced) {
-                streamHtml += ' ' + Globalize.translate('LabelForcedStream');
+                name += ' · ' + Globalize.translate('LabelForcedStream');
             }
 
-            streamHtml += '</h3><p>';
+            if (s.Codec) {
+                name += ' · ' + s.Codec.toUpperCase();
+            }
 
-            streamHtml += (s.Codec || '').toUpperCase();
+            var menuItem = {
+                name: name,
+                id: s.Index
+            };
 
-            streamHtml += '</p></a></li>';
+            if (s.Index == currentIndex) {
+                menuItem.ironIcon = 'check';
+            }
 
-            return streamHtml;
+            return menuItem;
+        });
 
-        }).join('');
+        require(['actionsheet'], function () {
 
-        html += '</ul>';
+            ActionSheetElement.show({
+                items: menuItems,
+                positionTo: button,
+                callback: function (id) {
 
-        $('.trackList', elem).html(html).trigger('create');
+                    currentPlayer.setSubtitleStreamIndex(parseInt(id));
+                }
+            });
 
-        elem.popup('open');
+        });
     }
 
     function bindEvents(page) {
@@ -264,35 +247,12 @@
             }
         });
 
-        $('#popupAudioTrackMenu', page).on('click', '.lnkTrackOption', function () {
-
-            if (currentPlayer && lastPlayerState) {
-
-                var index = this.getAttribute('data-index');
-
-                currentPlayer.setAudioStreamIndex(parseInt(index));
-
-                $('#popupAudioTrackMenu', page).popup('close');
-            }
-        });
-
-        $('#popupSubtitleTrackMenu', page).on('click', '.lnkTrackOption', function () {
-
-            if (currentPlayer && lastPlayerState) {
-                var index = this.getAttribute('data-index');
-
-                currentPlayer.setSubtitleStreamIndex(parseInt(index));
-
-                $('#popupSubtitleTrackMenu', page).popup('close');
-            }
-        });
-
         $('.btnAudioTracks', page).on('click', function () {
 
             if (currentPlayer && lastPlayerState && lastPlayerState.PlayState) {
 
                 var currentIndex = lastPlayerState.PlayState.AudioStreamIndex;
-                showAudioMenu(page, lastPlayerState.NowPlayingItem, currentIndex);
+                showAudioMenu(page, this, lastPlayerState.NowPlayingItem, currentIndex);
             }
         });
 
@@ -301,7 +261,7 @@
             if (currentPlayer && lastPlayerState && lastPlayerState.PlayState) {
 
                 var currentIndex = lastPlayerState.PlayState.SubtitleStreamIndex;
-                showSubtitleMenu(page, lastPlayerState.NowPlayingItem, currentIndex);
+                showSubtitleMenu(page, this, lastPlayerState.NowPlayingItem, currentIndex);
             }
         });
 
@@ -349,28 +309,33 @@
             }
         });
 
-        $('.positionSlider', page).on('slidestart', function () {
+        $('.nowPlayingPositionSlider', page).on('change', function () {
 
-            isPositionSliderActive = true;
-
-        }).on('slidestop', function () {
-
-            isPositionSliderActive = false;
+            var value = this.value;
 
             if (currentPlayer && lastPlayerState) {
 
-                var newPercent = parseFloat(this.value);
+                var newPercent = parseFloat(value);
                 var newPositionTicks = (newPercent / 100) * lastPlayerState.NowPlayingItem.RunTimeTicks;
-
                 currentPlayer.seek(Math.floor(newPositionTicks));
             }
         });
 
-        $(page).on('swipedown', function () {
+        $('.nowPlayingPositionSlider', page)[0]._setPinValue = function (value) {
 
-            document.title = new Date().getTime();
-            history.back();
-        });
+            var state = lastPlayerState;
+
+            if (!state || !state.NowPlayingItem || !state.NowPlayingItem.RunTimeTicks) {
+                this.pinValue = '--:--';
+                return;
+            }
+
+            var ticks = state.NowPlayingItem.RunTimeTicks;
+            ticks /= 100;
+            ticks *= value;
+
+            this.pinValue = Dashboard.getDisplayTime(ticks);
+        };
 
         $(page).on('click', '.lnkPlayFromIndex', function () {
 
@@ -387,7 +352,7 @@
             loadPlaylist(page);
         });
 
-        $(page).on('click', '.mediaItem', onListItemClick);
+        Events.on(page, 'click', '.mediaItem', onListItemClick);
     }
 
     function onPlaybackStart(e, state) {
@@ -397,6 +362,7 @@
         player.beginPlayerUpdates();
 
         onStateChanged.call(player, e, state);
+        loadPlaylist($.mobile.activePage);
     }
 
     function onPlaybackStopped(e, state) {
@@ -406,11 +372,12 @@
         player.endPlayerUpdates();
 
         onStateChanged.call(player, e, {});
+        loadPlaylist($.mobile.activePage);
     }
 
     function onStateChanged(e, state) {
 
-        updatePlayerState($.mobile.activePage, state);
+        updatePlayerState($($.mobile.activePage)[0], state);
     }
 
     function showButton(button) {
@@ -472,29 +439,23 @@
             hideButton(btnPlay);
         }
 
-        if (!isPositionSliderActive) {
+        var positionSlider = $('.nowPlayingPositionSlider', page)[0];
 
-            var positionSlider = $('.positionSlider', page);
+        if (!positionSlider.dragging) {
 
             if (item && item.RunTimeTicks) {
 
                 var pct = playState.PositionTicks / item.RunTimeTicks;
                 pct *= 100;
 
-                positionSlider.val(pct);
+                positionSlider.value = pct;
 
             } else {
 
-                positionSlider.val(0);
+                positionSlider.value = 0;
             }
 
-            if (playState.CanSeek) {
-                positionSlider.slider("enable");
-            } else {
-                positionSlider.slider("disable");
-            }
-
-            positionSlider.slider('refresh');
+            positionSlider.disabled = !playState.CanSeek;
         }
 
         if (playState.PositionTicks == null) {
@@ -515,6 +476,20 @@
             $('.videoButton', page).css('visibility', 'hidden');
         }
 
+        if (playerInfo.isLocalPlayer && AppInfo.hasPhysicalVolumeButtons) {
+            $('.volumeButton', page).css('visibility', 'hidden');
+        } else {
+            $('.volumeButton', page).css('visibility', 'visible');
+        }
+
+        if (playerInfo.isLocalPlayer && AppInfo.hasPhysicalVolumeButtons && item && item.MediaType == 'Audio') {
+            $('.buttonsRow2', page).hide();
+            $('.buttonsRow3', page).hide();
+        } else {
+            $('.buttonsRow2', page).show();
+            $('.buttonsRow3', page).show();
+        }
+
         updateNowPlayingInfo(page, state);
     }
 
@@ -522,8 +497,9 @@
     function updateNowPlayingInfo(page, state) {
 
         var item = state.NowPlayingItem;
+        var displayName = item ? MediaController.getNowPlayingNameHtml(item).replace('<br/>', ' - ') : '';
 
-        $('.itemName', page).html(item ? MediaController.getNowPlayingNameHtml(item) : '');
+        $('.nowPlayingPageTitle', page).html(displayName).visible(displayName.length > 0);
 
         var url;
         var backdropUrl = null;
@@ -574,6 +550,14 @@
         setImageUrl(page, url);
 
         Backdrops.setBackdropUrl(page, backdropUrl);
+
+        if (item) {
+            ApiClient.getItem(Dashboard.getCurrentUserId(), item.Id).done(function (fullItem) {
+                page.querySelector('.nowPlayingPageUserDataButtons').innerHTML = LibraryBrowser.getUserDataIconsHtml(fullItem, false);
+            });
+        } else {
+            page.querySelector('.nowPlayingPageUserDataButtons').innerHTML = '';
+        }
     }
 
     function setImageUrl(page, url) {
@@ -595,7 +579,12 @@
 
         if (currentPlayer) {
 
-            $(currentPlayer).off('.nowplayingpage');
+            $(currentPlayer).off('playbackstart', onPlaybackStart)
+                .off('playbackstop', onPlaybackStopped)
+                .off('volumechange', onStateChanged)
+                .off('playstatechange', onStateChanged)
+                .off('positionchange', onStateChanged);
+
             currentPlayer.endPlayerUpdates();
             currentPlayer = null;
         }
@@ -616,11 +605,11 @@
             onStateChanged.call(player, { type: 'init' }, state);
         });
 
-        $(player).on('playbackstart.nowplayingpage', onPlaybackStart)
-            .on('playbackstop.nowplayingpage', onPlaybackStopped)
-            .on('volumechange.nowplayingpage', onStateChanged)
-            .on('playstatechange.nowplayingpage', onStateChanged)
-            .on('positionchange.nowplayingpage', onStateChanged);
+        $(player).on('playbackstart', onPlaybackStart)
+            .on('playbackstop', onPlaybackStopped)
+            .on('volumechange', onStateChanged)
+            .on('playstatechange', onStateChanged)
+            .on('positionchange', onStateChanged);
 
         var playerInfo = MediaController.getPlayerInfo();
 
@@ -629,20 +618,6 @@
         updateSupportedCommands(page, supportedCommands);
     }
 
-    function showIntro() {
-
-        var expected = '2';
-
-        if (appStorage.getItem('remotecontrolswipedown') != expected) {
-            Dashboard.alert({
-                message: Globalize.translate('MessageSwipeDownOnRemoteControl'),
-                title: Globalize.translate('HeaderAlert')
-            });
-            appStorage.setItem('remotecontrolswipedown', expected);
-        }
-
-    }
-
     function loadPlaylist(page) {
 
         var html = '';
@@ -674,7 +649,10 @@
             smallIcon: true
         });
 
-        $(".playlist", page).html(html).trigger('create').lazyChildren();
+        var itemsContainer = page.querySelector('.playlist');
+        itemsContainer.innerHTML = html;
+        ImageLoader.lazyChildren(itemsContainer);
+        $(itemsContainer).trigger('create');
     }
 
     function onListItemClick(e) {
@@ -688,7 +666,7 @@
 
     function getBackdropUrl(item) {
 
-        var screenWidth = Math.max(screen.height, screen.width);
+        var screenWidth = screen.availWidth;
 
         if (item.BackdropImageTags && item.BackdropImageTags.length) {
 
@@ -714,6 +692,45 @@
         return null;
     };
 
+    function updateCastIcon() {
+
+        var info = MediaController.getPlayerInfo();
+
+        if (info.isLocalPlayer) {
+
+            $('.nowPlayingCastIcon').each(function () {
+                this.icon = 'cast';
+            });
+            $('.headerSelectedPlayer').html('');
+
+        } else {
+
+            $('.nowPlayingCastIcon').each(function () {
+                this.icon = 'cast-connected';
+            });
+
+            $('.headerSelectedPlayer').html((info.deviceName || info.name));
+        }
+    }
+
+    function allowSwipe(e) {
+
+        var target = $(e.target);
+
+        if (target.is('.noSwipe')) {
+            return false;
+        }
+        if (target.parents('.noSwipe').length) {
+            return false;
+        }
+
+        return true;
+    }
+
+    function onPlayerChange() {
+        bindToPlayer($($.mobile.activePage)[0], MediaController.getCurrentPlayer());
+    }
+
     $(document).on('pageinitdepends', "#nowPlayingPage", function () {
 
         var page = this;
@@ -723,40 +740,77 @@
         $('.sendMessageForm').off('submit', NowPlayingPage.onMessageSubmit).on('submit', NowPlayingPage.onMessageSubmit);
         $('.typeTextForm').off('submit', NowPlayingPage.onSendStringSubmit).on('submit', NowPlayingPage.onSendStringSubmit);
 
-    }).on('pageshowready', "#nowPlayingPage", function () {
+        $('.requiresJqmCreate', this).trigger('create');
 
+        $(page).on('swipeleft', function (e) {
+
+            if (allowSwipe(e)) {
+                var pages = this.querySelectorAll('neon-animated-pages')[0];
+                var tabs = this.querySelectorAll('paper-tabs')[0];
+
+                var selected = parseInt(pages.selected || '0');
+                if (selected < 2) {
+                    pages.entryAnimation = 'slide-from-right-animation';
+                    pages.exitAnimation = 'slide-left-animation';
+                    tabs.selectNext();
+                }
+            }
+        });
+
+        $(page).on('swiperight', function (e) {
+
+            if (allowSwipe(e)) {
+                var pages = this.querySelectorAll('neon-animated-pages')[0];
+                var tabs = this.querySelectorAll('paper-tabs')[0];
+
+                var selected = parseInt(pages.selected || '0');
+                if (selected > 0) {
+                    pages.entryAnimation = 'slide-from-left-animation';
+                    pages.exitAnimation = 'slide-right-animation';
+                    tabs.selectPrevious();
+                }
+            }
+        });
+
+        $(MediaController).on('playerchange', function () {
+            updateCastIcon(page);
+        });
+
+        $('paper-tabs').on('iron-select', function () {
+            page.querySelectorAll('neon-animated-pages')[0].selected = this.selected;
+        });
+
+    }).on('pagebeforeshowready', "#nowPlayingPage", function () {
+
+        $(document.body).addClass('hiddenViewMenuBar').addClass('hiddenNowPlayingBar');
         var page = this;
 
         currentImgUrl = null;
 
-        var tab = getParameterByName('tab');
-        if (tab) {
-            $('.tabButton' + tab, page).trigger('click');
-        } else {
-            $('.tabButton:first', page).trigger('click');
-        }
+        Dashboard.ready(function () {
 
-        $(function () {
-
-            $(MediaController).on('playerchange.nowplayingpage', function () {
-
-                bindToPlayer(page, MediaController.getCurrentPlayer());
-            });
+            $(MediaController).on('playerchange', onPlayerChange);
 
             bindToPlayer(page, MediaController.getCurrentPlayer());
 
         });
 
-        showIntro();
         loadPlaylist(page);
 
-    }).on('pagehide', "#nowPlayingPage", function () {
+        var tab = getParameterByName('tab');
+        var selected = tab == 'Playlist' ? 2 : 0;;
+        this.querySelectorAll('paper-tabs')[0].selected = selected;
+
+        updateCastIcon(page);
+
+    }).on('pagebeforehide', "#nowPlayingPage", function () {
 
         releaseCurrentPlayer();
 
-        $(MediaController).off('playerchange.nowplayingpage');
+        $(MediaController).off('playerchange', onPlayerChange);
 
         lastPlayerState = null;
+        $(document.body).removeClass('hiddenViewMenuBar').removeClass('hiddenNowPlayingBar');
     });
 
     window.NowPlayingPage = {

dashboard-ui/scripts/photos.js

@@ -25,7 +25,7 @@
         ApiClient.getItems(Dashboard.getCurrentUserId(), query).done(function (result) {
 
             // Scroll back up so they can see the results from the beginning
-            $(document).scrollTop(0);
+            window.scrollTo(0, 0);
 
             var html = '';
             var pagingHtml = LibraryBrowser.getQueryPagingHtml({
@@ -36,7 +36,7 @@
                 showLimit: false
             });
 
-            $('.listTopPaging', page).html(pagingHtml).trigger('create');
+            page.querySelector('.listTopPaging').innerHTML = pagingHtml;
 
             updateFilterControls(page);
 
@@ -65,9 +65,9 @@
                 });
             }
 
-            var elem = $('#items', page).html(html).lazyChildren();
-
-            $(pagingHtml).appendTo(elem).trigger('create');
+            var elem = page.querySelector('#items');
+            elem.innerHTML = html + pagingHtml;
+            ImageLoader.lazyChildren(elem);
 
             $('.btnNextPage', page).on('click', function () {
                 query.StartIndex += query.Limit;
@@ -282,7 +282,7 @@
             reloadItems(page);
         });
 
-    }).on('pageshowready', "#photosPage", function () {
+    }).on('pagebeforeshowready', "#photosPage", function () {
 
         var page = this;
 

dashboard-ui/scripts/playlistedit.js

@@ -73,7 +73,7 @@
             }
 
             // Scroll back up so they can see the results from the beginning
-            $(document).scrollTop(0);
+            window.scrollTo(0, 0);
 
             var html = '';
 
@@ -81,8 +81,9 @@
                 startIndex: query.StartIndex,
                 limit: query.Limit,
                 totalRecordCount: result.TotalRecordCount,
-                viewButton: true,
-                showLimit: false
+                showLimit: false,
+                updatePageSizeSetting: false
+
             })).trigger('create');
 
             updateFilterControls(page);
@@ -111,7 +112,10 @@
                 $('.noItemsMessage', page).show();
             }
 
-            $('.itemsContainer', page).html(html).trigger('create').lazyChildren();
+            var elem = page.querySelector('.itemsContainer');
+            elem.innerHTML = html;
+            $(elem).trigger('create');
+            ImageLoader.lazyChildren(elem);
 
             $('.btnNextPage', page).on('click', function () {
                 query.StartIndex += query.Limit;
@@ -171,20 +175,12 @@
         }).checkboxradio('refresh');
 
         $('#selectView', page).val(view).selectmenu('refresh');
-
-        $('#selectPageSize', page).val(query.Limit).selectmenu('refresh');
     }
 
     $(document).on('pageinitdepends', "#playlistEditorPage", function () {
 
         var page = this;
 
-        $('#selectPageSize', page).on('change', function () {
-            query.Limit = parseInt(this.value);
-            query.StartIndex = 0;
-            reloadItems(page);
-        });
-
         $('.btnPlay', page).on('click', function () {
             var userdata = currentItem.UserData || {};
 
@@ -194,7 +190,7 @@
                 mediaType = "Audio";
             }
 
-            LibraryBrowser.showPlayMenu(this, currentItem.Id, currentItem.Type, currentItem.IsFolder, mediaType, userdata.PlaybackPositionTicks);
+            LibraryBrowser.showPlayMenu(null, currentItem.Id, currentItem.Type, currentItem.IsFolder, mediaType, userdata.PlaybackPositionTicks);
         });
 
         $('.itemsContainer', page).on('needsrefresh', function () {
@@ -215,7 +211,7 @@
 
         });
 
-    }).on('pageshowready', "#playlistEditorPage", function () {
+    }).on('pagebeforeshowready', "#playlistEditorPage", function () {
 
         var page = this;
 

dashboard-ui/scripts/playlists.js

@@ -20,11 +20,11 @@
 
     function showLoadingMessage(page) {
 
-        $('.popupLoading', page).popup('open');
+        Dashboard.showLoadingMsg();
     }
 
     function hideLoadingMessage(page) {
-        $('.popupLoading', page).popup('close');
+        Dashboard.hideLoadingMsg();
     }
 
     function reloadItems(page) {
@@ -40,7 +40,7 @@
             var user = response2[0];
 
             // Scroll back up so they can see the results from the beginning
-            $(document).scrollTop(0);
+            window.scrollTo(0, 0);
 
             var html = '';
 
@@ -86,10 +86,12 @@
                 $('.noItemsMessage', page).show();
             }
 
-            $('.itemsContainer', page).html(html).lazyChildren();
+            var elem = page.querySelector('.itemsContainer');
+            elem.innerHTML = html;
+            ImageLoader.lazyChildren(elem);
 
             if (trigger) {
-                $('.itemsContainer', page).trigger('create');
+                $(elem).trigger('create');
             }
 
             $('.btnNextPage', page).on('click', function () {
@@ -183,7 +185,7 @@
             reloadItems(page);
         });
 
-    }).on('pageshowready', "#playlistsPage", function () {
+    }).on('pagebeforeshowready', "#playlistsPage", function () {
 
         var page = this;
 

dashboard-ui/scripts/pluginspage.js

@@ -84,8 +84,8 @@
 
         html += '<div class="cardFooter">';
 
-        html += '<div class="cardText" style="text-align:right; float:right;">';
-        html += '<button class="btnCardMenu" type="button" data-inline="true" data-iconpos="notext" data-icon="ellipsis-v" style="margin: 2px 0 0;"></button>';
+        html += '<div class="cardText" style="text-align:right; float:right;padding-top:5px;">';
+        html += '<paper-icon-button icon="more-vert" class="btnCardMenu"></paper-icon-button>';
         html += "</div>";
 
         html += "<div class='cardText'>";

dashboard-ui/scripts/ratingdialog.js

@@ -67,7 +67,7 @@
                     };
 
                     options.callback(review);
-                } else console.log("No callback function provided");
+                } else Logger.log("No callback function provided");
 
                 return false;
             });
@@ -91,7 +91,7 @@
                 id: id,
                 rating: rating,
                 callback: function (review) {
-                    console.log(review);
+                    Logger.log(review);
                     dialog.close();
 
                     ApiClient.createPackageReview(review).done(function () {

dashboard-ui/scripts/registrationservices.js

@@ -84,29 +84,29 @@
 
     addRecurringFields: function (page, period) {
 
-        var formSelector = '.supporterForm';
+        var form = page.querySelector('.supporterForm');
 
         // Add recurring fields to form
         $("<input type='hidden' name='a3' class='pprecurring' />")
             .attr('value', $('#donateAmt', page).val())
-            .appendTo(formSelector, page);
+            .appendTo(form);
 
         $("<input type='hidden' name='p3' value='1' class='pprecurring' />")
-            .appendTo(formSelector, page);
+            .appendTo(form);
 
         $("<input type='hidden' name='t3' value='" + period + "' class='pprecurring' />")
-            .appendTo(formSelector, page);
+            .appendTo(form);
 
         $("<input type='hidden' name='src' value='1' class='pprecurring' />")
-            .appendTo(formSelector, page);
+            .appendTo(form);
 
         $("<input type='hidden' name='sra' value='1' class='pprecurring' />")
-            .appendTo(formSelector, page);
+            .appendTo(form);
 
         //change command for subscriptions
         $('#ppCmd', page).val('_xclick-subscriptions');
 
-        $(formSelector, page).trigger('create');
+        Events.trigger(form, 'create');
 
     },
 

dashboard-ui/scripts/remotecontrol.js

@@ -296,7 +296,7 @@
 
     function firePlaybackEvent(name, session) {
 
-        $(player).trigger(name, [getPlayerState(session)]);
+        Events.trigger(player, name, [getPlayerState(session)]);
     }
 
     function onWebSocketConnectionChange() {
@@ -327,7 +327,7 @@
         }
         else if (msg.MessageType === "SessionEnded") {
 
-            console.log("Server reports another session ended");
+            Logger.log("Server reports another session ended");
 
             if (MediaController.getPlayerInfo().id == msg.Data.Id) {
                 MediaController.setDefaultPlayerActive();

dashboard-ui/scripts/reports.js

@@ -260,7 +260,7 @@
 
     function renderItems(page, result) {
 
-        $(document).scrollTop(0);
+        window.scrollTo(0, 0);
         var html = '';
 
         if (query.ReportView === "ReportData" || query.ReportView === "ReportStatistics") {
@@ -285,7 +285,7 @@
                 showLimit: false
             });
 
-            $('.listTopPaging', page).html(pagingHtml).trigger('create');
+            page.querySelector('.listTopPaging').innerHTML = pagingHtml;
             $('.listTopPaging', page).show();
 
             $('.listBottomPaging', page).html(pagingHtml).trigger('create');

dashboard-ui/scripts/scheduledtaskpage.js

@@ -147,7 +147,7 @@
 
         var page = $.mobile.activePage;
 
-        $('#selectTriggerType', page).val('DailyTrigger').trigger('change').selectmenu('refresh');
+        Events.trigger($('#selectTriggerType', page).val('DailyTrigger').selectmenu('refresh')[0], 'change');
 
         $('#popupAddTrigger', page).on("popupafteropen", function () {
             $('#addTriggerForm input:first', this).focus();

dashboard-ui/scripts/scheduledtaskspage.js

@@ -29,7 +29,7 @@
 
         var html = "";
 
-        html += '<ul data-role="listview" data-inset="true" data-auto-enhanced="false" data-split-icon="Play">';
+        html += '<ul data-role="listview" data-inset="true" data-auto-enhanced="false" data-split-icon="action">';
 
         var currentCategory;
 
@@ -53,15 +53,15 @@
 
             if (task.State == "Idle") {
 
-                html += "<a id='btnTask" + task.Id + "' class='btnStartTask' href='#' data-taskid='" + task.Id + "' data-icon='play'>" + Globalize.translate('ButtonStart') + "</a>";
+                html += "<a id='btnTask" + task.Id + "' class='btnStartTask' href='#' data-taskid='" + task.Id + "' data-icon='action'>" + Globalize.translate('ButtonStart') + "</a>";
             }
             else if (task.State == "Running") {
 
-                html += "<a id='btnTask" + task.Id + "' class='btnStopTask' href='#' data-taskid='" + task.Id + "' data-icon='stop'>" + Globalize.translate('ButtonStop') + "</a>";
+                html += "<a id='btnTask" + task.Id + "' class='btnStopTask' href='#' data-taskid='" + task.Id + "' data-icon='delete'>" + Globalize.translate('ButtonStop') + "</a>";
 
             } else {
 
-                html += "<a id='btnTask" + task.Id + "' class='btnStartTask' href='#' data-taskid='" + task.Id + "' data-icon='play' style='display:none;'>" + Globalize.translate('ButtonStart') + "</a>";
+                html += "<a id='btnTask" + task.Id + "' class='btnStartTask' href='#' data-taskid='" + task.Id + "' data-icon='action' style='display:none;'>" + Globalize.translate('ButtonStart') + "</a>";
             }
 
             html += "</a>";
@@ -71,7 +71,7 @@
 
         html += "</ul>";
 
-        $('#divScheduledTasks', page).html(html).trigger('create');
+        $('.divScheduledTasks', page).html(html).trigger('create');
     }
 
     function getTaskProgressHtml(task) {
@@ -143,21 +143,21 @@
 
         if (state == "Idle") {
 
-            elem = btnTask.addClass('btnStartTask').removeClass('btnStopTask').show().data("icon", "play").attr("title", Globalize.translate('ButtonStart'));
+            elem = btnTask.addClass('btnStartTask').removeClass('btnStopTask').show().data("icon", "action").attr("title", Globalize.translate('ButtonStart'));
 
-            elem.removeClass('ui-icon-stop').addClass('ui-icon-play');
+            elem.removeClass('ui-icon-delete').addClass('ui-icon-action');
         }
         else if (state == "Running") {
 
-            elem = btnTask.addClass('btnStopTask').removeClass('btnStartTask').show().data("icon", "stop").attr("title", Globalize.translate('ButtonStop'));
+            elem = btnTask.addClass('btnStopTask').removeClass('btnStartTask').show().data("icon", "delete").attr("title", Globalize.translate('ButtonStop'));
 
-            elem.removeClass('ui-icon-play').addClass('ui-icon-stop');
+            elem.removeClass('ui-icon-action').addClass('ui-icon-delete');
 
         } else {
 
-            elem = btnTask.addClass('btnStartTask').removeClass('btnStopTask').hide().data("icon", "play").attr("title", Globalize.translate('ButtonStart'));
+            elem = btnTask.addClass('btnStartTask').removeClass('btnStopTask').hide().data("icon", "action").attr("title", Globalize.translate('ButtonStart'));
 
-            elem.removeClass('ui-icon-stop').addClass('ui-icon-play');
+            elem.removeClass('ui-icon-delete').addClass('ui-icon-action');
         }
     }
 
@@ -183,7 +183,7 @@
 
         var page = this;
 
-        $('#divScheduledTasks', page).on('click', '.btnStartTask', function () {
+        $('.divScheduledTasks', page).on('click', '.btnStartTask', function () {
 
             var button = this;
             var id = button.getAttribute('data-taskid');
@@ -215,14 +215,12 @@
 
         $(ApiClient).on("websocketmessage", onWebSocketMessage).on("websocketopen", onWebSocketConnectionOpen);
 
-    }).on('pagehide', "#scheduledTasksPage", function () {
+    }).on('pagebeforehide', "#scheduledTasksPage", function () {
 
         var page = this;
 
         $(ApiClient).off("websocketmessage", onWebSocketMessage).off("websocketopen", onWebSocketConnectionOpen);
         stopInterval();
-
-        $('#divScheduledTasks', page).off('click', '.btnStartTask').off('click', '.btnStopTask');
     });
 
 })(jQuery, document, window);

dashboard-ui/scripts/search.js

@@ -91,20 +91,26 @@
             centerImage: true,
             textLines: getAdditionalTextLines
         });
-        $('.itemsContainer', elem).html(html).lazyChildren();
+
+        var itemsContainer = elem.querySelector('.itemsContainer');
+        itemsContainer.innerHTML = html;
+        ImageLoader.lazyChildren(itemsContainer);
     }
 
     function requestSearchHintsForOverlay(elem, searchTerm) {
 
         var currentTimeout = searchHintTimeout;
+        Dashboard.showLoadingMsg();
 
         ApiClient.getSearchHints({ userId: Dashboard.getCurrentUserId(), searchTerm: searchTerm, limit: 30 }).done(function (result) {
 
-            if (currentTimeout != searchHintTimeout) {
-                return;
+            if (currentTimeout == searchHintTimeout) {
+                renderSearchResultsInOverlay(elem, result.SearchHints);
             }
 
-            renderSearchResultsInOverlay(elem, result.SearchHints);
+            Dashboard.hideLoadingMsg();
+        }).fail(function () {
+            Dashboard.hideLoadingMsg();
         });
     }
 
@@ -128,17 +134,16 @@
 
     function getSearchOverlay(createIfNeeded) {
 
-        var elem = $('.searchResultsOverlay');
+        var elem = document.querySelector('.searchResultsOverlay');
 
-        if (createIfNeeded && !elem.length) {
+        if (createIfNeeded && !elem) {
 
             var html = '<div class="searchResultsOverlay ui-page-theme-b smoothScrollY">';
 
             html += '<div class="searchResultsContainer"><div class="itemsContainer"></div></div></div>';
 
-            elem = $(html).appendTo(document.body).hide().trigger('create');
-
-            elem.createCardMenus();
+            elem = $(html).appendTo(document.body).hide()[0];
+            $(elem).createCardMenus();
         }
 
         return elem;
@@ -146,14 +151,29 @@
 
     function onHeaderSearchChange(val) {
 
+        var elem;
+
         if (val) {
-            updateSearchOverlay(getSearchOverlay(true).fadeIn('fast'), val);
-            $(document.body).addClass('bodyWithPopupOpen');
+
+            elem = getSearchOverlay(true);
+
+            $(elem).show();
+            elem.style.opacity = '1';
+            document.body.classList.add('bodyWithPopupOpen');
+
+            updateSearchOverlay(elem, val);
 
         } else {
+            elem = getSearchOverlay(false);
 
-            updateSearchOverlay(getSearchOverlay(false).fadeOut('fast'), val);
-            $(document.body).removeClass('bodyWithPopupOpen');
+            if (elem) {
+                require(["jquery", "velocity"], function ($, Velocity) {
+
+                    $(elem).velocity("fadeOut");
+                    document.body.classList.remove('bodyWithPopupOpen');
+                });
+                updateSearchOverlay(elem, '');
+            }
         }
     }
 
@@ -212,6 +232,7 @@
             Velocity.animate(elem, { "left": "0px" },
             {
                 complete: function () {
+                    $('.headerSearchInput').focus();
                     $('.btnCloseSearch').show();
                 }
             });
@@ -220,22 +241,29 @@
 
     function hideSearchMenu() {
 
-        require(["jquery", "velocity"], function ($, Velocity) {
+        var viewMenuSearch = document.querySelector('.viewMenuSearch');
 
-            $('.btnCloseSearch').hide();
-            var elem = $('.viewMenuSearch')
-                .css({ left: '0' })[0];
+        if (!viewMenuSearch) {
+            return;
+        }
 
-            Velocity.animate(elem, { "left": "100%" },
-            {
-                complete: function () {
-                    $('.viewMenuSearch').addClass('hide');
-                }
+        if (!viewMenuSearch.classList.contains('hide')) {
+            require(["jquery", "velocity"], function ($, Velocity) {
+
+                $('.btnCloseSearch').hide();
+                viewMenuSearch.style.left = '0';
+
+                Velocity.animate(viewMenuSearch, { "left": "100%" },
+                {
+                    complete: function () {
+                        $('.viewMenuSearch').visible(false);
+                    }
+                });
             });
-        });
+        }
     }
 
-    $(document).on('pagehide', ".libraryPage", function () {
+    $(document).on('pagebeforehide', ".libraryPage", function () {
 
         $('#txtSearch', this).val('');
         $('#searchHints', this).empty();

dashboard-ui/scripts/sections.js

@@ -0,0 +1,475 @@
+(function ($, document) {
+
+    function getUserViews(userId) {
+
+        var deferred = $.Deferred();
+
+        ApiClient.getUserViews(userId).done(function (result) {
+
+            var items = result.Items;
+
+            deferred.resolveWith(null, [items]);
+        });
+
+        return deferred.promise();
+    }
+
+    function enableScrollX() {
+        return $.browser.mobile && AppInfo.enableAppLayouts;
+    }
+
+    function getThumbShape() {
+        return enableScrollX() ? 'overflowBackdrop' : 'backdrop';
+    }
+
+    function getLibraryButtonsHtml(items) {
+
+        var html = "";
+
+        // "My Library" backgrounds
+        for (var i = 0, length = items.length; i < length; i++) {
+
+            var item = items[i];
+
+            var icon;
+            var backgroundColor = 'rgba(82, 181, 75, 0.9)';
+
+            switch (item.CollectionType) {
+                case "movies":
+                    icon = "fa-film";
+                    backgroundColor = 'rgba(176, 94, 81, 0.9)';
+                    break;
+                case "music":
+                    icon = "fa-music";
+                    backgroundColor = 'rgba(217, 145, 67, 0.9)';
+                    break;
+                case "photos":
+                    icon = "fa-photo";
+                    backgroundColor = 'rgba(127, 0, 0, 0.9)';
+                    break;
+                case "livetv":
+                    icon = "fa-video-camera";
+                    backgroundColor = 'rgba(217, 145, 67, 0.9)';
+                    break;
+                case "tvshows":
+                    icon = "fa-video-camera";
+                    backgroundColor = 'rgba(77, 88, 164, 0.9)';
+                    break;
+                case "games":
+                    icon = "fa-gamepad";
+                    backgroundColor = 'rgba(183, 202, 72, 0.9)';
+                    break;
+                case "trailers":
+                    icon = "fa-film";
+                    backgroundColor = 'rgba(176, 94, 81, 0.9)';
+                    break;
+                case "homevideos":
+                    icon = "fa-video-camera";
+                    backgroundColor = 'rgba(110, 52, 32, 0.9)';
+                    break;
+                case "musicvideos":
+                    icon = "fa-video-camera";
+                    backgroundColor = 'rgba(143, 54, 168, 0.9)';
+                    break;
+                case "books":
+                    icon = "fa-book";
+                    break;
+                case "channels":
+                    icon = "fa-globe";
+                    backgroundColor = 'rgba(51, 136, 204, 0.9)';
+                    break;
+                case "playlists":
+                    icon = "fa-list";
+                    break;
+                default:
+                    icon = "fa-folder-o";
+                    break;
+            }
+
+            var cssClass = 'card smallBackdropCard buttonCard';
+
+            if (item.CollectionType) {
+                cssClass += ' ' + item.CollectionType + 'buttonCard';
+            }
+
+            var href = item.url || LibraryBrowser.getHref(item);
+
+            html += '<a data-itemid="' + item.Id + '" class="' + cssClass + '" href="' + href + '">';
+            html += '<div class="cardBox" style="background-color:' + backgroundColor + ';margin:4px;border-radius:4px;">';
+
+            html += "<div class='cardText' style='padding:8px 10px;color:#fff;font-size:14px;'>";
+            html += '<i class="fa ' + icon + '"></i>';
+            html += '<span style="margin-left:.7em;">' + item.Name + '</span>';
+            html += "</div>";
+
+            html += "</div>";
+
+            html += "</a>";
+        }
+
+        return html;
+    }
+
+    function loadlibraryButtons(elem, userId, index) {
+
+        return getUserViews(userId).done(function (items) {
+
+            var html = '<br/>';
+
+            if (index) {
+                html += '<h1 class="listHeader">' + Globalize.translate('HeaderMyMedia') + '</h1>';
+            }
+            html += '<div>';
+            html += getLibraryButtonsHtml(items);
+            html += '</div>';
+
+            elem.innerHTML = html;
+
+            handleLibraryLinkNavigations(elem);
+        });
+    }
+
+    function loadRecentlyAdded(elem, user, context) {
+
+        var limit = AppInfo.hasLowImageBandwidth ?
+         16 :
+         20;
+
+        var options = {
+
+            Limit: limit,
+            Fields: "PrimaryImageAspectRatio,SyncInfo",
+            ImageTypeLimit: 1,
+            EnableImageTypes: "Primary,Backdrop,Banner,Thumb"
+        };
+
+        return ApiClient.getJSON(ApiClient.getUrl('Users/' + user.Id + '/Items/Latest', options)).done(function (items) {
+
+            var html = '';
+
+            var cardLayout = false;
+
+            if (items.length) {
+                html += '<div>';
+                html += '<h1 style="display:inline-block; vertical-align:middle;" class="listHeader">' + Globalize.translate('HeaderLatestMedia') + '</h1>';
+
+                if (user.Policy.EnableUserPreferenceAccess && !AppInfo.isNativeApp) {
+                    html += '<a href="mypreferencesdisplay.html" class="clearLink" style="margin-left:2em;"><paper-button raised class="submit mini"><iron-icon icon="mode-edit"></iron-icon><span>' + Globalize.translate('ButtonEdit') + '</span></paper-button></a>';
+                }
+
+                html += '</div>';
+
+                html += '<div class="itemsContainer">';
+
+                html += LibraryBrowser.getPosterViewHtml({
+                    items: items,
+                    preferThumb: true,
+                    shape: 'backdrop',
+                    context: context || 'home',
+                    showUnplayedIndicator: false,
+                    showChildCountIndicator: true,
+                    lazy: true,
+                    cardLayout: cardLayout,
+                    showTitle: cardLayout,
+                    showYear: cardLayout,
+                    showDetailsMenu: true
+                });
+                html += '</div>';
+            }
+
+            elem.innerHTML = html;
+            ImageLoader.lazyChildren(elem);
+
+            $(elem).createCardMenus();
+        });
+    }
+
+    function loadLatestChannelMedia(elem, userId) {
+
+        var screenWidth = $(window).width();
+
+        var options = {
+
+            Limit: screenWidth >= 2400 ? 10 : (screenWidth >= 1600 ? 10 : (screenWidth >= 1440 ? 8 : (screenWidth >= 800 ? 7 : 6))),
+            Fields: "PrimaryImageAspectRatio,SyncInfo",
+            Filters: "IsUnplayed",
+            UserId: userId
+        };
+
+        return ApiClient.getJSON(ApiClient.getUrl("Channels/Items/Latest", options)).done(function (result) {
+
+            var html = '';
+
+            if (result.Items.length) {
+                html += '<h1 class="listHeader">' + Globalize.translate('HeaderLatestChannelMedia') + '</h1>';
+                html += '<div class="itemsContainer">';
+                html += LibraryBrowser.getPosterViewHtml({
+                    items: result.Items,
+                    preferThumb: true,
+                    shape: 'auto',
+                    showTitle: true,
+                    centerText: true,
+                    lazy: true,
+                    showDetailsMenu: true
+                });
+                html += '</div>';
+            }
+
+            elem.innerHTML = html;
+            ImageLoader.lazyChildren(elem);
+
+            $(elem).createCardMenus();
+        });
+    }
+
+    function loadLibraryTiles(elem, user, shape, index, autoHideOnMobile, showTitles) {
+
+        return getUserViews(user.Id).done(function (items) {
+
+            var html = '';
+
+            if (autoHideOnMobile) {
+                html += '<div class="hiddenSectionOnMobile">';
+            } else {
+                html += '<div>';
+            }
+
+            if (items.length) {
+
+                var cssClass = index !== 0 ? 'listHeader' : 'listHeader';
+
+                html += '<div>';
+                html += '<h1 style="display:inline-block; vertical-align:middle;" class="' + cssClass + '">' + Globalize.translate('HeaderMyMedia') + '</h1>';
+
+                if (user.Policy.EnableUserPreferenceAccess && !AppInfo.isNativeApp) {
+                    html += '<a href="mypreferencesdisplay.html" class="clearLink" style="margin-left:2em;"><paper-button raised class="submit mini"><iron-icon icon="mode-edit"></iron-icon><span>' + Globalize.translate('ButtonEdit') + '</span></paper-button></a>';
+                }
+
+                html += '</div>';
+
+                html += '<div class="homeTopViews">';
+                html += LibraryBrowser.getPosterViewHtml({
+                    items: items,
+                    shape: shape,
+                    showTitle: showTitles,
+                    centerText: true,
+                    lazy: true,
+                    autoThumb: true,
+                    transition: false
+                });
+                html += '</div>';
+            }
+
+            html += '</div>';
+
+            if (autoHideOnMobile) {
+                html += '<div class="hiddenSectionOnNonMobile" style="margin-top:1em;">';
+                html += getLibraryButtonsHtml(items);
+                html += '</div>';
+            }
+
+            elem.innerHTML = html;
+            ImageLoader.lazyChildren(elem);
+
+            $(elem).createCardMenus({ showDetailsMenu: false });
+
+            handleLibraryLinkNavigations(elem);
+        });
+    }
+
+    function loadResume(elem, userId) {
+
+        var screenWidth = $(window).width();
+
+        var options = {
+
+            SortBy: "DatePlayed",
+            SortOrder: "Descending",
+            MediaTypes: "Video",
+            Filters: "IsResumable",
+            Limit: screenWidth >= 1920 ? 10 : (screenWidth >= 1600 ? 8 : (screenWidth >= 1200 ? 9 : 6)),
+            Recursive: true,
+            Fields: "PrimaryImageAspectRatio,SyncInfo",
+            CollapseBoxSetItems: false,
+            ExcludeLocationTypes: "Virtual",
+            ImageTypeLimit: 1,
+            EnableImageTypes: "Primary,Backdrop,Banner,Thumb"
+        };
+
+        return ApiClient.getItems(userId, options).done(function (result) {
+
+            var html = '';
+
+            var cardLayout = AppInfo.hasLowImageBandwidth;
+
+            if (result.Items.length) {
+                html += '<h1 class="listHeader">' + Globalize.translate('HeaderResume') + '</h1>';
+                if (enableScrollX()) {
+                    html += '<div class="hiddenScrollX itemsContainer">';
+                } else {
+                    html += '<div class="itemsContainer">';
+                }
+                html += LibraryBrowser.getPosterViewHtml({
+                    items: result.Items,
+                    preferThumb: true,
+                    shape: getThumbShape(),
+                    overlayText: screenWidth >= 800 && !cardLayout,
+                    showTitle: true,
+                    showParentTitle: true,
+                    context: 'home',
+                    lazy: true,
+                    cardLayout: cardLayout,
+                    showDetailsMenu: true
+                });
+                html += '</div>';
+            }
+
+            elem.innerHTML = html;
+
+            ImageLoader.lazyChildren(elem);
+            $(elem).createCardMenus();
+        });
+    }
+
+    function handleLibraryLinkNavigations(elem) {
+
+        $('a', elem).on('click', function () {
+
+            var card = $(this).parents('.card');
+            var textElem = $('.cardText', card);
+
+            var text = textElem.html();
+
+            LibraryMenu.setText(text);
+        });
+    }
+
+    function loadLatestChannelItems(elem, userId, options) {
+
+        options = $.extend(options || {}, {
+
+            UserId: userId,
+            SupportsLatestItems: true
+        });
+
+        return ApiClient.getJSON(ApiClient.getUrl("Channels", options)).done(function (result) {
+
+            var channels = result.Items;
+
+            var channelsHtml = channels.map(function (c) {
+
+                return '<div id="channel' + c.Id + '"></div>';
+
+            }).join('');
+
+            elem.innerHTML = channelsHtml;
+
+            for (var i = 0, length = channels.length; i < length; i++) {
+
+                var channel = channels[i];
+
+                loadLatestChannelItemsFromChannel(elem, channel, i);
+            }
+
+        });
+    }
+
+    function loadLatestChannelItemsFromChannel(page, channel, index) {
+
+        var screenWidth = $(window).width();
+
+        var options = {
+
+            Limit: screenWidth >= 1600 ? 10 : (screenWidth >= 1440 ? 5 : (screenWidth >= 800 ? 6 : 6)),
+            Fields: "PrimaryImageAspectRatio,SyncInfo",
+            Filters: "IsUnplayed",
+            UserId: Dashboard.getCurrentUserId(),
+            ChannelIds: channel.Id
+        };
+
+        ApiClient.getJSON(ApiClient.getUrl("Channels/Items/Latest", options)).done(function (result) {
+
+            var html = '';
+
+            if (result.Items.length) {
+
+                var cssClass = index !== 0 ? 'listHeader' : 'listHeader';
+
+                html += '<div>';
+                var text = Globalize.translate('HeaderLatestFromChannel').replace('{0}', channel.Name);
+                html += '<h1 style="display:inline-block; vertical-align:middle;" class="' + cssClass + '">' + text + '</h1>';
+                html += '<a href="channelitems.html?context=channels&id=' + channel.Id + '" class="clearLink" style="margin-left:2em;"><paper-button raised class="more mini"><span>' + Globalize.translate('ButtonMore') + '</span></paper-button></a>';
+                html += '</div>';
+            }
+            html += '<div class="itemsContainer">';
+            html += LibraryBrowser.getPosterViewHtml({
+                items: result.Items,
+                shape: 'autohome',
+                defaultShape: 'square',
+                showTitle: true,
+                centerText: true,
+                context: 'channels',
+                lazy: true,
+                showDetailsMenu: true
+            });
+            html += '</div>';
+
+            var elem = page.querySelector('#channel' + channel.Id + '');
+            elem.innerHTML = html;
+            ImageLoader.lazyChildren(elem);
+
+            $(elem).createCardMenus();
+        });
+    }
+
+    function loadLatestLiveTvRecordings(elem, userId, index) {
+
+        return ApiClient.getLiveTvRecordings({
+
+            userId: userId,
+            limit: 5,
+            IsInProgress: false
+
+        }).done(function (result) {
+
+            var html = '';
+
+            if (result.Items.length) {
+
+                var cssClass = index !== 0 ? 'listHeader' : 'listHeader';
+
+                html += '<div>';
+                html += '<h1 style="display:inline-block; vertical-align:middle;" class="' + cssClass + '">' + Globalize.translate('HeaderLatestTvRecordings') + '</h1>';
+                html += '<a href="livetvrecordings.html?context=livetv" class="clearLink" style="margin-left:2em;"><paper-button raised class="more mini"><span>' + Globalize.translate('ButtonMore') + '</span></paper-button></a>';
+                html += '</div>';
+            }
+
+            var screenWidth = $(window).width();
+
+            html += LibraryBrowser.getPosterViewHtml({
+                items: result.Items,
+                shape: "autohome",
+                showTitle: true,
+                showParentTitle: true,
+                overlayText: screenWidth >= 600,
+                coverImage: true,
+                lazy: true,
+                showDetailsMenu: true
+            });
+
+            elem.innerHTML = html;
+            ImageLoader.lazyChildren(elem);
+        });
+    }
+
+    window.Sections = {
+        loadRecentlyAdded: loadRecentlyAdded,
+        loadLatestChannelMedia: loadLatestChannelMedia,
+        loadLibraryTiles: loadLibraryTiles,
+        loadResume: loadResume,
+        loadLatestChannelItems: loadLatestChannelItems,
+        loadLatestLiveTvRecordings: loadLatestLiveTvRecordings,
+        loadlibraryButtons: loadlibraryButtons
+    };
+
+})(jQuery, document);

dashboard-ui/scripts/selectserver.js

@@ -69,7 +69,7 @@
             html += '<div class="cardImage" style="text-align:center;">';
 
             var icon = server.Id == 'new' ? 'plus-circle' : 'server';
-            html += '<i class="fa fa-' + icon + '" style="color:#fff;vertical-align:middle;font-size:100px;"></i>';
+            html += '<i class="fa fa-' + icon + '" style="color:#fff;vertical-align:middle;font-size:100px;margin-top:40px;"></i>';
         }
 
         html += "</div>";
@@ -83,8 +83,8 @@
         html += '<div class="cardFooter outerCardFooter">';
 
         if (server.showOptions !== false) {
-            html += '<div class="cardText" style="text-align:right; float:right;">';
-            html += '<button class="listviewMenuButton imageButton btnCardOptions btnServerMenu" type="button" data-role="none" style="margin: 4px 0 0;"><i class="material-icons">more_vert</i></button>';
+            html += '<div class="cardText" style="text-align:right; float:right;padding:0;">';
+            html += '<paper-icon-button icon="more-vert" class="btnServerMenu"></paper-icon-button>';
             html += "</div>";
         }
 
@@ -218,33 +218,35 @@
 
         var card = $(elem).parents('.card');
         var page = $(elem).parents('.page');
-        var id = card.attr('data-id');
+        var serverId = card.attr('data-id');
         var connectserverid = card.attr('data-connectserverid');
 
-        $('.serverMenu', page).popup("close").remove();
-
-        var html = '<div data-role="popup" class="serverMenu" data-theme="a">';
-
-        html += '<ul data-role="listview" style="min-width: 180px;">';
-        html += '<li data-role="list-divider">' + Globalize.translate('HeaderMenu') + '</li>';
-
-        html += '<li><a href="#" class="btnDelete" data-connectserverid="' + connectserverid + '">' + Globalize.translate('ButtonDelete') + '</a></li>';
-
-        html += '</ul>';
-
-        html += '</div>';
-
-        page.append(html);
-
-        var flyout = $('.serverMenu', page).popup({ positionTo: elem || "window" }).trigger('create').popup("open").on("popupafterclose", function () {
-
-            $(this).off("popupafterclose").remove();
+        var menuItems = [];
 
+        menuItems.push({
+            name: Globalize.translate('ButtonDelete'),
+            id: 'delete',
+            ironIcon: 'delete'
         });
 
-        $('.btnDelete', flyout).on('click', function () {
-            deleteServer(page, this.getAttribute('data-connectserverid'));
-            $('.serverMenu', page).popup("close").remove();
+        require(['actionsheet'], function () {
+
+            ActionSheetElement.show({
+                items: menuItems,
+                positionTo: elem,
+                callback: function (id) {
+
+                    switch (id) {
+
+                        case 'delete':
+                            deleteServer(page, connectserverid);
+                            break;
+                        default:
+                            break;
+                    }
+                }
+            });
+
         });
     }
 
@@ -304,7 +306,7 @@
         html += '<a class="cardContent" href="' + href + '">';
 
         html += '<div class="cardImage" style="text-align:center;">';
-        html += '<i class="fa fa-globe" style="color:#fff;vertical-align:middle;font-size:100px;"></i>';
+        html += '<i class="fa fa-globe" style="color:#fff;vertical-align:middle;font-size:100px;margin-top:40px;"></i>';
         html += "</div>";
 
         // cardContent
@@ -315,8 +317,8 @@
 
         html += '<div class="cardFooter outerCardFooter">';
 
-        html += '<div class="cardText" style="text-align:right; float:right;">';
-        html += '<button class="listviewMenuButton imageButton btnCardOptions btnInviteMenu" type="button" data-role="none" style="margin: 4px 0 0;"><i class="material-icons">more_vert</i></button>';
+        html += '<div class="cardText" style="text-align:right; float:right;padding:0;">';
+        html += '<paper-icon-button icon="more-vert" class="btnInviteMenu"></paper-icon-button>';
         html += "</div>";
 
         html += '<div class="cardText">';
@@ -383,15 +385,6 @@
 
             servers = servers.slice(0);
 
-            if (AppInfo.isNativeApp) {
-                servers.push({
-                    Name: Globalize.translate('ButtonNewServer'),
-                    Id: 'new',
-                    showOptions: false,
-                    href: 'connectlogin.html?mode=manualserver'
-                });
-            }
-
             renderServers(page, servers);
 
             Dashboard.hideLoadingMsg();
@@ -413,6 +406,12 @@
         } else {
             $(page).removeClass('libraryPage').removeClass('noSecondaryNavPage').addClass('standalonePage');
         }
+
+        if (AppInfo.isNativeApp) {
+            $('.addServer', page).show();
+        } else {
+            $('.addServer', page).hide();
+        }
     }
 
     $(document).on('pageinitdepends pagebeforeshowready', "#selectServerPage", function () {

dashboard-ui/scripts/songs.js

@@ -45,7 +45,7 @@
         ApiClient.getItems(Dashboard.getCurrentUserId(), query).done(function (result) {
 
             // Scroll back up so they can see the results from the beginning
-            $(document).scrollTop(0);
+            window.scrollTo(0, 0);
 
             var html = '';
             var pagingHtml = LibraryBrowser.getQueryPagingHtml({
@@ -57,7 +57,7 @@
                 updatePageSizeSetting: false
             });
 
-            $('.listTopPaging', page).html(pagingHtml).trigger('create');
+            page.querySelector('.listTopPaging').innerHTML = pagingHtml;
 
             updateFilterControls(page);
 
@@ -68,9 +68,11 @@
                 smallIcon: true
             });
 
-            var elem = $('#items', page).html(html).trigger('create').lazyChildren();
+            var elem = page.querySelector('#items');
+            elem.innerHTML = html + pagingHtml;
+            ImageLoader.lazyChildren(elem);
 
-            $(pagingHtml).appendTo(elem).trigger('create');
+            Events.trigger(elem, 'create');
 
             $('.btnNextPage', page).on('click', function () {
                 query.StartIndex += query.Limit;
@@ -174,7 +176,7 @@
             reloadItems(page);
         });
 
-    }).on('pageshowready', "#songsPage", function () {
+    }).on('pagebeforeshowready', "#songsPage", function () {
 
         var page = this;
 

dashboard-ui/scripts/supporterkeypage.js

@@ -13,10 +13,10 @@
             $('#txtSupporterKey', page).val(info.SupporterKey);
 
             if (info.SupporterKey && !info.IsMBSupporter) {
-                $('#txtSupporterKey', page).addClass("invalidEntry");
+                page.querySelector('#txtSupporterKey').classList.add('invalidEntry');
                 $('.notSupporter', page).show();
             } else {
-                $('#txtSupporterKey', page).removeClass("invalidEntry");
+                page.querySelector('#txtSupporterKey').classList.remove('invalidEntry');
                 $('.notSupporter', page).hide();
             }
 
@@ -78,7 +78,7 @@
         };
 
         var url = "http://mb3admin.com/admin/service/supporter/linkKeys";
-        console.log(url);
+        Logger.log(url);
         $.post(url, info).done(function (res) {
             var result = JSON.parse(res);
             Dashboard.hideLoadingMsg();
@@ -87,7 +87,7 @@
             } else {
                 Dashboard.showError(result.ErrorMessage);
             }
-            console.log(result);
+            Logger.log(result);
 
         });
 
@@ -102,7 +102,7 @@
         var email = $('#txtEmail', form).val();
 
         var url = "http://mb3admin.com/admin/service/supporter/retrievekey?email=" + email;
-        console.log(url);
+        Logger.log(url);
         $.post(url).done(function (res) {
             var result = JSON.parse(res);
             Dashboard.hideLoadingMsg();
@@ -111,7 +111,7 @@
             } else {
                 Dashboard.showError(result.ErrorMessage);
             }
-            console.log(result);
+            Logger.log(result);
 
         });
 

dashboard-ui/scripts/sync.js

@@ -224,17 +224,14 @@
 
             html += '<div style="margin:1em 0 1.5em;">';
             html += '<h1 style="margin: 0;display:inline-block;vertical-align:middle;">' + Globalize.translate('SyncMedia') + '</h1>';
-            html += '<a class="accentButton accentButton-g" style="display:inline-block;vertical-align:middle;margin-top:0;margin-left: 20px;" href="https://github.com/MediaBrowser/Wiki/wiki/Sync" target="_blank">';
-            html += '<i class="fa fa-info-circle"></i>';
-            html += Globalize.translate('ButtonHelp');
-            html += '</a>';
+
+            html += '<a href="https://github.com/MediaBrowser/Wiki/wiki/Sync" target="_blank" class="clearLink" style="margin-top:0;display:inline-block;vertical-align:middle;margin-left:1em;"><paper-button raised class="secondary mini"><i class="fa fa-info-circle"></i>' + Globalize.translate('ButtonHelp') + '</paper-button></a>';
             html += '</div>';
 
             html += '<div class="formFields"></div>';
 
-            html += '<br/>';
             html += '<p>';
-            html += '<button type="submit" data-icon="refresh" data-theme="b">' + Globalize.translate('ButtonSync') + '</button>';
+            html += '<button type="submit" data-role="none" class="clearButton"><paper-button raised class="submit block"><iron-icon icon="refresh"></iron-icon><span>' + Globalize.translate('ButtonSync') + '</span></paper-button></button>';
             html += '</p>';
 
             html += '</form>';
@@ -242,6 +239,7 @@
             html += '</div>';
 
             $(document.body).append(html);
+            require(['paperbuttonstyle']);
 
             var elem = $('.syncPanel').panel({}).trigger('create').panel("open").on("panelclose", function () {
                 $(this).off("panelclose").remove();
@@ -259,6 +257,8 @@
                 dialogOptionsFn: getTargetDialogOptionsFn(dialogOptionsQuery)
             });
         });
+
+        require(['jqmicons']);
     }
 
     function getTargetDialogOptionsFn(query) {
@@ -379,12 +379,7 @@
 
         Dashboard.getCurrentUser().done(function (user) {
 
-            if (user.Policy.EnableSync) {
-                $('.categorySyncButton', page).show();
-            } else {
-                $('.categorySyncButton', page).hide();
-            }
-
+            $('.categorySyncButton', page).visible(user.Policy.EnableSync);
         });
     }
 

dashboard-ui/scripts/syncactivity.js

@@ -2,30 +2,24 @@
 
     function cancelJob(page, id) {
 
-        $('.jobMenu', page).on("popupafterclose.deleteuser", function () {
+        var msg = Globalize.translate('CancelSyncJobConfirmation');
 
-            $(this).off('popupafterclose.deleteuser');
+        Dashboard.confirm(msg, Globalize.translate('HeaderCancelSyncJob'), function (result) {
 
-            var msg = Globalize.translate('CancelSyncJobConfirmation');
+            if (result) {
+                Dashboard.showLoadingMsg();
 
-            Dashboard.confirm(msg, Globalize.translate('HeaderCancelSyncJob'), function (result) {
+                ApiClient.ajax({
 
-                if (result) {
-                    Dashboard.showLoadingMsg();
+                    url: ApiClient.getUrl('Sync/Jobs/' + id),
+                    type: 'DELETE'
 
-                    ApiClient.ajax({
+                }).done(function () {
 
-                        url: ApiClient.getUrl('Sync/Jobs/' + id),
-                        type: 'DELETE'
-
-                    }).done(function () {
-
-                        reloadData(page);
-                    });
-                }
-            });
-
-        }).popup('close');
+                    reloadData(page);
+                });
+            }
+        });
     }
 
     function getSyncJobHtml(page, job, cardBoxCssClass, syncJobPage) {
@@ -123,10 +117,8 @@
             textLines.push(' ');
         }
 
-        html += '<div class="cardText" style="text-align:right; position:absolute; bottom:5px; right: 5px;font-size:20px;">';
-        html += '<button type="button" data-role="none" class="btnJobMenu imageButton">';
-        html += '<i class="material-icons">more_vert</i>';
-        html += '</button>';
+        html += '<div class="cardText" style="text-align:right; float:right;padding:0;">';
+        html += '<paper-icon-button icon="more-vert" class="btnJobMenu"></paper-icon-button>';
         html += "</div>";
 
         for (var i = 0, length = textLines.length; i < length; i++) {
@@ -185,9 +177,8 @@
             html += getSyncJobHtml(page, job, cardBoxCssClass, syncJobPage);
         }
 
-        var elem = $('.syncActivity', page).html(html).trigger('create');
-
-        $(".lazy", elem).unveil(200);
+        var elem = $('.syncActivity', page).html(html).lazyChildren();
+        Events.trigger(elem[0], 'create');
 
         $('.btnJobMenu', elem).on('click', function () {
             showJobMenu(this);
@@ -202,37 +193,46 @@
     function showJobMenu(elem) {
 
         var card = $(elem).parents('.card');
-        var page = $(elem).parents('.page');
-        var id = card.attr('data-id');
+        var jobId = card.attr('data-id');
         var status = card.attr('data-status');
 
-        $('.jobMenu', page).popup("close").remove();
-
-        var html = '<div data-role="popup" class="jobMenu tapHoldMenu" data-theme="a">';
-
-        html += '<ul data-role="listview" style="min-width: 180px;">';
-        html += '<li data-role="list-divider">' + Globalize.translate('HeaderMenu') + '</li>';
+        var menuItems = [];
 
         if (status == 'Cancelled') {
-            html += '<li data-icon="delete"><a href="#" class="btnCancelJob" data-id="' + id + '">' + Globalize.translate('ButtonDelete') + '</a></li>';
+            menuItems.push({
+                name: Globalize.translate('ButtonDelete'),
+                id: 'delete',
+                ironIcon: 'delete'
+            });
         } else {
-            html += '<li data-icon="delete"><a href="#" class="btnCancelJob" data-id="' + id + '">' + Globalize.translate('ButtonCancel') + '</a></li>';
+            menuItems.push({
+                name: Globalize.translate('ButtonCancelSyncJob'),
+                id: 'cancel',
+                ironIcon: 'delete'
+            });
         }
 
-        html += '</ul>';
+        require(['actionsheet'], function () {
 
-        html += '</div>';
+            ActionSheetElement.show({
+                items: menuItems,
+                positionTo: elem,
+                callback: function (id) {
 
-        page.append(html);
+                    switch (id) {
 
-        var flyout = $('.jobMenu', page).popup({ positionTo: elem || "window" }).trigger('create').popup("open").on("popupafterclose", function () {
+                        case 'delete':
+                            cancelJob(jobId);
+                            break;
+                        case 'cancel':
+                            cancelJob(jobId);
+                            break;
+                        default:
+                            break;
+                    }
+                }
+            });
 
-            $(this).off("popupafterclose").remove();
-
-        });
-
-        $('.btnCancelJob', flyout).on('click', function () {
-            cancelJob(page, this.getAttribute('data-id'));
         });
     }
 
@@ -312,9 +312,9 @@
         });
 
         startListening(page);
-        $(ApiClient).on("websocketmessage.syncactivity", onWebSocketMessage);
+        $(ApiClient).on("websocketmessage", onWebSocketMessage);
 
-    }).on('pagehide', ".syncActivityPage", function () {
+    }).on('pagebeforehide', ".syncActivityPage", function () {
 
         var page = this;
 
@@ -324,7 +324,7 @@
         });
 
         stopListening();
-        $(ApiClient).off(".syncactivity");
+        $(ApiClient).off("websocketmessage", onWebSocketMessage);
     });
 
 })();