jellyfin-web/dashboard-ui/scripts/boxset.js

346 lines
9.7 KiB
JavaScript
Raw Normal View History

2013-04-04 21:13:43 -07:00
var BoxsetPage = {
2013-04-04 21:40:42 -07:00
onPageShow: function () {
2013-04-04 21:13:43 -07:00
2013-04-04 21:40:42 -07:00
BoxsetPage.reload();
},
2013-04-04 21:13:43 -07:00
2013-04-04 21:40:42 -07:00
onPageHide: function () {
2013-04-04 21:13:43 -07:00
2013-04-04 21:40:42 -07:00
BoxsetPage.item = null;
},
2013-04-04 21:13:43 -07:00
2013-04-04 21:40:42 -07:00
reload: function () {
var id = getParameterByName('id');
2013-04-04 21:13:43 -07:00
2013-04-04 21:40:42 -07:00
Dashboard.showLoadingMsg();
2013-04-04 21:13:43 -07:00
2013-04-04 21:40:42 -07:00
ApiClient.getItem(Dashboard.getCurrentUserId(), id).done(BoxsetPage.renderItem);
},
2013-04-04 21:13:43 -07:00
2013-04-04 21:40:42 -07:00
renderItem: function (item) {
2013-04-04 21:13:43 -07:00
2013-04-04 21:40:42 -07:00
BoxsetPage.item = item;
2013-04-04 21:13:43 -07:00
2013-04-04 21:40:42 -07:00
var page = $.mobile.activePage;
2013-04-04 21:13:43 -07:00
2013-04-04 21:40:42 -07:00
BoxsetPage.item = item;
2013-04-04 21:13:43 -07:00
2013-04-04 21:40:42 -07:00
var name = item.Name;
2013-04-04 21:13:43 -07:00
2013-04-04 21:40:42 -07:00
if (item.IndexNumber != null) {
name = item.IndexNumber + " - " + name;
}
if (item.ParentIndexNumber != null) {
name = item.ParentIndexNumber + "." + name;
}
2013-04-04 21:13:43 -07:00
2013-04-04 21:40:42 -07:00
Dashboard.setPageTitle(name);
2013-04-04 21:13:43 -07:00
2013-04-04 21:40:42 -07:00
BoxsetPage.renderImage(item);
BoxsetPage.renderOverviewBlock(item);
2013-04-04 21:13:43 -07:00
2013-04-04 21:40:42 -07:00
$('#itemName', page).html(name);
2013-04-04 21:13:43 -07:00
2013-04-04 21:40:42 -07:00
if (item.SeriesName || item.Album) {
var series_name = item.SeriesName || item.Album;
$('#seriesName', page).html(series_name).show();
}
2013-04-04 21:13:43 -07:00
2013-04-04 21:40:42 -07:00
BoxsetPage.renderFav(item);
2013-04-05 11:35:37 -07:00
LibraryBrowser.renderLinks(item);
2013-04-04 21:13:43 -07:00
2013-04-04 21:40:42 -07:00
Dashboard.hideLoadingMsg();
},
2013-04-04 21:13:43 -07:00
2013-04-04 21:40:42 -07:00
renderImage: function (item) {
2013-04-04 21:13:43 -07:00
2013-04-04 21:40:42 -07:00
var page = $.mobile.activePage;
2013-04-04 21:13:43 -07:00
2013-04-04 21:40:42 -07:00
var imageTags = item.ImageTags || {};
2013-04-04 21:13:43 -07:00
2013-04-04 21:40:42 -07:00
var html = '';
2013-04-04 21:13:43 -07:00
2013-04-04 21:40:42 -07:00
var url;
var useBackgroundColor;
2013-04-04 21:13:43 -07:00
2013-04-04 21:40:42 -07:00
if (imageTags.Primary) {
2013-04-04 21:13:43 -07:00
2013-04-04 21:40:42 -07:00
url = ApiClient.getImageUrl(item.Id, {
type: "Primary",
width: 800,
tag: item.ImageTags.Primary
});
}
else if (item.BackdropImageTags && item.BackdropImageTags.length) {
2013-04-04 21:13:43 -07:00
2013-04-04 21:40:42 -07:00
url = ApiClient.getImageUrl(item.Id, {
type: "Backdrop",
width: 800,
tag: item.BackdropImageTags[0]
});
}
else if (imageTags.Thumb) {
2013-04-04 21:13:43 -07:00
2013-04-04 21:40:42 -07:00
url = ApiClient.getImageUrl(item.Id, {
type: "Thumb",
width: 800,
tag: item.ImageTags.Thumb
});
}
else if (imageTags.Disc) {
2013-04-04 21:13:43 -07:00
2013-04-04 21:40:42 -07:00
url = ApiClient.getImageUrl(item.Id, {
type: "Disc",
width: 800,
tag: item.ImageTags.Disc
});
}
else if (item.MediaType == "Audio") {
url = "css/images/items/detail/audio.png";
useBackgroundColor = true;
}
else if (item.MediaType == "Game") {
url = "css/images/items/detail/game.png";
useBackgroundColor = true;
}
else {
url = "css/images/items/detail/video.png";
useBackgroundColor = true;
}
2013-04-04 21:13:43 -07:00
2013-04-04 21:40:42 -07:00
if (url) {
2013-04-04 21:13:43 -07:00
2013-04-04 21:40:42 -07:00
var style = useBackgroundColor ? "background-color:" + LibraryBrowser.getMetroColor(item.Id) + ";" : "";
2013-04-04 21:13:43 -07:00
2013-04-04 21:40:42 -07:00
html += "<img class='itemDetailImage' src='" + url + "' style='" + style + "' />";
}
2013-04-04 21:13:43 -07:00
2013-04-04 21:40:42 -07:00
$('#itemImage', page).html(html);
},
2013-04-04 21:13:43 -07:00
2013-04-04 21:40:42 -07:00
renderOverviewBlock: function (item) {
2013-04-04 21:13:43 -07:00
2013-04-04 21:40:42 -07:00
var page = $.mobile.activePage;
2013-04-04 21:13:43 -07:00
2013-04-04 21:40:42 -07:00
if (item.Taglines && item.Taglines.length) {
$('#itemTagline', page).html(item.Taglines[0]).show();
} else {
$('#itemTagline', page).hide();
}
2013-04-04 21:13:43 -07:00
2013-04-04 21:40:42 -07:00
if (item.Overview || item.OverviewHtml) {
var overview = item.OverviewHtml || item.Overview;
2013-04-04 21:13:43 -07:00
2013-04-04 21:40:42 -07:00
$('#itemOverview', page).html(overview).show();
$('#itemOverview a').each(function () {
$(this).attr("target", "_blank");
});
} else {
$('#itemOverview', page).hide();
}
2013-04-04 21:13:43 -07:00
2013-04-04 21:40:42 -07:00
if (item.CommunityRating) {
$('#itemCommunityRating', page).html(BoxsetPage.getStarRating(item)).show().attr('title', item.CommunityRating);
} else {
$('#itemCommunityRating', page).hide();
}
2013-04-04 21:13:43 -07:00
2013-04-04 21:40:42 -07:00
var miscInfo = [];
2013-04-04 21:13:43 -07:00
2013-04-04 21:40:42 -07:00
if (item.ProductionYear) {
miscInfo.push(item.ProductionYear);
}
2013-04-04 21:13:43 -07:00
2013-04-04 21:40:42 -07:00
if (item.OfficialRating) {
miscInfo.push(item.OfficialRating);
}
2013-04-04 21:13:43 -07:00
2013-04-04 21:40:42 -07:00
if (item.RunTimeTicks) {
2013-04-04 21:13:43 -07:00
2013-04-04 21:40:42 -07:00
var minutes = item.RunTimeTicks / 600000000;
2013-04-04 21:13:43 -07:00
2013-04-04 21:40:42 -07:00
minutes = minutes || 1;
2013-04-04 21:13:43 -07:00
2013-04-04 21:40:42 -07:00
miscInfo.push(parseInt(minutes) + "min");
}
2013-04-04 21:13:43 -07:00
2013-04-04 21:40:42 -07:00
if (item.DisplayMediaType) {
miscInfo.push(item.DisplayMediaType);
}
2013-04-04 21:13:43 -07:00
2013-04-04 21:40:42 -07:00
if (item.VideoFormat && item.VideoFormat !== 'Standard') {
miscInfo.push(item.VideoFormat);
}
2013-04-04 21:13:43 -07:00
2013-04-04 21:40:42 -07:00
$('#itemMiscInfo', page).html(miscInfo.join('&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'));
2013-04-04 21:13:43 -07:00
2013-04-04 21:40:42 -07:00
BoxsetPage.renderGenres(item);
BoxsetPage.renderStudios(item);
},
2013-04-04 21:13:43 -07:00
2013-04-04 21:40:42 -07:00
renderGenres: function (item) {
2013-04-04 21:13:43 -07:00
2013-04-04 21:40:42 -07:00
var page = $.mobile.activePage;
2013-04-04 21:13:43 -07:00
2013-04-04 21:40:42 -07:00
if (item.Genres && item.Genres.length) {
var elem = $('#itemGenres', page).show();
2013-04-04 21:13:43 -07:00
2013-04-04 21:40:42 -07:00
var html = 'Genres:&nbsp;&nbsp;';
2013-04-04 21:13:43 -07:00
2013-04-04 21:40:42 -07:00
for (var i = 0, length = item.Genres.length; i < length; i++) {
2013-04-04 21:13:43 -07:00
2013-04-04 21:40:42 -07:00
if (i > 0) {
html += '&nbsp;&nbsp;/&nbsp;&nbsp;';
}
2013-04-04 21:13:43 -07:00
2013-04-04 21:40:42 -07:00
html += '<a href="itembynamedetails.html?genre=' + item.Genres[i] + '">' + item.Genres[i] + '</a>';
}
2013-04-04 21:13:43 -07:00
2013-04-04 21:40:42 -07:00
elem.html(html).trigger('create');
2013-04-04 21:13:43 -07:00
2013-04-04 21:40:42 -07:00
} else {
$('#itemGenres', page).hide();
}
},
2013-04-04 21:13:43 -07:00
2013-04-04 21:40:42 -07:00
renderStudios: function (item) {
2013-04-04 21:13:43 -07:00
2013-04-04 21:40:42 -07:00
var page = $.mobile.activePage;
2013-04-04 21:13:43 -07:00
2013-04-04 21:40:42 -07:00
if (item.Studios && item.Studios.length) {
var elem = $('#itemStudios', page).show();
2013-04-04 21:13:43 -07:00
2013-04-04 21:40:42 -07:00
var html = 'Studios:&nbsp;&nbsp;';
2013-04-04 21:13:43 -07:00
2013-04-04 21:40:42 -07:00
for (var i = 0, length = item.Studios.length; i < length; i++) {
2013-04-04 21:13:43 -07:00
2013-04-04 21:40:42 -07:00
if (i > 0) {
html += '&nbsp;&nbsp;/&nbsp;&nbsp;';
}
2013-04-04 21:13:43 -07:00
2013-04-04 21:40:42 -07:00
html += '<a href="itembynamedetails.html?studio=' + item.Studios[i] + '">' + item.Studios[i] + '</a>';
}
2013-04-04 21:13:43 -07:00
2013-04-04 21:40:42 -07:00
elem.html(html).trigger('create');
2013-04-04 21:13:43 -07:00
2013-04-04 21:40:42 -07:00
} else {
$('#itemStudios', page).hide();
}
},
2013-04-04 21:13:43 -07:00
2013-04-04 21:40:42 -07:00
getStarRating: function (item) {
var rating = item.CommunityRating;
2013-04-04 21:13:43 -07:00
2013-04-04 21:40:42 -07:00
var html = "";
for (var i = 1; i <= 10; i++) {
if (rating < i - 1) {
html += "<div class='starRating emptyStarRating'></div>";
}
else if (rating < i) {
html += "<div class='starRating halfStarRating'></div>";
}
else {
html += "<div class='starRating'></div>";
}
}
2013-04-04 21:13:43 -07:00
2013-04-04 21:40:42 -07:00
return html;
},
2013-04-04 21:13:43 -07:00
2013-04-04 21:40:42 -07:00
renderFav: function (item) {
var html = '';
var page = $.mobile.activePage;
2013-04-04 21:13:43 -07:00
2013-04-04 21:40:42 -07:00
var userData = item.UserData || {};
2013-04-04 21:13:43 -07:00
2013-04-04 21:40:42 -07:00
if (typeof userData.Likes == "undefined") {
2013-04-05 08:27:37 -07:00
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();" />';
2013-04-04 21:40:42 -07:00
} else if (userData.Likes) {
2013-04-05 08:27:37 -07:00
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();" />';
2013-04-04 21:40:42 -07:00
} else {
2013-04-05 08:27:37 -07:00
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();" />';
2013-04-04 21:40:42 -07:00
}
2013-04-04 21:13:43 -07:00
2013-04-04 21:40:42 -07:00
if (userData.IsFavorite) {
2013-04-05 08:27:37 -07:00
html += '<img class="imgUserItemRating" src="css/images/userdata/heart_on.png" alt="Favorite" title="Favorite" onclick="ItemDetailPage.setFavorite();" />';
2013-04-04 21:40:42 -07:00
} else {
2013-04-05 08:27:37 -07:00
html += '<img class="imgUserItemRating" src="css/images/userdata/heart_off.png" alt="Favorite" title="Favorite" onclick="ItemDetailPage.setFavorite();" />';
2013-04-04 21:40:42 -07:00
}
2013-04-04 21:13:43 -07:00
2013-04-04 21:40:42 -07:00
$('#itemRatings', page).html(html);
},
2013-04-04 21:13:43 -07:00
2013-04-04 21:40:42 -07:00
setFavorite: function () {
var item = BoxsetPage.item;
2013-04-04 21:13:43 -07:00
2013-04-04 21:40:42 -07:00
item.UserData = item.UserData || {};
2013-04-04 21:13:43 -07:00
2013-04-04 21:40:42 -07:00
var setting = !item.UserData.IsFavorite;
item.UserData.IsFavorite = setting;
2013-04-04 21:13:43 -07:00
2013-04-04 21:40:42 -07:00
ApiClient.updateFavoriteStatus(Dashboard.getCurrentUserId(), item.Id, setting);
2013-04-04 21:13:43 -07:00
2013-04-04 21:40:42 -07:00
BoxsetPage.renderFav(item);
},
2013-04-04 21:13:43 -07:00
2013-04-04 21:40:42 -07:00
setLike: function () {
2013-04-04 21:13:43 -07:00
2013-04-04 21:40:42 -07:00
var item = BoxsetPage.item;
2013-04-04 21:13:43 -07:00
2013-04-04 21:40:42 -07:00
item.UserData = item.UserData || {};
2013-04-04 21:13:43 -07:00
2013-04-04 21:40:42 -07:00
item.UserData.Likes = true;
2013-04-04 21:13:43 -07:00
2013-04-04 21:40:42 -07:00
ApiClient.updateUserItemRating(Dashboard.getCurrentUserId(), item.Id, true);
2013-04-04 21:13:43 -07:00
2013-04-04 21:40:42 -07:00
BoxsetPage.renderFav(item);
},
2013-04-04 21:13:43 -07:00
2013-04-04 21:40:42 -07:00
clearLike: function () {
2013-04-04 21:13:43 -07:00
2013-04-04 21:40:42 -07:00
var item = BoxsetPage.item;
2013-04-04 21:13:43 -07:00
2013-04-04 21:40:42 -07:00
item.UserData = item.UserData || {};
2013-04-04 21:13:43 -07:00
2013-04-04 21:40:42 -07:00
item.UserData.Likes = undefined;
2013-04-04 21:13:43 -07:00
2013-04-04 21:40:42 -07:00
ApiClient.clearUserItemRating(Dashboard.getCurrentUserId(), item.Id);
2013-04-04 21:13:43 -07:00
2013-04-04 21:40:42 -07:00
BoxsetPage.renderFav(item);
},
2013-04-04 21:13:43 -07:00
2013-04-04 21:40:42 -07:00
setDislike: function () {
var item = BoxsetPage.item;
2013-04-04 21:13:43 -07:00
2013-04-04 21:40:42 -07:00
item.UserData = item.UserData || {};
2013-04-04 21:13:43 -07:00
2013-04-04 21:40:42 -07:00
item.UserData.Likes = false;
2013-04-04 21:13:43 -07:00
2013-04-04 21:40:42 -07:00
ApiClient.updateUserItemRating(Dashboard.getCurrentUserId(), item.Id, false);
2013-04-04 21:13:43 -07:00
2013-04-04 21:40:42 -07:00
BoxsetPage.renderFav(item);
},
2013-04-04 21:13:43 -07:00
2013-04-04 21:40:42 -07:00
setPlayed: function () {
var item = BoxsetPage.item;
2013-04-04 21:13:43 -07:00
2013-04-04 21:40:42 -07:00
item.UserData = item.UserData || {};
2013-04-04 21:13:43 -07:00
2013-04-04 21:40:42 -07:00
var setting = !item.UserData.Played;
item.UserData.Played = setting;
2013-04-04 21:13:43 -07:00
2013-04-04 21:40:42 -07:00
ApiClient.updatePlayedStatus(Dashboard.getCurrentUserId(), item.Id, setting);
2013-04-04 21:13:43 -07:00
2013-04-04 21:40:42 -07:00
BoxsetPage.renderFav(item);
}
2013-04-04 21:13:43 -07:00
};
$(document).on('pageshow', "#boxsetPage", BoxsetPage.onPageShow).on('pagehide', "#boxsetPage", BoxsetPage.onPageHide);