episodes for series are now fetched using a single call and broken into seasons.

NzbDrone.Api/Episodes/EpisodeModule.cs

@@ -19,19 +19,13 @@ namespace NzbDrone.Api.Episodes
         private List<EpisodeResource> GetEpisodes()
         {
             var seriesId = (int?)Request.Query.SeriesId;
-            var seasonNumber = (int?)Request.Query.SeasonNumber;
 
             if (seriesId == null)
             {
                 throw new BadRequestException("seriesId is missing");
             }
 
-            if (seasonNumber == null)
-            {
             return ToListResource(() => _episodeService.GetEpisodeBySeries(seriesId.Value));
         }
-
-            return ToListResource(() => _episodeService.GetEpisodesBySeason(seriesId.Value, seasonNumber.Value));
-        }
     }
 }

UI/Content/base.less

@@ -1,4 +1,6 @@
-.progress {
+@import "bootstrap/bootstrap";
+
+.progress {
   width: 125px;
   position: relative;
   margin-bottom: 2px;
@@ -20,20 +22,24 @@
     overflow: hidden;
   }
 }
+
 html {
   overflow: -moz-scrollbars-vertical;
   overflow-y: scroll;
 }
+
 .input-append {
   .add-on {
     margin-left: 0;
   }
 }
+
 .line &>[class^="icon-"], .line &>[class*=" icon-"] {
   margin-top: 1em;
   height: 1em;
   line-height: 1em;
 }
+
 #localSeriesLookup {
   width: 220px;
   border: 0px;
@@ -42,6 +48,7 @@ html {
   padding: 4px;
   font-size: 13px;
 }
+
 #footer-region {
   font-size: 16px;
   text-decoration: none;
@@ -51,11 +58,13 @@ html {
     text-decoration: underline;
   }
 }
+
 #in-sub-nav {
   ul {
     margin: 0 0 80px 0;
   }
 }
+
 #notification-region {
   pre {
     font-size: 12px;
@@ -67,14 +76,21 @@ html {
     padding-right: 10px;
   }
 }
+
+.nz-loading {
+  .text-center;
+  font-size: 40px;
+  font-weight: 300;
+  padding: 30px;
+}
+
 .nz-spinner {
+  .text-center;
   font-size: 56px;
-  text-align: center;
   padding: 30px;
 }
 
-
+.page-toolbar {
-.page-toolbar{
   margin-top: 10px;
   margin-bottom: 30px;
 }

UI/Controller.js

@@ -7,7 +7,7 @@ define(['app',
     'Shared/NotificationView',
     'Shared/NotFoundView',
     'MainMenuView',
-    'Series/Details/SeriesDetailsView',
+    'Series/Details/SeriesDetailsLayout',
     'Series/EpisodeCollection',
     'Settings/SettingsLayout',
     'Missing/MissingLayout',
@@ -27,7 +27,7 @@ define(['app',
                 series.fetch({
                     success: function (seriesModel) {
                         self._setTitle(seriesModel.get('title'));
-                        NzbDrone.mainRegion.show(new NzbDrone.Series.Details.SeriesDetailsView({ model: seriesModel }));
+                        NzbDrone.mainRegion.show(new NzbDrone.Series.Details.SeriesDetailsLayout({ model: seriesModel }));
                     }
                 });
             },

UI/Series/Details/SeasonCollectionView.js

@@ -0,0 +1,24 @@
+"use strict";
+define(['app',  'Series/Details/SeasonLayout', 'Series/SeasonCollection', 'Series/EpisodeCollection'], function () {
+    NzbDrone.Series.Details.SeasonCollectionView = Backbone.Marionette.CollectionView.extend({
+
+        itemView         : NzbDrone.Series.Details.SeasonLayout,
+
+        initialize: function (options) {
+
+            if (!options.episodeCollection) {
+                throw 'episodeCollection is needed';
+            }
+
+            this.episodeCollection = options.episodeCollection;
+
+        },
+
+        itemViewOptions: function () {
+            return {
+                episodeCollection: this.episodeCollection
+            };
+        }
+
+    });
+});

UI/Series/Details/SeasonLayout.js

@@ -36,23 +36,22 @@ define(['app', 'Series/Details/EpisodeStatusCell', 'Series/Details/EpisodeTitleC
             }
         ],
 
-        initialize: function () {
+        initialize: function (options) {
-            this.episodeCollection = new NzbDrone.Series.EpisodeCollection();
+
-            this.episodeCollection.fetch({data: {
+            if (!options.episodeCollection) {
-                seriesId    : this.model.get('seriesId'),
+                throw 'episodeCollection is needed';
-                seasonNumber: this.model.get('seasonNumber')
+            }
-            }});
+
+            this.episodeCollection = options.episodeCollection.bySeason(this.model.get('seasonNumber'));
         },
 
         onShow: function () {
-
             this.episodeGrid.show(new Backgrid.Grid(
                 {
                     columns   : this.columns,
                     collection: this.episodeCollection,
                     className : 'table table-hover'
                 }));
-
         }
     });
 });

UI/Series/Details/SeriesDetailsLayout.js

@@ -0,0 +1,36 @@
+"use strict";
+define(['app', 'Series/Details/SeasonCollectionView','Shared/LoadingView'], function () {
+        NzbDrone.Series.Details.SeriesDetailsLayout = Backbone.Marionette.Layout.extend({
+
+            itemViewContainer: '.x-series-seasons',
+            template         : 'Series/Details/SeriesDetailsTemplate',
+
+            regions: {
+                seasons: '#seasons'
+            },
+
+            onShow: function () {
+
+                var self = this;
+
+                this.seasons.show(new NzbDrone.Shared.LoadingView());
+
+                this.seasonCollection = new NzbDrone.Series.SeasonCollection();
+                this.episodeCollection = new NzbDrone.Series.EpisodeCollection();
+
+                $.when(this.episodeCollection.fetch({data: { seriesId: this.model.id }}), this.seasonCollection.fetch({data: { seriesId: this.model.id }}))
+                    .done(function () {
+                        self.seasons.show(new NzbDrone.Series.Details.SeasonCollectionView({
+                            collection       : self.seasonCollection,
+                            episodeCollection: self.episodeCollection
+                        }));
+                    }
+                );
+            },
+
+            onClose: function () {
+                $('.backstretch').remove();
+            }
+        });
+    }
+);

UI/Series/Details/SeriesDetailsTemplate.html

@@ -1,4 +1,4 @@
-<div class="row series-page-header">
+<div class="row series-page-header series-detail-summary">
     <div class="span2">
         <a href="{{traktUrl}}" target="_blank">
             <img class="series-poster img-polaroid" src="{{poster}}">
@@ -18,5 +18,4 @@
         </div>
     </div>
 </div>
-
+<div id="seasons"></div>
-<div class="x-series-seasons"></div>

UI/Series/Details/SeriesDetailsView.js

@@ -1,20 +0,0 @@
-"use strict";
-define(['app', 'Quality/QualityProfileCollection', 'Series/Details/SeasonLayout', 'Series/SeasonCollection'], function () {
-    NzbDrone.Series.Details.SeriesDetailsView = Backbone.Marionette.CompositeView.extend({
-
-        itemView         : NzbDrone.Series.Details.SeasonLayout,
-        itemViewContainer: '.x-series-seasons',
-        template         : 'Series/Details/SeriesDetailsTemplate',
-
-        initialize: function () {
-            this.collection = new NzbDrone.Series.SeasonCollection();
-            this.collection.fetch({data: { seriesId: this.model.get('id') }});
-
-            //$.backstretch(this.model.get('fanArt'));
-        },
-
-        onClose: function(){
-            $('.backstretch').remove();
-        }
-    });
-});

UI/Series/EpisodeCollection.js

@@ -2,6 +2,14 @@
 define(['app', 'Series/EpisodeModel'], function () {
     NzbDrone.Series.EpisodeCollection = Backbone.Collection.extend({
         url  : NzbDrone.Constants.ApiRoot + '/episodes',
-        model: NzbDrone.Series.EpisodeModel
+        model: NzbDrone.Series.EpisodeModel,
+
+        bySeason: function (season) {
+            var filtered = this.filter(function (episode) {
+                return episode.get("seasonNumber") === season;
+            });
+
+            return new NzbDrone.Series.EpisodeCollection(filtered);
+        }
     });
 });

UI/Series/series.less

@@ -111,4 +111,9 @@
       display: none;
     }
   }
+
+}
+
+.series-detail-summary {
+  margin-bottom: 50px;
 }

UI/Shared/LoadingTemplate.html

@@ -0,0 +1 @@
+loading ...

UI/Shared/LoadingView.js

@@ -0,0 +1,10 @@
+"use strict";
+
+define(['app'], function () {
+    NzbDrone.Shared.LoadingView = Backbone.Marionette.ItemView.extend({
+        template : 'Shared/LoadingTemplate',
+        className: 'nz-loading row'
+    });
+});
+
+