fix(#262): disable external track search and filters (incl. YouTube) (#…

…278)

Contributes to #262, to save YouTube API quota.

* disable external track search (incl. YouTube)

* remove source filters + change wording when no results

app/templates/searchPage.html

@@ -1,5 +1,5 @@
 <style type="text/css">
-/*<![CDATA[*/
+	/*<![CDATA[*/
 
 	#results {
 		padding-bottom: 30px;
@@ -23,21 +23,21 @@
 	}
 
 	#users .noResult {
-		background-image:url('/images/no-result-user.png');
+		background-image: url('/images/no-result-user.png');
 	}
 
 	#tracks .noResult {
-		background-image:url('/images/no-result-music.png');
+		background-image: url('/images/no-result-music.png');
 	}
 
 	#playlists .noResult {
-		background-image:url('/images/no-result-playlist.png');
+		background-image: url('/images/no-result-playlist.png');
 	}
 
 
 
 
-/*]]>*/
+	/*]]>*/
 </style>
 
 
@@ -69,39 +69,31 @@
 
 	<div class="sub-container">
 
-			<h2 class="head-name-tab">
-				<span>Search results for: {{q}}</span>
-			</h2>
-			<div id="search-filters">
-				<span>Filter: </span>
-				<ul>
-					<li class="whyd" ><div></div></li>
-					<li class="soundcloud" ><div></div></li>
-					<li class="youtube" ><div></div></li>
-
-				</ul>
-			</div>
-
+		<h2 class="head-name-tab">
+			<span>Search results for: {{q}}</span>
+		</h2>
 
-		<div id="results"class="posts" >
+		<div id="results" class="posts">
 
 			<div id="tracks" class="resultPage tracks">
 				{{{postsHtml}}}
 				<div class="noResult">
-					<h2>Sorry, the Internet has never heard of this track!</h2>
-					<p>Maybe you should write it!</p>
+					<h2>Not found on Openwhyd yet.<br />Be the first to add it!</h2>
+					<p>Install <a href="/button">the "Add Track" button</a> into your web browser to add a track directly from
+						other websites.</p>
+					<p style="margin-top: 10px;">Or you can paste the URL of the track in the search bar, above.</p>
 				</div>
 			</div>
 
 			<div id="users" class="resultPage">
 				<ul>
-				{{#users}}
+					{{#users}}
 
 					<li class="user">
 						<a href="/u/{{_id}}" target="_blank">
 							<div class="thumb" style="background-image:url('/img/u/{{_id}}');"></div>
 							<span class="username">{{name}}<span>
-								{{#lastTrack}}<p>Last track: <span>{{name}}</span></p>{{/lastTrack}}
+									{{#lastTrack}}<p>Last track: <span>{{name}}</span></p>{{/lastTrack}}
 						</a>
 						<span class="userSubscribe {{#isSubscribed}}subscribed{{/isSubscribed}}"
 							{{#isUserLogged}}
@@ -118,7 +110,7 @@ <h2>Sorry, the Internet has never heard of this track!</h2>
 						</span>
 					</li>
 
-				{{/users}}
+					{{/users}}
 				</ul>
 				{{^users}}
 				<div class="noResult">
@@ -140,7 +132,7 @@ <h2>It's lonely in here!</h2>
 					</a>
 					<span>{{nbTracks}} tracks</span>
 					{{#author}}
-					<div class="author" >
+					<div class="author">
 						<span style="background-image:url('/img/u/{{_id}}');"></span>
 						<a href="/u/{{_id}}">{{name}}</a>
 					</div>
@@ -161,4 +153,4 @@ <h2>No playlist was found for this query</h2>
 
 </div>
 
-<script src="/js/searchPage.js"></script>
+<script src="/js/searchPage.js"></script>

public/css/common.css

@@ -666,26 +666,6 @@ input.search-input:focus{
 	margin: 0;
 }
 
-#search-filters{
-	float: right;
-	width: 150px;
-	margin-top: -35px;
-	position: relative;
-	z-index: 10;
-}
-#search-filters span{float: left;margin-right: 3px;}
-#search-filters ul{float: left;width: 100px;margin-top: -5px; }
-#search-filters li{width: 24px; height: 24px; background-repeat: no-repeat;display: inline-block;margin: 0 2px;cursor: pointer;}
-#search-filters li.whyd{background-image: url(/images/icon-whyd.png);}
-#search-filters li.soundcloud{background-image: url(/images/icon-soundcloud.png);}
-
-#search-filters li.youtube{background-image: url(/images/icon-youtube.png);}
-
-#search-filters li div{width: 100%;height: 100%;background-repeat: no-repeat;background-position: center;}
-#search-filters li:hover div{background-color: white; opacity: .64;background-image: url(/images/SearchIconFilterHover.png)}
-#search-filters li.active div{background-color: white; opacity: .84;background-image: url(/images/SearchIconFilterValidated.png)}
-
-
 #searchResults {
 	display: none;
 	width: 384px;

public/js/searchPage.js

@@ -7,33 +7,8 @@ function selectTab() {
     .split('#')
     .pop();
   $('.resultPage#' + current).show();
-
-  if (current == 'tracks') {
-    $('#search-filters').show();
-  } else {
-    $('#search-filters').hide();
-  }
 }
 
-/** FILTER **/
-$('#search-filters li').on('click', function() {
-  $('.posts .post').show();
-
-  if (!$(this).hasClass('active')) {
-    $('#search-filters li').removeClass('active');
-    $(this).addClass('active');
-    if ($(this).hasClass('soundcloud')) {
-      $('.posts .post:not(.sc)').hide();
-    } else if ($(this).hasClass('youtube')) {
-      $('.posts .post:not(.yt)').hide();
-    } else {
-      $('.posts .post.sc, .posts .post.yt').hide();
-    }
-  } else {
-    $(this).removeClass('active');
-  }
-});
-
 $('#tabSelector a').click(selectTab);
 if (window.location.href.indexOf('tab=') != -1) {
   var tab = (window.location.href.split('tab=').pop() || '').split('&')[0];

public/js/whyd.js

@@ -217,7 +217,11 @@ function _fetchPostInfo(pid, action, callback) {
 
 window.searchExternalTracks = (function() {
   return function(query, handleResult) {
-    playem.searchTracks(query, handleResult);
+    // playem.searchTracks(query, handleResult);
+    console.info(
+      'ignoring external search, see https://github.com/openwhyd/openwhyd/issues/262'
+    );
+    handleResult(); // callback to signal that no more results are going to be returned
   };
 })();