update recording dialogs

dashboard-ui/autoorganizetv.html

@@ -18,7 +18,7 @@
                             <input is="emby-input" id="txtWatchFolder" type="text" label="${LabelWatchFolder}" />
                             <div class="fieldDescription">${LabelWatchFolderHelp}</div>
                         </div>
-                        <button type="button" is="emby-button" id="btnSelectWatchFolder" title="${ButtonSelectDirectory}" class="autoSize"><i class="md-icon">search</i></button>
+                        <button type="button" is="paper-icon-button-light" id="btnSelectWatchFolder" title="${ButtonSelectDirectory}" class="autoSize"><i class="md-icon">search</i></button>
                     </div>
                 </div>
                 <div class="inputContainer">

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

@@ -14,12 +14,12 @@
   },
   "devDependencies": {},
   "ignore": [],
-  "version": "1.4.260",
+  "version": "1.4.261",
-  "_release": "1.4.260",
+  "_release": "1.4.261",
   "_resolution": {
     "type": "version",
-    "tag": "1.4.260",
+    "tag": "1.4.261",
-    "commit": "17a68c9487039020a8056d4aec2617d0daf16d8b"
+    "commit": "c985fe644bf1268d66f69ddcf3ba73faf5c6bd3e"
   },
   "_source": "https://github.com/MediaBrowser/emby-webcomponents.git",
   "_target": "^1.2.1",

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

@@ -138,13 +138,14 @@ define(['browser'], function (browser) {
 
     function testCanPlayTs() {
 
-        return browser.tizen || browser.web0s;
+        return browser.tizen || browser.web0s || browser.edgeUwp;
     }
 
     function getDirectPlayProfileForVideoContainer(container, videoAudioCodecs) {
 
         var supported = false;
         var profileContainer = container;
+        var videoCodecs = [];
 
         switch (container) {
 
@@ -169,16 +170,19 @@ define(['browser'], function (browser) {
                 break;
             case 'mov':
                 supported = browser.chrome || browser.edgeUwp;
+                videoCodecs.push('h264');
                 break;
             case 'm2ts':
                 supported = browser.tizen || browser.web0s || browser.edgeUwp;
+                videoCodecs.push('h264');
                 break;
             case 'wmv':
                 supported = browser.tizen || browser.web0s || browser.edgeUwp;
                 videoAudioCodecs = [];
                 break;
             case 'ts':
-                supported = browser.tizen || browser.web0s || browser.edgeUwp;
+                supported = testCanPlayTs();
+                videoCodecs.push('h264');
                 profileContainer = 'ts,mpegts';
                 break;
             default:
@@ -192,6 +196,7 @@ define(['browser'], function (browser) {
         return {
             Container: profileContainer,
             Type: 'Video',
+            VideoCodec: videoCodecs.join(','),
             AudioCodec: videoAudioCodecs.join(',')
         };
     }
@@ -239,7 +244,6 @@ define(['browser'], function (browser) {
         var canPlayWebm = videoTestElement.canPlayType('video/webm').replace(/no/, '');
 
         var canPlayMkv = testCanPlayMkv(videoTestElement);
-        var canPlayTs = testCanPlayTs();
 
         var profile = {};
 
@@ -269,7 +273,7 @@ define(['browser'], function (browser) {
         }
 
         var mp3Added = false;
-        if (canPlayMkv || canPlayTs) {
+        if (canPlayMkv) {
             if (supportsMp3VideoAudio) {
                 mp3Added = true;
                 videoAudioCodecs.push('mp3');
@@ -401,20 +405,6 @@ define(['browser'], function (browser) {
             });
         }
 
-        if (canPlayTs && options.supportsCustomSeeking && !browser.tizen && !browser.web0s && options.enableTsProgressive !== false) {
-            profile.TranscodingProfiles.push({
-                Container: 'ts',
-                Type: 'Video',
-                AudioCodec: videoAudioCodecs.join(','),
-                VideoCodec: 'h264',
-                Context: 'Streaming',
-                CopyTimestamps: copyTimestamps,
-                // If audio transcoding is needed, limit channels to number of physical audio channels
-                // Trying to transcode to 5 channels when there are only 2 speakers generally does not sound good
-                MaxAudioChannels: physicalAudioChannels.toString()
-            });
-        }
-
         if (canPlayHls() && options.enableHls !== false) {
             profile.TranscodingProfiles.push({
                 Container: 'ts',

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

@@ -419,6 +419,11 @@
     color: #cc3333 !important;
 }
 
+.seriesTimerIcon-inactive {
+    color: inherit !important;
+    opacity: .7;
+}
+
 .visibleGuideScroller::-webkit-scrollbar {
     width: 10px;
     height: 10px;

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

@@ -395,8 +395,12 @@
                     html += '<i class="guideHdIcon md-icon programIcon">hd</i>';
                 }
 
-                if (program.SeriesTimerId && program.TimerId) {
+                if (program.SeriesTimerId) {
+                    if (program.TimerId) {
                         html += '<i class="seriesTimerIcon md-icon programIcon">&#xE062;</i>';
+                    } else {
+                        html += '<i class="seriesTimerIcon seriesTimerIcon-inactive md-icon programIcon">&#xE062;</i>';
+                    }
                 }
                 else if (program.TimerId) {
                     html += '<i class="timerIcon md-icon programIcon">&#xE061;</i>';

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

@@ -28,6 +28,10 @@
     color: #CB272A;
 }
 
+.timerIndicator-inactive {
+    color: #888;
+}
+
 .indicator + .indicator {
     margin-left: .25em;
 }

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

@@ -98,8 +98,12 @@ define(['css!./indicators.css', 'material-icons'], function () {
 
     function getTimerIndicator(item) {
 
-        if (item.SeriesTimerId && item.TimerId) {
+        if (item.SeriesTimerId) {
+            if (item.TimerId) {
                 return '<i class="md-icon timerIndicator indicatorIcon">&#xE062;</i>';
+            } else {
+                return '<i class="md-icon timerIndicator timerIndicator-inactive indicatorIcon">&#xE062;</i>';
+            }
         }
         else if (item.TimerId) {
             return '<i class="md-icon timerIndicator indicatorIcon">&#xE061;</i>';

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

@@ -41,10 +41,16 @@ define(['datetime', 'globalize', 'embyRouter', 'itemHelper', 'material-icons', '
         }
 
         if (options.timerIndicator !== false) {
-            if (item.SeriesTimerId && item.TimerId) {
+            if (item.SeriesTimerId) {
+                if (item.TimerId) {
                     miscInfo.push({
                         html: '<i class="md-icon mediaInfoItem mediaInfoTimerIcon mediaInfoIconItem">&#xE062;</i>'
                     });
+                } else {
+                    miscInfo.push({
+                        html: '<i class="md-icon mediaInfoItem mediaInfoIconItem">&#xE062;</i>'
+                    });
+                }
             }
             else if (item.TimerId) {
                 miscInfo.push({

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

@@ -15,7 +15,7 @@
                     <div style="flex-grow: 1;">
                         <input is="emby-input" type="number" id="txtPrePaddingMinutes" pattern="[0-9]*" required="required" min="0" step="1" label="${LabelStartWhenPossible}" />
                     </div>
-                    <div class="fieldDescription" style="margin-left:.5em;font-size:90%;">
+                    <div class="fieldDescription" style="margin-left:.5em;font-size:90%;margin-top:1.5em;">
                         ${MinutesBefore}
                     </div>
                 </div>
@@ -25,7 +25,7 @@
                     <div style="flex-grow: 1;">
                         <input is="emby-input" type="number" id="txtPostPaddingMinutes" pattern="[0-9]*" required="required" min="0" step="1" label="${LabelStopWhenPossible}" />
                     </div>
-                    <div class="fieldDescription" style="margin-left:.5em;font-size:90%;">
+                    <div class="fieldDescription" style="margin-left:.5em;font-size:90%;margin-top:1.5em;">
                         ${MinutesAfter}
                     </div>
                 </div>

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

@@ -224,6 +224,12 @@
         }
     }
 
+    function sendToast(msg) {
+        require(['toast'], function (toast) {
+            toast(msg);
+        });
+    }
+
     function onRecordSeriesChange(e) {
 
         this.changed = true;
@@ -254,6 +260,7 @@
 
             if (this.SeriesTimerId) {
                 apiClient.cancelLiveTvSeriesTimer(this.SeriesTimerId).then(function () {
+                    sendToast(globalize.translate('sharedcomponents#RecordingCancelled'));
                     fetchData(self);
                 });
             }

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

@@ -59,9 +59,33 @@
         });
     }
 
+    function toggleRecording(serverId, programId, timerId, seriesTimerId) {
+
+        var apiClient = connectionManager.getApiClient(serverId);
+
+        if (seriesTimerId && timerId) {
+
+            // cancel 
+            return cancelTimer(apiClient, timerId, true);
+
+        } else if (timerId && programId) {
+
+            // change to series recording, if possible
+            // otherwise cancel individual recording
+            return changeRecordingToSeries(apiClient, timerId, programId);
+
+        } else if (programId) {
+            // schedule recording
+            return createRecording(apiClient, programId);
+        } else {
+            return Promise.reject();
+        }
+    }
+
     return {
         cancelTimer: cancelTimer,
         createRecording: createRecording,
-        changeRecordingToSeries: changeRecordingToSeries
+        changeRecordingToSeries: changeRecordingToSeries,
+        toggleRecording: toggleRecording
     };
 });

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

@@ -48,7 +48,7 @@
                     <div style="flex-grow: 1;">
                         <input is="emby-input" type="number" id="txtPrePaddingMinutes" pattern="[0-9]*" required="required" min="0" step="1" label="${LabelStartWhenPossible}" />
                     </div>
-                    <div class="fieldDescription" style="margin-left:.5em;font-size:90%;">
+                    <div class="fieldDescription" style="margin-left:.5em;font-size:90%;margin-top:1.5em;">
                         ${MinutesBefore}
                     </div>
                 </div>
@@ -58,7 +58,7 @@
                     <div style="flex-grow: 1;">
                         <input is="emby-input" type="number" id="txtPostPaddingMinutes" pattern="[0-9]*" required="required" min="0" step="1" label="${LabelStopWhenPossible}" />
                     </div>
-                    <div class="fieldDescription" style="margin-left:.5em;font-size:90%;">
+                    <div class="fieldDescription" style="margin-left:.5em;font-size:90%;margin-top:1.5em;">
                         ${MinutesAfter}
                     </div>
                 </div>

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

@@ -335,22 +335,10 @@ define(['playbackManager', 'inputManager', 'connectionManager', 'embyRouter', 'g
 
     function onRecordCommand(serverId, id, type, timerId, seriesTimerId) {
 
-        var apiClient = connectionManager.getApiClient(serverId);
+        if (type == 'Program' || timerId || seriesTimerId) {
 
-        if (seriesTimerId && timerId) {
+            var programId = type == 'Program' ? id : null;
-
+            recordingHelper.toggle(serverId, programId, timerId, seriesTimerId);
-            // cancel 
-            recordingHelper.cancelTimer(apiClient, timerId, true);
-
-        } else if (timerId) {
-
-            // change to series recording, if possible
-            // otherwise cancel individual recording
-            recordingHelper.changeRecordingToSeries(apiClient, timerId, id);
-
-        } else if (type == 'Program') {
-            // schedule recording
-            recordingHelper.createRecording(apiClient, id);
         }
     }
 

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

@@ -300,7 +300,7 @@
   "LabelStopWhenPossible": "Stop when possible:",
   "MinutesBefore": "minutes before",
   "MinutesAfter": "minutes after",
-  "SkipEpisodesAlreadyInMyLibrary": "Skip recording episodes that are already in my library",
+  "SkipEpisodesAlreadyInMyLibrary": "Skip episodes that are already in my library",
   "SkipEpisodesAlreadyInMyLibraryHelp": "Episodes will be compared using season and episode numbers, when available.",
   "LabelKeepUpTo": "Keep up to:",
   "AsManyAsPossible": "As many as possible"

dashboard-ui/dashboard.html

@@ -16,16 +16,23 @@
                     <div>
                     </div>
                     <div>
-                        <h1 class="serverNameHeader"></h1>
+                        <div style="display: flex; align-items: center;margin-top:1.45em;">
-                        <div class="paperList" style="padding:1em;">
+                            <h1 class="serverNameHeader" style="margin:0;"></h1>
+                            <button is="paper-icon-button-light" type="button" class="btnEditServerName" style="margin-left: .5em;color:#666;">
+                                <i class="md-icon">mode_edit</i>
+                            </button>
+                        </div>
+                        <div class="paperList" style="padding: 1em;">
                             <p id="appVersionNumber">
                             </p>
-                            <p id="pUpToDate" style="display: flex; align-items:center;" class="hide">
+                            <p id="pUpToDate" style="display: flex; align-items: center;" class="hide">
-                                <i class="md-icon" style="background-color: #52B54B;border-radius:.25em;color: #fff;margin-right:.5em;padding:.25em;font-size:110%;">check</i>
+                                <i class="md-icon" style="background-color: #52B54B; border-radius: .25em; color: #fff; margin-right: .5em; padding: .25em; font-size: 110%;">check</i>
                                 ${ServerUpToDate}
                             </p>
                             <div id="pUpdateNow" style="display: none;">
-                                <p><strong>${NewServerVersionAvailable}</strong></p>
+                                <p>
+                                    <strong>${NewServerVersionAvailable}</strong>
+                                </p>
                                 <p id="newVersionNumber"></p>
                                 <div id="btnUpdateApplicationContainer">
                                     <button id="btnUpdateApplication" type="button" data-icon="arrow-d" data-theme="b" onclick="DashboardPage.updateApplication();">${ButtonUpdateNow}</button>
@@ -39,7 +46,9 @@
 
                             <p class="localUrl"></p>
                             <p class="externalUrl"></p>
-                            <p class="hide"><a class="btnConnectionHelp" href="#">${HowToConnectFromEmbyApps}</a></p>
+                            <p class="hide">
+                                <a class="btnConnectionHelp" href="#">${HowToConnectFromEmbyApps}</a>
+                            </p>
                             <div style="margin-top: 1em;">
                                 <button is="emby-button" type="button" class="raised button-cancel btnRestartContainer hide" onclick="DashboardPage.restart();">
                                     <i class="md-icon">refresh</i>

dashboard-ui/dashboard/dashboardgeneral.js

@@ -21,7 +21,6 @@
             $('#fldRunAtStartup', page).hide();
         }
 
-        page.querySelector('#txtServerName').value = config.ServerName || '';
         page.querySelector('#txtCachePath').value = config.CachePath || '';
 
         $('#selectLocalizationLanguage', page).html(languageOptions.map(function (l) {
@@ -66,7 +65,6 @@
 
         ApiClient.getServerConfiguration().then(function (config) {
 
-            config.ServerName = form.querySelector('#txtServerName').value;
             config.UICulture = $('#selectLocalizationLanguage', form).val();
 
             config.CachePath = form.querySelector('#txtCachePath').value;

dashboard-ui/dashboardgeneral.html

@@ -5,10 +5,6 @@
 
             <form class="dashboardGeneralForm">
 
-                <div class="inputContainer">
-                    <input is="emby-input" type="text" id="txtServerName" label="${LabelFriendlyServerName}" />
-                    <div class="fieldDescription">${LabelFriendlyServerNameHelp}</div>
-                </div>
                 <div class="selectContainer">
                     <select is="emby-select" id="selectLocalizationLanguage" label="${LabelPreferredDisplayLanguage}"></select>
                     <div class="fieldDescription">

dashboard-ui/scripts/dashboardpage.js

@@ -1,4 +1,4 @@
-define(['datetime', 'jQuery', 'cardStyle'], function (datetime, $) {
+define(['datetime', 'jQuery', 'dom', 'cardStyle'], function (datetime, $, dom) {
 
     function renderNoHealthAlertsMessage(page) {
 
@@ -22,6 +22,37 @@
         return false;
     }
 
+    function onEditServerNameClick(e) {
+
+        var page = dom.parentWithClass(this, 'page');
+
+        require(['prompt'], function (prompt) {
+
+            prompt({
+                label: Globalize.translate('LabelFriendlyServerName'),
+                description: Globalize.translate('LabelFriendlyServerNameHelp'),
+                value: page.querySelector('.serverNameHeader').innerHTML
+
+            }).then(function (value) {
+
+                Dashboard.showLoadingMsg();
+
+                ApiClient.getServerConfiguration().then(function (config) {
+
+                    config.ServerName = value;
+
+                    ApiClient.updateServerConfiguration(config).then(function () {
+                        page.querySelector('.serverNameHeader').innerHTML = value;
+                        Dashboard.hideLoadingMsg();
+                    });
+                });
+            });
+        });
+
+        e.preventDefault();
+        return false;
+    }
+
     window.DashboardPage = {
 
         newsStartIndex: 0,
@@ -31,6 +62,7 @@
             var page = this;
 
             page.querySelector('.btnConnectionHelp').addEventListener('click', onConnectionHelpClick);
+            page.querySelector('.btnEditServerName').addEventListener('click', onEditServerNameClick);
         },
 
         onPageShow: function () {
@@ -123,9 +155,9 @@
                 $('#appVersionNumber', page).html(localizedVersion);
 
                 if (systemInfo.SupportsHttps) {
-                    $('#ports', page).html(Globalize.translate('LabelRunningOnPorts', '<b>' + systemInfo.HttpServerPortNumber + '</b>', '<b>' + systemInfo.HttpsPortNumber + '</b>'));
+                    $('#ports', page).html(Globalize.translate('LabelRunningOnPorts', systemInfo.HttpServerPortNumber, systemInfo.HttpsPortNumber));
                 } else {
-                    $('#ports', page).html(Globalize.translate('LabelRunningOnPort', '<b>' + systemInfo.HttpServerPortNumber + '</b>'));
+                    $('#ports', page).html(Globalize.translate('LabelRunningOnPort', systemInfo.HttpServerPortNumber));
                 }
 
                 if (systemInfo.CanSelfRestart) {

dashboard-ui/scripts/itemdetailpage.js

@@ -1,6 +1,7 @@
 define(['layoutManager', 'cardBuilder', 'datetime', 'mediaInfo', 'backdrop', 'listView', 'itemContextMenu', 'itemHelper', 'userdataButtons', 'dom', 'indicators', 'apphost', 'scrollStyles', 'emby-itemscontainer', 'emby-checkbox', 'emby-toggle'], function (layoutManager, cardBuilder, datetime, mediaInfo, backdrop, listView, itemContextMenu, itemHelper, userdataButtons, dom, indicators, appHost) {
 
     var currentItem;
+    var currentRecordingFields;
 
     function getPromise(params) {
 
@@ -298,13 +299,17 @@
 
     function showRecordingFields(page, item, user) {
 
+        if (currentRecordingFields) {
+            return;
+        }
+
         var recordingFieldsElement = page.querySelector('.recordingFields');
 
         if (item.Type == 'Program' && user.Policy.EnableLiveTvManagement) {
 
             require(['recordingFields'], function (recordingFields) {
 
-                var currentRecordingFields = new recordingFields({
+                currentRecordingFields = new recordingFields({
                     parent: recordingFieldsElement,
                     programId: item.Id,
                     serverId: item.ServerId
@@ -2181,6 +2186,7 @@
         view.addEventListener('viewbeforehide', function () {
 
             currentItem = null;
+            currentRecordingFields = null;
 
             Events.off(ApiClient, 'websocketmessage', onWebSocketMessage);
             LibraryMenu.setTransparentMenu(false);