exports.getMessage = function (data, mutedFP, userIdManager, profile, messages) {
if (window.ga) {
window.ga('send', 'event', 'message', 'receive');
}
if (mutedFP[data.fingerprint]) {
return;
}
var children = messages.children();
var length = children.length;
if (length) {
var last = children.get(-1);
var size = $(window).innerHeight();
var bottom = last ? last.getBoundingClientRect().bottom : 0;
var follow = bottom < size + 50;
if (follow) {
if (length > MAX_LIMIT) {
children.slice(0, length - MAX_LIMIT).each(function () {
$(this).data('waypoints').forEach(function (waypoint) {
waypoint.destroy();
});
var saveLink = $(this).find('.save');
if (saveLink.length) {
window.URL.revokeObjectURL(saveLink.attr('href'));
}
}).remove();
}
}
}
var userControls = '';
if (!userIdManager.contains(data.fingerprint)) {
userControls = '<button class="mute">mute</button>';
}
var created = moment(new Date(data.created));
var timestamp =
'<time datetime="' + created.toISOString() + '" class="timestamp">' +
created.format('LT') + '</time>';
var markup =
'<li data-fp="' + data.fingerprint + '">' +
'<div class="video-container">' +
'<video src="' + data.media + '" autoplay="autoplay" loop />' +
'<a class="convert">Save as GIF</a>' +
'</div>' +
'<p>' + data.message + timestamp + '</p>' +
'<div class="actions">' + userControls +'</div>' +
'</li>';
var li = $(markup);
var eLi = li[0];
messages.append(li);
bloop.play();
var opts = function (refDir, offsetFn) {
return {
element: eLi,
offset: offsetFn,
handler: function (direction) {
$(this.element).toggleClass('in-view', direction === refDir);
li.find('video')[0][direction === refDir ? 'play' : 'pause']();
}
};
};
li.data('waypoints', [
new Waypoint(opts('up', function () {return -$(this.element).outerHeight();})),
new Waypoint(opts('down', '100%'))
]);
Waypoint.refreshAll();
if (follow) {
eLi.scrollIntoView();
}
};
exports.getMessage = function (data, mutedFP, userIdManager, profile, messages) {
if (window.ga) {
window.ga('send', 'event', 'message', 'receive');
}
if (!mutedFP[data.fingerprint]) {
var li = $('<li data-fp="' + data.fingerprint + '" />');
var videoContainer = $('<div class="video-container"/>');
var video = $('<video src="' + data.media + '" autoplay="autoplay" loop />');
var convertButton = $('<a class="convert">Save as GIF</a>');
var p = $('<p />');
var userControls = '';
if (!userIdManager.contains(data.fingerprint)) {
userControls = '<button class="mute">mute</button>';
}
var created = moment(new Date(data.created));
var time = $('<time datetime="' + created.toISOString() + '" class="timestamp">' +
created.format('LT') + '</time>');
var actions = $('<div class="actions">' + userControls +'</div>');
p.html(data.message);
videoContainer.append(video).append(convertButton);
li.append(videoContainer).append(p).append(actions);
messages.append(li);
p.append(time);
var children = messages.find('li');
var waypoints = [];
waypoints.push(new Waypoint({
element: li[0],
handler: function (direction) {
$(this.element).toggleClass('in-view', direction === 'up');
video[0][direction === 'up' ? 'play' : 'pause']();
},
offset: function () {
return -$(this.element).outerHeight();
}
}));
waypoints.push(new Waypoint({
element: li[0],
handler: function (direction) {
$(this.element).toggleClass('in-view', direction === 'down');
video[0][direction === 'down' ? 'play' : 'pause']();
},
offset: '100%'
}));
li.data('waypoints', waypoints);
var size = $(window).innerHeight();
var last = messages[0].lastChild;
var bottom = last ? last.getBoundingClientRect().bottom : 0;
var follow = bottom < size + 50;
if (follow) {
if (children.length > MAX_LIMIT) {
children.slice(0, children.length - MAX_LIMIT).each(function () {
$(this).data('waypoints').forEach(function (waypoint) {
waypoint.destroy();
});
var saveLink = $(this).find('.save');
if (saveLink.length) {
window.URL.revokeObjectURL(saveLink.attr('href'));
}
}).remove();
Waypoint.refreshAll();
}
li[0].scrollIntoView();
}
}
};