redesign series timer edit screen

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

@@ -138,7 +138,23 @@ define(['datetime', 'globalize', 'embyRouter', 'itemHelper', 'material-icons', '
             }
         }
 
-        if (item.StartDate && item.Type !== 'Program') {
+        if (item.Type === 'SeriesTimer') {
+            if (item.RecordAnyTime) {
+
+                miscInfo.push(globalize.translate('sharedcomponents#Anytime'));
+            } else {
+                miscInfo.push(datetime.getDisplayTime(item.StartDate));
+            }
+
+            if (item.RecordAnyChannel) {
+                miscInfo.push(globalize.translate('sharedcomponents#AllChannels'));
+            }
+            else {
+                miscInfo.push(item.ChannelName || globalize.translate('sharedcomponents#OneChannel'));
+            }
+        }
+
+        if (item.StartDate && item.Type !== 'Program' && item.Type !== 'SeriesTimer') {
 
             try {
                 date = datetime.parseISO8601Date(item.StartDate);

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

@@ -98,15 +98,24 @@
 
     function reload(context, id) {
 
+        var apiClient = connectionManager.getApiClient(currentServerId);
+
         loading.show();
+        if (typeof id === 'string') {
             currentItemId = id;
 
-        var apiClient = connectionManager.getApiClient(currentServerId);
             apiClient.getLiveTvSeriesTimer(id).then(function (result) {
 
                 renderTimer(context, result, apiClient);
                 loading.hide();
             });
+        } else if (id) {
+
+            currentItemId = id.Id;
+
+            renderTimer(context, id, apiClient);
+            loading.hide();
+        }
     }
 
     function fillKeepUpTo(context) {
@@ -131,6 +140,10 @@
         context.querySelector('.selectKeepUpTo').innerHTML = html;
     }
     
+    function onFieldChange(e) {
+        this.querySelector('.btnSubmit').click();
+    }
+
     function embed(itemId, serverId, options) {
 
         recordingUpdated = false;
@@ -163,9 +176,8 @@
             dlg.querySelector('.dialogContentInner').className = '';
             dlg.classList.remove('hide');
 
-            dlg.addEventListener('change', function () {
-                dlg.querySelector('.btnSubmit').click();
-            });
+            dlg.removeEventListener('change', onFieldChange);
+            dlg.addEventListener('change', onFieldChange);
 
             currentDialog = dlg;
 

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

@@ -8,7 +8,7 @@
 <div class="formDialogContent smoothScrollY">
     <div class="dialogContentInner dialog-content-centered" style="padding-top:2em;">
 
-        <form>
+        <form style="max-width: none;">
             <div class="selectContainer">
                 <select is="emby-select" class="selectShowType" label="${LabelRecord}">
                     <option value="new">${NewEpisodesOnly}</option>
@@ -18,7 +18,7 @@
 
             <div class="checkboxContainer checkboxContainer-withDescription">
                 <label>
-                    <input type="checkbox" is="emby-checkbox" class="chkSkipEpisodesInLibrary"/>
+                    <input type="checkbox" is="emby-checkbox" class="chkSkipEpisodesInLibrary" />
                     <span>${SkipEpisodesAlreadyInMyLibrary}</span>
                 </label>
                 <div class="fieldDescription checkboxFieldDescription">${SkipEpisodesAlreadyInMyLibraryHelp}</div>
@@ -39,8 +39,7 @@
             </div>
 
             <div class="selectContainer">
-                <select is="emby-select" class="selectKeepUpTo" label="${LabelKeepUpTo}">
-                </select>
+                <select is="emby-select" class="selectKeepUpTo" label="${LabelKeepUpTo}"></select>
             </div>
 
             <div class="inputContainer">

dashboard-ui/itemdetails.html

@@ -26,7 +26,6 @@
 
                 <div class="detailSection" style="margin-bottom: 0;">
 
-                    <div>
                     <h1 class="parentName" style="margin: .25em 0;"></h1>
                     <h1 class="itemName" style="margin: .5em 0;"></h1>
 
@@ -37,7 +36,6 @@
                     <div class="itemMiscInfo itemMiscInfo-secondary" style="margin: 1em 0;">
 
                     </div>
-                    </div>
 
                     <div class="mainDetailButtons">
                         <button is="emby-button" type="button" class="raised subdued btnPlay btnPlaySimple hide">
@@ -48,6 +46,10 @@
                             <i class="md-icon">videocam</i>
                             <span>${ButtonTrailer}</span>
                         </button>
+                        <button is="emby-button" type="button" class="raised subdued btnCancelSeriesTimer hide">
+                            <i class="md-icon">cancel</i>
+                            <span>${ButtonCancelSeries}</span>
+                        </button>
                         <button is="emby-button" type="button" class="raised subdued btnMoreCommands hide notext">
                             &nbsp;
                             <i class="md-icon">more_vert</i>
@@ -79,11 +81,21 @@
                         <p class="itemExternalLinks"></p>
                         <p class="itemStudios"></p>
                         <p class="itemTags"></p>
+
+                        <div class="seriesRecordingEditor">
+
                         </div>
                     </div>
                 </div>
             </div>
-        <div>
+        </div>
+        <div class="seriesTimerScheduleSection detailSection hide" style="margin-top:-3em;">
+            <h1>
+                ${HeaderSchedule}
+            </h1>
+            <div class="seriesTimerSchedule">
+            </div>
+        </div>
         <div class="collectionItems"></div>
         <div class="nextUpSection detailSection hide">
             <h1>
@@ -198,7 +210,6 @@
             </div>
         </div>
     </div>
-    </div>
 
     <div data-role="content" style="padding-top: 0; clear: both;">
     </div>

dashboard-ui/livetvseriestimer.html

@@ -1,28 +0,0 @@
-<div id="liveTvSeriesTimerPage" data-role="page" class="page libraryPage liveTvPage noSecondaryNavPage" data-title="${HeaderLiveTv}" data-backbutton="true">
-
-    <style>
-        @media all and (min-width: 800px) {
-
-            .seriesTimerSchedule .backdropCard {
-                width: 33.333333333333333333333333333333%;
-            }
-        }
-    </style>
-    <div data-role="content">
-
-        <div style="margin:auto; max-width: 700px;">
-            <div>
-                <h1 class="itemName"></h1>
-            </div>
-
-            <div class="recordingEditor">
-
-            </div>
-
-            <h1 style="margin-top:0;">${HeaderSchedule}</h1>
-            <div class="scheduleTab seriesTimerSchedule">
-            </div>
-        </div>
-    </div>
-
-</div>

dashboard-ui/scripts/itemdetailpage.js

@@ -9,6 +9,10 @@
             return ApiClient.getItem(Dashboard.getCurrentUserId(), id);
         }
 
+        if (params.seriesTimerId) {
+            return ApiClient.getLiveTvSeriesTimer(params.seriesTimerId);
+        }
+
         var name = params.genre;
 
         if (name) {
@@ -108,6 +112,79 @@
         });
     }
 
+    function getProgramScheduleHtml(items, options) {
+
+        options = options || {};
+
+        var html = '';
+        html += '<div is="emby-itemscontainer" class="itemsContainer vertical-list" data-contextmenu="false">';
+        html += listView.getListViewHtml({
+            items: items,
+            enableUserDataButtons: false,
+            image: false,
+            showProgramDateTime: true,
+            mediaInfo: false,
+            action: 'none',
+            moreButton: false,
+            recordButton: false
+        });
+
+        html += '</div>';
+
+        return html;
+    }
+
+    function renderSeriesTimerSchedule(page, seriesTimerId) {
+
+        ApiClient.getLiveTvTimers({
+            UserId: ApiClient.getCurrentUserId(),
+            ImageTypeLimit: 1,
+            EnableImageTypes: "Primary,Backdrop,Thumb",
+            SortBy: "StartDate",
+            EnableTotalRecordCount: false,
+            EnableUserData: false,
+            SeriesTimerId: seriesTimerId,
+            Fields: "ChannelInfo"
+
+        }).then(function (result) {
+
+            if (result.Items.length && result.Items[0].SeriesTimerId != seriesTimerId) {
+                result.Items = [];
+            }
+
+            var html = getProgramScheduleHtml(result.Items);
+
+            var scheduleTab = page.querySelector('.seriesTimerSchedule');
+            scheduleTab.innerHTML = html;
+
+            imageLoader.lazyChildren(scheduleTab);
+        });
+    }
+
+    function renderSeriesTimerEditor(page, item, user) {
+
+        if (item.Type !== 'SeriesTimer') {
+            return;
+        }
+
+        if (!user.Policy.EnableLiveTvManagement) {
+            page.querySelector('.seriesTimerScheduleSection').classList.add('hide');
+            page.querySelector('.btnCancelSeriesTimer').classList.add('hide');
+            return;
+        }
+
+        require(['seriesRecordingEditor'], function (seriesRecordingEditor) {
+            seriesRecordingEditor.embed(item, ApiClient.serverId(), {
+                context: page.querySelector('.seriesRecordingEditor')
+            });
+        });
+
+        page.querySelector('.seriesTimerScheduleSection').classList.remove('hide');
+        page.querySelector('.btnCancelSeriesTimer').classList.remove('hide');
+
+        renderSeriesTimerSchedule(page, item.Id);
+    }
+
     function reloadFromItem(page, params, item) {
 
         currentItem = item;
@@ -122,6 +199,8 @@
 
             window.scrollTo(0, 0);
 
+            renderSeriesTimerEditor(page, item, user);
+
             renderImage(page, item, user);
             renderLogo(page, item, ApiClient);
 
@@ -1582,7 +1661,7 @@
 
         for (var i = 0, length = userDataIcons.length; i < length; i++) {
 
-            if (item.Type == 'Program') {
+            if (item.Type == 'Program' || item.Type == 'SeriesTimer') {
                 userDataIcons[i].classList.add('hide');
             } else {
                 userDataIcons[i].classList.remove('hide');
@@ -1699,6 +1778,10 @@
 
     function renderThemeMedia(page, item) {
 
+        if (item.Type === 'SeriesTimer' || item.Type === 'Timer' || item.Type === 'Genre' || item.Type === 'MusicGenre' || item.Type === 'GameGenre' || item.Type === 'Studio' || item.Type === 'Person') {
+            return;
+        }
+
         ApiClient.getThemeMedia(Dashboard.getCurrentUserId(), item.Id, true).then(function (result) {
 
             var themeSongs = result.ThemeSongsResult.OwnerId == item.Id ?
@@ -2177,6 +2260,16 @@
         });
     }
 
+    function onCancelSeriesTimerClick() {
+
+        require(['recordingHelper'], function (recordingHelper) {
+
+            recordingHelper.cancelSeriesTimerWithConfirmation(currentItem.Id, currentItem.ServerId).then(function () {
+                Dashboard.navigate('livetv.html');
+            });
+        });
+    }
+
     return function (view, params) {
 
         function onPlayTrailerClick() {
@@ -2208,6 +2301,11 @@
             elems[i].addEventListener('click', onPlayTrailerClick);
         }
 
+        elems = view.querySelectorAll('.btnCancelSeriesTimer');
+        for (i = 0, length = elems.length; i < length; i++) {
+            elems[i].addEventListener('click', onCancelSeriesTimerClick);
+        }
+
         elems = view.querySelectorAll('.btnDeleteItem');
         for (i = 0, length = elems.length; i < length; i++) {
             elems[i].addEventListener('click', onDeleteClick);

dashboard-ui/scripts/librarybrowser.js

@@ -252,7 +252,8 @@
                 var id = item.Id || item.ItemId;
 
                 if (item.Type == "SeriesTimer") {
-                    return "livetvseriestimer.html?id=" + id;
+                    //return "livetvseriestimer.html?id=" + id;
+                    return "itemdetails.html?seriesTimerId=" + id;
                 }
 
                 if (item.CollectionType == 'livetv') {
@@ -733,6 +734,10 @@
 
             renderDetailImage: function (elem, item, editable, preferThumb, imageLoader, indicators) {
 
+                if (item.Type === 'SeriesTimer') {
+                    editable = false;
+                }
+
                 var imageTags = item.ImageTags || {};
 
                 if (item.PrimaryImageTag) {
@@ -809,6 +814,14 @@
                         tag: item.SeriesPrimaryImageTag
                     });
                 }
+                else if (item.ParentPrimaryImageItemId && item.ParentPrimaryImageTag) {
+
+                    url = ApiClient.getScaledImageUrl(item.ParentPrimaryImageItemId, {
+                        type: "Primary",
+                        maxHeight: imageHeight,
+                        tag: item.ParentPrimaryImageTag
+                    });
+                }
 
                 html += '<div style="position:relative;">';
 

dashboard-ui/scripts/livetvseriestimer.js

@@ -1,83 +0,0 @@
-define(['datetime', 'dom', 'seriesRecordingEditor', 'listView', 'imageLoader', 'emby-itemscontainer'], function (datetime, dom, seriesRecordingEditor, listView, imageLoader) {
-    'use strict';
-
-    return function (view, params) {
-
-        function renderTimer(page, item) {
-
-            page.querySelector('.itemName').innerHTML = item.Name;
-
-            Dashboard.hideLoadingMsg();
-        }
-
-        function getProgramScheduleHtml(items, options) {
-
-            options = options || {};
-
-            var html = '';
-            html += '<div is="emby-itemscontainer" class="itemsContainer vertical-list" data-contextmenu="false">';
-            html += listView.getListViewHtml({
-                items: items,
-                enableUserDataButtons: false,
-                image: false,
-                showProgramDateTime: true,
-                mediaInfo: false,
-                action: 'none',
-                moreButton: false,
-                recordButton: false
-            });
-
-            html += '</div>';
-
-            return html;
-        }
-
-        function renderSchedule(page) {
-
-            ApiClient.getLiveTvTimers({
-                UserId: ApiClient.getCurrentUserId(),
-                ImageTypeLimit: 1,
-                EnableImageTypes: "Primary,Backdrop,Thumb",
-                SortBy: "StartDate",
-                EnableTotalRecordCount: false,
-                EnableUserData: false,
-                SeriesTimerId: params.id,
-                Fields: "ChannelInfo"
-
-            }).then(function (result) {
-
-                if (result.Items.length && result.Items[0].SeriesTimerId != params.id) {
-                    result.Items = [];
-                }
-
-                var html = getProgramScheduleHtml(result.Items);
-
-                var scheduleTab = page.querySelector('.scheduleTab');
-                scheduleTab.innerHTML = html;
-
-                imageLoader.lazyChildren(scheduleTab);
-            });
-        }
-
-        function reload() {
-
-            var id = params.id;
-            Dashboard.showLoadingMsg();
-
-            ApiClient.getLiveTvSeriesTimer(id).then(function (result) {
-
-                renderTimer(view, result);
-
-            });
-
-            renderSchedule(view);
-        }
-
-        seriesRecordingEditor.embed(params.id, ApiClient.serverId(), {
-            context: view.querySelector('.recordingEditor')
-        });
-
-        view.querySelector('.scheduleTab').addEventListener('timercancelled', reload);
-        view.addEventListener('viewbeforeshow', reload);
-    };
-});