From 2dc07b45e3db739bf1ed2d119dd570a5ee2566c3 Mon Sep 17 00:00:00 2001 From: Artur Arseniev Date: Wed, 2 Nov 2016 14:42:31 +0100 Subject: [PATCH] Add Vimeo provider to video component and update Code Manager --- src/code_manager/model/HtmlGenerator.js | 37 +--- src/dom_components/model/ComponentVideo.js | 163 +++++++++++++++--- src/dom_components/view/ComponentVideoView.js | 64 ++++++- 3 files changed, 200 insertions(+), 64 deletions(-) diff --git a/src/code_manager/model/HtmlGenerator.js b/src/code_manager/model/HtmlGenerator.js index 888e219d9..5a89a8ffa 100644 --- a/src/code_manager/model/HtmlGenerator.js +++ b/src/code_manager/model/HtmlGenerator.js @@ -11,42 +11,7 @@ define(['backbone'], code = ''; coll.each(function(m){ - var tag = m.get('tagName'), // Tag name - attr = '', // Attributes string - attrId = '', - strCls = '', - cln = m.get('components'), // Children - attrs = m.get('attributes'), - sTag = m.get('void'), - classes = m.get('classes'); - _.each(attrs,function(value, prop){ - if(prop == 'onmousedown') - return; - attr += value && prop!='style' ? ' ' + prop + '="' + value + '"' : ''; - }); - - if(m.get('type') == 'image'){ - tag = 'img'; - sTag = 1; - attr += ' src="' + m.get('src') + '"'; - } - - if(!_.isEmpty(m.get('style'))) - attrId = ' id="' + m.cid + '" '; - - classes.each(function(m){ - strCls += ' ' + m.get('name'); - }); - - strCls = strCls !== '' ? ' class="' + strCls.trim() + '"' : ''; - code += '<' + tag + strCls + attrId + attr + (sTag ? '/' : '') + '>' + m.get('content'); - - if(cln.length) - code += this.build(cln); - - if(!sTag) - code += ''; - + code += m.toHTML(); }, this); return code; diff --git a/src/dom_components/model/ComponentVideo.js b/src/dom_components/model/ComponentVideo.js index c7b3cb9ed..43d79e8d5 100644 --- a/src/dom_components/model/ComponentVideo.js +++ b/src/dom_components/model/ComponentVideo.js @@ -6,11 +6,16 @@ define(['./ComponentImage'], defaults: _.extend({}, Component.prototype.defaults, { type: 'video', tagName: 'video', + videoId: '', + void: 0, provider: '', // on change of provider, traits are switched + ytUrl: 'http://www.youtube.com/embed/', + viUrl: 'http://player.vimeo.com/video/', loop: 0, muted: 0, autoplay: 0, controls: 1, + color: '', sources: [], }), @@ -18,6 +23,47 @@ define(['./ComponentImage'], this.set('traits', this.getSourceTraits()); Component.prototype.initialize.apply(this, arguments); this.listenTo(this, 'change:provider', this.updateTraits); + this.listenTo(this, 'change:videoId', this.updateSrc); + }, + + /** + * Update src on change of video ID + * @private + */ + updateSrc: function() { + var prov = this.get('provider'); + switch (prov) { + case 'yt': + this.set('src',this.getYoutubeSrc()); + break; + case 'vi': + this.set('src',this.getVimeoSrc()); + break; + } + }, + + /** + * Returns attributes string in HTML + * @return {string} + * @private + */ + toAttrHTML: function() { + var attr = Component.prototype.toAttrHTML.apply(this, arguments); + var prov = this.get('provider'); + + switch (prov) { + case 'yt': case 'vi': + break; + default: + if(this.get('loop')) + attr += ' loop'; + if(this.get('autoplay')) + attr += ' autoplay'; + if(this.get('controls')) + attr += ' controls'; + } + + return attr; }, /** @@ -29,11 +75,15 @@ define(['./ComponentImage'], var traits = this.getSourceTraits(); switch (prov) { case 'yt': + this.set('tagName', 'iframe'); traits = this.getYoutubeTraits(); break; case 'vi': + this.set('tagName', 'iframe'); traits = this.getVimeoTraits(); break; + default: + this.set('tagName', 'video'); } this.loadTraits(traits); this.sm.trigger('change:selectedComponent'); @@ -73,24 +123,11 @@ define(['./ComponentImage'], name: 'src', placeholder: 'eg. ./media/video.mp4', changeProp: 1, - },{ - type: 'checkbox', - label: 'Autoplay', - name: 'autoplay', - changeProp: 1, - },{ - type: 'checkbox', - label: 'Loop', - name: 'loop', - changeProp: 1, - },{ - type: 'checkbox', - label: 'Controls', - name: 'controls', - changeProp: 1, - }]; + }, + this.getAutoplayTrait(), + this.getLoopTrait(), + this.getControlsTrait()]; }, - /** * Return traits for the source provider * @return {Array} @@ -100,10 +137,14 @@ define(['./ComponentImage'], return [ this.getProviderTrait(), { label: 'Video ID', - name: 'src', + name: 'videoId', placeholder: 'eg. jNQXAC9IVRw', changeProp: 1, - }]; + }, + this.getAutoplayTrait(), + this.getLoopTrait(), + this.getControlsTrait() + ]; }, /** @@ -115,10 +156,90 @@ define(['./ComponentImage'], return [ this.getProviderTrait(), { label: 'Video ID', - name: 'src', + name: 'videoId', placeholder: 'eg. 123456789', changeProp: 1, - }]; + },{ + label: 'Color', + name: 'color', + placeholder: 'eg. FF0000', + changeProp: 1, + }, + this.getAutoplayTrait(), + this.getLoopTrait(), + this.getControlsTrait()]; + }, + + /** + * Return object trait + * @return {Object} + * @private + */ + getAutoplayTrait: function(){ + return { + type: 'checkbox', + label: 'Autoplay', + name: 'autoplay', + changeProp: 1, + }; + }, + + /** + * Return object trait + * @return {Object} + * @private + */ + getLoopTrait: function(){ + return { + type: 'checkbox', + label: 'Loop', + name: 'loop', + changeProp: 1, + }; + }, + + /** + * Return object trait + * @return {Object} + * @private + */ + getControlsTrait: function(){ + return { + type: 'checkbox', + label: 'Controls', + name: 'controls', + changeProp: 1, + }; + }, + + + /** + * Returns url to youtube video + * @return {string} + * @private + */ + getYoutubeSrc: function() { + var url = this.get('ytUrl'); + url += this.get('videoId') + '?'; + url += this.get('autoplay') ? '&autoplay=1' : ''; + url += !this.get('controls') ? '&controls=0' : ''; + url += this.get('loop') ? '&loop=1' : ''; + return url; + }, + + /** + * Returns url to vimeo video + * @return {string} + * @private + */ + getVimeoSrc: function() { + var url = this.get('viUrl'); + url += this.get('videoId') + '?'; + url += this.get('autoplay') ? '&autoplay=1' : ''; + url += this.get('loop') ? '&loop=1' : ''; + url += !this.get('controls') ? '&title=0&portrait=0&badge=0' : ''; + url += this.get('color') ? '&color=' + this.get('color') : ''; + return url; }, }); diff --git a/src/dom_components/view/ComponentVideoView.js b/src/dom_components/view/ComponentVideoView.js index 4ca5cf40a..fe60fcdc7 100644 --- a/src/dom_components/view/ComponentVideoView.js +++ b/src/dom_components/view/ComponentVideoView.js @@ -9,7 +9,18 @@ define(['backbone', './ComponentImageView'], initialize: function(o){ ComponentView.prototype.initialize.apply(this, arguments); - this.listenTo(this.model, 'change:loop change:autoplay change:controls', this.updateVideo); + this.listenTo(this.model, 'change:loop change:autoplay change:controls change:color', this.updateVideo); + this.listenTo(this.model, 'change:provider', this.updateProvider); + }, + + /** + * Rerender on update of the provider + * @private + */ + updateProvider: function() { + var prov = this.model.get('provider'); + this.el.innerHTML = ''; + this.el.appendChild(this.renderByProvider(prov)); }, /** @@ -17,8 +28,17 @@ define(['backbone', './ComponentImageView'], * @private */ updateSrc: function() { - this.videoEl.src = this.model.get('src'); - console.log('update source'); + var prov = this.model.get('provider'); + var src = this.model.get('src'); + switch (prov) { + case 'yt': + src = this.model.getYoutubeSrc(); + break; + case 'vi': + src = this.model.getVimeoSrc(); + break; + } + this.videoEl.src = src; }, /** @@ -26,18 +46,28 @@ define(['backbone', './ComponentImageView'], * @private */ updateVideo: function() { + var prov = this.model.get('provider'); var videoEl = this.videoEl; var md = this.model; - videoEl.loop = md.get('loop'); - videoEl.autoplay = md.get('autoplay'); - videoEl.controls = md.get('controls'); + switch (prov) { + case 'yt': case 'vi': + this.model.trigger('change:videoId'); + break; + default: + videoEl.loop = md.get('loop'); + videoEl.autoplay = md.get('autoplay'); + videoEl.controls = md.get('controls'); + } }, renderByProvider: function(prov) { var videoEl; switch (prov) { case 'yt': - + videoEl = this.renderYoutube(); + break; + case 'vi': + videoEl = this.renderVimeo(); break; default: videoEl = this.renderSource(); @@ -55,6 +85,26 @@ define(['backbone', './ComponentImageView'], return el; }, + renderYoutube: function() { + var el = document.createElement('iframe'); + el.src = this.model.getYoutubeSrc(); + el.frameBorder = 0; + el.style.pointerEvents = 'none'; + el.style.height = '100%'; + el.style.width = '100%'; + return el; + }, + + renderVimeo: function() { + var el = document.createElement('iframe'); + el.src = this.model.getVimeoSrc(); + el.frameBorder = 0; + el.style.pointerEvents = 'none'; + el.style.height = '100%'; + el.style.width = '100%'; + return el; + }, + render: function() { ComponentView.prototype.render.apply(this, arguments); this.updateClasses();