[Enhancement]: Resources Gallery View: Respect orientation embedded in image files

[pkerschbaum]

Current Behavior

Image thumbnails shown in the Resources Gallery View are shown in the orientation as read from the disk.

Desired Behavior

Image files might contain a orientation in their EXIF metadata. Read the orientation from that metadata an display the image thumbnail rotated accordingly.
There are many options for an EXIF image parser library to choose from: https://www.npmjs.com/search?ranking=optimal&q=exif

Implementation Notes

• The image thumbnails are retrieved by the UI via a custom electron protocol. I think we just should read and rotate the image thumbnail here:

  file-explorer/src/platform/electron/protocol/electron-main/app.ts

  Lines 46 to 79 in 076c16d

  	const THUMBNAIL_RESIZE_BLOCKLIST = ['image/svg+xml'];
  	async function getThumbnail(request: electron.ProtocolRequest): Promise<ProtocolStreamResponse> {
  	const parsed = new URL(request.url);
  	// property "pathname" has a leading slash --> remove that (https://developer.mozilla.org/en-US/docs/Web/API/URL/pathname)
  	const path = parsed.pathname.substring(1);
  	const uri = URI.parse(decodeURIComponent(path));
  	const requestedHeight = parsed.searchParams.get('height');
  	const parsedHeight = numbers.convert(requestedHeight);
  	invariant(parsedHeight !== undefined);
  	const mimeTypeBasedOnContent = (await FileType.fromFile(uri.fsPath))?.mime;
  	const extension = uriHelper.extractExtension(uri);
  	const mimeTypeBasedOnExtension = check.isNullishOrEmptyString(extension)
  	? undefined
  	: mime.getType(extension);
  	const finalMimeType = mimeTypeBasedOnContent ?? mimeTypeBasedOnExtension ?? undefined;
  	let thumbnailStream;
  	if (finalMimeType === undefined || THUMBNAIL_RESIZE_BLOCKLIST.includes(finalMimeType)) {
  	thumbnailStream = fs.createReadStream(uri.fsPath);
  	} else {
  	thumbnailStream = fs
  	.createReadStream(uri.fsPath)
  	.pipe(sharp().resize({ height: parsedHeight }));
  	}
  	return {
  	data: thumbnailStream,
  	mimeType: finalMimeType,
  	headers: {
  	'cache-control': `max-age=${60 * 60 * 24}`, // cache for 1 day
  	},
  	};
  	}