export webm

1 files changed, 45 insertions, 11 deletions

diff --git a/js/frames.js b/js/frames.js
index 163e899..dd8759c 100644
--- a/js/frames.js
+++ b/js/frames.js
@@ -1,9 +1,10 @@
 var frame_thumb_size = 93
 
 var frame_editor = {}
+var lastGif, lastWebm
 
 frame_editor.init = function(){
-	frame_editor.bind()
+  frame_editor.bind()
 }
 
 frame_editor.bind = function(){
@@ -28,16 +29,18 @@ frame_editor.bind = function(){
   $("#sort-frames").click(sort_frames)
 
   $("#render").click(render)
+  $("#render-webm").click(render_webm)
   $("#save").click(save)
   $("#upload").click(upload)
 
-	$("#background").change(function(){
-		document.body.style.backgroundColor = $("#background").string()
-	})
+  $("#background").change(function(){
+    document.body.style.backgroundColor = $("#background").string()
+  })
 }
 
 function add_frame(){
-	$("#render").enable()
+  $("#render").enable()
+  $("#render-webm").enable()
   var frame_count = $("#framecount").int()
   if (frame_count < 2) {
     add_single_frame()
@@ -99,7 +102,7 @@ function sort_frames(){
 function render (){
   if (rendering) return
   if ($("#frames canvas.fullsize").length == 0) {
-  	add_frame()
+    add_frame()
   }
   
   rendering = true
@@ -109,7 +112,7 @@ function render (){
     var frame = cq(this.width, this.height).fillStyle($("#background").string()).fillRect(0,0,this.width, this.height).drawImage(this,0,0)
     encoder.addFrame(frame.canvas, delay)
   })
-  $("#pause,#render,#add-frame").disable()
+  $("#pause,#render,#render-webm,#add-frame").disable()
   $("#workspace").find("img").remove()
   $("#rendered").show()
   // really bad results with neuquant?
@@ -119,7 +122,7 @@ function render (){
   try {
     encoder.encode()
   } catch (e) {
-    $("#pause,#render,#add-frame").enable()
+    $("#pause,#render,#render-webm,#add-frame").enable()
     rendering = false
     status(e)
     throw e
@@ -127,6 +130,36 @@ function render (){
   $("#render").html("rendering")
 }
 
+function render_webm (){
+  if (rendering) return
+  if ($("#frames canvas.fullsize").length == 0) {
+    add_frame()
+  }
+  rendering = true
+  var $frames = $("#frames canvas.fullsize")
+  var webm_encoder = new Whammy.Video($frames.length)
+  $frames.each(function(){
+    var frame = cq(this.width, this.height).fillStyle($("#background").string()).fillRect(0,0,this.width, this.height).drawImage(this,0,0)
+    webm_encoder.add(frame.canvas)
+  })
+  lastGif = null
+  var output = lastWebm = webm_encoder.compile();
+  var video = document.createElement("video")
+  video.src = (window.webkitURL || window.URL).createObjectURL(output);
+  video.setAttribute("loop", true)
+  video.setAttribute("autoplay", true)
+  video.play()
+  $("#workspace canvas").hide()
+  $("#workspace").append(video)
+  $("#uploaded-url").hide().val("")
+  $("#uploaded-url + br").hide()
+  $("#save,#upload,#rendered").show()
+  $("#pause,#render,#render-webm,#add-frame,#save,#upload").enable()
+  $("#render").html("render gif")
+  rendering = false
+  pause(true)
+}
+
 var encoder = new GifEncoder()
 
 encoder.on("quantized", function(url){
@@ -145,12 +178,13 @@ encoder.on("rendered", function(bytes){
 encoder.on("rendered-url", function(url){
   var image = new Image ()
   lastGif = image.src = url
-	$("#workspace canvas").hide()
+  lastWebm = null
+  $("#workspace canvas").hide()
   $("#workspace").append(image)
   $("#uploaded-url").hide().val("")
-	$("#uploaded-url + br").hide()
+  $("#uploaded-url + br").hide()
   $("#save,#upload,#rendered").show()
-  $("#pause,#render,#add-frame,#save,#upload").enable()
+  $("#pause,#render,#render-webm,#add-frame,#save,#upload").enable()
   $("#render").html("render gif")
   rendering = false
   pause(true)