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:
parent
0c7a62c3d9
commit
d12c2644e7
9 changed files with 92 additions and 64 deletions
|
@ -15,10 +15,7 @@
|
||||||
<table class="ehsContent homeEhsContent">
|
<table class="ehsContent homeEhsContent">
|
||||||
<tr>
|
<tr>
|
||||||
<td>
|
<td>
|
||||||
<div>
|
<div class="items"></div>
|
||||||
<h1 class="listHeader firstListHeader">${HeaderLatestChannelItems}</h1>
|
|
||||||
</div>
|
|
||||||
<div id="items" class="itemsContainer"></div>
|
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
</table>
|
</table>
|
||||||
|
|
|
@ -31,7 +31,6 @@
|
||||||
background-size: cover;
|
background-size: cover;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
.libraryPage .header {
|
.libraryPage .header {
|
||||||
padding-bottom: 0;
|
padding-bottom: 0;
|
||||||
}
|
}
|
||||||
|
@ -75,6 +74,17 @@
|
||||||
margin-top: 1em;
|
margin-top: 1em;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@media all and (min-width: 900px) {
|
||||||
|
|
||||||
|
.ehsContent {
|
||||||
|
max-width: 880px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.squareEhsContent {
|
||||||
|
max-width: 750px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
@media all and (min-width: 1000px) {
|
@media all and (min-width: 1000px) {
|
||||||
|
|
||||||
.ehsContent {
|
.ehsContent {
|
||||||
|
|
|
@ -42,9 +42,9 @@
|
||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
||||||
#scenesContent .posterItemImage {
|
#scenesContent .posterItemImage {
|
||||||
background-position-y: center;
|
background-position-y: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.posterItem:hover .posterItemImage {
|
.posterItem:hover .posterItemImage {
|
||||||
-moz-box-shadow: 0 0 12px 7px #38c;
|
-moz-box-shadow: 0 0 12px 7px #38c;
|
||||||
|
@ -126,11 +126,11 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.squarePosterItem {
|
.squarePosterItem {
|
||||||
width: 148px;
|
width: 140px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.squarePosterItem .posterItemImage {
|
.squarePosterItem .posterItemImage {
|
||||||
height: 148px;
|
height: 140px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.storeReviewCount {
|
.storeReviewCount {
|
||||||
|
@ -343,31 +343,23 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.miniBackdropPosterItem {
|
.miniBackdropPosterItem {
|
||||||
width: 180px;
|
width: 168px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.miniBackdropPosterItem .posterItemImage {
|
.miniBackdropPosterItem .posterItemImage {
|
||||||
height: 101.25px;
|
height: 94.5px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media all and (min-width: 600px) {
|
@media all and (min-width: 600px) {
|
||||||
|
|
||||||
|
|
||||||
.squarePosterItem {
|
|
||||||
width: 170px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.squarePosterItem .posterItemImage {
|
|
||||||
height: 170px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.portraitPosterItem {
|
.portraitPosterItem {
|
||||||
width: 128px;
|
width: 118px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.portraitPosterItem .posterItemImage {
|
.portraitPosterItem .posterItemImage {
|
||||||
height: 192px;
|
height: 177px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -407,14 +399,6 @@
|
||||||
|
|
||||||
@media all and (min-width: 750px) {
|
@media all and (min-width: 750px) {
|
||||||
|
|
||||||
.portraitPosterItem {
|
|
||||||
width: 118px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.portraitPosterItem .posterItemImage {
|
|
||||||
height: 177px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.bannerPosterItem {
|
.bannerPosterItem {
|
||||||
width: 330px;
|
width: 330px;
|
||||||
}
|
}
|
||||||
|
@ -442,11 +426,11 @@
|
||||||
@media all and (min-width: 1200px) {
|
@media all and (min-width: 1200px) {
|
||||||
|
|
||||||
.portraitPosterItem {
|
.portraitPosterItem {
|
||||||
width: 144px;
|
width: 122px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.portraitPosterItem .posterItemImage {
|
.portraitPosterItem .posterItemImage {
|
||||||
height: 216px;
|
height: 183px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.storeReviewCount {
|
.storeReviewCount {
|
||||||
|
@ -468,14 +452,6 @@
|
||||||
width: 19%;
|
width: 19%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.squarePosterItem {
|
|
||||||
width: 167px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.squarePosterItem .posterItemImage {
|
|
||||||
height: 167px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.backdropPosterItem {
|
.backdropPosterItem {
|
||||||
width: 298px;
|
width: 298px;
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,21 +1,47 @@
|
||||||
(function ($, document) {
|
(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 = {
|
var options = {
|
||||||
|
|
||||||
Limit: 30,
|
Limit: 7,
|
||||||
Fields: "PrimaryImageAspectRatio",
|
Fields: "PrimaryImageAspectRatio",
|
||||||
Filters: "IsUnplayed",
|
Filters: "IsUnplayed",
|
||||||
UserId: Dashboard.getCurrentUserId()
|
UserId: Dashboard.getCurrentUserId(),
|
||||||
|
ChannelIds: channel.Id
|
||||||
};
|
};
|
||||||
|
|
||||||
$.getJSON(ApiClient.getUrl("Channels/Items/Latest", options)).done(function (result) {
|
$.getJSON(ApiClient.getUrl("Channels/Items/Latest", options)).done(function (result) {
|
||||||
|
|
||||||
var html = '';
|
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({
|
html += LibraryBrowser.getPosterViewHtml({
|
||||||
items: result.Items,
|
items: result.Items,
|
||||||
shape: 'auto',
|
shape: 'auto',
|
||||||
|
@ -25,8 +51,24 @@
|
||||||
lazy: true
|
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();
|
Dashboard.hideLoadingMsg();
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
|
@ -50,14 +50,15 @@
|
||||||
|
|
||||||
Dashboard.updateSystemInfo(systemInfo);
|
Dashboard.updateSystemInfo(systemInfo);
|
||||||
|
|
||||||
$('#appVersionNumber', page).html('Version ' + systemInfo.Version);
|
$('#appVersionNumber', page).html(Globalize.translate('LabelVersionNumber').replace('{0}', systemInfo.Version));
|
||||||
|
|
||||||
var port = systemInfo.HttpServerPortNumber;
|
var port = systemInfo.HttpServerPortNumber;
|
||||||
|
|
||||||
if (port == systemInfo.WebSocketPortNumber) {
|
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 {
|
} 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) {
|
if (systemInfo.CanSelfRestart) {
|
||||||
|
@ -340,13 +341,13 @@
|
||||||
html += '<div>';
|
html += '<div>';
|
||||||
|
|
||||||
if (session.PlayState.PlayMethod == 'Transcode') {
|
if (session.PlayState.PlayMethod == 'Transcode') {
|
||||||
html += 'Transcoding';
|
html += Globalize.translate('LabelPlayMethodTranscoding');
|
||||||
}
|
}
|
||||||
else if (session.PlayState.PlayMethod == 'DirectStream') {
|
else if (session.PlayState.PlayMethod == 'DirectStream') {
|
||||||
html += 'Direct Streaming';
|
html += Globalize.translate('LabelPlayMethodDirectStream');
|
||||||
}
|
}
|
||||||
else if (session.PlayState.PlayMethod == 'DirectPlay') {
|
else if (session.PlayState.PlayMethod == 'DirectPlay') {
|
||||||
html += 'Direct Playing';
|
html += Globalize.translate('LabelPlayMethodDirectPlay');
|
||||||
}
|
}
|
||||||
|
|
||||||
html += '</div>';
|
html += '</div>';
|
||||||
|
@ -376,11 +377,11 @@
|
||||||
|
|
||||||
if (session.TranscodingInfo.VideoCodec) {
|
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) {
|
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 += "<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") {
|
else if (task.State == "Cancelling") {
|
||||||
html += '<span style="color:#cc0000;">Stopping</span>';
|
html += '<span style="color:#cc0000;">' + Globalize.translate('LabelStopping') + '</span>';
|
||||||
}
|
}
|
||||||
|
|
||||||
html += '</p>';
|
html += '</p>';
|
||||||
|
@ -730,7 +731,9 @@
|
||||||
|
|
||||||
var externalUrl = systemInfo.WanAddress + "/mediabrowser";
|
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 {
|
} else {
|
||||||
$('.externalUrl', page).hide();
|
$('.externalUrl', page).hide();
|
||||||
}
|
}
|
||||||
|
|
|
@ -187,7 +187,7 @@
|
||||||
|
|
||||||
var options = {
|
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",
|
Fields: "PrimaryImageAspectRatio",
|
||||||
Filters: "IsUnplayed",
|
Filters: "IsUnplayed",
|
||||||
UserId: userId
|
UserId: userId
|
||||||
|
|
|
@ -13,7 +13,7 @@
|
||||||
SortBy: "DateCreated",
|
SortBy: "DateCreated",
|
||||||
SortOrder: "Descending",
|
SortOrder: "Descending",
|
||||||
IncludeItemTypes: "Movie",
|
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,
|
Recursive: true,
|
||||||
Fields: "PrimaryImageAspectRatio",
|
Fields: "PrimaryImageAspectRatio",
|
||||||
Filters: "IsUnplayed",
|
Filters: "IsUnplayed",
|
||||||
|
|
|
@ -79,7 +79,7 @@
|
||||||
|
|
||||||
userId: Dashboard.getCurrentUserId(),
|
userId: Dashboard.getCurrentUserId(),
|
||||||
categoryLimit: screenWidth >= 1200 ? 6 : 3,
|
categoryLimit: screenWidth >= 1200 ? 6 : 3,
|
||||||
itemLimit: screenWidth >= 1920 ? 8 : (screenWidth >= 1440 ? 8 : 6),
|
itemLimit: screenWidth >= 1920 ? 8 : (screenWidth >= 1440 ? 8 : 7),
|
||||||
Fields: "PrimaryImageAspectRatio"
|
Fields: "PrimaryImageAspectRatio"
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
|
@ -13,7 +13,7 @@
|
||||||
SortBy: "DateCreated",
|
SortBy: "DateCreated",
|
||||||
SortOrder: "Descending",
|
SortOrder: "Descending",
|
||||||
IncludeItemTypes: "MusicAlbum",
|
IncludeItemTypes: "MusicAlbum",
|
||||||
Limit: screenWidth >= 1920 ? 8 : (screenWidth >= 1440 ? 7 : 5),
|
Limit: screenWidth >= 1920 ? 8 : (screenWidth >= 1440 ? 7 : 6),
|
||||||
Recursive: true,
|
Recursive: true,
|
||||||
Fields: "PrimaryImageAspectRatio",
|
Fields: "PrimaryImageAspectRatio",
|
||||||
ParentId: parentId
|
ParentId: parentId
|
||||||
|
@ -36,7 +36,7 @@
|
||||||
SortBy: "DateCreated",
|
SortBy: "DateCreated",
|
||||||
SortOrder: "Descending",
|
SortOrder: "Descending",
|
||||||
IncludeItemTypes: "Audio",
|
IncludeItemTypes: "Audio",
|
||||||
Limit: screenWidth >= 1920 ? 8 : (screenWidth >= 1440 ? 7 : 5),
|
Limit: screenWidth >= 1920 ? 8 : (screenWidth >= 1440 ? 7 : 6),
|
||||||
Recursive: true,
|
Recursive: true,
|
||||||
Fields: "PrimaryImageAspectRatio,AudioInfo",
|
Fields: "PrimaryImageAspectRatio,AudioInfo",
|
||||||
ParentId: parentId
|
ParentId: parentId
|
||||||
|
@ -59,7 +59,7 @@
|
||||||
SortBy: "DatePlayed",
|
SortBy: "DatePlayed",
|
||||||
SortOrder: "Descending",
|
SortOrder: "Descending",
|
||||||
IncludeItemTypes: "Audio",
|
IncludeItemTypes: "Audio",
|
||||||
Limit: screenWidth >= 1920 ? 8 : (screenWidth >= 1440 ? 7 : 5),
|
Limit: screenWidth >= 1920 ? 8 : (screenWidth >= 1440 ? 7 : 6),
|
||||||
Recursive: true,
|
Recursive: true,
|
||||||
Fields: "PrimaryImageAspectRatio,AudioInfo",
|
Fields: "PrimaryImageAspectRatio,AudioInfo",
|
||||||
Filters: "IsPlayed",
|
Filters: "IsPlayed",
|
||||||
|
@ -89,7 +89,7 @@
|
||||||
SortBy: "PlayCount",
|
SortBy: "PlayCount",
|
||||||
SortOrder: "Descending",
|
SortOrder: "Descending",
|
||||||
IncludeItemTypes: "Audio",
|
IncludeItemTypes: "Audio",
|
||||||
Limit: screenWidth >= 1920 ? 14 : (screenWidth >= 1440 ? 14 : 10),
|
Limit: screenWidth >= 1920 ? 14 : (screenWidth >= 1440 ? 14 : 12),
|
||||||
Recursive: true,
|
Recursive: true,
|
||||||
Fields: "PrimaryImageAspectRatio,AudioInfo",
|
Fields: "PrimaryImageAspectRatio,AudioInfo",
|
||||||
Filters: "IsPlayed",
|
Filters: "IsPlayed",
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue