Fix BBB trimmed link

examples/file-compression/file-compression.ts

@@ -9,6 +9,9 @@ import {
 	QUALITY_VERY_LOW,
 } from 'mediabunny';
 
+import SampleFileUrl from '../../assets/big-buck-bunny-trimmed.mp4';
+(document.querySelector('#sample-file-download') as HTMLAnchorElement).href = SampleFileUrl;
+
 const selectMediaButton = document.querySelector('button') as HTMLButtonElement;
 const fileNameElement = document.querySelector('#file-name') as HTMLParagraphElement;
 const horizontalRule = document.querySelector('hr') as HTMLHRElement;

examples/file-compression/index.html

@@ -19,7 +19,7 @@
 				Select media file
 			</button>
 
-			<a href="../../assets/big-buck-bunny-trimmed.mp4" download class="rounded-lg bg-zinc-200 dark:bg-zinc-750 hover:bg-zinc-300 dark:hover:bg-zinc-700 px-5 group grid place-items-center" title="Download sample file">
+			<a id="sample-file-download" download="big-buck-bunny-trimmed.mp4" class="rounded-lg bg-zinc-200 dark:bg-zinc-750 hover:bg-zinc-300 dark:hover:bg-zinc-700 px-5 group grid place-items-center" title="Download sample file">
 				<img src="../../assets/download-icon.svg" class="opacity-30 group-hover:opacity-80 dark:invert">
 			</a>
 		</div>

examples/media-player/index.html

@@ -19,7 +19,7 @@
 				Select media file
 			</button>
 
-			<a href="../../assets/big-buck-bunny-trimmed.mp4" download class="rounded-lg bg-zinc-200 dark:bg-zinc-750 hover:bg-zinc-300 dark:hover:bg-zinc-700 px-5 group grid place-items-center" title="Download sample file">
+			<a id="sample-file-download" download="big-buck-bunny-trimmed.mp4" class="rounded-lg bg-zinc-200 dark:bg-zinc-750 hover:bg-zinc-300 dark:hover:bg-zinc-700 px-5 group grid place-items-center" title="Download sample file">
 				<img src="../../assets/download-icon.svg" class="opacity-30 group-hover:opacity-80 dark:invert">
 			</a>
 		</div>

examples/media-player/media-player.ts

@@ -8,6 +8,9 @@ import {
 	WrappedCanvas,
 } from 'mediabunny';
 
+import SampleFileUrl from '../../assets/big-buck-bunny-trimmed.mp4';
+(document.querySelector('#sample-file-download') as HTMLAnchorElement).href = SampleFileUrl;
+
 const selectMediaButton = document.querySelector('button') as HTMLButtonElement;
 const fileNameElement = document.querySelector('#file-name') as HTMLParagraphElement;
 const horizontalRule = document.querySelector('hr') as HTMLHRElement;

examples/metadata-extraction/index.html

@@ -19,7 +19,7 @@
 				Select media file
 			</button>
 
-			<a href="../../assets/big-buck-bunny-trimmed.mp4" download class="rounded-lg bg-zinc-200 dark:bg-zinc-750 hover:bg-zinc-300 dark:hover:bg-zinc-700 px-5 group grid place-items-center" title="Download sample file">
+			<a id="sample-file-download" download="big-buck-bunny-trimmed.mp4" class="rounded-lg bg-zinc-200 dark:bg-zinc-750 hover:bg-zinc-300 dark:hover:bg-zinc-700 px-5 group grid place-items-center" title="Download sample file">
 				<img src="../../assets/download-icon.svg" class="opacity-30 group-hover:opacity-80 dark:invert">
 			</a>
 		</div>

examples/metadata-extraction/metadata-extraction.ts

@@ -1,5 +1,8 @@
 import { Input, ALL_FORMATS, BlobSource } from 'mediabunny';
 
+import SampleFileUrl from '../../assets/big-buck-bunny-trimmed.mp4';
+(document.querySelector('#sample-file-download') as HTMLAnchorElement).href = SampleFileUrl;
+
 const selectMediaButton = document.querySelector('button') as HTMLButtonElement;
 const fileNameElement = document.querySelector('#file-name') as HTMLParagraphElement;
 const horizontalRule = document.querySelector('hr') as HTMLHRElement;

examples/thumbnail-generation/index.html

@@ -19,7 +19,7 @@
 				Select media file
 			</button>
 
-			<a href="../../assets/big-buck-bunny-trimmed.mp4" download 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">
+			<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="../../assets/download-icon.svg" class="opacity-30 group-hover:opacity-80 dark:invert">
 			</a>
 		</div>

examples/thumbnail-generation/thumbnail-generation.ts

@@ -1,5 +1,8 @@
 import { Input, ALL_FORMATS, BlobSource, CanvasSink } from 'mediabunny';
 
+import SampleFileUrl from '../../assets/big-buck-bunny-trimmed.mp4';
+(document.querySelector('#sample-file-download') as HTMLAnchorElement).href = SampleFileUrl;
+
 const selectMediaButton = document.querySelector('button') as HTMLButtonElement;
 const fileNameElement = document.querySelector('#file-name') as HTMLParagraphElement;
 const horizontalRule = document.querySelector('hr') as HTMLHRElement;

tsconfig.vite.json

@@ -8,6 +8,7 @@
 		"paths": {
 			"mediabunny": ["./dist/mediabunny.d.ts"],
 		},
+		"types": ["vite/client"]
 	},
 	"include": [
 		"./vite.config.ts",