feat(taToolbar): Update insertVideo to handle youtube link variants

* Create new function taToolFunctions.extractYoutubeVideoId * Add tests to verify extractYoutubeVideoId function
textAngular · Jul 29, 2015 · 1372bc1 · 1372bc1
1 parent 72cca33
commit 1372bc1
Show file tree

Hide file tree

Showing 3 changed files with 57 additions and 6 deletions.
diff --git a/src/textAngularSetup.js b/src/textAngularSetup.js
@@ -371,6 +371,11 @@ angular.module('textAngularSetup', [])
 			buttonGroup.append(targetToggle);
 			container.append(buttonGroup);
 			editorScope.showPopover($element);
+		},
+		extractYoutubeVideoId: function(url) {
+			var re = /(?:youtube(?:-nocookie)?\.com\/(?:[^\/\n\s]+\/\S+\/|(?:v|e(?:mbed)?)\/|\S*?[?&]v=)|youtu\.be\/)([a-zA-Z0-9_-]{11})/i;
+			var match = url.match(re);
+			return (match && match[1]) || null;
 		}
 	};
 }])
@@ -684,16 +689,17 @@ angular.module('textAngularSetup', [])
 			var urlPrompt;
 			urlPrompt = $window.prompt(taTranslations.insertVideo.dialogPrompt, 'https://');
 			if (urlPrompt && urlPrompt !== '' && urlPrompt !== 'https://') {
-				// get the video ID
-				var ids = urlPrompt.match(/(\?|&)v=[^&]*/);
+
+				videoId = taToolFunctions.extractYoutubeVideoId(urlPrompt);
+
 				/* istanbul ignore else: if it's invalid don't worry - though probably should show some kind of error message */
-				if(ids && ids.length > 0){
+				if(videoId){
 					// create the embed link
-					var urlLink = "https://www.youtube.com/embed/" + ids[0].substring(3);
+					var urlLink = "https://www.youtube.com/embed/" + videoId;
 					// create the HTML
 					// for all options see: http://stackoverflow.com/questions/2068344/how-do-i-get-a-youtube-video-thumbnail-from-the-youtube-api
 					// maxresdefault.jpg seems to be undefined on some.
-					var embed = '<img class="ta-insert-video" src="https://img.youtube.com/vi/' + ids[0].substring(3) + '/hqdefault.jpg" ta-insert-video="' + urlLink + '" contenteditable="false" allowfullscreen="true" frameborder="0" />';
+					var embed = '<img class="ta-insert-video" src="https://img.youtube.com/vi/' + videoId + '/hqdefault.jpg" ta-insert-video="' + urlLink + '" contenteditable="false" allowfullscreen="true" frameborder="0" />';
 					// insert
 					return this.$editor().wrapSelection('insertHTML', embed, true);
 				}

diff --git a/test/taToolFunctions.spec.js b/test/taToolFunctions.spec.js
@@ -0,0 +1,45 @@
+describe('taToolFunctions', function(){
+	var taToolFunctions;
+
+	beforeEach(module('textAngular'));
+
+	beforeEach(inject(function(_taToolFunctions_){
+		taToolFunctions = _taToolFunctions_;
+	}));
+
+	describe('extractYoutubeVideoId', function(){
+
+		it('should extract video id from youtube link variations', function(){
+			youtubeVideUrlVariations = [
+				'http://www.youtube.com/watch?v=0zM3nApSvMg&feature=feedrec_grec_index',
+				'http://www.youtube.com/user/IngridMichaelsonVEVO#p/a/u/1/0zM3nApSvMg',
+				'http://www.youtube.com/v/0zM3nApSvMg?fs=1&amp;hl=en_US&amp;rel=0',
+				'http://www.youtube.com/watch?v=0zM3nApSvMg#t=0m10s',
+				'http://www.youtube.com/embed/0zM3nApSvMg?rel=0',
+				'http://www.youtube.com/watch?v=0zM3nApSvMg',
+				'http://youtu.be/0zM3nApSvMg',
+				'https://www.youtube-nocookie.com/embed/0zM3nApSvMg'
+			];
+
+			angular.forEach(youtubeVideUrlVariations, function(youtubeVideUrl) {
+				expect(taToolFunctions.extractYoutubeVideoId(youtubeVideUrl)).toBe('0zM3nApSvMg');
+			});
+		});
+		it('should not extract video id from invalid youtube link variations', function(){
+			invalidYoutubeVideUrlVariations = [
+				'http://www.youtube.com/watch?v=0zM3nApS&feature=feedrec_grec_index',
+				'http://www.youtube.com/user/elsonVEVO#p/a/u/1/8U-VIH_o',
+				'http://www.youtube.com/v/0zM3nApS?fs=1&amp;hl=en_US&amp;rel=0',
+				'http://www.youtube.com/watch?v=0zApSvMg#t=0m10s',
+				'http://www.youtube.com/embed/0zM3Mg?rel=0',
+				'http://www.youtube.com/watch?v=0znApSvMg',
+				'http://youtu.be/0zM3nAvMg',
+				'https://www.youtube-nocookie.com/embed/0zM3nApSvMg'
+			];
+
+			angular.forEach(invalidYoutubeVideUrlVariations, function(youtubeVideUrl) {
+				expect(taToolFunctions.extractYoutubeVideoId(youtubeVideUrl)).toBeNull();
+			});
+		});
+	});
+});
diff --git a/test/taTools.spec.js b/test/taTools.spec.js
@@ -308,7 +308,7 @@ describe('taTools test tool actions', function(){
 		beforeEach(inject(function (_$compile_, _$rootScope_, $document, textAngularManager, _$window_) {
 			$window = _$window_;
 			// prompt such that we actually get to test all of the insertVideo code
-			$window.prompt = function(){ return 'hello?v=asoeustnhe&'; };
+			$window.prompt = function(){ return 'https://www.youtube.com/watch?v=6T8LeO-01I4'; };
 			$rootScope = _$rootScope_;
 			element = _$compile_('<text-angular name="test">Test Content</text-angular>')($rootScope);
 			$document.find('body').append(element);