play button

5 files changed, 40 insertions, 7 deletions

diff --git a/public/assets/javascripts/rectangles/engine/scenery/types/video.js b/public/assets/javascripts/rectangles/engine/scenery/types/video.js
index 2f6dc01..a9fce4a 100644
--- a/public/assets/javascripts/rectangles/engine/scenery/types/video.js
+++ b/public/assets/javascripts/rectangles/engine/scenery/types/video.js
@@ -15,10 +15,7 @@ Scenery.types.video = Scenery.types.base.extend(function(base){
 
 		build: function(){
 			this.mx = new MX.Video({
-				src: this.media.url,
 				media: this.media,
-				width: this.media.width,
-				height: this.media.height,
 				scale: this.scale,
 				y: this.scale * this.media.height/2,
 				backface: false,
diff --git a/public/assets/javascripts/rectangles/engine/scenery/types/vimeo.js b/public/assets/javascripts/rectangles/engine/scenery/types/vimeo.js
index 697c66a..ded5f87 100644
--- a/public/assets/javascripts/rectangles/engine/scenery/types/vimeo.js
+++ b/public/assets/javascripts/rectangles/engine/scenery/types/vimeo.js
@@ -22,7 +22,19 @@ Scenery.types.vimeo = Scenery.types.base.extend(function(base){
 			})
 			scene.add( this.mx )
 		},
-
+		
+		play: function(){
+			this.mx.play()
+		},
+		
+		pause: function(){
+			this.mx.pause()
+		},
+		
+		seek: function(n){
+			this.mx.seek(n)
+		},
+		
 		serialize: function(){
 			var data = base.serialize.call(this)
 			return data
diff --git a/public/assets/javascripts/ui/editor/MediaEditor.js b/public/assets/javascripts/ui/editor/MediaEditor.js
index 8d6d517..1ccb5cf 100644
--- a/public/assets/javascripts/ui/editor/MediaEditor.js
+++ b/public/assets/javascripts/ui/editor/MediaEditor.js
@@ -3,6 +3,7 @@ var MediaEditor = FormView.extend({
 	el: "#mediaEditor",
 		
 	events: {
+		"click .play": "togglePlaying",
 	},
 
 	initialize: function(opt){
@@ -29,7 +30,11 @@ var MediaEditor = FormView.extend({
     this.$el.toggleClass("active", state);
 	},
 	
+	togglePlaying: function(){
+	},
+	
 	pick: function(scenery) {
+		this.scenery = scenery
 		this.$el.addClass("active")
 		
 		var media = scenery.media
diff --git a/public/assets/stylesheets/app.css b/public/assets/stylesheets/app.css
index 7389810..4296223 100755
--- a/public/assets/stylesheets/app.css
+++ b/public/assets/stylesheets/app.css
@@ -1220,6 +1220,26 @@ input[type="range"]::-webkit-slider-thumb {
 	padding-right: 5px;
 }
 
+.setting .play {
+	color: white;
+	background: black;
+	border-radius: 50px;
+	padding: 6px 7px 5px;
+	cursor: pointer;
+}
+.setting .play .icon-play {
+	display: inline;
+}
+.setting .play.playing .icon-play {
+	display: none;
+}
+.setting .play .icon-pause {
+	display: none;
+}
+.setting .play.playing .icon-pause {
+	display: inline;
+}
+
 button {
   padding: 8px;
   border: 1px solid;
diff --git a/views/controls/editor/media-editor.ejs b/views/controls/editor/media-editor.ejs
index 483fa72..12ab2b4 100644
--- a/views/controls/editor/media-editor.ejs
+++ b/views/controls/editor/media-editor.ejs
@@ -12,8 +12,8 @@
 	
 	<div class="video setting">
 		<span class="play">
-			<span class="ion-play"></span>
-			<span class="ion-pause"></span>
+			<span class="icon-play"></span>
+			<span class="icon-pause"></span>
 		</span>
 <!-- 
 		ion-volume-high
@@ -28,7 +28,6 @@
 		<input type="checkbox" name="mute" value="1" id="video_mute">
 		<label for="video_mute">Mute</label>
 	</div>
-
 	<div class="video setting">
 		Initial Still
 		<br>