From 064af8cfee837deca75889ed0106cd25814138c2 Mon Sep 17 00:00:00 2001 From: Luke Pulverenti Date: Wed, 15 May 2013 08:05:07 -0400 Subject: [PATCH] added timeline view --- dashboard-ui/css/librarybrowser.css | 8 +++++ dashboard-ui/games.html | 1 + dashboard-ui/movies.html | 1 + dashboard-ui/musicalbums.html | 16 ++++++++++ dashboard-ui/scripts/gamespage.js | 21 +++++++++++- dashboard-ui/scripts/librarybrowser.js | 44 ++++++++++++++++---------- dashboard-ui/scripts/movies.js | 34 ++++++++++++++++---- dashboard-ui/scripts/musicalbums.js | 41 +++++++++++++++++++++--- dashboard-ui/scripts/tvshows.js | 20 +++++++++++- dashboard-ui/tvshows.html | 1 + 10 files changed, 156 insertions(+), 31 deletions(-) diff --git a/dashboard-ui/css/librarybrowser.css b/dashboard-ui/css/librarybrowser.css index 386b8239aa..491ea55256 100644 --- a/dashboard-ui/css/librarybrowser.css +++ b/dashboard-ui/css/librarybrowser.css @@ -575,6 +575,10 @@ a.itemTag:hover { text-align: center; } +.timelineItemsContainer { + text-align: left; +} + @media all and (min-width: 1200px) { .scenePosterViewItem img { @@ -670,3 +674,7 @@ a.itemTag:hover { .tileItem .itemProgressText { display: none; } + +.timelineHeader { + margin-bottom: .25em; +} diff --git a/dashboard-ui/games.html b/dashboard-ui/games.html index 3246268bb3..ac0b4dfe35 100644 --- a/dashboard-ui/games.html +++ b/dashboard-ui/games.html @@ -19,6 +19,7 @@ diff --git a/dashboard-ui/movies.html b/dashboard-ui/movies.html index 1ccdd5856c..ae83682bee 100644 --- a/dashboard-ui/movies.html +++ b/dashboard-ui/movies.html @@ -23,6 +23,7 @@ diff --git a/dashboard-ui/musicalbums.html b/dashboard-ui/musicalbums.html index 8cd782a19a..eeb5807e06 100644 --- a/dashboard-ui/musicalbums.html +++ b/dashboard-ui/musicalbums.html @@ -15,6 +15,12 @@
+
+ +
@@ -33,6 +39,16 @@ + + + + + + + + + +
diff --git a/dashboard-ui/scripts/gamespage.js b/dashboard-ui/scripts/gamespage.js index 2739e0b401..ad269c6e39 100644 --- a/dashboard-ui/scripts/gamespage.js +++ b/dashboard-ui/scripts/gamespage.js @@ -32,6 +32,7 @@ context: "games", shape: "backdrop" }); + $('.itemsContainer', page).removeClass('timelineItemsContainer'); } else if (view == "Poster") { html += LibraryBrowser.getPosterDetailViewHtml({ @@ -39,6 +40,16 @@ context: "games", shape: "poster" }); + $('.itemsContainer', page).removeClass('timelineItemsContainer'); + } + else if (view == "Timeline") { + html += LibraryBrowser.getPosterDetailViewHtml({ + items: result.Items, + context: "games", + shape: "poster", + timeline: true + }); + $('.itemsContainer', page).addClass('timelineItemsContainer'); } html += LibraryBrowser.getPagingHtml(query, result.TotalRecordCount); @@ -107,7 +118,15 @@ view = this.value; - reloadItems(page); + if (view == "Timeline") { + + query.SortBy = "PremiereDate"; + query.StartIndex = 0; + $('#radioPremiereDate', page)[0].click(); + + } else { + reloadItems(page); + } }); $('#chkTrailer', this).on('change', function () { diff --git a/dashboard-ui/scripts/librarybrowser.js b/dashboard-ui/scripts/librarybrowser.js index 7e745beba4..6ed2374710 100644 --- a/dashboard-ui/scripts/librarybrowser.js +++ b/dashboard-ui/scripts/librarybrowser.js @@ -15,6 +15,7 @@ getPosterDetailViewHtml: function (options) { var items = options.items; + var currentYear; if (!options.shape) { options.shape = options.preferBackdrop ? "backdrop" : "poster"; @@ -28,6 +29,16 @@ var item = items[i]; + if (options.timeline) { + var year = item.ProductionYear || "Unknown Year"; + + if (year != currentYear) { + + html += '

' + year + '

'; + currentYear = year; + } + } + var imgUrl; var isDefault = false; @@ -685,7 +696,6 @@ } else if (item.AlbumArtist && item.Type == "MusicAlbum") { - html.push('' + item.AlbumArtist + ''); } else if (item.Album) { @@ -1107,28 +1117,28 @@ if (item.Type == "Person") { url = ApiClient.getPersonImageUrl(item.Name, { - maxheight: 400, + maxheight: 480, tag: imageTags.Primary, type: "Primary" }); } else if (item.Type == "Genre") { url = ApiClient.getGenreImageUrl(item.Name, { - maxheight: 400, + maxheight: 480, tag: imageTags.Primary, type: "Primary" }); } else if (item.Type == "Studio") { url = ApiClient.getStudioImageUrl(item.Name, { - maxheight: 400, + maxheight: 480, tag: imageTags.Primary, type: "Primary" }); } else if (item.Type == "Artist") { url = ApiClient.getArtistImageUrl(item.Name, { - maxheight: 400, + maxheight: 480, tag: imageTags.Primary, type: "Primary" }); @@ -1136,7 +1146,7 @@ else { url = ApiClient.getImageUrl(item.Id, { type: "Primary", - maxheight: 400, + maxheight: 480, tag: item.ImageTags.Primary }); } @@ -1145,28 +1155,28 @@ if (item.Type == "Person") { url = ApiClient.getPersonImageUrl(item.Name, { - maxheight: 400, + maxheight: 480, tag: item.BackdropImageTags[0], type: "Backdrop" }); } else if (item.Type == "Genre") { url = ApiClient.getGenreImageUrl(item.Name, { - maxheight: 400, + maxheight: 480, tag: item.BackdropImageTags[0], type: "Backdrop" }); } else if (item.Type == "Studio") { url = ApiClient.getStudioImageUrl(item.Name, { - maxheight: 400, + maxheight: 480, tag: item.BackdropImageTags[0], type: "Backdrop" }); } else if (item.Type == "Artist") { url = ApiClient.getArtistImageUrl(item.Name, { - maxheight: 400, + maxheight: 480, tag: item.BackdropImageTags[0], type: "Backdrop" }); @@ -1174,7 +1184,7 @@ else { url = ApiClient.getImageUrl(item.Id, { type: "Backdrop", - maxheight: 400, + maxheight: 480, tag: item.BackdropImageTags[0] }); } @@ -1183,28 +1193,28 @@ if (item.Type == "Person") { url = ApiClient.getPersonImageUrl(item.Name, { - maxheight: 400, + maxheight: 480, tag: imageTags.Thumb, type: "Thumb" }); } else if (item.Type == "Genre") { url = ApiClient.getGenreImageUrl(item.Name, { - maxheight: 400, + maxheight: 480, tag: imageTags.Thumb, type: "Thumb" }); } else if (item.Type == "Studio") { url = ApiClient.getStudioImageUrl(item.Name, { - maxheight: 400, + maxheight: 480, tag: imageTags.Thumb, type: "Thumb" }); } else if (item.Type == "Artist") { url = ApiClient.getArtistImageUrl(item.Name, { - maxheight: 400, + maxheight: 480, tag: imageTags.Thumb, type: "Thumb" }); @@ -1212,7 +1222,7 @@ else { url = ApiClient.getImageUrl(item.Id, { type: "Thumb", - maxheight: 400, + maxheight: 480, tag: item.ImageTags.Thumb }); } @@ -1221,7 +1231,7 @@ url = ApiClient.getImageUrl(item.Id, { type: "Disc", - maxheight: 400, + maxheight: 480, tag: item.ImageTags.Disc }); } diff --git a/dashboard-ui/scripts/movies.js b/dashboard-ui/scripts/movies.js index 3ad3d5ed09..efbd691f8d 100644 --- a/dashboard-ui/scripts/movies.js +++ b/dashboard-ui/scripts/movies.js @@ -31,6 +31,7 @@ context: "movies", shape: "backdrop" }); + $('.itemsContainer', page).removeClass('timelineItemsContainer'); } else if (view == "Poster") { html += LibraryBrowser.getPosterDetailViewHtml({ @@ -38,6 +39,16 @@ context: "movies", shape: "poster" }); + $('.itemsContainer', page).removeClass('timelineItemsContainer'); + } + else if (view == "Timeline") { + html += LibraryBrowser.getPosterDetailViewHtml({ + items: result.Items, + context: "movies", + shape: "poster", + timeline: true + }); + $('.itemsContainer', page).addClass('timelineItemsContainer'); } html += LibraryBrowser.getPagingHtml(query, result.TotalRecordCount); @@ -48,7 +59,7 @@ query.StartIndex = (parseInt(this.value) - 1) * query.Limit; reloadItems(page); }); - + $('.btnNextPage', page).on('click', function () { query.StartIndex += query.Limit; reloadItems(page); @@ -124,7 +135,16 @@ view = this.value; - reloadItems(page); + if (view == "Timeline") { + + query.SortBy = "PremiereDate"; + query.StartIndex = 0; + $('#radioPremiereDate', page)[0].click(); + + } else { + reloadItems(page); + } + }); $('#chk3D', this).on('change', function () { @@ -134,7 +154,7 @@ reloadItems(page); }); - + $('#chkSubtitle', this).on('change', function () { query.StartIndex = 0; @@ -142,7 +162,7 @@ reloadItems(page); }); - + $('#chkTrailer', this).on('change', function () { query.StartIndex = 0; @@ -150,7 +170,7 @@ reloadItems(page); }); - + $('#chkSpecialFeature', this).on('change', function () { query.StartIndex = 0; @@ -158,7 +178,7 @@ reloadItems(page); }); - + $('#chkThemeSong', this).on('change', function () { query.StartIndex = 0; @@ -166,7 +186,7 @@ reloadItems(page); }); - + $('#chkThemeVideo', this).on('change', function () { query.StartIndex = 0; diff --git a/dashboard-ui/scripts/musicalbums.js b/dashboard-ui/scripts/musicalbums.js index b52b69ac4a..b0616502d0 100644 --- a/dashboard-ui/scripts/musicalbums.js +++ b/dashboard-ui/scripts/musicalbums.js @@ -1,5 +1,7 @@ (function ($, document) { + var view = "Poster"; + // The base query options var query = { @@ -22,11 +24,23 @@ $('.listTopPaging', page).html(LibraryBrowser.getPagingHtml(query, result.TotalRecordCount, true)).trigger('create'); - html += LibraryBrowser.getPosterDetailViewHtml({ - items: result.Items, - context: "music", - shape: "square" - }); + if (view == "Poster") { + html += LibraryBrowser.getPosterDetailViewHtml({ + items: result.Items, + context: "music", + shape: "square" + }); + $('.itemsContainer', page).removeClass('timelineItemsContainer'); + } + else if (view == "Timeline") { + html += LibraryBrowser.getPosterDetailViewHtml({ + items: result.Items, + context: "music", + shape: "square", + timeline: true + }); + $('.itemsContainer', page).addClass('timelineItemsContainer'); + } html += LibraryBrowser.getPagingHtml(query, result.TotalRecordCount); @@ -90,12 +104,29 @@ reloadItems(page); }); + $('#selectView', this).on('change', function () { + + view = this.value; + + if (view == "Timeline") { + + query.SortBy = "PremiereDate"; + query.StartIndex = 0; + $('#radioPremiereDate', page)[0].click(); + + } else { + reloadItems(page); + } + }); + }).on('pagebeforeshow', "#musicAlbumsPage", function () { reloadItems(this); }).on('pageshow', "#musicAlbumsPage", function () { + $('#selectView', this).val(view).selectmenu('refresh'); + // Reset form values using the last used query $('.radioSortBy', this).each(function () { diff --git a/dashboard-ui/scripts/tvshows.js b/dashboard-ui/scripts/tvshows.js index 8cf99a4115..30e3ff2cf6 100644 --- a/dashboard-ui/scripts/tvshows.js +++ b/dashboard-ui/scripts/tvshows.js @@ -30,12 +30,22 @@ preferBackdrop: true, context: "tv" }); + $('.itemsContainer', page).removeClass('timelineItemsContainer'); } else if (view == "Poster") { html += LibraryBrowser.getPosterDetailViewHtml({ items: result.Items, context: "tv" }); + $('.itemsContainer', page).removeClass('timelineItemsContainer'); + } + else if (view == "Timeline") { + html += LibraryBrowser.getPosterDetailViewHtml({ + items: result.Items, + context: "tv", + timeline: true + }); + $('.itemsContainer', page).addClass('timelineItemsContainer'); } html += LibraryBrowser.getPagingHtml(query, result.TotalRecordCount); @@ -135,7 +145,15 @@ view = this.value; - reloadItems(page); + if (view == "Timeline") { + + query.SortBy = "PremiereDate"; + query.StartIndex = 0; + $('#radioPremiereDate', page)[0].click(); + + } else { + reloadItems(page); + } }); $('#chkTrailer', this).on('change', function () { diff --git a/dashboard-ui/tvshows.html b/dashboard-ui/tvshows.html index c6e4649deb..049ffca5f6 100644 --- a/dashboard-ui/tvshows.html +++ b/dashboard-ui/tvshows.html @@ -20,6 +20,7 @@