starred/reiverr
1
0
Fork 0
mirror of https://github.com/aleksilassila/reiverr.git synced 2026-04-17 19:53:11 +02:00
Code Issues Packages Projects Releases Wiki Activity

feat: video ui improvements

Browse Source
This commit is contained in:
Aleksi Lassila
2025-02-22 03:55:08 +02:00
parent e5cde5328b
commit e90c85ac30
1 changed files with 20 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
src/lib/components/VideoPlayer/VideoPlayer.svelte
View File

@@ -132,10 +132,20 @@
subtitles={subtitleInfo?.subtitles}
/>
<!-- Overlay -->
<!-- Overlay secondary-950/75 -->
<div
class={classNames(
'absolute inset-0 bg-gradient-to-b from-transparent from-60% to-secondary-950/75 transition-opacity pointer-events-none',
'absolute inset-0 transition-opacity pointer-events-none',
'bg-gradient-to-b from-secondary-950/75 from-0% to-[100px] to-transparent',
{
'opacity-0': !showInterface
}
)}
/>
<div
class={classNames(
'absolute inset-0 transition-opacity pointer-events-none',
'bg-gradient-to-t from-secondary-950/75 from-0% to-[300px] to-transparent',
{
'opacity-0': !showInterface
}
@@ -148,18 +158,19 @@
>
<!-- Title-->
</Container>
{#if buffering || !videoDidLoad}
<div
class="absolute left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 bg-black bg-opacity-50 rounded-full p-2"
>
<Spinner class="w-12 h-12" />
</div>
{:else if paused && showInterface}
{#if paused && showInterface && !seeking}
<div
class="absolute left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 bg-black bg-opacity-50 rounded-full p-2"
>
<Pause class="w-12 h-12" />
</div>
{:else if (buffering && !paused) || !videoDidLoad}
<div
class="absolute left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 bg-black bg-opacity-50 rounded-full p-2"
>
<Spinner class="w-12 h-12" />
</div>
{/if}
<Container
class={classNames(