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

Mediakit -> Mediabunny

Browse Source
This commit is contained in:
Vanilagy
2025-06-16 15:46:44 +02:00
parent 05881ff1f5
commit 99f813c938
27 changed files with 126 additions and 126 deletions
Download Patch File Download Diff File Expand all files Collapse all files
examples/file-compression/file-compression.ts
+1 -1
View File
@@ -7,7 +7,7 @@ import {
Mp4OutputFormat,
Conversion,
QUALITY_VERY_LOW,
} from 'mediakit';
} from 'mediabunny';
const selectMediaButton = document.querySelector('button') as HTMLButtonElement;
const fileNameElement = document.querySelector('#file-name') as HTMLParagraphElement;
examples/file-compression/index.html
+4 -4
View File
@@ -4,7 +4,7 @@
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>File compression example | Mediakit</title>
<title>File compression example | Mediabunny</title>
<script type="module" src="../base.ts"></script>
<script type="module" src="./file-compression.ts"></script>
<link rel="stylesheet" href="../base.css">
@@ -12,7 +12,7 @@
<body class="flex flex-col items-center py-10 bg-zinc-50 text-zinc-800 dark:bg-zinc-900 dark:text-zinc-200 px-2">
<h1 class="text-3xl font-bold text-teal-800 dark:text-teal-200 text-center">File compression example</h1>
<p class="max-w-lg text-center">Select or drop a media file, and Mediakit will convert it to a heavily-compressed MP4 file.</p>
<p class="max-w-lg text-center">Select or drop a media file, and Mediabunny will convert it to a heavily-compressed MP4 file.</p>
<div class="flex gap-2 mt-4">
<button class="rounded-lg bg-zinc-200 dark:bg-zinc-750 hover:bg-zinc-300 dark:hover:bg-zinc-700 px-5 py-2">
@@ -38,8 +38,8 @@
<p class="text-xs font-medium mt-1" id="compression-facts" style="display: none;"></p>
<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 dark:invert">
<p class="text-sm font-semibold">Mediakit</p>
<img src="../../assets/mediabunny-logo.svg" class="size-6 dark:invert">
<p class="text-sm font-semibold">Mediabunny</p>
</div>
<a
examples/live-recording/index.html
+3 -3
View File
@@ -4,7 +4,7 @@
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Live recording example | Mediakit</title>
<title>Live recording example | Mediabunny</title>
<script type="module" src="../base.ts"></script>
<script type="module" src="./live-recording.ts"></script>
<link rel="stylesheet" href="../base.css">
@@ -39,8 +39,8 @@
</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 dark:invert">
<p class="text-sm font-semibold">Mediakit</p>
<img src="../../assets/mediabunny-logo.svg" class="size-6 dark:invert">
<p class="text-sm font-semibold">Mediabunny</p>
</div>
<a
examples/live-recording/live-recording.ts
+1 -1
View File
@@ -5,7 +5,7 @@ import {
Output,
QUALITY_MEDIUM,
StreamTarget,
} from 'mediakit';
} from 'mediabunny';
const toggleRecordingButton = document.querySelector('#toggle-button') as HTMLButtonElement;
const horizontalRule = document.querySelector('hr') as HTMLHRElement;
examples/media-player/index.html
+4 -4
View File
@@ -4,7 +4,7 @@
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Media player example | Mediakit</title>
<title>Media player example | Mediabunny</title>
<script type="module" src="../base.ts"></script>
<script type="module" src="./media-player.ts"></script>
<link rel="stylesheet" href="../base.css">
@@ -12,7 +12,7 @@
<body class="flex flex-col items-center py-10 bg-zinc-50 text-zinc-800 dark:bg-zinc-900 dark:text-zinc-200 px-2 h-svh">
<h1 class="text-3xl font-bold text-purple-800 dark:text-purple-200 text-center">Media player example</h1>
<p class="max-w-lg text-center">Select or drop a media file, and a fully custom, Mediakit-powered player will appear.</p>
<p class="max-w-lg text-center">Select or drop a media file, and a fully custom, Mediabunny-powered player will appear.</p>
<div class="flex gap-2 mt-4">
<button class="rounded-lg bg-zinc-200 dark:bg-zinc-750 hover:bg-zinc-300 dark:hover:bg-zinc-700 px-5 py-2">
@@ -74,8 +74,8 @@
</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 dark:invert">
<p class="text-sm font-semibold">Mediakit</p>
<img src="../../assets/mediabunny-logo.svg" class="size-6 dark:invert">
<p class="text-sm font-semibold">Mediabunny</p>
</div>
<a
examples/media-player/media-player.ts
+1 -1
View File
@@ -6,7 +6,7 @@ import {
Input,
WrappedAudioBuffer,
WrappedCanvas,
} from 'mediakit';
} from 'mediabunny';
const selectMediaButton = document.querySelector('button') as HTMLButtonElement;
const fileNameElement = document.querySelector('#file-name') as HTMLParagraphElement;
examples/metadata-extraction/index.html
+4 -4
View File
@@ -4,7 +4,7 @@
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Metadata extraction example | Mediakit</title>
<title>Metadata extraction example | Mediabunny</title>
<script type="module" src="../base.ts"></script>
<script type="module" src="./metadata-extraction.ts"></script>
<link rel="stylesheet" href="../base.css">
@@ -12,7 +12,7 @@
<body class="flex flex-col items-center py-10 bg-zinc-50 text-zinc-800 dark:bg-zinc-900 dark:text-zinc-200 px-2">
<h1 class="text-3xl font-bold text-blue-800 dark:text-blue-200 text-center">Metadata extraction example</h1>
<p class="max-w-lg text-center">Select or drop a media file, and Mediakit will start extracting various metadata about that file.</p>
<p class="max-w-lg text-center">Select or drop a media file, and Mediabunny will start extracting various metadata about that file.</p>
<div class="flex gap-2 mt-4">
<button class="rounded-lg bg-zinc-200 dark:bg-zinc-750 hover:bg-zinc-300 dark:hover:bg-zinc-700 px-5 py-2">
@@ -31,8 +31,8 @@
<div id="metadata-container" class="text-sm"></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 dark:invert">
<p class="text-sm font-semibold">Mediakit</p>
<img src="../../assets/mediabunny-logo.svg" class="size-6 dark:invert">
<p class="text-sm font-semibold">Mediabunny</p>
</div>
<a
examples/metadata-extraction/metadata-extraction.ts
+1 -1
View File
@@ -1,4 +1,4 @@
import { Input, ALL_FORMATS, BlobSource } from 'mediakit';
import { Input, ALL_FORMATS, BlobSource } from 'mediabunny';
const selectMediaButton = document.querySelector('button') as HTMLButtonElement;
const fileNameElement = document.querySelector('#file-name') as HTMLParagraphElement;
examples/procedural-generation/index.html
+4 -4
View File
@@ -4,7 +4,7 @@
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Procedural Generation example | Mediakit</title>
<title>Procedural Generation example | Mediabunny</title>
<script type="module" src="../base.ts"></script>
<script type="module" src="./procedural-generation.ts"></script>
<link rel="stylesheet" href="../base.css">
@@ -12,7 +12,7 @@
<body class="flex flex-col items-center py-10 bg-zinc-50 text-zinc-800 dark:bg-zinc-900 dark:text-zinc-200 px-2">
<h1 class="text-3xl font-bold text-teal-800 dark:text-teal-200 text-center">Procedural generation example</h1>
<p class="max-w-lg text-center">Using Mediakit, this page will procedurally generate a video of musical bouncing balls as fast as possible.</p>
<p class="max-w-lg text-center">Using Mediabunny, this page will procedurally generate a video of musical bouncing balls as fast as possible.</p>
<div class="flex flex-col gap-6 mt-8 w-full max-w-80">
<div class="flex flex-col gap-2">
@@ -45,8 +45,8 @@
<p class="text-xs font-medium mt-1" id="video-info" style="display: none;"></p>
<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 dark:invert">
<p class="text-sm font-semibold">Mediakit</p>
<img src="../../assets/mediabunny-logo.svg" class="size-6 dark:invert">
<p class="text-sm font-semibold">Mediabunny</p>
</div>
<a
examples/procedural-generation/procedural-generation.ts
+1 -1
View File
@@ -7,7 +7,7 @@ import {
QUALITY_HIGH,
getFirstEncodableAudioCodec,
getFirstEncodableVideoCodec,
} from 'mediakit';
} from 'mediabunny';
const durationSlider = document.querySelector('#duration-slider') as HTMLInputElement;
const durationValue = document.querySelector('#duration-value') as HTMLParagraphElement;
examples/thumbnail-generation/index.html
+4 -4
View File
@@ -4,7 +4,7 @@
<meta charset="UTF-8">
<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>
<title>Thumbnail generation example | Mediabunny</title>
<script type="module" src="./../base.ts"></script>
<script type="module" src="./thumbnail-generation.ts"></script>
<link rel="stylesheet" href="../base.css">
@@ -12,7 +12,7 @@
<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>
<p class="max-w-lg text-center">Select or drop a media file, and Mediakit will extract video thumbnails for it.</p>
<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">
<button class="rounded-lg bg-gray-200 dark:bg-zinc-750 hover:bg-gray-300 dark:hover:bg-zinc-700 px-5 py-1">
@@ -31,8 +31,8 @@
<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 dark:invert">
<p class="text-sm font-semibold">Mediakit</p>
<img src="../../assets/mediabunny-logo.svg" class="size-6 dark:invert">
<p class="text-sm font-semibold">Mediabunny</p>
</div>
<a
examples/thumbnail-generation/thumbnail-generation.ts
+1 -1
View File
@@ -1,4 +1,4 @@
import { Input, ALL_FORMATS, BlobSource, CanvasSink } from 'mediakit';
import { Input, ALL_FORMATS, BlobSource, CanvasSink } from 'mediabunny';
const selectMediaButton = document.querySelector('button') as HTMLButtonElement;
const fileNameElement = document.querySelector('#file-name') as HTMLParagraphElement;