Series list interaction reworked

navycrow · Apr 26, 2014 · 22e168a · 22e168a
1 parent c14c90d
commit 22e168a
Show file tree

Hide file tree

Showing 5 changed files with 126 additions and 24 deletions.
diff --git a/css/main.css b/css/main.css
@@ -232,7 +232,7 @@ serieheader:hover aside {
 series-list {
     position: fixed;
     bottom: 0px;
-    height: 70%;
+    height: calc(100% - 40px);
     left: 0px;
     right: 0px;
     background-color: rgba(0,0,0,0.9);
@@ -264,17 +264,17 @@ series-list > div > h2 > i {
     line-height:25px;
     vertical-align: middle;
 }
-series-list:hover h2 {
+series-list:hover h2, series-list.active h2 {
     background-color: rgba(0,0,0,0.9);
 }
 
 .series {
-    overflow-y: scroll;
-bottom: 12px;
-top: 85px;
-position: absolute;
-right: 20px;
-left: 20px;
+    overflow-y: auto;
+    bottom: 12px;
+    top: 85px;
+    position: absolute;
+    right: 20px;
+    left: 20px;
     text-align: center;
 }
 .series serieheader > div {
@@ -808,7 +808,7 @@ a:hover i.glyphicon-plus-sign {
 
 
 calendar-event .progress {
-    background-color: rgba(55,55,55,0.5);
+    background-color: rgba(200,200,200,0.5);
     height: auto;
     margin: 3px;
 
@@ -820,6 +820,10 @@ calendar-event .progress-bar {
     height:auto;
 }
 
+.progress-bar {
+    color: black;
+}
+
 calendar-event a.glyphicon-chevron-down {
     float:left;
 }
@@ -834,6 +838,13 @@ calendar-event .dropdown-menu {
     border: 1px solid white;
 }
 
+calendar-event .dropdown-menu a:hover , calendar-event .dropdown-menu a:hover a,  calendar-event .dropdown-menu a:hover a span {
+    text-decoration: none;
+    color: #262626 !important;
+    background-color: #f5f5f5;
+}
+
+
 .glyphicon.glyphicon-chromecast {
     background-image: url('../img/chromecast_on.png');
     background-size: contain;
@@ -862,4 +873,9 @@ calendar-event h2 {
     left: 0px;
     right: 0px; 
     bottom: 0px; 
+}
+
+.season p.seasonposter {
+    width: 150px;
+    height: 220px;
 }
diff --git a/img/spinner.gif b/img/spinner.gif
diff --git a/js/directives/lazyBackground.js b/js/directives/lazyBackground.js
@@ -13,17 +13,18 @@ angular.module('DuckieTV.directives.lazybackground', [])
         link: function($scope, element, attrs) {
             element = angular.element(element);
             attrs.ngHide = true;
+
             attrs.$observe('lazyBackground', function(newSrc) {
                 if (newSrc == "") return;
-                element.css({
-                    'transition': 'opacity 0.5s ease-in',
-                    'opacity': 0
-                });
+                element.attr('style', 'transition: opacity 0.5s ease-in; opacity: 0.5; background-image: url(../img/spinner.gif); background-position: center center; background-size: initial !important');
+
                 var img = $document[0].createElement('img');
                 img.onload = function() {
                     element.css({
                         'background-image': 'url(' + newSrc + ')',
-                        'opacity': '1'
+                        'opacity': '1',
+                        'background-position': '',
+                        'background-size': ''
                     });
                 };
                 img.onerror = function(e) {

diff --git a/js/directives/seriesList.js b/js/directives/seriesList.js
@@ -1,17 +1,52 @@
 angular.module('DuckieTV.directives.serieslist', [])
 
-.directive('seriesList', function(FavoritesService) {
+.directive('seriesList', function(FavoritesService, $rootScope, TraktTV) {
     return {
         restrict: 'E',
         transclude: true,
         templateUrl: "templates/home-series.html",
         link: function($scope, iElement) {
 
+            /**
+             * Typeahead add functions
+             */
+            $scope.search = {
+                query: undefined,
+                results: null
+            }
+
+
             $scope.activated = false;
             $scope.activeId = null;
+            $scope.searchingForSerie = false;
+            $scope.serieAddFocus = false;
+
+            $scope.mode = $rootScope.getSetting('series.displaymode');
+
+            $scope.setMode = function(mode, temporary) {
+                if (!temporary) {
+                    $rootScope.setSetting('series.displaymode', mode);
+                }
+                $scope.mode = mode;
+            }
+
+            $scope.go = function(serieID, episode) {
+                console.log('doubleclick!', serieID, episode);
+                window.location.href = '#/serie/' + serieID + '/episode/' + episode.getID();
+            }
+
+            $scope.enableAdd = function() {
+                $scope.searchingForSerie = true;
+                $scope.serieAddFocus = true;
+            }
+
+            $scope.disableAdd = function() {
+                $scope.searchingForSerie = false;
+                console.log("Disable!");
+            }
+
 
             $scope.activate = function(el) {
-                console.log('Activating!', el);
                 if ($scope.activated) {
                     return $scope.closeDrawer();
                 }
@@ -22,6 +57,7 @@ angular.module('DuckieTV.directives.serieslist', [])
                 document.body.appendChild(d);
                 iElement.toggleClass('active');
                 $scope.activated = true;
+
             }
 
 
@@ -52,10 +88,52 @@ angular.module('DuckieTV.directives.serieslist', [])
                 })
             }
 
-
             $scope.getAirDate = function(serie) {
                 return new Date(serie.firstaired).toString()
             }
+
+            $scope.localFilterString = '';
+
+            $scope.setFilter = function(val) {
+                $scope.localFilterString = val;
+            }
+            $scope.localFilter = function(el) {
+                return el.name.toLowerCase().indexOf($scope.localFilterString.toLowerCase()) > -1;
+            }
+
+            $scope.execFilter = function() {
+                $location.path("/series/" + $scope.favorites.filter($scope.localFilter)[0].TVDB_ID);
+            }
+
+            $scope.findSeries = function() {
+                return TraktTV.disableBatchMode().findSeries($scope.search.query).then(function(res) {
+                    TraktTV.enableBatchMode();
+                    $scope.search.results = res.series;
+                });
+            };
+
+            $scope.selectFirstResult = function() {
+                var serie = $scope.search.results[0];
+                $scope.selectSerie(serie);
+            }
+
+            $scope.selectSerie = function(serie) {
+                $scope.selected = serie.name;
+                $scope.searchingForSerie = false;
+                $scope.search.query = undefined;
+                $scope.search.results = null;
+                TraktTV.enableBatchMode().findSerieByTVDBID(serie.tvdb_id).then(function(serie) {
+                    FavoritesService.addFavorite(serie).then(function() {
+                        $rootScope.$broadcast('storage:update');
+                    });
+                });
+
+                $scope.selected = '';
+            }
+
+            $rootScope.$on('serieslist:empty', function() {
+                $scope.activate();
+            }.bind(this));
         }
     }
 })
diff --git a/templates/home-series.html b/templates/home-series.html
@@ -1,7 +1,8 @@
  <div>
       <h2 ng-click="activate(this)" tooltip="Hotkey: alt+s" >
         <i class="glyphicon glyphicon-chevron-up" ng-class="{'glyphicon-chevron-up' : !activated, 'glyphicon-chevron-down': activated }"></i>
-         <a accesskey="s">Click for series you're watching</a> 
+         <a accesskey="s" ng-if="!activated">Click for series you're watching</a>
+         <a accesskey="s" ng-if="activated">Hide series you're watching</a>  
          <i class="glyphicon"  ng-class="{'glyphicon-chevron-up' : !activated, 'glyphicon-chevron-down': activated }"></i>
       </h2>
 
@@ -11,16 +12,16 @@ <h2 ng-click="activate(this)" tooltip="Hotkey: alt+s" >
           <input type='text' focus-watch="'isFiltering'"  placeholder='filter your local library' ng-change='setFilter(localFilterString)' ng-model='localFilterString' style='float:left; width: 50%;'>
         </form>
 
-        <a accesskey="a" tooltip="Add series to your favorites list" ng-if="searchingForSerie == false" ng-click="enableAdd();" style='float:left'>
+        <a accesskey="a" tooltip="Add series to your favorites list (Hotkey: alt+a)" ng-if="searchingForSerie == false" ng-click="enableAdd();" style='float:left'>
           <i class="glyphicon glyphicon-plus-sign"></i> Add a show
         </a>
-        <a tooltip="Click to return to your favorites list" ng-if="searchingForSerie == true" ng-click="disableAdd()" style='float:left'>
-          <i class="glyphicon glyphicon-ok-sign"></i> Done adding
+        <a tooltip="Click to return to your favorites list" ng-if="searchingForSerie == true" ng-click="disableAdd()" style='float:left; line-height:40px'>
+          <i class="glyphicon glyphicon-ok-sign"></i> I'm done adding shows
         </a>
 
         <form ng-submit="selectFirstResult()" ng-if="searchingForSerie">
-           <input ng-focus="searchingForSerie" ng-model="search.query" placeholder="Type a series name to add to your favorites"
-            ng-change="findSeries()" focus-watch="searchingForSerie" class="form-control"  style='float:left; width: 50%;'> <i ng-show="loadingSeries" class="glyphicon glyphicon-refresh" ></i>
+           <input ng-model="search.query" placeholder="Type a series name to add to your favorites"
+            ng-change="findSeries()" focus-watch="serieAddFocus" class="form-control"  style='float:left; width: 50%; margin-left: 10px;border: 1px solid white; font-size: 20px; height: auto; background-color: rgb(17, 17, 17);'> <i ng-show="loadingSeries" class="glyphicon glyphicon-refresh" ></i>
         </form>
 
         <a tooltip="Search your local library (hotkey: alt + / )" accesskey="/" ng-click="isFiltering = true; setMode('search',true);">
@@ -34,11 +35,17 @@ <h2 ng-click="activate(this)" tooltip="Hotkey: alt+s" >
         </a>
       </div>
 
+    <p class="alert alert-info" ng-if="favorites.length == 0 && !searchingForSerie" style='margin:20px; position:relative; z-index:1000'>
+      <strong>You have no series yet!</strong><br>
+      Make DuckieTV work for you by adding the TV shows you like. Shows that are currently airing will appear on the calendar so that you can easily keep track of what is airing when. <br>
 
+        <button ng-click="enableAdd()"><i class="glyphicon glyphicon-plus-sign"></i> Add your first show now</button>
+    </p>
     <div ng-if="searchingForSerie" class="series">
 
+
       <h2>Start typing to search for shows to add to your favorites list</h2>
-      <p>Hit [return] to add the first search result to your favorites</p>
+      <p>Pro Tip: Hit [return] to add the first search result to your favorites</p>
       <serieHeader ng-repeat="serie in search.results" data="serie" no-overview="1" mode="{{mode}}" ng-click="selectSerie(serie)"></serieHeader>
     </div>