cotugno/jellyfin-web
2
Fork 0
mirror of https://github.com/jellyfin/jellyfin-web.git synced 2024-11-17 19:08:18 -07:00
Code Issues Packages Projects Releases Wiki Activity

added live tv suggested page

Browse Source
This commit is contained in:
Luke Pulverenti 2014-01-06 11:48:43 -05:00
parent a043f5af6d
commit 08b1008f6a
17 changed files with 144 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
dashboard-ui/css/livetv.css
View File

@ -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) {

1
dashboard-ui/livetvchannel.html
View File

@ -6,6 +6,7 @@
<body>
<div id="liveTvChannelPage" data-role="page" class="page libraryPage" data-theme="b" data-view="livetv">
<div class="libraryViewNav">
<a href="livetvsuggested.html">Suggested</a>
<a href="livetvguide.html">Guide</a>
<a href="livetvchannels.html" class="ui-btn-active">Channels</a>
<a href="livetvrecordings.html">Recordings</a>

1
dashboard-ui/livetvchannels.html
View File

@ -6,6 +6,7 @@
<body>
<div id="liveTvChannelsPage" data-role="page" class="page libraryPage" data-theme="b" data-view="livetv">
<div class="libraryViewNav">
<a href="livetvsuggested.html">Suggested</a>
<a href="livetvguide.html">Guide</a>
<a href="livetvchannels.html" class="ui-btn-active">Channels</a>
<a href="livetvrecordings.html">Recordings</a>

1
dashboard-ui/livetvguide.html
View File

@ -6,6 +6,7 @@
<body>
<div id="liveTvGuidePage" data-role="page" class="page libraryPage" data-theme="b" data-view="livetv">
<div class="libraryViewNav">
<a href="livetvsuggested.html">Suggested</a>
<a href="livetvguide.html" class="ui-btn-active">Guide</a>
<a href="livetvchannels.html">Channels</a>
<a href="livetvrecordings.html">Recordings</a>

1
dashboard-ui/livetvnewrecording.html
View File

@ -6,6 +6,7 @@
<body>
<div id="liveTvNewRecordingPage" data-role="page" class="page libraryPage" data-theme="b" data-view="livetv">
<div class="libraryViewNav">
<a href="livetvsuggested.html">Suggested</a>
<a href="livetvguide.html">Guide</a>
<a href="livetvchannels.html">Channels</a>
<a href="livetvrecordings.html" class="ui-btn-active">Recordings</a>

1
dashboard-ui/livetvprogram.html
View File

@ -6,6 +6,7 @@
<body>
<div id="liveTvProgramPage" data-role="page" class="page libraryPage" data-theme="b" data-view="livetv">
<div class="libraryViewNav">
<a href="livetvsuggested.html">Suggested</a>
<a href="livetvguide.html">Guide</a>
<a href="livetvchannels.html" class="ui-btn-active">Channels</a>
<a href="livetvrecordings.html">Recordings</a>

1
dashboard-ui/livetvrecording.html
View File

@ -6,6 +6,7 @@
<body>
<div id="liveTvRecordingPage" data-role="page" class="page libraryPage" data-theme="b" data-view="livetv">
<div class="libraryViewNav">
<a href="livetvsuggested.html">Suggested</a>
<a href="livetvguide.html">Guide</a>
<a href="livetvchannels.html">Channels</a>
<a href="livetvrecordings.html" class="ui-btn-active">Recordings</a>

1
dashboard-ui/livetvrecordinglist.html
View File

@ -6,6 +6,7 @@
<body>
<div id="liveTvRecordingListPage" data-role="page" class="page libraryPage" data-theme="b" data-view="livetv">
<div class="libraryViewNav">
<a href="livetvsuggested.html">Suggested</a>
<a href="livetvguide.html">Guide</a>
<a href="livetvchannels.html">Channels</a>
<a href="livetvrecordings.html" class="ui-btn-active">Recordings</a>

1
dashboard-ui/livetvrecordings.html
View File

@ -6,6 +6,7 @@
<body>
<div id="liveTvRecordingsPage" data-role="page" class="page libraryPage" data-theme="b" data-view="livetv">
<div class="libraryViewNav">
<a href="livetvsuggested.html">Suggested</a>
<a href="livetvguide.html">Guide</a>
<a href="livetvchannels.html">Channels</a>
<a href="livetvrecordings.html" class="ui-btn-active">Recordings</a>

1
dashboard-ui/livetvseriestimer.html
View File

@ -6,6 +6,7 @@
<body>
<div id="liveTvSeriesTimerPage" data-role="page" class="page libraryPage" data-theme="b" data-view="livetv">
<div class="libraryViewNav">
<a href="livetvsuggested.html">Suggested</a>
<a href="livetvguide.html">Guide</a>
<a href="livetvchannels.html">Channels</a>
<a href="livetvrecordings.html">Recordings</a>

1
dashboard-ui/livetvseriestimers.html
View File

@ -6,6 +6,7 @@
<body>
<div id="liveTvSeriesTimersPage" data-role="page" class="page libraryPage" data-theme="b" data-view="livetv">
<div class="libraryViewNav">
<a href="livetvsuggested.html">Suggested</a>
<a href="livetvguide.html">Guide</a>
<a href="livetvchannels.html">Channels</a>
<a href="livetvrecordings.html">Recordings</a>

20
dashboard-ui/livetvsuggested.html Normal file
View File

@ -0,0 +1,20 @@
<!DOCTYPE html>
<html>
<head>
<title>Media Browser</title>
</head>
<body>
<div id="liveTvSuggestedPage" data-role="page" class="page libraryPage" data-theme="b" data-view="livetv">
<div class="libraryViewNav">
<a href="#" class="ui-btn-active">Suggested</a>
<a href="livetvguide.html">Guide</a>
<a href="livetvchannels.html">Channels</a>
<a href="livetvrecordings.html">Recordings</a>
<a href="livetvtimers.html">Scheduled</a>
<a href="livetvseriestimers.html">Series</a>
</div>
<div data-role="content">
</div>
</div>
</body>
</html>

1
dashboard-ui/livetvtimer.html
View File

@ -6,6 +6,7 @@
<body>
<div id="liveTvTimerPage" data-role="page" class="page libraryPage" data-theme="b" data-view="livetv">
<div class="libraryViewNav">
<a href="livetvsuggested.html">Suggested</a>
<a href="livetvguide.html">Guide</a>
<a href="livetvchannels.html">Channels</a>
<a href="livetvrecordings.html">Recordings</a>

1
dashboard-ui/livetvtimers.html
View File

@ -6,6 +6,7 @@
<body>
<div id="liveTvTimersPage" data-role="page" class="page libraryPage" data-theme="b" data-view="livetv">
<div class="libraryViewNav">
<a href="livetvsuggested.html">Suggested</a>
<a href="livetvguide.html">Guide</a>
<a href="livetvchannels.html">Channels</a>
<a href="livetvrecordings.html">Recordings</a>

3
dashboard-ui/scripts/librarymenu.js
View File

@ -75,7 +75,7 @@
}
if (liveTvServices.length) {
html += '<a class="viewMenuLink viewMenuTextLink desktopViewMenuLink' + (view == 'livetv' ? selectedCssClass : '') + '" href="livetvchannels.html">' + (view == 'livetv' ? selectedHtml : '') + '<span class="viewName">Live TV</span></a>';
html += '<a class="viewMenuLink viewMenuTextLink desktopViewMenuLink' + (view == 'livetv' ? selectedCssClass : '') + '" href="livetvsuggested.html">' + (view == 'livetv' ? selectedHtml : '') + '<span class="viewName">Live TV</span></a>';
}
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' },

103
dashboard-ui/scripts/livetvguide.js
View File

@ -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 += '<div class="timeslotCell">';
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 += '<div class="' + cssClass + '">';
html += '<' + cellTagName + ' class="' + cssClass + '"' + href + style + '>';
if (program) {
html += '<div class="guideProgramName">';
html += program.Name;
html += '</div>';
html += '<div class="guideProgramTime">';
if (program.IsLive) {
@ -206,13 +249,23 @@
html += ' - ';
html += LiveTvHelpers.getDisplayTime(program.EndDateLocal);
if (program.SeriesTimerId) {
html += '<div class="timerCircle seriesTimerCircle"></div>';
html += '<div class="timerCircle seriesTimerCircle"></div>';
html += '<div class="timerCircle seriesTimerCircle"></div>';
}
else if (program.TimerId) {
html += '<div class="timerCircle"></div>';
}
html += '</div>';
} else {
html += '&nbsp;';
}
html += '</div>';
html += '</' + cellTagName + '>';
html += '</div>';
date = cellEndDate;
@ -245,9 +298,10 @@
html += '<div class="channelHeaderCellContainer">';
html += '<div class="channelHeaderCell"><div class="channelHeaderCellInner">';
html += '<div class="channelHeaderCell">';
html += '<a class="channelHeaderCellInner" href="livetvchannel.html?id=' + channel.Id + '">';
html += channel.Name + '<br/>' + channel.Number;
html += '</div>';
html += '</a>';
html += '</div>';
html += '</div>';
@ -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);
});

1
dashboard-ui/scripts/livetvsuggested.js Normal file
View File

@ -0,0 +1 @@