[Enhancement]: Resources Gallery View: Show thumbnails for PDF (and perhaps MS Office) files

[pkerschbaum]

Current Behavior

Thumbnails in the Resources Gallery View are shown only for images and SVG files:

file-explorer/src/platform/electron/native-host.ts

Line 15 in 076c16d

const THUMBNAIL_AVAILABLE_FOR_MIME_TYPE = ['image/png', 'image/jpeg', 'image/svg+xml'];

Desired Behavior

Add support for additional file types:

• PDF files
• maybe also MS Office files:
  • Word (docx)
  • Excel (xlsx)
  • Powerpoint (pptx)

Implementation Notes

• The image thumbnails are retrieved by the UI via a custom electron protocol. The implementation of the custom electron protocol is in the main process. We should generate the thumbnail there. NodeJS APIs are available in the main process, so we could use e.g. GraphicsMagick like this approach: https://gist.github.com/jamilnyc/71bb717c95835bcc1d848b5158e90abb.
  Here is the implementation of the custom protocol:

  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
  	},
  	};
  	}