Add remote URL option to examples

examples/thumbnail-generation/index.html

@@ -15,15 +15,22 @@
 		<h1 class="text-3xl font-bold text-green-500 text-center">Thumbnail generation example</h1>
 		<p class="max-w-lg text-center">Select or drop a media file, and Mediabunny will extract video thumbnails for it.</p>
 
-		<div class="flex gap-2 mt-4">
-			<button class="rounded-lg bg-gray-200 dark:bg-zinc-750 hover:bg-gray-300 dark:hover:bg-zinc-700 px-5 py-2">
-				Select media file
-			</button>
+		<div class="flex flex-col items-center gap-1">
+			<div class="flex gap-2 mt-4">
+				<button id="select-file" class="rounded-lg bg-gray-200 dark:bg-zinc-750 hover:bg-gray-300 dark:hover:bg-zinc-700 px-5 py-2">
+					Select local file
+				</button>
 
-			<a id="sample-file-download" download="big-buck-bunny-trimmed.mp4" class="rounded-lg bg-gray-200 dark:bg-zinc-750 hover:bg-gray-300 dark:hover:bg-zinc-700 px-5 group grid place-items-center" title="Download sample file">
-				<img src="../../docs/assets/download-icon.svg" class="opacity-30 group-hover:opacity-80 dark:invert">
+				<button id="load-url" class="rounded-lg bg-gray-200 dark:bg-zinc-750 hover:bg-gray-300 dark:hover:bg-zinc-700 px-5 py-2">
+					Load remote URL
+				</button>
+			</div>
+
+			<a id="sample-file-download" download="big-buck-bunny-trimmed.mp4" class="hover:underline text-xs opacity-50 hover:opacity-70">
+				Download sample file
 			</a>
 		</div>
+
 		<p class="text-xs opacity-60 mt-2" id="file-name"></p>
 
 		<hr class="w-full max-w-96 my-4 border-gray-300 dark:border-zinc-700" style="display: none;">

examples/thumbnail-generation/thumbnail-generation.ts

@@ -1,9 +1,10 @@
-import { Input, ALL_FORMATS, BlobSource, CanvasSink } from 'mediabunny';
+import { Input, ALL_FORMATS, BlobSource, UrlSource, CanvasSink } from 'mediabunny';
 
 import SampleFileUrl from '../../docs/assets/big-buck-bunny-trimmed.mp4';
 (document.querySelector('#sample-file-download') as HTMLAnchorElement).href = SampleFileUrl;
 
-const selectMediaButton = document.querySelector('button') as HTMLButtonElement;
+const selectMediaButton = document.querySelector('#select-file') as HTMLButtonElement;
+const loadUrlButton = document.querySelector('#load-url') as HTMLButtonElement;
 const fileNameElement = document.querySelector('#file-name') as HTMLParagraphElement;
 const horizontalRule = document.querySelector('hr') as HTMLHRElement;
 const thumbnailContainer = document.querySelector('#thumbnail-container') as HTMLDivElement;
@@ -12,16 +13,19 @@ const errorElement = document.querySelector('#error-element') as HTMLParagraphEl
 const THUMBNAIL_COUNT = 16;
 const THUMBNAIL_SIZE = 200;
 
-const generateThumbnails = async (file: File) => {
-	fileNameElement.textContent = file.name;
+const generateThumbnails = async (resource: File | string) => {
+	fileNameElement.textContent = resource instanceof File ? resource.name : resource;
 	horizontalRule.style.display = '';
 	errorElement.textContent = '';
 	thumbnailContainer.innerHTML = '';
 
 	try {
-		// Create a new input from the file
+		// Create a new input from the resource
+		const source = resource instanceof File
+			? new BlobSource(resource)
+			: new UrlSource(resource);
 		const input = new Input({
-			source: new BlobSource(file),
+			source,
 			formats: ALL_FORMATS, // Accept all formats
 		});
 
@@ -122,6 +126,19 @@ selectMediaButton.addEventListener('click', () => {
 	fileInput.click();
 });
 
+loadUrlButton.addEventListener('click', () => {
+	const url = prompt(
+		'Please enter a URL of a media file. Note that it must support cross-origin requests, so have the right'
+		+ ' CORS headers set.',
+		'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4',
+	);
+	if (!url) {
+		return;
+	}
+
+	void generateThumbnails(url);
+});
+
 document.addEventListener('dragover', (event) => {
 	event.preventDefault();
 	event.dataTransfer!.dropEffect = 'copy';