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

feat: Video player UI improvements, double click to fullscreen and click to pause

Browse Source
This commit is contained in:
Aleksi Lassila
2023-08-16 13:23:19 +03:00
parent 2db658bfec
commit cd99f4e593
9 changed files with 292 additions and 211 deletions
Download Patch File Download Diff File Expand all files Collapse all files

72
src/lib/components/VideoPlayer/Slider.svelte
View File

@@ -1,39 +1,47 @@
<script lang="ts">
export let min = 0;
export let max = 100;
export let step = 0.01;
export let primaryValue = 0;
export let secondaryValue = 0;
export let min = 0;
export let max = 100;
export let step = 0.01;
export let primaryValue = 0;
export let secondaryValue = 0;
let progressBarOffset = 0;
let progressBarOffset = 0;
</script>
<div class="h-2 relative group">
<!-- 0.54 em is half the width of the input thumb size -->
<div class="h-full relative px-[0.54em]">
<div class="h-full bg-gray-300 rounded-full overflow-hidden relative">
<!-- Secondary progress -->
<div class="h-full bg-gray-400 absolute top-0"
style="width: {secondaryValue / max * 100}%;">
</div>
<div class="h-1 relative group">
<div class="h-full relative px-[0.5rem]">
<div class="h-full bg-zinc-200 bg-opacity-20 rounded-full overflow-hidden relative">
<!-- Secondary progress -->
<div
class="h-full bg-zinc-200 bg-opacity-20 absolute top-0"
style="width: {(secondaryValue / max) * 100}%;"
/>
<!-- Primary progress -->
<div class="h-full bg-amber-200 absolute top-0"
style="width: {primaryValue / max * 100}%;"
bind:offsetWidth={progressBarOffset}>
</div>
</div>
<!-- Primary progress -->
<div
class="h-full bg-amber-300 absolute top-0"
style="width: {(primaryValue / max) * 100}%;"
bind:offsetWidth={progressBarOffset}
/>
</div>
<div class="absolute w-4 h-4 bg-amber-200 rounded-full transform mx-2 -translate-x-1/2 -translate-y-1/2 top-1/2 cursor-pointer
drop-shadow-md group-hover:scale-125 group-hover:shadow-lg transition-transform duration-100"
style="left: {progressBarOffset}px;"
></div>
</div>
<div
class="absolute w-3 h-3 bg-amber-200 rounded-full transform mx-2 -translate-x-1/2 -translate-y-1/2 top-1/2 cursor-pointer
drop-shadow-md opacity-0 group-hover:opacity-100 transition-opacity duration-100"
style="left: {progressBarOffset}px;"
/>
</div>
<input
type="range"
class="w-full h-full absolute cursor-pointer opacity-0 transform -translate-y-2"
min={min} max={max} step={step} bind:value={primaryValue} on:mouseup on:mousedown
on:touchstart on:touchend
/>
</div>
<input
type="range"
class="w-full absolute -top-0.5 cursor-pointer h-2 opacity-0"
{min}
{max}
{step}
bind:value={primaryValue}
on:mouseup
on:mousedown
on:touchstart
on:touchend
/>
</div>