From 3b7142cf8e76e732b98ce9cab88b6c1289efd113 Mon Sep 17 00:00:00 2001 From: James Jackson Date: Tue, 10 Jul 2018 11:33:52 +0100 Subject: [PATCH] Added video provider for youtube no cookie. Added related videos and modest branding options for youtube. --- src/dom_components/model/ComponentVideo.js | 47 +++++++++++++++++-- src/dom_components/view/ComponentVideoView.js | 18 ++++++- 2 files changed, 61 insertions(+), 4 deletions(-) diff --git a/src/dom_components/model/ComponentVideo.js b/src/dom_components/model/ComponentVideo.js index f3a9e5feb..e2b70e973 100644 --- a/src/dom_components/model/ComponentVideo.js +++ b/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; } } diff --git a/src/dom_components/view/ComponentVideoView.js b/src/dom_components/view/ComponentVideoView.js index 775c99441..801a955d8 100644 --- a/src/dom_components/view/ComponentVideoView.js +++ b/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();