Render video and audio previews only after canplay event fires

This commit is contained in:
Pavel Djundik 2018-03-19 12:47:36 +02:00
parent 8ecacc9978
commit 77a98bfd14

View File

@ -17,15 +17,17 @@ function renderPreview(preview, msg) {
preview.shown = preview.shown && options.shouldOpenMessagePreview(preview.type); preview.shown = preview.shown && options.shouldOpenMessagePreview(preview.type);
const template = $(templates.msg_preview({preview})); const template = $(templates.msg_preview({preview}));
const image = template.find("img:first"); const image = template.find("img, video, audio").first();
if (image.length === 0) { if (image.length === 0) {
return appendPreview(preview, msg, template); return appendPreview(preview, msg, template);
} }
const loadEvent = image.prop("tagName") === "IMG" ? "load" : "canplay";
// If there is an image in preview, wait for it to load before appending it to DOM // If there is an image in preview, wait for it to load before appending it to DOM
// This is done to prevent problems keeping scroll to the bottom while images load // This is done to prevent problems keeping scroll to the bottom while images load
image.on("load.preview", () => { image.on(`${loadEvent}.preview`, () => {
image.off(".preview"); image.off(".preview");
appendPreview(preview, msg, template); appendPreview(preview, msg, template);