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

live tv updates

Browse Source
This commit is contained in:
Luke Pulverenti 2013-12-20 15:09:49 -05:00
parent 736a8233a3
commit 97a67a7cf8
16 changed files with 397 additions and 117 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
dashboard-ui/css/librarybrowser.css
View File

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

83
dashboard-ui/css/livetv.css Normal file
View File

@ -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;
}

4
dashboard-ui/edititemmetadata.html
View File

@ -21,7 +21,7 @@
<a href="#" data-role="button" id="btnEditImages">Images</a>
</div>
<form id="editItemMetadataForm" class="editMetadataForm" style="margin-top: -20px;">
<form class="editItemMetadataForm editMetadataForm" style="margin-top: -20px;">
<div class="metadataFormFields">
<div>
@ -393,7 +393,7 @@
</div>
</div>
<script type="text/javascript">
$('#editItemMetadataForm').on('submit', EditItemMetadataPage.onSubmit);
$('.editItemMetadataForm').off('submit', EditItemMetadataPage.onSubmit).on('submit', EditItemMetadataPage.onSubmit);
</script>
</div>

2
dashboard-ui/itembynamedetails.html
View File

@ -119,7 +119,7 @@
<div class="itemBackdropContent">
<table class="detailPageContent primaryDetailPageContent">
<tr>
<td style="vertical-align: top; padding: 10px 1em 10px 0;">
<td style="vertical-align: top; padding: 0 1em 0 0;">
<div id="itemImage" class="itemImageContainer"></div>
</td>
<td style="vertical-align: top; padding: 0;">

7
dashboard-ui/itemdetails.html
View File

@ -101,13 +101,13 @@
<a href="gamestudios.html">Studios</a>
</div>
</div>
<div class="ui-bar-c parentName" style="display: none;">
</div>
<div id="itemBackdrop" class="itemBackdrop noBackdrop">
<div class="parentName" style="display: none;">
</div>
<div class="itemBackdropContent">
<table class="detailPageContent primaryDetailPageContent">
<tr>
<td style="vertical-align: top; padding: 10px 1em 10px 0;">
<td style="vertical-align: top; padding: 0 1em 0 0;">
<div class="itemImageContainer">
<div id="itemImage">
</div>
@ -121,7 +121,6 @@
</p>
<p id="artist"></p>
<p class="itemGenres"></p>
<p id="itemTagline" style="font-style: italic;"></p>
<p class="itemOverview"></p>
</td>
</tr>

7
dashboard-ui/livetvchannel.html
View File

@ -16,7 +16,7 @@
<div class="itemBackdropContent">
<table class="detailPageContent primaryDetailPageContent">
<tr>
<td style="vertical-align: top; padding: 10px 1em 10px 0;">
<td style="vertical-align: top; padding: 0 1em 0 0;">
<div id="itemImage" class="itemImageContainer"></div>
</td>
<td style="vertical-align: top; padding: 0;">
@ -44,10 +44,7 @@
<div data-role="content">
<div class="detailPageContent">
<div id="detailSection">
<div class="detailSectionHeader" style="margin-top: 0;">
Programs
</div>
<div class="detailSectionContent" style="padding: 1em 0;">
<div class="detailSectionContent" style="padding: 0 0;">
<div id="programList"></div>
</div>

65
dashboard-ui/livetvprogram.html Normal file
View File

@ -0,0 +1,65 @@
<!DOCTYPE html>
<html>
<head>
<title>Media Browser</title>
</head>
<body>
<div id="liveTvProgramPage" data-role="page" class="page libraryPage" data-theme="a" data-view="livetv">
<div class="libraryViewNav">
<a href="livetvguide.html">Guide</a>
<a href="livetvchannels.html" class="ui-btn-active">Channels</a>
<a href="livetvrecordings.html">Recordings</a>
<a href="livetvtimers.html">Schedule</a>
<a href="livetvseriestimers.html">Series</a>
</div>
<div id="itemBackdrop" class="itemBackdrop noBackdrop">
<div class="itemBackdropContent">
<table class="detailPageContent primaryDetailPageContent">
<tr>
<td style="vertical-align: top; padding: 0 1em 0 0;">
<div id="itemImage" class="itemImageContainer"></div>
</td>
<td style="vertical-align: top; padding: 0;">
<p><span class="itemName inlineItemName"></span><span class="itemMiscInfo" style="display: inline;"></span></p>
<p class="itemEpisodeName"></p>
<p>
<span class="itemCommunityRating"></span>
<span class="userDataIcons"></span>
</p>
<p class="itemGenres"></p>
<p class="itemOverview"></p>
</td>
</tr>
</table>
</div>
</div>
<div class="ui-body-a" style="text-align: center; padding: .25em 0 .5em;">
<span id="playButtonContainer" style="display: none;">
<button id="btnPlay" type="button" data-icon="play" data-inline="true" data-mini="true">Play</button>
</span>
<span>
<button id="btnRemote" type="button" data-icon="hand-up" data-inline="true" data-mini="true">Remote</button>
</span>
<span id="deleteButtonContainer" style="display: none;">
<button id="btnDelete" type="button" data-icon="delete" data-inline="true" data-mini="true">Delete</button>
</span>
</div>
<div data-role="content">
<div class="detailPageContent">
<div id="detailsSection" class="detailSection">
<div class="detailSectionHeader" style="margin-top: 0;">
Details
</div>
<div class="detailSectionContent" style="padding: 0 1em;">
<p class="status"></p>
<p class="itemChannelNumber"></p>
<p class="audio"></p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>

2
dashboard-ui/livetvrecording.html
View File

@ -16,7 +16,7 @@
<div class="itemBackdropContent">
<table class="detailPageContent primaryDetailPageContent">
<tr>
<td style="vertical-align: top; padding: 10px 1em 10px 0;">
<td style="vertical-align: top; padding: 0 1em 0 0;">
<div id="itemImage" class="itemImageContainer"></div>
</td>
<td style="vertical-align: top; padding: 0;">

4
dashboard-ui/livetvseriestimer.html
View File

@ -13,7 +13,7 @@
<a href="livetvseriestimers.html" class="ui-btn-active">Series</a>
</div>
<div data-role="content">
<form id="liveTvSeriesTimerForm" style="margin: 0 auto;">
<form class="liveTvSeriesTimerForm" style="margin: 0 auto;">
<p><span class="itemName inlineItemName"></span></p>
<p>
@ -108,7 +108,7 @@
</form>
</div>
<script type="text/javascript">
$('#liveTvSeriesTimerForm').on('submit', LiveTvSeriesTimerPage.onSubmit);
$('.liveTvSeriesTimerForm').off('submit', LiveTvSeriesTimerPage.onSubmit).on('submit', LiveTvSeriesTimerPage.onSubmit);
</script>
</div>

4
dashboard-ui/livetvtimer.html
View File

@ -13,7 +13,7 @@
<a href="livetvseriestimers.html">Series</a>
</div>
<div data-role="content">
<form id="liveTvTimerForm" style="margin: 0 auto;">
<form class="liveTvTimerForm" style="margin: 0 auto;">
<p><span class="itemName inlineItemName"></span><span class="itemMiscInfo" style="display: inline;"></span></p>
<p class="itemEpisodeName"></p>
<p>
@ -74,7 +74,7 @@
</form>
</div>
<script type="text/javascript">
$('#liveTvTimerForm').on('submit', LiveTvTimerPage.onSubmit);
$('.liveTvTimerForm').off('submit', LiveTvTimerPage.onSubmit).on('submit', LiveTvTimerPage.onSubmit);
</script>
</div>

2
dashboard-ui/scripts/Itemdetailpage.js
View File

@ -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();

26
dashboard-ui/scripts/librarybrowser.js
View File

@ -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");
});
},

170
dashboard-ui/scripts/livetvchannel.js
View File

@ -15,85 +15,139 @@
var html = '';
var cssClass = "detailTable";
//var cssClass = "detailTable";
html += '<div class="detailTableContainer"><table class="' + cssClass + '">';
//html += '<div class="detailTableContainer"><table class="' + cssClass + '">';
html += '<tr>';
//html += '<tr>';
html += '<th>&nbsp;</th>';
html += '<th>Date</th>';
html += '<th>Start</th>';
html += '<th class="tabletColumn">End</th>';
html += '<th>Name</th>';
html += '<th class="desktopColumn">Genre</th>';
//html += '<th>&nbsp;</th>';
//html += '<th>Date</th>';
//html += '<th>Start</th>';
//html += '<th class="tabletColumn">End</th>';
//html += '<th>Name</th>';
html += '</tr>';
//html += '</tr>';
var currentIndexValue;
for (var i = 0, length = result.Items.length; i < length; i++) {
var program = result.Items[i];
html += '<tr>';
html += '<td>';
if (program.RecordingId) {
html += '<button data-recordingid="' + program.RecordingId + '" class="btnCancelRecording" type="button" data-icon="delete" data-inline="true" data-mini="true" data-iconpos="notext">Cancel</button>';
} else {
html += '<a href="livetvnewrecording.html?programid=' + program.Id + '" data-role="button" type="button" data-icon="facetime-video" data-inline="true" data-mini="true" data-theme="b" data-iconpos="notext">Record</a>';
}
html += '</td>';
var startDate = program.StartDate;
var startDateText = '';
try {
startDate = parseISO8601Date(startDate, { toLocal: true });
startDateText = LibraryBrowser.getFutureDateText(startDate);
} catch (err) {
}
html += '<td>' + startDate.toLocaleDateString() + '</td>';
if (startDateText != currentIndexValue) {
html += '<td>' + LiveTvHelpers.getDisplayTime(program.StartDate) + '</td>';
html += '<td class="tabletColumn">' + LiveTvHelpers.getDisplayTime(program.EndDate) + '</td>';
html += '<td>';
if (program.Name) {
//html += '<a href="livetvprogram.html?id=' + program.Id + '">';
html += program.Name;
//html += '</a>';
html += '<h2 class="detailSectionHeader tvProgramSectionHeader">' + startDateText + '</h2>';
currentIndexValue = startDateText;
}
html += '</td>';
html += '<a href="livetvprogram.html?id=' + program.Id + '" class="tvProgram">';
html += '<td class="desktopColumn">' + program.Genres.join(' / ') + '</td>';
html += '<div class="tvProgramTimeSlot">';
html += '<div class="tvProgramTimeSlotInner">' + LiveTvHelpers.getDisplayTime(startDate) + '</div>';
html += '</div>';
html += '</tr>';
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 += '<div class="' + cssClass + '">';
html += '<div class="tvProgramName">' + program.Name + '</div>';
html += '<div class="tvProgramTime">';
if (program.IsLive) {
html += '<span class="liveTvProgram">LIVE&nbsp;&nbsp;</span>';
}
else if (program.IsPremiere) {
html += '<span class="liveTvProgram">PREMIERE&nbsp;&nbsp;</span>';
}
else if (program.IsSeries && !program.IsRepeat) {
html += '<span class="newTvProgram">NEW&nbsp;&nbsp;</span>';
}
var minutes = program.RunTimeTicks / 600000000;
minutes = Math.round(minutes || 1) + ' min';
if (program.EpisodeTitle) {
html += program.EpisodeTitle + '&nbsp;&nbsp;(' + minutes + ')';
} else {
html += minutes;
}
html += '</div>';
html += '</div>';
//html += '<tr>';
//html += '<td>';
//if (program.RecordingId) {
// html += '<button data-recordingid="' + program.RecordingId + '" class="btnCancelRecording" type="button" data-icon="delete" data-inline="true" data-mini="true" data-iconpos="notext">Cancel</button>';
//} else {
// html += '<a href="livetvnewrecording.html?programid=' + program.Id + '" data-role="button" type="button" data-icon="facetime-video" data-inline="true" data-mini="true" data-theme="b" data-iconpos="notext">Record</a>';
//}
//html += '</td>';
//var startDate = program.StartDate;
//try {
// startDate = parseISO8601Date(startDate, { toLocal: true });
//} catch (err) {
//}
//html += '<td>' + startDate.toLocaleDateString() + '</td>';
//html += '<td>' + LiveTvHelpers.getDisplayTime(program.StartDate) + '</td>';
//html += '<td class="tabletColumn">' + LiveTvHelpers.getDisplayTime(program.EndDate) + '</td>';
//html += '<td>';
//if (program.Name) {
// //html += '<a href="livetvprogram.html?id=' + program.Id + '">';
// html += program.Name;
// //html += '</a>';
//}
//html += '</td>';
html += '</a>';
}
html += '</table></div>';
//html += '</table></div>';
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;
}

85
dashboard-ui/scripts/livetvprogram.js Normal file
View File

@ -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:&nbsp;&nbsp;&nbsp;<a href="livetvchannel.html?id=' + item.ChannelId + '">' + item.ChannelName + '</a>').trigger('create');
if (item.EpisodeTitle) {
$('.itemEpisodeName', page).html('Episode:&nbsp;&nbsp;&nbsp;' + 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);

6
dashboard-ui/scripts/livetvrecordings.js
View File

@ -59,9 +59,11 @@
html += '<td>' + LiveTvHelpers.getDisplayTime(recording.StartDate) + '</td>';
var minutes = recording.DurationMs / 60000;
var minutes = recording.RunTimeTicks / 600000000;
html += '<td class="tabletColumn">' + minutes.toFixed(0) + ' mins</td>';
minutes = minutes || 1;
html += '<td class="tabletColumn">' + Math.round(minutes) + 'min</td>';
html += '<td class="tabletColumn">' + (recording.Status || '') + '</td>';

6
dashboard-ui/scripts/livetvtimers.js
View File

@ -74,9 +74,11 @@
html += '<td>' + LiveTvHelpers.getDisplayTime(timer.StartDate) + '</td>';
var minutes = timer.DurationMs / 60000;
var minutes = timer.RunTimeTicks / 600000000;
html += '<td class="tabletColumn">' + minutes.toFixed(0) + ' mins</td>';
minutes = minutes || 1;
html += '<td class="tabletColumn">' + Math.round(minutes) + 'min</td>';
html += '<td class="tabletColumn">';