mirror of
https://github.com/jellyfin/jellyfin-web
synced 2025-03-30 19:56:21 +00:00
added a grid view to the movie page
This commit is contained in:
parent
92640214f4
commit
2e2c2ee90e
11 changed files with 150 additions and 57 deletions
|
@ -723,26 +723,26 @@
|
|||
|
||||
//played/unplayed
|
||||
if (userData.Played) {
|
||||
html += '<div class="userItemRating"><img class="imgUserItemRating" src="css/images/userdata/played.png" alt="Played" title="Played" onclick="ItemDetailPage.setPlayed();" /></div>';
|
||||
html += '<img class="imgUserItemRating" src="css/images/userdata/played.png" alt="Played" title="Played" onclick="ItemDetailPage.setPlayed();" />';
|
||||
} else {
|
||||
html += '<div class="userItemRating"><img class="imgUserItemRating" src="css/images/userdata/unplayed.png" alt="Played" title="Played" onclick="ItemDetailPage.setPlayed();" /></div>';
|
||||
html += '<img class="imgUserItemRating" src="css/images/userdata/unplayed.png" alt="Played" title="Played" onclick="ItemDetailPage.setPlayed();" />';
|
||||
}
|
||||
|
||||
if (typeof userData.Likes == "undefined") {
|
||||
html += '<div class="userItemRating"><img class="imgUserItemRating" src="css/images/userdata/thumbs_down_off.png" alt="Dislike" title="Dislike" onclick="ItemDetailPage.setDislike();" /></div>';
|
||||
html += '<div class="userItemRating"><img class="imgUserItemRating" src="css/images/userdata/thumbs_up_off.png" alt="Like" title="Like" onclick="ItemDetailPage.setLike();" /></div>';
|
||||
html += '<img class="imgUserItemRating" src="css/images/userdata/thumbs_down_off.png" alt="Dislike" title="Dislike" onclick="ItemDetailPage.setDislike();" />';
|
||||
html += '<img class="imgUserItemRating" src="css/images/userdata/thumbs_up_off.png" alt="Like" title="Like" onclick="ItemDetailPage.setLike();" />';
|
||||
} else if (userData.Likes) {
|
||||
html += '<div class="userItemRating"><img class="imgUserItemRating" src="css/images/userdata/thumbs_down_off.png" alt="Dislike" title="Dislike" onclick="ItemDetailPage.setDislike();" /></div>';
|
||||
html += '<div class="userItemRating"><img class="imgUserItemRating" src="css/images/userdata/thumbs_up_on.png" alt="Liked" title="Like" onclick="ItemDetailPage.clearLike();" /></div>';
|
||||
html += '<img class="imgUserItemRating" src="css/images/userdata/thumbs_down_off.png" alt="Dislike" title="Dislike" onclick="ItemDetailPage.setDislike();" />';
|
||||
html += '<img class="imgUserItemRating" src="css/images/userdata/thumbs_up_on.png" alt="Liked" title="Like" onclick="ItemDetailPage.clearLike();" />';
|
||||
} else {
|
||||
html += '<div class="userItemRating"><img class="imgUserItemRating" src="css/images/userdata/thumbs_down_on.png" alt="Dislike" title="Dislike" onclick="ItemDetailPage.clearLike();" /></div>';
|
||||
html += '<div class="userItemRating"><img class="imgUserItemRating" src="css/images/userdata/thumbs_up_off.png" alt="Like" title="Like" onclick="ItemDetailPage.setLike();" /></div>';
|
||||
html += '<img class="imgUserItemRating" src="css/images/userdata/thumbs_down_on.png" alt="Dislike" title="Dislike" onclick="ItemDetailPage.clearLike();" />';
|
||||
html += '<img class="imgUserItemRating" src="css/images/userdata/thumbs_up_off.png" alt="Like" title="Like" onclick="ItemDetailPage.setLike();" />';
|
||||
}
|
||||
|
||||
if (userData.IsFavorite) {
|
||||
html += '<div class="userItemRating"><img class="imgUserItemRating" src="css/images/userdata/heart_on.png" alt="Favorite" title="Favorite" onclick="ItemDetailPage.setFavorite();" /></div>';
|
||||
html += '<img class="imgUserItemRating" src="css/images/userdata/heart_on.png" alt="Favorite" title="Favorite" onclick="ItemDetailPage.setFavorite();" />';
|
||||
} else {
|
||||
html += '<div class="userItemRating"><img class="imgUserItemRating" src="css/images/userdata/heart_off.png" alt="Favorite" title="Favorite" onclick="ItemDetailPage.setFavorite();" /></div>';
|
||||
html += '<img class="imgUserItemRating" src="css/images/userdata/heart_off.png" alt="Favorite" title="Favorite" onclick="ItemDetailPage.setFavorite();" />';
|
||||
}
|
||||
|
||||
$('#itemRatings', page).html(html);
|
||||
|
|
|
@ -130,20 +130,20 @@
|
|||
var userData = item.UserData || {};
|
||||
|
||||
if (typeof userData.Likes == "undefined") {
|
||||
html += '<div class="userItemRating"><img class="imgUserItemRating" src="css/images/userdata/thumbs_down_off.png" alt="Dislike" title="Dislike" onclick="ItemByNameDetailPage.setDislike();" /></div>';
|
||||
html += '<div class="userItemRating"><img class="imgUserItemRating" src="css/images/userdata/thumbs_up_off.png" alt="Like" title="Like" onclick="ItemByNameDetailPage.setLike();" /></div>';
|
||||
html += '<img class="imgUserItemRating" src="css/images/userdata/thumbs_down_off.png" alt="Dislike" title="Dislike" onclick="ItemDetailPage.setDislike();" />';
|
||||
html += '<img class="imgUserItemRating" src="css/images/userdata/thumbs_up_off.png" alt="Like" title="Like" onclick="ItemDetailPage.setLike();" />';
|
||||
} else if (userData.Likes) {
|
||||
html += '<div class="userItemRating"><img class="imgUserItemRating" src="css/images/userdata/thumbs_down_off.png" alt="Dislike" title="Dislike" onclick="ItemByNameDetailPage.setDislike();" /></div>';
|
||||
html += '<div class="userItemRating"><img class="imgUserItemRating" src="css/images/userdata/thumbs_up_on.png" alt="Liked" title="Like" onclick="ItemByNameDetailPage.clearLike();" /></div>';
|
||||
html += '<img class="imgUserItemRating" src="css/images/userdata/thumbs_down_off.png" alt="Dislike" title="Dislike" onclick="ItemDetailPage.setDislike();" />';
|
||||
html += '<img class="imgUserItemRating" src="css/images/userdata/thumbs_up_on.png" alt="Liked" title="Like" onclick="ItemDetailPage.clearLike();" />';
|
||||
} else {
|
||||
html += '<div class="userItemRating"><img class="imgUserItemRating" src="css/images/userdata/thumbs_down_on.png" alt="Dislike" title="Dislike" onclick="ItemByNameDetailPage.clearLike();" /></div>';
|
||||
html += '<div class="userItemRating"><img class="imgUserItemRating" src="css/images/userdata/thumbs_up_off.png" alt="Like" title="Like" onclick="ItemByNameDetailPage.setLike();" /></div>';
|
||||
html += '<img class="imgUserItemRating" src="css/images/userdata/thumbs_down_on.png" alt="Dislike" title="Dislike" onclick="ItemDetailPage.clearLike();" />';
|
||||
html += '<img class="imgUserItemRating" src="css/images/userdata/thumbs_up_off.png" alt="Like" title="Like" onclick="ItemDetailPage.setLike();" />';
|
||||
}
|
||||
|
||||
if (userData.IsFavorite) {
|
||||
html += '<div class="userItemRating"><img class="imgUserItemRating" src="css/images/userdata/heart_on.png" alt="Favorite" title="Favorite" onclick="ItemByNameDetailPage.setFavorite();" /></div>';
|
||||
html += '<img class="imgUserItemRating" src="css/images/userdata/heart_on.png" alt="Favorite" title="Favorite" onclick="ItemDetailPage.setFavorite();" />';
|
||||
} else {
|
||||
html += '<div class="userItemRating"><img class="imgUserItemRating" src="css/images/userdata/heart_off.png" alt="Favorite" title="Favorite" onclick="ItemByNameDetailPage.setFavorite();" /></div>';
|
||||
html += '<img class="imgUserItemRating" src="css/images/userdata/heart_off.png" alt="Favorite" title="Favorite" onclick="ItemDetailPage.setFavorite();" />';
|
||||
}
|
||||
|
||||
$('#itemRatings', page).html(html);
|
||||
|
|
|
@ -1,5 +1,7 @@
|
|||
(function ($, document) {
|
||||
|
||||
var view = "Poster";
|
||||
|
||||
// The base query options
|
||||
var query = {
|
||||
|
||||
|
@ -7,7 +9,7 @@
|
|||
SortOrder: "Ascending",
|
||||
IncludeItemTypes: "Movie",
|
||||
Recursive: true,
|
||||
Fields: "PrimaryImageAspectRatio"
|
||||
Fields: "PrimaryImageAspectRatio,UserData"
|
||||
};
|
||||
|
||||
function getTableHtml(items) {
|
||||
|
@ -18,11 +20,12 @@
|
|||
|
||||
html += '<tr>';
|
||||
html += '<th> </th>';
|
||||
html += '<th>Name</th>';
|
||||
html += '<th class="thName">Name</th>';
|
||||
html += '<th>Year</th>';
|
||||
html += '<th>Official Rating</th>';
|
||||
html += '<th>Rating</th>';
|
||||
html += '<th>Runtime</th>';
|
||||
html += '<th>Community Rating</th>';
|
||||
html += '<th></th>';
|
||||
html += '</tr>';
|
||||
|
||||
html += '</thead>';
|
||||
|
@ -57,7 +60,7 @@
|
|||
|
||||
html += '<img class="libraryGridImage" src="' + ApiClient.getImageUrl(item.Id, {
|
||||
type: "Primary",
|
||||
height: 150,
|
||||
height: 100,
|
||||
tag: item.ImageTags.Primary
|
||||
}) + '" />';
|
||||
|
||||
|
@ -68,14 +71,48 @@
|
|||
|
||||
html += '</a></td>';
|
||||
|
||||
html += '<td><a href="' + url + '">' + item.Name + '</a></td>';
|
||||
html += '<td class="tdName"><a href="' + url + '">' + item.Name + '</a></td>';
|
||||
|
||||
html += '<td>' + (item.ProductionYear || "") + '</td>';
|
||||
|
||||
html += '<td>' + (item.OfficialRating || "") + '</td>';
|
||||
html += '<td>' + (item.RunTimeTicks || "") + '</td>';
|
||||
|
||||
var minutes = (item.RunTimeTicks || 0) / 600000000;
|
||||
|
||||
minutes = minutes || 1;
|
||||
|
||||
html += '<td>' + parseInt(minutes) + 'min</td>';
|
||||
html += '<td>' + (item.CommunityRating || "") + '</td>';
|
||||
|
||||
html += '<td>';
|
||||
|
||||
var userData = item.UserData || {};
|
||||
|
||||
if (userData.Played) {
|
||||
html += '<img class="imgUserItemRating" src="css/images/userdata/played.png" alt="Played" title="Played" />';
|
||||
} else {
|
||||
html += '<img class="imgUserItemRating" src="css/images/userdata/unplayed.png" alt="Played" title="Played" />';
|
||||
}
|
||||
|
||||
if (typeof userData.Likes == "undefined") {
|
||||
html += '<img class="imgUserItemRating" src="css/images/userdata/thumbs_down_off.png" alt="Dislike" title="Dislike" />';
|
||||
html += '<img class="imgUserItemRating" src="css/images/userdata/thumbs_up_off.png" alt="Like" title="Like" />';
|
||||
} else if (userData.Likes) {
|
||||
html += '<img class="imgUserItemRating" src="css/images/userdata/thumbs_down_off.png" alt="Dislike" title="Dislike" />';
|
||||
html += '<img class="imgUserItemRating" src="css/images/userdata/thumbs_up_on.png" alt="Liked" title="Like" />';
|
||||
} else {
|
||||
html += '<img class="imgUserItemRating" src="css/images/userdata/thumbs_down_on.png" alt="Dislike" title="Dislike" />';
|
||||
html += '<img class="imgUserItemRating" src="css/images/userdata/thumbs_up_off.png" alt="Like" title="Like" />';
|
||||
}
|
||||
|
||||
if (userData.IsFavorite) {
|
||||
html += '<img class="imgUserItemRating" src="css/images/userdata/heart_on.png" alt="Favorite" title="Favorite" />';
|
||||
} else {
|
||||
html += '<img class="imgUserItemRating" src="css/images/userdata/heart_off.png" alt="Favorite" title="Favorite" />';
|
||||
}
|
||||
|
||||
html += '</td>';
|
||||
|
||||
html += '</tr>';
|
||||
return html;
|
||||
}
|
||||
|
@ -86,12 +123,15 @@
|
|||
|
||||
ApiClient.getItems(Dashboard.getCurrentUserId(), query).done(function (result) {
|
||||
|
||||
$('#items', page).html(LibraryBrowser.getPosterViewHtml({
|
||||
|
||||
items: result.Items,
|
||||
useAverageAspectRatio: true
|
||||
|
||||
}))/*.html(getTableHtml(result.Items)).trigger('create')*/;
|
||||
if (view == "Poster") {
|
||||
$('#items', page).html(LibraryBrowser.getPosterViewHtml({
|
||||
items: result.Items,
|
||||
useAverageAspectRatio: true
|
||||
}));
|
||||
}
|
||||
else if (view == "Grid") {
|
||||
$('#items', page).html(getTableHtml(result.Items)).trigger('create');
|
||||
}
|
||||
|
||||
Dashboard.hideLoadingMsg();
|
||||
});
|
||||
|
@ -143,6 +183,13 @@
|
|||
|
||||
reloadItems(page);
|
||||
});
|
||||
|
||||
$('#selectView', this).on('change', function () {
|
||||
|
||||
view = this.value;
|
||||
|
||||
reloadItems(page);
|
||||
});
|
||||
|
||||
}).on('pageshow', "#moviesPage", function () {
|
||||
|
||||
|
|
|
@ -11,7 +11,8 @@
|
|||
IncludeItemTypes: "Movie",
|
||||
Limit: 5,
|
||||
Recursive: true,
|
||||
Fields: "PrimaryImageAspectRatio"
|
||||
Fields: "PrimaryImageAspectRatio",
|
||||
Filters: "IsUnplayed"
|
||||
};
|
||||
|
||||
ApiClient.getItems(Dashboard.getCurrentUserId(), options).done(function (result) {
|
||||
|
@ -50,6 +51,33 @@
|
|||
|
||||
});
|
||||
|
||||
|
||||
options = {
|
||||
|
||||
SortBy: "DateCreated",
|
||||
SortOrder: "Descending",
|
||||
IncludeItemTypes: "Trailer",
|
||||
Limit: 5,
|
||||
Recursive: true,
|
||||
Fields: "PrimaryImageAspectRatio",
|
||||
Filters: "IsUnplayed"
|
||||
};
|
||||
|
||||
ApiClient.getItems(Dashboard.getCurrentUserId(), options).done(function (result) {
|
||||
|
||||
if (result.Items.length) {
|
||||
$('#trailerSection', page).show();
|
||||
} else {
|
||||
$('#trailerSection', page).hide();
|
||||
}
|
||||
|
||||
$('#trailerItems', page).html(LibraryBrowser.getPosterViewHtml({
|
||||
items: result.Items,
|
||||
useAverageAspectRatio: true
|
||||
}));
|
||||
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
|
||||
|
|
|
@ -146,8 +146,6 @@
|
|||
|
||||
startTask: function (id) {
|
||||
|
||||
Dashboard.showLoadingMsg();
|
||||
|
||||
ApiClient.startScheduledTask(id).done(function (result) {
|
||||
|
||||
ScheduledTasksPage.reloadList();
|
||||
|
@ -157,8 +155,6 @@
|
|||
|
||||
stopTask: function (id) {
|
||||
|
||||
Dashboard.showLoadingMsg();
|
||||
|
||||
ApiClient.stopScheduledTask(id).done(function (result) {
|
||||
|
||||
ScheduledTasksPage.reloadList();
|
||||
|
|
|
@ -11,7 +11,8 @@
|
|||
IncludeItemTypes: "Episode",
|
||||
Limit: 6,
|
||||
Recursive: true,
|
||||
Fields: "PrimaryImageAspectRatio,SeriesInfo"
|
||||
Fields: "PrimaryImageAspectRatio,SeriesInfo",
|
||||
Filters: "IsUnplayed"
|
||||
};
|
||||
|
||||
ApiClient.getItems(Dashboard.getCurrentUserId(), options).done(function (result) {
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue