Removed season menu in favour of minimizing seasons

UI/Content/theme.less

@@ -12,7 +12,7 @@
 @import "../Shared/Styles/clickable";
 @import "../Shared/Styles/card";
 
-.progress {
+.progress.episode-progress {
   width         : 125px;
   position      : relative;
   margin-bottom : 2px;
@@ -21,6 +21,7 @@
     font-size   : 11.844px;
     font-weight : bold;
     text-align  : center;
+    cursor      : default;
   }
 
   .progressbar-back-text {
@@ -33,6 +34,7 @@
     display : block;
     width   : 125px;
   }
+
   .bar {
     position : absolute;
     overflow : hidden;

UI/Series/Details/SeasonLayout.js

@@ -8,8 +8,9 @@ define(
         'Cells/EpisodeTitleCell',
         'Cells/RelativeDateCell',
         'Cells/EpisodeStatusCell',
-        'Shared/Actioneer'
+        'Shared/Actioneer',
-    ], function (App, Marionette, Backgrid, ToggleCell, EpisodeTitleCell, RelativeDateCell, EpisodeStatusCell, Actioneer) {
+        'moment'
+    ], function (App, Marionette, Backgrid, ToggleCell, EpisodeTitleCell, RelativeDateCell, EpisodeStatusCell, Actioneer, Moment) {
         return Marionette.Layout.extend({
             template: 'Series/Details/SeasonLayoutTemplate',
 
@@ -20,13 +21,15 @@ define(
             },
 
             events: {
-                'click .x-season-search'   : '_seasonSearch',
+                'click .x-season-search'      : '_seasonSearch',
-                'click .x-season-monitored': '_seasonMonitored',
+                'click .x-season-monitored'   : '_seasonMonitored',
-                'click .x-season-rename'   : '_seasonRename'
+                'click .x-season-rename'      : '_seasonRename',
+                'click .x-show-hide-episodes' : '_showHideEpisodes',
+                'dblclick .series-season h2'  : '_showHideEpisodes'
             },
 
             regions: {
-                episodeGrid: '#x-episode-grid'
+                episodeGrid: '.x-episode-grid'
             },
 
             columns:
@@ -67,6 +70,8 @@ define(
                     }
                 ],
 
+            templateHelpers: {},
+
             initialize: function (options) {
 
                 if (!options.episodeCollection) {
@@ -76,6 +81,9 @@ define(
                 this.episodeCollection = options.episodeCollection.bySeason(this.model.get('seasonNumber'));
                 this.series = options.series;
 
+                this.showingEpisodes = this._shouldShowEpisodes();
+                this.templateHelpers.showingEpisodes = this.showingEpisodes;
+
                 this.listenTo(this.model, 'sync', function () {
                     this._afterSeasonMonitored();
                 }, this);
@@ -86,11 +94,9 @@ define(
             },
 
             onRender: function () {
-                this.episodeGrid.show(new Backgrid.Grid({
+                if (this.showingEpisodes) {
-                    columns   : this.columns,
+                    this._showEpisodes();
-                    collection: this.episodeCollection,
+                }
-                    className : 'table table-hover season-grid'
-                }));
 
                 this._setSeasonMonitoredState();
             },
@@ -159,6 +165,54 @@ define(
 
             _afterRename: function () {
                 App.vent.trigger(App.Events.SeasonRenamed, { series: this.series, seasonNumber: this.model.get('seasonNumber') });
+            },
+
+            _showEpisodes: function () {
+                this.episodeGrid.show(new Backgrid.Grid({
+                    columns   : this.columns,
+                    collection: this.episodeCollection,
+                    className : 'table table-hover season-grid'
+                }));
+            },
+
+            _shouldShowEpisodes: function () {
+                var startDate = Moment().add('month', -1);
+                var endDate = Moment().add('year', 1);
+
+                var result = this.episodeCollection.some(function(episode) {
+
+                    var airDate = episode.get('airDateUtc');
+
+                    if (airDate)
+                    {
+                        var airDateMoment = Moment(airDate);
+
+                        if (airDateMoment.isAfter(startDate) && airDateMoment.isBefore(endDate)) {
+                            return true;
+                        }
+                    }
+
+                    return false;
+                });
+
+                return result;
+            },
+
+            _showHideEpisodes: function () {
+                if (this.showingEpisodes) {
+                    this.showingEpisodes = false;
+                    this.episodeGrid.$el.slideUp();
+                    this.episodeGrid.close();
+                }
+
+                else {
+                    this.showingEpisodes = true;
+                    this._showEpisodes();
+                    this.episodeGrid.$el.slideDown();
+                }
+
+                this.templateHelpers.showingEpisodes = this.showingEpisodes;
+                this.render();
             }
         });
     });

UI/Series/Details/SeasonLayoutTemplate.html

@@ -1,15 +1,26 @@
 <div class="series-season" id="season-{{seasonNumber}}">
     <h2>
         <i class="x-season-monitored clickable" title="Toggle season monitored status"/>
+        
         {{#if seasonNumber}}
             Season {{seasonNumber}}
         {{else}}
             Specials
         {{/if}}
+
         <span class="season-actions pull-right">
             <i class="icon-nd-rename x-season-rename" title="Rename  all episodes in season {{seasonNumber}}"/>
             <i class="icon-search x-season-search" title="Search for all episodes in season {{seasonNumber}}"/>
         </span>
     </h2>
-    <div id="x-episode-grid"/>
+    <div class="x-episode-grid"></div>
+    <div class="show-hide-episodes x-show-hide-episodes">
+        <h4>
+            {{#if showingEpisodes}}
+                <i class="icon-chevron-sign-up"/> Hide Episodes
+            {{else}}
+            <i class="icon-chevron-sign-down"/> Show Episodes
+            {{/if}}
+        </h4>
+    </div>
 </div>

UI/Series/Details/SeasonMenu/CollectionView.js

@@ -1,31 +0,0 @@
-'use strict';
-define(
-    [
-        'marionette',
-        'Series/Details/SeasonMenu/ItemView'
-    ], function (Marionette, ItemView) {
-        return Marionette.CollectionView.extend({
-
-            itemView: ItemView,
-
-            initialize: function (options) {
-
-                if (!options.episodeCollection) {
-                    throw 'episodeCollection is needed';
-                }
-
-                this.episodeCollection = options.episodeCollection;
-            },
-
-            itemViewOptions: function () {
-                return {
-                    episodeCollection: this.episodeCollection
-                };
-            },
-
-            appendHtml: function(collectionView, itemView){
-                var childrenContainer = $(collectionView.childrenContainer || collectionView.el);
-                childrenContainer.prepend(itemView.el);
-            }
-        });
-    });

UI/Series/Details/SeasonMenu/ItemView.js

@@ -1,88 +0,0 @@
-'use strict';
-define(
-    [
-        'marionette',
-        'Shared/Actioneer'
-    ], function (Marionette, Actioneer) {
-        return Marionette.ItemView.extend({
-            template: 'Series/Details/SeasonMenu/ItemViewTemplate',
-            tagName : 'span',
-
-            ui: {
-                seasonMonitored: '.x-season-monitored'
-            },
-
-            events: {
-                'click .x-season-monitored': '_seasonMonitored',
-                'click .x-text': '_gotoSeason'
-            },
-
-            initialize: function (options) {
-
-                if (!options.episodeCollection) {
-                    throw 'episodeCollection is needed';
-                }
-
-                this.episodeCollection = options.episodeCollection.bySeason(this.model.get('seasonNumber'));
-
-                var allDownloaded = _.all(this.episodeCollection.models, function (model) {
-                    var hasFile = model.get('hasFile');
-                    return hasFile;
-                });
-
-                this.model.set({
-                   allFilesDownloaded: allDownloaded
-                });
-
-                this.listenTo(this.model, 'sync', function () {
-                    this.render();
-                }, this);
-            },
-
-            onRender: function () {
-                this._setSeasonMonitoredState();
-            },
-
-            _seasonSearch: function () {
-                Actioneer.ExecuteCommand({
-                    command     : 'seasonSearch',
-                    properties  : {
-                        seriesId    : this.model.get('seriesId'),
-                        seasonNumber: this.model.get('seasonNumber')
-                    },
-                    element     : this.ui.seasonSearch,
-                    errorMessage: 'Search for season {0} failed'.format(this.model.get('seasonNumber')),
-                    startMessage: 'Search for season {0} started'.format(this.model.get('seasonNumber'))
-                });
-            },
-
-            _seasonMonitored: function (e) {
-                e.preventDefault();
-
-                var name = 'monitored';
-                this.model.set(name, !this.model.get(name));
-
-                Actioneer.SaveModel({
-                    context       : this,
-                    element       : this.ui.seasonMonitored
-                });
-            },
-
-            _setSeasonMonitoredState: function () {
-                this.ui.seasonMonitored.removeClass('icon-spinner icon-spin');
-
-                if (this.model.get('monitored')) {
-                    this.ui.seasonMonitored.addClass('icon-bookmark');
-                    this.ui.seasonMonitored.removeClass('icon-bookmark-empty');
-                }
-                else {
-                    this.ui.seasonMonitored.addClass('icon-bookmark-empty');
-                    this.ui.seasonMonitored.removeClass('icon-bookmark');
-                }
-            },
-
-            _gotoSeason: function () {
-                window.location.hash = '#season-' + this.model.get('seasonNumber');
-            }
-        });
-    });

UI/Series/Details/SeasonMenu/ItemViewTemplate.html

@@ -1,14 +0,0 @@
-{{#if allFilesDownloaded}}
-<span class="label label-info season-menu-item">
-{{else}}
-<span class="label label-white season-menu-item">
-{{/if}}
-    <i class="x-season-monitored clickable" title="Toggle season monitored status"/>
-    <span class="x-text text" title="Go to season">
-        {{#if_eq seasonNumber compare=0}}
-            Specials
-        {{else}}
-            S{{Pad2 seasonNumber}}
-        {{/if_eq}}
-    </span>
-</span>

UI/Series/Details/SeriesDetailsLayout.js

@@ -7,7 +7,6 @@ define(
         'Series/EpisodeFileCollection',
         'Series/SeasonCollection',
         'Series/Details/SeasonCollectionView',
-        'Series/Details/SeasonMenu/CollectionView',
         'Series/Details/InfoView',
         'Shared/LoadingView',
         'Shared/Actioneer',
@@ -19,7 +18,6 @@ define(
                  EpisodeFileCollection,
                  SeasonCollection,
                  SeasonCollectionView,
-                 SeasonMenuCollectionView,
                  InfoView,
                  LoadingView,
                  Actioneer) {
@@ -29,7 +27,6 @@ define(
             template         : 'Series/Details/SeriesDetailsTemplate',
 
             regions: {
-                seasonMenu: '#season-menu',
                 seasons   : '#seasons',
                 info      : '#info'
             },
@@ -200,11 +197,6 @@ define(
                     });*/
 
                     self.seasons.show(seasonCollectionView);
-
-                    self.seasonMenu.show(new SeasonMenuCollectionView({
-                        collection       : self.seasonCollection,
-                        episodeCollection: self.episodeCollection
-                    }));
                 });
             },
 

UI/Series/Details/SeriesDetailsTemplate.html

@@ -18,9 +18,6 @@
         <div id="info" class="row">
 
         </div>
-        <div class="row">
-            <div id="season-menu" class="season-menu"></div>
-        </div>
     </div>
 </div>
 <div id="seasons"></div>

UI/Series/Index/EpisodeProgressPartial.html

@@ -1,12 +1,12 @@
 {{#if_eq episodeFileCount compare=episodeCount}}
     {{#if_eq status compare="continuing"}}
-        <div class="progress">
+        <div class="progress episode-progress">
     {{else}}
-        <div class="progress progress-success">
+        <div class="progress progress-success episode-progress">
     {{/if_eq}}
 
 {{else}}
-    <div class="progress progress-danger">
+    <div class="progress progress-danger episode-progress">
 {{/if_eq}}
 
     <span class="progressbar-back-text">{{episodeFileCount}} / {{episodeCount}}</span>

UI/Series/series.less

@@ -48,26 +48,16 @@
 
 .series-season {
   .card;
-  margin  : 80px 10px;
+  margin  : 30px 10px;
-  padding : 20px 40px;
+  padding : 10px 25px;
   .opacity(0.9);
-}
-
-.season-menu {
-  margin-top: 5px;
-
-  .season-menu-item {
-
-    .text {
-      .clickable;
-    }
 
-    a:hover {
+  .show-hide-episodes {
-      text-decoration: none;
+    .clickable();
-    }
+    text-align: center;
 
-    i:before {
+    i {
-      width: 10px;
+      .clickable();
     }
   }
 }