From 4ffca7a9df8ca6611591a5b7782141206c11a856 Mon Sep 17 00:00:00 2001 From: Luke Pulverenti Date: Wed, 7 Sep 2016 03:08:20 -0400 Subject: [PATCH] update dialogs --- .../emby-webcomponents/.bower.json | 8 +-- .../guide/guide-settings.js | 4 ++ .../emby-webcomponents/guide/guide.css | 64 +++++++++++++++++-- .../emby-webcomponents/guide/guide.js | 34 ++++++---- .../guide/tvguide.template.html | 37 ++++++----- dashboard-ui/home.html | 2 +- dashboard-ui/livetv.html | 8 ++- dashboard-ui/movies.html | 4 +- dashboard-ui/scripts/livetvitems.js | 8 +++ dashboard-ui/scripts/livetvrecordings.js | 63 ++++++++++++++++++ dashboard-ui/tv.html | 6 +- 11 files changed, 193 insertions(+), 45 deletions(-) diff --git a/dashboard-ui/bower_components/emby-webcomponents/.bower.json b/dashboard-ui/bower_components/emby-webcomponents/.bower.json index e4499ae77..9cdbd43e3 100644 --- a/dashboard-ui/bower_components/emby-webcomponents/.bower.json +++ b/dashboard-ui/bower_components/emby-webcomponents/.bower.json @@ -14,12 +14,12 @@ }, "devDependencies": {}, "ignore": [], - "version": "1.4.223", - "_release": "1.4.223", + "version": "1.4.225", + "_release": "1.4.225", "_resolution": { "type": "version", - "tag": "1.4.223", - "commit": "e3fce0848cb9f7839d98090ea55c80f0a5ff672d" + "tag": "1.4.225", + "commit": "d3651f587ddad96e72c9b34ccf2d93cf7e2fafd3" }, "_source": "https://github.com/MediaBrowser/emby-webcomponents.git", "_target": "^1.2.1", diff --git a/dashboard-ui/bower_components/emby-webcomponents/guide/guide-settings.js b/dashboard-ui/bower_components/emby-webcomponents/guide/guide-settings.js index 165da63de..81c855175 100644 --- a/dashboard-ui/bower_components/emby-webcomponents/guide/guide-settings.js +++ b/dashboard-ui/bower_components/emby-webcomponents/guide/guide-settings.js @@ -73,6 +73,10 @@ } }); + dlg.querySelector('.btnCancel').addEventListener('click', function () { + dialogHelper.close(dlg); + }); + if (layoutManager.tv) { scrollHelper.centerFocus.on(dlg.querySelector('.formDialogContent'), false); } diff --git a/dashboard-ui/bower_components/emby-webcomponents/guide/guide.css b/dashboard-ui/bower_components/emby-webcomponents/guide/guide.css index d624d1e5f..37c15bf78 100644 --- a/dashboard-ui/bower_components/emby-webcomponents/guide/guide.css +++ b/dashboard-ui/bower_components/emby-webcomponents/guide/guide.css @@ -44,19 +44,30 @@ color: #fff; } -.newTvProgram { - color: yellow; +.guideProgramIndicator { text-transform: uppercase; + border-radius: .3em; + margin-right: .5em; + color: #fff; + font-size: 82%; + padding: .25em; + display: inline-flex; + align-items: center; + justify-content: center; + text-align: center; + color: #fff; +} + +.newTvProgram { + background: #64A239; } .liveTvProgram { - color: #64A239; - text-transform: uppercase; + background: #2196F3; } .premiereTvProgram { - color: orange; - text-transform: uppercase; + background: #EF6C00; } .programAccent { @@ -226,6 +237,47 @@ font-weight: normal; } +.btnSelectDateContent { + display: flex; + align-items: center; + justify-content: center; +} + +.guideDateText { + font-size: 80%; +} + +@media all and (min-width: 1600px) { + + .guideDateText { + display: flex; + } + + .guideDateTextDate { + margin-left: .25em; + } +} + +.btnGuideViewSettings { + margin: 0; + flex-shrink: 0; +} + +.btnGuideViewSettingsIcon { + font-size: 1.5em !important; +} + +@media all and (max-width: 1280px) { + + .btnGuideViewSettings { + display: none; + } +} + +.selectDateIcon { + flex-shrink: 0; +} + .channelHeaderCell { border-bottom: .65vh solid #121212 !important; background-size: auto 70%; diff --git a/dashboard-ui/bower_components/emby-webcomponents/guide/guide.js b/dashboard-ui/bower_components/emby-webcomponents/guide/guide.js index c3d814dc3..7ada60315 100644 --- a/dashboard-ui/bower_components/emby-webcomponents/guide/guide.js +++ b/dashboard-ui/bower_components/emby-webcomponents/guide/guide.js @@ -182,6 +182,8 @@ if (channelsResult.TotalRecordCount > channelLimit) { + context.querySelector('.guideOptions').classList.remove('hide'); + btnPreviousPage.classList.remove('hide'); btnNextPage.classList.remove('hide'); @@ -198,8 +200,7 @@ } } else { - btnPreviousPage.classList.add('hide'); - btnNextPage.classList.add('hide'); + context.querySelector('.guideOptions').classList.add('hide'); } apiClient.getLiveTvPrograms({ @@ -373,13 +374,13 @@ html += '
'; if (program.IsLive && options.showLiveIndicator) { - html += '' + globalize.translate('sharedcomponents#AttributeLive') + ' '; + html += '' + globalize.translate('sharedcomponents#AttributeLive') + ''; } else if (program.IsPremiere && options.showPremiereIndicator) { - html += '' + globalize.translate('sharedcomponents#AttributePremiere') + ' '; + html += '' + globalize.translate('sharedcomponents#AttributePremiere') + ''; } else if (program.IsSeries && !program.IsRepeat && options.showNewIndicator) { - html += '' + globalize.translate('sharedcomponents#AttributeNew') + ' '; + html += '' + globalize.translate('sharedcomponents#AttributeNew') + ''; } html += program.Name; @@ -424,7 +425,7 @@ // Normally we'd want to just let responsive css handle this, // but since mobile browsers are often underpowered, // it can help performance to get them out of the markup - var showIndicators = false; + var showIndicators = true; var options = { showHdIcon: showIndicators, @@ -637,11 +638,15 @@ var day = weekday[date.getDay()]; date = datetime.toLocaleDateString(date); + var parts = []; + if (date.toLowerCase().indexOf(day.toLowerCase()) == -1) { - return day + " " + date; + parts.push(day); } - return date; + parts.push(date); + + return parts; } function changeDate(page, date) { @@ -653,7 +658,14 @@ reloadGuide(page, newStartDate); - page.querySelector('.dateText').innerHTML = getFutureDateText(date); + var dateText = getFutureDateText(date); + + if (dateText.length == 1) { + dateText = dateText[0]; + } else { + dateText = '
' + dateText[0] + '
' + dateText[1] + '
'; + } + page.querySelector('.guideDateText').innerHTML = dateText; } var dateOptions = []; @@ -680,7 +692,7 @@ while (start <= end) { dateOptions.push({ - name: getFutureDateText(start), + name: getFutureDateText(start).join(' '), id: start.getTime() }); @@ -880,7 +892,7 @@ reloadPage(context); }); - context.querySelector('.btnViewSettings').addEventListener('click', function () { + context.querySelector('.btnGuideViewSettings').addEventListener('click', function () { showViewSettings(self); }); diff --git a/dashboard-ui/bower_components/emby-webcomponents/guide/tvguide.template.html b/dashboard-ui/bower_components/emby-webcomponents/guide/tvguide.template.html index 280e0cdbd..1cd0080b1 100644 --- a/dashboard-ui/bower_components/emby-webcomponents/guide/tvguide.template.html +++ b/dashboard-ui/bower_components/emby-webcomponents/guide/tvguide.template.html @@ -1,21 +1,15 @@ -
- - - - -
- -
+
+ +
@@ -33,4 +27,13 @@ check ${UnlockGuide} +
+ +
+ +
\ No newline at end of file diff --git a/dashboard-ui/home.html b/dashboard-ui/home.html index a2ab71f40..fb0c7cca5 100644 --- a/dashboard-ui/home.html +++ b/dashboard-ui/home.html @@ -30,7 +30,7 @@

${HeaderNextUp}

- diff --git a/dashboard-ui/livetv.html b/dashboard-ui/livetv.html index f210d002d..40a272b9f 100644 --- a/dashboard-ui/livetv.html +++ b/dashboard-ui/livetv.html @@ -78,7 +78,7 @@

${HeaderLatestRecordings}

-
@@ -117,6 +117,12 @@

+
+
+

${HeaderRecordingGroups}

+
+
+
diff --git a/dashboard-ui/movies.html b/dashboard-ui/movies.html index 2699b2685..13b449b04 100644 --- a/dashboard-ui/movies.html +++ b/dashboard-ui/movies.html @@ -26,7 +26,7 @@

${HeaderResume}

- @@ -39,7 +39,7 @@

${HeaderLatestMovies}

- diff --git a/dashboard-ui/scripts/livetvitems.js b/dashboard-ui/scripts/livetvitems.js index 9f6368b6c..5a595b2e2 100644 --- a/dashboard-ui/scripts/livetvitems.js +++ b/dashboard-ui/scripts/livetvitems.js @@ -11,6 +11,14 @@ if (params.type == 'Recordings') { query.IsInProgress = false; + + if (params.groupid) { + query.GroupId = params.groupid; + } + + } else if (params.type == 'RecordingSeries') { + query.SortOrder = 'SortName'; + query.SortOrder = 'Ascending'; } else { query.HasAired = false; query.SortBy = 'StartDate,SortName'; diff --git a/dashboard-ui/scripts/livetvrecordings.js b/dashboard-ui/scripts/livetvrecordings.js index e230aa202..2ffd4ebe9 100644 --- a/dashboard-ui/scripts/livetvrecordings.js +++ b/dashboard-ui/scripts/livetvrecordings.js @@ -1,5 +1,59 @@ define(['components/categorysyncbuttons', 'cardBuilder', 'scripts/livetvcomponents', 'emby-button', 'listViewStyle', 'emby-itemscontainer'], function (categorysyncbuttons, cardBuilder) { + function getRecordingGroupHtml(group) { + + var html = ''; + + html += '
'; + + html += ''; + + html += '
'; + html += ''; + + html += '
'; + html += group.Name; + html += '
'; + + html += '
'; + if (group.RecordingCount == 1) { + html += Globalize.translate('ValueItemCount', group.RecordingCount); + } else { + html += Globalize.translate('ValueItemCountPlural', group.RecordingCount); + } + html += '
'; + + html += ''; + html += '
'; + html += '
'; + + return html; + } + + function renderRecordingGroups(context, groups) { + + if (groups.length) { + context.querySelector('#recordingGroups').classList.remove('hide'); + } else { + context.querySelector('#recordingGroups').classList.add('hide'); + } + + var html = ''; + + html += '
'; + + for (var i = 0, length = groups.length; i < length; i++) { + + html += getRecordingGroupHtml(groups[i]); + } + + html += '
'; + + context.querySelector('#recordingGroupItems').innerHTML = html; + + Dashboard.hideLoadingMsg(); + } + function enableScrollX() { return browserInfo.mobile && AppInfo.enableAppLayouts; } @@ -181,6 +235,15 @@ renderEpisodeRecordings(context); renderSportsRecordings(context); renderKidsRecordings(context); + + ApiClient.getLiveTvRecordingGroups({ + + userId: Dashboard.getCurrentUserId() + + }).then(function (result) { + + renderRecordingGroups(context, result.Items); + }); } function onMoreClick(e) { diff --git a/dashboard-ui/tv.html b/dashboard-ui/tv.html index 23560a878..c66cab8b1 100644 --- a/dashboard-ui/tv.html +++ b/dashboard-ui/tv.html @@ -30,7 +30,7 @@

${HeaderResume}

- @@ -43,7 +43,7 @@

${HeaderNextUp}

- @@ -57,7 +57,7 @@

${HeaderLatestEpisodes}

-