Add quotes, move assets around

This commit is contained in:
Vanilagy
2025-06-28 12:50:45 +02:00
parent 9167dd63df
commit 655cab747c
30 changed files with 112 additions and 95 deletions
+10 -10
View File
@@ -21,7 +21,7 @@
</button>
<a id="sample-file-download" download="big-buck-bunny-trimmed.mp4" class="rounded-lg bg-zinc-200 dark:bg-zinc-750 hover:bg-zinc-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>
@@ -35,18 +35,18 @@
<div class="bg-zinc-900/50 absolute left-0 right-0 bottom-0 h-10 items-center flex m-2 rounded-lg text-white transition-opacity" id="controls" style="opacity: 0;">
<button class="p-2 group outline-none" id="play-button">
<div class="size-6 invert group-hover:scale-110">
<img src="../../assets/play-icon.svg" class="size-full" id="play-icon">
<img src="../../assets/pause-icon.svg" class="size-full" id="pause-icon" style="display: none;">
<img src="../../docs/assets/play-icon.svg" class="size-full" id="play-icon">
<img src="../../docs/assets/pause-icon.svg" class="size-full" id="pause-icon" style="display: none;">
</div>
</button>
<button class="p-2 ml-4 mr-1" id="volume-button">
<div class="size-6 invert group-hover:scale-110" id="volume-icon-wrapper">
<img src="../../assets/volume-off-icon.svg" class="size-full">
<img src="../../assets/volume-x-icon.svg" class="size-full">
<img src="../../assets/volume-0-icon.svg" class="size-full">
<img src="../../assets/volume-1-icon.svg" class="size-full">
<img src="../../assets/volume-2-icon.svg" class="size-full">
<img src="../../docs/assets/volume-off-icon.svg" class="size-full">
<img src="../../docs/assets/volume-x-icon.svg" class="size-full">
<img src="../../docs/assets/volume-0-icon.svg" class="size-full">
<img src="../../docs/assets/volume-1-icon.svg" class="size-full">
<img src="../../docs/assets/volume-2-icon.svg" class="size-full">
</div>
</button>
@@ -68,7 +68,7 @@
<button class="p-2 group outline-none" id="fullscreen-button">
<div class="size-6 invert group-hover:scale-110">
<img src="../../assets/fullscreen-icon.svg" class="size-full">
<img src="../../docs/assets/fullscreen-icon.svg" class="size-full">
</div>
</button>
</div>
@@ -84,7 +84,7 @@
target="_blank"
class="flex items-center gap-2 fixed top-0 right-0 py-2 px-5 bg-zinc-200 dark:bg-zinc-750 hover:bg-zinc-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 -1
View File
@@ -8,7 +8,7 @@ import {
WrappedCanvas,
} 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;