Merge pull request #9 from leeroybrun/v0.2.0

v0.2.0

Changelog:
- All tasks are performed on the background script
- Logging and logs export
- Cleaning of all extension's data
- Rotating icon when update is in progress
- Handle adding more than 100 tracks to Spotify playlists, API calls will be splitted
- Support new MyShazam website and download tags in only one request (from history download)
- Update script to apply changes between versions
- Removed jQuery from Angular part
- Add intro to help user setup the accounts
- New font (Helvetiva Neue is not available on Windows...)
- Small UI improvement & fixes
- Bugfixes

.gitignore

@@ -2,5 +2,6 @@
 node_modules/
 popup/popup.css
 popup/popup.js
+background/background.js
 dist/
 build/

README.md

@@ -1,7 +1,7 @@
 Shazam2Spotify
 =====================
 
-Chrome extension used to export your Shazam tags to a Spotify playlist.
+Chrome extension used to sync your Shazam tags to a Spotify playlist.
 
 [![ScreenShot](https://raw.githubusercontent.com/leeroybrun/chrome-shazam2spotify/master/promo_1400x560.png)](http://youtu.be/Zi1VRJqEI0Q)
 
@@ -46,3 +46,9 @@ grunt build
 ```
 grunt bundle
 ```
+
+## Roadmap for v0.2.0
+
+- Add custom update scripts, this let us manage how to handle updates per version
+	- Should call all update scripts from current version to new version
+	- Update script for v0.2.0 : clear data

_locales/en/messages.json

@@ -1,8 +1,54 @@
 {
   "appDesc": {
-    "message":"Export your Shazam tags to a new Spotify playlist",
+    "message":"Sync your Shazam tags to a Spotify playlist",
     "description":"The description of the application, displayed in the web store."
   },
+
+  "introWelcome": {
+    "message": "Welcome",
+    "description": ""
+  },
+  "introWelcomeText": {
+    "message": "<p>In just a few seconds, your Shazam tags will be synched with Spotify.</p><p>First, we need to connect<br />to Shazam and Spotify services.</p>",
+    "description": ""
+  },
+  "introStart": {
+    "message": "Start >",
+    "description": ""
+  },
+  "introNext": {
+    "message": "Next >",
+    "description": ""
+  },
+  "introShazamLoggedOutText": {
+    "message": "<p>First, we need to be logged in on Shazam.</p><p>Open the login page and click on the « Login » button.</p><p>Once done, you can open Shazam2Spotify again.</p>",
+    "description": ""
+  },
+  "introShazamLoggedInText": {
+    "message": "<p>Congratulations !</p><p>You have successfully logged in to Shazam.</p><p>Now, let’s go to the next step...</p>",
+    "description": ""
+  },
+  "introOpenShazamLogin": {
+    "message": "Open the login page",
+    "description": ""
+  },
+  "introSpotifyLoggedOutText": {
+    "message": "<p>Finally, you need to let us create and manage a Spotify playlist.</p><p>Click on the following button, and then follow the onscreen instructions.</p>",
+    "description": ""
+  },
+  "introSpotifyLoggedInText": {
+    "message": "<p>We are now ready to<br />sync your Shazam tags<br />with Spotify.</p><p>The first sync will start now.</p><p>Then, when you need to update your tags, just<br />open the extension again.</p>",
+    "description": ""
+  },
+  "introOpenSpotifyLogin": {
+    "message": "Authorize app",
+    "description": ""
+  },
+  "introEnd": {
+    "message": "Start synchronization >",
+    "description": ""
+  },
+
   "myTags": {
   	"message": "My Shazam Tags",
   	"description": ""
@@ -89,12 +135,24 @@
     "message": "Cancel",
     "description": ""
   },
+  "advancedSettings": {
+    "message": "Advanced settings",
+    "description": ""
+  },
   "clearData": {
     "message": "Clear all data",
     "description": ""
   },
   "clearDataText": {
     "message": "If you have some troubles with the extension, you can clear all it's stored data here.",
     "description": ""
+  },
+  "exportLogs": {
+    "message": "Export logs",
+    "description": ""
+  },
+  "exportLogsText": {
+    "message": "If you need to debug the extension, you can export the logs here.",
+    "description": ""
   }
 }

_locales/fr/messages.json

@@ -1,8 +1,54 @@
 {
   "appDesc": {
-    "message":"Exportez vos tags Shazam dans une playlist Spotify",
+    "message":"Synchronisez vos tags Shazam dans une playlist Spotify",
     "description":"The description of the application, displayed in the web store."
   },
+
+  "introWelcome": {
+    "message": "Bienvenue",
+    "description": ""
+  },
+  "introWelcomeText": {
+    "message": "<p>D’ici quelques secondes, vos tags Shazam seront synchronisés vers Spotify.</p><p>Pour commencer, nous devons connecter les différents services.</p>",
+    "description": ""
+  },
+  "introStart": {
+    "message": "Commencer >",
+    "description": ""
+  },
+  "introNext": {
+    "message": "Continuer >",
+    "description": ""
+  },
+  "introShazamLoggedOutText": {
+    "message": "<p>Commencons par nous connecter à Shazam.</p><p>Ouvrez la page de connexion et cliquez sur le bouton « Connexion ».</p><p>Une fois connecté, ouvrez à nouveau Shazam2Spotify.</p>",
+    "description": ""
+  },
+  "introShazamLoggedInText": {
+    "message": "<p>Félicitations !</p><p>Vous êtes bien connecté<br />à Shazam.</p><p>Passons maintenant à la suite...</p>",
+    "description": ""
+  },
+  "introOpenShazamLogin": {
+    "message": "Ouvrir la page de connexion",
+    "description": ""
+  },
+  "introSpotifyLoggedOutText": {
+    "message": "<p>Pour terminer, vous devez nous autoriser à créer et gérer une playlist Spotify.</p><p>Cliquez sur le bouton ci-dessous, puis suivez les instructions affichées.</p>",
+    "description": ""
+  },
+  "introSpotifyLoggedInText": {
+    "message": "<p>Nous sommes prêts à synchroniser vos tags Shazam dans Spotify.</p><p>La première synchronisation va maintenant s’effectuer.</p><p>Il vous suffira ensuite d’ouvrir à nouveau l’extension pour les<br />mettre à jour.</p>",
+    "description": ""
+  },
+  "introOpenSpotifyLogin": {
+    "message": "Autoriser l’application",
+    "description": ""
+  },
+  "introEnd": {
+    "message": "Lancer la synchronisation >",
+    "description": ""
+  },
+
   "myTags": {
   	"message": "Mes tags Shazam",
   	"description": ""
@@ -89,12 +135,24 @@
     "message": "Annuler",
     "description": ""
   },
+  "advancedSettings": {
+    "message": "Paramètres avancés",
+    "description": ""
+  },
   "clearData": {
     "message": "Effacer toutes les données",
     "description": ""
   },
   "clearDataText": {
     "message": "Si vous avez des problèmes avec l'extension, vous pouvez effacer toutes les données enregistrées ici.",
     "description": ""
+  },
+  "exportLogs": {
+    "message": "Exporter les logs",
+    "description": ""
+  },
+  "exportLogsText": {
+    "message": "Afin de déceler et débugger d'éventuels problèmes, vous pouvez exporter les logs de l'application.",
+    "description": ""
   }
 }

gruntfile.js

@@ -5,12 +5,12 @@ module.exports = function(grunt) {
 		archive_name: 'shazam2spotify-<%= pkg.version %>',
 		jshint: {
 			globals: { angular: true },
-			all: ['gruntfile.js', 'src/popup/js/**/*.js'],
+			all: ['gruntfile.js', 'src/popup/js/**/*.js', 'src/background/**/*.js'],
 			gruntfile: ['gruntfile.js']
 		},
 		concat: {
 			options: {
-				separator: ';',
+				separator: '\n\n',
 			},
 			css: {
 				files: {
@@ -22,6 +22,19 @@ module.exports = function(grunt) {
 					'popup/popup.js': [
 						'src/popup/js/app.js',
 						'src/popup/js/**/*.js'
+					],
+					'background/background.js': [
+						'src/background/lib/*.js',
+						'src/background/background.js',
+						'src/background/Helper.js',
+						'src/background/ChromeHelper.js',
+						'src/background/CanvasIcon.js',
+						'src/background/LoggerService.js',
+						'src/background/StorageHelper.js',
+						'src/background/SpotifyService.js',
+						'src/background/ShazamService.js',
+						'src/background/TagsService.js',
+						'src/background/UpdateService.js',
 					]
 				}
 			}
@@ -42,7 +55,7 @@ module.exports = function(grunt) {
 				}
 			},
 			js: {
-				files: ['src/popup/js/**/*.js'],
+				files: ['src/popup/js/**/*.js', 'src/background/**/*.js'],
 				tasks: ['build:js'],
 				options: {
 					spawn: false,
@@ -72,6 +85,7 @@ module.exports = function(grunt) {
                 files: [
                     {expand: true, src: ['_locales/**'], dest: 'build/'},
                     {expand: true, src: ['icons/**'], dest: 'build/'},
+                    {expand: true, src: ['background/**'], dest: 'build/'},
                     {expand: true, src: ['popup/**'], dest: 'build/'},
                     {expand: true, src: ['LICENCE'], dest: 'build/'},
                     {expand: true, src: ['manifest.json'], dest: 'build/'},

manifest.json

@@ -1,6 +1,6 @@
 {
   "name": "Shazam2Spotify",
-  "version": "0.1.6",
+  "version": "0.2.0",
   "manifest_version": 2,
   "description": "__MSG_appDesc__",
   "homepage_url": "http://www.leeroy.me",
@@ -10,6 +10,9 @@
     "128": "icons/icon128.png"
   },
   "default_locale": "en",
+  "background": {
+    "scripts": ["background/background.js"]
+  },
   "browser_action": {
     "default_icon": "icons/icon19.png",
     "default_title": "Shazam2Spotify",
@@ -19,10 +22,11 @@
     "tabs",
     "identity",
     "storage",
+    "background",
     "http://www.shazam.com/*",
     "https://www.shazam.com/*",
     "https://api.spotify.com/*",
     "https://accounts.spotify.com/api/*"
   ],
-  "content_security_policy": "script-src 'self' https://ajax.googleapis.com; object-src 'self'"
+  "content_security_policy": "script-src 'self' https://ssl.google-analytics.com https://fonts.googleapis.com; object-src 'self'"
 }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "chrome-shazam2spotify",
-  "version": "0.1.6",
+  "version": "0.2.0",
   "author": "Leeroy Brun <[email protected]>",
   "private": true,
   "description": "Chrome extension used to export your Shazam tags to a Spotify playlist",

popup/lib/ga.js

@@ -0,0 +1,8 @@
+var _gaq = _gaq || [];
+_gaq.push(['_setAccount', 'UA-57493072-3']);
+
+(function() {
+  var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+  ga.src = 'https://ssl.google-analytics.com/ga.js';
+  var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+})();

popup/partials/intro.html

@@ -0,0 +1,53 @@
+<div class="intro-steps" ng-switch="currentStep">
+	<div class="step step-1" ng-switch-when="1">
+		<div class="content">
+			<h1 chrome-translate>introWelcome</h1>
+			<div chrome-translate>introWelcomeText</div>
+			<div class="buttons">
+				<p><a class="pure-button next" ng-click="goTo(2)" chrome-translate analytics-on analytics-event="Start" analytics-category="Intro">introStart</a></p>
+			</div>
+		</div>
+	</div>
+	<div class="step step-2" ng-switch-when="2">
+		<div class="content">
+			<h1>
+				<span class="iconmelon" ng-class="{red: !login.shazam.status, green: login.shazam.status}">
+					<svg viewBox="0 0 32 32">
+						<g filter="">
+							<use xlink:href="#unlock" ng-if="!login.shazam.status"></use>
+							<use xlink:href="#lock" ng-if="login.shazam.status"></use>
+						</g>
+					</svg>
+				</span>
+				Shazam
+			</h1>
+			<div chrome-translate ng-if="!login.shazam.status">introShazamLoggedOutText</div>
+			<div chrome-translate ng-if="login.shazam.status">introShazamLoggedInText</div>
+			<div class="buttons">
+				<p ng-if="!login.shazam.status"><a class="pure-button pure-button-primary next" ng-click="login.shazam.openLogin()" chrome-translate analytics-on analytics-event="Open Shazam login" analytics-category="Intro">introOpenShazamLogin</a></p>
+				<p ng-if="login.shazam.status"><a class="pure-button next" ng-click="goTo(3)" chrome-translate analytics-on analytics-event="Go to Spotify slide" analytics-category="Intro">introNext</a></p>
+			</div>
+		</div>
+	</div>
+	<div class="step step-3" ng-switch-when="3">
+		<div class="content">
+			<h1>
+				<span class="iconmelon" ng-class="{red: !login.spotify.status, green: login.spotify.status}">
+					<svg viewBox="0 0 32 32">
+						<g filter="">
+							<use xlink:href="#unlock" ng-if="!login.spotify.status"></use>
+							<use xlink:href="#lock" ng-if="login.spotify.status"></use>
+						</g>
+					</svg>
+				</span>
+				Spotify
+			</h1>
+			<div chrome-translate ng-if="!login.spotify.status">introSpotifyLoggedOutText</div>
+			<div chrome-translate ng-if="login.spotify.status">introSpotifyLoggedInText</div>
+			<div class="buttons">
+				<p ng-if="!login.spotify.status"><a class="pure-button pure-button-primary centered-loader-container" ng-class="{'centered-loader-active': login.spotify.loginOpened}" ng-click="login.spotify.openLogin()" analytics-on analytics-event="Open Spotify login" analytics-category="Intro"><span ng-if="login.spotify.loginOpened" class="centered-loader"></span><span chrome-translate>introOpenSpotifyLogin</span></a></p>
+				<p ng-if="login.spotify.status"><a class="pure-button next" ng-click="goToTags()" chrome-translate analytics-on analytics-event="End" analytics-category="Intro">introEnd</a></p>
+			</div>
+		</div>
+	</div>
+</div>