From b048864e5738b41ee3271b2fb0ff3687fb15c151 Mon Sep 17 00:00:00 2001 From: Luke Pulverenti Date: Fri, 19 Apr 2013 19:57:23 -0400 Subject: [PATCH] added music genres page --- dashboard-ui/css/jplayer.css | 545 ------------------- dashboard-ui/musicgenres.html | 72 +++ dashboard-ui/musicrecommended.html | 2 +- dashboard-ui/scripts/itembynamedetailpage.js | 5 + dashboard-ui/scripts/musicgenres.js | 108 ++++ 5 files changed, 186 insertions(+), 546 deletions(-) delete mode 100644 dashboard-ui/css/jplayer.css create mode 100644 dashboard-ui/musicgenres.html create mode 100644 dashboard-ui/scripts/musicgenres.js diff --git a/dashboard-ui/css/jplayer.css b/dashboard-ui/css/jplayer.css deleted file mode 100644 index fc09a8b6b..000000000 --- a/dashboard-ui/css/jplayer.css +++ /dev/null @@ -1,545 +0,0 @@ -/* - * Skin for jPlayer Plugin (jQuery JavaScript Library) - */ - -div.jp-audio, -div.jp-audio-stream, -div.jp-video { - - /* Edit the font-size to counteract inherited font sizing. - * Eg. 1.25em = 1 / 0.8em - */ - - font-size:1.25em; /* 1.25em for testing in site pages */ /* No parent CSS that can effect the size in the demos ZIP */ - font-family:Verdana, Arial, sans-serif; - line-height:1.6; - color: #FFF; - background-color:#4C4C4C; - position: absolute; - bottom: 0; -} -div.jp-audio { - width:420px; -} -div.jp-audio-stream { - width:182px; -} -div.jp-video-270p { - width:480px; -} -div.jp-video-360p { - width:640px; -} -div.jp-video-full { - /* Rules for IE6 (full-screen) */ - width:480px; - height:270px; - /* Rules for IE7 (full-screen) - Otherwise the relative container causes other page items that are not position:static (default) to appear over the video/gui. */ - position:static !important; position:relative -} - -/* The z-index rule is defined in this manner to enable Popcorn plugins that add overlays to video area. EG. Subtitles. */ -div.jp-video-full div div { - z-index:1000; -} - -div.jp-video-full div.jp-jplayer { - top: 0; - left: 0; - position: fixed !important; position: relative; /* Rules for IE6 (full-screen) */ - overflow: hidden; -} - -div.jp-video-full div.jp-gui { - position: fixed !important; position: static; /* Rules for IE6 (full-screen) */ - top: 0; - left: 0; - width:100%; - height:100%; - z-index:1001; /* 1 layer above the others. */ -} - -div.jp-video-full div.jp-interface { - position: absolute !important; position: relative; /* Rules for IE6 (full-screen) */ - bottom: 0; - left: 0; -} - -div.jp-interface { - position: relative; - background-color:#4C4C4C; - width:100%; -} - -div.jp-audio div.jp-type-single div.jp-interface { - height:80px; -} -div.jp-audio div.jp-type-playlist div.jp-interface { - height:80px; -} - -div.jp-audio-stream div.jp-type-single div.jp-interface { - height:80px; -} - -div.jp-video div.jp-interface { - border-top:1px solid #000; -} - -/* @group CONTROLS */ - -div.jp-controls-holder { - clear: both; - width:440px; - margin:0 auto; - position: relative; - overflow:hidden; -} - -div.jp-interface ul.jp-controls { - list-style-type:none; - margin:0; - padding: 0; - overflow:hidden; -} - -div.jp-audio ul.jp-controls { - width: 380px; - padding:20px 20px 0 20px; -} - -div.jp-audio-stream ul.jp-controls { - width: 142px; - padding:20px 20px 0 20px; -} - -div.jp-video div.jp-type-single ul.jp-controls { - width: 78px; - margin-left: 200px; -} - -div.jp-video div.jp-type-playlist ul.jp-controls { - width: 134px; - margin-left: 172px; -} -div.jp-video ul.jp-controls, -div.jp-interface ul.jp-controls li { - display:inline; - float: left; -} - -div.jp-interface ul.jp-controls a { - display:block; - overflow:hidden; - text-indent:-9999px; -} - -/* @end */ - -/* @group progress bar */ - -div.jp-progress { - overflow:hidden; - background-color: #ddd; -} -div.jp-audio div.jp-progress { - position: absolute; - top:32px; - height:15px; -} -div.jp-audio div.jp-type-single div.jp-progress { - left:110px; - width:186px; -} -div.jp-audio div.jp-type-playlist div.jp-progress { - left:166px; - width:130px; -} -div.jp-video div.jp-progress { - top:0px; - left:0px; - width:100%; - height:10px; -} -div.jp-seek-bar { - background: url("jplayer.blue.monday.jpg") 0 -202px repeat-x; - width:0px; - height:100%; - cursor: pointer; -} -div.jp-play-bar { - /*background: url("jplayer.blue.monday.jpg") 0 -218px repeat-x ;*/ - background: #D7742B; - width:0px; - height:100%; -} - -/* The seeking class is added/removed inside jPlayer */ -div.jp-seeking-bg { - background: url("jplayer.blue.monday.seeking.gif"); -} - -/* @end */ - -/* @group volume controls */ -div.jp_volume { - float: right; - width: 150px; - position: relative; - margin-top: -4px; - height: 30px; -} -div.jp_volume ul li { - list-style-type: none; -} -div.jp_volume ul li a { - text-indent: -9999px; -} - -a.jp-mute, -a.jp-unmute, -a.jp-volume-max { - width:18px; - height:15px; - margin-top:12px; -} - -div.jp-audio div.jp-type-single a.jp-mute, -div.jp-audio div.jp-type-single a.jp-unmute { - margin-left: 210px; -} -div.jp-audio div.jp-type-playlist a.jp-mute, -div.jp-audio div.jp-type-playlist a.jp-unmute { - margin-left: 154px; -} - -div.jp-audio-stream div.jp-type-single a.jp-mute, -div.jp-audio-stream div.jp-type-single a.jp-unmute { - margin-left:10px; -} - -div.jp-audio a.jp-volume-max, -div.jp-audio-stream a.jp-volume-max { - margin-left: 56px; -} - -div.jp-video a.jp-mute, -div.jp-video a.jp-unmute, -div.jp-video a.jp-volume-max { - position: absolute; - top:12px; - margin-top:0; -} - -div.jp-video a.jp-mute, -div.jp-video a.jp-unmute { - left: 50px; -} - -div.jp-video a.jp-volume-max { - left: 134px; -} - -a.jp-mute { - background: url("jplayer.blue.monday.jpg") 0 -170px no-repeat; -} -a.jp-mute:hover { - background: url("jplayer.blue.monday.jpg") -19px -170px no-repeat; -} -a.jp-unmute { - background: url("jplayer.blue.monday.jpg") -60px -170px no-repeat; - display: none; -} -a.jp-unmute:hover { - background: url("jplayer.blue.monday.jpg") -79px -170px no-repeat; -} -a.jp-volume-max { - background: url("jplayer.blue.monday.jpg") 0 -186px no-repeat; -} -a.jp-volume-max:hover { - background: url("jplayer.blue.monday.jpg") -19px -186px no-repeat; -} - -div.jp-volume-bar { - position: absolute; - overflow:hidden; - background: url("jplayer.blue.monday.jpg") 0 -250px repeat-x; - width:46px; - height:5px; - cursor: pointer; -} -div.jp-audio div.jp-volume-bar { - top:37px; - left:330px; -} -div.jp-audio-stream div.jp-volume-bar { - top:37px; - left:92px; -} -div.jp-video div.jp-volume-bar { - top:17px; - left:72px; -} -div.jp-volume-bar-value { - background: #D7742B; - width:0px; - height:5px; -} - -/* @end */ - -/* @group current time and duration */ - -div.jp-audio div.jp-time-holder { - position:absolute; - top:50px; -} -div.jp-audio div.jp-type-single div.jp-time-holder { - left:110px; - width:186px; -} -div.jp-audio div.jp-type-playlist div.jp-time-holder { - left:166px; - width:130px; -} - -div.jp-current-time, -div.jp-duration, div.jp_duration { - width:60px; - font-size:.64em; - font-style:oblique; -} -div.jp-current-time { - float: left; - display:inline; -} -div.jp-duration, div.jp_duration { - float: right; - display:inline; - text-align: right; -} - -div.jp-video div.jp-current-time { - margin-left:20px; -} -div.jp-video div.jp-duration, div.jp_duration { - margin-right:20px; -} - -/* @end */ - -/* @group playlist */ - -div.jp-title { - font-weight:bold; - text-align:center; -} - -div.jp-title, -div.jp-playlist { - width:100%; - background-color:#ccc; - border-top:1px solid #009be3; -} -div.jp-type-single div.jp-title, -div.jp-type-playlist div.jp-title, -div.jp-type-single div.jp-playlist { - border-top:none; -} -div.jp-title ul, -div.jp-playlist ul { - list-style-type:none; - margin:0; - padding:0 20px; - font-size:.72em; -} - -div.jp-title li { - padding:5px 0; - font-weight:bold; -} -div.jp-playlist li { - padding:5px 0 4px 20px; - border-bottom:1px solid #eee; -} - -div.jp-playlist li div { - display:inline; -} - -/* Note that the first-child (IE6) and last-child (IE6/7/8) selectors do not work on IE */ - -div.jp-type-playlist div.jp-playlist li:last-child { - padding:5px 0 5px 20px; - border-bottom:none; -} -div.jp-type-playlist div.jp-playlist li.jp-playlist-current { - list-style-type:square; - list-style-position:inside; - padding-left:7px; -} -div.jp-type-playlist div.jp-playlist a { - color: #333; - text-decoration: none; -} -div.jp-type-playlist div.jp-playlist a:hover { - color:#0d88c1; -} -div.jp-type-playlist div.jp-playlist a.jp-playlist-current { - color:#0d88c1; -} - -div.jp-type-playlist div.jp-playlist a.jp-playlist-item-remove { - float:right; - display:inline; - text-align:right; - margin-right:10px; - font-weight:bold; - color:#666; -} -div.jp-type-playlist div.jp-playlist a.jp-playlist-item-remove:hover { - color:#0d88c1; -} -div.jp-type-playlist div.jp-playlist span.jp-free-media { - float:right; - display:inline; - text-align:right; - margin-right:10px; -} -div.jp-type-playlist div.jp-playlist span.jp-free-media a{ - color:#666; -} -div.jp-type-playlist div.jp-playlist span.jp-free-media a:hover{ - color:#0d88c1; -} -span.jp-artist { - font-size:.8em; - color:#666; -} - -/* @end */ - -div.jp-jplayer audio, -div.jp-jplayer { - width:0px; - height:0px; -} - -div.jp-jplayer { - background-color: #000000; -} - -/* @group TOGGLES */ - -/* The audio toggles are nested inside jp-time-holder */ - -ul.jp-toggles { - list-style-type:none; - padding:0; - margin:0 auto; - overflow:hidden; -} - -div.jp-audio .jp-type-single ul.jp-toggles { - width:25px; -} -div.jp-audio .jp-type-playlist ul.jp-toggles { - width:55px; - margin: 0; - position: absolute; - left: 325px; - top: 50px; -} - -div.jp-video ul.jp-toggles { - margin-top:6px; - width: 40px; - float: right; -} - -ul.jp-toggles li { - display:block; - float:right; -} - -ul.jp-toggles li a { - display:block; - width:25px; - height:18px; - text-indent:-9999px; - line-height:100%; /* need this for IE6 */ -} - - -a.jp-repeat { - background: url("jplayer.blue.monday.jpg") 0 -290px no-repeat; -} - -a.jp-repeat:hover { - background: url("jplayer.blue.monday.jpg") -30px -290px no-repeat; -} - -a.jp-repeat-off { - background: url("jplayer.blue.monday.jpg") -60px -290px no-repeat; -} - -a.jp-repeat-off:hover { - background: url("jplayer.blue.monday.jpg") -90px -290px no-repeat; -} - -a.jp-shuffle { - background: url("jplayer.blue.monday.jpg") 0 -270px no-repeat; - margin-left: 5px; -} - -a.jp-shuffle:hover { - background: url("jplayer.blue.monday.jpg") -30px -270px no-repeat; -} - -a.jp-shuffle-off { - background: url("jplayer.blue.monday.jpg") -60px -270px no-repeat; - margin-left: 5px; -} - -a.jp-shuffle-off:hover { - background: url("jplayer.blue.monday.jpg") -90px -270px no-repeat; -} - - -/* @end */ - -/* @group NO SOLUTION error feedback */ - -.jp-no-solution { - padding:5px; - font-size:.8em; - background-color:#eee; - border:2px solid #009be3; - color:#000; - display:none; -} - -.jp-no-solution a { - color:#000; -} - -.jp-no-solution span { - font-size:1em; - display:block; - text-align:center; - font-weight:bold; -} - -/* @end */ - -/* Chapters and Quality Selector */ -.jp_res_chapters { - float: right; -} -.jp_res_chapters button { - margin-right: 2px; -} - -.jp_chapters, .jp_quality { - display: none; -} diff --git a/dashboard-ui/musicgenres.html b/dashboard-ui/musicgenres.html new file mode 100644 index 000000000..60c265e0b --- /dev/null +++ b/dashboard-ui/musicgenres.html @@ -0,0 +1,72 @@ + + + + Media Browser + + +
+

+ Music

+
+
+ Suggested + Songs + Albums + Artists + Genres +
+
+
+ + +
+
+
+
+
+
+
+ +
+
+ + Sort By: + + + + +
+ +
+ + Sort Order: + + + + + + + +
+
+
+
+
+
+ + Filters: + + + + + + + + + +
+
+
+
+ + diff --git a/dashboard-ui/musicrecommended.html b/dashboard-ui/musicrecommended.html index 7d3461d7c..81837190a 100644 --- a/dashboard-ui/musicrecommended.html +++ b/dashboard-ui/musicrecommended.html @@ -13,7 +13,7 @@ Songs Albums Artists - Genres + Genres diff --git a/dashboard-ui/scripts/itembynamedetailpage.js b/dashboard-ui/scripts/itembynamedetailpage.js index 98840f680..26913ce1d 100644 --- a/dashboard-ui/scripts/itembynamedetailpage.js +++ b/dashboard-ui/scripts/itembynamedetailpage.js @@ -159,6 +159,11 @@ loadItems(page, { IncludeItemTypes: "Episode", PersonTypes: "GuestStar" }); }); + + $("#radioAlbums", page).on("click", function () { + + loadItems(page, { IncludeItemTypes: "MusicAlbum", PersonTypes: "Artist" }); + }); } function renderDetails(page, item) { diff --git a/dashboard-ui/scripts/musicgenres.js b/dashboard-ui/scripts/musicgenres.js new file mode 100644 index 000000000..19afb1ecc --- /dev/null +++ b/dashboard-ui/scripts/musicgenres.js @@ -0,0 +1,108 @@ +(function ($, document) { + + // The base query options + var query = { + + SortBy: "SortName", + SortOrder: "Ascending", + IncludeItemTypes: "Audio", + Recursive: true, + Fields: "PrimaryImageAspectRatio,ItemCounts,DateCreated,UserData", + Limit: LibraryBrowser.getDetaultPageSize(), + StartIndex: 0 + }; + + function reloadItems(page) { + + Dashboard.showLoadingMsg(); + + ApiClient.getGenres(Dashboard.getCurrentUserId(), query).done(function (result) { + + var html = ''; + + $('.listTopPaging', page).html(LibraryBrowser.getPagingHtml(query, result.TotalRecordCount, true)).trigger('create'); + + html += LibraryBrowser.getPosterDetailViewHtml({ + items: result.Items, + useAverageAspectRatio: true, + countNameSingular: "Song", + countNamePlural: "Songs" + }); + + html += LibraryBrowser.getPagingHtml(query, result.TotalRecordCount); + + $('#items', page).html(html).trigger('create'); + + $('.selectPage', page).on('change', function () { + query.StartIndex = (parseInt(this.value) - 1) * query.Limit; + reloadItems(page); + }); + + $('.btnNextPage', page).on('click', function () { + query.StartIndex += query.Limit; + reloadItems(page); + }); + + $('.btnPreviousPage', page).on('click', function () { + query.StartIndex -= query.Limit; + reloadItems(page); + }); + + Dashboard.hideLoadingMsg(); + }); + } + + $(document).on('pageinit', "#musicGenresPage", function () { + + var page = this; + + $('.radioSortBy', this).on('click', function () { + query.SortBy = this.getAttribute('data-sortby'); + query.StartIndex = 0; + reloadItems(page); + }); + + $('.radioSortOrder', this).on('click', function () { + query.SortOrder = this.getAttribute('data-sortorder'); + query.StartIndex = 0; + reloadItems(page); + }); + + $('.chkStandardFilter', this).on('change', function () { + + var filterName = this.getAttribute('data-filter'); + var filters = query.Filters || ""; + + filters = (',' + filters).replace(',' + filterName, '').substring(1); + + if (this.checked) { + filters = filters ? (filters + ',' + filterName) : filterName; + } + + query.StartIndex = 0; + query.Filters = filters; + + reloadItems(page); + }); + + }).on('pagebeforeshow', "#musicGenresPage", function () { + + reloadItems(this); + + }).on('pageshow', "#musicGenresPage", function () { + + // Reset form values using the last used query + $('.radioSortBy', this).each(function () { + + this.checked = query.SortBy == this.getAttribute('data-sortby'); + + }).checkboxradio('refresh'); + + $('.radioSortOrder', this).each(function () { + + this.checked = query.SortOrder == this.getAttribute('data-sortorder'); + + }).checkboxradio('refresh'); + }); + +})(jQuery, document); \ No newline at end of file