arcodange/mediabunny
1
0
Fork 0
mirror of https://github.com/arcodange-org/mediabunny.git synced 2026-09-27 10:53:50 +02:00
Code Issues Packages Projects Releases Wiki Activity

Add Inter and dark mode to examples

Browse Source
This commit is contained in:
Vanilagy
2025-05-25 16:14:22 +02:00
parent f95843e637
commit 2dcda7cbc8
7 changed files with 42 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files
examples/thumbnail-generation/index.html
+11 -10
View File
@@ -5,41 +5,42 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Thumbnail generation example | Mediakit</title>
<script type="module" src="./../base.ts"></script>
<script type="module" src="./thumbnail-generation.ts"></script>
<link rel="stylesheet" href="../index.css">
<link rel="stylesheet" href="../base.css">
</head>
<body class="flex flex-col items-center py-10 bg-gray-50 text-gray-800 px-2">
<h1 class="text-3xl">Thumbnail generation example</h1>
<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-medium text-emerald-800 dark:text-emerald-200">Thumbnail generation example</h1>
<p>Select or drop a media file, and Mediakit will extract video thumbnails for it.</p>
<div class="flex gap-2 mt-4">
<button class="rounded-lg bg-gray-200 hover:bg-gray-300 px-5 py-1">
<button class="rounded-lg bg-gray-200 dark:bg-zinc-750 hover:bg-gray-300 dark:hover:bg-zinc-700 px-5 py-1">
Select media file
</button>
<a href="../../assets/big-buck-bunny-trimmed.mp4" download class="rounded-lg bg-gray-200 hover:bg-gray-300 px-5 group grid place-items-center" title="Download sample file">
<img src="../../assets/download-icon.svg" class="opacity-30 group-hover:opacity-80">
<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">
<img src="../../assets/download-icon.svg" class="opacity-30 group-hover:opacity-80 dark:invert">
</a>
</div>
<p class="text-xs opacity-60 mt-0.5" id="file-name"></p>
<hr class="w-96 my-4 border-gray-300" style="display: none;">
<hr class="w-96 my-4 border-gray-300 dark:border-zinc-700" style="display: none;">
<p id="error-element" class="text-red-500"></p>
<div id="thumbnail-container" class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4"></div>
<div class="fixed top-0 left-0 flex gap-2 py-2 px-5 items-center">
<img src="../../assets/mediakit-logo.svg" class="size-6">
<img src="../../assets/mediakit-logo.svg" class="size-6 dark:invert">
<p class="text-sm font-semibold">Mediakit</p>
</div>
<a
href="https://github.com/Vanilagy/metamuxer/tree/main/examples/thumbnail-generation"
target="_blank"
class="flex items-center gap-2 fixed top-0 right-0 py-2 px-5 bg-gray-200 hover:bg-gray-300 rounded-bl-xl"
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">
<img src="../../assets/github-mark.svg" class="size-6 dark:invert">
<p>View source code</p>
</a>
</body>
examples/thumbnail-generation/thumbnail-generation.ts
+1 -1
View File
@@ -39,7 +39,7 @@ const generateThumbnails = async (file: File) => {
const thumbnailElements = [];
for (let i = 0; i < THUMBNAIL_COUNT; i++) {
const thumbnailElement = document.createElement('div');
thumbnailElement.className = 'rounded-lg overflow-hidden bg-gray-100 relative';
thumbnailElement.className = 'rounded-lg overflow-hidden bg-zinc-100 dark:bg-zinc-800 relative';
thumbnailElement.style.width = `${width}px`;
thumbnailElement.style.height = `${height}px`;
thumbnailElements.push(thumbnailElement);