mirrors/jellyfin-web
1
0
Fork 0
mirror of https://github.com/jellyfin/jellyfin-web synced 2025-03-30 19:56:21 +00:00
Code Activity

begin detail page consolidation

Browse source
This commit is contained in:
Luke Pulverenti 2013-04-10 09:53:44 -04:00
parent a65280a36c
commit 86603de5f2
6 changed files with 458 additions and 447 deletions
Download patch file Download diff file Expand all files Collapse all files

45
dashboard-ui/css/librarybrowser.css
View file

@ -186,3 +186,48 @@
padding: 3px 10px; padding: 3px 10px;
border-bottom-left-radius: 10px; border-bottom-left-radius: 10px;
} }
/* Firefox and Polyfill */
.itemProgress {
border: solid #222222 1px;
background: #444444 !important; /* !important only needed in polyfill */
border-radius: 0!important;
height: 12px;
opacity: .7;
position: absolute;
left: 10%;
right: 10%;
bottom: 61px;
width: 80%;
}
/* Chrome */
.itemProgress::-webkit-progress-bar {
background: #444444;
border-radius: 0!important;
}
/*
* Background of the progress bar value
*/
/* Firefox */
.itemProgress::-moz-progress-bar {
border-radius: 0!important;
background-image: -moz-linear-gradient( center bottom, rgb(43,194,83) 37%, rgb(84,240,84) 69% );
}
/* Chrome */
.itemProgress::-webkit-progress-value {
border-radius: 0!important;
background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0, rgb(43,194,83)), color-stop(1, rgb(84,240,84)) );
background-image: -webkit-linear-gradient( center bottom, rgb(43,194,83) 37%, rgb(84,240,84) 69% );
}
/* Polyfill */
.itemProgress[aria-valuenow]:before {
border-radius: 0!important;
background-image: -moz-linear-gradient( center bottom, rgb(43,194,83) 37%, rgb(84,240,84) 69% );
background-image: -ms-linear-gradient( center bottom, rgb(43,194,83) 37%, rgb(84,240,84) 69% );
background-image: -o-linear-gradient( center bottom, rgb(43,194,83) 37%, rgb(84,240,84) 69% );
}

21
dashboard-ui/scripts/Itemdetailpage.js
View file

@ -182,7 +182,7 @@
} }
if (item.CommunityRating) { if (item.CommunityRating) {
$('#itemCommunityRating', page).html(ItemDetailPage.getStarRating(item)).show().attr('title', item.CommunityRating); $('#itemCommunityRating', page).html(LibraryBrowser.getStarRatingHtml(item)).show().attr('title', item.CommunityRating);
} else { } else {
$('#itemCommunityRating', page).hide(); $('#itemCommunityRating', page).hide();
} }
@ -280,25 +280,6 @@
} }
}, },
getStarRating: function (item) {
var rating = item.CommunityRating;
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>";
}
}
return html;
},
onScenesExpand: function () { onScenesExpand: function () {
if (ItemDetailPage.item) { if (ItemDetailPage.item) {

21
dashboard-ui/scripts/boxset.js
View file

@ -141,7 +141,7 @@
} }
if (item.CommunityRating) { if (item.CommunityRating) {
$('#itemCommunityRating', page).html(BoxsetPage.getStarRating(item)).show().attr('title', item.CommunityRating); $('#itemCommunityRating', page).html(LibraryBrowser.getStarRatingHtml(item)).show().attr('title', item.CommunityRating);
} else { } else {
$('#itemCommunityRating', page).hide(); $('#itemCommunityRating', page).hide();
} }
@ -231,25 +231,6 @@
} }
}, },
getStarRating: function (item) {
var rating = item.CommunityRating;
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>";
}
}
return html;
},
renderFav: function (item) { renderFav: function (item) {
var html = ''; var html = '';
var page = $.mobile.activePage; var page = $.mobile.activePage;

245
dashboard-ui/scripts/librarybrowser.js
View file

@ -82,6 +82,8 @@
html += LibraryBrowser.getNewIndicatorHtml(item); html += LibraryBrowser.getNewIndicatorHtml(item);
} }
html += LibraryBrowser.getProgressBarHtml(item);
html += "</a></div>"; html += "</a></div>";
} }
@ -161,6 +163,8 @@
html += LibraryBrowser.getNewIndicatorHtml(item); html += LibraryBrowser.getNewIndicatorHtml(item);
} }
html += LibraryBrowser.getProgressBarHtml(item);
html += "</a></div>"; html += "</a></div>";
} }
@ -238,104 +242,118 @@
return html; return html;
}, },
getSeriesPosterViewHtml: function (options) { getSeriesPosterViewHtml: function (options) {
var items = options.items; var items = options.items;
var primaryImageAspectRatio = options.useAverageAspectRatio ? LibraryBrowser.getAveragePrimaryImageAspectRatio(items) : null; var primaryImageAspectRatio = options.useAverageAspectRatio ? LibraryBrowser.getAveragePrimaryImageAspectRatio(items) : null;
var html = ""; var html = "";
for (var i = 0, length = items.length; i < length; i++) { for (var i = 0, length = items.length; i < length; i++) {
var item = items[i]; var item = items[i];
var hasPrimaryImage = item.ImageTags && item.ImageTags.Primary; var hasPrimaryImage = item.ImageTags && item.ImageTags.Primary;
var href = item.url || "tvseries.html?id=" + item.Id; var href = item.url || "tvseries.html?id=" + item.Id;
var showText = options.showTitle || !hasPrimaryImage; var showText = options.showTitle || !hasPrimaryImage;
var cssClass = showText ? "posterViewItem" : "posterViewItem posterViewItemWithNoText"; var cssClass = showText ? "posterViewItem" : "posterViewItem posterViewItemWithNoText";
html += "<div class='" + cssClass + "'><a href='" + href + "'>"; html += "<div class='" + cssClass + "'><a href='" + href + "'>";
if (options.preferBackdrop && item.BackdropImageTags && item.BackdropImageTags.length) { if (options.preferBackdrop && item.BackdropImageTags && item.BackdropImageTags.length) {
html += "<img src='" + ApiClient.getImageUrl(item.Id, { html += "<img src='" + ApiClient.getImageUrl(item.Id, {
type: "Backdrop", type: "Backdrop",
height: 198, height: 198,
width: 352, width: 352,
tag: item.BackdropImageTags[0] tag: item.BackdropImageTags[0]
}) + "' />"; }) + "' />";
} else if (hasPrimaryImage) { } else if (hasPrimaryImage) {
var height = 300; var height = 300;
var width = primaryImageAspectRatio ? parseInt(height * primaryImageAspectRatio) : null; var width = primaryImageAspectRatio ? parseInt(height * primaryImageAspectRatio) : null;
html += "<img src='" + ApiClient.getImageUrl(item.Id, { html += "<img src='" + ApiClient.getImageUrl(item.Id, {
type: "Primary", type: "Primary",
height: height, height: height,
width: width, width: width,
tag: item.ImageTags.Primary tag: item.ImageTags.Primary
}) + "' />"; }) + "' />";
} else if (item.BackdropImageTags && item.BackdropImageTags.length) { } else if (item.BackdropImageTags && item.BackdropImageTags.length) {
html += "<img src='" + ApiClient.getImageUrl(item.Id, { html += "<img src='" + ApiClient.getImageUrl(item.Id, {
type: "Backdrop", type: "Backdrop",
height: 198, height: 198,
width: 352, width: 352,
tag: item.BackdropImageTags[0] tag: item.BackdropImageTags[0]
}) + "' />"; }) + "' />";
} }
else if (item.MediaType == "Audio" || item.Type == "MusicAlbum" || item.Type == "MusicArtist") { else if (item.MediaType == "Audio" || item.Type == "MusicAlbum" || item.Type == "MusicArtist") {
html += "<img style='background:" + LibraryBrowser.getMetroColor(item.Id) + ";' src='css/images/items/list/audio.png' />"; html += "<img style='background:" + LibraryBrowser.getMetroColor(item.Id) + ";' src='css/images/items/list/audio.png' />";
} }
else if (item.MediaType == "Video" || item.Type == "Season" || item.Type == "Series") { else if (item.MediaType == "Video" || item.Type == "Season" || item.Type == "Series") {
html += "<img style='background:" + LibraryBrowser.getMetroColor(item.Id) + ";' src='css/images/items/list/video.png' />"; html += "<img style='background:" + LibraryBrowser.getMetroColor(item.Id) + ";' src='css/images/items/list/video.png' />";
} }
else { else {
html += "<img style='background:" + LibraryBrowser.getMetroColor(item.Id) + ";' src='css/images/items/list/collection.png' />"; html += "<img style='background:" + LibraryBrowser.getMetroColor(item.Id) + ";' src='css/images/items/list/collection.png' />";
} }
if (showText) { if (showText) {
html += "<div class='posterViewItemText'>"; html += "<div class='posterViewItemText'>";
html += item.Name; html += item.Name;
html += "</div>"; html += "</div>";
} }
if (options.showNewIndicator !== false) { if (options.showNewIndicator !== false) {
html += LibraryBrowser.getNewIndicatorHtml(item); html += LibraryBrowser.getNewIndicatorHtml(item);
} }
html += "</a></div>"; html += LibraryBrowser.getProgressBarHtml(item);
}
return html; html += "</a></div>";
}, }
return html;
},
getNewIndicatorHtml: function (item) { getNewIndicatorHtml: function (item) {
if (item.RecentlyAddedItemCount) { if (item.RecentlyAddedItemCount) {
return '<div class="posterRibbon">' + item.RecentlyAddedItemCount + ' New</div>'; return '<div class="posterRibbon">' + item.RecentlyAddedItemCount + ' New</div>';
} }
if (!item.IsFolder) { if (!item.IsFolder) {
var date = item.DateCreated; var date = item.DateCreated;
if (date && (new Date().getTime() - parseISO8601Date(date).getTime()) < 1209600000) { if (date && (new Date().getTime() - parseISO8601Date(date).getTime()) < 1209600000) {
return "<div class='posterRibbon'>New</div>"; return "<div class='posterRibbon'>New</div>";
} }
} }
return ''; return '';
}, },
getProgressBarHtml: function (item) {
return '';
var html = '';
if (item.PlayedPercentage && item.PlayedPercentage < 100) {
html += '<progress class="itemProgress" min="0" max="100" value="' + item.PlayedPercentage + '"></progress>';
}
return html;
},
getAveragePrimaryImageAspectRatio: function (items) { getAveragePrimaryImageAspectRatio: function (items) {
var values = []; var values = [];
@ -458,6 +476,115 @@
html += 'Results ' + (query.StartIndex + 1) + '-' + recordsEnd + ' of ' + totalRecordCount + ', page ' + dropdownHtml + ' of ' + pageCount; html += 'Results ' + (query.StartIndex + 1) + '-' + recordsEnd + ' of ' + totalRecordCount + ', page ' + dropdownHtml + ' of ' + pageCount;
html += '</div>'; html += '</div>';
return html;
},
getStarRatingHtml: function (item) {
var rating = item.CommunityRating;
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>";
}
}
return html;
},
getUserRatingHtml: function (item) {
var html = '';
var userData = item.UserData || {};
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" />';
}
return html;
},
getDetailImageHtml: function(item) {
var imageTags = item.ImageTags || {};
var html = '';
var url;
var useBackgroundColor;
if (imageTags.Primary) {
url = ApiClient.getImageUrl(item.Id, {
type: "Primary",
width: 800,
tag: item.ImageTags.Primary
});
}
else if (item.BackdropImageTags && item.BackdropImageTags.length) {
url = ApiClient.getImageUrl(item.Id, {
type: "Backdrop",
width: 800,
tag: item.BackdropImageTags[0]
});
}
else if (imageTags.Thumb) {
url = ApiClient.getImageUrl(item.Id, {
type: "Thumb",
width: 800,
tag: item.ImageTags.Thumb
});
}
else if (imageTags.Disc) {
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;
}
if (url) {
var style = useBackgroundColor ? "background-color:" + LibraryBrowser.getMetroColor(item.Id) + ";" : "";
html += "<img class='itemDetailImage' src='" + url + "' style='" + style + "' />";
}
return html; return html;
} }
}; };

510
dashboard-ui/scripts/tvseries.js
View file

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

63
dashboard-ui/tvseries.html
View file

@ -1,46 +1,45 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<title></title> <title></title>
</head> </head>
<body> <body>
<div id="tvSeriesPage" data-role="page" class="page libraryPage noLogoPage" data-theme="a"> <div id="tvSeriesPage" data-role="page" class="page libraryPage noLogoPage" data-theme="a">
<h1 class="libraryPageHeader"><a href="index.html" class="imageLink"> <h1 class="libraryPageHeader"><a href="index.html" class="imageLink">
<img src="css/images/home.png"></a>Movies</h1> <img src="css/images/home.png"></a>TV Shows</h1>
<div data-role="content" style="padding-top: 0;"> <div data-role="content" style="padding-top: 0;">
<div data-role="controlgroup" data-type="horizontal" class="libraryViewNav" data-mini="true"> <div data-role="controlgroup" data-type="horizontal" class="libraryViewNav" data-mini="true">
<a href="tvrecommended.html" data-role="button">Suggested</a> <a href="tvrecommended.html" data-role="button">Suggested</a>
<a href="tvshows.html" data-role="button" class="ui-btn-active">Shows</a> <a href="tvshows.html" data-role="button" class="ui-btn-active">Shows</a>
<a href="#" data-role="button">Genres</a> <a href="#" data-role="button">Genres</a>
<a href="#" data-role="button">Actors</a> <a href="#" data-role="button">Actors</a>
</div> </div>
<h1 id="seriesName" style="padding-left: 10px; margin: 0;" class="hide"></h1> <h1 id="itemName" style="padding-left: 10px; margin: 0;"></h1>
<h1 id="itemName" style="padding-left: 10px; margin: 0;"></h1>
<div style="padding: 10px;"> <div style="padding: 10px;">
<div class="itemImageBlock"> <div class="itemImageBlock">
<div id="itemMedia" style="position: relative;"> <div id="itemMedia" style="position: relative;">
<div id="itemImage"></div> <div id="itemImage"></div>
</div> </div>
</div> </div>
<div class="itemDetailBlock"> <div class="itemDetailBlock">
<p id="itemTagline" style="font-style: italic;"></p> <p id="itemTagline" style="font-style: italic;"></p>
<p id="itemOverview"></p> <p id="itemOverview"></p>
<p id="itemRatings"></p> <p id="itemRatings"></p>
<p id="itemCommunityRating"></p> <p id="itemCommunityRating"></p>
<p id="itemMiscInfo" style="color: #ddd; font-size: 14px;"></p> <p id="itemMiscInfo" style="color: #ddd; font-size: 14px;"></p>
<p id="itemGenres"></p> <p id="itemGenres"></p>
<p id="itemStudios"></p> <p id="itemStudios"></p>
<p id="itemLinks"></p> <p id="itemLinks"></p>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</body> </body>
</html> </html>