update dialogs

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

@@ -14,12 +14,12 @@
   },
   "devDependencies": {},
   "ignore": [],
-  "version": "1.4.230",
+  "version": "1.4.232",
-  "_release": "1.4.230",
+  "_release": "1.4.232",
   "_resolution": {
     "type": "version",
-    "tag": "1.4.230",
+    "tag": "1.4.232",
-    "commit": "d7cf0c71da21ae2be3cdda68017c0e4c654275a5"
+    "commit": "dd2fb833aae5eca5981718286c39ed32d37b1a21"
   },
   "_source": "https://github.com/MediaBrowser/emby-webcomponents.git",
   "_target": "^1.2.1",

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

@@ -237,8 +237,6 @@
             });
         }
 
-        document.body.appendChild(dlg);
-
         // Seeing an issue in some non-chrome browsers where this is requiring a double click
         //var eventName = browser.firefox ? 'mousedown' : 'click';
         var selectedId;
@@ -262,6 +260,7 @@
                     selectedId = actionSheetMenuItem.getAttribute('data-id');
 
                     if (options.resolveOnClick) {
+
                         resolve(selectedId);
                         isResolved = true;
                     }
@@ -297,7 +296,7 @@
 
             dialogHelper.open(dlg);
 
-            var pos = options.positionTo ? getPosition(options, dlg) : null;
+            var pos = options.positionTo && dialogOptions.size !== 'fullscreen' ? getPosition(options, dlg) : null;
 
             if (pos) {
                 dlg.style.position = 'fixed';

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

@@ -262,7 +262,6 @@
             html += getEditorHtml();
 
             dlg.innerHTML = html;
-            document.body.appendChild(dlg);
 
             initEditor(dlg, items);
 
@@ -282,6 +281,7 @@
                 }
 
                 dlg.addEventListener('close', resolve);
+
                 dialogHelper.open(dlg);
             });
         };

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

@@ -1,4 +1,4 @@
-define(['layoutManager', 'globalize', 'css!./dialog'], function (layoutManager, globalize) {
+define(['dialogHelper', 'layoutManager', 'scrollHelper', 'globalize', 'require', 'material-icons', 'emby-button', 'paper-icon-button-light', 'emby-input', 'formDialogStyle'], function (dialogHelper, layoutManager, scrollHelper, globalize, require) {
 
     function showTvDialog(options) {
         return new Promise(function (resolve, reject) {
@@ -16,59 +16,49 @@ define(['layoutManager', 'globalize', 'css!./dialog'], function (layoutManager,
         });
     }
 
-    function showDialogInternal(options, dialogHelper, resolve, reject) {
+    function showDialog(options, template) {
 
         var dialogOptions = {
-            removeOnClose: true
+            removeOnClose: true,
+            scrollY: false
         };
 
-        var backButton = false;
-
         if (layoutManager.tv) {
             dialogOptions.size = 'fullscreen';
-            backButton = true;
-            dialogOptions.autoFocus = true;
         } else {
-
+            //dialogOptions.size = 'mini';
-            dialogOptions.modal = false;
-            dialogOptions.entryAnimationDuration = 160;
-            dialogOptions.exitAnimationDuration = 160;
-            dialogOptions.autoFocus = true;
         }
 
         var dlg = dialogHelper.createDialog(dialogOptions);
 
-        dlg.classList.add('promptDialog');
+        dlg.classList.add('formDialog');
 
-        var html = '';
+        dlg.innerHTML = globalize.translateHtml(template, 'sharedcomponents');
 
-        html += '<div class="promptDialogContent">';
+        if (layoutManager.tv) {
-
+            scrollHelper.centerFocus.on(dlg.querySelector('.formDialogContent'), false);
-        if (options.title) {
+        } else {
-            html += '<h2>' + options.title + '</h2>';
+            dlg.querySelector('.dialogContentInner').classList.add('dialogContentInner-mini');
         }
 
-        var text = options.html || options.text;
+        //dlg.querySelector('.btnCancel').addEventListener('click', function (e) {
+        //    dialogHelper.close(dlg);
+        //});
 
-        if (text) {
+        dlg.querySelector('.formDialogHeaderTitle').innerHTML = options.title || '';
-            html += '<div style="margin:1em 0;">' + text + '</div>';
-        }
 
-        html += '<div class="promptDialogButtons">';
+        dlg.querySelector('.text').innerHTML = options.html || options.text || '';
 
         var i, length;
+        var html = '';
         for (i = 0, length = options.buttons.length; i < length; i++) {
 
             var item = options.buttons[i];
             var autoFocus = i == 0 ? ' autofocus' : '';
-            html += '<button is="emby-button" type="button" class="btnOption promptDialogButton" data-id="' + item.id + '"' + autoFocus + '>' + item.name + '</button>';
+            html += '<button is="emby-button" type="button" class="btnOption raised block formDialogFooterItem" data-id="' + item.id + '"' + autoFocus + '>' + item.name + '</button>';
         }
 
-        html += '</div>';
+        dlg.querySelector('.formDialogFooter').innerHTML = html;
-        html += '</div>';
-
-        dlg.innerHTML = html;
-        document.body.appendChild(dlg);
 
         var dialogResult;
         function onButtonClick() {
@@ -77,29 +67,24 @@ define(['layoutManager', 'globalize', 'css!./dialog'], function (layoutManager,
         }
 
         var buttons = dlg.querySelectorAll('.btnOption');
-        for (i = 0, length = options.buttons.length; i < length; i++) {
+        for (i = 0, length = buttons.length; i < length; i++) {
             buttons[i].addEventListener('click', onButtonClick);
         }
 
-        dialogHelper.open(dlg).then(function () {
+        return dialogHelper.open(dlg).then(function () {
+
+            if (layoutManager.tv) {
+                scrollHelper.centerFocus.off(dlg.querySelector('.formDialogContent'), false);
+            }
 
             if (dialogResult) {
-                resolve(dialogResult);
+                return dialogResult;
             } else {
-                reject();
+                return Promise.reject();
             }
         });
     }
 
-    function showDialog(options) {
-        return new Promise(function (resolve, reject) {
-
-            require(['dialogHelper', 'emby-button'], function (dialogHelper) {
-                showDialogInternal(options, dialogHelper, resolve, reject);
-            });
-        });
-    }
-
     return function (text, title) {
 
         var options;
@@ -116,6 +101,10 @@ define(['layoutManager', 'globalize', 'css!./dialog'], function (layoutManager,
             return showTvDialog(options);
         }
 
-        return showDialog(options);
+        return new Promise(function (resolve, reject) {
+            require(['text!./dialog.template.html'], function (template) {
+                showDialog(options, template).then(resolve, reject);
+            });
+        });
     };
 });

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

@@ -0,0 +1,15 @@
+<div class="formDialogHeader">
+    <h3 class="formDialogHeaderTitle" style="margin-left:1em;"></h3>
+</div>
+
+<div class="formDialogContent smoothScrollY">
+    <div class="dialogContentInner dialog-content-centered" style="padding-top:2em;">
+
+        <div class="text">
+
+        </div>
+
+        <div class="formDialogFooter">
+        </div>
+    </div>
+</div>

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

@@ -1,82 +1,64 @@
+.dialogContainer {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 999999 !important;
+    contain: strict;
+}
+
 .dialog {
     margin: 0;
     border-radius: 1px;
-    z-index: 999999 !important;
-    position: fixed;
     -webkit-font-smoothing: antialiased;
     box-shadow: 0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.4);
-    height: auto;
     border: 0;
     padding: 0;
     will-change: transform;
+    /* Strict does not work well with actionsheet */
     contain: style;
 }
 
 .dialog-fixedSize {
-    position: fixed !important;
+    position: fixed;
-    top: 0 !important;
+    top: 0;
-    bottom: 0 !important;
+    bottom: 0;
-    left: 0 !important;
+    left: 0;
-    right: 0 !important;
+    right: 0;
-    margin: 0 !important;
+    margin: 0;
-    border-radius: 0 !important;
+    border-radius: 0;
-    max-height: none !important;
+    max-height: none;
-    max-width: none !important;
+    max-width: none;
-    width: auto;
-}
-
-.centeredDialog {
-    top: 50%;
-    left: 50%;
-    max-width: 70%;
-    max-height: 84%;
-}
-
-@media all and (min-width: 800px) and (min-height: 600px) {
-
-    .dialog-mini {
-        top: 20% !important;
-        bottom: 20% !important;
-        left: 25% !important;
-        right: 25% !important;
-    }
 }
 
 @media all and (min-width: 1280px) and (min-height: 720px) {
 
     .dialog-medium {
-        top: 10% !important;
+        position: static;
-        bottom: 10% !important;
+        width: 80%;
-        left: 10% !important;
+        height: 80%;
-        right: 10% !important;
     }
 
     .dialog-medium-tall {
-        top: 5% !important;
+        position: static;
-        bottom: 5% !important;
+        width: 80%;
-        left: 10% !important;
+        height: 90%;
-        right: 10% !important;
     }
 
     .dialog-small {
-        top: 10% !important;
+        position: static;
-        bottom: 10% !important;
+        width: 60%;
-        left: 20% !important;
+        height: 80%;
-        right: 20% !important;
-    }
-
-    .dialog-mini {
-        top: 20% !important;
-        bottom: 20% !important;
-        left: 30% !important;
-        right: 30% !important;
     }
 
     .dialog-fullscreen-border {
-        top: 5% !important;
+        position: static;
-        bottom: 5% !important;
+        width: 90%;
-        left: 5% !important;
+        height: 90%;
-        right: 5% !important;
     }
 }
 

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

@@ -81,9 +81,16 @@
 
             activeElement.focus();
 
-            if (dlg.getAttribute('data-removeonclose') == 'true') {
+            if (dlg.getAttribute('data-removeonclose') != 'false') {
                 removeCenterFocus(dlg);
-                dlg.parentNode.removeChild(dlg);
+
+                var dialogContainer = dlg.dialogContainer;
+                if (dialogContainer) {
+                    dialogContainer.parentNode.removeChild(dialogContainer);
+                    dlg.dialogContainer = null;
+                } else {
+                    dlg.parentNode.removeChild(dlg);
+                }
             }
 
             //resolve();
@@ -105,26 +112,10 @@
 
         dlg.classList.remove('hide');
 
-        // Use native methods if available
+        addBackdropOverlay(dlg);
-        if (dlg.showModal) {
-            if (dlg.getAttribute('modal')) {
-                dlg.showModal();
-            } else {
-                closeOnBackdropClick(dlg);
-                dlg.showModal();
-            }
-            // Undo the auto-focus applied by the native dialog element
-            safeBlur(document.activeElement);
-        } else {
-            addBackdropOverlay(dlg);
-        }
 
         dlg.classList.add('opened');
 
-        if (center) {
-            centerDialog(dlg);
-        }
-
         if (dlg.getAttribute('data-lockscroll') == 'true' && !document.body.classList.contains('noScroll')) {
             document.body.classList.add('noScroll');
             removeScrollLockOnClose = true;
@@ -141,45 +132,13 @@
         }
     }
 
-    function closeOnBackdropClick(dlg) {
-
-        dlg.addEventListener('click', function (event) {
-            var rect = dlg.getBoundingClientRect();
-            var isInDialog = (rect.top <= event.clientY && event.clientY <= (rect.top + rect.height)
-              && rect.left <= event.clientX && event.clientX <= (rect.left + rect.width));
-
-            if (!isInDialog) {
-                if (dom.parentWithTag(event.target, 'SELECT')) {
-                    isInDialog = true;
-                }
-            }
-
-            if (!isInDialog) {
-                close(dlg);
-            }
-        });
-    }
-
-    function autoFocus(dlg) {
-
-        // The dialog may have just been created and webComponents may not have completed initialiazation yet.
-        // Without this, seeing some script errors in Firefox
-        // Also for some reason it won't auto-focus without a delay here, still investigating that
-
-        focusManager.autoFocus(dlg);
-    }
-
-    function safeBlur(el) {
-        if (el && el.blur && el != document.body) {
-            el.blur();
-        }
-    }
-
     function addBackdropOverlay(dlg) {
 
         var backdrop = document.createElement('div');
         backdrop.classList.add('dialogBackdrop');
-        dlg.parentNode.insertBefore(backdrop, dlg);
+
+        var backdropParent = dlg.dialogContainer || dlg;
+        backdropParent.parentNode.insertBefore(backdrop, backdropParent);
         dlg.backdrop = backdrop;
 
         // Doing this immediately causes the opacity to jump immediately without animating
@@ -187,11 +146,29 @@
             backdrop.classList.add('dialogBackdropOpened');
         }, 0);
 
-        backdrop.addEventListener('click', function () {
+        dom.addEventListener((dlg.dialogContainer || backdrop), 'click', function (e) {
-            close(dlg);
+            if (!isParent(dlg, e.target)) {
+                close(dlg);
+            }
+        }, {
+            passive: true
         });
     }
 
+    function isParent(parent, child) {
+
+        while (child) {
+
+            if (child == parent) {
+                return true;
+            }
+
+            child = child.parentNode;
+        }
+
+        return false;
+    }
+
     function isHistoryEnabled(dlg) {
         return dlg.getAttribute('data-history') == 'true';
     }
@@ -202,6 +179,17 @@
             globalOnOpenCallback(dlg);
         }
 
+        var parent = dlg.parentNode;
+        if (parent) {
+            parent.removeChild(dlg);
+        }
+
+        var dialogContainer = document.createElement('div');
+        dialogContainer.classList.add('dialogContainer');
+        dialogContainer.appendChild(dlg);
+        dlg.dialogContainer = dialogContainer;
+        document.body.appendChild(dialogContainer);
+
         return new Promise(function (resolve, reject) {
 
             new dialogHashHandler(dlg, 'dlg' + new Date().getTime(), resolve);
@@ -328,7 +316,7 @@
         var onAnimationFinish = function () {
             focusManager.pushScope(dlg);
             if (dlg.getAttribute('data-autofocus') == 'true') {
-                autoFocus(dlg);
+                focusManager.autoFocus(dlg);
             }
         };
 
@@ -362,12 +350,6 @@
         return browser.touch;
     }
 
-    function centerDialog(dlg) {
-
-        dlg.style.marginLeft = (-(dlg.offsetWidth / 2)) + 'px';
-        dlg.style.marginTop = (-(dlg.offsetHeight / 2)) + 'px';
-    }
-
     function removeBackdrop(dlg) {
 
         var backdrop = dlg.backdrop;
@@ -428,8 +410,8 @@
         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 ? 180 : 280);
+        var entryAnimationDuration = options.entryAnimationDuration || (options.size !== 'fullscreen' ? 180 : 280);
-        var exitAnimationDuration = options.exitAnimationDuration || (options.size ? 180 : 280);
+        var exitAnimationDuration = options.exitAnimationDuration || (options.size !== 'fullscreen' ? 180 : 280);
 
         dlg.animationConfig = {
             // scale up

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

@@ -186,10 +186,14 @@
         opacity: 0;
     }
 
-    .paper-icon-button-light:focus:after {
+    .paper-icon-button-light:focus {
-        opacity: .2;
+        color: #52B54B;
     }
 
+        .paper-icon-button-light:focus:after {
+            opacity: .2;
+        }
+
 .emby-button-ripple-effect, .paper-icon-button-light-ripple-effect {
     position: absolute;
     border-radius: 50%;

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

@@ -11,7 +11,7 @@
 }
 
 .formDialogHeader, .formDialogFooter {
-    background-color: #222326;
+    background-color: #1D1E21;
 }
 
 .formDialogHeaderTitle {
@@ -23,7 +23,11 @@
 }
 
 .dialogContentInner {
-    padding: .5em 1.5em 30vh 1.5em;
+    padding: .5em 1.5em 20em 1.5em;
+}
+
+.dialogContentInner-mini {
+    padding-bottom: 10em;
 }
 
 .dialog-content-centered {

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

@@ -54,9 +54,6 @@
                 html += globalize.translateDocument(template, 'sharedcomponents');
 
                 dlg.innerHTML = html;
-                document.body.appendChild(dlg);
-
-                currentDialog = dlg;
 
                 dlg.addEventListener('change', function () {
 

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

@@ -432,8 +432,6 @@
 
                 dlg.innerHTML = globalize.translateDocument(template, 'sharedcomponents');
 
-                document.body.appendChild(dlg);
-
                 if (layoutManager.tv) {
                     scrollHelper.centerFocus.on(dlg, false);
                 }

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

@@ -345,7 +345,6 @@
                 html += globalize.translateDocument(template, 'sharedcomponents');
 
                 dlg.innerHTML = html;
-                document.body.appendChild(dlg);
 
                 // Has to be assigned a z-index after the call to .open() 
                 dlg.addEventListener('close', onDialogClosed);
@@ -419,7 +418,6 @@
             html += globalize.translateDocument(template, 'sharedcomponents');
 
             dlg.innerHTML = html;
-            document.body.appendChild(dlg);
 
             if (layoutManager.tv) {
                 scrollHelper.centerFocus.on(dlg.querySelector('.formDialogContent'), false);

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

@@ -1168,7 +1168,6 @@
             html += globalize.translateDocument(template, 'sharedcomponents');
 
             dlg.innerHTML = html;
-            document.body.appendChild(dlg);
 
             if (layoutManager.tv) {
                 centerFocus(dlg.querySelector('.formDialogContent'), false, true);

dashboard-ui/bower_components/emby-webcomponents/metadataeditor/personeditor.js

@@ -33,7 +33,6 @@
                 html += globalize.translateDocument(template, 'sharedcomponents');
 
                 dlg.innerHTML = html;
-                document.body.appendChild(dlg);
 
                 dlg.querySelector('.txtPersonName', dlg).value = person.Name || '';
                 dlg.querySelector('.selectPersonType', dlg).value = person.Type || '';

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

@@ -241,7 +241,6 @@
             html += getEditorHtml();
 
             dlg.innerHTML = html;
-            document.body.appendChild(dlg);
 
             initEditor(dlg, items);
 

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

@@ -1,4 +1,4 @@
-define(['dialogHelper', 'layoutManager', 'scrollHelper', 'globalize', 'require', 'material-icons', 'emby-button', 'paper-icon-button-light', 'emby-input', 'emby-input', 'formDialogStyle'], function (dialogHelper, layoutManager, scrollHelper, globalize, require) {
+define(['dialogHelper', 'layoutManager', 'scrollHelper', 'globalize', 'require', 'material-icons', 'emby-button', 'paper-icon-button-light', 'emby-input', 'formDialogStyle'], function (dialogHelper, layoutManager, scrollHelper, globalize, require) {
 
     function setInputProperties(dlg, options) {
         var txtInput = dlg.querySelector('#txtInput');
@@ -6,7 +6,7 @@ define(['dialogHelper', 'layoutManager', 'scrollHelper', 'globalize', 'require',
         txtInput.label(options.label || '');
     }
 
-    function showPrompt(options, template) {
+    function showDialog(options, template) {
 
         var dialogOptions = {
             removeOnClose: true,
@@ -16,7 +16,7 @@ define(['dialogHelper', 'layoutManager', 'scrollHelper', 'globalize', 'require',
         if (layoutManager.tv) {
             dialogOptions.size = 'fullscreen';
         } else {
-            dialogOptions.size = 'mini';
+            //dialogOptions.size = 'mini';
         }
 
         var dlg = dialogHelper.createDialog(dialogOptions);
@@ -27,6 +27,8 @@ define(['dialogHelper', 'layoutManager', 'scrollHelper', 'globalize', 'require',
 
         if (layoutManager.tv) {
             scrollHelper.centerFocus.on(dlg.querySelector('.formDialogContent'), false);
+        } else {
+            dlg.querySelector('.dialogContentInner').classList.add('dialogContentInner-mini');
         }
 
         dlg.querySelector('.btnCancel').addEventListener('click', function (e) {
@@ -43,8 +45,6 @@ define(['dialogHelper', 'layoutManager', 'scrollHelper', 'globalize', 'require',
 
         setInputProperties(dlg, options);
 
-        document.body.appendChild(dlg);
-
         var submitValue;
 
         dlg.querySelector('form').addEventListener('submit', function (e) {
@@ -62,6 +62,11 @@ define(['dialogHelper', 'layoutManager', 'scrollHelper', 'globalize', 'require',
         });
 
         return dialogHelper.open(dlg).then(function () {
+
+            if (layoutManager.tv) {
+                scrollHelper.centerFocus.off(dlg.querySelector('.formDialogContent'), false);
+            }
+
             var value = submitValue;
 
             if (value) {
@@ -83,7 +88,7 @@ define(['dialogHelper', 'layoutManager', 'scrollHelper', 'globalize', 'require',
                         text: options
                     };
                 }
-                showPrompt(options, template).then(resolve, reject);
+                showDialog(options, template).then(resolve, reject);
             });
         });
     };

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

@@ -1,5 +1,7 @@
 <div class="formDialogHeader">
     <button is="paper-icon-button-light" class="btnCancel autoSize" tabindex="-1"><i class="md-icon">&#xE5C4;</i></button>
+    <div class="formDialogHeaderTitle">
+    </div>
 </div>
 
 <div class="formDialogContent smoothScrollY">
@@ -9,7 +11,7 @@
 
         <form>
             <div class="inputContainer">
-                <input is="emby-input" type="text" id="txtInput" label="${LabelPrePaddingMinutes}"/>
+                <input is="emby-input" type="text" id="txtInput" label=""/>
                 <div class="fieldDescription"></div>
             </div>
 

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

@@ -378,7 +378,6 @@
                 html += globalize.translateDocument(template, 'sharedcomponents');
 
                 dlg.innerHTML = html;
-                document.body.appendChild(dlg);
 
                 currentDialog = dlg;
 

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

@@ -121,7 +121,6 @@
                 html += globalize.translateDocument(template, 'sharedcomponents');
 
                 dlg.innerHTML = html;
-                document.body.appendChild(dlg);
 
                 currentDialog = dlg;
 

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

@@ -132,7 +132,6 @@
             html += getEditorHtml();
 
             dlg.innerHTML = html;
-            document.body.appendChild(dlg);
 
             initEditor(dlg);
 

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

@@ -27,8 +27,6 @@
 
         dlg.innerHTML = html;
 
-        document.body.appendChild(dlg);
-
         var isShared = false;
 
         var shareInfo = options.share;

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

@@ -91,7 +91,8 @@ define(['dialogHelper', 'inputManager', 'connectionManager', 'layoutManager', 'f
                 size: 'fullscreen',
                 autoFocus: false,
                 scrollY: false,
-                exitAnimation: 'fadeout'
+                exitAnimation: 'fadeout',
+                removeOnClose: true
             });
 
             dlg.classList.add('slideshowDialog');
@@ -166,12 +167,9 @@ define(['dialogHelper', 'inputManager', 'connectionManager', 'layoutManager', 'f
                 }
             }
 
-            document.body.appendChild(dlg);
-
             dialogHelper.open(dlg).then(function () {
 
                 stopInterval();
-                dlg.parentNode.removeChild(dlg);
             });
 
             inputmanager.on(window, onInputCommand);

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

@@ -47,7 +47,7 @@
   "HeaderBecomeProjectSupporter": "Get Emby Premiere",
   "MessageActiveSubscriptionRequiredSeriesRecordings": "An active Emby Premiere subscription is required in order to create automated series recordings.",
   "OptionConvertRecordingsToStreamingFormat": "Automatically convert recordings to a streaming friendly format",
-  "OptionConvertRecordingsToStreamingFormatHelp": "Recordings will be converted on the fly to MP4 for easy playback on your devices.",
+  "OptionConvertRecordingsToStreamingFormatHelp": "Recordings will be converted on the fly to MP4 or MKV, based on Emby server settings.",
   "FeatureRequiresEmbyPremiere": "This feature requires an active Emby Premiere subscription.",
   "Record": "Record",
   "Save": "Save",

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

@@ -429,7 +429,6 @@
             dlg.classList.add('subtitleEditorDialog');
 
             dlg.innerHTML = globalize.translateDocument(template, 'sharedcomponents');
-            document.body.appendChild(dlg);
 
             dlg.querySelector('.originalSubtitleFileLabel').innerHTML = globalize.translate('sharedcomponents#File');
 

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

@@ -421,7 +421,6 @@
 
             dlg.querySelector('.lnkHelp').addEventListener('click', onHelpLinkClick);
 
-            document.body.appendChild(dlg);
             var submitted = false;
 
             dlg.querySelector('form').addEventListener('submit', function (e) {

dashboard-ui/bower_components/emby-webcomponents/voice/voicedialog.js

@@ -157,7 +157,6 @@ define(['dialogHelper', 'voiceReceiver', 'voiceProcessor', 'globalize', 'emby-bu
             html += '</div>';
 
             dlg.innerHTML = html;
-            document.body.appendChild(dlg);
 
             dialogHelper.open(dlg);
             currentDialog = dlg;

dashboard-ui/bower_components/hls.js/.bower.json

@@ -1,6 +1,6 @@
 {
   "name": "hls.js",
-  "version": "0.5.46",
+  "version": "0.5.47",
   "license": "Apache-2.0",
   "description": "Media Source Extension - HLS library, by/for Dailymotion",
   "homepage": "https://github.com/dailymotion/hls.js",
@@ -16,11 +16,11 @@
     "test",
     "tests"
   ],
-  "_release": "0.5.46",
+  "_release": "0.5.47",
   "_resolution": {
     "type": "version",
-    "tag": "v0.5.46",
+    "tag": "v0.5.47",
-    "commit": "27578acdf24ae3a6d6dcccb49765ac2b835f84dd"
+    "commit": "21becc9db79debff24e818fee2d961ed655e744b"
   },
   "_source": "git://github.com/dailymotion/hls.js.git",
   "_target": "~0.5.7",

dashboard-ui/bower_components/hls.js/API.md

@@ -279,6 +279,12 @@ in case playback is stalled, and a buffered range is available upfront, less tha
 hls.js will jump over this buffer hole to reach the beginning of this following buffered range.
 ```maxSeekHole``` allows to configure this jumpable threshold.
 
+#### ```maxStarvationDelay```
+(default 2s)
+
+ABR algorithm will always try to choose a quality level that should avoid rebuffering.
+In case no quality level with this criteria can be found (lets say for example that buffer length is 1s, but fetching a fragment at lowest quality is predicted to take around 2s ... ie we can forecast around 1s of rebuffering ...) then ABR algorithm will try to find a level that should guarantee less than ```maxStarvationDelay``` of buffering.
+this max delay is also used in  automatic start level selection : in that mode ABR controller will ensure that video loading time (ie the time to fetch the first fragment at lowest quality level + the time to fetch the fragment at the appropriate quality level is less than ```maxStarvationDelay``` )
 
 #### ```seekHoleNudgeDuration```
 (default 0.01s)

dashboard-ui/bower_components/hls.js/bower.json

@@ -1,6 +1,6 @@
 {
   "name": "hls.js",
-  "version": "0.5.46",
+  "version": "0.5.47",
   "license": "Apache-2.0",
   "description": "Media Source Extension - HLS library, by/for Dailymotion",
   "homepage": "https://github.com/dailymotion/hls.js",

dashboard-ui/bower_components/hls.js/package.json

@@ -1,6 +1,6 @@
 {
   "name": "hls.js",
-  "version": "0.5.46",
+  "version": "0.5.47",
   "license": "Apache-2.0",
   "description": "Media Source Extension - HLS library, by/for Dailymotion",
   "homepage": "https://github.com/dailymotion/hls.js",

dashboard-ui/components/channelmapper/channelmapper.js

@@ -181,7 +181,6 @@ function (dialogHelper, loading, connectionManager, globalize, actionsheet) {
             html += getEditorHtml();
 
             dlg.innerHTML = html;
-            document.body.appendChild(dlg);
 
             initEditor(dlg, options);
 

dashboard-ui/components/directorybrowser/directorybrowser.js

@@ -256,7 +256,6 @@
                 html += getEditorHtml(options, systemInfo);
 
                 dlg.innerHTML = html;
-                document.body.appendChild(dlg);
 
                 initEditor(dlg, options, fileOptions);
 

dashboard-ui/components/fileorganizer/fileorganizer.js

@@ -214,7 +214,6 @@
                     html += Globalize.translateDocument(template);
 
                     dlg.innerHTML = html;
-                    document.body.appendChild(dlg);
 
                     dlg.querySelector('.formDialogHeaderTitle').innerHTML = Globalize.translate('FileOrganizeManually');
 

dashboard-ui/components/filterdialog/filterdialog.js

@@ -564,7 +564,6 @@
                     dlg.innerHTML = Globalize.translateDocument(template);
 
                     setVisibility(dlg, options);
-                    document.body.appendChild(dlg);
 
                     dialogHelper.open(dlg);
 

dashboard-ui/components/guestinviter/connectlink.js

@@ -120,7 +120,6 @@
                     html += Globalize.translateDocument(template);
 
                     dlg.innerHTML = html;
-                    document.body.appendChild(dlg);
 
                     dialogHelper.open(dlg);
 

dashboard-ui/components/guestinviter/guestinviter.js

@@ -152,7 +152,6 @@
                     html += Globalize.translateDocument(template);
 
                     dlg.innerHTML = html;
-                    document.body.appendChild(dlg);
 
                     dialogHelper.open(dlg);
 

dashboard-ui/components/imagedownloader/imagedownloader.js

@@ -327,7 +327,6 @@
             html += '</div>';
 
             dlg.innerHTML = html;
-            document.body.appendChild(dlg);
 
             // Has to be assigned a z-index after the call to .open() 
             dlg.addEventListener('close', onDialogClosed);

dashboard-ui/components/imageuploader/imageuploader.js

@@ -157,7 +157,6 @@
             html += '</div>';
 
             dlg.innerHTML = html;
-            document.body.appendChild(dlg);
 
             // Has to be assigned a z-index after the call to .open() 
             $(dlg).on('close', onDialogClosed);

dashboard-ui/components/medialibrarycreator/medialibrarycreator.js

@@ -229,7 +229,6 @@
                 dlg.classList.add('formDialog');
 
                 dlg.innerHTML = Globalize.translateDocument(template);
-                document.body.appendChild(dlg);
 
                 initEditor(dlg, options.collectionTypeOptions);
 

dashboard-ui/components/medialibraryeditor/medialibraryeditor.js

@@ -187,8 +187,6 @@
 
                 dlg.querySelector('.formDialogHeaderTitle').innerHTML = options.library.Name;
 
-                document.body.appendChild(dlg);
-
                 initEditor(dlg, options);
 
                 dlg.addEventListener('closing', onDialogClosing);

dashboard-ui/device.html

@@ -16,7 +16,7 @@
                 <div class="inputContainer hide" id="fldCameraUploadPath">
                     <div style="display: flex; align-items: center;">
                         <div style="flex-grow:1;">
-                            <input is="emby-input" id="txtUploadPath" label="${LabelCameraUploadPath}" required="required" autocomplete="off" />
+                            <input is="emby-input" id="txtUploadPath" label="${LabelCameraUploadPath}" autocomplete="off" />
                         </div>
                         <button type="button" is="paper-icon-button-light" id="btnSelectUploadPath" title="${ButtonSelectDirectory}" class="autoSize"><i class="md-icon">search</i></button>
                     </div>

dashboard-ui/livetv.html

@@ -31,15 +31,13 @@
 
     <div class="is-active pageTabContent ehsContent" id="suggestionsTab" data-index="0">
         <div id="activePrograms" class="homePageSection">
-            <h1 class="listHeader">${HeaderWhatsOnTV}</h1>
+            <div>
+                <h1 class="listHeader" style="display: inline-block; vertical-align: middle;">${HeaderWhatsOnTV}</h1>
+                <a href="livetvitems.html?type=Programs&IsAiring=true" class="clearLink" style="margin-left: 1em; vertical-align: middle;"><button is="emby-button" type="button" class="raised more mini noIcon">${ButtonMoreItems}</button></a>
+            </div>
             <div is="emby-itemscontainer" class="activeProgramItems itemsContainer"></div>
             <br />
         </div>
-        <div id="upcomingPrograms" class="homePageSection" style="margin-top: 1em;">
-            <h1 class="listHeader">${HeaderUpcomingPrograms}</h1>
-            <div is="emby-itemscontainer" class="upcomingProgramItems itemsContainer"></div>
-            <br />
-        </div>
         <div id="upcomingTvMovies" class="homePageSection" style="margin-top: 1em;">
             <div>
                 <h1 class="listHeader" style="display: inline-block; vertical-align: middle;">${HeaderUpcomingMovies}</h1>
@@ -64,6 +62,14 @@
             <div is="emby-itemscontainer" class="upcomingKidsItems itemsContainer"></div>
             <br />
         </div>
+        <div id="upcomingPrograms" class="homePageSection" style="margin-top: 1em;">
+            <div>
+                <h1 class="listHeader" style="display: inline-block; vertical-align: middle;">${HeaderUpcomingPrograms}</h1>
+                <a href="livetvitems.html?type=Programs&IsKids=false&IsMovie=false&IsSports=false" class="clearLink" style="margin-left: 1em; vertical-align: middle;"><button is="emby-button" type="button" class="raised more mini noIcon">${ButtonMoreItems}</button></a>
+            </div>
+            <div is="emby-itemscontainer" class="upcomingProgramItems itemsContainer"></div>
+            <br />
+        </div>
     </div>
     <div class="pageTabContent ehsContent fullWidth flexPageTabContent absolutePageTabContent" id="guideTab" data-index="1" style="width:auto;padding-top:0; padding-bottom: 0;">
     </div>

dashboard-ui/scripts/librarybrowser.js

@@ -658,13 +658,8 @@
                     html += '</div>';
 
                     dlg.innerHTML = html;
-                    document.body.appendChild(dlg);
 
-                    // Seeing an issue in Firefox and IE where it's initially visible in the bottom right, then moves to the center
+                    dialogHelper.open(dlg);
-                    var delay = browser.animate ? 0 : 100;
-                    setTimeout(function () {
-                        dialogHelper.open(dlg);
-                    }, delay);
 
                     function onSortByChange() {
                         var newValue = this.value;

dashboard-ui/scripts/livetvitems.js

@@ -37,6 +37,8 @@
                 ApiClient.getLiveTvRecordings(query) :
                 params.type == 'RecordingSeries' ?
                 ApiClient.getLiveTvRecordingSeries(query) :
+                params.IsAiring == 'true' ?
+                ApiClient.getLiveTvRecommendedPrograms(query) :
                 ApiClient.getLiveTvPrograms(query);
 
             promise.then(function (result) {
@@ -66,7 +68,8 @@
                     showParentTitle: query.IsSeries !== false && !query.IsMovie,
                     showProgramAirInfo: params.type != 'Recordings' && params.type != 'RecordingSeries',
                     overlayMoreButton: true,
-                    showYear: query.IsMovie && params.type == 'Recordings'
+                    showYear: query.IsMovie && params.type == 'Recordings',
+                    coverImage: true
                 });
 
                 var elem = page.querySelector('.itemsContainer');
@@ -133,14 +136,20 @@
             else if (params.IsKids == 'false') {
                 query.IsKids = false;
             }
+            if (params.IsAiring == 'true') {
+                query.IsAiring = true;
+            }
+            else if (params.IsAiring == 'false') {
+                query.IsAiring = false;
+            }
 
             if (params.type == 'Recordings') {
 
-                if (params.IsMovie) {
+                if (params.IsMovie == 'true') {
                     LibraryMenu.setTitle(Globalize.translate('TabMovies'));
-                } else if (params.IsSports) {
+                } else if (params.IsSports == 'true') {
                     LibraryMenu.setTitle(Globalize.translate('Sports'));
-                } else if (params.IsKids) {
+                } else if (params.IsKids == 'true') {
                     LibraryMenu.setTitle(Globalize.translate('HeaderForKids'));
                 } else {
                     LibraryMenu.setTitle(Globalize.translate('TabRecordings'));
@@ -151,12 +160,14 @@
                 LibraryMenu.setTitle(Globalize.translate('TabSeries'));
             } else {
 
-                if (params.IsMovie) {
+                if (params.IsMovie == 'true') {
                     LibraryMenu.setTitle(Globalize.translate('HeaderUpcomingMovies'));
-                } else if (params.IsSports) {
+                } else if (params.IsSports == 'true') {
                     LibraryMenu.setTitle(Globalize.translate('HeaderUpcomingSports'));
-                } else if (params.IsKids) {
+                } else if (params.IsKids == 'true') {
                     LibraryMenu.setTitle(Globalize.translate('HeaderUpcomingForKids'));
+                } else if (params.IsAiring == 'true') {
+                    LibraryMenu.setTitle(Globalize.translate('HeaderWhatsOnTV'));
                 } else {
                     LibraryMenu.setTitle(Globalize.translate('HeaderUpcomingPrograms'));
                 }

dashboard-ui/scripts/livetvsuggested.js

@@ -29,7 +29,6 @@
             limit: limit,
             ImageTypeLimit: 1,
             EnableImageTypes: "Primary",
-            EnableTotalRecordCount: false,
             Fields: "ChannelInfo"
 
         }).then(function (result) {

dashboard-ui/scripts/mediacontroller.js

@@ -180,8 +180,6 @@
         html += '</div>';
         dlg.innerHTML = html;
 
-        document.body.appendChild(dlg);
-
         var chkMirror = dlg.querySelector('.chkMirror');
 
         if (chkMirror) {

dashboard-ui/scripts/registrationservices.js

@@ -128,7 +128,6 @@
             html += '</div>';
 
             dlg.innerHTML = html;
-            document.body.appendChild(dlg);
 
             // Has to be assigned a z-index after the call to .open() 
             dlg.addEventListener('close', function (e) {