Supporting HEIC / MOV from image_url

[MKippen]

<This is just a discussion on feature request, code contribution for .heic and .mov support>

LOVING this integration - its awesome!!
I am getting familiar with the code and will be looking to add support for .HEIC and .MOV files for background images loaded from image_url - i'm using a synology with image_url: media-source://media_source/local/synology. So far have not had much luck as the .UpdateImages loader seems to fail before I am even able to convert it. The good part is that most of the code seems to detect that there are .heic images, but we just need to do a conversion before loading.

Quite a few options around to do heic conversion, but wanted to get your input on supporting this. Also with Apple iPhone 'live view' they generate these really neat .mov files which would be so awesome to display in the background like these .heic or .mov files.

`loadHEICConverter() {
	return new Promise((resolve, reject) => {
		const script = document.createElement('script');
		script.src = 'https://cdn.jsdelivr.net/npm/heic2any/dist/heic2any.min.js';
		script.onload = resolve;
		script.onerror = reject;
		document.head.appendChild(script);
	});
}

// Updated function to handle HEIC image loading
async loadImageWithHEICSupport(img, wp) {
	img.setAttribute('data-loading', true);
	logger.debug(`Starting to load image: ${img.imageUrl}`);
	try {
		const response = await fetch(img.imageUrl);
		if (!response.ok) {
			throw new Error(`HTTP error! Status: ${response.status}`);
		}
		logger.debug(`Fetched image: ${img.imageUrl}`);
		const blob = await response.blob();
		logger.debug(`Blob type: ${blob.type}`);

		if (blob.type === 'image/heic' || blob.type === 'image/heif') {
			logger.debug(`Detected HEIC image: ${img.imageUrl}`);
			await loadHEICConverter();
			logger.debug(`HEIC converter loaded`);
			const convertedBlob = await heic2any({ blob, toType: 'image/jpeg' });
			logger.debug(`Converted HEIC to JPEG: ${img.imageUrl}`);
			const reader = new FileReader();

			reader.onload = function () {
				img.src = reader.result;
				logger.debug(`Image source set for: ${img.imageUrl}`);
			};

			reader.readAsDataURL(convertedBlob);
		} else {
			img.src = URL.createObjectURL(blob);
			logger.debug(`Image source set for non-HEIC image: ${img.imageUrl}`);
		}
	} catch (error) {
		img.setAttribute('data-loading', false);
		logger.error(`Failed to load image: ${img.imageUrl}`, error);
		wp.updateImage(img);
	}
}`

Just sharing thoughts as I work through debugging on this as I come to understand what's going on where at little better.

[j-a-n]

Hello @MKippen !
Thank you very much for your effort.
This would be a nice feature and I would be happy to receive a pull request.
I'm traveling for the next two weeks so can't help much at the moment. After that I'll be happy to take a look.

[j-a-n]

Hello!
The approach looks good.
Are you still working on it?