Need to change JS events format to insert into JQuery and Meteor format (Template.mysite.events).
I want to insert this script into my meteor app, I can't figure out how to change the formatting a bit to match my "Template.page.events", can anyone help?
I am a beginner and have 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;
};
})();
source to share
Let's assume 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 added a sub tag to handle the generation of a list of screenshots done in Meteor way: no direct DOM manipulation to insert HTML elements.
First, we need to create reactive-var
an array to store the sources of the list of screenshots:
Template.page.onCreated(function(){
this.screenshots = new ReactiveVar([]);
});
Template.page.helpers({
screenshots:function(){
return Template.instance().screenshots.get();
}
});
Don't forget meteor add reactive-var
.
We can store references to elements as template properties video
and canvas
inside the template lifecycle event onRendered
:
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 simple, 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);
}
});
source to share