fix(#262): user can add YouTube tracks (when new keys are active)

Closes #262. ## What does this PR do / solve? Since Google disabled our historic YouTube API Key, on February 20th, users have not been able to add YouTube tracks to their Openwhyd profile. ## Overview of changes Create dedicated YouTube API Keys for each component. ## How to test this PR? ```sh $ git pull $ docker-compose up --build --detach $ nvm use $ npm install $ npm run docker:test ```
openwhyd · Feb 28, 2020 · c1d7a85 · c1d7a85
1 parent 31e683b
commit c1d7a85
Show file tree

Hide file tree

Showing 8 changed files with 52 additions and 43 deletions.
diff --git a/app/templates/mainTemplate.js b/app/templates/mainTemplate.js
@@ -234,7 +234,7 @@ exports.renderWhydFrame = function(html, params) {
     'var DEEZER_APP_ID = 190482;',
     'var DEEZER_CHANNEL_URL = window.location.href.substr(0, window.location.href.indexOf("/", 10)) + "/html/channel.html";',
     'var SOUNDCLOUD_CLIENT_ID = "eb257e698774349c22b0b727df0238ad";',
-    'var YOUTUBE_API_KEY = "AIzaSyADm2ekf-_KONB3cSGm1fnuPSXx3br4fvI";',
+    'var YOUTUBE_API_KEY = "AIzaSyBcv9w8c8DVkP_lv7_QAiUlLaY0IbtIQ-M";',
     'var JAMENDO_CLIENT_ID = "2c9a11b9";',
     '</script>',
     // TODO: move credentials to makeAnalyticsHeading()

diff --git a/app/templates/postEditV2.html b/app/templates/postEditV2.html
@@ -1,8 +1,9 @@
 {{^embedded}}
 <!DOCTYPE html>
 <html>
+
 <head>
-	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
+	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 	<meta http-equiv="CACHE-CONTROL" content="NO-CACHE" />
 	<meta http-equiv="Pragma" content="no-cache" />
 	<meta http-equiv="expires" content="0" />
@@ -14,12 +15,13 @@
 		window.DEEZER_APP_ID = 190482;
 		window.DEEZER_CHANNEL_URL = "{{urlPrefix}}/html/deezer.channel.html".replace(/^http\:/, "https:");
 		window.JAMENDO_CLIENT_ID = "c9cb2a0a";
-		window.YOUTUBE_API_KEY = "AIzaSyADm2ekf-_KONB3cSGm1fnuPSXx3br4fvI";
+		window.YOUTUBE_API_KEY = "AIzaSyCXSFB9V9xQMKL5lWJdtBesrn8f6Mz8NL0";
 
 	</script>
 </head>
+
 <body class="dlgPostEdit {{^embedded}}dlgRepostBox{{/embedded}} loading">
-{{/embedded}}
+	{{/embedded}}
 	<link rel="stylesheet" type="text/css" media="screen" href="/css/postBoxV2.css" />
 	<div id="contentThumb">
 		<div class="whydGrad"></div>
@@ -49,12 +51,12 @@
 		<div id="descForm">
 			<textarea name="text" id="text" class="shareField" placeholder="Add a comment">{{text}}</textarea>
 		</div>
-{{#trackPresenceMsg}}
+		{{#trackPresenceMsg}}
 		<div class="note">
 			NOTE
 			<p id="trackPresenceMsg">{{trackPresenceMsg}}</p>
 		</div>
-{{/trackPresenceMsg}}
+		{{/trackPresenceMsg}}
 	</div>
 	<div id="confirmationScreen" class="postPanel success">
 		<h1>Yay, you added a new track!</h1>
@@ -79,36 +81,37 @@ <h1>Sorry it did not work...</h1>
 			{{^editPost}}Add{{/editPost}}
 			{{#editPost}}Save{{/editPost}}
 		</span>
-	{{#editPost}}
+		{{#editPost}}
 		<div id="lnkDeletePost">Delete this track</div>
-	{{/editPost}}
+		{{/editPost}}
 	</div>
 	<div id='pageLoader'></div>
-{{^embedded}}
+	{{^embedded}}
 	<!--<script src="/js/jquery-1.8.2.min.js"></script>-->
 	<script src="/js/jquery-1.10.2.min.js"></script>
 	<script src="/js/jquery-migrate-1.2.1.js"></script>
 	<script src="/js/underscore-min.js"></script> <!-- for jquery.mentionsInput.js -->
 	<script src="/js/jquery.mentionsInput.js"></script>
 	<script src="/js/playem-min.js"></script>
 	<script src="/js/facebook.js"></script>
-{{/embedded}}
+	{{/embedded}}
 	<script src="/js/postBoxV2.js"></script>
 	<script>
-	/*<![CDATA[*/
-	initPostBox({
-		mode: "{{^embedded}}addFromBookmarklet{{/embedded}}{{#editPost}}editPost{{/editPost}}{{#repost}}repost{{/repost}}"
-		, ctx: "{{ctx}}"
-		, pId: "{{pId}}"
-		, embed: "{{{embed}}}"
-		, title: "{{title}}"
-		, img: "{{img}}"
-		, src: { id: "{{{refUrl}}}".replace(/\&amp\;/g, "&"), name: "{{refTtl}}" }
-{{#pl}} , pl: { id: "{{id}}", name: "{{{_js_name}}}".replace(/\&amp\;/g, "&") }{{/pl}}
+		/*<![CDATA[*/
+		initPostBox({
+			mode: "{{^embedded}}addFromBookmarklet{{/embedded}}{{#editPost}}editPost{{/editPost}}{{#repost}}repost{{/repost}}"
+			, ctx: "{{ctx}}"
+			, pId: "{{pId}}"
+			, embed: "{{{embed}}}"
+			, title: "{{title}}"
+			, img: "{{img}}"
+			, src: { id: "{{{refUrl}}}".replace(/\&amp\;/g, "&"), name: "{{refTtl}}" }
+{{ #pl }} , pl: { id: "{{id}}", name: "{{{_js_name}}}".replace(/\&amp\;/g, "&") }{{/ pl}}
 	});
 	/*]]>*/
 	</script>
-{{^embedded}}
+	{{^embedded}}
 </body>
+
 </html>
-{{/embedded}}
+{{/embedded}}
diff --git a/public/html/YoutubePlayerIframe.html b/public/html/YoutubePlayerIframe.html
@@ -2,12 +2,15 @@
 <!-- inspired from http://box.jie.fr/track.html -->
 <!-- this page can be hosted anywhere (e.g. tumblr) -->
 <html>
-  <head>
-    <title>Openwhyd Remote Player</title>
-  </head>
-  <body>
-    <script> var YOUTUBE_API_KEY = "AIzaSyADm2ekf-_KONB3cSGm1fnuPSXx3br4fvI"; </script>
-    <script src="//openwhyd.org/js/playem-all.js"></script>
-    <script src="//openwhyd.org/js/whydRemotePlayer.js"></script>
-  </body>
+
+<head>
+  <title>Openwhyd Remote Player</title>
+</head>
+
+<body>
+  <script> var YOUTUBE_API_KEY = "AIzaSyCvH2tdCIutSXIAhQ0zc0PBxbI3kjGr8-8"; </script>
+  <script src="//openwhyd.org/js/playem-all.js"></script>
+  <script src="//openwhyd.org/js/whydRemotePlayer.js"></script>
+</body>
+
 </html>
diff --git a/public/html/YoutubePlayerIframeLocal.html b/public/html/YoutubePlayerIframeLocal.html
@@ -2,12 +2,15 @@
 <!-- inspired from http://box.jie.fr/track.html -->
 <!-- this page can be hosted anywhere (e.g. tumblr) -->
 <html>
-  <head>
-    <title>Openwhyd Remote Player</title>
-  </head>
-  <body>
-    <script> var YOUTUBE_API_KEY = "AIzaSyADm2ekf-_KONB3cSGm1fnuPSXx3br4fvI"; </script>
-    <script src="/js/playem-all.js"></script>
-    <script src="/js/whydRemotePlayer.js"></script>
-  </body>
-</html>
+
+<head>
+  <title>Openwhyd Remote Player</title>
+</head>
+
+<body>
+  <script> var YOUTUBE_API_KEY = "AIzaSyC19wW6DlDLK8iehcTwvpMa0N2FgAraHws"; </script>
+  <script src="/js/playem-all.js"></script>
+  <script src="/js/whydRemotePlayer.js"></script>
+</body>
+
+</html>
diff --git a/public/js/ContentEmbed.js b/public/js/ContentEmbed.js
@@ -286,7 +286,7 @@ function ContentEmbed() {
     require: function(embedRef, callback) {
       embedRef.img = 'https://i.ytimg.com/vi/' + embedRef.videoId + '/0.jpg';
       var YOUTUBE_API_KEY =
-        YOUTUBE_API_KEY || 'AIzaSyADm2ekf-_KONB3cSGm1fnuPSXx3br4fvI';
+        YOUTUBE_API_KEY || 'AIzaSyBdV90mnGJVbhN5sOGerSviWpQGLWf9T2o';
       // TODO: use playemjs instead
       $.getJSON(
         'https://www.googleapis.com/youtube/v3/videos?id=' +

diff --git a/public/js/bookmarklet.js b/public/js/bookmarklet.js
@@ -13,7 +13,7 @@ if (undefined == window.console)
   };
 
 console.log('-= openwhyd bookmarklet v2.3 =-');
-var YOUTUBE_API_KEY = 'AIzaSyADm2ekf-_KONB3cSGm1fnuPSXx3br4fvI';
+var YOUTUBE_API_KEY = 'AIzaSyDiqlzCrqhYNLw0ds5j8QGVM7WltwCdOo4';
 
 (window._initWhydBk = function() {
   var FILENAME = '/js/bookmarklet.js';

diff --git a/public/js/whydEmbed.js b/public/js/whydEmbed.js
@@ -4,7 +4,7 @@
  **/
 
 var DEBUG = false, // for soundmanager
-  YOUTUBE_API_KEY = 'AIzaSyADm2ekf-_KONB3cSGm1fnuPSXx3br4fvI',
+  YOUTUBE_API_KEY = 'AIzaSyCVZGDlhG1-Y5gFgzumVtTKHXYirPgbP7E',
   SOUNDCLOUD_CLIENT_ID = 'eb257e698774349c22b0b727df0238ad',
   JAMENDO_CLIENT_ID = '2c9a11b9',
   DEEZER_APP_ID = 190482,

diff --git a/test/old/snip.tests.js b/test/old/snip.tests.js
@@ -9,7 +9,7 @@ describe('snip.httpRequest', function() {
   var snip = require('../../app/snip.js');
   //var testRunner = new require("../app/serverTestRunner.js").ServerTestRunner();
 
-  var YOUTUBE_API_KEY = 'AIzaSyADm2ekf-_KONB3cSGm1fnuPSXx3br4fvI';
+  var YOUTUBE_API_KEY = 'AIzaSyD6N68vL5x5lKeFakJNn4wN4Y3oXJ7V8lI';
   var YOUTUBE_VIDEO_ID = 'aZT8VlTV1YY';
 
   var url =