Start Video Component

src/dom_components/model/Component.js

@@ -42,6 +42,18 @@ define(['backbone','./Components', 'SelectorManager/model/Selectors', 'TraitMana
 				this.set('traits', traits);
 			},
 
+			/**
+			 * Load traits
+			 * @param  {Array} traits
+			 * @private
+			 */
+			loadTraits: function(traits) {
+				var trt = new Traits();
+				trt.setTarget(this);
+				trt.add(traits);
+				this.set('traits', trt);
+			},
+
 			/**
 			 * Normalize input classes from array to array of objects
 			 * @param {Array} arr

src/dom_components/model/ComponentVideo.js

@@ -7,9 +7,38 @@ define(['./ComponentImage'],
 					type: 'video',
 					tagName: 'video',
 					provider: '', // on change of provider, traits are switched
+					loop: 0,
+					muted: 0,
+					autoplay: 0,
+					controls: 1,
 					sources: [],
 			}),
 
+			initialize: function(o, opt) {
+				this.set('traits', this.getSourceTraits());
+				Component.prototype.initialize.apply(this, arguments);
+				this.listenTo(this, 'change:provider', this.updateTraits);
+			},
+
+			/**
+			 * Update traits by provider
+			 * @private
+			 */
+			updateTraits: function() {
+				var prov = this.get('provider');
+				var traits = this.getSourceTraits();
+				switch (prov) {
+					case 'yt':
+						traits = this.getYoutubeTraits();
+						break;
+					case 'vi':
+						traits = this.getVimeoTraits();
+						break;
+				}
+				this.loadTraits(traits);
+				this.sm.trigger('change:selectedComponent');
+			},
+
 			// Listen provider change and switch traits, in TraitView listen traits change
 
 			/**
@@ -23,6 +52,7 @@ define(['./ComponentImage'],
 					label: 'Provider',
 					name: 'provider',
 					changeProp: 1,
+					value: this.get('provider'),
 					options: [
 						{value: 'so', name: 'HTML5 Source'},
 						{value: 'yt', name: 'Youtube'},
@@ -39,10 +69,56 @@ define(['./ComponentImage'],
 			getSourceTraits: function() {
 				return [
 					this.getProviderTrait(), {
-					type: 'stack',
+						label: 'Source',
-					label: 'Sources',
+						name: 'src',
-					layers: []
+						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,
+					}];
+			},
+
+			/**
+			 * Return traits for the source provider
+			 * @return {Array<Object>}
+			 * @private
+			 */
+			getYoutubeTraits: function() {
+				return [
+					this.getProviderTrait(), {
+						label: 'Video ID',
+						name: 'src',
+						placeholder: 'eg. jNQXAC9IVRw',
+						changeProp: 1,
+					}];
+			},
+
+			/**
+			 * Return traits for the source provider
+			 * @return {Array<Object>}
+			 * @private
+			 */
+			getVimeoTraits: function() {
+				return [
+					this.getProviderTrait(), {
+						label: 'Video ID',
+						name: 'src',
+						placeholder: 'eg. 123456789',
+						changeProp: 1,
+					}];
 			},
 
 		});

src/dom_components/view/ComponentVideoView.js

@@ -1,15 +1,66 @@
-define(['backbone', './ComponentView'],
+define(['backbone', './ComponentImageView'],
 	function (Backbone, ComponentView) {
 
 	return ComponentView.extend({
 
-		tagName: 'video',
+		tagName: 'div',
 
 		events: {},
 
 		initialize: function(o){
 			ComponentView.prototype.initialize.apply(this, arguments);
-			console.log('Video view loaded');
+			this.listenTo(this.model, 'change:loop change:autoplay change:controls', this.updateVideo);
+		},
+
+		/**
+		 * Update the source of the video
+		 * @private
+		 */
+		updateSrc: function() {
+			this.videoEl.src = this.model.get('src');
+			console.log('update source');
+		},
+
+		/**
+		 * Update video parameters
+		 * @private
+		 */
+		updateVideo: function() {
+			var videoEl = this.videoEl;
+			var md = this.model;
+			videoEl.loop = md.get('loop');
+			videoEl.autoplay = md.get('autoplay');
+			videoEl.controls = md.get('controls');
+		},
+
+		renderByProvider: function(prov) {
+			var videoEl;
+			switch (prov) {
+				case 'yt':
+
+					break;
+				default:
+					videoEl = this.renderSource();
+			}
+			this.videoEl = videoEl;
+			return videoEl;
+		},
+
+		renderSource: function() {
+			var el = document.createElement('video');
+			el.src = this.model.get('src');
+			el.style.pointerEvents = 'none';
+			el.style.height = '100%';
+			el.style.width = '100%';
+			return el;
+		},
+
+		render: function() {
+			ComponentView.prototype.render.apply(this, arguments);
+			this.updateClasses();
+			var prov = this.model.get('provider');
+			this.el.appendChild(this.renderByProvider(prov));
+			return this;
 		},
 
 	});

src/editor/config/config.js

@@ -199,7 +199,11 @@ define(function () {
 	        attributes: {class:'fa fa-youtube-play'},
 	        content: {
 						type: 'video',
-						style: {height: '350px'}
+						src: 'img/video2.webm',
+						style: {
+							height: '350px',
+							width: '615px',
+						}
 					},
 	      }],
 		},

src/trait_manager/view/TraitCheckboxView.js

@@ -0,0 +1,41 @@
+define(['./TraitView'],
+	function (TraitView) {
+
+	return TraitView.extend({
+
+    initialize: function(o) {
+      TraitView.prototype.initialize.apply(this, arguments);
+      var iconCls = this.ppfx + 'chk-icon';
+			this.tmpl = '<div class="' + this.fieldClass +'"><label class="' + this.inputhClass +'"><i class="' + iconCls +'"></i></label></div>';
+		},
+
+    /**
+		 * Fires when the input is changed
+		 * @private
+		 */
+		onChange: function() {
+			this.model.set('value', this.getInputEl().checked);
+		},
+
+    /**
+		 * Returns input element
+		 * @return {HTMLElement}
+		 * @private
+		 */
+		getInputEl: function() {
+      var first;
+      if(!this.$input)
+        first = 1;
+      var el = TraitView.prototype.getInputEl.apply(this, arguments);
+      if(first){
+        var md = this.model;
+        var name = md.get('name');
+        if(md.get('changeProp')){
+          el.checked = this.target.get(name);
+        }
+      }
+			return el;
+		},
+
+	});
+});

src/trait_manager/view/TraitView.js

@@ -75,11 +75,15 @@ define(['backbone'], function (Backbone) {
 		getInputEl: function() {
 			if(!this.$input){
 				var md = this.model;
+				var name = md.get('name');
 				var opts = {
 					placeholder: md.get('placeholder') || md.get('default'),
 					type: md.get('type') || 'text',
 					value: md.get('value')
 				};
+				if(md.get('changeProp')){
+					opts.value = this.target.get(name);
+				}
 				if(md.get('min'))
 					opts.min = md.get('min');
 				if(md.get('max'))
@@ -97,7 +101,7 @@ define(['backbone'], function (Backbone) {
 			if(!this.$input){
 				this.$el.append(this.tmpl);
 				var el = this.getInputEl();
-				this.$el.find('.' + this.inputhClass).html(el);
+				this.$el.find('.' + this.inputhClass).prepend(el);
 			}
 		},
 

src/trait_manager/view/TraitsView.js

@@ -1,5 +1,5 @@
-define(['backbone', 'Abstract/view/DomainViews', './TraitView', './TraitSelectView'],
+define(['backbone', 'Abstract/view/DomainViews', './TraitView', './TraitSelectView', './TraitCheckboxView'],
-	function (Backbone, DomainViews, TraitView, TraitSelectView) {
+	function (Backbone, DomainViews, TraitView, TraitSelectView, TraitCheckboxView) {
 
 		return DomainViews.extend({
 
@@ -8,6 +8,7 @@ define(['backbone', 'Abstract/view/DomainViews', './TraitView', './TraitSelectVi
 			itemsView: {
 				'text': TraitView,
 				'select': TraitSelectView,
+				'checkbox': TraitCheckboxView,
 			},
 
 			initialize: function(o) {

styles/css/main.css

@@ -2728,7 +2728,7 @@ div.gjs-select {
 
 .gjs-trt-trait {
   display: flex;
-  justify-content: space-between;
+  justify-content: start;
   padding: 5px 10px;
   font-size: 0.75em;
   font-weight: lighter; }
@@ -3203,6 +3203,28 @@ ol.example li.placeholder:before {
     border-radius: 1px;
     height: 2px; }
 
+.gjs-chk-icon {
+  -ms-transform: rotate(45deg);
+  -webkit-transform: rotate(45deg);
+  -moz-transform: rotate(45deg);
+  transform: rotate(45deg);
+  box-sizing: border-box;
+  display: block;
+  height: 14px;
+  margin: 0 5px;
+  width: 6px;
+  cursor: pointer; }
+
+.gjs-field-checkbox {
+  padding: 0;
+  width: auto !important; }
+  .gjs-field-checkbox input {
+    display: none; }
+  .gjs-field-checkbox input:checked + .gjs-chk-icon {
+    border-color: rgba(255, 255, 255, 0.5);
+    border-width: 0 2px 2px 0;
+    border-style: solid; }
+
 .gjs-add-trasp {
   background: none;
   border: none;

styles/scss/main.scss

@@ -79,6 +79,13 @@ $fontV: 5;//random(1000)
   appearance: $v;
 }
 
+@mixin transform($v) {
+  -ms-transform: $v;
+  -webkit-transform: $v;
+  -moz-transform: $v;
+  transform: $v;
+}
+
 //.#{$app-prefix}fonts {}
 
 .#{$app-prefix}fonts::before {
@@ -235,7 +242,7 @@ div.#{$app-prefix}select {
 }
 .#{$trt-prefix}trait {
   display: flex;
-  justify-content: space-between;
+  justify-content: start;
   padding: 5px 10px;
   font-size: 0.75em;
   font-weight: lighter;
@@ -759,6 +766,31 @@ $arrowColor: $mainLhlColor; /*b1b1b1*/
   }
 }
 
+.#{$app-prefix}chk-icon{
+  @include transform(rotate(45deg));
+  box-sizing: border-box;
+  display: block;
+  height: 14px;
+  margin: 0 5px;
+  width: 6px;
+  cursor: pointer;
+}
+
+.#{$app-prefix}field-checkbox {
+  padding: 0;
+  width: auto !important;
+
+  input {
+    display: none;
+  }
+
+  input:checked + .#{$app-prefix}chk-icon{
+    border-color: rgba(255, 255, 255, 0.5);
+    border-width: 0 2px 2px 0;
+    border-style: solid;
+  }
+}
+
 
 .#{$app-prefix}add-trasp {
   background: none;