feat: Implemented jellyfin api

This commit is contained in:
Aleksi Lassila
2024-03-28 00:49:43 +02:00
parent da2b4ee6d5
commit 71b70e5868
15 changed files with 157 additions and 64 deletions

View File

@@ -1,5 +1,4 @@
<script lang="ts">
import { fade } from 'svelte/transition';
import IconButton from '../IconButton.svelte';
import { ChevronLeft, ChevronRight } from 'radix-icons-svelte';
import classNames from 'classnames';
@@ -13,14 +12,15 @@
export let scrollClass = '';
</script>
<div class={classNames('flex flex-col gap-4 group/carousel', $$restProps.class)}>
<div class={'flex justify-between items-center gap-4 ' + scrollClass}>
<div class={classNames('flex flex-col group/carousel', $$restProps.class)}>
<div class={'flex justify-between items-center mb-2 ' + scrollClass}>
<slot name="title">
<div class="font-semibold text-xl">{heading}</div>
</slot>
<div
class={classNames(
'flex gap-2 sm:opacity-0 transition-opacity sm:group-hover/carousel:opacity-100',
'flex gap-2 ml-4',
//'sm:opacity-0 transition-opacity sm:group-hover/carousel:opacity-100',
{
hidden: (carousel?.scrollWidth || 0) === (carousel?.clientWidth || 0)
}
@@ -47,7 +47,7 @@
<Container horizontal>
<div
class={classNames(
'flex overflow-x-scroll items-center overflow-y-visible relative scrollbar-hide p-1',
'flex overflow-x-scroll items-center overflow-y-visible relative scrollbar-hide',
scrollClass
)}
bind:this={carousel}
@@ -59,14 +59,12 @@
</Container>
{#if scrollX > 50}
<div
transition:fade={{ duration: 200 }}
class={'absolute inset-y-0 left-0 w-0 sm:w-16 md:w-24 bg-gradient-to-r ' +
gradientFromColor}
/>
{/if}
{#if carousel && scrollX < carousel?.scrollWidth - carousel?.clientWidth - 50}
<div
transition:fade={{ duration: 200 }}
class={'absolute inset-y-0 right-0 w-0 sm:w-16 md:w-24 bg-gradient-to-l ' +
gradientFromColor}
/>