Updated to work with Youtube API V3

This is a quick update to make the extension work with the new Youtube API since V2 is deprecated. It also automatically updates the internal data object so that no "subscriptions" are lost
OverStruck · Apr 23, 2015 · 81a99ae · 81a99ae
1 parent 976b829
commit 81a99ae
Show file tree

Hide file tree

Showing 9 changed files with 327 additions and 126 deletions.
diff --git a/Firefox/data/js/popup.js b/Firefox/data/js/popup.js
@@ -73,8 +73,8 @@ function main(data, translation) {
 		//@param i integer the account index
 		function loadNewVideos(i) {
 			updateMsg.eq(1).text(data.channels[i].name);
-			loadVideos(data.channels[i].id).done(function(response) {
-				var videos = proccessYoutubeFeed(response.feed);
+			loadVideos(data.channels[i].uploadsPlayListId).done(function(response) {
+				var videos = proccessYoutubeFeed(response.items);
 				var save = false;
 				if (videos) {
 					var account = {
@@ -135,7 +135,7 @@ function main(data, translation) {
 		for (var i = 0; i < data.channels.length; i++) {
 			var account = data.channels[i];
 			//populate html
-			sidebarHTML += '<div class="ss" data-id="' + i + '"><a href="#" id="' + account.id + '">' +
+			sidebarHTML += '<div class="ss" data-id="' + i + '"><a href="#" id="' + account.uploadsPlayListId + '">' +
 				'<img src="' + account.thumbnail + '"' +
 				'alt="' + account.name + '" width="60"' +
 				' title="' + account.name + '"></a></div>';
@@ -148,22 +148,17 @@ function main(data, translation) {
 			var self = $(this);
 				//the account name, ej: "PMVTutoriales"
 			var accountName = self.find('img:first').attr('title');
-				//the Youtube account ID which is some long string
-			var accountYoutubeID = self.attr('id');
+				//the Youtube account PLAYLIST ID which is some long string
+			var accountPlayListId = self.attr('id');
 				//the account number (integer), ej: 7
 			var accountID = self.parent().data('id');
-			/* 
-			Sometimes account names have spaces, in which case we can't load its videos
-			so we use the youtube id which is secure
-			*/
-			var account = accountYoutubeID;
 			//click listener
 			self.off("click").click(function(event) {
 				selectedAccount = accountID;
 				$('.selected:first').removeClass('selected');
 				self.parent().addClass('selected');
-				loadVideos(account).done(function(response) {
-					var videos = proccessYoutubeFeed(response.feed);
+				loadVideos(accountPlayListId).done(function(response) {
+					var videos = proccessYoutubeFeed(response.items);
 					if (videos) {
 						var html = generateSideBarVideosHTML(videos);
 						//display account name
@@ -180,18 +175,19 @@ function main(data, translation) {
 
 	/**
 	 * Loads most recent Youtube videos from selected account
-	 * @param {String} accountName the account name or ID
+	 * @param {String} playListId the id of the uploads play list
 	 */
-	function loadVideos(accountName) {
+	function loadVideos(uploadsPlayListId) {
 		return $.ajax({
-			url: 'https://gdata.youtube.com/feeds/api/users/' + accountName + '/uploads',
+			url: 'https://www.googleapis.com/youtube/v3/playlistItems',
 			dataType: 'json',
 			cache: false,
 			data: {
-				v: 2,
-				alt: 'json',
-				"start-index": 1,
-				"max-results": 4
+				'part': 'snippet',
+                'key': 'AIzaSyBbTkdQ5Pl_tszqJqdafAqF0mVWWngv9HU',
+                'maxResults': 4,
+                'playlistId': uploadsPlayListId,
+                'fields': 'items(snippet,status)'
 			}
 		});
 	}
@@ -202,31 +198,36 @@ function main(data, translation) {
 	 * @return {Array} videos an array containing objects with each videos' meta-data
 	 */
 	function proccessYoutubeFeed(data) {
-		var feed = data.entry;
-		var videos = [];
-		if (feed === undefined) {
-			//error this account has no videos
-			return false;
-		}
-		for (var i = 0; i < feed.length; i++) {
-			var entry = feed[i];
-			var title = entry.title.$t; //Video title
-			var link = entry.link[0].href; //Video link
-			var img = entry.media$group.media$thumbnail[1].url; //video thumbnail
-			var description = entry.media$group.media$description.$t; //video description
-			var author = entry.author[0].name.$t; //creato's Youtube name
-
-			videos.push({
-				"id": i, //the video number (0 -> 3)
-				"title": title,
-				"url": link,
-				"thumbnail": img,
-				"description": description,
-				"author": author
-			});
-		}
-		return videos;
-	}
+            var videos = [];
+            if (data === undefined) {
+                //error this account has no videos
+                return false;
+            }
+
+            var snippets;
+            var youtubeVideoUrl = 'https://www.youtube.com/watch?v=';
+
+            for (var i = 0; i < data.length; i++) {
+
+                snippets = data[i];
+                for (var key in snippets) {
+                    if (snippets.hasOwnProperty(key)) {
+                        var snippet = snippets[key];
+
+                        videos.push({
+                            "id": i, //the video number (0 -> 3)
+                            "title": snippet.title,
+                            "url": youtubeVideoUrl + snippet.resourceId.videoId,
+                            "thumbnail": snippet.thumbnails.medium.url,
+                            "description": snippet.description,
+                            "author": snippet.channelTitle
+                        });
+                    }
+                }
+
+            }
+            return videos;
+        }
 
 	/**
 	 * Display's the account's videos on the popup

diff --git a/Firefox/data/js/upgrade.js b/Firefox/data/js/upgrade.js
@@ -0,0 +1,20 @@
+//Firefox - upgrade.js
+
+//get all strings to translate
+var strings = [];
+for (var i = 1; i <= 9; i++)
+    strings.push("errMsg" + i);
+
+strings.push("lang");
+//translate
+self.port.emit("translation", strings);
+self.port.once("translation", function(response) {
+    var translation = response.translation;
+    //../locales/es/logo.png
+    $("#logo").css("background-image", "url('./locales/" + translation.lang + "/logo.png')");
+    main(response.data, translation, response.addonVersion);
+});
+
+function main(ExtensionData, translation, addonVersion) {
+	window.alert('helo');
+}
diff --git a/Firefox/data/js/youtubeMod.js b/Firefox/data/js/youtubeMod.js
@@ -13,12 +13,12 @@ self.port.once("channels", function(channels) {
         userName = document.getElementsByClassName('yt-user-info')[0];
         userName = userName.getElementsByTagName('a')[0];
         userName = userName.getAttribute('data-ytid');
-        userName = userName.substring(2).trim();
+        userName = userName.trim();
     } else {
         onWatchPage = false;
         userName = document.getElementsByClassName('yt-uix-subscription-button')[0];
         userName = userName.getAttribute('data-channel-external-id');
-        userName = userName.substring(2).trim();
+        userName = userName.trim();
     }
     for (var i = channels.length - 1; i >= 0; i--) {
         if (userName === channels[i].id) {

diff --git a/Firefox/data/options.html b/Firefox/data/options.html
@@ -26,9 +26,9 @@
 
                 <div class="hbox">
                     <div class="groupbox flex1">
-                        <span data-l10n-id="opts1"></span>
+                        <!-- <span data-l10n-id="opts1"></span>
                         <input type="text" id="add-field">
-                        <button id="btn-add" disabled data-l10n-id="optsbtn1"></button>
+                        <button id="btn-add" disabled data-l10n-id="optsbtn1"></button> -->
                         <div id="prefs">
                             <div>
                                 <input type="checkbox" class="pref">

diff --git a/Firefox/data/upgrade.html b/Firefox/data/upgrade.html
@@ -0,0 +1,33 @@
+<!doctype html>
+<html>
+    <head>
+        <title data-l10n-id="optionsHeaderTitle"></title>
+        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+        <link rel="icon" href="images/favicon.ico" type="image/x-icon"/>
+        <link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon"/>
+        <link rel="stylesheet" type="text/css" href="css/options.css">
+    </head>
+    <body>
+        <div class="container">
+            <div id="header">
+                <div id="logo"></div>
+                <div id="navBar">
+                    <ul>
+                        <li><a href="#"><span data-l10n-id="homeURL"></span></a></li>
+                        <li><a href="#"><span data-l10n-id="contact"></span></a></li>
+                    </ul>
+                </div>
+            </div>
+            <div id="optionsMenu">
+                <!--loading screen-->
+                <div class="modal" style="display:none">
+                    <div><span></span><span style="font-weight: bolder" data-l10n-id="YtModbtnAddingTxt"></span></div>
+                </div>
+                <h1>Please Wait while we upgrade My Youtube....</h1>
+
+            </div>
+            <div id="footer">Copyright &copy; <b>Juanix.net</b> 2015</div>
+        </div>
+        <script src="js/FileSaver.js"></script>
+    </body>
+</html>
diff --git a/Firefox/lib/Mi_Youtube_Data_2.js b/Firefox/lib/Mi_Youtube_Data_2.js
@@ -2,24 +2,21 @@
 	My Youtube Data
 	This file contains a "class" to save the extensions data
 */
-
-function MY_YOUTUBE_DATA(location)
-{
+function MY_YOUTUBE_DATA(location) {
 	this.storage = location;
 	this.data = {
 		name: "MyYoutubeData",
-		version: 3,
-		channels: [
-		{
-        //default PMVTutoriales channel
-        id: "ZgwLCu6tSLEUJ30METhJHg", 
-        name: "PMVTutoriales", 
-        thumbnail: "https://i3.ytimg.com/i/ZgwLCu6tSLEUJ30METhJHg/1.jpg?v=516a0349", 
-        videoTitles: [], 
-        newVideos: false,
-        url: "https://www.youtube.com/user/PMVTutoriales"
-    	}
-		],
+		version: 3.1,
+		channels: [{
+			//default PMVTutoriales channel
+			id: "UCZgwLCu6tSLEUJ30METhJHg",
+			name: "PMVTutoriales",
+			thumbnail: "https://yt3.ggpht.com/-mrEkpcfUuX4/AAAAAAAAAAI/AAAAAAAAAAA/cWFyINwhD9s/s88-c-k-no/photo.jpg",
+			videoTitles: [],
+			newVideos: false,
+			url: "https://www.youtube.com/channel/UCZgwLCu6tSLEUJ30METhJHg",
+			uploadsPlayListId: "UUZgwLCu6tSLEUJ30METhJHg" //needed for Youtube API V3
+		}],
 		prefs: {
 			"show_popup": true,
 			"play_popup_sound": true,
@@ -35,16 +32,20 @@ function MY_YOUTUBE_DATA(location)
 }
 
 MY_YOUTUBE_DATA.prototype.load = function(callback) {
-	if (!this.storage[this.name])
+	var upgrade = false;
+	if (!this.storage[this.name]) {
+		//firt install, save data
 		this.setValue(this.name, this.data);
-	else if (this.storage[this.name].version != this.version) {
-		//update defaults values without losing already existing values
-        //currently not needed
-	}
-	else {
+	} else if (this.storage[this.name].version != this.version) {
+		upgrade = true;
+		this.data.isNewInstall = false;
+		this.storage[this.name].channels[0] = this.data.channels[0];
+		this.data.channels = this.storage[this.name].channels;
+	} else {
 		this.data = this.storage[this.name];
 	}
-	callback(this.data);
+
+	callback(this.data, upgrade);
 };
 
 MY_YOUTUBE_DATA.prototype.setValue = function(name, value) {
@@ -68,4 +69,12 @@ MY_YOUTUBE_DATA.prototype.delete = function() {
 	delete this.storage[this.name];
 };
 
+function update(target, source) {
+	var a = Object.create(target);
+	Object.keys(source).map(function(prop) {
+		prop in a && (a[prop] = source[prop]);
+	});
+	return a;
+}
+
 exports.MY_YOUTUBE_DATA = MY_YOUTUBE_DATA;