Merge pull request #1270 from nojacko/dev

Added youtube-nocookie.com as video provider

src/dom_components/model/ComponentVideo.js

@@ -2,6 +2,7 @@ const Component = require('./ComponentImage');
 const OComponent = require('./Component');
 const yt = 'yt';
 const vi = 'vi';
+const ytnc = 'ytnc';
 
 module.exports = Component.extend(
   {
@@ -13,12 +14,15 @@ module.exports = Component.extend(
       void: 0,
       provider: '', // on change of provider, traits are switched
       ytUrl: 'https://www.youtube.com/embed/',
+      ytncUrl: 'https://www.youtube-nocookie.com/embed/',
       viUrl: 'https://player.vimeo.com/video/',
       loop: 0,
       muted: 0,
       autoplay: 0,
       controls: 1,
       color: '',
+      rel: 1, // YT related videos
+      modestbranding: 0, // YT modest branding
       sources: [],
       attributes: { allowfullscreen: 'allowfullscreen' },
       toolbar: OComponent.prototype.defaults.toolbar
@@ -29,6 +33,7 @@ module.exports = Component.extend(
       var prov = this.get('provider');
       switch (prov) {
         case yt:
+        case ytnc:
           traits = this.getYoutubeTraits();
           break;
         case vi:
@@ -41,7 +46,7 @@ module.exports = Component.extend(
       this.set('traits', traits);
       Component.prototype.initialize.apply(this, arguments);
       this.listenTo(this, 'change:provider', this.updateTraits);
-      this.listenTo(this, 'change:videoId', this.updateSrc);
+      this.listenTo(this, 'change:videoId change:provider', this.updateSrc);
     },
 
     initToolbar(...args) {
@@ -57,6 +62,7 @@ module.exports = Component.extend(
       var qr = uri.query;
       switch (prov) {
         case yt:
+        case ytnc:
         case vi:
           var videoId = uri.pathname.split('/').pop();
           this.set('videoId', videoId);
@@ -64,6 +70,8 @@ module.exports = Component.extend(
           if (qr.loop) this.set('loop', 1);
           if (parseInt(qr.controls) === 0) this.set('controls', 0);
           if (qr.color) this.set('color', qr.color);
+          if (qr.rel === '0') this.set('rel', 0);
+          if (qr.modestbranding === '1') this.set('modestbranding', 1);
           break;
         default:
       }
@@ -79,6 +87,9 @@ module.exports = Component.extend(
         case yt:
           this.set('src', this.getYoutubeSrc());
           break;
+        case ytnc:
+          this.set('src', this.getYoutubeNoCookieSrc());
+          break;
         case vi:
           this.set('src', this.getVimeoSrc());
           break;
@@ -95,6 +106,7 @@ module.exports = Component.extend(
       var prov = this.get('provider');
       switch (prov) {
         case yt:
+        case ytnc:
         case vi:
           break;
         default:
@@ -114,6 +126,7 @@ module.exports = Component.extend(
       var traits = this.getSourceTraits();
       switch (prov) {
         case yt:
+        case ytnc:
           this.set('tagName', 'iframe');
           traits = this.getYoutubeTraits();
           break;
@@ -145,6 +158,7 @@ module.exports = Component.extend(
         options: [
           { value: 'so', name: 'HTML5 Source' },
           { value: yt, name: 'Youtube' },
+          { value: ytnc, name: 'Youtube (no cookie)' },
           { value: vi, name: 'Vimeo' }
         ]
       };
@@ -185,7 +199,19 @@ module.exports = Component.extend(
         },
         this.getAutoplayTrait(),
         this.getLoopTrait(),
-        this.getControlsTrait()
+        this.getControlsTrait(),
+        {
+          type: 'checkbox',
+          label: 'Related',
+          name: 'rel',
+          changeProp: 1
+        },
+        {
+          type: 'checkbox',
+          label: 'Modest',
+          name: 'modestbranding',
+          changeProp: 1
+        }
       ];
     },
 
@@ -270,6 +296,19 @@ module.exports = Component.extend(
       // Loop works only with playlist enabled
       // https://stackoverflow.com/questions/25779966/youtube-iframe-loop-doesnt-work
       url += this.get('loop') ? `&loop=1&playlist=${id}` : '';
+      url += this.get('rel') ? '' : '&rel=0';
+      url += this.get('modestbranding') ? '&modestbranding=1' : '';
+      return url;
+    },
+
+    /**
+     * Returns url to youtube no cookie video
+     * @return {string}
+     * @private
+     */
+    getYoutubeNoCookieSrc() {
+      let url = this.getYoutubeSrc();
+      url = url.replace(this.get('ytUrl'), this.get('ytncUrl'));
       return url;
     },
 
@@ -300,13 +339,15 @@ module.exports = Component.extend(
     isComponent(el) {
       var result = '';
       var isYtProv = /youtube\.com\/embed/.test(el.src);
+      var isYtncProv = /youtube-nocookie\.com\/embed/.test(el.src);
       var isViProv = /player\.vimeo\.com\/video/.test(el.src);
-      var isExtProv = isYtProv || isViProv;
+      var isExtProv = isYtProv || isYtncProv || isViProv;
       if (el.tagName == 'VIDEO' || (el.tagName == 'IFRAME' && isExtProv)) {
         result = { type: 'video' };
         if (el.src) result.src = el.src;
         if (isExtProv) {
           if (isYtProv) result.provider = yt;
+          else if (isYtncProv) result.provider = ytnc;
           else if (isViProv) result.provider = vi;
         }
       }

src/dom_components/view/ComponentVideoView.js

@@ -12,7 +12,7 @@ module.exports = ComponentView.extend({
     this.listenTo(this.model, 'change:src', this.updateSrc);
     this.listenTo(
       this.model,
-      'change:loop change:autoplay change:controls change:color',
+      'change:loop change:autoplay change:controls change:color change:rel change:modestbranding',
       this.updateVideo
     );
     this.listenTo(this.model, 'change:provider', this.updateProvider);
@@ -39,6 +39,9 @@ module.exports = ComponentView.extend({
       case 'yt':
         src = this.model.getYoutubeSrc();
         break;
+      case 'ytnc':
+        src = this.model.getYoutubeNoCookieSrc();
+        break;
       case 'vi':
         src = this.model.getVimeoSrc();
         break;
@@ -56,6 +59,7 @@ module.exports = ComponentView.extend({
     var md = this.model;
     switch (prov) {
       case 'yt':
+      case 'ytnc':
       case 'vi':
         this.model.trigger('change:videoId');
         break;
@@ -72,6 +76,9 @@ module.exports = ComponentView.extend({
       case 'yt':
         videoEl = this.renderYoutube();
         break;
+      case 'ytnc':
+        videoEl = this.renderYoutubeNoCookie();
+        break;
       case 'vi':
         videoEl = this.renderVimeo();
         break;
@@ -98,6 +105,15 @@ module.exports = ComponentView.extend({
     return el;
   },
 
+  renderYoutubeNoCookie() {
+    var el = document.createElement('iframe');
+    el.src = this.model.getYoutubeNoCookieSrc();
+    el.frameBorder = 0;
+    el.setAttribute('allowfullscreen', true);
+    this.initVideoEl(el);
+    return el;
+  },
+
   renderVimeo() {
     var el = document.createElement('iframe');
     el.src = this.model.getVimeoSrc();