diff --git a/dashboard-ui/css/librarybrowser.css b/dashboard-ui/css/librarybrowser.css index b4b403e651..2f58478488 100644 --- a/dashboard-ui/css/librarybrowser.css +++ b/dashboard-ui/css/librarybrowser.css @@ -186,3 +186,48 @@ padding: 3px 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% ); + } diff --git a/dashboard-ui/scripts/Itemdetailpage.js b/dashboard-ui/scripts/Itemdetailpage.js index d505237816..2ce2a3c098 100644 --- a/dashboard-ui/scripts/Itemdetailpage.js +++ b/dashboard-ui/scripts/Itemdetailpage.js @@ -182,7 +182,7 @@ } 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 { $('#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 += "
"; - } - else if (rating < i) { - html += "
"; - } - else { - html += "
"; - } - } - - return html; - }, - onScenesExpand: function () { if (ItemDetailPage.item) { diff --git a/dashboard-ui/scripts/boxset.js b/dashboard-ui/scripts/boxset.js index f0fce068ed..c5c3301bda 100644 --- a/dashboard-ui/scripts/boxset.js +++ b/dashboard-ui/scripts/boxset.js @@ -141,7 +141,7 @@ } 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 { $('#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 += "
"; - } - else if (rating < i) { - html += "
"; - } - else { - html += "
"; - } - } - - return html; - }, - renderFav: function (item) { var html = ''; var page = $.mobile.activePage; diff --git a/dashboard-ui/scripts/librarybrowser.js b/dashboard-ui/scripts/librarybrowser.js index b964632b2d..6c095d5680 100644 --- a/dashboard-ui/scripts/librarybrowser.js +++ b/dashboard-ui/scripts/librarybrowser.js @@ -82,6 +82,8 @@ html += LibraryBrowser.getNewIndicatorHtml(item); } + html += LibraryBrowser.getProgressBarHtml(item); + html += ""; } @@ -161,6 +163,8 @@ html += LibraryBrowser.getNewIndicatorHtml(item); } + html += LibraryBrowser.getProgressBarHtml(item); + html += ""; } @@ -238,104 +242,118 @@ 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++) { - var item = items[i]; + for (var i = 0, length = items.length; i < length; 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 += "
"; + html += "
"; - if (options.preferBackdrop && item.BackdropImageTags && item.BackdropImageTags.length) { - html += ""; - } else if (hasPrimaryImage) { + }) + "' />"; + } else if (hasPrimaryImage) { - var height = 300; - var width = primaryImageAspectRatio ? parseInt(height * primaryImageAspectRatio) : null; + var height = 300; + var width = primaryImageAspectRatio ? parseInt(height * primaryImageAspectRatio) : null; - html += ""; + }) + "' />"; - } else if (item.BackdropImageTags && item.BackdropImageTags.length) { - html += ""; - } - else if (item.MediaType == "Audio" || item.Type == "MusicAlbum" || item.Type == "MusicArtist") { + }) + "' />"; + } + else if (item.MediaType == "Audio" || item.Type == "MusicAlbum" || item.Type == "MusicArtist") { - html += ""; - } - else if (item.MediaType == "Video" || item.Type == "Season" || item.Type == "Series") { + html += ""; + } + else if (item.MediaType == "Video" || item.Type == "Season" || item.Type == "Series") { - html += ""; - } - else { + html += ""; + } + else { - html += ""; - } + html += ""; + } - if (showText) { - html += "
"; - html += item.Name; - html += "
"; - } + if (showText) { + html += "
"; + html += item.Name; + html += "
"; + } - if (options.showNewIndicator !== false) { - html += LibraryBrowser.getNewIndicatorHtml(item); - } + if (options.showNewIndicator !== false) { + html += LibraryBrowser.getNewIndicatorHtml(item); + } - html += "
"; - } + html += LibraryBrowser.getProgressBarHtml(item); - return html; - }, + html += "
"; + } + + return html; + }, getNewIndicatorHtml: function (item) { if (item.RecentlyAddedItemCount) { return '
' + item.RecentlyAddedItemCount + ' New
'; } - + if (!item.IsFolder) { var date = item.DateCreated; - + if (date && (new Date().getTime() - parseISO8601Date(date).getTime()) < 1209600000) { return "
New
"; } } - + return ''; }, + getProgressBarHtml: function (item) { + + return ''; + var html = ''; + + if (item.PlayedPercentage && item.PlayedPercentage < 100) { + html += ''; + } + + return html; + }, + getAveragePrimaryImageAspectRatio: function (items) { var values = []; @@ -458,6 +476,115 @@ html += 'Results ' + (query.StartIndex + 1) + '-' + recordsEnd + ' of ' + totalRecordCount + ', page ' + dropdownHtml + ' of ' + pageCount; html += ''; + return html; + }, + + getStarRatingHtml: function (item) { + var rating = item.CommunityRating; + + var html = ""; + for (var i = 1; i <= 10; i++) { + if (rating < i - 1) { + html += "
"; + } + else if (rating < i) { + html += "
"; + } + else { + html += "
"; + } + } + + return html; + }, + + getUserRatingHtml: function (item) { + + var html = ''; + + var userData = item.UserData || {}; + + if (typeof userData.Likes == "undefined") { + html += 'Dislike'; + html += 'Like'; + } else if (userData.Likes) { + html += 'Dislike'; + html += 'Liked'; + } else { + html += 'Dislike'; + html += 'Like'; + } + + if (userData.IsFavorite) { + html += 'Favorite'; + } else { + html += '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 += ""; + } + return html; } + }; \ No newline at end of file diff --git a/dashboard-ui/scripts/tvseries.js b/dashboard-ui/scripts/tvseries.js index 86fccce4fa..b8f7538880 100644 --- a/dashboard-ui/scripts/tvseries.js +++ b/dashboard-ui/scripts/tvseries.js @@ -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('     ')); + + renderGenres(page, item); + renderStudios(page, item); + } + + function renderStudios(page, item) { + if (item.Studios && item.Studios.length) { + var elem = $('#itemStudios', page).show(); + + var html = 'Studios:  '; + + for (var i = 0, length = item.Studios.length; i < length; i++) { + + if (i > 0) { + html += '  /  '; + } + + html += '' + item.Studios[i] + ''; + } + + 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:  '; + + for (var i = 0, length = item.Genres.length; i < length; i++) { + + if (i > 0) { + html += '  /  '; + } + + html += '' + item.Genres[i] + ''; + } + + 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 = { - 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 () { - var id = getParameterByName('id'); + renderFavorites(page, item); + }, - 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) { - name = item.IndexNumber + " - " + name; - } - if (item.ParentIndexNumber != null) { - name = item.ParentIndexNumber + "." + name; - } + var item = tvSeriesPage.item; - Dashboard.setPageTitle(name); + item.UserData = item.UserData || {}; - tvSeriesPage.renderImage(item); - tvSeriesPage.renderOverviewBlock(item); + item.UserData.Likes = undefined; - $('#itemName', page).html(name); + ApiClient.clearUserItemRating(Dashboard.getCurrentUserId(), item.Id); - if (item.SeriesName || item.Album) { - var series_name = item.SeriesName || item.Album; - $('#seriesName', page).html(series_name).show(); - } + renderFavorites(page, item); + }, - tvSeriesPage.renderFav(item); - LibraryBrowser.renderLinks(item); + setDislike: function () { + 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; - var useBackgroundColor; + item.UserData = item.UserData || {}; - if (imageTags.Primary) { + var setting = !item.UserData.Played; + item.UserData.Played = setting; - url = ApiClient.getImageUrl(item.Id, { - type: "Primary", - width: 800, - tag: item.ImageTags.Primary - }); - } - else if (item.BackdropImageTags && item.BackdropImageTags.length) { + ApiClient.updatePlayedStatus(Dashboard.getCurrentUserId(), item.Id, setting); - url = ApiClient.getImageUrl(item.Id, { - type: "Backdrop", - width: 800, - tag: item.BackdropImageTags[0] - }); - } - else if (imageTags.Thumb) { + renderFavorites(page, item); + } - 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 += ""; - } - - $('#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('     ')); - - 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:  '; - - for (var i = 0, length = item.Genres.length; i < length; i++) { - - if (i > 0) { - html += '  /  '; - } - - html += '' + item.Genres[i] + ''; - } - - 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:  '; - - for (var i = 0, length = item.Studios.length; i < length; i++) { - - if (i > 0) { - html += '  /  '; - } - - html += '' + item.Studios[i] + ''; - } - - 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 += "
"; - } - else if (rating < i) { - html += "
"; - } - else { - html += "
"; - } - } - - return html; - }, - - renderFav: function (item) { - var html = ''; - var page = $.mobile.activePage; - - var userData = item.UserData || {}; - - if (typeof userData.Likes == "undefined") { - html += 'Dislike'; - html += 'Like'; - } else if (userData.Likes) { - html += 'Dislike'; - html += 'Liked'; - } else { - html += 'Dislike'; - html += 'Like'; - } - - if (userData.IsFavorite) { - html += 'Favorite'; - } else { - html += 'Favorite'; - } - - $('#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); +}; \ No newline at end of file diff --git a/dashboard-ui/tvseries.html b/dashboard-ui/tvseries.html index d0231d72b3..2871c110ee 100644 --- a/dashboard-ui/tvseries.html +++ b/dashboard-ui/tvseries.html @@ -1,46 +1,45 @@ - + -
-

- Movies

-
+
+

+ TV Shows

+
-
- Suggested - Shows - Genres - Actors -
+
+ Suggested + Shows + Genres + Actors +
-

-

+

-
-
-
-
-
-
+
+
+
+
+
+
-
+
-

-

-

-

-

+

+

+

+

+

-

-

- -
-
+

+

+ +
+
-
-
+
+