This commit is contained in:
Vanilagy
2025-07-03 11:36:07 +02:00
61 changed files with 1632 additions and 151 deletions
+3 -3
View File
@@ -12,7 +12,7 @@
</head>
<body class="flex flex-col items-center py-10 bg-gray-50 text-gray-800 dark:bg-zinc-900 dark:text-zinc-200 px-2">
<h1 class="text-3xl font-bold text-emerald-800 dark:text-emerald-200 text-center">Thumbnail generation example</h1>
<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">
@@ -21,7 +21,7 @@
</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="../../assets/download-icon.svg" class="opacity-30 group-hover:opacity-80 dark:invert">
<img src="../../docs/assets/download-icon.svg" class="opacity-30 group-hover:opacity-80 dark:invert">
</a>
</div>
<p class="text-xs opacity-60 mt-2" id="file-name"></p>
@@ -41,7 +41,7 @@
target="_blank"
class="flex items-center gap-2 fixed top-0 right-0 py-2 px-5 bg-gray-200 dark:bg-zinc-750 hover:bg-gray-300 dark:hover:bg-zinc-700 rounded-bl-xl"
>
<img src="../../assets/github-mark.svg" class="size-6 dark:invert">
<img src="../../docs/assets/github-mark.svg" class="size-6 dark:invert">
<p>View source code</p>
</a>
</body>
@@ -1,6 +1,6 @@
import { Input, ALL_FORMATS, BlobSource, CanvasSink } from 'mediabunny';
import SampleFileUrl from '../../assets/big-buck-bunny-trimmed.mp4';
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;