Add Extra Movie Search Button (#461)

* Add Extra Movie Search Button Auto search for movies by clicking a button whether it's due to be released soon or currently playing in theatres * Hide button for TV shows and change now playing endpoint * Remove second down chevron
lokenx · Jun 10, 2017 · dd6c2b0 · dd6c2b0
1 parent ff35094
commit dd6c2b0
Show file tree

Hide file tree

Showing 5 changed files with 92 additions and 3 deletions.
diff --git a/client/lib/stylesheets/_search.scss b/client/lib/stylesheets/_search.scss
@@ -22,6 +22,30 @@
 
 #search-form {
   padding-top: 1rem;
+
+  .input-group-addon {
+    .btn-group {
+      position: absolute;
+      right: 45px;
+      z-index: 3;
+      top: 5px;
+      box-shadow: 0 0 0;
+    }
+
+    .dropdown-menu {
+      a {
+        display: block;
+        padding: 3px 20px;
+        clear: both;
+        line-height: 1.5;
+      }
+    }
+  }
+
+  .open > .btn-primary-outline.dropdown-toggle {
+    background-color: #FF8A01;
+    border-color: #FF8A01;
+  }
 }
 
 .search-selector {

diff --git a/client/templates/requests/requests.js b/client/templates/requests/requests.js
@@ -249,6 +249,7 @@ Template.requests.events({
   'click .search-selector a' : function (event, template) {
     var type = $(event.target).text();
     template.searchType.set(type);
+
   },
   'click .approve-item' : function (event, template) {
     var title = this.title;

diff --git a/client/templates/search/search.html b/client/templates/search/search.html
@@ -8,8 +8,17 @@ <h1>Search</h1>
         <form class="form-inline" id="search-form">
           <div class="form-group">
             <div class="input-group">
-              <input type="text" class="form-control" id="search-input" size="35" placeholder="Search" {{searchDisabled}} autofocus="">
+              <input type="text" class="form-control" id="search-input" size="55" placeholder="Search" {{searchDisabled}} autofocus="">
               <div class="input-group-addon">
+                <div class="btn-group">
+                  <a href="#" class="btn btn-sm btn-primary-outline dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
+                    Suggestions
+                  </a>
+                  <ul class="dropdown-menu">
+                    <li><a id="upcoming" href="#">Coming Soon</a></li>
+                    <li><a id="now_playing" href="#">In Theaters</a></li>
+                  </ul>
+                </div>
                 {{#if searching}}
                   <i class="fa fa-spinner fa-pulse"></i>
                 {{else}}

diff --git a/client/templates/search/search.js b/client/templates/search/search.js
@@ -58,6 +58,13 @@ Template.search.events({
     template.searchType.set(type);
     template.results.set([]);
     $('#search-input').trigger('keyup');
+
+    var btnGroup = $('#search-form .input-group-addon > .btn-group');
+    if (btnGroup.css('visibility') == 'hidden') {
+      btnGroup.css('visibility', 'visible');
+    } else {
+      btnGroup.css('visibility', 'hidden');
+    }
   },
   'keyup  #search-input': _.throttle(function (event, template) {
     var searchterm = $(event.target).val().trim();
@@ -130,6 +137,50 @@ Template.search.events({
       })
     }
   },
+  'click #now_playing': function(event, template) {
+    var searchterm = 'now_playing';
+    var searchType = template.searchType.get();
+
+    if (searchterm.length > 1) {
+      template.searching.set(true);
+      template.error.set(false);
+      Meteor.call("searchContent", searchterm, searchType, function (error, result) {
+        if (error) {
+          console.error(error);
+          template.searching.set(false);
+          template.error.set(true);
+        } else if (result.length) {
+          template.searching.set(false);
+          template.results.set(result);
+        } else {
+          template.searching.set(false);
+          template.error.set(true);
+        }
+      });
+    }
+  },
+  'click #upcoming': function(event, template) {    
+    var searchterm = 'upcoming';
+    var searchType = template.searchType.get();
+
+    if (searchterm.length > 1) {
+      template.searching.set(true);
+      template.error.set(false);
+      Meteor.call("searchContent", searchterm, searchType, function (error, result) {
+        if (error) {
+          console.error(error);
+          template.searching.set(false);
+          template.error.set(true);
+        } else if (result.length) {
+          template.searching.set(false);
+          template.results.set(result);
+        } else {
+          template.searching.set(false);
+          template.error.set(true);
+        }
+      });
+    }
+  },
   'click .go-to-top': function () {
     $('body').animate({ scrollTop: 0 }, "slow")
   }

diff --git a/server/methods/helpers/movies/TMDBSearchMethods.js b/server/methods/helpers/movies/TMDBSearchMethods.js
@@ -10,8 +10,12 @@ Meteor.methods({
     check(TMDBSearch.api, String);
     check(TMDBSearch.language, String);
 
-    try {
-      var response = HTTP.call("GET", "https://api.themoviedb.org/3/search/" + type + "?api_key=" + TMDBSearch.api + "&language=" + TMDBSearch.language + "&query=" + search, {});
+    try {      
+      if (search === 'upcoming' || search === 'now_playing') {
+        var response = HTTP.call("GET", "https://api.themoviedb.org/3/movie/" + search + "?api_key=" + TMDBSearch.api + "&language=" + TMDBSearch.language, {});
+      } else {
+        var response = HTTP.call("GET", "https://api.themoviedb.org/3/search/" + type + "?api_key=" + TMDBSearch.api + "&language=" + TMDBSearch.language + "&query=" + search, {});
+      }
     }
     catch (error) {
       console.log(error);