Need to change the JS events format to fit into Jquery and Meteor (Template.mysite.events) format

Question

I am looking to paste this script into my meteor app, I can't figure out how to change a bit the formatting to make it fit in my "Template.page.events" , can someone help?

I am a beginner and having a hard time with it

(function(){
  var v = document.querySelector('video'),
      n = document.querySelector('source').src.replace(/.*\/|\..*$/g,''),
      c = document.querySelector('canvas'),
      save = document.querySelector('#save ul'),
      ctx = c.getContext('2d');
  v.addEventListener('loadedmetadata',function(ev){

    var ratio = v.videoWidth/v.videoHeight,
        w = 400,
        h = parseInt(w / ratio, 10),
        time = 0,
        img = null,
        li = null;
    c.width = w;
    c.height = h + 40;

    v.addEventListener('timeupdate',function(ev){
      if(v.paused){
        ctx.fillStyle = 'rgb(0, 0, 0)';
        ctx.fillRect(0, 0, w, h);
        ctx.drawImage(v, 0, 40, w, h);
        ctx.font = '20px Calibri';
        ctx.fillStyle = 'lime';
        ctx.fillText(n, 5, 20);
        time = format(v.currentTime);
        ctx.fillStyle = 'white';
        ctx.fillText(time, 395 - ctx.measureText(time).width, 20);
      }
    },false);
    c.addEventListener('click',function(ev){
      li = document.createElement('li');
      img = document.createElement('img');
      li.appendChild(img);
      save.appendChild(li);
      img.src = ctx.canvas.toDataURL('image/png');
    },false);
  },false);
  function format(time){
    var hours = parseInt((time / 60 / 60) % 60, 10),
        mins = parseInt((time / 60) % 60, 10),
        secs = parseInt(time, 10) % 60,
        hourss = (hours < 10 ? '0' : '') + parseInt(hours, 10) + ':',
        minss = (mins < 10 ? '0' : '') + parseInt(mins, 10) + ':',
        secss  = (secs < 10 ? '0' : '') +(secs % 60),
        timestring = ( hourss !== '00:' ? hourss : '' ) + minss + secss;
    return timestring;
  };
})();

Answer 1

Let's suppose we have this Meteor template markup :

<template name="page">
  <video controls autoplay>
    <source src="/videos/video.mp4">
  </video>
  <canvas></canvas>
  <ul>
    {{#each screenshots}}
      {{> screenshot}}
    {{/each}}
  </ul>
</template>

<template name="screenshot">
  <li>
    <img src="{{source}}">
  </li>
</template>

I've added a subtemplate to handle the screenshot list generation done the Meteor way : without manipulating the DOM directly to insert HTML elements.

First we need to create a reactive-var to hold the screenshot list sources as an array :

Template.page.onCreated(function(){
  this.screenshots = new ReactiveVar([]);
});

Template.page.helpers({
  screenshots:function(){
    return Template.instance().screenshots.get();
  }
});

Don't forget to meteor add reactive-var.

We can save as template properties references to video and canvas elements inside the onRendered template lifecycle event :

Template.page.onRendered(function(){
  this.video = this.find("video");
  this.canvas = this.find("canvas");
});

Then we have to rewrite the standard HTML event handling using Meteor event maps which is pretty straightforward, just use the syntax "event selector".

Template.page.events({
  "loadedmetadata video":function(event,template){
    var ratio = template.video.videoWidth / template.video.videoHeight;
    var canvasWidth = 400;
    var canvasHeight = parseInt(canvasWidth / ratio, 10);
    template.canvas.width = w;
    template.canvas.height = h + 40;
  },
  "timeupdate video":function(event,template){
    function format(time){
      var hours = parseInt((time / 60 / 60) % 60, 10);
      var mins = parseInt((time / 60) % 60, 10);
      var secs = parseInt(time, 10) % 60;
      var hourss = (hours < 10 ? '0' : '') + parseInt(hours, 10) + ':';
      var minss = (mins < 10 ? '0' : '') + parseInt(mins, 10) + ':';
      var secss  = (secs < 10 ? '0' : '') +(secs % 60);
      var timestring = ( hourss !== '00:' ? hourss : '' ) + minss + secss;
      return timestring;
    }
    //
    if(template.video.paused){
      var ctx = template.canvas.getContext("2d");
      ctx.fillStyle = "rgb(0, 0, 0)";
      ctx.fillRect(0, 0, template.canvas.width, template.canvas.height);
      ctx.drawImage(template.video, 0, 40, template.canvas.width, template.canvas.height);
      ctx.font = "20px Calibri";
      ctx.fillStyle = "lime";
      ctx.fillText("caption", 5, 20);
      var time = format(template.video.currentTime);
      ctx.fillStyle = "white";
      ctx.fillText(time, 395 - ctx.measureText(time).width, 20);
    }
  },
  "click canvas":function(event,template){
    var screenshots = template.screenshots.get();
    screenshots.push({
      source: template.canvas.toDataURL("image/png")
    });
    template.screenshots.set(screenshots);
  }
});