Update to v0.4.0 don't remove but move tags to IndexedDB & update the…

…m from Spotify. Set track as not found. Display app updates in UI. Better handling of 429 errors for Spotify. Bugfixes. Add Changelor. Add update pages for v0.4.0. Handle versions like 0.10.23 in update script. Refactoring. Default volume for audio preview = 50%.

CHANGELOG.md

@@ -0,0 +1,17 @@
+# Changelog
+
+## v0.4.0
+
+- [x] Store tags in IndexedDB instead of Local Storage
+- [x] Pagination
+- [x] Filter tags by status
+- [x] Handle new Shazam login & API
+- [x] Manually select the track we want from Spotify
+- [x] Audio preview
+- [x] Set a track as "not found" if none of the results is corresponding
+- [x] New icons
+- [x] Handle "Too Many Requests" error on Spotify
+- [x] Update AngularJS to 1.5.9
+- [x] Update scripts handle versions like 0.2.10 (two diggits / part)
+- [x] Do not match a Spotify track if the title is not the same (lower case matching)
+- [x] Bugfixes

README.md

@@ -56,31 +56,14 @@ grunt build
 grunt bundle
 ```
 
-## Roadmap for v0.4.0
-
-- Do not remove from localStorage and load it all again, get tags from localStorage and add them in DB to keep spotifyId
-- Create an update page to let the users know of the new functionnalities
-- Set a track to "not found" (status = 5? manual search, will not search automatically again for these tags)
-- (Use bulk* methods from Dexie.js to speedup tags addition/update to DB or transactions)
-- [x] Handle new Shazam login & API
-- [x] Match track name in lower case
-- [x] Filter functionnality to show only tags found/not found
-- [x] New icons
-- [x] Pagination
-- [x] Handle "Too Many Requests" error on Spotify
-- [x] Update AngularJS to 1.5.9
-- [x] Manually select the track wanted from Spotify search results
-- [x] Custom update scripts, handle versions like 0.2.10
-- [x] Store tags and Spotify tracks found in IndexedDB (use Dexie.js)
-- [x] Remove tags from localStorage
-- [x] When select a different Spotify track for a tag, remove the old one from playlist (if not associated with another tag) and add the new one
-- [x] Replace SVG icons with SimpleLineIcons
-- [x] Add audio preview ("preview_url" from Spotify API)
-
 ## Roadmap for v1.0
 
-- Refactor. Code is messy at some places...
-- Use React/Inferno/Vue.js/Angular 2.x instead of Angular 1.x
+- [ ] Refactor. Code is messy at some places...
+- [ ] Use React/Inferno/Vue.js/Angular 2.x instead of Angular 1.x
+- [ ] Use Promises instead of callbacks
+- [ ] Use bulk* methods from Dexie.js to speedup tags addition/update to DB or transactions
+- [ ] Put "new search" (in TagsCtrl) in a separate directive/controller
+- [ ] Add volume control for audio preview
 
 ## Disclaimer
 

_locales/en/messages.json

@@ -65,6 +65,10 @@
     "message": "Loading...",
     "description": ""
   },
+  "updatingApp": {
+    "message": "Shazify is updating to latest version...",
+    "description": ""
+  },
   "doNotCloseBrowser": {
     "message": "Please do not close your browser",
     "description": ""
@@ -111,6 +115,14 @@
     "message": "Please select the right track below",
     "description": ""
   },
+  "notFound": {
+    "message": "Not found",
+    "description": ""
+  },
+  "notFoundText": {
+    "message": "No track is matching.",
+    "description": ""
+  },
   "saveSelectedTrack": {
     "message": "Save the selected track",
     "description": ""

_locales/fr/messages.json

@@ -65,6 +65,10 @@
     "message": "Chargement...",
     "description": ""
   },
+  "updatingApp": {
+    "message": "Shazify se met à jour à la dernière version...",
+    "description": ""
+  },
   "doNotCloseBrowser": {
     "message": "Veuillez ne pas fermer votre navigateur",
     "description": ""
@@ -111,6 +115,14 @@
     "message": "Veuillez sélectionner le bon morceau ci-dessous.",
     "description": ""
   },
+  "notFound": {
+    "message": "Non trouvé",
+    "description": ""
+  },
+  "notFoundText": {
+    "message": "Aucun morceau ne correspond.",
+    "description": ""
+  },
   "saveSelectedTrack": {
     "message": "Sauvegarder ce choix",
     "description": ""

popup/partials/tags.html

@@ -4,7 +4,7 @@
 			<i class="icon-tag"></i>
 		</a>
 		<div class="dropdown" ng-show="shouldShowFilters">
-			<a class="filter" ng-repeat="filter in statusFilters" ng-click="toggleStatusFilter(filter.status)" ng-class="{ selected: tagsStatusFilters.indexOf(filter.status) !== -1 }"><i class="{{filter.icon}}"></i></a>
+			<a class="filter" ng-repeat="filter in statusFilters" ng-click="toggleStatusFilter(filter.status)" ng-class="{ selected: isFilterSelected(filter.status) }"><i class="{{filter.icon}}"></i></a>
 		</div>
 		<a class="simplelineicon clickable" ng-click="refreshTags()" analytics-on analytics-event="Manual refresh" analytics-category="Tags" ng-if="updating() === false">
 			<i class="icon-refresh"></i>
@@ -19,7 +19,7 @@
 	<h2><span chrome-translate>myTags</span> <span class="tags-count">({{filteredCount}}/{{totalCount}})</span></h2>
 </div>
 <div class="tags-list">
-	<div class="updating" ng-if="updating() === true">
+	<div class="waiting-overlay updating" ng-if="updating() === true && updatingApp() === false">
 		<div class="content">
 			<div class="simplelineicon">
 				<i class="icon-refresh icon-spin"></i>
@@ -28,14 +28,23 @@ <h2><span chrome-translate>myTags</span> <span class="tags-count">({{filteredCou
 			<p chrome-translate>doNotCloseBrowser</p>
 		</div>
 	</div>
-	<div class="loading" ng-if="loading === true && updating() === false">
+	<div class="waiting-overlay loading" ng-if="loading === true && updating() === false && updatingApp() === false">
 		<div class="content">
 			<div class="simplelineicon">
 				<i class="icon-refresh icon-spin"></i>
 			</div>
 			<p chrome-translate>loadingTags</p>
 		</div>
 	</div>
+	<div class="waiting-overlay updating-app" ng-if="updatingApp() === true">
+		<div class="content">
+			<div class="simplelineicon">
+				<i class="icon-settings icon-spin-slow"></i>
+			</div>
+			<p chrome-translate class="updating-app">updatingApp</p>
+			<p chrome-translate>doNotCloseBrowser</p>
+		</div>
+	</div>
 	<div class="no-tags" ng-if="!items">
 		<p class="simplelineicon">
 			<i class="icon-exclamation"></i>
@@ -44,12 +53,12 @@ <h2><span chrome-translate>myTags</span> <span class="tags-count">({{filteredCou
 	</div>
 	<div class="tag" nb-class="{'tag-success': tag.status == 3, 'tag-search': tag.status == 1, 'tag-error': tag.status == 2}" ng-repeat="tag in items track by tag.shazamId">
 		<div class="tag-status">
-			<div class="success clickable" ng-if="tag.status >= 3" ng-click="retryTagSearch(tag)" analytics-on analytics-event="Retry tag search on already found" analytics-category="Tags" ng-class="{'pending': tag.status == 3}">
+			<div class="success clickable" ng-if="tag.status == 3 || tag.status == 4" ng-click="retryTagSearch(tag)" analytics-on analytics-event="Retry tag search on already found" analytics-category="Tags" ng-class="{'pending': tag.status == 3}">
 				<div class="simplelineicon">
 					<i class="icon-check"></i>
 				</div>
 			</div>
-			<div class="error" ng-if="tag.status == 2">
+			<div class="error" ng-if="tag.status == 2 || tag.status == 5">
 				<div class="simplelineicon clickable" ng-click="retryTagSearch(tag)" analytics-on analytics-event="Retry tag search" analytics-category="Tags">
 					<i class="icon-close"></i>
 				</div>
@@ -113,6 +122,18 @@ <h2><span chrome-translate>myTags</span> <span class="tags-count">({{filteredCou
 			<h3 chrome-translate>searchResults</h3>
 			<hr />
 			<p chrome-translate>searchResultsPleaseSelect</p>
+			<a ng-click="newSearch.setNotFound()" ng-class="{selected: newSearch.tag.status == 5}" class="tag search-result not-found clickable">
+				<div class="tag-status" ng-class="{ hidden: !(newSearch.tag.status == 5) }">
+					<div class="success">
+						<div class="simplelineicon">
+							<i class="icon-check"></i>
+						</div>
+					</div>
+				</div>
+				<img src="img/placeholder.png" class="tag-image">
+				<div class="tag-name" chrome-translate>notFound</div>
+				<div class="tag-artist" chrome-translate>notFoundText</div>
+			</a>
 			<a ng-click="newSearch.selectTrack(track)" ng-class="{selected: track.id == newSearch.selectedTrack.id}" class="tag search-result clickable" ng-repeat="track in newSearch.results track by track.id">
 				<div class="tag-status" ng-class="{ hidden: !newSearch.isSelectedTrack(track) }">
 					<div class="success">

src/background/SpotifyService.js

@@ -496,6 +496,7 @@
 								});
 							// Too many requests, wait and try again
 							} else if(jqXHR.status === 429) {
+								Logger.error('[Spotify] Too many requests, waiting 1s... ('+ jqXHR.status +') : '+textStatus+'.');
 								setTimeout(function() {
 									Spotify.call(options, callback);
 								}, 1000);
@@ -564,8 +565,16 @@
 							});
 						})
 						.fail(function(jqXHR, textStatus) {
-							Logger.error('[Spotify] Error getting token : '+textStatus+'.');
-							callback(false);
+							if(jqXHR.status === 429) {
+								Logger.error('[Spotify] Too many requests, waiting 1s... ('+ jqXHR.status +') : '+textStatus+'.');
+
+								setTimeout(function() {
+									Spotify.refreshToken(callback);
+								}, 1000);
+							} else {
+								Logger.error('[Spotify] Error getting token : '+textStatus+'.');
+								callback(false);
+							}
 						});
 				} else {
 					Logger.info('[Spotify] No refresh token stored... open login.');
@@ -595,8 +604,16 @@
 					Spotify.saveAccessToken(data, callback);
 				})
 				.fail(function(jqXHR, textStatus) {
-					Logger.error('[Spotify] Error getting access token : '+ textStatus +'.');
-					callback(false);
+					if(jqXHR.status === 429) {
+						Logger.error('[Spotify] Too many requests, waiting 1s... ('+ jqXHR.status +') : '+textStatus+'.');
+
+						setTimeout(function() {
+							Spotify.getAccessToken(authCode, callback);
+						}, 1000);
+					} else {
+						Logger.error('[Spotify] Error getting access token : '+ textStatus +'.');
+						callback(false);
+					}
 				});
 		},