diff --git a/dashboard-ui/css/livetv.css b/dashboard-ui/css/livetv.css index fbcbd88d37..45924cb53a 100644 --- a/dashboard-ui/css/livetv.css +++ b/dashboard-ui/css/livetv.css @@ -91,8 +91,8 @@ .timerCircle { display: inline-block; - width: 16px; - height: 16px; + width: 12px; + height: 12px; border-radius: 50%; background: #cc0000; vertical-align: top; @@ -103,7 +103,7 @@ .seriesTimerCircle { position: relative; margin-left: 0; - left: 29px; + left: 21px; opacity: .3; } @@ -118,7 +118,7 @@ .seriesTimerCircle + .seriesTimerCircle + .seriesTimerCircle { opacity: 1; - left: -29px; + left: -21px; } .channelImageContainer .itemDetailImage { @@ -184,8 +184,16 @@ .channelHeaderCellInner { padding: .5em .5em; + display: block; + text-decoration: none; + font-weight: normal!important; + color: #fff!important; } + .channelHeaderCellInner:hover { + background-color: #38c; + } + .channelList { overflow-y: hidden; overflow-x: hidden; @@ -212,6 +220,18 @@ overflow: hidden; width: 100%; top: 0; + display: block; + text-decoration: none; + font-weight: normal!important; + color: #fff!important; +} + +.timeslotCellInnerWithProgram { + z-index: 9999; +} + +.timeslotCellInnerWithProgram:hover { + background-color: #38c; } .timeslotHeaders, .programGrid { @@ -237,6 +257,9 @@ .guideProgramTime { padding: 0 .5em .35em; } +.plainProgramInfo { + background-color: #252525; +} @media (max-width: 600px) { diff --git a/dashboard-ui/livetvchannel.html b/dashboard-ui/livetvchannel.html index e5dbb2469c..d092b23452 100644 --- a/dashboard-ui/livetvchannel.html +++ b/dashboard-ui/livetvchannel.html @@ -6,6 +6,7 @@
+ Suggested Guide Channels Recordings diff --git a/dashboard-ui/livetvchannels.html b/dashboard-ui/livetvchannels.html index 3899665fe7..a342b5c132 100644 --- a/dashboard-ui/livetvchannels.html +++ b/dashboard-ui/livetvchannels.html @@ -6,6 +6,7 @@
+ Suggested Guide Channels Recordings diff --git a/dashboard-ui/livetvguide.html b/dashboard-ui/livetvguide.html index 7af4d1ee39..bb9a328286 100644 --- a/dashboard-ui/livetvguide.html +++ b/dashboard-ui/livetvguide.html @@ -6,6 +6,7 @@
+ Suggested Guide Channels Recordings diff --git a/dashboard-ui/livetvnewrecording.html b/dashboard-ui/livetvnewrecording.html index 603e05a70f..7f40155cea 100644 --- a/dashboard-ui/livetvnewrecording.html +++ b/dashboard-ui/livetvnewrecording.html @@ -6,6 +6,7 @@
+ Suggested Guide Channels Recordings diff --git a/dashboard-ui/livetvprogram.html b/dashboard-ui/livetvprogram.html index c3a29a2150..2a1908e7a8 100644 --- a/dashboard-ui/livetvprogram.html +++ b/dashboard-ui/livetvprogram.html @@ -6,6 +6,7 @@
+ Suggested Guide Channels Recordings diff --git a/dashboard-ui/livetvrecording.html b/dashboard-ui/livetvrecording.html index 2ebfb3d3b2..7b7d2106fd 100644 --- a/dashboard-ui/livetvrecording.html +++ b/dashboard-ui/livetvrecording.html @@ -6,6 +6,7 @@
+ Suggested Guide Channels Recordings diff --git a/dashboard-ui/livetvrecordinglist.html b/dashboard-ui/livetvrecordinglist.html index fff562fd34..ba72438e22 100644 --- a/dashboard-ui/livetvrecordinglist.html +++ b/dashboard-ui/livetvrecordinglist.html @@ -6,6 +6,7 @@
+ Suggested Guide Channels Recordings diff --git a/dashboard-ui/livetvrecordings.html b/dashboard-ui/livetvrecordings.html index 47b801c6d4..40ad897cd1 100644 --- a/dashboard-ui/livetvrecordings.html +++ b/dashboard-ui/livetvrecordings.html @@ -6,6 +6,7 @@
+ Suggested Guide Channels Recordings diff --git a/dashboard-ui/livetvseriestimer.html b/dashboard-ui/livetvseriestimer.html index 509b85937b..b8cc852350 100644 --- a/dashboard-ui/livetvseriestimer.html +++ b/dashboard-ui/livetvseriestimer.html @@ -6,6 +6,7 @@
+ Suggested Guide Channels Recordings diff --git a/dashboard-ui/livetvseriestimers.html b/dashboard-ui/livetvseriestimers.html index 69c66bf770..2171c3b2ab 100644 --- a/dashboard-ui/livetvseriestimers.html +++ b/dashboard-ui/livetvseriestimers.html @@ -6,6 +6,7 @@
+ Suggested Guide Channels Recordings diff --git a/dashboard-ui/livetvsuggested.html b/dashboard-ui/livetvsuggested.html new file mode 100644 index 0000000000..cf4904df8c --- /dev/null +++ b/dashboard-ui/livetvsuggested.html @@ -0,0 +1,20 @@ + + + + Media Browser + + +
+
+ Suggested + Guide + Channels + Recordings + Scheduled + Series +
+
+
+
+ + diff --git a/dashboard-ui/livetvtimer.html b/dashboard-ui/livetvtimer.html index 9cc8e30e45..be929bbb30 100644 --- a/dashboard-ui/livetvtimer.html +++ b/dashboard-ui/livetvtimer.html @@ -6,6 +6,7 @@
+ Suggested Guide Channels Recordings diff --git a/dashboard-ui/livetvtimers.html b/dashboard-ui/livetvtimers.html index 94c515573e..e8119b0208 100644 --- a/dashboard-ui/livetvtimers.html +++ b/dashboard-ui/livetvtimers.html @@ -6,6 +6,7 @@
+ Suggested Guide Channels Recordings diff --git a/dashboard-ui/scripts/librarymenu.js b/dashboard-ui/scripts/librarymenu.js index eb11e6fad6..e4a87fde78 100644 --- a/dashboard-ui/scripts/librarymenu.js +++ b/dashboard-ui/scripts/librarymenu.js @@ -75,7 +75,7 @@ } if (liveTvServices.length) { - html += '' + (view == 'livetv' ? selectedHtml : '') + 'Live TV'; + html += '' + (view == 'livetv' ? selectedHtml : '') + 'Live TV'; } if (counts.SongCount || counts.MusicVideoCount) { @@ -149,6 +149,7 @@ if (liveTvServices.length) { html += getCollapsibleHtml('Live TV', [ + { text: 'Suggested', href: 'livetvsuggested.html' }, { text: 'Guide', href: 'livetvguide.html' }, { text: 'Channels', href: 'livetvchannels.html' }, { text: 'Recordings', href: 'livetvrecordings.html' }, diff --git a/dashboard-ui/scripts/livetvguide.js b/dashboard-ui/scripts/livetvguide.js index ca0da5d109..68433bd22d 100644 --- a/dashboard-ui/scripts/livetvguide.js +++ b/dashboard-ui/scripts/livetvguide.js @@ -1,7 +1,11 @@ (function ($, document, apiClient) { // 30 mins - var cellDurationMs = 30 * 60 * 1000; + var cellCurationMinutes = 30; + var cellDurationMs = cellCurationMinutes * 60 * 1000; + + var gridLocalStartDateMs; + var gridLocalEndDateMs; function formatDigit(i) { return i < 10 ? "0" + i : i; @@ -19,21 +23,17 @@ function normalizeDateToTimeslot(date) { - var minutesOffset = date.getMinutes() - 30; + var minutesOffset = date.getMinutes() - cellCurationMinutes; if (minutesOffset >= 0) { - date.setTime(date.getTime() - (minutesOffset * 60 * 1000)); + date.setHours(date.getHours(), cellCurationMinutes, 0, 0); } else { - date.setTime(date.getTime() - (date.getMinutes() * 60 * 1000)); + date.setHours(date.getHours(), 0, 0, 0); } - date.setTime(date.getTime() - (date.getSeconds() * 1000)); - - date.setHours(date.getHours(), date.getMinutes(), 0, 0); - return date; } @@ -136,6 +136,29 @@ return null; } + function getProgramWidth(program) { + + var end = Math.min(gridLocalEndDateMs, program.EndDateLocal.getTime()); + var start = Math.max(gridLocalStartDateMs, program.StartDateLocal.getTime()); + + var ms = end - start; + + var width = 100 * ms / cellDurationMs; + + // Round to the nearest cell + var overlap = width % 100; + + if (overlap) { + width = width - overlap + 100; + } + + if (width > 300) { + width += (width / 100) - 3; + } + + return width; + } + function getChannelProgramsHtml(page, date, channel, programs) { var html = ''; @@ -150,7 +173,7 @@ var programIndex = 0; var cellIndex = 0; - + while (date.getDate() == dateNumber) { // Add 30 mins @@ -165,31 +188,51 @@ html += '
'; + var cellTagName; + var href; var cssClass = "timeslotCellInner"; + var style; if (program) { if (program.IsKids) { cssClass += " childProgramInfo"; - } - else if (program.IsSports) { + } else if (program.IsSports) { cssClass += " sportsProgramInfo"; - } - else if (program.IsNews) { + } else if (program.IsNews) { cssClass += " newsProgramInfo"; - } - else if (program.IsMovie) { + } else if (program.IsMovie) { cssClass += " movieProgramInfo"; } + else { + cssClass += " plainProgramInfo"; + } + + cssClass += " timeslotCellInnerWithProgram"; + + cellTagName = "a"; + href = ' href="livetvprogram.html?id=' + program.Id + '"'; + + var width = getProgramWidth(program); + + if (width && width != 100) { + style = ' style="width:' + width + '%;"'; + } else { + style = ''; + } + } else { + cellTagName = "div"; + href = ''; + style = ''; } - html += '
'; - + html += '<' + cellTagName + ' class="' + cssClass + '"' + href + style + '>'; + if (program) { html += '
'; html += program.Name; html += '
'; - + html += '
'; if (program.IsLive) { @@ -206,13 +249,23 @@ html += ' - '; html += LiveTvHelpers.getDisplayTime(program.EndDateLocal); + if (program.SeriesTimerId) { + html += '
'; + html += '
'; + html += '
'; + } + else if (program.TimerId) { + + html += '
'; + } + html += '
'; } else { html += ' '; } - html += '
'; + html += ''; html += '
'; date = cellEndDate; @@ -245,9 +298,10 @@ html += '
'; - html += '
'; + html += '
'; + html += ''; html += channel.Name + '
' + channel.Number; - html += '
'; + html += ''; html += '
'; html += '
'; @@ -286,6 +340,13 @@ currentDate = normalizeDateToTimeslot(new Date()); + gridLocalStartDateMs = currentDate.getTime(); + + var clone = new Date(gridLocalStartDateMs); + clone.setHours(0, 0, 0, 0); + clone.setDate(clone.getDate() + 1); + gridLocalEndDateMs = clone.getTime() - 1; + reloadGuide(page); }); diff --git a/dashboard-ui/scripts/livetvsuggested.js b/dashboard-ui/scripts/livetvsuggested.js new file mode 100644 index 0000000000..5f282702bb --- /dev/null +++ b/dashboard-ui/scripts/livetvsuggested.js @@ -0,0 +1 @@ + \ No newline at end of file