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/metadata-extraction/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-zinc-300 dark:border-zinc-700" style="display: none;">
examples/metadata-extraction/metadata-extraction.ts
+36 -34
View File
@@ -1,10 +1,10 @@
import { Input, ALL_FORMATS, BlobSource } from 'mediakit';
const selectMediaButton = document.querySelector('button')!;
const fileNameElement = document.querySelector('#file-name')!;
const horizontalRule = document.querySelector('hr')!;
const bytesReadElement = document.querySelector('#bytes-read')!;
const metadataContainer = document.querySelector('#metadata-container')!;
const selectMediaButton = document.querySelector('button') as HTMLButtonElement;
const fileNameElement = document.querySelector('#file-name') as HTMLParagraphElement;
const horizontalRule = document.querySelector('hr') as HTMLHRElement;
const bytesReadElement = document.querySelector('#bytes-read') as HTMLParagraphElement;
const metadataContainer = document.querySelector('#metadata-container') as HTMLDivElement;
const extractMetadata = (file: File) => {
// Create a new input from the file
@@ -84,35 +84,6 @@ const extractMetadata = (file: File) => {
metadataContainer.append(bytesReadElement, htmlElement);
};
selectMediaButton.addEventListener('click', () => {
const fileInput = document.createElement('input');
fileInput.type = 'file';
fileInput.addEventListener('change', () => {
const file = fileInput.files?.[0];
if (!file) {
return;
}
extractMetadata(file);
});
fileInput.click();
});
document.addEventListener('dragover', (event) => {
event.preventDefault();
event.dataTransfer!.dropEffect = 'copy';
});
document.addEventListener('drop', (event) => {
event.preventDefault();
const files = event.dataTransfer?.files;
const file = files && files.length > 0 ? files[0] : undefined;
if (file) {
extractMetadata(file);
}
});
// Creates an HTML element to display any given value
const renderValue = (value: unknown) => {
if (Array.isArray(value)) {
@@ -175,3 +146,34 @@ const renderObject = (object: Record<string, unknown>) => {
const shortDelay = () => {
return new Promise(resolve => setTimeout(resolve, 1000 / 60));
};
/** === FILE SELECTION LOGIC === */
selectMediaButton.addEventListener('click', () => {
const fileInput = document.createElement('input');
fileInput.type = 'file';
fileInput.addEventListener('change', () => {
const file = fileInput.files?.[0];
if (!file) {
return;
}
extractMetadata(file);
});
fileInput.click();
});
document.addEventListener('dragover', (event) => {
event.preventDefault();
event.dataTransfer!.dropEffect = 'copy';
});
document.addEventListener('drop', (event) => {
event.preventDefault();
const files = event.dataTransfer?.files;
const file = files && files.length > 0 ? files[0] : undefined;
if (file) {
extractMetadata(file);
}
});