diff --git a/dashboard-ui/css/librarybrowser.css b/dashboard-ui/css/librarybrowser.css index 4bba9bd4c9..8c39bd54c0 100644 --- a/dashboard-ui/css/librarybrowser.css +++ b/dashboard-ui/css/librarybrowser.css @@ -108,7 +108,7 @@ @media all and (max-width: 400px) { .libraryPage .ui-content { - padding: 10px 0; + padding: 10px 1px; } } @@ -370,10 +370,6 @@ a.itemTag:hover { background-color: transparent; } -.itemBackdropContent { - height: 230px; -} - .lnkSibling { position: absolute; bottom: 240px; @@ -405,12 +401,13 @@ a.itemTag:hover { } .itemDetailImage { - height: 240px; + max-height: 240px; + max-width: 320px; -moz-box-shadow: 0px 0 20px #000; -webkit-box-shadow: 0px 0 20px #000; box-shadow: 0px 0 20px #000; border: solid 1px #222; - margin-top: -30px; + margin-top: -20px; } .itemDetailGalleryLink img:hover { @@ -424,10 +421,16 @@ a.itemTag:hover { text-align: center; font-size: 16px; border: 0; + background-color: rgba(0,0,0,0.7); + position: absolute; + top: 0; + left: 0; + right: 0; } .parentName a { - color: #000!important; + color: #fff!important; + font-weight: normal!important; } .inlineItemName { @@ -439,7 +442,7 @@ a.itemTag:hover { } .itemOverview { - max-height: 60px; + max-height: 70px; overflow-y: auto; text-overflow: ellipsis; } @@ -470,9 +473,9 @@ a.itemTag:hover { } .detailSectionHeader { - padding: .5em 1em; + padding: .5em .75em; font-size: 16px; - font-weight: bold; + font-weight: normal; border: 1px solid #181818; background: #222; white-space: nowrap; @@ -588,6 +591,10 @@ a.itemTag:hover { .detailPageContent { max-width: 900px; } + + .primaryDetailPageContent { + max-width: 800px; + } } @media all and (min-width: 1200px) { @@ -599,6 +606,10 @@ a.itemTag:hover { .detailPageContent { max-width: 1000px; } + + .primaryDetailPageContent { + max-width: 800px; + } } @media all and (min-width: 1440px) { @@ -614,14 +625,6 @@ a.itemTag:hover { .ehsContent { max-width: 1070px; } - - .detailPageContent { - max-width: 1170px; - } - - .primaryDetailPageContent { - max-width: 1100px; - } } @media all and (min-width: 1920px) { diff --git a/dashboard-ui/css/livetv.css b/dashboard-ui/css/livetv.css new file mode 100644 index 0000000000..085cc1e95b --- /dev/null +++ b/dashboard-ui/css/livetv.css @@ -0,0 +1,83 @@ + +.tvProgramSectionHeader { + margin: 0; +} + +.tvProgram { + display: block; + text-decoration: none; + font-weight: normal!important; + white-space: nowrap; + position: relative; +} + +.detailSectionHeader + .tvProgram { + border-top: 1px solid #555; + margin-top: 1px; +} + +.tvProgramTimeSlot { + width: 80px; + vertical-align: middle; + font-weight: bold; + color: #fff; + position: absolute; + top: 0; + left: 0; + bottom: 0; + border-bottom: 1px solid #555; +} + +.tvProgramTimeSlotInner { + padding: .5em; +} + +.tvProgramInfo { + vertical-align: middle; + border-left: 1px solid #555; + padding: .5em .5em; + margin-left: 80px; + border-bottom: 1px solid #555; +} + +.tvProgramName { + color: #fff; + font-weight: bold; + margin-bottom: .5em; +} + +.tvProgramTime { + color: #fff; +} + +.newTvProgram { + color: #E88606; +} + +.liveTvProgram { + color: #64A239; +} + +.sportsProgramInfo { + background-color: #0F2624; + border-bottom: 2px solid #0A7C33; +} + +.newsProgramInfo { + background-color: #211A32; + border-bottom: 2px solid #523378; +} + +.movieProgramInfo { + background-color: #271A21; + border-bottom: 2px solid #A43913; +} + +.childProgramInfo { + background-color: #092345; + border-bottom: 2px solid #0B487D; +} + +.tvProgram:hover, .tvProgram:hover .tvProgramInfo { + background-color: #4d90fe; +} diff --git a/dashboard-ui/edititemmetadata.html b/dashboard-ui/edititemmetadata.html index f5442e784c..b61acab55e 100644 --- a/dashboard-ui/edititemmetadata.html +++ b/dashboard-ui/edititemmetadata.html @@ -21,7 +21,7 @@ Images -
+
@@ -393,7 +393,7 @@
diff --git a/dashboard-ui/itembynamedetails.html b/dashboard-ui/itembynamedetails.html index 57086c44a9..b057ee5fae 100644 --- a/dashboard-ui/itembynamedetails.html +++ b/dashboard-ui/itembynamedetails.html @@ -119,7 +119,7 @@
-
+
diff --git a/dashboard-ui/itemdetails.html b/dashboard-ui/itemdetails.html index 1f353a065b..d557e4f9c8 100644 --- a/dashboard-ui/itemdetails.html +++ b/dashboard-ui/itemdetails.html @@ -101,13 +101,13 @@ Studios -
+
- diff --git a/dashboard-ui/livetvchannel.html b/dashboard-ui/livetvchannel.html index bc16e7ddc8..791ef9504d 100644 --- a/dashboard-ui/livetvchannel.html +++ b/dashboard-ui/livetvchannel.html @@ -16,7 +16,7 @@
+
@@ -121,7 +121,6 @@

-

- '; - var minutes = recording.DurationMs / 60000; + var minutes = recording.RunTimeTicks / 600000000; - html += ''; + minutes = minutes || 1; + + html += ''; html += ''; diff --git a/dashboard-ui/scripts/livetvtimers.js b/dashboard-ui/scripts/livetvtimers.js index 63b63f82a8..ae9c94f6d1 100644 --- a/dashboard-ui/scripts/livetvtimers.js +++ b/dashboard-ui/scripts/livetvtimers.js @@ -74,9 +74,11 @@ html += ''; - var minutes = timer.DurationMs / 60000; + var minutes = timer.RunTimeTicks / 600000000; - html += ''; + minutes = minutes || 1; + + html += ''; html += '
+
@@ -44,10 +44,7 @@
-
- Programs -
-
+
diff --git a/dashboard-ui/livetvprogram.html b/dashboard-ui/livetvprogram.html new file mode 100644 index 0000000000..16a3c051fc --- /dev/null +++ b/dashboard-ui/livetvprogram.html @@ -0,0 +1,65 @@ + + + + Media Browser + + +
+
+ Guide + Channels + Recordings + Schedule + Series +
+
+
+ + + + + +
+
+ 		+

+

+

+ + +

+

+

+
+
+
+
+ + + + + +
+
+
+ +
+
+ Details +
+
+ +

+

+

+
+
+
+
+
+ + diff --git a/dashboard-ui/livetvrecording.html b/dashboard-ui/livetvrecording.html index da81bd50b2..b3e0ebbb0f 100644 --- a/dashboard-ui/livetvrecording.html +++ b/dashboard-ui/livetvrecording.html @@ -16,7 +16,7 @@
-
+
diff --git a/dashboard-ui/livetvseriestimer.html b/dashboard-ui/livetvseriestimer.html index b4e756c6a3..a92584990b 100644 --- a/dashboard-ui/livetvseriestimer.html +++ b/dashboard-ui/livetvseriestimer.html @@ -13,7 +13,7 @@ Series
- +

@@ -108,7 +108,7 @@

diff --git a/dashboard-ui/livetvtimer.html b/dashboard-ui/livetvtimer.html index 1c41c4d118..9d07401dda 100644 --- a/dashboard-ui/livetvtimer.html +++ b/dashboard-ui/livetvtimer.html @@ -13,7 +13,7 @@ Series
-
+

@@ -74,7 +74,7 @@

diff --git a/dashboard-ui/scripts/Itemdetailpage.js b/dashboard-ui/scripts/Itemdetailpage.js index 8dfe86d5a8..233cc33296 100644 --- a/dashboard-ui/scripts/Itemdetailpage.js +++ b/dashboard-ui/scripts/Itemdetailpage.js @@ -288,7 +288,7 @@ $('#players', page).hide(); } - if (item.Artists && item.Artists.length) { + if (item.Artists && item.Artists.length && item.Type != "MusicAlbum") { $('#artist', page).show().html(getArtistLinksHtml(item.Artists)).trigger('create'); } else { $('#artist', page).hide(); diff --git a/dashboard-ui/scripts/librarybrowser.js b/dashboard-ui/scripts/librarybrowser.js index 87a6e50e79..ebe61dab12 100644 --- a/dashboard-ui/scripts/librarybrowser.js +++ b/dashboard-ui/scripts/librarybrowser.js @@ -2043,24 +2043,16 @@ if (item.Type == "Audio") { miscInfo.push(Dashboard.getDisplayTime(item.RunTimeTicks)); + } else { minutes = item.RunTimeTicks / 600000000; minutes = minutes || 1; - miscInfo.push(minutes.toFixed(0) + "min"); + miscInfo.push(Math.round(minutes) + "min"); } } - if (item.DurationMs) { - - minutes = item.DurationMs / 60000; - - minutes = minutes || 1; - - miscInfo.push(minutes.toFixed(0) + "min"); - } - if (item.OfficialRating && item.Type !== "Season" && item.Type !== "Episode") { miscInfo.push(item.OfficialRating); } @@ -2086,17 +2078,13 @@ renderOverview: function (elem, item) { - if (item.Overview || item.OverviewHtml) { - var overview = item.OverviewHtml || item.Overview; + var overview = item.OverviewHtml || item.Overview || ''; - elem.html(overview).show().trigger('create'); + elem.html(overview).show().trigger('create'); - $('a', elem).each(function () { - $(this).attr("target", "_blank"); - }); - } else { - elem.hide(); - } + $('a', elem).each(function () { + $(this).attr("target", "_blank"); + }); }, diff --git a/dashboard-ui/scripts/livetvchannel.js b/dashboard-ui/scripts/livetvchannel.js index 6f5b17c7da..5036ca65ad 100644 --- a/dashboard-ui/scripts/livetvchannel.js +++ b/dashboard-ui/scripts/livetvchannel.js @@ -15,85 +15,139 @@ var html = ''; - var cssClass = "detailTable"; + //var cssClass = "detailTable"; - html += '
'; + //html += '
'; - html += ''; + //html += ''; - html += ''; - html += ''; - html += ''; - html += ''; - html += ''; - html += ''; + //html += ''; + //html += ''; + //html += ''; + //html += ''; + //html += ''; - html += ''; + //html += ''; + + var currentIndexValue; for (var i = 0, length = result.Items.length; i < length; i++) { var program = result.Items[i]; - html += ''; - - html += ''; - var startDate = program.StartDate; + var startDateText = ''; try { startDate = parseISO8601Date(startDate, { toLocal: true }); + startDateText = LibraryBrowser.getFutureDateText(startDate); } catch (err) { } - html += ''; + if (startDateText != currentIndexValue) { - html += ''; - - html += ''; - - html += ''; + html += ''; - html += ''; + html += '
'; + html += '
' + LiveTvHelpers.getDisplayTime(startDate) + '
'; + html += '
'; - html += ''; + var cssClass = "tvProgramInfo"; + + if (program.IsKids) { + cssClass += " childProgramInfo"; + } + else if (program.IsSports) { + cssClass += " sportsProgramInfo"; + } + else if (program.IsNews) { + cssClass += " newsProgramInfo"; + } + else if (program.IsMovie) { + cssClass += " movieProgramInfo"; + } + + html += '
'; + + html += '
' + program.Name + '
'; + + html += '
'; + + if (program.IsLive) { + html += 'LIVE  '; + } + else if (program.IsPremiere) { + html += 'PREMIERE  '; + } + else if (program.IsSeries && !program.IsRepeat) { + html += 'NEW  '; + } + + var minutes = program.RunTimeTicks / 600000000; + + minutes = Math.round(minutes || 1) + ' min'; + + if (program.EpisodeTitle) { + + html += program.EpisodeTitle + '  (' + minutes + ')'; + } else { + html += minutes; + } + + html += '
'; + html += '
'; + + //html += ''; + + //html += ''; + + //var startDate = program.StartDate; + + //try { + + // startDate = parseISO8601Date(startDate, { toLocal: true }); + + //} catch (err) { + + //} + + //html += ''; + + //html += ''; + + //html += ''; + + //html += ''; + + html += ''; } - html += '
 DateStartEndNameGenre DateStartEndName
'; - - if (program.RecordingId) { - html += ''; - } else { - html += 'Record'; - } - - html += '' + startDate.toLocaleDateString() + '' + LiveTvHelpers.getDisplayTime(program.StartDate) + '' + LiveTvHelpers.getDisplayTime(program.EndDate) + ''; - - if (program.Name) { - //html += ''; - html += program.Name; - //html += ''; + html += '

' + startDateText + '

'; + currentIndexValue = startDateText; } - html += '		' + program.Genres.join(' / ') + '
'; + + //if (program.RecordingId) { + // html += ''; + //} else { + // html += 'Record'; + //} + + //html += '' + startDate.toLocaleDateString() + '' + LiveTvHelpers.getDisplayTime(program.StartDate) + '' + LiveTvHelpers.getDisplayTime(program.EndDate) + ''; + + //if (program.Name) { + // //html += ''; + // html += program.Name; + // //html += ''; + //} + + //html += '
'; + //html += '
'; - var elem = $('#programList', page).html(html).trigger('create'); - - $('.btnCancelRecording', elem).on('click', function () { - - var recordingId = this.getAttribute('data-recordingid'); - - cancelRecording(page, recordingId); - }); - - $('.btnScheduleRecording', elem).on('click', function () { - - var recordingId = this.getAttribute('data-recordingid'); - - scheduleRecording(page, recordingId); - }); + $('#programList', page).html(html).trigger('create'); } function loadPrograms(page) { @@ -165,17 +219,19 @@ getDisplayTime: function (date) { - try { + if ((typeof date).toString().toLowerCase() === 'string') { + try { - date = parseISO8601Date(date, { toLocal: true }); + date = parseISO8601Date(date, { toLocal: true }); - } catch (err) { - return date; + } catch (err) { + return date; + } } date = date.toLocaleTimeString(); - date = date.replace('0:00', '0'); + date = date.replace('0:00', '0').replace(':00 ', '').replace(' ', ''); return date; } diff --git a/dashboard-ui/scripts/livetvprogram.js b/dashboard-ui/scripts/livetvprogram.js new file mode 100644 index 0000000000..6173076c75 --- /dev/null +++ b/dashboard-ui/scripts/livetvprogram.js @@ -0,0 +1,85 @@ +(function ($, document, apiClient) { + + var currentItem; + + function reload(page) { + + Dashboard.showLoadingMsg(); + + ApiClient.getLiveTvProgram(getParameterByName('id'), Dashboard.getCurrentUserId()).done(function (item) { + + var context = 'livetv'; + currentItem = item; + + var name = item.Name; + + $('#itemImage', page).html(LibraryBrowser.getDetailImageHtml(item)); + + Dashboard.setPageTitle(name); + + $('.itemName', page).html(name); + $('.itemChannelNumber', page).html('Channel:   ' + item.ChannelName + '').trigger('create'); + + if (item.EpisodeTitle) { + $('.itemEpisodeName', page).html('Episode:   ' + item.EpisodeTitle); + } else { + $('.itemEpisodeName', page).html(''); + } + + if (item.CommunityRating) { + $('.itemCommunityRating', page).html(LibraryBrowser.getRatingHtml(item)).show(); + } else { + $('.itemCommunityRating', page).hide(); + } + + $('.userDataIcons', page).html(LibraryBrowser.getUserDataIconsHtml(item)); + + LibraryBrowser.renderGenres($('.itemGenres', page), item, context); + LibraryBrowser.renderOverview($('.itemOverview', page), item); + $('.itemMiscInfo', page).html(LibraryBrowser.getMiscInfoHtml(item)); + + if (ApiClient.isWebSocketOpen()) { + + var vals = [item.Type, item.Id, item.Name]; + + vals.push('livetv'); + + ApiClient.sendWebSocketMessage("Context", vals.join('|')); + } + + if (MediaPlayer.canPlay(item)) { + $('#playButtonContainer', page).show(); + } else { + $('#playButtonContainer', page).hide(); + } + + Dashboard.getCurrentUser().done(function (user) { + + if (user.Configuration.IsAdministrator && item.LocationType !== "Offline") { + $('#editButtonContainer', page).show(); + } else { + $('#editButtonContainer', page).hide(); + } + + }); + + Dashboard.hideLoadingMsg(); + }); + } + + $(document).on('pageinit', "#liveTvProgramPage", function () { + + var page = this; + + }).on('pageshow', "#liveTvProgramPage", function () { + + var page = this; + + reload(page); + + }).on('pagehide', "#liveTvProgramPage", function () { + + currentItem = null; + }); + +})(jQuery, document, ApiClient); \ No newline at end of file diff --git a/dashboard-ui/scripts/livetvrecordings.js b/dashboard-ui/scripts/livetvrecordings.js index dc31d57456..cb8969031d 100644 --- a/dashboard-ui/scripts/livetvrecordings.js +++ b/dashboard-ui/scripts/livetvrecordings.js @@ -59,9 +59,11 @@ html += '
' + LiveTvHelpers.getDisplayTime(recording.StartDate) + '' + minutes.toFixed(0) + ' mins' + Math.round(minutes) + 'min' + (recording.Status || '') + '' + LiveTvHelpers.getDisplayTime(timer.StartDate) + '' + minutes.toFixed(0) + ' mins' + Math.round(minutes) + 'min';