paulmataruso/zulip
1
0
Fork 0
mirror of https://github.com/zulip/zulip.git synced 2025-11-05 22:43:42 +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(