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

Add media player example

Browse Source
This commit is contained in:
Vanilagy
2025-05-25 22:17:43 +02:00
parent 2dcda7cbc8
commit 01e879929d
16 changed files with 715 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files
examples/thumbnail-generation/index.html
+1 -1
View File
@@ -23,7 +23,7 @@
<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>
<p class="text-xs opacity-60 mt-2" id="file-name"></p>
<hr class="w-96 my-4 border-gray-300 dark:border-zinc-700" style="display: none;">
examples/thumbnail-generation/thumbnail-generation.ts
+7 -5
View File
@@ -1,10 +1,10 @@
import { Input, ALL_FORMATS, BlobSource, CanvasSink } from 'mediakit';
const selectMediaButton = document.querySelector('button')!;
const fileNameElement = document.querySelector('#file-name')!;
const horizontalRule = document.querySelector('hr')!;
const thumbnailContainer = document.querySelector('#thumbnail-container')!;
const errorElement = document.querySelector('#error-element')!;
const selectMediaButton = document.querySelector('button') 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;
const errorElement = document.querySelector('#error-element') as HTMLParagraphElement;
const THUMBNAIL_COUNT = 16;
const THUMBNAIL_SIZE = 200;
@@ -91,6 +91,8 @@ const generateThumbnails = async (file: File) => {
}
};
/** === FILE SELECTION LOGIC === */
selectMediaButton.addEventListener('click', () => {
const fileInput = document.createElement('input');
fileInput.type = 'file';