Did a lot of screwing around with the layout, actually starting to look decent now
This commit is contained in:
Eclypsed
@@ -4,6 +4,7 @@
|
||||
import IconButton from '$lib/components/utility/iconButton.svelte'
|
||||
import VolumeSlider from '$lib/components/utility/volumeSlider.svelte'
|
||||
import Slider from '$lib/components/utility/slider.svelte'
|
||||
import { formatDuration } from '$lib/utils/utils.js'
|
||||
import { currentlyPlaying } from '$lib/utils/stores.js'
|
||||
import { slide } from 'svelte/transition'
|
||||
|
||||
@@ -11,86 +12,95 @@
|
||||
|
||||
let volume
|
||||
let songLiked = false,
|
||||
songPlaying = false
|
||||
|
||||
const formatDuration = (timeMilliseconds) => {
|
||||
const seconds = Math.floor((timeMilliseconds / 1000) % 60)
|
||||
const minutes = Math.floor((timeMilliseconds / 1000 / 60) % 60)
|
||||
|
||||
return [minutes.toString(), seconds.toString().padStart(2, '0')].join(':')
|
||||
}
|
||||
songPlaying = false,
|
||||
fullplayerOpen = false
|
||||
</script>
|
||||
|
||||
{#if song}
|
||||
<div id="player-wrapper" class="relative w-full" transition:slide={{ axis: 'y' }}>
|
||||
{#if displayMode === 'vertical'}
|
||||
<h1>Vertical Mode</h1>
|
||||
{:else}
|
||||
<div class="grid h-full grid-cols-3 grid-rows-1 items-center gap-10 overflow-hidden bg-black px-6 text-lg">
|
||||
<section class="flex h-full w-full items-center justify-start gap-4 py-2.5 text-sm">
|
||||
<img class="h-full rounded-lg object-contain" src={song.image} alt="{song.name} thumbnail" />
|
||||
<div class="flex h-full flex-col justify-center gap-1 overflow-hidden">
|
||||
<span class="overflow-hidden text-ellipsis" title={song.name}>{song.name}</span>
|
||||
<span class="overflow-hidden text-ellipsis text-neutral-400" style="font-size: 0; line-height: 0;">
|
||||
{#each song.artists as artist}
|
||||
{@const listIndex = song.artists.indexOf(artist)}
|
||||
<a class="text-xs hover:underline" href="/artist?id={artist.id}&service={song.connectionId}">{artist.name}</a>
|
||||
{#if listIndex === song.artists.length - 2}
|
||||
<span class="mx-0.5 text-xs">&</span>
|
||||
{:else if listIndex < song.artists.length - 2}
|
||||
<span class="mr-0.5 text-xs">,</span>
|
||||
{/if}
|
||||
{/each}
|
||||
</span>
|
||||
</div>
|
||||
<button class="grid aspect-square h-6 place-items-center text-lg transition-all" on:click={() => (songLiked = !songLiked)}>
|
||||
{#if songLiked}
|
||||
<i class="fa-solid fa-heart text-fuchsia-400" />
|
||||
{:else}
|
||||
<i class="fa-regular fa-heart text-neutral-400 hover:text-white" />
|
||||
{#if song && displayMode === 'horizontal'}
|
||||
<div class="grid w-full grid-cols-3 grid-rows-1 items-center gap-10 overflow-hidden bg-black px-6 text-lg" style="height: 80px;" transition:slide={{ axis: 'y' }}>
|
||||
<section class="flex h-full w-full items-center justify-start gap-4 py-2.5 text-sm">
|
||||
<img class="h-full rounded-lg object-contain" src={song.image} alt="{song.name} thumbnail" />
|
||||
<div class="flex h-full flex-col justify-center gap-1 overflow-hidden">
|
||||
<span class="overflow-hidden text-ellipsis" title={song.name}>{song.name}</span>
|
||||
<span class="overflow-hidden text-ellipsis text-neutral-400" style="font-size: 0; line-height: 0;">
|
||||
{#each song.artists as artist}
|
||||
{@const listIndex = song.artists.indexOf(artist)}
|
||||
<a class="text-xs hover:underline" href="/artist?id={artist.id}&service={song.connectionId}">{artist.name}</a>
|
||||
{#if listIndex === song.artists.length - 2}
|
||||
<span class="mx-0.5 text-xs">&</span>
|
||||
{:else if listIndex < song.artists.length - 2}
|
||||
<span class="mr-0.5 text-xs">,</span>
|
||||
{/if}
|
||||
</button>
|
||||
</section>
|
||||
<section class="flex h-full w-full flex-col justify-center gap-1 justify-self-center">
|
||||
<div class="flex h-6 items-center justify-center gap-4">
|
||||
<IconButton halo={false}>
|
||||
<i slot="icon" class="fa-solid fa-backward-step" />
|
||||
</IconButton>
|
||||
<IconButton halo={false} on:click={() => (songPlaying = !songPlaying)}>
|
||||
<i slot="icon" class="fa-solid {songPlaying ? 'fa-pause' : 'fa-play'}" />
|
||||
</IconButton>
|
||||
<IconButton halo={false} on:click={() => ($currentlyPlaying = null)}>
|
||||
<i slot="icon" class="fa-solid fa-stop" />
|
||||
</IconButton>
|
||||
<IconButton halo={false}>
|
||||
<i slot="icon" class="fa-solid fa-forward-step" />
|
||||
</IconButton>
|
||||
</div>
|
||||
<div class="flex items-center gap-2 text-sm text-neutral-400">
|
||||
<div class="whitespace-nowrap">0:00</div>
|
||||
<Slider />
|
||||
<div class="whitespace-nowrap">{formatDuration(song.duration)}</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="flex h-full items-center justify-end gap-1 py-5">
|
||||
<VolumeSlider bind:volume />
|
||||
<IconButton halo={false}>
|
||||
<i slot="icon" class="fa-solid fa-shuffle" />
|
||||
</IconButton>
|
||||
<IconButton halo={false}>
|
||||
<i slot="icon" class="fa-solid fa-repeat" />
|
||||
</IconButton>
|
||||
<IconButton halo={false}>
|
||||
<i slot="icon" class="fa-solid fa-ellipsis-vertical" />
|
||||
</IconButton>
|
||||
</section>
|
||||
{/each}
|
||||
</span>
|
||||
</div>
|
||||
{/if}
|
||||
<button class="grid aspect-square h-6 place-items-center text-lg transition-all" on:click={() => (songLiked = !songLiked)}>
|
||||
{#if songLiked}
|
||||
<i class="fa-solid fa-heart text-fuchsia-400" />
|
||||
{:else}
|
||||
<i class="fa-regular fa-heart text-neutral-400 hover:text-white" />
|
||||
{/if}
|
||||
</button>
|
||||
</section>
|
||||
<section class="flex h-full w-full flex-col justify-center gap-1 justify-self-center">
|
||||
<div class="flex h-6 items-center justify-center gap-4">
|
||||
<IconButton halo={false}>
|
||||
<i slot="icon" class="fa-solid fa-backward-step" />
|
||||
</IconButton>
|
||||
<IconButton halo={false} on:click={() => (songPlaying = !songPlaying)}>
|
||||
<i slot="icon" class="fa-solid {songPlaying ? 'fa-pause' : 'fa-play'}" />
|
||||
</IconButton>
|
||||
<IconButton halo={false} on:click={() => ($currentlyPlaying = null)}>
|
||||
<i slot="icon" class="fa-solid fa-stop" />
|
||||
</IconButton>
|
||||
<IconButton halo={false}>
|
||||
<i slot="icon" class="fa-solid fa-forward-step" />
|
||||
</IconButton>
|
||||
</div>
|
||||
<div class="flex items-center gap-2 text-sm text-neutral-400">
|
||||
<div class="whitespace-nowrap">0:00</div>
|
||||
<Slider />
|
||||
<div class="whitespace-nowrap">{formatDuration(song.duration)}</div>
|
||||
</div>
|
||||
</section>
|
||||
<section class="flex h-full items-center justify-end gap-1 py-5">
|
||||
<VolumeSlider bind:volume />
|
||||
<IconButton halo={false}>
|
||||
<i slot="icon" class="fa-solid fa-shuffle" />
|
||||
</IconButton>
|
||||
<IconButton halo={false}>
|
||||
<i slot="icon" class="fa-solid fa-repeat" />
|
||||
</IconButton>
|
||||
<IconButton halo={false}>
|
||||
<i slot="icon" class="fa-solid fa-ellipsis-vertical" />
|
||||
</IconButton>
|
||||
<IconButton halo={false} on:click={() => (fullplayerOpen = !fullplayerOpen)}>
|
||||
<i slot="icon" class="fa-solid {fullplayerOpen ? 'fa-caret-down' : 'fa-caret-up'}" />
|
||||
</IconButton>
|
||||
</section>
|
||||
</div>
|
||||
{:else if song && displayMode === 'vertical'}
|
||||
<div class="w-full p-2" style="height: 80px;" transition:slide={{ axis: 'y' }}>
|
||||
<div class="flex h-full justify-between rounded-xl bg-slate-900 p-2.5">
|
||||
<section class="flex gap-4">
|
||||
<img class="h-full rounded-xl object-contain" src={song.image} alt="{song.name} thumbnail" />
|
||||
<div class="flex h-full flex-col justify-center gap-1 overflow-hidden text-lg">
|
||||
<span class="overflow-hidden text-ellipsis" title={song.name}>{song.name}</span>
|
||||
<span class="overflow-hidden text-ellipsis text-neutral-400">{Array.from(song.artists, (artist) => artist.name).join(', ')}</span>
|
||||
</div>
|
||||
</section>
|
||||
<section class="flex h-full justify-end gap-6 p-4 text-3xl">
|
||||
<button class="grid aspect-square h-full place-items-center transition-all" on:click={() => (songLiked = !songLiked)}>
|
||||
{#if songLiked}
|
||||
<i class="fa-solid fa-heart text-fuchsia-400" />
|
||||
{:else}
|
||||
<i class="fa-regular fa-heart text-neutral-400 hover:text-white" />
|
||||
{/if}
|
||||
</button>
|
||||
<IconButton halo={false} on:click={() => (songPlaying = !songPlaying)}>
|
||||
<i slot="icon" class="fa-solid {songPlaying ? 'fa-pause' : 'fa-play'}" />
|
||||
</IconButton>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<style>
|
||||
#player-wrapper {
|
||||
height: 80px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,12 +0,0 @@
|
||||
<footer class="sticky bottom-0 flex flex-col-reverse">
|
||||
<slot name="content" />
|
||||
</footer>
|
||||
|
||||
<style>
|
||||
footer {
|
||||
padding-top: 16px;
|
||||
padding-bottom: 16px;
|
||||
font-size: 20px;
|
||||
line-height: 28px;
|
||||
}
|
||||
</style>
|
||||
@@ -1,37 +1,25 @@
|
||||
<script>
|
||||
import IconButton from './iconButton.svelte'
|
||||
import SearchBar from './searchBar.svelte'
|
||||
import { goto } from '$app/navigation'
|
||||
import { page } from '$app/stores'
|
||||
</script>
|
||||
|
||||
<nav class="sticky top-0 z-10 grid grid-cols-[1fr_auto_1fr] items-center duration-300">
|
||||
<section class="flex h-full">
|
||||
<IconButton on:click={() => goto('/settings')}>
|
||||
<i slot="icon" class="fa-solid fa-user-gear" />
|
||||
<nav class="sticky top-0 z-10 flex items-center justify-between p-3 text-base duration-300" style="height: 4rem;">
|
||||
<SearchBar />
|
||||
<!-- <section class="flex h-14">
|
||||
<IconButton halo={false} on:click={() => goto('/settings')}>
|
||||
<i slot="icon" class="fa-solid fa-user" />
|
||||
</IconButton>
|
||||
{#if $page.url.pathname !== '/'}
|
||||
<IconButton on:click={() => history.back()}>
|
||||
<IconButton halo={false} on:click={() => history.back()}>
|
||||
<i slot="icon" class="fa-solid fa-arrow-left" />
|
||||
</IconButton>
|
||||
<IconButton halo={false}>
|
||||
<i slot="icon" class="fa-solid fa-magnifying-glass" />
|
||||
</IconButton>
|
||||
{/if}
|
||||
</section>
|
||||
<section class="flex h-full justify-center">
|
||||
<slot name="center-content" />
|
||||
</section>
|
||||
<section class="flex h-full justify-end">
|
||||
<IconButton>
|
||||
<i slot="icon" class="fa-solid fa-magnifying-glass" />
|
||||
</IconButton>
|
||||
</section>
|
||||
</section> -->
|
||||
</nav>
|
||||
|
||||
<style>
|
||||
nav {
|
||||
padding: 18px 2rem;
|
||||
font-size: 20px;
|
||||
line-height: 28px;
|
||||
}
|
||||
section {
|
||||
gap: 24px;
|
||||
}
|
||||
</style>
|
||||
<!-- New Idea: We're going to do a search button, but it will toggle a floating search bar that flys in from the top and autofocuses -->
|
||||
|
||||
@@ -24,7 +24,7 @@
|
||||
<search
|
||||
role="search"
|
||||
bind:this={searchBar}
|
||||
class="relative my-2.5 flex w-full items-center gap-2.5 justify-self-center rounded-full border-2 border-transparent px-4 py-1.5"
|
||||
class="relative flex h-full w-full max-w-xl items-center gap-2.5 justify-self-center rounded-full border-2 border-transparent px-4 py-1.5"
|
||||
on:focusout={() => {
|
||||
setTimeout(() => {
|
||||
// This is a completely stupid thing you have to do, if there is not timeout, the active element will be the body of the document and not the newly focused element
|
||||
|
||||
@@ -13,6 +13,13 @@ export const setVolume = (volume) => {
|
||||
if (Number.isFinite(volume)) localStorage.setItem('volume', Math.round(volume))
|
||||
}
|
||||
|
||||
export const formatDuration = (timeMilliseconds) => {
|
||||
const seconds = Math.floor((timeMilliseconds / 1000) % 60)
|
||||
const minutes = Math.floor((timeMilliseconds / 1000 / 60) % 60)
|
||||
|
||||
return [minutes.toString(), seconds.toString().padStart(2, '0')].join(':')
|
||||
}
|
||||
|
||||
export class JellyfinUtils {
|
||||
static #AUDIO_PRESETS = {
|
||||
default: {
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
<script>
|
||||
import Navbar from '$lib/components/utility/navbar.svelte'
|
||||
import Footer from '$lib/components/utility/footer.svelte'
|
||||
import MiniPlayer from '$lib/components/media/miniPlayer.svelte'
|
||||
import { fly, fade } from 'svelte/transition'
|
||||
import { goto } from '$app/navigation'
|
||||
import { pageWidth } from '$lib/utils/stores.js'
|
||||
|
||||
export let data
|
||||
@@ -26,6 +26,8 @@
|
||||
},
|
||||
}
|
||||
|
||||
const pageTransitionTime = 200
|
||||
|
||||
let previousPage = data.url
|
||||
let direction = 1
|
||||
$: calculateDirection(data.url)
|
||||
@@ -46,66 +48,82 @@
|
||||
$: calculateBar(activeTab)
|
||||
|
||||
const calculateBar = (activeTab) => {
|
||||
if (activeTab) {
|
||||
if (activeTab && indicatorBar && tabList) {
|
||||
const listRect = tabList.getBoundingClientRect()
|
||||
const tabRec = activeTab.getBoundingClientRect()
|
||||
indicatorBar.style.top = `${listRect.height}px`
|
||||
if (direction === 1) {
|
||||
indicatorBar.style.right = `${listRect.right - tabRec.right}px`
|
||||
setTimeout(() => (indicatorBar.style.left = `${tabRec.left - listRect.left}px`), 300)
|
||||
setTimeout(() => (indicatorBar.style.left = `${tabRec.left - listRect.left}px`), pageTransitionTime)
|
||||
} else {
|
||||
indicatorBar.style.left = `${tabRec.left - listRect.left}px`
|
||||
setTimeout(() => (indicatorBar.style.right = `${listRect.right - tabRec.right}px`), 300)
|
||||
setTimeout(() => (indicatorBar.style.right = `${listRect.right - tabRec.right}px`), pageTransitionTime)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="flex h-full flex-col">
|
||||
{#if $pageWidth > 768}
|
||||
<Navbar>
|
||||
<h1 slot="center-content" bind:this={tabList} class="relative flex items-center gap-12 text-lg">
|
||||
{#each Object.entries(contentTabs) as [page, tabData]}
|
||||
{#if data.url === page}
|
||||
<span bind:this={activeTab} class="pointer-events-none">{tabData.header}</span>
|
||||
{:else}
|
||||
<a class="text-neutral-400 hover:text-lazuli-primary" href={page}>{tabData.header}</a>
|
||||
{/if}
|
||||
{/each}
|
||||
{#if data.url in contentTabs}
|
||||
<div bind:this={indicatorBar} transition:fade class="absolute h-0.5 bg-lazuli-primary transition-all duration-300 ease-in-out" />
|
||||
{/if}
|
||||
</h1>
|
||||
</Navbar>
|
||||
{:else}
|
||||
<Navbar />
|
||||
{/if}
|
||||
<div class="relative flex-1 overflow-hidden">
|
||||
{#key previousPage}
|
||||
<div in:fly={{ x: 200 * direction, duration: 300, delay: 300 }} out:fly={{ x: -200 * direction, duration: 300 }} class="no-scrollbar h-full overflow-y-scroll px-8 py-4 md:px-32">
|
||||
<slot />
|
||||
</div>
|
||||
{/key}
|
||||
<div class="absolute bottom-0 w-full">
|
||||
<MiniPlayer displayMode={$pageWidth > 768 ? 'horizontal' : 'vertical'} />
|
||||
</div>
|
||||
</div>
|
||||
{#if $pageWidth < 768}
|
||||
<Footer>
|
||||
<section slot="content" class="flex items-center justify-center" style="height: 32px;">
|
||||
<h1 bind:this={tabList} class="relative flex w-full items-center justify-around">
|
||||
<div id="main-grid" class="h-full">
|
||||
<Navbar />
|
||||
<section id="content-grid" class="overflow-hidden">
|
||||
<section id="sidebar">
|
||||
{#if $pageWidth >= 768}
|
||||
<div class="mr-4 flex h-full flex-col gap-8 rounded-lg px-3 py-6">
|
||||
{#each Object.entries(contentTabs) as [page, tabData]}
|
||||
{#if data.url === page}
|
||||
<span bind:this={activeTab} class="pointer-events-none"><i class={tabData.icon} /></span>
|
||||
{:else}
|
||||
<a class="text-neutral-400 hover:text-lazuli-primary" href={page}><i class={tabData.icon} /></a>
|
||||
{/if}
|
||||
<button
|
||||
class="{data.url === page ? 'pointer-events-none text-white' : 'text-neutral-400 hover:text-lazuli-primary'} aspect-square w-14 transition-colors"
|
||||
disabled={data.url === page}
|
||||
on:click={() => goto(page)}
|
||||
>
|
||||
<i class="{tabData.icon} text-xl" />
|
||||
<span class="text-xs">{tabData.header}</span>
|
||||
</button>
|
||||
{/each}
|
||||
{#if data.url in contentTabs}
|
||||
<div bind:this={indicatorBar} transition:fade class="absolute h-0.5 bg-lazuli-primary transition-all duration-300 ease-in-out" />
|
||||
{/if}
|
||||
</h1>
|
||||
<!-- {#if data.url in contentTabs}
|
||||
<div bind:this={indicatorBar} transition:fade class="absolute h-0.5 bg-lazuli-primary transition-all duration-300 ease-in-out" />
|
||||
{/if} -->
|
||||
</div>
|
||||
{/if}
|
||||
</section>
|
||||
{#key previousPage}
|
||||
<section
|
||||
id="page"
|
||||
in:fly={{ x: 200 * direction, duration: pageTransitionTime, delay: pageTransitionTime }}
|
||||
out:fly={{ x: -200 * direction, duration: pageTransitionTime }}
|
||||
class="no-scrollbar h-full overflow-y-scroll px-[5vw] pt-4 md:pl-[0rem]"
|
||||
>
|
||||
<slot />
|
||||
</section>
|
||||
</Footer>
|
||||
{/if}
|
||||
{/key}
|
||||
</section>
|
||||
<footer class="fixed bottom-0 flex w-full flex-col items-center justify-center">
|
||||
<MiniPlayer displayMode={$pageWidth > 768 ? 'horizontal' : 'vertical'} />
|
||||
{#if $pageWidth < 768}
|
||||
<h1 id="tabList" class="relative flex w-full items-center justify-around bg-black">
|
||||
{#each Object.entries(contentTabs) as [page, tabData]}
|
||||
<button class="{data.url === page ? 'pointer-events-none text-white' : 'text-neutral-400 hover:text-lazuli-primary'} transition-colors" disabled={data.url === page} on:click={() => goto(page)}>
|
||||
<i class={tabData.icon} />
|
||||
</button>
|
||||
{/each}
|
||||
</h1>
|
||||
{/if}
|
||||
</footer>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
#content-grid {
|
||||
display: grid;
|
||||
grid-template-columns: max-content auto;
|
||||
grid-template-rows: 100%;
|
||||
}
|
||||
#main-grid {
|
||||
display: grid;
|
||||
grid-template-rows: max-content auto;
|
||||
grid-template-columns: 100%;
|
||||
}
|
||||
#tabList {
|
||||
padding: 16px 0px;
|
||||
font-size: 20px;
|
||||
line-height: 28px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -37,7 +37,7 @@
|
||||
|
||||
<style>
|
||||
#background-gradient {
|
||||
background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.6), black);
|
||||
background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.7), black);
|
||||
}
|
||||
#background-image {
|
||||
mask-image: linear-gradient(to bottom, black, rgba(0, 0, 0, 0.3));
|
||||
|
||||
Reference in New Issue
Block a user