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

thumbnails: Reference media anchors, images, and video by class.

Browse Source
This commit is contained in:
Karl Stolley
2025-04-08 15:00:13 -05:00
committed by Tim Abbott
parent 1dc87be1db
commit 4e19e82f64
3 changed files with 57 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
web/src/postprocess_content.ts
View File

@@ -52,6 +52,26 @@ export function postprocess_content(html: string): string {
elt.removeAttribute("target");
}
if (elt.querySelector("img") || elt.querySelector("video")) {
// We want a class to refer to media links
elt.classList.add("media-anchor-element");
// Add a class to the video, if it exists
if (elt.querySelector("video")) {
elt.querySelector("video")?.classList.add("media-video-element");
}
// Add a class to the image, if it exists
if (elt.querySelector("img")) {
elt.querySelector("img")?.classList.add("media-image-element");
}
}
if (elt.querySelector("video")) {
// We want a class to refer to media links
elt.classList.add("media-anchor-element");
// And likewise a class to refer to image elements
elt.querySelector("video")?.classList.add("media-image-element");
}
// Update older, smaller default.jpg YouTube preview images
// with higher-quality preview images (320px wide)
if (elt.parentElement?.classList.contains("youtube-video")) {

34
web/styles/rendered_markdown.css
View File

@@ -460,7 +460,7 @@
background: hsl(0deg 0% 0% / 15%);
}
& a {
& .media-anchor-element {
display: block;
height: 100%;
width: 100%;
@@ -522,8 +522,8 @@
}
p:first-child > .katex-display > .katex,
.message_inline_image a,
.message_inline_image video {
.message_inline_image .media-anchor-element,
.message_inline_image .media-video-element {
/* We explicitly place the containing
media element in the thumbnail area. */
grid-area: media;
@@ -575,9 +575,9 @@
margin-right: 5px;
}
.twitter-image img,
.message_inline_image img,
.message_inline_ref img {
.twitter-image .media-image-element,
.message_inline_image .media-image-element,
.message_inline_ref .media-image-element {
/* We use `scale-down` so that images smaller than the container are
neither scaled up nor cropped to fit. This preserves
their aspect ratio, which is often helpful. */
@@ -595,17 +595,17 @@
border-radius: inherit;
}
.message_inline_image img {
.message_inline_image .media-image-element {
cursor: zoom-in;
}
.youtube-video img,
.vimeo-video img,
.embed-video img {
.youtube-video .media-image-element,
.vimeo-video .media-image-element,
.embed-video .media-image-element {
cursor: pointer;
}
.youtube-video img {
.youtube-video .media-image-element {
/* We do this for the sake of increasing
the size of older YouTube thumbnail
previews, but there are no ill effects
@@ -613,21 +613,21 @@
object-fit: contain;
}
&.rtl .twitter-image img,
&.rtl .message_inline_image img,
&.rtl .message_inline_ref img {
&.rtl .twitter-image .media-image-element,
&.rtl .message_inline_image .media-image-element,
&.rtl .message_inline_ref .media-image-element {
float: right;
margin-right: unset;
margin-left: 10px;
}
& li .message_inline_image img {
& li .message_inline_image .media-image-element {
float: none;
}
.message_inline_video,
.message_inline_animated_image_still,
.youtube-video a[data-id] {
.youtube-video .media-anchor-element {
&:hover {
&::after {
transform: scale(1);
@@ -659,7 +659,7 @@
transition: transform 0.2s;
}
& video {
& .media-video-element {
display: block;
object-fit: contain;
height: 100%;

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

@@ -25,6 +25,11 @@ run_test("postprocess_content", () => {
'<a href="http://zulip.zulipdev.com/user_uploads/w/ha/tever/inline.png" title="inline image">upload</a> ' +
'<a role="button">button</a> ' +
"</div>" +
'<div class="message_inline_image message_inline_video">' +
'<a href="http://zulip.zulipdev.com/user_uploads/w/ha/tever/inline.mp4">' +
'<video src="http://zulip.zulipdev.com/user_uploads/w/ha/tever/inline.mp4"></video>' +
"</a>" +
"</div>" +
'<div class="youtube-video message_inline_image">' +
'<a class="" href="https://www.youtube.com/watch?v=tyKJueEk0XM">' +
'<img src="https://i.ytimg.com/vi/tyKJueEk0XM/default.jpg">' +
@@ -40,9 +45,14 @@ run_test("postprocess_content", () => {
'<a href="http://zulip.zulipdev.com/user_uploads/w/ha/tever/inline.png" target="_blank" rel="noopener noreferrer" aria-label="inline image">upload</a> ' +
'<a role="button">button</a> ' +
"</div>" +
'<div class="message_inline_image message_inline_video">' +
'<a href="http://zulip.zulipdev.com/user_uploads/w/ha/tever/inline.mp4" target="_blank" rel="noopener noreferrer" class="media-anchor-element">' +
'<video src="http://zulip.zulipdev.com/user_uploads/w/ha/tever/inline.mp4" class="media-video-element media-image-element"></video>' +
"</a>" +
"</div>" +
'<div class="youtube-video message_inline_image">' +
'<a class="" href="https://www.youtube.com/watch?v=tyKJueEk0XM" target="_blank" rel="noopener noreferrer">' +
'<img src="https://i.ytimg.com/vi/tyKJueEk0XM/mqdefault.jpg" loading="lazy">' +
'<a class="media-anchor-element" href="https://www.youtube.com/watch?v=tyKJueEk0XM" target="_blank" rel="noopener noreferrer">' +
'<img src="https://i.ytimg.com/vi/tyKJueEk0XM/mqdefault.jpg" class="media-image-element" loading="lazy">' +
"</a>" +
"</div>",
);
@@ -106,8 +116,8 @@ run_test("message_inline_animated_image_still", ({override}) => {
"</div>",
),
'<div class="message_inline_image">' +
'<a href="/user_uploads/path/to/image.png" target="_blank" rel="noopener noreferrer" aria-label="image.png">' +
'<img data-original-dimensions="3264x2448" src="/user_uploads/thumbnail/path/to/image.png/300x200.webp" loading="lazy">' +
'<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" loading="lazy">' +
"</a>" +
"</div>",
);
@@ -123,8 +133,8 @@ run_test("message_inline_animated_image_still", ({override}) => {
"</div>",
),
'<div class="message_inline_image">' +
'<a href="/user_uploads/path/to/image.png" target="_blank" rel="noopener noreferrer" aria-label="image.png">' +
'<img data-original-dimensions="3264x2448" src="/user_uploads/thumbnail/path/to/image.png/300x200-anim.webp" data-animated="true" loading="lazy">' +
'<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" loading="lazy">' +
"</a>" +
"</div>",
);
@@ -140,8 +150,8 @@ run_test("message_inline_animated_image_still", ({override}) => {
"</div>",
),
'<div class="message_inline_image message_inline_animated_image_still">' +
'<a href="/user_uploads/path/to/image.png" target="_blank" rel="noopener noreferrer" aria-label="image.png">' +
'<img data-original-dimensions="3264x2448" src="/user_uploads/thumbnail/path/to/image.png/300x200.webp" data-animated="true" loading="lazy">' +
'<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" loading="lazy">' +
"</a>" +
"</div>",
);
@@ -156,8 +166,8 @@ run_test("message_inline_animated_image_still", ({override}) => {
"</div>",
),
'<div class="message_inline_image message_inline_animated_image_still">' +
'<a href="/user_uploads/path/to/image.png" target="_blank" rel="noopener noreferrer" aria-label="image.png">' +
'<img data-original-dimensions="3264x2448" src="/user_uploads/thumbnail/path/to/image.png/300x200.webp" data-animated="true" loading="lazy">' +
'<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" loading="lazy">' +
"</a>" +
"</div>",
);