big updat:

- update dependencies
- add webp support and webp conversion for profile images

node_modules/gif.js/site/contents/tests/canvas.coffee

@@ -0,0 +1,65 @@
+require '../scripts/vendor/mootools.js'
+ready = require '../scripts/vendor/ready.js'
+
+num_frames = 20
+width = 600
+height = 300
+text = 'HYPNO TOAD'
+textSize = 70
+
+now = window.performance?.now?.bind(window.performance) or Date.now
+
+rgb = (rgb...) -> "rgb(#{ rgb.map((v) -> Math.floor(v * 255)).join(',') })"
+hsl = (hsl...) ->
+  hsl = hsl.map (v, i) -> if i is 0 then v * 360 else "#{ v * 100 }%"
+  return "hsl(#{ hsl.join(',') })"
+
+ready ->
+  canvas = document.createElement 'canvas'
+  canvas.width = width
+  canvas.height = height
+
+  startTime = null
+  ctx = canvas.getContext '2d'
+  info = document.id 'info'
+
+  gif = new GIF
+    workers: 4
+    workerScript: '/gif.js/gif.worker.js'
+    width: width
+    height: height
+
+  gif.on 'start', -> startTime = now()
+
+  gif.on 'progress', (p) -> info.set 'text', Math.round(p * 100)+'%'
+
+  gif.on 'finished', (blob) ->
+    img = document.id 'result'
+    img.src = URL.createObjectURL(blob)
+    delta = now() - startTime
+    info.set 'text', """
+      100%
+      #{ (delta / 1000).toFixed 2 }sec
+      #{ (blob.size / 1000).toFixed 2 }kb
+    """
+
+  ctx.font = "bold #{ textSize }px Helvetica"
+  ctx.textAlign = 'center'
+  ctx.textBaseline = 'middle'
+  ctx.lineWidth = 3
+  w2 = width / 2
+  h2 = height / 2
+  for i in [0...num_frames]
+    p = i / (num_frames - 1)
+    grad = ctx.createRadialGradient w2, h2, 0, w2, h2, w2
+    grad.addColorStop 0, hsl p, 1, 0.5
+    grad.addColorStop 1, hsl (p + 0.2) % 1, 1, 0.4
+    ctx.fillStyle = grad
+    ctx.fillRect 0, 0, width, height
+    ctx.fillStyle = hsl (p + 0.5) % 1, 1, 0.7
+    ctx.strokeStyle = hsl (p + 0.8) % 1, 1, 0.9
+    ctx.fillText text, w2, h2
+    ctx.strokeText text, w2, h2
+    gif.addFrame ctx, {copy: true, delay: 20}
+
+  gif.render()

node_modules/gif.js/site/contents/tests/canvas.md

@@ -0,0 +1,10 @@
+---
+title: Canvas rendering
+script: canvas.coffee
+template: test.html
+---
+
+<p id="info">Loading...</p>
+
+<img id="result">
+

node_modules/gif.js/site/contents/tests/video.coffee

@@ -0,0 +1,70 @@
+require '../scripts/vendor/mootools.js'
+ready = require '../scripts/vendor/ready.js'
+now = window.performance?.now?.bind(window.performance) or Date.now
+
+ready ->
+  info = document.id 'info'
+  video = document.id 'video'
+  button = document.id 'go'
+  sample = document.id 'sample'
+
+  gif = new GIF
+    workers: 4
+    workerScript: '/gif.js/gif.worker.js'
+    width: 600
+    height: 337
+
+  startTime = null
+  sampleInterval = null
+
+  sampleUpdate = ->
+    sampleInterval = parseInt sample.value
+    gif.abort()
+    document.id('info').set 'text', """
+      ready to start with a sample interval of #{ sampleInterval }ms
+    """
+
+  video.addEventListener 'canplay', ->
+    button.disabled = false
+    sample.disabled = false
+    sampleUpdate()
+
+  sample.addEvent 'change', sampleUpdate
+
+  button.addEvent 'click', ->
+    video.pause()
+    video.currentTime = 0
+    gif.abort()
+    gif.frames = []
+    video.play()
+
+  gif.on 'start', -> startTime = now()
+
+  gif.on 'progress', (p) ->
+    info.set 'text', "rendering: #{ Math.round(p * 100) }%"
+
+  gif.on 'finished', (blob) ->
+    img = document.id 'result'
+    img.src = URL.createObjectURL(blob)
+    delta = now() - startTime
+    info.set 'text', """
+      done in
+      #{ (delta / 1000).toFixed 2 }sec,
+      size #{ (blob.size / 1000).toFixed 2 }kb
+    """
+
+  # this might not be the best approach to capturing
+  # html video, but i but i can't seek since my dev server
+  # doesn't support http byte requests
+  timer = null
+  capture = ->
+    info.set 'html', "capturing at #{ video.currentTime }"
+    gif.addFrame video, {copy: true, delay: sampleInterval}
+
+  video.addEventListener 'play', ->
+    clearInterval timer
+    timer = setInterval capture, sampleInterval
+
+  video.addEventListener 'ended', ->
+    clearInterval timer
+    gif.render()

node_modules/gif.js/site/contents/tests/video.md

@@ -0,0 +1,20 @@
+---
+title: Video to GIF
+script: video.coffee
+template: test.html
+---
+
+<p>
+  <input disabled id="sample" type="range" step="1" min="20" max="500" value="100">
+  <button id="go" disabled>Do it!</button>
+</p>
+
+<p id="info">Loading...</p>
+
+<video id="video" width="600">
+  <source src="clip.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.'>
+  <source src="clip.ogv" type='video/ogg; codecs="theora, vorbis"'>
+</video>
+
+<img id="result">
+