Remove lightbox deduplication logic (#13580)

The lightbox code has some de-duplicating logic that is meant to
prevent two or more of the same image appearing in the lightbox. This
was designed to handle cases where galleries repeat the main media image
in the body of the article. Currently the assumption is that two images
are the same if they have the same image id, and can therefore be
de-duped.

However, some articles intentionally display the same image multiple
times, but with different crops. As these will all have the same image
id they will be de-duped, and all but the last image will be dropped
from the lightbox.

One solution is to use both the id and the crop of an image to determine
whether it is unique in the article, so that different crops of the same
image will not be considered identical. However, galleries often use
different crops of the same image in the main media and the body. As a
result these will no longer be considered duplicates, and will both
appear in the lightbox anyway, defeating the purpose of the
deduplication logic.

The choice, therefore, is between:

1. Two similar images appearing in the lightbox in some galleries.
2. Articles that rely on different crops of the same image having
multiple images missing from the lightbox.

(2) is considered more of a problem than (1), so this change removes the
lightbox deduplication logic.

Author: JamieB-gu

dotcom-rendering/src/model/buildLightboxImages.ts

@@ -28,34 +28,6 @@ const THRESHOLD = 620;
 const isLightboxable = (width: number, height: number): boolean =>
 	Math.max(width, height) > THRESHOLD;
 
-/**
- * Older legacy images use a different url format so we need to use a different
- * approach when extracting the id of the image
- */
-const decideImageId = ({
-	masterUrl,
-}: Pick<ImageForLightbox, 'masterUrl'>): string | undefined => {
-	const url = new URL(masterUrl);
-	switch (url.hostname) {
-		case 'media.guim.co.uk': {
-			// E.g.
-			// https://media.guim.co.uk/be634f340e477a975c7352f289c4353105ba9e67/288_121_3702_2221/140.jpg
-			// This bit                 ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
-			return url.pathname.split('/').at(1);
-		}
-		case 'i.guim.co.uk':
-		case 'uploads.guim.co.uk':
-		case 'static-secure.guim.co.uk':
-		case 'static.guim.co.uk':
-			// E.g.
-			// https://static.guim.co.uk/sys-images/Guardian/Pix/pictures/2015/5/26/1432666797165/59de49e2-553f-4b52-b7ac-09bda7f63e4b-220x132.jpeg
-			// This bit                                                             ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
-			return url.pathname.split('/').at(-1);
-		default:
-			return undefined;
-	}
-};
-
 const buildLightboxImage = (
 	element: ImageBlockElement | CartoonBlockElement,
 ): Omit<ImageForLightbox, 'position'> | undefined => {
@@ -144,8 +116,8 @@ export const buildLightboxImages = (
 	format: FEFormat,
 	blocks: Block[],
 	mainMediaElements: FEElement[],
-): ImageForLightbox[] => {
-	const lightboxImages = mainMediaElements
+): ImageForLightbox[] =>
+	mainMediaElements
 		.flatMap<Omit<ImageForLightbox, 'position'>>((element) => {
 			if (!isImage(element) && !isCartoon(element)) return [];
 			const lightboxImage = buildLightboxImage(element);
@@ -171,17 +143,3 @@ export const buildLightboxImages = (
 			),
 		)
 		.map((image, index) => ({ ...image, position: index + 1 }));
-
-	// On gallery articles the main media is often repeated as an element in the article body so
-	// we deduplicate the array here
-	return [
-		...new Map(
-			lightboxImages.map<[string, ImageForLightbox]>((image, index) => [
-				decideImageId(image) ?? `lightbox-image-id-${index}`,
-				image,
-			]),
-		).values(),
-	]
-		.sort((a, b) => a.position - b.position)
-		.map((image, index) => ({ ...image, position: index + 1 }));
-};