update dialogs

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

@@ -16,12 +16,12 @@
   },
   "devDependencies": {},
   "ignore": [],
-  "version": "1.3.82",
-  "_release": "1.3.82",
+  "version": "1.3.93",
+  "_release": "1.3.93",
   "_resolution": {
     "type": "version",
-    "tag": "1.3.82",
-    "commit": "f25cb631146a714f2cc99666ce060f89eedde9e8"
+    "tag": "1.3.93",
+    "commit": "e471f95b705f30e5e07437f1adb28ca9f957b6e3"
   },
   "_source": "https://github.com/MediaBrowser/emby-webcomponents.git",
   "_target": "^1.2.0",

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', 'paper-input'], function (dialogHelper, layoutManager, globalize) {
+define(['dialogHelper', 'layoutManager', 'globalize', 'html!./../icons/nav.html', 'css!./../prompt/style.css', 'paper-button', 'paper-icon-button-light'], function (dialogHelper, layoutManager, globalize) {
 
     function getIcon(icon, cssClass, canFocus, autoFocus) {
 

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

@@ -107,6 +107,8 @@
         var elem = getBackdropContainer();
         elem.innerHTML = '';
 
+        getSkinContainer().removeAttribute('data-backdroptype');
+
         if (clearAll) {
             hasExternalBackdrop = false;
         }
@@ -114,16 +116,18 @@
     }
 
     var skinContainer;
-    function setSkinContainerBackgroundEnabled() {
-
+    function getSkinContainer() {
         if (!skinContainer) {
             skinContainer = document.querySelector('.skinContainer');
         }
+        return skinContainer;
+    }
+    function setSkinContainerBackgroundEnabled() {
 
         if (hasInternalBackdrop || hasExternalBackdrop) {
-            skinContainer.classList.add('withBackdrop');
+            getSkinContainer().classList.add('withBackdrop');
         } else {
-            skinContainer.classList.remove('withBackdrop');
+            getSkinContainer().classList.remove('withBackdrop');
         }
     }
 
@@ -166,7 +170,7 @@
         currentLoadingBackdrop = instance;
     }
 
-    function setBackdrops(items) {
+    function setBackdrops(items, type) {
 
         var images = items.map(function (i) {
 
@@ -207,7 +211,7 @@
                     quality: 100
                 });
 
-                setBackdrop(imgUrl);
+                setBackdrop(imgUrl, type);
             });
 
         } else {
@@ -215,11 +219,17 @@
         }
     }
 
-    function setBackdrop(url) {
+    function setBackdrop(url, type) {
 
         if (url) {
             setBackdropImage(url);
 
+            if (type) {
+                getSkinContainer().setAttribute('data-backdroptype', type);
+            } else {
+                getSkinContainer().removeAttribute('data-backdroptype');
+            }
+
         } else {
             clearBackdrop();
         }

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

@@ -1,4 +1,4 @@
-define(['shell', 'dialogHelper', 'loading', 'layoutManager', 'connectionManager', 'scrollHelper', 'embyRouter', 'globalize', 'paper-checkbox', 'paper-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'], function (shell, dialogHelper, loading, layoutManager, connectionManager, scrollHelper, embyRouter, globalize) {
 
     var currentServerId;
 
@@ -153,8 +153,8 @@
 
         html += '<div class="newCollectionInfo">';
 
-        html += '<div>';
-        html += '<paper-input type="text" id="txtNewCollectionName" required="required" label="' + globalize.translate('sharedcomponents#LabelName') + '"></paper-input>';
+        html += '<div class="inputContainer">';
+        html += '<input is="emby-input" type="text" id="txtNewCollectionName" required="required" label="' + globalize.translate('sharedcomponents#LabelName') + '" />';
         html += '<div class="fieldDescription">' + globalize.translate('sharedcomponents#NewCollectionNameExample') + '</div>';
         html += '</div>';
 

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

@@ -249,6 +249,15 @@
         return elem.animate(keyframes, timing).onfinish = onFinish;
     }
 
+    function scaleDown(elem) {
+
+        var keyframes = [
+          { transform: 'none', opacity: 1, offset: 0 },
+          { transform: 'scale(0)', opacity: 0, offset: 1 }];
+        var timing = elem.animationConfig.exit.timing;
+        return elem.animate(keyframes, timing);
+    }
+
     function fadeOut(elem) {
 
         var keyframes = [
@@ -291,6 +300,8 @@
 
             if (dlg.animationConfig.exit.name == 'fadeout') {
                 animation = fadeOut(dlg);
+            } else if (dlg.animationConfig.exit.name == 'scaledown') {
+                animation = scaleDown(dlg);
             } else if (dlg.animationConfig.exit.name == 'slidedown') {
                 animation = slideDown(dlg);
             } else {
@@ -396,32 +407,32 @@
         }
 
         var defaultEntryAnimation = browser.animate ? 'scaleup' : 'fadein';
-        dlg.entryAnimation = options.entryAnimation || defaultEntryAnimation;
-        dlg.exitAnimation = 'fadeout';
+        var entryAnimation = options.entryAnimation || defaultEntryAnimation;
+        var defaultExitAnimation = browser.animate ? 'scaledown' : 'fadeout';
+        var exitAnimation = options.exitAnimation || defaultExitAnimation;
 
         // If it's not fullscreen then lower the default animation speed to make it open really fast
         var entryAnimationDuration = options.entryAnimationDuration || (options.size ? 200 : 300);
+        var exitAnimationDuration = options.exitAnimationDuration || (options.size ? 200 : 300);
 
         dlg.animationConfig = {
             // scale up
             'entry': {
-                name: dlg.entryAnimation,
+                name: entryAnimation,
                 node: dlg,
                 timing: { duration: entryAnimationDuration, easing: 'ease-out' }
             },
             // fade out
             'exit': {
-                name: dlg.exitAnimation,
+                name: exitAnimation,
                 node: dlg,
-                timing: { duration: options.exitAnimationDuration || 300, easing: 'ease-in' }
+                timing: { duration: exitAnimationDuration, easing: 'ease-out' }
             }
         };
 
         // too buggy in IE, not even worth it
         if (!enableAnimation()) {
             dlg.animationConfig = null;
-            dlg.entryAnimation = null;
-            dlg.exitAnimation = null;
         }
 
         dlg.classList.add('dialog');

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

@@ -0,0 +1,53 @@
+[is="emby-input"] {
+    display: block;
+    margin: 0;
+    margin-bottom: 0 !important;
+    background: none;
+    border: 1px solid rgb(221, 221, 221);
+    border-width: 0 0 1px 0;
+    /* Prefixed box-sizing rules necessary for older browsers */
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    box-sizing: border-box;
+    /* Remove select styling */
+    /* Font size must the 16px or larger to prevent iOS page zoom on focus */
+    font-size: inherit;
+    /* General select styles: change as needed */
+    font-family: inherit;
+    font-weight: inherit;
+    color: inherit;
+    padding: .35em 0 .3em 0;
+    cursor: pointer;
+    outline: none !important;
+    width: 100%;
+    background-color: transparent;
+    border-radius: 0;
+}
+
+.inputContainer {
+    margin-bottom: 1.5em;
+}
+
+.inputLabel {
+    display: block;
+}
+
+.inputLabelFocused {
+    color: #52B54B;
+}
+
+.emby-input-selectionbar {
+    height: 2px;
+    transform: scale(.01, 1);
+    transition: transform .25s ease-out;
+    position: relative;
+    top: -1px;
+    margin-bottom: .5em;
+    -webkit-transform-origin: center center;
+    transform-origin: center center;
+}
+
+[is="emby-input"]:focus + .emby-input-selectionbar {
+    background-color: #52B54B;
+    transform: none;
+}

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

@@ -0,0 +1,71 @@
+define(['layoutManager', 'browser', 'css!./emby-input'], function (layoutManager, browser) {
+
+    var EmbyInputPrototype = Object.create(HTMLInputElement.prototype);
+
+    function getLabel(input) {
+        var elem = input.previousSibling;
+        while (elem && elem.tagName != 'LABEL') {
+            elem = elem.previousSibling;
+        }
+        return elem;
+    }
+
+    function onFocus(e) {
+        var label = getLabel(this);
+        if (label) {
+            label.classList.add('inputLabelFocused');
+            label.classList.remove('inputLabelUnfocused');
+        }
+    }
+
+    function onBlur(e) {
+        var label = getLabel(this);
+        if (label) {
+            label.classList.add('inputLabelUnfocused');
+            label.classList.remove('inputLabelFocused');
+        }
+    }
+
+    EmbyInputPrototype.createdCallback = function () {
+
+        var parent = this.parentNode;
+        if (!parent.classList.contains('inputContainer')) {
+            var div = this.ownerDocument.createElement('div');
+            div.classList.add('inputContainer');
+            parent.replaceChild(div, this);
+            div.appendChild(this);
+        }
+        if (!this.id) {
+            this.id = 'input' + new Date().getTime();
+        }
+
+        this.removeEventListener('focus', onFocus);
+        this.removeEventListener('blur', onBlur);
+
+        this.addEventListener('focus', onFocus);
+        this.addEventListener('blur', onBlur);
+    };
+
+    EmbyInputPrototype.attachedCallback = function () {
+
+        if (this.getAttribute('data-embyinput') != 'true') {
+            this.setAttribute('data-embyinput', 'true');
+
+            var label = this.ownerDocument.createElement('label');
+            label.innerHTML = this.getAttribute('label') || '';
+            label.classList.add('inputLabel');
+            label.classList.add('inputLabelUnfocused');
+            label.htmlFor = this.id;
+            this.parentNode.insertBefore(label, this);
+
+            var div = document.createElement('div');
+            div.classList.add('emby-input-selectionbar');
+            this.parentNode.insertBefore(div, this.nextSibling);
+        }
+    };
+
+    document.registerElement('emby-input', {
+        prototype: EmbyInputPrototype,
+        extends: 'input'
+    });
+});

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

@@ -141,7 +141,6 @@
 
             var div = document.createElement('div');
             div.classList.add('emby-select-selectionbar');
-            div.innerHTML = '<div class="emby-select-selectionbarInner"></div>';
             this.parentNode.insertBefore(div, this.nextSibling);
         }
     };

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

@@ -6,7 +6,9 @@
         var items = {};
 
         self.refresh = function () {
-            reloadPage(options.element);
+
+            var date = new Date();
+            changeDate(options.element, date);
         };
 
         self.destroy = function () {
@@ -249,7 +251,14 @@
                     addAccent = false;
                 }
 
-                html += '<button data-action="link" data-isfolder="' + program.IsFolder + '" data-id="' + program.Id + '" data-serverid="' + program.ServerId + '" data-type="' + program.Type + '" class="' + cssClass + '" style="left:' + startPercent + '%;width:' + endPercent + '%;">';
+                var timerAttributes = '';
+                if (program.TimerId) {
+                    timerAttributes += ' data-timerid="' + program.TimerId + '"';
+                }
+                if (program.SeriesTimerId) {
+                    timerAttributes += ' data-seriestimerid="' + program.SeriesTimerId + '"';
+                }
+                html += '<button data-action="link"' + timerAttributes + ' data-isfolder="' + program.IsFolder + '" data-id="' + program.Id + '" data-serverid="' + program.ServerId + '" data-type="' + program.Type + '" class="' + cssClass + '" style="left:' + startPercent + '%;width:' + endPercent + '%;">';
 
                 var guideProgramNameClass = "guideProgramName";
 

dashboard-ui/bower_components/emby-webcomponents/images/imagehelper.js

@@ -4,6 +4,29 @@ define(['visibleinviewport', 'imageFetcher', 'layoutManager', 'events', 'browser
     var thresholdY;
     var windowSize;
 
+    var supportsIntersectionObserver = function () {
+
+        if (window.IntersectionObserver) {
+
+            // The api exists in chrome 50 but doesn't work
+            if (browser.chrome) {
+
+                var version = parseInt(browser.version.split('.')[0]);
+                return version >= 51;
+            }
+            return true;
+        }
+
+        return false;
+    }();
+
+    function resetWindowSize() {
+        windowSize = {
+            innerHeight: window.innerHeight,
+            innerWidth: window.innerWidth
+        };
+    }
+
     function resetThresholds() {
 
         var x = screen.availWidth;
@@ -19,24 +42,18 @@ define(['visibleinviewport', 'imageFetcher', 'layoutManager', 'events', 'browser
         resetWindowSize();
     }
 
-    window.addEventListener("orientationchange", resetThresholds);
-    window.addEventListener('resize', resetThresholds);
-    events.on(layoutManager, 'modechange', resetThresholds);
-
-    var wheelEvent = (document.implementation.hasFeature('Event.wheel', '3.0') ? 'wheel' : 'mousewheel');
-
-    function resetWindowSize() {
-        windowSize = {
-            innerHeight: window.innerHeight,
-            innerWidth: window.innerWidth
-        };
+    if (!supportsIntersectionObserver) {
+        window.addEventListener("orientationchange", resetThresholds);
+        window.addEventListener('resize', resetThresholds);
+        events.on(layoutManager, 'modechange', resetThresholds);
+        resetThresholds();
     }
-    resetThresholds();
 
     function isVisible(elem) {
         return visibleinviewport(elem, true, thresholdX, thresholdY, windowSize);
     }
 
+    var wheelEvent = (document.implementation.hasFeature('Event.wheel', '3.0') ? 'wheel' : 'mousewheel');
     var self = {};
 
     function fillImage(elem, source, enableEffects) {
@@ -92,6 +109,12 @@ define(['visibleinviewport', 'imageFetcher', 'layoutManager', 'events', 'browser
 
         var filledCount = 0;
 
+        var options = {};
+
+        if (!layoutManager.desktop) {
+            options.rootMargin = "125%";
+        }
+
         var observer = new IntersectionObserver(function (entries) {
             for (var j = 0, length2 = entries.length; j < length2; j++) {
                 var entry = entries[j];
@@ -109,9 +132,7 @@ define(['visibleinviewport', 'imageFetcher', 'layoutManager', 'events', 'browser
                 //observer.disconnect();
             }
         },
-        {
-            /* Using default options. Details below */
-        }
+        options
         );
         // Start observing an element
         for (var i = 0, length = images.length; i < length; i++) {
@@ -119,22 +140,6 @@ define(['visibleinviewport', 'imageFetcher', 'layoutManager', 'events', 'browser
         }
     }
 
-    var supportsIntersectionObserver = function () {
-
-        if (window.IntersectionObserver) {
-
-            // The api exists in chrome 50 but doesn't work
-            if (browser.chrome) {
-
-                var version = parseInt(browser.version.split('.')[0]);
-                return version >= 51;
-            }
-            return true;
-        }
-
-        return false;
-    }();
-
     function unveilElements(images) {
 
         if (!images.length) {

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

@@ -0,0 +1,15 @@
+.itemProgressBar {
+    background: rgba(0,0,0,.5);
+    position: relative;
+}
+
+.itemProgressBarForeground {
+    position: absolute;
+    top: 0;
+    left: 0;
+    bottom: 0;
+}
+
+.timerIndicator {
+    color: #CB272A;
+}

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

@@ -0,0 +1,111 @@
+define(['css!./indicators.css', 'html!./../icons/mediainfo.html', 'html!./../icons/nav.html'], function () {
+
+    function enableProgressIndicator(item) {
+
+        if (item.MediaType == 'Video') {
+            if (item.Type != 'TvChannel') {
+                return true;
+            }
+        }
+
+        return false;
+    }
+
+    function getProgressHtml(pct) {
+
+        return '<div class="itemProgressBar"><div class="itemProgressBarForeground" style="width:' + pct + '%;"></div></div>';
+    }
+
+    function getProgressBarHtml(item) {
+
+        if (enableProgressIndicator(item)) {
+            if (item.Type == "Recording" && item.CompletionPercentage) {
+
+                return getProgressHtml(item.CompletionPercentage);
+            }
+
+            var userData = item.UserData;
+            if (userData) {
+                var pct = userData.PlayedPercentage;
+
+                if (pct && pct < 100) {
+
+                    return getProgressHtml(pct);
+                }
+            }
+        }
+
+        return '';
+    }
+
+    function enablePlayedIndicator(item) {
+
+        if (item.Type == "Series" || item.Type == "Season" || item.Type == "BoxSet" || item.MediaType == "Video" || item.MediaType == "Game" || item.MediaType == "Book") {
+
+            if (item.Type != 'TvChannel') {
+                return true;
+            }
+        }
+
+        return false;
+    }
+
+    function getPlayedIndicator(item) {
+
+        if (enablePlayedIndicator(item)) {
+
+            var userData = item.UserData || {};
+
+            if (userData.UnplayedItemCount) {
+                return '<div class="countIndicator indicator">' + userData.UnplayedItemCount + '</div>';
+            }
+
+            if (userData.PlayedPercentage && userData.PlayedPercentage >= 100 || (userData.Played)) {
+                return '<div class="playedIndicator indicator"><iron-icon icon="nav:check"></iron-icon></div>';
+            }
+        }
+
+        return '';
+    }
+
+    function getCountIndicatorHtml(count) {
+
+        return '<div class="countIndicator indicator">' + count + '</div>';
+    }
+
+    function getChildCountIndicatorHtml(item, options) {
+
+        var minCount = 0;
+
+        if (options) {
+            minCount = options.minCount || minCount;
+        }
+
+        if (item.ChildCount && item.ChildCount > minCount) {
+            return getCountIndicatorHtml(item.ChildCount);
+        }
+
+        return '';
+    }
+
+    function getTimerIndicator(item) {
+        
+        if (item.SeriesTimerId) {
+            return '<iron-icon class="timerIndicator indicator" icon="mediainfo:fiber-smart-record"></iron-icon>';
+        }
+        if (item.TimerId) {
+            return '<iron-icon class="timerIndicator indicator" icon="mediainfo:fiber-manual-record"></iron-icon>';
+        }
+
+        return '';
+    }
+
+    return {
+        getProgressBarHtml: getProgressBarHtml,
+        getPlayedIndicatorHtml: getPlayedIndicator,
+        getChildCountIndicatorHtml: getChildCountIndicatorHtml,
+        enableProgressIndicator: enableProgressIndicator,
+        getTimerIndicator: getTimerIndicator,
+        enablePlayedIndicator: enablePlayedIndicator
+    };
+});

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

@@ -1,4 +1,4 @@
-define(['shell', 'dialogHelper', 'loading', 'layoutManager', 'connectionManager', 'scrollHelper', 'embyRouter', 'globalize', 'paper-checkbox', 'paper-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'], function (shell, dialogHelper, loading, layoutManager, connectionManager, scrollHelper, embyRouter, globalize) {
 
     var lastPlaylistId = '';
     var currentServerId;
@@ -147,9 +147,7 @@
 
         html += '<div class="newPlaylistInfo">';
 
-        html += '<div>';
-        html += '<paper-input type="text" id="txtNewPlaylistName" required="required" label="' + globalize.translate('sharedcomponents#LabelName') + '"></paper-input>';
-        html += '</div>';
+        html += '<input is="emby-input" type="text" id="txtNewPlaylistName" required="required" label="' + globalize.translate('sharedcomponents#LabelName') + '" />';
 
         html += '<br />';
 

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', 'paper-input'], function (dialogHelper, layoutManager, globalize) {
+define(['dialogHelper', 'layoutManager', 'globalize', 'html!./../icons/nav.html', 'css!./style.css', 'paper-button', 'paper-icon-button-light', 'emby-input'], function (dialogHelper, layoutManager, globalize) {
 
     function getIcon(icon, cssClass, canFocus, autoFocus) {
 
@@ -54,13 +54,15 @@ define(['dialogHelper', 'layoutManager', 'globalize', 'html!./../icons/nav.html'
 
         html += '<form>';
 
-        html += '<paper-input autoFocus class="txtPromptValue" value="' + (options.value || '') + '" label="' + (options.label || '') + '"></paper-input>';
+        html += '<div class="inputContainer">';
+        html += '<input is="emby-input" type="text" autoFocus class="txtPromptValue" value="' + (options.value || '') + '" label="' + (options.label || '') + '"/>';
 
         if (options.description) {
             html += '<div class="fieldDescription">';
             html += options.description;
             html += '</div>';
         }
+        html += '</div>';
 
         html += '<br/>';
         if (raisedButtons) {

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

@@ -1,4 +1,4 @@
-define(['dialogHelper', 'globalize', 'layoutManager', 'mediaInfo', 'apphost', 'connectionManager', 'require', 'loading', 'scrollHelper', 'scrollStyles', 'paper-checkbox', 'emby-collapsible', 'paper-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-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;
@@ -38,7 +38,9 @@
     }
 
     function hideSeriesRecordingFields(context) {
-        slideUpToHide(context.querySelector('#seriesFields'));
+
+        slideUpToHide(context.querySelector('.seriesFields'));
+        slideUpToHide(context.querySelector('.seriesDays'));
         context.querySelector('.btnSubmit').classList.remove('hide');
         context.querySelector('.supporterContainer').classList.add('hide');
     }
@@ -123,8 +125,19 @@
         });
     }
 
+    function showSeriesDays(context) {
+        
+        if (context.querySelector('#chkAnyTime').checked) {
+            slideUpToHide(context.querySelector('.seriesDays'));
+        } else {
+            slideDownToShow(context.querySelector('.seriesDays'));
+        }
+    }
+
     function showSeriesRecordingFields(context, apiClient) {
-        slideDownToShow(context.querySelector('#seriesFields'));
+
+        slideDownToShow(context.querySelector('.seriesFields'));
+        showSeriesDays(context);
         context.querySelector('.btnSubmit').classList.remove('hide');
 
         getRegistration(currentProgramId, apiClient).then(function (regInfo) {
@@ -240,6 +253,11 @@
             closeDialog(false);
         });
 
+        context.querySelector('#chkAnyTime').addEventListener('change', function () {
+
+            showSeriesDays(context);
+        });
+
         context.querySelector('form', context).addEventListener('submit', onSubmit);
 
         var supporterButtons = context.querySelectorAll('.btnSupporter');

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

@@ -18,19 +18,7 @@
                 <paper-checkbox id="chkRecordSeries">${RecordSeries}</paper-checkbox>
             </div>
 
-            <div id="seriesFields" class="hide">
-                <div>
-                    <h1>${Days}</h1>
-                </div>
-                <div class="paperCheckboxList">
-                    <paper-checkbox id="chkSunday">${Sunday}</paper-checkbox>
-                    <paper-checkbox id="chkMonday">${Monday}</paper-checkbox>
-                    <paper-checkbox id="chkTuesday">${Tuesday}</paper-checkbox>
-                    <paper-checkbox id="chkWednesday">${Wednesday}</paper-checkbox>
-                    <paper-checkbox id="chkThursday">${Thursday}</paper-checkbox>
-                    <paper-checkbox id="chkFriday">${Friday}</paper-checkbox>
-                    <paper-checkbox id="chkSaturday">${Saturday}</paper-checkbox>
-                </div>
+            <div class="seriesFields hide">
                 <br />
                 <div class="paperCheckboxList">
                     <paper-checkbox id="chkNewOnly">${RecordOnlyNewEpisodes}</paper-checkbox>
@@ -38,6 +26,7 @@
                     <paper-checkbox id="chkAllChannels">${RecordOnAllChannels}</paper-checkbox>
                 </div>
             </div>
+            <br />
         </div>
         <div class="convertRecordingsContainer hide">
             <br />
@@ -51,13 +40,25 @@
             <br />
             <br />
             <emby-collapsible title="${Advanced}">
-                <div>
-                    <paper-input type="number" id="txtPrePaddingMinutes" pattern="[0-9]*" required="required" min="0" step="1" label="${LabelPrePaddingMinutes}"></paper-input>
+                <div class="seriesDays hide">
+                    <div>
+                        <h1>${Days}</h1>
+                    </div>
+                    <div class="paperCheckboxList">
+                        <paper-checkbox id="chkSunday">${Sunday}</paper-checkbox>
+                        <paper-checkbox id="chkMonday">${Monday}</paper-checkbox>
+                        <paper-checkbox id="chkTuesday">${Tuesday}</paper-checkbox>
+                        <paper-checkbox id="chkWednesday">${Wednesday}</paper-checkbox>
+                        <paper-checkbox id="chkThursday">${Thursday}</paper-checkbox>
+                        <paper-checkbox id="chkFriday">${Friday}</paper-checkbox>
+                        <paper-checkbox id="chkSaturday">${Saturday}</paper-checkbox>
+                    </div>
+                    <br />
                 </div>
                 <br />
-                <div>
-                    <paper-input type="number" id="txtPostPaddingMinutes" pattern="[0-9]*" required="required" min="0" step="1" label="${LabelPostPaddingMinutes}"></paper-input>
-                </div>
+                <input is="emby-input" type="number" id="txtPrePaddingMinutes" pattern="[0-9]*" required="required" min="0" step="1" label="${LabelPrePaddingMinutes}" />
+                <br />
+                <input is="emby-input" type="number" id="txtPostPaddingMinutes" pattern="[0-9]*" required="required" min="0" step="1" label="${LabelPostPaddingMinutes}" />
             </emby-collapsible>
             <br />
         </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', 'paper-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-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;

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

@@ -24,13 +24,10 @@
         </p>
 
         <form>
-            <div>
-                <paper-input type="number" id="txtPrePaddingMinutes" pattern="[0-9]*" required="required" min="0" step="1" label="${LabelPrePaddingMinutes}"></paper-input>
-            </div>
             <br />
-            <div>
-                <paper-input type="number" id="txtPostPaddingMinutes" pattern="[0-9]*" required="required" min="0" step="1" label="${LabelPostPaddingMinutes}"></paper-input>
-            </div>
+            <input is="emby-input" type="number" id="txtPrePaddingMinutes" pattern="[0-9]*" required="required" min="0" step="1" label="${LabelPrePaddingMinutes}" />
+            <br />
+            <input is="emby-input" type="number" id="txtPostPaddingMinutes" pattern="[0-9]*" required="required" min="0" step="1" label="${LabelPostPaddingMinutes}" />
             <br />
             <paper-button raised class="btnSubmit block" autofocus><iron-icon icon="mediainfo:fiber-manual-record"></iron-icon><span>${Save}</span></paper-button>
         </form>

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

@@ -1,4 +1,4 @@
-define(['playbackManager', 'inputManager', 'connectionManager', 'embyRouter'], function (playbackManager, inputManager, connectionManager, embyRouter) {
+define(['playbackManager', 'inputManager', 'connectionManager', 'embyRouter', 'globalize', 'loading'], function (playbackManager, inputManager, connectionManager, embyRouter, globalize, loading) {
 
     function playAllFromHere(card, serverId) {
         var cards = card.parentNode.querySelectorAll('.itemAction[data-id]');
@@ -111,6 +111,47 @@ define(['playbackManager', 'inputManager', 'connectionManager', 'embyRouter'], f
         else if (action == 'setplaylistindex') {
 
         }
+
+        else if (action == 'record') {
+            onRecordCommand(serverId, id, type, card.getAttribute('data-timerid'), card.getAttribute('data-seriestimerid'));
+        }
+    }
+
+    function onRecordCommand(serverId, id, type, timerId, seriesTimerId) {
+
+        var apiClient = connectionManager.getApiClient(serverId);
+
+        if (seriesTimerId) {
+            // cancel all
+
+        } else if (timerId) {
+
+            // change to series recording, if possible
+            // otherwise cancel individual recording
+
+        } else if (type == 'Program') {
+            // schedule recording
+            createRecording(apiClient, id);
+        }
+    }
+
+    function createRecording(apiClient, programId) {
+
+        loading.show();
+        apiClient.getNewLiveTvTimerDefaults({ programId: programId }).then(function (item) {
+
+            apiClient.createLiveTvTimer(item).then(function () {
+
+                loading.hide();
+                sendToast(globalize.translate('sharedcomponents#RecordingScheduled'));
+            });
+        });
+    }
+
+    function sendToast(msg) {
+        require(['toast'], function (toast) {
+            toast(msg);
+        });
     }
 
     function onClick(e) {
@@ -141,7 +182,7 @@ define(['playbackManager', 'inputManager', 'connectionManager', 'embyRouter'], f
     function onCommand(e) {
         var cmd = e.detail.command;
 
-        if (cmd == 'play') {
+        if (cmd == 'play' || cmd == 'record') {
             var card = parentWithClass(e.target, 'itemAction');
 
             if (card) {

dashboard-ui/bower_components/paper-button/.github/ISSUE_TEMPLATE.md

@@ -0,0 +1,33 @@
+<!-- Instructions: https://github.com/PolymerElements/paper-button/CONTRIBUTING.md#filing-issues -->
+### Description
+<!-- Example: The `paper-foo` element causes the page to turn pink when clicked. -->
+
+### Expected outcome
+
+<!-- Example: The page stays the same color. -->
+
+### Actual outcome
+
+<!-- Example: The page turns pink. -->
+
+### Live Demo
+<!-- Example: https://jsbin.com/cagaye/edit?html,output -->
+
+### Steps to reproduce
+
+<!-- Example
+1. Put a `paper-foo` element in the page.
+2. Open the page in a web browser.
+3. Click the `paper-foo` element.
+-->
+
+### Browsers Affected
+<!-- Check all that apply -->
+- [ ] Chrome
+- [ ] Firefox
+- [ ] Safari 9
+- [ ] Safari 8
+- [ ] Safari 7
+- [ ] Edge
+- [ ] IE 11
+- [ ] IE 10

dashboard-ui/components/itemidentifier/itemidentifier.template.html

@@ -7,7 +7,6 @@
 <form class="popupIdentifyForm" style="margin:auto;">
 
     <p>${HeaderIdentifyItemHelp}</p>
-
     <div>
         <paper-input type="text" id="txtLookupName" class="identifyField" data-lookup="Name" label="${LabelName}"></paper-input>
     </div>

dashboard-ui/css/site.css

@@ -419,7 +419,7 @@ fieldset {
     border: none;
 }
 
-input:not(.paper-input):not(.likePaperText):not([type='checkbox']):not([type='radio']):not([type='file']):not([type='range']) {
+input:not(.paper-input):not(.likePaperText):not([type='checkbox']):not([type='radio']):not([type='file']):not([type='range']):not([is='emby-input']) {
     -webkit-appearance: none;
     -webkit-font-smoothing: antialiased;
     -webkit-rtl-ordering: logical;
@@ -490,7 +490,7 @@ select {
         color: #000;
     }
 
-.ui-body-b select {
+.ui-body-b select, .ui-body-b [is="emby-input"] {
     background: none;
     border-color: #454545;
 }

dashboard-ui/scripts/site.js

@@ -1779,6 +1779,7 @@ var AppInfo = {};
 
         define("libjass", [bowerPath + "/libjass/libjass", "css!" + bowerPath + "/libjass/libjass"], 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);
         define("playlistEditor", [embyWebComponentsBowerPath + "/playlisteditor/playlisteditor"], returnFirstDependency);