update buttons

dashboard-ui/bower_components/emby-webcomponents/.bower.json

@@ -15,12 +15,12 @@
   },
   "devDependencies": {},
   "ignore": [],
-  "version": "1.4.18",
+  "version": "1.4.24",
-  "_release": "1.4.18",
+  "_release": "1.4.24",
   "_resolution": {
     "type": "version",
-    "tag": "1.4.18",
+    "tag": "1.4.24",
-    "commit": "39d5a6a55acf536c14945385fbce917516fe23ea"
+    "commit": "05159909e71faf74eb1d39f3cac661614b0a5d5b"
   },
   "_source": "https://github.com/MediaBrowser/emby-webcomponents.git",
   "_target": "^1.2.0",

dashboard-ui/bower_components/emby-webcomponents/actionsheet/actionsheet.css

@@ -27,7 +27,7 @@
     text-align: center;
 }
 
-.actionSheetMenuItem {
+button.actionSheetMenuItem {
     padding: 0 1.6em;
     margin: 0;
     text-transform: none;
@@ -35,13 +35,14 @@
     display: flex;
     font-weight: inherit;
     align-items: center;
+    flex-shrink: 0;
 }
 
 .actionSheetItemText {
     padding: .8em 0;
 }
 
-.layout-tv .actionSheetMenuItem {
+.layout-tv button.actionSheetMenuItem {
     padding-top: .16em;
     padding-bottom: .16em;
 }
@@ -53,6 +54,8 @@
 .actionSheetScroller {
     /* Override default style being applied by polymer */
     margin-bottom: 0 !important;
+    display: flex;
+    flex-direction: column;
 }
 
 .layout-tv .actionSheetScroller {

dashboard-ui/bower_components/emby-webcomponents/actionsheet/actionsheet.js

@@ -1,4 +1,4 @@
-define(['dialogHelper', 'layoutManager', 'globalize', 'paper-button', 'css!./actionsheet', 'html!./../icons/nav.html', 'scrollStyles'], function (dialogHelper, layoutManager, globalize) {
+define(['dialogHelper', 'layoutManager', 'globalize', 'emby-button', 'css!./actionsheet', 'html!./../icons/nav.html', 'scrollStyles'], function (dialogHelper, layoutManager, globalize) {
 
     function parentWithClass(elem, className) {
 
@@ -151,14 +151,14 @@
             dlg.classList.add('centered');
         }
 
-        var itemTagName = 'paper-button';
+        var itemTagName = 'button';
 
         for (i = 0, length = options.items.length; i < length; i++) {
 
             option = options.items[i];
 
             var autoFocus = option.selected ? ' autoFocus' : '';
-            html += '<' + itemTagName + autoFocus + ' class="actionSheetMenuItem" data-id="' + (option.id || option.value) + '">';
+            html += '<' + itemTagName + autoFocus + ' is="emby-button" type="button" class="actionSheetMenuItem" data-id="' + (option.id || option.value) + '">';
 
             if (option.ironIcon) {
                 html += '<iron-icon class="actionSheetItemIcon" icon="' + option.ironIcon + '"></iron-icon>';
@@ -172,7 +172,7 @@
 
         if (options.showCancel) {
             html += '<div class="buttons">';
-            html += '<paper-button class="btnCancel">' + globalize.translate('sharedcomponents#ButtonCancel') + '</paper-button>';
+            html += '<button is="emby-button" type="button" class="btnCancel">' + globalize.translate('sharedcomponents#ButtonCancel') + '</button>';
             html += '</div>';
         }
         html += '</div>';

dashboard-ui/bower_components/emby-webcomponents/alert/alert.js

@@ -1,4 +1,4 @@
-define(['dialogHelper', 'layoutManager', 'globalize', 'html!./../icons/nav.html', 'css!./../prompt/style.css', 'paper-button', 'paper-icon-button-light'], function (dialogHelper, layoutManager, globalize) {
+define(['dialogHelper', 'layoutManager', 'globalize', 'html!./../icons/nav.html', 'css!./../prompt/style.css', 'emby-button', 'paper-icon-button-light'], function (dialogHelper, layoutManager, globalize) {
 
     function getIcon(icon, cssClass, canFocus, autoFocus) {
 
@@ -72,10 +72,10 @@ define(['dialogHelper', 'layoutManager', 'globalize', 'html!./../icons/nav.html'
 
         var buttonText = options.type == 'error' ? 'sharedcomponents#ButtonOk' : 'sharedcomponents#ButtonGotIt';
         if (raisedButtons) {
-            html += '<paper-button raised class="btnSubmit"><iron-icon icon="nav:check"></iron-icon><span>' + globalize.translate(buttonText) + '</span></paper-button>';
+            html += '<button is="emby-button" type="button" class="raised btnSubmit"><iron-icon icon="nav:check"></iron-icon><span>' + globalize.translate(buttonText) + '</span></button>';
         } else {
             html += '<div class="buttons" style="text-align:right;">';
-            html += '<paper-button class="btnSubmit">' + globalize.translate(buttonText) + '</paper-button>';
+            html += '<button is="emby-button" type="button" class="btnSubmit">' + globalize.translate(buttonText) + '</button>';
             html += '</div>';
         }
 

dashboard-ui/bower_components/emby-webcomponents/browser.js

@@ -101,5 +101,7 @@
     browser.tv = isTv();
     browser.operaTv = browser.tv && userAgent.toLowerCase().indexOf('opr/') != -1;
 
+    browser.noFlex = browser.tv && !browser.chrome && !browser.operaTv;
+
     return browser;
 });

dashboard-ui/bower_components/emby-webcomponents/collectioneditor/collectioneditor.js

@@ -1,4 +1,4 @@
-define(['shell', 'dialogHelper', 'loading', 'layoutManager', 'connectionManager', 'scrollHelper', 'embyRouter', 'globalize', 'paper-checkbox', 'emby-input', 'paper-icon-button-light', 'emby-select', 'html!./../icons/nav.html', 'css!./../formdialog'], function (shell, dialogHelper, loading, layoutManager, connectionManager, scrollHelper, embyRouter, globalize) {
+define(['shell', 'dialogHelper', 'loading', 'layoutManager', 'connectionManager', 'scrollHelper', 'embyRouter', 'globalize', 'paper-checkbox', 'emby-input', 'paper-icon-button-light', 'emby-select', 'html!./../icons/nav.html', 'css!./../formdialog', 'emby-button'], function (shell, dialogHelper, loading, layoutManager, connectionManager, scrollHelper, embyRouter, globalize) {
 
     var currentServerId;
 
@@ -170,7 +170,7 @@
         html += '<br />';
         html += '<br />';
         html += '<div>';
-        html += '<paper-button raised class="btnSubmit block">' + globalize.translate('sharedcomponents#ButtonOk') + '</paper-button>';
+        html += '<button is="emby-button" type="submit" class="raised btnSubmit block">' + globalize.translate('sharedcomponents#ButtonOk') + '</button>';
         html += '</div>';
 
         html += '<input type="hidden" class="fldSelectedItemIds" />';
@@ -201,21 +201,6 @@
             }
         });
 
-        content.querySelector('.btnSubmit').addEventListener('click', function () {
-            // Do a fake form submit this the button isn't a real submit button
-            var fakeSubmit = document.createElement('input');
-            fakeSubmit.setAttribute('type', 'submit');
-            fakeSubmit.style.display = 'none';
-            var form = content.querySelector('form');
-            form.appendChild(fakeSubmit);
-            fakeSubmit.click();
-
-            // Seeing issues in smart tv browsers where the form does not get submitted if the button is removed prior to the submission actually happening
-            setTimeout(function () {
-                form.removeChild(fakeSubmit);
-            }, 500);
-        });
-
         content.querySelector('form').addEventListener('submit', onSubmit);
 
         content.querySelector('.fldSelectedItemIds', content).value = items.join(',');

dashboard-ui/bower_components/emby-webcomponents/confirm/confirm.js

@@ -74,9 +74,9 @@ define(['layoutManager', 'globalize'], function (layoutManager, globalize) {
 
         html += '<div class="buttons">';
 
-        html += '<paper-button class="btnConfirm" autofocus>' + globalize.translate('sharedcomponents#ButtonOk') + '</paper-button>';
+        html += '<button is="emby-button" type="button" class="btnConfirm" autofocus>' + globalize.translate('sharedcomponents#ButtonOk') + '</button>';
 
-        html += '<paper-button class="btnCancel">' + globalize.translate('sharedcomponents#ButtonCancel') + '</paper-button>';
+        html += '<button is="emby-button" type="button" class="btnCancel">' + globalize.translate('sharedcomponents#ButtonCancel') + '</button>';
 
         html += '</div>';
 
@@ -106,7 +106,7 @@ define(['layoutManager', 'globalize'], function (layoutManager, globalize) {
     function showConfirm(options) {
         return new Promise(function (resolve, reject) {
 
-            require(['dialogHelper', 'paper-button'], function (dialogHelper) {
+            require(['dialogHelper', 'emby-button'], function (dialogHelper) {
                 showConfirmInternal(options, dialogHelper, resolve, reject);
             });
         });

dashboard-ui/bower_components/emby-webcomponents/emby-button/emby-button.css

@@ -0,0 +1,73 @@
+[is="emby-button"] {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    box-sizing: border-box;
+    margin: 0 .29em;
+    background: transparent;
+    text-align: center;
+    font: inherit;
+    color: inherit;
+    outline-width: 0;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    -webkit-user-select: none;
+    user-select: none;
+    cursor: pointer;
+    z-index: 0;
+    padding: 0.7em 0.57em;
+    font-weight: normal;
+    vertical-align: middle;
+    border: 0;
+    vertical-align: middle;
+    border-radius: 3px;
+    /* These are getting an outline in opera tv browsers, which run chrome 30 */
+    outline: none !important;
+    position: relative;
+    overflow: hidden;
+}
+
+    [is="emby-button"].raised {
+        box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2);
+    }
+
+    [is="emby-button"].block {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        margin: .25em .29em;
+        width: 100%;
+    }
+
+    [is="emby-button"].raised:focus {
+        box-shadow: 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12), 0 5px 5px -3px rgba(0, 0, 0, 0.4);
+        transition: box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1);
+    }
+
+    [is="emby-button"] iron-icon + span {
+        margin-left: .5em;
+    }
+
+.ripple-effect {
+    position: absolute;
+    border-radius: 50%;
+    width: 50px;
+    height: 50px;
+    top: 50%;
+    left: 50%;
+    background: white;
+    animation: ripple-animation 2s;
+    opacity: 0.4;
+}
+
+@keyframes ripple-animation {
+    from {
+        transform: none;
+        opacity: 0.4;
+    }
+
+    to {
+        transform: scale(100);
+        opacity: 0;
+    }
+}

dashboard-ui/bower_components/emby-webcomponents/emby-button/emby-button.js

@@ -0,0 +1,50 @@
+define(['css!./emby-button'], function (layoutManager, browser) {
+
+    var EmbyButtonPrototype = Object.create(HTMLButtonElement.prototype);
+
+    function animateButton(e) {
+
+        var div = document.createElement('div');
+
+        div.classList.add('ripple-effect');
+
+        var offsetX = e.offsetX || 0;
+        var offsetY = e.offsetY || 0;
+
+        if (offsetX > 0 && offsetY > 0) {
+            div.style.left = offsetX + 'px';
+            div.style.top = offsetY + 'px';
+        }
+
+        this.appendChild(div);
+
+        setTimeout(function () {
+            div.parentNode.removeChild(div);
+        }, 2000);
+    }
+
+    function onKeyDown(e) {
+
+        if (e.keyCode == 13) {
+            animateButton.call(this, e);
+        }
+    }
+
+    EmbyButtonPrototype.attachedCallback = function () {
+
+        if (this.getAttribute('data-embybutton') == 'true') {
+            return;
+        }
+
+        this.setAttribute('data-embybutton', 'true');
+
+        this.addEventListener('keydown', onKeyDown);
+        this.addEventListener('mousedown', animateButton);
+        //this.addEventListener('click', animateButton);
+    };
+
+    document.registerElement('emby-button', {
+        prototype: EmbyButtonPrototype,
+        extends: 'button'
+    });
+});

dashboard-ui/bower_components/emby-webcomponents/emby-input/emby-input.js

@@ -4,6 +4,22 @@
 
     var inputId = 0;
 
+    if (Object.getOwnPropertyDescriptor && Object.defineProperty) {
+
+        var descriptor = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value');
+
+        var baseSetMethod = descriptor.set;
+        descriptor.set = function (value) {
+            baseSetMethod.call(this, value);
+            this.dispatchEvent(new CustomEvent('valueset', {
+                bubbles: false,
+                cancelable: false
+            }));
+        }
+
+        Object.defineProperty(HTMLInputElement.prototype, 'value', descriptor);
+    }
+
     EmbyInputPrototype.createdCallback = function () {
 
         if (!this.id) {
@@ -45,11 +61,13 @@
             label.classList.add('focused');
         });
         this.addEventListener('blur', function () {
+            onChange.call(this);
             label.classList.remove('focused');
         });
 
         this.addEventListener('change', onChange);
         this.addEventListener('input', onChange);
+        this.addEventListener('valueset', onChange);
 
         onChange.call(this);
     };

dashboard-ui/bower_components/emby-webcomponents/focusmanager.js

@@ -21,7 +21,7 @@ define([], function () {
     function focus(element) {
 
         var tagName = element.tagName;
-        if (tagName == 'PAPER-INPUT' || tagName == 'EMBY-DROPDOWN-MENU') {
+        if (tagName == 'PAPER-INPUT') {
             element = element.querySelector('input') || element;
         }
 
@@ -32,7 +32,7 @@ define([], function () {
         }
     }
 
-    var focusableTagNames = ['INPUT', 'TEXTAREA', 'SELECT', 'BUTTON', 'A', 'PAPER-BUTTON', 'PAPER-INPUT', 'PAPER-CHECKBOX', 'EMBY-DROPDOWN-MENU'];
+    var focusableTagNames = ['INPUT', 'TEXTAREA', 'SELECT', 'BUTTON', 'A', 'PAPER-BUTTON', 'PAPER-INPUT', 'PAPER-CHECKBOX'];
     var focusableContainerTagNames = ['BODY', 'DIALOG'];
     var focusableQuery = focusableTagNames.join(',') + ',.focusable';
 

dashboard-ui/bower_components/emby-webcomponents/guide/guide.js

@@ -1,4 +1,4 @@
-define(['require', 'browser', 'globalize', 'connectionManager', 'loading', 'scrollHelper', 'datetime', 'focusManager', 'imageLoader', 'events', 'layoutManager', 'itemShortcuts', 'registrationservices', 'clearButtonStyle', 'css!./guide.css', 'html!./../icons/mediainfo.html', 'html!./../icons/nav.html', 'scrollStyles'], function (require, browser, globalize, connectionManager, loading, scrollHelper, datetime, focusManager, imageLoader, events, layoutManager, itemShortcuts, registrationServices) {
+define(['require', 'browser', 'globalize', 'connectionManager', 'loading', 'scrollHelper', 'datetime', 'focusManager', 'imageLoader', 'events', 'layoutManager', 'itemShortcuts', 'registrationservices', 'clearButtonStyle', 'css!./guide.css', 'html!./../icons/mediainfo.html', 'html!./../icons/nav.html', 'scrollStyles', 'emby-button'], function (require, browser, globalize, connectionManager, loading, scrollHelper, datetime, focusManager, imageLoader, events, layoutManager, itemShortcuts, registrationServices) {
 
     function Guide(options) {
 

dashboard-ui/bower_components/emby-webcomponents/guide/tvguide.template.html

@@ -18,5 +18,5 @@
 
 <div class="guideRequiresUnlock readOnlyContent hide" style="margin:1em auto;text-align:center;padding:1em;flex-shrink:0;">
     <p class="unlockText"></p>
-    <paper-button raised class="secondary block btnUnlockGuide"><iron-icon icon="nav:check"></iron-icon><span>${ButtonUnlockGuide}</span></paper-button>
+    <button is="emby-button" type="button" class="raised secondary block btnUnlockGuide"><iron-icon icon="nav:check"></iron-icon><span>${UnlockGuide}</span></button>
 </div>

dashboard-ui/bower_components/emby-webcomponents/playlisteditor/playlisteditor.js

@@ -1,4 +1,4 @@
-define(['shell', 'dialogHelper', 'loading', 'layoutManager', 'connectionManager', 'scrollHelper', 'embyRouter', 'globalize', 'paper-checkbox', 'emby-input', 'paper-icon-button-light', 'emby-select', 'html!./../icons/nav.html', 'css!./../formdialog'], function (shell, dialogHelper, loading, layoutManager, connectionManager, scrollHelper, embyRouter, globalize) {
+define(['shell', 'dialogHelper', 'loading', 'layoutManager', 'connectionManager', 'scrollHelper', 'embyRouter', 'globalize', 'paper-checkbox', 'emby-input', 'paper-icon-button-light', 'emby-select', 'html!./../icons/nav.html', 'css!./../formdialog', 'emby-button'], function (shell, dialogHelper, loading, layoutManager, connectionManager, scrollHelper, embyRouter, globalize) {
 
     var lastPlaylistId = '';
     var currentServerId;
@@ -158,7 +158,7 @@
 
         html += '<br />';
         html += '<div>';
-        html += '<paper-button raised class="btnSubmit block">' + globalize.translate('sharedcomponents#ButtonOk') + '</paper-button>';
+        html += '<button is="emby-button" type="submit" class="raised btnSubmit block">' + globalize.translate('sharedcomponents#ButtonOk') + '</button>';
         html += '</div>';
 
         html += '<input type="hidden" class="fldSelectedItemIds" />';
@@ -182,23 +182,6 @@
             }
         });
 
-        populatePlaylists(content);
-
-        content.querySelector('.btnSubmit').addEventListener('click', function () {
-            // Do a fake form submit this the button isn't a real submit button
-            var fakeSubmit = document.createElement('input');
-            fakeSubmit.setAttribute('type', 'submit');
-            fakeSubmit.style.display = 'none';
-            var form = content.querySelector('form');
-            form.appendChild(fakeSubmit);
-            fakeSubmit.click();
-
-            // Seeing issues in smart tv browsers where the form does not get submitted if the button is removed prior to the submission actually happening
-            setTimeout(function () {
-                form.removeChild(fakeSubmit);
-            }, 500);
-        });
-
         content.querySelector('form').addEventListener('submit', onSubmit);
 
         content.querySelector('.fldSelectedItemIds', content).value = items.join(',');

dashboard-ui/bower_components/emby-webcomponents/prompt/prompt.js

@@ -1,4 +1,4 @@
-define(['dialogHelper', 'layoutManager', 'globalize', 'html!./../icons/nav.html', 'css!./style.css', 'paper-button', 'paper-icon-button-light', 'emby-input'], function (dialogHelper, layoutManager, globalize) {
+define(['dialogHelper', 'layoutManager', 'globalize', 'html!./../icons/nav.html', 'css!./style.css', 'emby-button', 'paper-icon-button-light', 'emby-input'], function (dialogHelper, layoutManager, globalize) {
 
     function getIcon(icon, cssClass, canFocus, autoFocus) {
 
@@ -66,11 +66,11 @@ define(['dialogHelper', 'layoutManager', 'globalize', 'html!./../icons/nav.html'
 
         html += '<br/>';
         if (raisedButtons) {
-            html += '<paper-button raised class="btnSubmit"><iron-icon icon="nav:check"></iron-icon><span>' + globalize.translate('sharedcomponents#ButtonOk') + '</span></paper-button>';
+            html += '<button is="emby-button" type="submit" class="raised btnSubmit"><iron-icon icon="nav:check"></iron-icon><span>' + globalize.translate('sharedcomponents#ButtonOk') + '</span></button>';
         } else {
             html += '<div class="buttons">';
-            html += '<paper-button class="btnSubmit">' + globalize.translate('sharedcomponents#ButtonOk') + '</paper-button>';
+            html += '<button is="emby-button" type="submit" class="btnSubmit">' + globalize.translate('sharedcomponents#ButtonOk') + '</button>';
-            html += '<paper-button class="btnPromptExit">' + globalize.translate('sharedcomponents#ButtonCancel') + '</paper-button>';
+            html += '<button is="emby-button" type="button" class="btnPromptExit">' + globalize.translate('sharedcomponents#ButtonCancel') + '</button>';
             html += '</div>';
         }
         html += '</form>';
@@ -95,18 +95,6 @@ define(['dialogHelper', 'layoutManager', 'globalize', 'html!./../icons/nav.html'
             return false;
         });
 
-        dlg.querySelector('.btnSubmit').addEventListener('click', function (e) {
-
-            // Do a fake form submit this the button isn't a real submit button
-            var fakeSubmit = document.createElement('input');
-            fakeSubmit.setAttribute('type', 'submit');
-            fakeSubmit.style.display = 'none';
-            var form = dlg.querySelector('form');
-            form.appendChild(fakeSubmit);
-            fakeSubmit.click();
-            form.removeChild(fakeSubmit);
-        });
-
         dlg.querySelector('.btnPromptExit').addEventListener('click', function (e) {
 
             dialogHelper.close(dlg);

dashboard-ui/bower_components/emby-webcomponents/prompt/style.css

@@ -22,7 +22,10 @@
 }
 
 .promptDialog.fullscreen .btnSubmit {
-    display: block;
+    display: flex;
+    width: 100%;
+    align-items: center;
+    justify-content: center;
 }
 
 .promptDialog.fullscreen .btnPromptExit {

dashboard-ui/bower_components/emby-webcomponents/recordingcreator/recordingcreator.js

@@ -1,4 +1,4 @@
-define(['dialogHelper', 'globalize', 'layoutManager', 'mediaInfo', 'apphost', 'connectionManager', 'require', 'loading', 'scrollHelper', 'paper-checkbox', 'emby-collapsible', 'emby-input', 'paper-icon-button-light', 'css!./../formdialog', 'css!./recordingcreator', 'html!./../icons/mediainfo.html', 'html!./../icons/nav.html'], function (dialogHelper, globalize, layoutManager, mediaInfo, appHost, connectionManager, require, loading, scrollHelper) {
+define(['dialogHelper', 'globalize', 'layoutManager', 'mediaInfo', 'apphost', 'connectionManager', 'require', 'loading', 'scrollHelper', 'paper-checkbox', 'emby-button', 'emby-collapsible', 'emby-input', 'paper-icon-button-light', 'css!./../formdialog', 'css!./recordingcreator', 'html!./../icons/mediainfo.html', 'html!./../icons/nav.html'], function (dialogHelper, globalize, layoutManager, mediaInfo, appHost, connectionManager, require, loading, scrollHelper) {
 
     var currentProgramId;
     var currentServerId;
@@ -208,21 +208,10 @@
         });
     }
 
-    function onPremiereLinkClicked(e) {
-
-        require(['shell'], function (shell) {
-            shell.openUrl('https://emby.media/premiere');
-        });
-        e.preventDefault();
-        return false;
-    }
-
     function init(context) {
 
         var apiClient = connectionManager.getApiClient(currentServerId);
 
-        context.querySelector('.lnkPremiere').addEventListener('click', onPremiereLinkClicked);
-
         context.querySelector('#chkRecordSeries').addEventListener('change', function () {
 
             if (this.checked) {
@@ -232,22 +221,6 @@
             }
         });
 
-        context.querySelector('.btnSubmit').addEventListener('click', function () {
-
-            // Do a fake form submit this the button isn't a real submit button
-            var fakeSubmit = document.createElement('input');
-            fakeSubmit.setAttribute('type', 'submit');
-            fakeSubmit.style.display = 'none';
-            var form = context.querySelector('form');
-            form.appendChild(fakeSubmit);
-            fakeSubmit.click();
-
-            // Seeing issues in smart tv browsers where the form does not get submitted if the button is removed prior to the submission actually happening
-            setTimeout(function () {
-                form.removeChild(fakeSubmit);
-            }, 500);
-        });
-
         context.querySelector('.btnCancel').addEventListener('click', function () {
 
             closeDialog(false);
@@ -269,12 +242,6 @@
             }
         }
 
-        if (appHost.supports('externalpremium')) {
-            context.querySelector('.btnSupporterForConverting a').href = 'https://emby.media/premiere';
-        } else {
-            context.querySelector('.btnSupporterForConverting a').href = '#';
-        }
-
         apiClient.getNamedConfiguration("livetv").then(function (config) {
 
             context.querySelector('#chkConvertRecordings').checked = config.EnableRecordingEncoding;
@@ -348,6 +315,15 @@
         });
     }
 
+    function onSupporterButtonClick() {
+        if (appHost.supports('externalpremium')) {
+            require(['shell'], function (shell) {
+                shell.openUrl('https://emby.media/premiere');
+            });
+        } else {
+        }
+    }
+
     function reload(context, programId) {
 
         loading.show();
@@ -418,6 +394,8 @@
                     scrollHelper.centerFocus.on(dlg.querySelector('.dialogContent'), false);
                 }
 
+                dlg.querySelector('.btnSupporterForConverting').addEventListener('click', onSupporterButtonClick);
+
                 hideSeriesRecordingFields(dlg);
                 init(dlg);
 

dashboard-ui/bower_components/emby-webcomponents/recordingcreator/recordingcreator.template.html

@@ -55,7 +55,7 @@
                     </div>
                     <br />
                 </div>
-                <br/>
+                <br />
                 <div class="inputContainer">
                     <input is="emby-input" type="number" id="txtPrePaddingMinutes" pattern="[0-9]*" required="required" min="0" step="1" label="${LabelPrePaddingMinutes}" />
                 </div>
@@ -71,9 +71,9 @@
             <div class="supporterContainer hide">
                 <p>${MessageActiveSubscriptionRequiredSeriesRecordings}</p>
                 <p class="supporterTrial hide">${HeaderEnjoyDayTrial}</p>
-                <a class="clearLink btnSupporter hide" href="http://emby.media/premiere" target="_blank"><paper-button raised class="accent block"><iron-icon icon="nav:check"></iron-icon><span>${HeaderBecomeProjectSupporter}</span></paper-button></a>
+                <button is="emby-button" type="button" raised class="btnSupporter hide raised accent block"><iron-icon icon="nav:check"></iron-icon><span>${HeaderBecomeProjectSupporter}</span></button>
             </div>
-            <paper-button raised class="btnSubmit block" autofocus><iron-icon icon="mediainfo:fiber-manual-record"></iron-icon><span>${Record}</span></paper-button>
+            <button is="emby-button" type="submit" class="raised btnSubmit block" autofocus><iron-icon icon="mediainfo:fiber-manual-record"></iron-icon><span>${Record}</span></button>
         </div>
     </form>
 </div>

dashboard-ui/bower_components/emby-webcomponents/recordingcreator/recordingeditor.js

@@ -1,4 +1,4 @@
-define(['dialogHelper', 'globalize', 'layoutManager', 'mediaInfo', 'apphost', 'connectionManager', 'require', 'loading', 'scrollHelper', 'scrollStyles', 'paper-checkbox', 'emby-collapsible', 'emby-input', 'paper-icon-button-light', 'css!./../formdialog', 'css!./recordingcreator', 'html!./../icons/mediainfo.html', 'html!./../icons/nav.html'], function (dialogHelper, globalize, layoutManager, mediaInfo, appHost, connectionManager, require, loading, scrollHelper) {
+define(['dialogHelper', 'globalize', 'layoutManager', 'mediaInfo', 'apphost', 'connectionManager', 'require', 'loading', 'scrollHelper', 'scrollStyles', 'paper-checkbox', 'emby-button', 'emby-collapsible', 'emby-input', 'paper-icon-button-light', 'css!./../formdialog', 'css!./recordingcreator', 'html!./../icons/mediainfo.html', 'html!./../icons/nav.html'], function (dialogHelper, globalize, layoutManager, mediaInfo, appHost, connectionManager, require, loading, scrollHelper) {
 
     var currentDialog;
     var recordingUpdated = false;
@@ -81,22 +81,6 @@
 
             context.querySelector('.btnSubmit').click();
         });
-
-        context.querySelector('.btnSubmit').addEventListener('click', function () {
-
-            // Do a fake form submit this the button isn't a real submit button
-            var fakeSubmit = document.createElement('input');
-            fakeSubmit.setAttribute('type', 'submit');
-            fakeSubmit.style.display = 'none';
-            var form = context.querySelector('form');
-            form.appendChild(fakeSubmit);
-            fakeSubmit.click();
-
-            // Seeing issues in smart tv browsers where the form does not get submitted if the button is removed prior to the submission actually happening
-            setTimeout(function () {
-                form.removeChild(fakeSubmit);
-            }, 500);
-        });
     }
 
     function reload(context, id) {

dashboard-ui/bower_components/emby-webcomponents/recordingcreator/recordingeditor.template.html

@@ -4,10 +4,10 @@
         ${Edit}
     </div>
     <div style="margin-left:auto; display: flex; align-items: center; justify-content: center;">
-        <paper-button class="btnHeaderSave accent" tabindex="-1">
+        <button is="emby-button" type="button" class="btnHeaderSave accent" tabindex="-1">
             <iron-icon icon="check"></iron-icon>
             <span>${Save}</span>
-        </paper-button>
+        </button>
     </div>
 </div>
 
@@ -33,7 +33,7 @@
                 <input is="emby-input" type="number" id="txtPostPaddingMinutes" pattern="[0-9]*" required="required" min="0" step="1" label="${LabelPostPaddingMinutes}" />
             </div>
             <br />
-            <paper-button raised class="btnSubmit block" autofocus><iron-icon icon="mediainfo:fiber-manual-record"></iron-icon><span>${Save}</span></paper-button>
+            <button is="emby-button" type="submit" class="raised btnSubmit block" autofocus><iron-icon icon="mediainfo:fiber-manual-record"></iron-icon><span>${Save}</span></button>
         </form>
     </div>
 </div>

dashboard-ui/bower_components/emby-webcomponents/sharing/sharingmenu.js

@@ -1,4 +1,4 @@
-define(['dialogHelper', 'layoutManager', 'globalize', './social-share-kit-1.0.4/dist/js/social-share-kit.min', 'css!./social-share-kit-1.0.4/dist/css/social-share-kit.css'], function (dialogHelper, layoutManager, globalize) {
+define(['dialogHelper', 'layoutManager', 'globalize', './social-share-kit-1.0.4/dist/js/social-share-kit.min', 'css!./social-share-kit-1.0.4/dist/css/social-share-kit.css', 'emby-button'], function (dialogHelper, layoutManager, globalize) {
 
     function showMenu(options) {
 
@@ -22,7 +22,7 @@
         html += '</div>';
 
         html += '<div class="buttons">';
-        html += '<paper-button class="btnCancel">' + globalize.translate('sharedcomponents#ButtonCancel') + '</paper-button>';
+        html += '<button is="emby-button" type="button" class="btnCancel">' + globalize.translate('sharedcomponents#ButtonCancel') + '</button>';
         html += '</div>';
 
         dlg.innerHTML = html;

dashboard-ui/bower_components/emby-webcomponents/strings/en-US.json

@@ -79,5 +79,6 @@
   "ConfirmDeletion": "Confirm Deletion",
   "MySubtitles": "My Subtitles",
   "MessageDownloadQueued": "Download queued.",
-  "EditSubtitles": "Edit Subtitles"
+  "EditSubtitles": "Edit Subtitles",
+  "UnlockGuide": "Unlock Guide"
 }

dashboard-ui/bower_components/emby-webcomponents/subtitleeditor/subtitleeditor.js

@@ -1,4 +1,4 @@
-define(['dialogHelper', 'require', 'layoutManager', 'globalize', 'scrollHelper', 'appStorage', 'connectionManager', 'loading', 'focusManager', 'emby-select', 'listViewStyle', 'paper-icon-button-light', 'css!./../formdialog', 'html!./../icons/mediainfo.html', 'html!./../icons/nav.html', 'css!./subtitleeditor'], function (dialogHelper, require, layoutManager, globalize, scrollHelper, appStorage, connectionManager, loading, focusManager) {
+define(['dialogHelper', 'require', 'layoutManager', 'globalize', 'scrollHelper', 'appStorage', 'connectionManager', 'loading', 'focusManager', 'emby-select', 'listViewStyle', 'paper-icon-button-light', 'css!./../formdialog', 'html!./../icons/mediainfo.html', 'html!./../icons/nav.html', 'css!./subtitleeditor', 'emby-button'], function (dialogHelper, require, layoutManager, globalize, scrollHelper, appStorage, connectionManager, loading, focusManager) {
 
     var currentItem;
     var hasChanges;
@@ -400,22 +400,6 @@
         });
     }
 
-    function onSubmitButtonClick(e) {
-
-        // Do a fake form submit this the button isn't a real submit button
-        var fakeSubmit = document.createElement('input');
-        fakeSubmit.setAttribute('type', 'submit');
-        fakeSubmit.style.display = 'none';
-        var form = parentWithClass(this, 'subtitleSearchForm');
-        form.appendChild(fakeSubmit);
-        fakeSubmit.click();
-
-        // Seeing issues in smart tv browsers where the form does not get submitted if the button is removed prior to the submission actually happening
-        setTimeout(function () {
-            form.removeChild(fakeSubmit);
-        }, 500);
-    }
-
     function showEditorInternal(itemId, serverId, template) {
 
         hasChanges = false;
@@ -469,8 +453,6 @@
                 dialogHelper.close(dlg);
             });
 
-            btnSubmit.addEventListener('click', onSubmitButtonClick);
-
             return new Promise(function (resolve, reject) {
 
                 dlg.addEventListener('close', function () {

dashboard-ui/bower_components/emby-webcomponents/subtitleeditor/subtitleeditor.template.html

@@ -17,7 +17,7 @@
                 </div>
                 <button type="submit" is="paper-icon-button-light" title="${Search}" class="btnSearchSubtitles" style="flex-shrink: 0;"><iron-icon icon="search"></iron-icon></button>
             </div>
-            <paper-button raised class="btnSubmit block">${Search}</paper-button>
+            <button is="emby-button" type="submit" class="raised btnSubmit block">${Search}</button>
         </form>
         <br />
         <div class="subtitleResults"></div>

dashboard-ui/bower_components/polymer/.bower.json

@@ -39,6 +39,6 @@
     "commit": "ce5b9fb2d8aa03c698410e2e55cffcfa0b788a3a"
   },
   "_source": "git://github.com/Polymer/polymer.git",
-  "_target": "^1.1.0",
+  "_target": "^1.0.0",
   "_originalSource": "Polymer/polymer"
 }

dashboard-ui/channels.html

@@ -1,4 +1,4 @@
-<div id="channelsPage" data-role="page" data-dom-cache="true" class="page libraryPage channelsPage" data-contextname="${HeaderChannels}" data-require="scripts/channels,scripts/channelslatest,scripts/sections">
+<div id="channelsPage" data-role="page" data-dom-cache="true" class="page libraryPage channelsPage pageWithAbsoluteTabs" data-contextname="${HeaderChannels}" data-require="scripts/channels,scripts/channelslatest,scripts/sections">
 
     <div class="libraryViewNav">
         <button class="pageTabButton is-active" data-index="0">${TabLatest}</button>

dashboard-ui/css/site.css

@@ -67,6 +67,11 @@ body {
         overflow-y: auto !important;
     }
 
+.mainAnimatedPage {
+    /* Have to override because it breaks scrolling when dependant on window scroll */
+    contain: style !important;
+}
+
 iron-icon {
     min-width: 24px;
     min-height: 24px;
@@ -748,6 +753,6 @@ emby-collapsible > .style-scope {
     padding: 1em 1.25em;
 }
 
-#editItemMetadataPage #txtOverview .paper-input-input {  
+#editItemMetadataPage #txtOverview .paper-input-input {
-    max-height: 90px;  
+    max-height: 90px;
 }

dashboard-ui/home.html

@@ -1,4 +1,4 @@
-<div id="indexPage" style="outline: none;" data-role="page" data-dom-cache="true" class="page homePage libraryPage allLibraryPage backdropPage" data-title="${ButtonHome}" data-backdroptype="movie,series,game,book">
+<div id="indexPage" style="outline: none;" data-role="page" data-dom-cache="true" class="page homePage libraryPage allLibraryPage backdropPage pageWithAbsoluteTabs" data-title="${ButtonHome}" data-backdroptype="movie,series,game,book">
 
     <div class="libraryViewNav">
         <button class="pageTabButton is-active" data-index="0">${TabHome}</button>

dashboard-ui/movies.html

@@ -1,4 +1,4 @@
-<div id="moviesPage" data-role="page" data-dom-cache="true" class="page libraryPage backdropPage collectionEditorPage" data-backdroptype="movie">
+<div id="moviesPage" data-role="page" data-dom-cache="true" class="page libraryPage backdropPage collectionEditorPage pageWithAbsoluteTabs" data-backdroptype="movie">
 
     <div class="libraryViewNav">
         <button class="pageTabButton is-active" data-index="0">${TabSuggestions}</button>

dashboard-ui/music.html

@@ -1,4 +1,4 @@
-<div id="musicRecommendedPage" data-dom-cache="true" data-role="page" class="page libraryPage backdropPage" data-backdroptype="musicartist">
+<div id="musicRecommendedPage" data-dom-cache="true" data-role="page" class="page libraryPage backdropPage pageWithAbsoluteTabs" data-backdroptype="musicartist">
 
     <div class="libraryViewNav">
         <button class="pageTabButton is-active" data-index="0">${TabSuggestions}</button>

dashboard-ui/scripts/site.js

@@ -1479,6 +1479,7 @@ var AppInfo = {};
         }
 
         AppInfo.supportsExternalPlayers = true;
+        AppInfo.enableAppLayouts = true;
 
         if (isCordova) {
             AppInfo.enableAppLayouts = true;
@@ -1775,6 +1776,7 @@ var AppInfo = {};
 
         define("libjass", [bowerPath + "/libjass/libjass", "css!" + bowerPath + "/libjass/libjass"], returnFirstDependency);
 
+        define("emby-button", [embyWebComponentsBowerPath + "/emby-button/emby-button"], returnFirstDependency);
         define("emby-input", [embyWebComponentsBowerPath + "/emby-input/emby-input"], returnFirstDependency);
         define("emby-select", [embyWebComponentsBowerPath + "/emby-select/emby-select"], returnFirstDependency);
         define("collectionEditor", [embyWebComponentsBowerPath + "/collectioneditor/collectioneditor"], returnFirstDependency);

dashboard-ui/thirdparty/paper-button-style.css

@@ -129,6 +129,114 @@ paper-button.iconRight iron-icon {
     top: 5px;
 }
 
+button[is="emby-button"].blue {
+    color: #03a9f4;
+}
+
+    button[is="emby-button"].blue:hover {
+        background: #e1f5f3;
+    }
+
+button[is="emby-button"].menuButton {
+    color: #212121;
+    text-align: left;
+}
+
+    button[is="emby-button"].menuButton:hover {
+        background: #e1f5f3;
+    }
+
+
+button[is="emby-button"].submit {
+    color: #52B54B;
+}
+
+button[is="emby-button"].raised.submit, button[is="emby-button"].raised:not(.subdued):not(.cancel) {
+    background: #52B54B;
+    color: #fff;
+}
+
+button[is="emby-button"].more {
+    color: #EC407A;
+}
+
+button[is="emby-button"].raised.more {
+    background: #EC407A;
+    color: #fff;
+}
+
+button[is="emby-button"].secondary {
+    color: #4285f4;
+}
+
+button[is="emby-button"].raised.secondary {
+    background: #4285f4;
+    color: #fff;
+}
+
+button[is="emby-button"].accent {
+    color: #52B54B;
+}
+
+button[is="emby-button"].raised.accent {
+    background: #52B54B;
+    color: #fff;
+}
+
+button[is="emby-button"].alt {
+    color: #F57F17;
+}
+
+button[is="emby-button"].raised.alt {
+    background: #F57F17;
+    color: #fff;
+}
+
+.ui-body-b button[is="emby-button"].cancel {
+    color: #444;
+}
+
+.ui-body-b button[is="emby-button"].raised.cancel {
+    background: #444;
+    color: #fff;
+}
+
+button[is="emby-button"].cancelDark {
+    color: #444;
+}
+
+button[is="emby-button"].raised.cancelDark {
+    background: #444;
+    color: #fff;
+}
+
+.ui-body-b button[is="emby-button"].subdued:not([disabled]) {
+    color: #404040;
+}
+
+.ui-body-b button[is="emby-button"].raised.subdued:not([disabled]) {
+    background: #404040;
+    color: #fff;
+}
+
+.ui-body-b button[is="emby-button"].raised[disabled].subduedd {
+    background: #111;
+}
+
+button[is="emby-button"] span {
+    vertical-align: middle;
+}
+
+button[is="emby-button"]:not(.iconRight) > iron-icon {
+    margin-right: .5em;
+}
+
+button[is="emby-button"].iconRight iron-icon {
+    position: absolute;
+    right: 5px;
+    top: 5px;
+}
+
 .clearButton {
     background: transparent;
     border: 0;
@@ -149,6 +257,23 @@ paper-button.iconRight iron-icon {
     color: inherit !important;
 }
 
+button[is="emby-button"].mini {
+    min-width: initial;
+}
+
+button[is="emby-button"].mini {
+    padding: 0.4em 0.7em;
+}
+
+    button[is="emby-button"].mini.noIcon {
+        padding: 0.4em 0.7em;
+    }
+
+    button[is="emby-button"].mini iron-icon {
+        height: 20px;
+        width: 20px;
+    }
+
 paper-button.mini {
     min-width: initial;
 }
@@ -166,7 +291,6 @@ paper-button.mini {
         width: 20px;
     }
 
-
 paper-toast {
     z-index: 9999999;
 }
@@ -184,6 +308,19 @@ paper-button.notext {
         margin-right: 0;
     }
 
+button[is="emby-button"].notext {
+    min-width: 2.8em;
+}
+
+    button[is="emby-button"].notext .content {
+        padding-left: 0 !important;
+        padding-right: 0 !important;
+    }
+
+    button[is="emby-button"].notext iron-icon {
+        margin-right: 0;
+    }
+
 paper-icon-button paper-ripple {
     color: inherit !important;
 }
@@ -404,9 +541,9 @@ paper-input label, paper-textarea label {
     color: #656565;
 }
 
-.ui-body-a .inputLabel.focused:not(.blank) {
+    .ui-body-a .inputLabel.focused:not(.blank) {
-    color: green;
+        color: green;
-}
+    }
 
 .ui-body-b .selectLabelUnfocused, .ui-body-b .inputLabel {
     color: #ccc;
@@ -498,7 +635,7 @@ div.dialogHeader {
     margin-top: .7em;
 }
 
-.dialogHeader paper-button {
+.dialogHeader paper-button, .dialogHeader button {
     margin-top: 0;
     margin-bottom: 0;
 }

dashboard-ui/tv.html

@@ -1,4 +1,4 @@
-<div id="tvRecommendedPage" data-dom-cache="true" data-role="page" class="page libraryPage backdropPage" data-backdroptype="series">
+<div id="tvRecommendedPage" data-dom-cache="true" data-role="page" class="page libraryPage backdropPage pageWithAbsoluteTabs" data-backdroptype="series">
 
     <div class="libraryViewNav">
         <button class="pageTabButton is-active" data-index="0">${TabSuggestions}</button>