1
0
Fork 0
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:
Luke Pulverenti 2013-04-05 00:15:00 -04:00
parent 92640214f4
commit 2e2c2ee90e
11 changed files with 150 additions and 57 deletions

View file

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

View file

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

View file

@ -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>&nbsp;</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 () {

View file

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

View file

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

View file

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