feat: improve Youtube embed for play and pause

CHANGELOG.md

@@ -8,7 +8,7 @@
 
 ### New: Web Components
 * social: v1.0.0-rc.1-3 ([CHANGELOG](https://github.com/deckgo/deckdeckgo/blob/master/webcomponents/social/CHANGELOG.md))
-* youtube: v1.0.0-rc.1 ([CHANGELOG](https://github.com/deckgo/deckdeckgo/blob/master/webcomponents/youtube/CHANGELOG.md))
+* youtube: v1.0.0-rc.1-1 ([CHANGELOG](https://github.com/deckgo/deckdeckgo/blob/master/webcomponents/youtube/CHANGELOG.md))
 
 ### Web Components
 * slide-author: v1.0.0-rc.3-1 ([CHANGELOG](https://github.com/deckgo/deckdeckgo/blob/master/webcomponents/slides/author/CHANGELOG.md))

docs/package.json

@@ -35,7 +35,7 @@
     "@deckdeckgo/slide-video": "^1.0.0-rc.1-1",
     "@deckdeckgo/slide-youtube": "^1.0.0-rc.3",
     "@deckdeckgo/social": "^1.0.0-rc.1-3",
-    "@deckdeckgo/youtube": "^1.0.0-rc.1",
+    "@deckdeckgo/youtube": "^1.0.0-rc.1-1",
     "@ionic/core": "^4.11.7",
     "idb-keyval": "^3.2.0",
     "rxjs": "^6.5.4"
@@ -47,7 +47,7 @@
     "@stencil/sass": "^1.1.1",
     "@types/glob": "^7.1.1",
     "@types/marked": "^0.7.2",
-    "@types/node": "^13.1.4",
+    "@types/node": "^13.1.5",
     "autoprefixer": "^9.7.3",
     "glob": "^7.1.6",
     "marked": "^0.8.0",

remote/package.json

@@ -36,7 +36,7 @@
     "@deckdeckgo/slide-youtube": "^1.0.0-rc.3",
     "@deckdeckgo/social": "^1.0.0-rc.1-3",
     "@deckdeckgo/utils": "^1.0.0-rc.1-2",
-    "@deckdeckgo/youtube": "^1.0.0-rc.1",
+    "@deckdeckgo/youtube": "^1.0.0-rc.1-1",
     "@ionic/core": "^4.11.7",
     "date-fns": "^2.9.0",
     "idb-keyval": "^3.2.0",

studio/package.json

@@ -35,7 +35,7 @@
     "@deckdeckgo/slide-youtube": "^1.0.0-rc.3",
     "@deckdeckgo/social": "^1.0.0-rc.1-3",
     "@deckdeckgo/utils": "^1.0.0-rc.1-4",
-    "@deckdeckgo/youtube": "^1.0.0-rc.1",
+    "@deckdeckgo/youtube": "^1.0.0-rc.1-1",
     "@ionic/core": "4.11.7",
     "firebase": "^7.6.1",
     "idb-keyval": "^3.2.0",

webcomponents/youtube/CHANGELOG.md

@@ -1,3 +1,10 @@
+<a name="1.0.0-rc.1-1"></a>
+# 1.0.0-rc.1-1 (2020-01-09)
+
+### Features
+
+* if Youtube video is provided as embed link, add enablejsapi=1 to be able to play and pause the video
+
 <a name="1.0.0-rc.1"></a>
 # 1.0.0-rc.1 (2020-01-08)
 

webcomponents/youtube/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@deckdeckgo/youtube",
-  "version": "1.0.0-rc.1",
+  "version": "1.0.0-rc.1-1",
   "description": "A Youtube Web Component player",
   "main": "dist/index.js",
   "module": "dist/index.mjs",

webcomponents/youtube/src/components/deckdeckgo-youtube.tsx

@@ -168,7 +168,22 @@ export class DeckdeckgoYoutube {
         resolve('https://www.youtube.com/embed/' + videoId + '?enablejsapi=1');
       } else {
         // Otherwise we try the provided url
-        resolve(this.src);
+
+        if (!this.src) {
+          resolve(this.src);
+          return;
+        }
+
+        // But first, if an embed link, like https://www.youtube.com/embed/PnSNT5WpauE, would be passed, a parameter to enable js should be added otherwise play and pause could not be triggered
+        // Therefore we add enablejsapi if needed in any case
+
+        const url: URL = new URL(this.src);
+
+        if (!url.searchParams.get('enablejsapi')) {
+          url.searchParams.append('enablejsapi', '1');
+        }
+
+        resolve(url.href);
       }
     });
   }
@@ -207,6 +222,8 @@ export class DeckdeckgoYoutube {
         return;
       }
 
+      console.log('here', iframe);
+
       iframe.contentWindow.postMessage(JSON.stringify({
         event: 'command',
         func: play ? 'playVideo' : 'pauseVideo',

webcomponents/youtube/src/index.html

@@ -18,6 +18,8 @@
 
   <div slot="actions">
     <button onclick="loadYoutube()">Load video</button>
+    <button onclick="play()">Play</button>
+    <button onclick="pause()">Pause</button>
   </div>
 
   <deckgo-youtube id="youtube" width="500" height="400" src="https://www.youtube.com/embed/PnSNT5WpauE" frameTitle="Interact with your presentation"></deckgo-youtube>
@@ -29,6 +31,20 @@
               await elem.lazyLoadContent();
           }
       }
+
+      async function play() {
+          const elem = document.getElementById('youtube');
+          if (elem) {
+              await elem.play();
+          }
+      }
+
+      async function pause() {
+          const elem = document.getElementById('youtube');
+          if (elem) {
+              await elem.pause();
+          }
+      }
     </script>
 </body>
 </html>