encie22/portfolio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Inset player on large screens

Browse Source
This commit is contained in:
Nathan Cummins
2025-09-28 14:11:22 +09:30
parent 01a39c10cb
commit d2b668ba12
1 changed files with 4 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/components/Player.astro
View File

@@ -39,7 +39,7 @@ const initialQueue = await Promise.all(
<div
id="player"
class:list={[
"fixed right-0 bottom-0 left-0 z-100 bg-black shadow-lg",
"fixed right-0 bottom-0 left-0 z-100 rounded bg-black shadow-lg/75 md:right-3 md:bottom-3 md:left-3",
height
]}
transition:persist=""
@@ -48,7 +48,7 @@ const initialQueue = await Promise.all(
>
<div
id="player:time:progress"
class="relative top-0 right-0 left-0 m-0 h-2 w-full bg-gray-900 p-0 hover:cursor-pointer"
class="relative top-0 right-0 left-0 m-0 h-2 w-full rounded-t bg-gray-900 p-0 hover:cursor-pointer"
>
<div
id="player:time:progress:buffered"
@@ -61,7 +61,7 @@ const initialQueue = await Promise.all(
>
</div>
</div>
<div class="p-2 text-white">
<div class="p-2 text-white md:p-3">
<div class="grid grid-cols-2 text-xs">
<span id="player:times:current" class="col-span-1 text-left">0:00</span>
<span id="player:times:duration" class="col-span-1 text-right">0:00</span>
@@ -92,7 +92,7 @@ const initialQueue = await Promise.all(
</div>
</div>
</div>
<div class:list={[height]}></div>
<div class:list={[height, "bg-gray-900"]}></div>
<script is:inline src="/js/howler.min.js"></script>
<script is:inline define:vars={{ initialQueue }}>