Skip to content

Commit

Permalink
feat: show filler episodes
Browse files Browse the repository at this point in the history 
perf: optimise fonts
perf: use svg icons
fix: exit fullscreen on navigation
fix: exit rss on navigation
  • Loading branch information
@ThaUnknown
ThaUnknown committed Aug 24, 2024
1 parent 9c24904 commit 9acf663
Show file tree
Hide file tree
Showing 34 changed files with 452 additions and 782 deletions.
3 changes: 3 additions & 0 deletions common/App.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@
import { writable } from 'simple-store-svelte'
import { anilistClient } from '@/modules/anilist.js'
import IPC from '@/modules/ipc.js'
import { rss } from './views/TorrentSearch/TorrentModal.svelte'
export const page = writable('home')
export const view = writable(null)
Expand Down Expand Up @@ -37,6 +38,8 @@
if (!state) return
ignoreNext = true
view.set(null)
rss.set(null)
if (document.fullscreenElement) document.exitFullscreen()
if (state.type === 'page') {
page.set(state.value)
} else {
Expand Down
48 changes: 42 additions & 6 deletions common/components/Navbar.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,8 @@
import { click } from '@/modules/click.js'
import IPC from '@/modules/ipc.js'
import NavbarLink from './NavbarLink.svelte'
import { MagnifyingGlass } from 'svelte-radix'
import { Users, Clock, ListMusic, Settings, Heart } from 'lucide-svelte'
const view = getContext('view')
export let page
function close () {
Expand All @@ -15,13 +17,47 @@
<nav class='navbar navbar-fixed-bottom d-block d-md-none border-0 bg-dark'>
<div class='navbar-menu h-full d-flex flex-row justify-content-center align-items-center m-0 pb-5' class:animate={page !== 'player'}>
<img src='./logo_filled.png' class='w-50 h-50 m-10 pointer p-5' alt='ico' use:click={close} />
<NavbarLink click={() => { page = 'search' }} _page='search' css='ml-auto' icon='search' {page} />
<NavbarLink click={() => { page = 'schedule' }} _page='schedule' icon='schedule' {page} />
<NavbarLink click={() => { page = 'search' }} _page='search' css='ml-auto' icon='search' {page} let:active>
<MagnifyingGlass size='2rem' class='flex-shrink-0 p-5 w-30 h-30 m-5 rounded' stroke-width={active ? '2' : '0'} stroke='currentColor' />
</NavbarLink>
<NavbarLink click={() => { page = 'schedule' }} _page='schedule' icon='schedule' {page} let:active>
<Clock size='2rem' class='flex-shrink-0 p-5 w-30 h-30 m-5 rounded' strokeWidth={active ? '3.5' : '2'} />
</NavbarLink>
{#if $media?.media}
<NavbarLink click={() => { $view = $media.media }} icon='queue_music' {page} />
<NavbarLink click={() => { $view = $media.media }} icon='queue_music' {page} let:active>
<ListMusic size='2rem' class='flex-shrink-0 p-5 w-30 h-30 m-5 rounded' strokeWidth={active ? '3.5' : '2'} />
</NavbarLink>
{/if}
<NavbarLink click={() => { page = 'watchtogether' }} _page='watchtogether' icon='groups' {page} />
<NavbarLink click={() => { IPC.emit('open', 'https://github.com/sponsors/ThaUnknown/') }} icon='favorite' css='ml-auto donate' {page} />
<NavbarLink click={() => { page = 'settings' }} _page='settings' icon='settings' {page} />
<NavbarLink click={() => { page = 'watchtogether' }} _page='watchtogether' icon='groups' {page} let:active>
<Users size='2rem' class='flex-shrink-0 p-5 w-30 h-30 m-5 rounded' strokeWidth={active ? '3.5' : '2'} />
</NavbarLink>
<NavbarLink click={() => { IPC.emit('open', 'https://github.com/sponsors/ThaUnknown/') }} icon='favorite' css='ml-auto donate' {page} let:active>
<Heart size='2rem' class='flex-shrink-0 p-5 w-30 h-30 m-5 rounded donate' strokeWidth={active ? '3.5' : '2'} fill='currentColor' />
</NavbarLink>
<NavbarLink click={() => { page = 'settings' }} _page='settings' icon='settings' {page} let:active>
<Settings size='2rem' class='flex-shrink-0 p-5 w-30 h-30 m-5 rounded' strokeWidth={active ? '3.5' : '2'} />
</NavbarLink>
</div>
</nav>

<style>
.navbar .animate :global(.donate) {
animation: glow 1s ease-in-out infinite alternate;
}
.navbar :global(.donate):active {
color: #fa68b6 !important;
}
.navbar :global(.donate) {
font-variation-settings: 'FILL' 1;
color: #fa68b6;
text-shadow: 0 0 1rem #fa68b6;
}
@keyframes glow {
from {
filter: drop-shadow(0 0 1rem #fa68b6);
}
to {
filter: drop-shadow(0 0 0.5rem #fa68b6);
}
}
</style>
69 changes: 5 additions & 64 deletions common/components/NavbarLink.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@
let _click = () => {}
export { _click as click }
export let image = ''
export let page
export let _page = ''
export let css = ''
Expand All @@ -13,53 +12,20 @@
<div
class='navbar-link navbar-link-with-icon pointer overflow-hidden {css}'
use:click={_click}>
{#if image}
<span class='material-symbols-outlined rounded' class:filled={page === _page}>
<img src={image} class='h-30 rounded' alt='logo' />
</span>
{:else}
<span class='material-symbols-outlined rounded' class:filled={page === _page}>{icon}</span>
{/if}

<span class='rounded d-flex'>
<slot active={page === _page}>{icon}</slot>
</span>
</div>

<style>
@keyframes glow {
from {
text-shadow: 0 0 2rem #fa68b6;
}
to {
text-shadow: 0 0 1rem #fa68b6;
}
}
.animate .donate .material-symbols-outlined {
animation: glow 1s ease-in-out infinite alternate;
}
.donate:active .material-symbols-outlined {
background: #fff;
color: #fa68b6 !important;
}
.donate .material-symbols-outlined {
font-variation-settings: 'FILL' 1;
color: #fa68b6;
text-shadow: 0 0 1rem #fa68b6;
}
/* .sidebar-menu {
padding-top: 10rem;
} */
.text {
opacity: 1;
transition: opacity 0.8s cubic-bezier(0.25, 0.8, 0.25, 1);
display: inline-flex;
justify-content: center;
align-items: center;
}
.navbar-link > span {
color: #fff;
border-radius: 0.3rem;
}
.material-symbols-outlined {
.navbar-link > span {
color: #fff;
transition: background .8s cubic-bezier(0.25, 0.8, 0.25, 1), color .8s cubic-bezier(0.25, 0.8, 0.25, 1);
}
Expand All @@ -68,34 +34,9 @@
background: #fff;
color: var(--dark-color);
}
.navbar-link {
font-size: 1.4rem;
padding: 0.75rem;
height: 5.5rem;
}
.material-symbols-outlined {
font-size: 2.2rem;
min-width: 4rem;
width: 4rem;
height: 4rem;
display: inline-flex;
justify-content: center;
align-items: center;
}
.navbar-link img {
font-size: 2.2rem;
width: 3rem;
height: 3rem;
margin: 0.5rem;
display: inline-flex;
justify-content: center;
align-items: center;
}
img {
margin-right: var(--sidebar-brand-image-margin-right);
}
</style>
35 changes: 17 additions & 18 deletions common/components/Search.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,8 @@
import { click } from '@/modules/click.js'
import { page } from '@/App.svelte'
import { toast } from 'svelte-sonner'
import { MagnifyingGlass, Image } from 'svelte-radix'
import { Type, Drama, Leaf, MonitorPlay, Tv, ArrowDownWideNarrow, Trash2, Tags, Grid3X3, Grid2X2 } from 'lucide-svelte'
export let search
let searchTextInput
Expand Down Expand Up @@ -58,12 +60,12 @@
<div class='row'>
<div class='col-lg col-4 p-10 d-flex flex-column justify-content-end'>
<div class='pb-10 font-size-24 font-weight-semi-bold d-flex'>
<div class='material-symbols-outlined mr-10 font-size-30'>title</div>
<Type class='mr-10' size='3rem' />
Title
</div>
<div class='input-group'>
<div class='input-group-prepend'>
<span class='input-group-text d-flex material-symbols-outlined bg-dark-light pr-0 font-size-18'>search</span>
<MagnifyingGlass size='2.75rem' class='input-group-text bg-dark-light pr-0' />
</div>
<input
bind:this={searchTextInput}
Expand All @@ -78,7 +80,7 @@
</div>
<div class='col-lg col-4 p-10 d-flex flex-column justify-content-end'>
<div class='pb-10 font-size-24 font-weight-semi-bold d-flex'>
<div class='material-symbols-outlined mr-10 font-size-30'>theater_comedy</div>
<Drama class='mr-10' size='3rem' />
Genre
</div>
<div class='input-group'>
Expand Down Expand Up @@ -107,7 +109,7 @@
</div>
<div class='col-lg col-4 p-10 d-flex flex-column justify-content-end'>
<div class='pb-10 font-size-24 font-weight-semi-bold d-flex'>
<div class='material-symbols-outlined mr-10 font-size-30'>spa</div>
<Leaf class='mr-10' size='3rem' />
Season
</div>
<div class='input-group'>
Expand All @@ -129,7 +131,7 @@
</div>
<div class='col p-10 d-flex flex-column justify-content-end'>
<div class='pb-10 font-size-24 font-weight-semi-bold d-flex'>
<div class='material-symbols-outlined mr-10 font-size-30'>monitor</div>
<Tv class='mr-10' size='3rem' />
Format
</div>
<div class='input-group'>
Expand All @@ -145,7 +147,7 @@
</div>
<div class='col p-10 d-flex flex-column justify-content-end'>
<div class='pb-10 font-size-24 font-weight-semi-bold d-flex'>
<div class='material-symbols-outlined mr-10 font-size-30'>live_tv</div>
<MonitorPlay class='mr-10' size='3rem' />
Status
</div>
<div class='input-group'>
Expand All @@ -160,7 +162,7 @@
</div>
<div class='col p-10 d-flex flex-column justify-content-end'>
<div class='pb-10 font-size-24 font-weight-semi-bold d-flex'>
<div class='material-symbols-outlined mr-10 font-size-30'>sort</div>
<ArrowDownWideNarrow class='mr-10' size='3rem' />
Sort
</div>
<div class='input-group'>
Expand All @@ -177,37 +179,34 @@
<input type='file' class='d-none' id='search-image' accept='image/*' on:input|preventDefault|stopPropagation={handleFile} />
<div class='col-auto p-10 d-flex'>
<div class='align-self-end'>
<button class='btn btn-square bg-dark-light material-symbols-outlined font-size-18 px-5 align-self-end border-0' type='button'>
<label for='search-image' class='pointer mb-0'>
image
<button class='btn btn-square bg-dark-light px-5 align-self-end border-0' type='button'>
<label for='search-image' class='pointer mb-0 d-flex align-items-center justify-content-center'>
<Image size='1.625rem' />
</label>
</button>
</div>
</div>
<div class='col-auto p-10 d-flex'>
<div class='align-self-end'>
<button class='btn btn-square bg-dark-light material-symbols-outlined font-size-18 px-5 align-self-end border-0' type='button' use:click={searchClear} class:text-primary={!!sanitisedSearch?.length || search.disableSearch || search.clearNext}>
delete
<button class='btn btn-square bg-dark-light d-flex align-items-center justify-content-center px-5 align-self-end border-0' type='button' use:click={searchClear} class:text-primary={!!sanitisedSearch?.length || search.disableSearch || search.clearNext}>
<Trash2 size='1.625rem' />
</button>
</div>
</div>
</div>
<div class='w-full px-10 pt-10 h-50 d-flex flex-colum align-items-center'>
{#if sanitisedSearch?.length}
<span class='material-symbols-outlined font-size-24 mr-20 filled text-dark-light'>sell</span>
<Tags class='text-dark-light mr-20' size='3rem' />
{#each sanitisedSearch as badge}
<span class='badge bg-light border-0 py-5 px-10 text-capitalize mr-20 text-white text-nowrap'>{('' + badge).replace(/_/g, ' ').toLowerCase()}</span>
{/each}
{/if}
<span class='material-symbols-outlined font-size-24 mr-10 filled ml-auto text-dark-light pointer' class:text-muted={$settings.cards === 'small'} use:click={() => changeCardMode('small')}>grid_on</span>
<span class='material-symbols-outlined font-size-24 filled text-dark-light pointer' class:text-muted={$settings.cards === 'full'} use:click={() => changeCardMode('full')}>grid_view</span>
<span class='mr-10 filled ml-auto text-dark-light pointer' class:text-muted={$settings.cards === 'small'} use:click={() => changeCardMode('small')}><Grid3X3 size='2.25rem' /></span>
<span class='text-dark-light pointer' class:text-muted={$settings.cards === 'full'} use:click={() => changeCardMode('full')}><Grid2X2 size='2.25rem' /></span>
</div>
</form>
<style>
.text-dark-light {
color: var(--gray-color-light);
}
.input-group,
.container-fluid button, .pointer {
transition: scale 0.2s ease;
Expand Down
Loading

0 comments on commit 9acf663

Please sign in to comment.