paulmataruso/zulip
1
0
Fork 0
mirror of https://github.com/zulip/zulip.git synced 2025-11-06 15:03:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

postprocess: Handle images all within a single loop.

Browse Source
This commit is contained in:
Karl Stolley
2025-09-24 13:50:22 -04:00
committed by Tim Abbott
parent 2e40359dd6
commit c7a651da60
2 changed files with 55 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files

90
web/src/postprocess_content.ts
View File

@@ -150,6 +150,51 @@ export function postprocess_content(html: string): string {
"message-media-preview-image",
);
message_media_image.classList.add("media-image-element");
message_media_image.setAttribute("loading", "lazy");
// We can't just check whether `inline_image.src` starts with
// `/user_uploads/thumbnail`, even though that's what the
// server writes in the markup, because Firefox will have
// already prepended the origin to the source of an image.
let image_url;
try {
image_url = new URL(message_media_image.src, window.location.origin);
} catch {
// If the image source URL can't be parsed, likely due to
// some historical bug in the Markdown processor, just
// drop the invalid image element.
message_media_image.closest(".message-media-preview-image")!.remove();
continue;
}
if (
image_url.origin === window.location.origin &&
image_url.pathname.startsWith("/user_uploads/thumbnail/")
) {
let thumbnail_name = thumbnail.preferred_format.name;
if (message_media_image.dataset.animated === "true") {
if (
user_settings.web_animate_image_previews === "always" ||
// Treat on_hover as "always" on mobile web, where
// hovering is impossible and there's much less on
// the screen.
(user_settings.web_animate_image_previews === "on_hover" &&
util.is_mobile())
) {
thumbnail_name = thumbnail.animated_format.name;
} else {
// If we're showing a still thumbnail, show a play
// button so that users that it can be played.
message_media_image
.closest(".message-media-preview-image")!
.classList.add("message_inline_animated_image_still");
}
}
message_media_image.src = message_media_image.src.replace(
/\/[^/]+$/,
"/" + thumbnail_name,
);
}
}
// To prevent layout shifts and flexibly size image previews,
@@ -217,51 +262,6 @@ export function postprocess_content(html: string): string {
}
}
for (const inline_img of template.content.querySelectorAll<HTMLImageElement>(
".message-media-preview-image img",
)) {
inline_img.setAttribute("loading", "lazy");
// We can't just check whether `inline_image.src` starts with
// `/user_uploads/thumbnail`, even though that's what the
// server writes in the markup, because Firefox will have
// already prepended the origin to the source of an image.
let image_url;
try {
image_url = new URL(inline_img.src, window.location.origin);
} catch {
// If the image source URL can't be parsed, likely due to
// some historical bug in the Markdown processor, just
// drop the invalid image element.
inline_img.closest(".message-media-preview-image")!.remove();
continue;
}
if (
image_url.origin === window.location.origin &&
image_url.pathname.startsWith("/user_uploads/thumbnail/")
) {
let thumbnail_name = thumbnail.preferred_format.name;
if (inline_img.dataset.animated === "true") {
if (
user_settings.web_animate_image_previews === "always" ||
// Treat on_hover as "always" on mobile web, where
// hovering is impossible and there's much less on
// the screen.
(user_settings.web_animate_image_previews === "on_hover" && util.is_mobile())
) {
thumbnail_name = thumbnail.animated_format.name;
} else {
// If we're showing a still thumbnail, show a play
// button so that users that it can be played.
inline_img
.closest(".message-media-preview-image")!
.classList.add("message_inline_animated_image_still");
}
}
inline_img.src = inline_img.src.replace(/\/[^/]+$/, "/" + thumbnail_name);
}
}
// After all other processing on images has been done, we look for
// adjacent images and videos, and tuck them structurally into galleries.
for (const elt of template.content.querySelectorAll(

20
web/tests/postprocess_content.test.cjs
View File

@@ -124,12 +124,12 @@ run_test("inline_image_galleries", ({override}) => {
'<div class="message-thumbnail-gallery">' +
'<div class="message-media-preview-image">' +
'<a href="/user_uploads/path/to/image.png" target="_blank" rel="noopener noreferrer" class="media-anchor-element" aria-label="image.png">' +
'<img data-original-dimensions="1000x2000" src="/user_uploads/thumbnail/path/to/image.png/840x560.webp" class="media-image-element portrait-thumbnail" width="1000" height="2000" style="width: 5em;" loading="lazy">' +
'<img data-original-dimensions="1000x2000" src="/user_uploads/thumbnail/path/to/image.png/840x560.webp" class="media-image-element portrait-thumbnail" loading="lazy" width="1000" height="2000" style="width: 5em;">' +
"</a>" +
"</div>" +
'<div class="message-media-preview-image">' +
'<a href="/user_uploads/path/to/image.png" target="_blank" rel="noopener noreferrer" class="media-anchor-element" aria-label="image.png">' +
'<img data-original-dimensions="2000x1000" src="/user_uploads/thumbnail/path/to/image.png/840x560.webp" class="media-image-element landscape-thumbnail" width="2000" height="1000" style="width: 20em;" loading="lazy">' +
'<img data-original-dimensions="2000x1000" src="/user_uploads/thumbnail/path/to/image.png/840x560.webp" class="media-image-element landscape-thumbnail" loading="lazy" width="2000" height="1000" style="width: 20em;">' +
"</a>" +
"</div>" +
"</div>" +
@@ -137,7 +137,7 @@ run_test("inline_image_galleries", ({override}) => {
'<div class="message-thumbnail-gallery">' +
'<div class="message-media-preview-image">' +
'<a href="/user_uploads/path/to/image.png" target="_blank" rel="noopener noreferrer" class="media-anchor-element" aria-label="image.png">' +
'<img data-original-dimensions="1000x1000" src="/user_uploads/thumbnail/path/to/image.png/840x560.webp" class="media-image-element portrait-thumbnail" width="1000" height="1000" style="width: 10em;" loading="lazy">' +
'<img data-original-dimensions="1000x1000" src="/user_uploads/thumbnail/path/to/image.png/840x560.webp" class="media-image-element portrait-thumbnail" loading="lazy" width="1000" height="1000" style="width: 10em;">' +
"</a>" +
"</div>" +
"</div>",
@@ -198,7 +198,7 @@ run_test("message_inline_animated_image_still", ({override}) => {
'<div class="message-thumbnail-gallery">' +
'<div class="message-media-preview-image">' +
'<a href="/user_uploads/path/to/image.png" target="_blank" rel="noopener noreferrer" class="media-anchor-element" aria-label="image.png">' +
'<img data-original-dimensions="3264x2448" src="/user_uploads/thumbnail/path/to/image.png/300x200.webp" class="media-image-element landscape-thumbnail" width="3264" height="2448" style="width: 13.333333333333334em;" loading="lazy">' +
'<img data-original-dimensions="3264x2448" src="/user_uploads/thumbnail/path/to/image.png/300x200.webp" class="media-image-element landscape-thumbnail" loading="lazy" width="3264" height="2448" style="width: 13.333333333333334em;">' +
"</a>" +
"</div>" +
"</div>",
@@ -216,7 +216,7 @@ run_test("message_inline_animated_image_still", ({override}) => {
'<div class="message-thumbnail-gallery">' +
'<div class="message-media-preview-image">' +
'<a href="/user_uploads/path/to/image.png" target="_blank" rel="noopener noreferrer" class="media-anchor-element" aria-label="image.png">' +
'<img data-original-dimensions="100x200" src="/user_uploads/thumbnail/path/to/image.png/300x200.webp" class="media-image-element portrait-thumbnail" width="100" height="200" style="width: 5em;" loading="lazy">' +
'<img data-original-dimensions="100x200" src="/user_uploads/thumbnail/path/to/image.png/300x200.webp" class="media-image-element portrait-thumbnail" loading="lazy" width="100" height="200" style="width: 5em;">' +
"</a>" +
"</div>" +
"</div>",
@@ -234,7 +234,7 @@ run_test("message_inline_animated_image_still", ({override}) => {
'<div class="message-thumbnail-gallery">' +
'<div class="message-media-preview-image">' +
'<a href="/user_uploads/path/to/image.png" target="_blank" rel="noopener noreferrer" class="media-anchor-element" aria-label="image.png">' +
'<img data-original-dimensions="1x10" src="/user_uploads/thumbnail/path/to/image.png/300x200.webp" class="media-image-element dinky-thumbnail extreme-aspect-ratio portrait-thumbnail" width="1" height="10" style="width: 1px;" loading="lazy">' +
'<img data-original-dimensions="1x10" src="/user_uploads/thumbnail/path/to/image.png/300x200.webp" class="media-image-element dinky-thumbnail extreme-aspect-ratio portrait-thumbnail" loading="lazy" width="1" height="10" style="width: 1px;">' +
"</a>" +
"</div>" +
"</div>",
@@ -253,7 +253,7 @@ run_test("message_inline_animated_image_still", ({override}) => {
'<div class="message-thumbnail-gallery">' +
'<div class="message-media-preview-image">' +
'<a href="/user_uploads/path/to/image.png" target="_blank" rel="noopener noreferrer" class="media-anchor-element" aria-label="image.png">' +
'<img data-original-dimensions="3264x2448" src="/user_uploads/thumbnail/path/to/image.png/300x200-anim.webp" data-animated="true" class="media-image-element landscape-thumbnail" width="3264" height="2448" style="width: 13.333333333333334em;" loading="lazy">' +
'<img data-original-dimensions="3264x2448" src="/user_uploads/thumbnail/path/to/image.png/300x200-anim.webp" data-animated="true" class="media-image-element landscape-thumbnail" loading="lazy" width="3264" height="2448" style="width: 13.333333333333334em;">' +
"</a>" +
"</div>" +
"</div>",
@@ -272,7 +272,7 @@ run_test("message_inline_animated_image_still", ({override}) => {
'<div class="message-thumbnail-gallery">' +
'<div class="message-media-preview-image message_inline_animated_image_still">' +
'<a href="/user_uploads/path/to/image.png" target="_blank" rel="noopener noreferrer" class="media-anchor-element" aria-label="image.png">' +
'<img data-original-dimensions="3264x2448" src="/user_uploads/thumbnail/path/to/image.png/300x200.webp" data-animated="true" class="media-image-element landscape-thumbnail" width="3264" height="2448" style="width: 13.333333333333334em;" loading="lazy">' +
'<img data-original-dimensions="3264x2448" src="/user_uploads/thumbnail/path/to/image.png/300x200.webp" data-animated="true" class="media-image-element landscape-thumbnail" loading="lazy" width="3264" height="2448" style="width: 13.333333333333334em;">' +
"</a>" +
"</div>" +
"</div>",
@@ -290,7 +290,7 @@ run_test("message_inline_animated_image_still", ({override}) => {
'<div class="message-thumbnail-gallery">' +
'<div class="message-media-preview-image message_inline_animated_image_still">' +
'<a href="/user_uploads/path/to/image.png" target="_blank" rel="noopener noreferrer" class="media-anchor-element" aria-label="image.png">' +
'<img data-original-dimensions="3264x2448" src="/user_uploads/thumbnail/path/to/image.png/300x200.webp" data-animated="true" class="media-image-element landscape-thumbnail" width="3264" height="2448" style="width: 13.333333333333334em;" loading="lazy">' +
'<img data-original-dimensions="3264x2448" src="/user_uploads/thumbnail/path/to/image.png/300x200.webp" data-animated="true" class="media-image-element landscape-thumbnail" loading="lazy" width="3264" height="2448" style="width: 13.333333333333334em;">' +
"</a>" +
"</div>" +
"</div>",
@@ -301,7 +301,7 @@ run_test("message_inline_animated_image_still", ({override}) => {
// history.
assert.equal(
postprocess_content(
'<div class="message-media-preview-image">' +
'<div class="message_inline_image">' +
'<a href="https://zulip.%20[Click%20to%20join%20video%20call](https://meeting.example.com/abcd1234)%20example.com/user_uploads/2/ab/abcd1234/image.png" target="_blank" title="image.png">' +
'<img src="https://zulip.%20[Click%20to%20join%20video%20call](https://meeting.example.com/abcd1234)%20example.com/user_uploads/2/ab/abcd1234/image.png">' +
"</a>" +