Mirror
/
zulip
mirror of https://github.com/zulip/zulip.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

lightbox: Correct media types to include HTMLImageElement.

This commit is contained in:
Karl Stolley 2024-07-26 10:10:11 -05:00 committed by Anders Kaseorg
parent 114f13e0ee
commit d445137d36
1 changed files with 13 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
web/src/lightbox.ts
View File

@ -204,7 +204,7 @@ export function clear_for_testing(): void {
asset_map.clear(); asset_map.clear();
} }
export function canonical_url_of_media(media: HTMLMediaElement): string { export function canonical_url_of_media(media: HTMLMediaElement | HTMLImageElement): string {
let media_string = media.src; let media_string = media.src;
if (!media_string) { if (!media_string) {
return ""; return "";
@ -225,7 +225,7 @@ export function canonical_url_of_media(media: HTMLMediaElement): string {
export function render_lightbox_media_list(displayed_source: string): void { export function render_lightbox_media_list(displayed_source: string): void {
if (!is_open) { if (!is_open) {
const message_media_list = $<HTMLMediaElement>( const message_media_list = $<HTMLMediaElement | HTMLImageElement>(
".focused-message-list .message_inline_image img, .focused-message-list .message_inline_video video", ".focused-message-list .message_inline_image img, .focused-message-list .message_inline_video video",
).toArray(); ).toArray();
const $lightbox_media_list = $("#lightbox_overlay .image-list").empty(); const $lightbox_media_list = $("#lightbox_overlay .image-list").empty();
@ -381,7 +381,7 @@ function display_video(payload: Payload): void {
export function build_open_media_function( export function build_open_media_function(
on_close: (() => void) | undefined, on_close: (() => void) | undefined,
): ($media: JQuery<HTMLMediaElement>) => void { ): ($media: JQuery<HTMLMediaElement | HTMLImageElement>) => void {
if (on_close === undefined) { if (on_close === undefined) {
on_close = function () { on_close = function () {
remove_video_players(); remove_video_players();
@ -391,7 +391,7 @@ export function build_open_media_function(
}; };
} }
return function ($media: JQuery<HTMLMediaElement>): void { return function ($media: JQuery<HTMLMediaElement | HTMLImageElement>): void {
// This is used both for clicking on media in the messagelist, as well as clicking on images // This is used both for clicking on media in the messagelist, as well as clicking on images
// in the media list under the lightbox when it is open. // in the media list under the lightbox when it is open.
const payload = parse_media_data($media[0]!); const payload = parse_media_data($media[0]!);
@ -424,7 +424,7 @@ export function show_from_selected_message(): void {
let $message = $message_selected; let $message = $message_selected;
// This is a function to satisfy eslint unicorn/no-array-callback-reference // This is a function to satisfy eslint unicorn/no-array-callback-reference
const media_classes = (): string => ".message_inline_image img, .message_inline_image video"; const media_classes = (): string => ".message_inline_image img, .message_inline_image video";
let $media = $message.find<HTMLMediaElement>(media_classes()); let $media = $message.find<HTMLMediaElement | HTMLImageElement>(media_classes());
let $prev_traverse = false; let $prev_traverse = false;
// First, we walk upwards/backwards, starting with the current // First, we walk upwards/backwards, starting with the current
@ -442,12 +442,12 @@ export function show_from_selected_message(): void {
break; break;
} else { } else {
$message = rows.last_message_in_group($prev_message_group); $message = rows.last_message_in_group($prev_message_group);
$media = $message.find<HTMLMediaElement>(media_classes()); $media = $message.find<HTMLMediaElement | HTMLImageElement>(media_classes());
continue; continue;
} }
} }
$message = $message.prev(); $message = $message.prev();
$media = $message.find<HTMLMediaElement>(media_classes()); $media = $message.find<HTMLMediaElement | HTMLImageElement>(media_classes());
} }
if ($prev_traverse) { if ($prev_traverse) {
@ -458,12 +458,12 @@ export function show_from_selected_message(): void {
break; break;
} else { } else {
$message = rows.first_message_in_group($next_message_group); $message = rows.first_message_in_group($next_message_group);
$media = $message.find<HTMLMediaElement>(media_classes()); $media = $message.find<HTMLMediaElement | HTMLImageElement>(media_classes());
continue; continue;
} }
} }
$message = $message.next(); $message = $message.next();
$media = $message.find<HTMLMediaElement>(media_classes()); $media = $message.find<HTMLMediaElement | HTMLImageElement>(media_classes());
} }
} }
@ -474,7 +474,7 @@ export function show_from_selected_message(): void {
} }
// retrieve the metadata from the DOM and store into the asset_map. // retrieve the metadata from the DOM and store into the asset_map.
export function parse_media_data(media: HTMLMediaElement): Payload { export function parse_media_data(media: HTMLMediaElement | HTMLImageElement): Payload {
const canonical_url = canonical_url_of_media(media); const canonical_url = canonical_url_of_media(media);
if (asset_map.has(canonical_url)) { if (asset_map.has(canonical_url)) {
// Use the cached value // Use the cached value
@ -621,7 +621,7 @@ export function initialize(): void {
e.preventDefault(); e.preventDefault();
// prevent the message compose dialog from happening. // prevent the message compose dialog from happening.
e.stopPropagation(); e.stopPropagation();
const $img = $(this).find<HTMLMediaElement>("img"); const $img = $(this).find<HTMLImageElement>("img");
open_image($img); open_image($img);
}, },
); );
@ -647,7 +647,7 @@ export function initialize(): void {
`.message_row a[href='${CSS.escape($(this).attr("data-url")!)}'] video`, `.message_row a[href='${CSS.escape($(this).attr("data-url")!)}'] video`,
); );
} else { } else {
$original_media_element = $<HTMLMediaElement>( $original_media_element = $<HTMLImageElement>(
`.message_row a[href='${CSS.escape($(this).attr("data-url")!)}'] img`, `.message_row a[href='${CSS.escape($(this).attr("data-url")!)}'] img`,
); );
} }
@ -694,7 +694,7 @@ export function initialize(): void {
$("#lightbox_overlay").on("click", ".lightbox-zoom-reset", () => { $("#lightbox_overlay").on("click", ".lightbox-zoom-reset", () => {
if (!$("#lightbox_overlay .lightbox-zoom-reset").hasClass("disabled")) { if (!$("#lightbox_overlay .lightbox-zoom-reset").hasClass("disabled")) {
const $img = $("#lightbox_overlay").find<HTMLMediaElement>(".image-preview img"); const $img = $("#lightbox_overlay").find<HTMLImageElement>(".image-preview img");
open_image($img); open_image($img);
pan_zoom_control.reset(); pan_zoom_control.reset();
} }