From a391e96df54e9fdc9b345c7b2fe51554cd292233 Mon Sep 17 00:00:00 2001
From: Luke Pulverenti <luke.pulverenti@gmail.com>
Date: Mon, 6 Jun 2016 20:44:15 -0400
Subject: [PATCH] continue jQuery removal

---
 .../metadataeditor.template.html              |   2 +-
 dashboard-ui/scripts/htmlmediarenderer.js     |  41 ++--
 dashboard-ui/scripts/mediaplayer-video.js     | 180 ++++++++++--------
 dashboard-ui/scripts/mediaplayer.js           |   2 +-
 dashboard-ui/scripts/registrationservices.js  | 148 +++++++-------
 dashboard-ui/streamingsettings.html           |  32 ++--
 .../thirdparty/paper-button-style.css         |   4 +-
 dashboard-ui/useredit.html                    |  25 +--
 8 files changed, 228 insertions(+), 206 deletions(-)

diff --git a/dashboard-ui/components/metadataeditor/metadataeditor.template.html b/dashboard-ui/components/metadataeditor/metadataeditor.template.html
index 73578db83..bc43258a9 100644
--- a/dashboard-ui/components/metadataeditor/metadataeditor.template.html
+++ b/dashboard-ui/components/metadataeditor/metadataeditor.template.html
@@ -301,7 +301,7 @@
             </div>
         </div>
         <br />
-        <button is="emby-button" type="submit" class="raised submit block"><iron-icon icon="check"></iron-icon><span>${ButtonSave}</span></button>
+        <button is="emby-button" type="submit" class="raised submit block btnSave"><iron-icon icon="check"></iron-icon><span>${ButtonSave}</span></button>
     </div>
     <br />
     <br />
diff --git a/dashboard-ui/scripts/htmlmediarenderer.js b/dashboard-ui/scripts/htmlmediarenderer.js
index f651374f5..173981535 100644
--- a/dashboard-ui/scripts/htmlmediarenderer.js
+++ b/dashboard-ui/scripts/htmlmediarenderer.js
@@ -1,4 +1,4 @@
-define(['jQuery'], function ($) {
+define([], function () {
 
     var supportsTextTracks;
     var hlsPlayer;
@@ -51,7 +51,7 @@
 
             var elem = e.target;
             elem.removeEventListener('playing', onOneAudioPlaying);
-            $('.mediaPlayerAudioContainer').hide();
+            document.querySelector('.mediaPlayerAudioContainer').classList.add('hide');
         }
 
         function onPlaying() {
@@ -113,7 +113,7 @@
             var requiresNativeControls = !self.enableCustomVideoControls();
 
             if (requiresNativeControls) {
-                $(element).attr('controls', 'controls');
+                element.setAttribute('controls', 'controls');
             }
 
             if (requiresSettingStartTimeOnStart) {
@@ -137,9 +137,9 @@
 
         function createAudioElement() {
 
-            var elem = $('.mediaPlayerAudio');
+            var elem = document.querySelector('.mediaPlayerAudio');
 
-            if (!elem.length) {
+            if (!elem) {
                 var html = '';
 
                 var requiresControls = !MediaPlayer.canAutoPlayAudio();
@@ -147,19 +147,17 @@
                 if (requiresControls) {
                     html += '<div class="mediaPlayerAudioContainer" style="position: fixed;top: 40%;text-align: center;left: 0;right: 0;z-index:999999;"><div class="mediaPlayerAudioContainerInner">';;
                 } else {
-                    html += '<div class="mediaPlayerAudioContainer" style="display:none;padding: 1em;background: #222;"><div class="mediaPlayerAudioContainerInner">';;
+                    html += '<div class="mediaPlayerAudioContainer hide" style="padding: 1em;background: #222;"><div class="mediaPlayerAudioContainerInner">';;
                 }
 
                 html += '<audio class="mediaPlayerAudio" controls>';
                 html += '</audio></div></div>';
 
-                $(document.body).append(html);
+                document.body.insertAdjacentHTML('beforeend', html);
 
-                elem = $('.mediaPlayerAudio');
+                elem = document.querySelector('.mediaPlayerAudio');
             }
 
-            elem = elem[0];
-
             elem.addEventListener('playing', onOneAudioPlaying);
             elem.addEventListener('timeupdate', onTimeUpdate);
             elem.addEventListener('ended', onEnded);
@@ -212,9 +210,10 @@
 
             html += '</video>';
 
-            var elem = $('#videoElement', '#videoPlayer').prepend(html);
+            var elem = document.querySelector('#videoPlayer #videoElement');
+            elem.insertAdjacentHTML('afterbegin', html);
 
-            var itemVideo = $('.itemVideo', elem)[0];
+            var itemVideo = elem.querySelector('.itemVideo');
 
             itemVideo.addEventListener('loadedmetadata', onLoadedMetadata);
 
@@ -485,7 +484,9 @@
                 }
 
                 if (elem.tagName.toLowerCase() != 'audio') {
-                    $(elem).remove();
+                    if (elem.parentNode) {
+                        elem.parentNode.removeChild(elem);
+                    }
                 }
             }
         };
@@ -750,7 +751,7 @@
                 setTrackForCustomDisplay(mediaElement, null);
             } else {
                 setTrackForCustomDisplay(mediaElement, track);
-                
+
                 // null these out to disable the player's native display (handled below)
                 streamIndex = -1;
                 track = null;
@@ -816,8 +817,8 @@
             }
 
             var allTracks = mediaElement.textTracks; // get list of tracks
-
-            for (var i = 0; i < allTracks.length; i++) {
+            var i;
+            for (i = 0; i < allTracks.length; i++) {
 
                 var track = allTracks[i];
 
@@ -832,11 +833,13 @@
                 }
             }
 
-            $('track', mediaElement).each(function () {
+            var trackElements = mediaElement.querySelectorAll('track');
+            for (i = 0; i < trackElements.length; i++) {
 
-                this.src = replaceQueryString(this.src, 'startPositionTicks', startPositionTicks);
+                var trackElement = trackElements[i];
 
-            });
+                trackElement.src = replaceQueryString(trackElement.src, 'startPositionTicks', startPositionTicks);
+            }
         };
 
         self.enableCustomVideoControls = function () {
diff --git a/dashboard-ui/scripts/mediaplayer-video.js b/dashboard-ui/scripts/mediaplayer-video.js
index 9557fdf11..22823b4d7 100644
--- a/dashboard-ui/scripts/mediaplayer-video.js
+++ b/dashboard-ui/scripts/mediaplayer-video.js
@@ -1,4 +1,4 @@
-define(['appSettings', 'datetime', 'mediaInfo', 'jQuery', 'scrollStyles', 'paper-icon-button-light'], function (appSettings, datetime, mediaInfo, $) {
+define(['appSettings', 'datetime', 'mediaInfo', 'scrollStyles', 'paper-icon-button-light'], function (appSettings, datetime, mediaInfo) {
 
     function createVideoPlayer(self) {
 
@@ -32,6 +32,13 @@
             }
         };
 
+        function setClass(elems, method, className) {
+
+            for (var i = 0, length = elems.length; i < length; i++) {
+                elems[i].classList[method](className);
+            }
+        }
+
         self.resetEnhancements = function () {
 
             if (!initComplete) {
@@ -48,8 +55,11 @@
             videoPlayerElement.classList.remove('fullscreenVideo');
             videoPlayerElement.classList.remove('idlePlayer');
 
-            $('.hiddenOnIdle').removeClass("inactive");
-            $("video").remove();
+            setClass(document.querySelectorAll('.hiddenOnIdle'), 'remove', 'inactive');
+            var video = videoPlayerElement.querySelector('video');
+            if (video) {
+                video.parentNode.removeChild(video);
+            }
 
             document.querySelector('.mediaButton.infoButton').classList.remove('active');
             document.querySelector('.videoControls .nowPlayingInfo').classList.add('hide');
@@ -338,7 +348,7 @@
                 throw new Error('item cannot be null');
             }
 
-            var mediaControls = $("#videoPlayer");
+            var mediaControls = document.querySelector("#videoPlayer");
 
             var state = self.getPlayerStateInternal(self.currentMediaRenderer, item.CurrentProgram || item, self.currentMediaSource);
 
@@ -382,9 +392,9 @@
             }
 
             if (url) {
-                $('.nowPlayingImage', mediaControls).html('<img src="' + url + '" />');
+                mediaControls.querySelector('.nowPlayingImage').innerHTML = '<img src="' + url + '" />';
             } else {
-                $('.nowPlayingImage', mediaControls).html('');
+                mediaControls.querySelector('.nowPlayingImage').innerHTML = '';
             }
 
             if (state.NowPlayingItem.LogoItemId) {
@@ -395,37 +405,39 @@
                     tag: state.NowPlayingItem.LogoImageTag
                 });
 
-                $('.videoTopControlsLogo', mediaControls).html('<img src="' + url + '" />');
+                mediaControls.querySelector('.videoTopControlsLogo').innerHTML = '<img src="' + url + '" />';
             } else {
-                $('.videoTopControlsLogo', mediaControls).html('');
+                mediaControls.querySelector('.videoTopControlsLogo').innerHTML = '';
             }
 
-            var elem = $('.nowPlayingTabs', mediaControls).html(getNowPlayingTabsHtml(item.CurrentProgram || item)).lazyChildren();
+            var elem = mediaControls.querySelector('.nowPlayingTabs');
+            elem.innerHTML = getNowPlayingTabsHtml(item.CurrentProgram || item);
+            ImageLoader.lazyChildren(elem);
 
-            $('.nowPlayingTabButton', elem).on('click', function () {
+            function onTabButtonClick() {
+                if (!this.classList.contains('selectedNowPlayingTabButton')) {
 
-                if (!$(this).hasClass('selectedNowPlayingTabButton')) {
-                    $('.selectedNowPlayingTabButton').removeClass('selectedNowPlayingTabButton');
-                    $(this).addClass('selectedNowPlayingTabButton');
-                    $('.nowPlayingTab').hide();
-                    $('.' + this.getAttribute('data-tab')).show().trigger('scroll');
+                    var selectedNowPlayingTabButton = document.querySelector('.selectedNowPlayingTabButton');
+                    if (selectedNowPlayingTabButton) {
+                        selectedNowPlayingTabButton.classList.remove('selectedNowPlayingTabButton');
+                    }
+                    this.classList.add('selectedNowPlayingTabButton');
+                    setClass(document.querySelectorAll('.nowPlayingTab'), 'add', 'hide');
+                    document.querySelector('.' + this.getAttribute('data-tab')).classList.remove('hide');
                 }
-            });
+            }
 
-            $('.chapterCard', elem).on('click', function () {
+            var nowPlayingTabButtons = elem.querySelectorAll('.nowPlayingTabButton');
+            for (var i = 0, length = nowPlayingTabButtons.length; i < length; i++) {
+                nowPlayingTabButtons[i].addEventListener('click', onTabButtonClick);
+            }
+
+            elem.querySelector('.chapterCard').addEventListener('click', function () {
 
                 self.seek(parseInt(this.getAttribute('data-position')));
             });
         };
 
-        $.fn.lazyChildren = function () {
-
-            for (var i = 0, length = this.length; i < length; i++) {
-                ImageLoader.lazyChildren(this[i]);
-            }
-            return this;
-        };
-
         function getNowPlayingTabsHtml(item) {
 
             var html = '';
@@ -463,7 +475,7 @@
             html += '</div>';
 
             if (item.Chapters && item.Chapters.length) {
-                html += '<div class="tabScenes nowPlayingTab smoothScrollX" style="display:none;white-space:nowrap;margin-bottom:2em;">';
+                html += '<div class="tabScenes nowPlayingTab smoothScrollX hide" style="white-space:nowrap;margin-bottom:2em;">';
                 var chapterIndex = 0;
                 html += item.Chapters.map(function (c) {
 
@@ -510,7 +522,7 @@
             }
 
             if (item.People && item.People.length) {
-                html += '<div class="tabCast nowPlayingTab smoothScrollX" style="display:none;white-space:nowrap;">';
+                html += '<div class="tabCast nowPlayingTab smoothScrollX hide" style="white-space:nowrap;">';
                 html += item.People.map(function (cast) {
 
                     var personHtml = '<div class="tileItem smallPosterTileItem" style="width:300px;">';
@@ -764,13 +776,14 @@
             initComplete = true;
             ensureVideoPlayerElements();
 
-            var parent = $("#videoPlayer");
+            var parent = document.querySelector("#videoPlayer");
 
-            muteButton = $('.muteButton', parent);
-            unmuteButton = $('.unmuteButton', parent);
-            currentTimeElement = $('.currentTime', parent);
+            muteButton = parent.querySelector('.muteButton');
+            unmuteButton = parent.querySelector('.unmuteButton');
+            currentTimeElement = parent.querySelector('.currentTime');
 
-            positionSlider = $(".videoPositionSlider", parent).on('change', onPositionSliderChange)[0];
+            positionSlider = parent.querySelector(".videoPositionSlider", parent);
+            positionSlider.addEventListener('change', onPositionSliderChange);
 
             positionSlider._setPinValue = function (value) {
 
@@ -787,13 +800,14 @@
                 this.pinValue = datetime.getDisplayRunningTime(ticks);
             };
 
-            volumeSlider = $('.videoVolumeSlider', parent).on('change', function () {
+            volumeSlider = parent.querySelector('.videoVolumeSlider');
+            volumeSlider.addEventListener('change', function () {
 
                 var vol = this.value;
 
                 updateVolumeButtons(vol);
                 self.setVolume(vol);
-            })[0];
+            });
         }
 
         var idleHandlerTimeout;
@@ -804,27 +818,27 @@
             }
 
             if (idleState == true) {
-                $('.hiddenOnIdle').removeClass("inactive");
-                $('#videoPlayer').removeClass('idlePlayer');
+                setClass(document.querySelectorAll('.hiddenOnIdle'), 'remove', 'inactive');
+                document.querySelector('#videoPlayer').classList.remove('idlePlayer');
             }
 
             idleState = false;
 
             idleHandlerTimeout = window.setTimeout(function () {
                 idleState = true;
-                $('.hiddenOnIdle').addClass("inactive");
-                $('#videoPlayer').addClass('idlePlayer');
+                setClass(document.querySelectorAll('.hiddenOnIdle'), 'add', 'inactive');
+                document.querySelector('#videoPlayer').classList.add('idlePlayer');
             }, 3500);
         }
 
         function updateVolumeButtons(vol) {
 
             if (vol) {
-                muteButton.show();
-                unmuteButton.hide();
+                muteButton.classList.remove('hide');
+                unmuteButton.classList.add('hide');
             } else {
-                muteButton.hide();
-                unmuteButton.show();
+                muteButton.classList.add('hide');
+                unmuteButton.classList.remove('hide');
             }
         }
 
@@ -843,16 +857,12 @@
 
         function enterFullScreen() {
 
-            var player = $("#videoPlayer");
-
-            player.addClass("fullscreenVideo");
+            document.querySelector("#videoPlayer").classList.add("fullscreenVideo");
         }
 
         function exitFullScreenToWindow() {
 
-            var player = $("#videoPlayer");
-
-            player.removeClass("fullscreenVideo");
+            document.querySelector("#videoPlayer").classList.remove("fullscreenVideo");
         }
 
         function onPopState() {
@@ -956,7 +966,7 @@
         self.cleanup = function (mediaRenderer) {
 
             if (currentTimeElement) {
-                currentTimeElement.html('--:--');
+                currentTimeElement.innerHTML = '--:--';
             }
 
             unbindEventsForPlayback(mediaRenderer);
@@ -1064,27 +1074,27 @@
             // Create video player
             var mediaPlayerContainer = document.querySelector('#videoPlayer');
             fadeIn(mediaPlayerContainer);
-            var videoControls = $('.videoControls', mediaPlayerContainer);
+            var videoControls = mediaPlayerContainer.querySelector('.videoControls');
 
             //show stop button
-            $('#video-playButton', videoControls).hide();
-            $('#video-pauseButton', videoControls).show();
-            $('.videoTrackControl').addClass('hide');
+            document.querySelector('#video-playButton').classList.add('hide');
+            document.querySelector('#video-pauseButton').classList.remove('hide');
 
-            $('.videoQualityButton', videoControls).show();
+            document.querySelector('.videoTrackControl').classList.add('hide');
+            document.querySelector('.videoQualityButton').classList.remove('hide');
 
             if (mediaStreams.filter(function (s) {
                 return s.Type == "Audio";
             }).length) {
-                $('.videoAudioButton').show();
+                document.querySelector('.videoAudioButton').classList.remove('hide');
             } else {
-                $('.videoAudioButton').hide();
+                document.querySelector('.videoAudioButton').classList.add('hide');
             }
 
             if (subtitleStreams.length) {
-                $('.videoSubtitleButton').show();
+                document.querySelector('.videoSubtitleButton').classList.remove('hide');
             } else {
-                $('.videoSubtitleButton').hide();
+                document.querySelector('.videoSubtitleButton').classList.add('hide');
             }
 
             var mediaRenderer = new VideoRenderer({
@@ -1095,25 +1105,25 @@
             var requiresNativeControls = !mediaRenderer.enableCustomVideoControls();
 
             if (requiresNativeControls || AppInfo.isNativeApp) {
-                $('#video-fullscreenButton', videoControls).hide();
+                videoControls.querySelector('#video-fullscreenButton').classList.add('hide');
             } else {
-                $('#video-fullscreenButton', videoControls).show();
+                videoControls.querySelector('#video-fullscreenButton').classList.remove('hide');
             }
 
             if (AppInfo.hasPhysicalVolumeButtons) {
-                $(volumeSlider).addClass('hide');
-                $('.muteButton', videoControls).addClass('hide');
-                $('.unmuteButton', videoControls).addClass('hide');
+                volumeSlider.classList.add('hide');
+                videoControls.querySelector('.muteButton').classList.add('hide');
+                videoControls.querySelector('.unmuteButton').classList.add('hide');
             } else {
-                $(volumeSlider).removeClass('hide');
-                $('.muteButton', videoControls).removeClass('hide');
-                $('.unmuteButton', videoControls).removeClass('hide');
+                volumeSlider.classList.remove('hide');
+                videoControls.querySelector('.muteButton').classList.remove('hide');
+                videoControls.querySelector('.unmuteButton').classList.remove('hide');
             }
 
             if (requiresNativeControls) {
-                videoControls.addClass('hide');
+                videoControls.classList.add('hide');
             } else {
-                videoControls.removeClass('hide');
+                videoControls.classList.remove('hide');
             }
 
             initialVolume = self.getSavedVolume();
@@ -1127,7 +1137,7 @@
 
             self.currentSubtitleStreamIndex = mediaSource.DefaultSubtitleStreamIndex;
 
-            $(document.body).addClass('bodyWithPopupOpen');
+            document.body.classList.add('bodyWithPopupOpen');
 
             self.currentMediaRenderer = mediaRenderer;
             self.currentDurationTicks = self.currentMediaSource.RunTimeTicks;
@@ -1163,11 +1173,16 @@
             var videoControls = document.querySelector('#videoPlayer .videoControls');
             var videoElement = document.querySelector('#videoPlayer #videoElement');
 
-            $('#video-playButton', videoControls).hide();
-            $('#video-pauseButton', videoControls).show();
-            $("#play", videoElement).show().addClass("fadeOut");
+            videoControls.querySelector('#video-playButton').classList.add('hide');
+            videoControls.querySelector('#video-pauseButton').classList.remove('hide');
+
+            var buttonToAnimate = videoElement.querySelector('#play');
+            buttonToAnimate.classList.remove('hide');
+            buttonToAnimate.classList.add('fadeOut');
+
             setTimeout(function () {
-                $("#play", videoElement).hide().removeClass("fadeOut");
+                buttonToAnimate.classList.add('hide');
+                buttonToAnimate.classList.remove('fadeOut');
             }, 300);
         }
 
@@ -1181,11 +1196,16 @@
             var videoControls = document.querySelector('#videoPlayer .videoControls');
             var videoElement = document.querySelector('#videoPlayer #videoElement');
 
-            $('#video-playButton', videoControls).show();
-            $('#video-pauseButton', videoControls).hide();
-            $("#pause", videoElement).show().addClass("fadeOut");
+            videoControls.querySelector('#video-playButton').classList.remove('hide');
+            videoControls.querySelector('#video-pauseButton').classList.add('hide');
+
+            var buttonToAnimate = videoElement.querySelector('#pause');
+            buttonToAnimate.classList.remove('hide');
+            buttonToAnimate.classList.add('fadeOut');
+
             setTimeout(function () {
-                $("#pause", videoElement).hide().removeClass("fadeOut");
+                buttonToAnimate.classList.add('hide');
+                buttonToAnimate.classList.remove('fadeOut');
             }, 300);
         }
 
@@ -1251,7 +1271,7 @@
             }
 
             if (length < 2) {
-                $('.videoTrackControl').addClass('hide');
+                document.querySelector('.videoTrackControl').classList.add('hide');
                 return;
             }
 
@@ -1273,8 +1293,8 @@
                 nextTrackButton.removeAttribute('disabled');
             }
 
-            $(previousTrackButton).removeClass('hide');
-            $(nextTrackButton).removeClass('hide');
+            previousTrackButton.classList.remove('hide');
+            nextTrackButton.classList.remove('hide');
         };
     }
 
diff --git a/dashboard-ui/scripts/mediaplayer.js b/dashboard-ui/scripts/mediaplayer.js
index 6a5eee461..8740dcc32 100644
--- a/dashboard-ui/scripts/mediaplayer.js
+++ b/dashboard-ui/scripts/mediaplayer.js
@@ -293,7 +293,7 @@ define(['appSettings', 'userSettings', 'appStorage', 'datetime'], function (appS
             }
 
             if (currentTimeElement) {
-                currentTimeElement.html(timeText);
+                currentTimeElement.innerHTML = timeText;
             }
 
             var state = self.getPlayerStateInternal(mediaRenderer, self.currentItem, self.currentMediaSource);
diff --git a/dashboard-ui/scripts/registrationservices.js b/dashboard-ui/scripts/registrationservices.js
index 07f9e4fc4..16a81bdcd 100644
--- a/dashboard-ui/scripts/registrationservices.js
+++ b/dashboard-ui/scripts/registrationservices.js
@@ -1,4 +1,4 @@
-define(['appStorage', 'jQuery'], function (appStorage, $) {
+define(['appStorage'], function (appStorage) {
 
     var supporterPlaybackKey = 'lastSupporterPlaybackMessage4';
 
@@ -188,90 +188,92 @@
 
         renderPluginInfo: function (page, pkg, pluginSecurityInfo) {
 
-            if (pkg.isPremium) {
-                $('.premiumPackage', page).show();
+            require(['jQuery'], function ($) {
+                if (pkg.isPremium) {
+                    $('.premiumPackage', page).show();
 
-                // Fill in registration info
-                var regStatus = "";
-                if (pkg.isRegistered) {
+                    // Fill in registration info
+                    var regStatus = "";
+                    if (pkg.isRegistered) {
 
-                    regStatus += "<p style='color:green;'>";
+                        regStatus += "<p style='color:green;'>";
 
-                    regStatus += Globalize.translate('MessageFeatureIncludedWithSupporter');
-
-                } else {
-
-                    var expDateTime = new Date(pkg.expDate).getTime();
-                    var nowTime = new Date().getTime();
-
-                    if (expDateTime <= nowTime) {
-                        regStatus += "<p style='color:red;'>";
-                        regStatus += Globalize.translate('MessageTrialExpired');
-                    }
-                    else if (expDateTime > new Date(1970, 1, 1).getTime()) {
-
-                        regStatus += "<p style='color:blue;'>";
-                        regStatus += Globalize.translate('MessageTrialWillExpireIn').replace('{0}', Math.round(expDateTime - nowTime) / (86400000));
-                    }
-                }
-
-                regStatus += "</p>";
-                $('#regStatus', page).html(regStatus);
-
-                if (pluginSecurityInfo.IsMBSupporter) {
-                    $('#regInfo', page).html(pkg.regInfo || "");
-
-                    $('.premiumDescription', page).hide();
-                    $('.supporterDescription', page).hide();
-
-                    if (pkg.price > 0) {
-
-                        $('.premiumHasPrice', page).show();
-                        $('#featureId', page).val(pkg.featureId);
-                        $('#featureName', page).val(pkg.name);
-                        $('#amount', page).val(pkg.price);
-
-                        $('#regPrice', page).html("<h3>" + Globalize.translate('ValuePriceUSD').replace('{0}', "$" + pkg.price.toFixed(2)) + "</h3>");
-                        $('#ppButton', page).hide();
-
-                        var url = "https://mb3admin.com/admin/service/user/getPayPalEmail?id=" + pkg.owner;
-
-                        fetch(url).then(function (response) {
-
-                            return response.json();
-
-                        }).then(function (dev) {
-
-                            if (dev.payPalEmail) {
-                                $('#payPalEmail', page).val(dev.payPalEmail);
-                                $('#ppButton', page).show();
-
-                            }
-                        });
+                        regStatus += Globalize.translate('MessageFeatureIncludedWithSupporter');
 
                     } else {
-                        // Supporter-only feature
-                        $('.premiumHasPrice', page).hide();
+
+                        var expDateTime = new Date(pkg.expDate).getTime();
+                        var nowTime = new Date().getTime();
+
+                        if (expDateTime <= nowTime) {
+                            regStatus += "<p style='color:red;'>";
+                            regStatus += Globalize.translate('MessageTrialExpired');
+                        }
+                        else if (expDateTime > new Date(1970, 1, 1).getTime()) {
+
+                            regStatus += "<p style='color:blue;'>";
+                            regStatus += Globalize.translate('MessageTrialWillExpireIn').replace('{0}', Math.round(expDateTime - nowTime) / (86400000));
+                        }
                     }
-                } else {
 
-                    if (pkg.price) {
-                        $('.premiumDescription', page).show();
-                        $('.supporterDescription', page).hide();
-                        $('#regInfo', page).html("");
+                    regStatus += "</p>";
+                    $('#regStatus', page).html(regStatus);
+
+                    if (pluginSecurityInfo.IsMBSupporter) {
+                        $('#regInfo', page).html(pkg.regInfo || "");
 
-                    } else {
                         $('.premiumDescription', page).hide();
-                        $('.supporterDescription', page).show();
-                        $('#regInfo', page).html("");
+                        $('.supporterDescription', page).hide();
+
+                        if (pkg.price > 0) {
+
+                            $('.premiumHasPrice', page).show();
+                            $('#featureId', page).val(pkg.featureId);
+                            $('#featureName', page).val(pkg.name);
+                            $('#amount', page).val(pkg.price);
+
+                            $('#regPrice', page).html("<h3>" + Globalize.translate('ValuePriceUSD').replace('{0}', "$" + pkg.price.toFixed(2)) + "</h3>");
+                            $('#ppButton', page).hide();
+
+                            var url = "https://mb3admin.com/admin/service/user/getPayPalEmail?id=" + pkg.owner;
+
+                            fetch(url).then(function (response) {
+
+                                return response.json();
+
+                            }).then(function (dev) {
+
+                                if (dev.payPalEmail) {
+                                    $('#payPalEmail', page).val(dev.payPalEmail);
+                                    $('#ppButton', page).show();
+
+                                }
+                            });
+
+                        } else {
+                            // Supporter-only feature
+                            $('.premiumHasPrice', page).hide();
+                        }
+                    } else {
+
+                        if (pkg.price) {
+                            $('.premiumDescription', page).show();
+                            $('.supporterDescription', page).hide();
+                            $('#regInfo', page).html("");
+
+                        } else {
+                            $('.premiumDescription', page).hide();
+                            $('.supporterDescription', page).show();
+                            $('#regInfo', page).html("");
+                        }
+
+                        $('#ppButton', page).hide();
                     }
 
-                    $('#ppButton', page).hide();
+                } else {
+                    $('.premiumPackage', page).hide();
                 }
-
-            } else {
-                $('.premiumPackage', page).hide();
-            }
+            });
         },
 
         validateFeature: function (name) {
diff --git a/dashboard-ui/streamingsettings.html b/dashboard-ui/streamingsettings.html
index 70e3265ee..29e7d5b01 100644
--- a/dashboard-ui/streamingsettings.html
+++ b/dashboard-ui/streamingsettings.html
@@ -1,27 +1,23 @@
-<div id="streamingSettingsPage" data-role="page" class="page type-interior playbackConfigurationPage withTabs" data-helpurl="https://github.com/MediaBrowser/Wiki/wiki/Streaming" data-require="scripts/streamingsettings,paper-input,emby-button">
+<div id="streamingSettingsPage" data-role="page" class="page type-interior playbackConfigurationPage withTabs" data-helpurl="https://github.com/MediaBrowser/Wiki/wiki/Streaming" data-require="scripts/streamingsettings,emby-input,emby-button,emby-select">
 
     <div data-role="content">
         <div class="content-primary">
 
             <form class="streamingSettingsForm">
 
-                <ul data-role="listview" class="ulForm">
-                    <li>
-                        <paper-input type="number" id="txtRemoteClientBitrateLimit" pattern="[0-9]*" min="0" step=".25" label="${LabelRemoteClientBitrateLimit}"></paper-input>
-                        <div class="fieldDescription">${LabelRemoteClientBitrateLimitHelp}</div>
-                    </li>
-                    <li>
-                        <br />
-                        <label for="selectChannelResolution" class="selectLabel">${LabelChannelStreamQuality}</label>
-                        <select id="selectChannelResolution" data-mini="true">
-                            <option value="">${OptionBestAvailableStreamQuality}</option>
-                            <option value="1920">1080p</option>
-                            <option value="1280">720p</option>
-                            <option value="720">480p</option>
-                        </select>
-                        <div class="fieldDescription">${LabelChannelStreamQualityHelp}</div>
-                    </li>
-                </ul>
+                <div class="inputContainer">
+                    <input is="emby-input" type="number" id="txtRemoteClientBitrateLimit" pattern="[0-9]*" min="0" step=".25" label="${LabelRemoteClientBitrateLimit}"/>
+                    <div class="fieldDescription">${LabelRemoteClientBitrateLimitHelp}</div>
+                </div>
+                <div class="selectContainer">
+                    <select is="emby-select" id="selectChannelResolution" label="${LabelChannelStreamQuality}">
+                        <option value="">${OptionBestAvailableStreamQuality}</option>
+                        <option value="1920">1080p</option>
+                        <option value="1280">720p</option>
+                        <option value="720">480p</option>
+                    </select>
+                    <div class="fieldDescription">${LabelChannelStreamQualityHelp}</div>
+                </div>
                 <button is="emby-button" type="submit" class="raised submit block"><iron-icon icon="check"></iron-icon><span>${ButtonSave}</span></button>
             </form>
         </div>
diff --git a/dashboard-ui/thirdparty/paper-button-style.css b/dashboard-ui/thirdparty/paper-button-style.css
index 535d510c0..84b791d70 100644
--- a/dashboard-ui/thirdparty/paper-button-style.css
+++ b/dashboard-ui/thirdparty/paper-button-style.css
@@ -362,7 +362,7 @@ paper-input label, paper-textarea label {
 }
 
 .ui-body-a .inputLabel {
-    color: #656565;
+    color: #555;
 }
 
     .ui-body-a .inputLabel.focused:not(.blank) {
@@ -374,7 +374,7 @@ paper-input label, paper-textarea label {
 }
 
 .ui-body-a .paper-input-container-0 .input-content.paper-input-container label, .ui-body-a .paper-input-container-0 .input-content.paper-input-container .paper-input-label, .ui-body-a paper-textarea label, .ui-body-a .selectLabel, .ui-body-a .paperListLabel, .ui-body-a .fieldDescription {
-    color: #656565;
+    color: #555;
 }
 
 .ui-body-a .paper-input-container-0 .input-content.label-is-highlighted.paper-input-container label, .ui-body-a .paper-input-container-0 .input-content.label-is-highlighted.paper-input-container .paper-input-label {
diff --git a/dashboard-ui/useredit.html b/dashboard-ui/useredit.html
index 4e76359c2..f4a740b7e 100644
--- a/dashboard-ui/useredit.html
+++ b/dashboard-ui/useredit.html
@@ -1,4 +1,4 @@
-<div id="editUserPage" data-role="page" class="page type-interior userProfilesPage" data-helpurl="https://github.com/MediaBrowser/Wiki/wiki/Users" data-require="scripts/useredit,paper-input,paper-checkbox,emby-button">
+<div id="editUserPage" data-role="page" class="page type-interior userProfilesPage" data-helpurl="https://github.com/MediaBrowser/Wiki/wiki/Users" data-require="scripts/useredit,emby-input,paper-checkbox,emby-button">
 
     <div data-role="content">
         <div class="content-primary">
@@ -14,31 +14,32 @@
             </p>
             <form class="editUserProfileForm">
 
-                <div class="disabledUserBanner" style="display:none;">
+                <div class="disabledUserBanner" style="display: none;">
                     <div class="btn btnDarkAccent btnStatic">
                         <div>
                             ${HeaderThisUserIsCurrentlyDisabled}
                         </div>
-                        <div style="margin-top:5px;">
+                        <div style="margin-top: 5px;">
                             ${MessageReenableUser}
                         </div>
                     </div>
 
                 </div>
+                <div id="fldUserName" class="inputContainer">
+                    <input is="emby-input" id="txtUserName" required type="text" label="${LabelName}" />
+                </div>
                 <ul data-role="listview" class="ulForm">
-                    <li id="fldUserName">
-                        <paper-input id="txtUserName" required type="text" label="${LabelName}"></paper-input>
-                    </li>
                     <li id="fldConnectInfo" style="display: none;">
                         <div class="paperList" style="padding: 1em; border-radius: 5px;">
-                            <paper-input id="txtConnectUserName" type="text" label="${LabelConnectUserName}"></paper-input>
-                            <div class="fieldDescription">
-                                <div>${LabelConnectUserNameHelp}</div>
-                                <div style="margin-top: .75em;">
-                                    <a href="http://emby.media/connect" target="_blank">${ButtonLearnMoreAboutEmbyConnect}</a>
+                            <div class="inputContainer">
+                                <input is="emby-input" id="txtConnectUserName" type="text" label="${LabelConnectUserName}" />
+                                <div class="fieldDescription">
+                                    <div>${LabelConnectUserNameHelp}</div>
+                                    <div style="margin-top: .75em;">
+                                        <a href="http://emby.media/connect" target="_blank">${ButtonLearnMoreAboutEmbyConnect}</a>
+                                    </div>
                                 </div>
                             </div>
-                            <br />
                         </div>
                     </li>
                     <li>