mirror of
https://github.com/jellyfin/jellyfin-web
synced 2025-03-30 19:56:21 +00:00
update latest channel content display
This commit is contained in:
Luke Pulverenti
parent
0c7a62c3d9
commit
d12c2644e7
9 changed files with 92 additions and 64 deletions
|
|
@ -15,10 +15,7 @@
|
|||
<table class="ehsContent homeEhsContent">
|
||||
<tr>
|
||||
<td>
|
||||
<div>
|
||||
<h1 class="listHeader firstListHeader">${HeaderLatestChannelItems}</h1>
|
||||
</div>
|
||||
<div id="items" class="itemsContainer"></div>
|
||||
<div class="items"></div>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
|
|
|||
|
|
@ -31,7 +31,6 @@
|
|||
background-size: cover;
|
||||
}
|
||||
|
||||
|
||||
.libraryPage .header {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
|
@ -75,6 +74,17 @@
|
|||
margin-top: 1em;
|
||||
}
|
||||
|
||||
@media all and (min-width: 900px) {
|
||||
|
||||
.ehsContent {
|
||||
max-width: 880px;
|
||||
}
|
||||
|
||||
.squareEhsContent {
|
||||
max-width: 750px;
|
||||
}
|
||||
}
|
||||
|
||||
@media all and (min-width: 1000px) {
|
||||
|
||||
.ehsContent {
|
||||
|
|
|
|||
|
|
@ -42,9 +42,9 @@
|
|||
position: relative;
|
||||
}
|
||||
|
||||
#scenesContent .posterItemImage {
|
||||
#scenesContent .posterItemImage {
|
||||
background-position-y: center;
|
||||
}
|
||||
}
|
||||
|
||||
.posterItem:hover .posterItemImage {
|
||||
-moz-box-shadow: 0 0 12px 7px #38c;
|
||||
|
|
@ -126,11 +126,11 @@
|
|||
}
|
||||
|
||||
.squarePosterItem {
|
||||
width: 148px;
|
||||
width: 140px;
|
||||
}
|
||||
|
||||
.squarePosterItem .posterItemImage {
|
||||
height: 148px;
|
||||
height: 140px;
|
||||
}
|
||||
|
||||
.storeReviewCount {
|
||||
|
|
@ -343,31 +343,23 @@
|
|||
}
|
||||
|
||||
.miniBackdropPosterItem {
|
||||
width: 180px;
|
||||
width: 168px;
|
||||
}
|
||||
|
||||
.miniBackdropPosterItem .posterItemImage {
|
||||
height: 101.25px;
|
||||
height: 94.5px;
|
||||
}
|
||||
}
|
||||
|
||||
@media all and (min-width: 600px) {
|
||||
|
||||
|
||||
.squarePosterItem {
|
||||
width: 170px;
|
||||
}
|
||||
|
||||
.squarePosterItem .posterItemImage {
|
||||
height: 170px;
|
||||
}
|
||||
|
||||
.portraitPosterItem {
|
||||
width: 128px;
|
||||
width: 118px;
|
||||
}
|
||||
|
||||
.portraitPosterItem .posterItemImage {
|
||||
height: 192px;
|
||||
height: 177px;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -407,14 +399,6 @@
|
|||
|
||||
@media all and (min-width: 750px) {
|
||||
|
||||
.portraitPosterItem {
|
||||
width: 118px;
|
||||
}
|
||||
|
||||
.portraitPosterItem .posterItemImage {
|
||||
height: 177px;
|
||||
}
|
||||
|
||||
.bannerPosterItem {
|
||||
width: 330px;
|
||||
}
|
||||
|
|
@ -442,11 +426,11 @@
|
|||
@media all and (min-width: 1200px) {
|
||||
|
||||
.portraitPosterItem {
|
||||
width: 144px;
|
||||
width: 122px;
|
||||
}
|
||||
|
||||
.portraitPosterItem .posterItemImage {
|
||||
height: 216px;
|
||||
height: 183px;
|
||||
}
|
||||
|
||||
.storeReviewCount {
|
||||
|
|
@ -468,14 +452,6 @@
|
|||
width: 19%;
|
||||
}
|
||||
|
||||
.squarePosterItem {
|
||||
width: 167px;
|
||||
}
|
||||
|
||||
.squarePosterItem .posterItemImage {
|
||||
height: 167px;
|
||||
}
|
||||
|
||||
.backdropPosterItem {
|
||||
width: 298px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,21 +1,47 @@
|
|||
(function ($, document) {
|
||||
|
||||
function reloadItems(page) {
|
||||
function reloadFromChannels(page, channels) {
|
||||
|
||||
Dashboard.showLoadingMsg();
|
||||
var channelsHtml = channels.map(function (c) {
|
||||
|
||||
return '<div id="channel' + c.Id + '"></div>';
|
||||
|
||||
}).join('');
|
||||
|
||||
$('.items', page).html(channelsHtml);
|
||||
|
||||
for (var i = 0, length = channels.length; i < length; i++) {
|
||||
|
||||
var channel = channels[i];
|
||||
|
||||
reloadFromChannel(page, channel, i);
|
||||
}
|
||||
}
|
||||
|
||||
function reloadFromChannel(page, channel, index) {
|
||||
|
||||
var options = {
|
||||
|
||||
Limit: 30,
|
||||
Limit: 7,
|
||||
Fields: "PrimaryImageAspectRatio",
|
||||
Filters: "IsUnplayed",
|
||||
UserId: Dashboard.getCurrentUserId()
|
||||
UserId: Dashboard.getCurrentUserId(),
|
||||
ChannelIds: channel.Id
|
||||
};
|
||||
|
||||
$.getJSON(ApiClient.getUrl("Channels/Items/Latest", options)).done(function (result) {
|
||||
|
||||
var html = '';
|
||||
|
||||
if (result.Items.length) {
|
||||
|
||||
var text = Globalize.translate('HeaderLatestFromChannel').replace('{0}', channel.Name);
|
||||
if (index) {
|
||||
html += '<h1 class="listHeader">' + text + '</h1>';
|
||||
} else {
|
||||
html += '<h1 class="listHeader firstListHeader">' + text + '</h1>';
|
||||
}
|
||||
}
|
||||
html += LibraryBrowser.getPosterViewHtml({
|
||||
items: result.Items,
|
||||
shape: 'auto',
|
||||
|
|
@ -25,7 +51,23 @@
|
|||
lazy: true
|
||||
});
|
||||
|
||||
$("#items", page).html(html).trigger('create').createPosterItemMenus();
|
||||
$('#channel' + channel.Id + '', page).html(html).trigger('create').createPosterItemMenus();
|
||||
});
|
||||
}
|
||||
|
||||
function reloadItems(page) {
|
||||
|
||||
Dashboard.showLoadingMsg();
|
||||
|
||||
var options = {
|
||||
|
||||
UserId: Dashboard.getCurrentUserId(),
|
||||
SupportsLatestItems: true
|
||||
};
|
||||
|
||||
$.getJSON(ApiClient.getUrl("Channels", options)).done(function (result) {
|
||||
|
||||
reloadFromChannels(page, result.Items);
|
||||
|
||||
Dashboard.hideLoadingMsg();
|
||||
});
|
||||
|
|
|
|||
|
|
@ -50,14 +50,15 @@
|
|||
|
||||
Dashboard.updateSystemInfo(systemInfo);
|
||||
|
||||
$('#appVersionNumber', page).html('Version ' + systemInfo.Version);
|
||||
$('#appVersionNumber', page).html(Globalize.translate('LabelVersionNumber').replace('{0}', systemInfo.Version));
|
||||
|
||||
var port = systemInfo.HttpServerPortNumber;
|
||||
|
||||
if (port == systemInfo.WebSocketPortNumber) {
|
||||
$('#ports', page).html('Running on port <b>' + port + '</b>');
|
||||
|
||||
$('#ports', page).html(Globalize.translate('LabelRunningOnPort').replace('{0}', '<b>' + port + '</b>'));
|
||||
} else {
|
||||
$('#ports', page).html('Running on ports <b>' + port + '</b> and <b>' + systemInfo.WebSocketPortNumber + '</b>');
|
||||
$('#ports', page).html(Globalize.translate('LabelRunningOnPorts').replace('{0}', '<b>' + port + '</b>').replace('{1}', '<b>' + systemInfo.WebSocketPortNumber + '</b>'));
|
||||
}
|
||||
|
||||
if (systemInfo.CanSelfRestart) {
|
||||
|
|
@ -340,13 +341,13 @@
|
|||
html += '<div>';
|
||||
|
||||
if (session.PlayState.PlayMethod == 'Transcode') {
|
||||
html += 'Transcoding';
|
||||
html += Globalize.translate('LabelPlayMethodTranscoding');
|
||||
}
|
||||
else if (session.PlayState.PlayMethod == 'DirectStream') {
|
||||
html += 'Direct Streaming';
|
||||
html += Globalize.translate('LabelPlayMethodDirectStream');
|
||||
}
|
||||
else if (session.PlayState.PlayMethod == 'DirectPlay') {
|
||||
html += 'Direct Playing';
|
||||
html += Globalize.translate('LabelPlayMethodDirectPlay');
|
||||
}
|
||||
|
||||
html += '</div>';
|
||||
|
|
@ -376,11 +377,11 @@
|
|||
|
||||
if (session.TranscodingInfo.VideoCodec) {
|
||||
|
||||
html += '<div>Video: ' + session.TranscodingInfo.VideoCodec + '</div>';
|
||||
html += '<div>' + Globalize.translate('LabelVideoCodec').replace('{0}', session.TranscodingInfo.VideoCodec) + '</div>';
|
||||
}
|
||||
if (session.TranscodingInfo.AudioCodec && session.TranscodingInfo.AudioCodec != session.TranscodingInfo.Container) {
|
||||
|
||||
html += '<div>Audio: ' + session.TranscodingInfo.AudioCodec + '</div>';
|
||||
html += '<div>' + Globalize.translate('LabelAudioCodec').replace('{0}', session.TranscodingInfo.AudioCodec) + '</div>';
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -707,10 +708,10 @@
|
|||
|
||||
html += "<span style='color:#009F00;margin-left:5px;margin-right:5px;'>" + progress + "%</span>";
|
||||
|
||||
html += '<button type="button" data-icon="stop" data-iconpos="notext" data-inline="true" data-mini="true" onclick="DashboardPage.stopTask(\'' + task.Id + '\');">Stop</button>';
|
||||
html += '<button type="button" data-icon="stop" data-iconpos="notext" data-inline="true" data-mini="true" onclick="DashboardPage.stopTask(\'' + task.Id + '\');">' + Globalize.translate('ButtonStop') + '</button>';
|
||||
}
|
||||
else if (task.State == "Cancelling") {
|
||||
html += '<span style="color:#cc0000;">Stopping</span>';
|
||||
html += '<span style="color:#cc0000;">' + Globalize.translate('LabelStopping') + '</span>';
|
||||
}
|
||||
|
||||
html += '</p>';
|
||||
|
|
@ -730,7 +731,9 @@
|
|||
|
||||
var externalUrl = systemInfo.WanAddress + "/mediabrowser";
|
||||
|
||||
$('.externalUrl', page).html('Remote access: <a href="' + externalUrl + '" target="_blank">' + externalUrl + '</a>').show().trigger('create');
|
||||
var remoteAccessHtml = Globalize.translate('LabelRemoteAccessUrl').replace('{0}', '<a href="' + externalUrl + '" target="_blank">' + externalUrl + '</a>');
|
||||
|
||||
$('.externalUrl', page).html(remoteAccessHtml).show().trigger('create');
|
||||
} else {
|
||||
$('.externalUrl', page).hide();
|
||||
}
|
||||
|
|
|
|||
|
|
@ -187,7 +187,7 @@
|
|||
|
||||
var options = {
|
||||
|
||||
Limit: screenWidth >= 2400 ? 10 : (screenWidth >= 1920 ? 10 : (screenWidth >= 1440 ? 8 : (screenWidth >= 800 ? 8 : 6))),
|
||||
Limit: screenWidth >= 2400 ? 10 : (screenWidth >= 1920 ? 10 : (screenWidth >= 1440 ? 8 : (screenWidth >= 800 ? 7 : 6))),
|
||||
Fields: "PrimaryImageAspectRatio",
|
||||
Filters: "IsUnplayed",
|
||||
UserId: userId
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@
|
|||
SortBy: "DateCreated",
|
||||
SortOrder: "Descending",
|
||||
IncludeItemTypes: "Movie",
|
||||
Limit: screenWidth >= 1920 ? 32 : (screenWidth >= 1440 ? 32 : (screenWidth >= 800 ? 24 : 18)),
|
||||
Limit: screenWidth >= 1920 ? 32 : (screenWidth >= 1440 ? 32 : (screenWidth >= 800 ? 28 : 18)),
|
||||
Recursive: true,
|
||||
Fields: "PrimaryImageAspectRatio",
|
||||
Filters: "IsUnplayed",
|
||||
|
|
|
|||
|
|
@ -79,7 +79,7 @@
|
|||
|
||||
userId: Dashboard.getCurrentUserId(),
|
||||
categoryLimit: screenWidth >= 1200 ? 6 : 3,
|
||||
itemLimit: screenWidth >= 1920 ? 8 : (screenWidth >= 1440 ? 8 : 6),
|
||||
itemLimit: screenWidth >= 1920 ? 8 : (screenWidth >= 1440 ? 8 : 7),
|
||||
Fields: "PrimaryImageAspectRatio"
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@
|
|||
SortBy: "DateCreated",
|
||||
SortOrder: "Descending",
|
||||
IncludeItemTypes: "MusicAlbum",
|
||||
Limit: screenWidth >= 1920 ? 8 : (screenWidth >= 1440 ? 7 : 5),
|
||||
Limit: screenWidth >= 1920 ? 8 : (screenWidth >= 1440 ? 7 : 6),
|
||||
Recursive: true,
|
||||
Fields: "PrimaryImageAspectRatio",
|
||||
ParentId: parentId
|
||||
|
|
@ -36,7 +36,7 @@
|
|||
SortBy: "DateCreated",
|
||||
SortOrder: "Descending",
|
||||
IncludeItemTypes: "Audio",
|
||||
Limit: screenWidth >= 1920 ? 8 : (screenWidth >= 1440 ? 7 : 5),
|
||||
Limit: screenWidth >= 1920 ? 8 : (screenWidth >= 1440 ? 7 : 6),
|
||||
Recursive: true,
|
||||
Fields: "PrimaryImageAspectRatio,AudioInfo",
|
||||
ParentId: parentId
|
||||
|
|
@ -59,7 +59,7 @@
|
|||
SortBy: "DatePlayed",
|
||||
SortOrder: "Descending",
|
||||
IncludeItemTypes: "Audio",
|
||||
Limit: screenWidth >= 1920 ? 8 : (screenWidth >= 1440 ? 7 : 5),
|
||||
Limit: screenWidth >= 1920 ? 8 : (screenWidth >= 1440 ? 7 : 6),
|
||||
Recursive: true,
|
||||
Fields: "PrimaryImageAspectRatio,AudioInfo",
|
||||
Filters: "IsPlayed",
|
||||
|
|
@ -89,7 +89,7 @@
|
|||
SortBy: "PlayCount",
|
||||
SortOrder: "Descending",
|
||||
IncludeItemTypes: "Audio",
|
||||
Limit: screenWidth >= 1920 ? 14 : (screenWidth >= 1440 ? 14 : 10),
|
||||
Limit: screenWidth >= 1920 ? 14 : (screenWidth >= 1440 ? 14 : 12),
|
||||
Recursive: true,
|
||||
Fields: "PrimaryImageAspectRatio,AudioInfo",
|
||||
Filters: "IsPlayed",
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue