diff --git a/package.json b/package.json index d6bc80b..71caf28 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "ui", - "version": "6.4.93", + "version": "6.4.94", "license": "BUSL-1.1", "private": true, "packageManager": "pnpm@9.15.5", diff --git a/src/app.css b/src/app.css index 887f9b6..b885983 100644 --- a/src/app.css +++ b/src/app.css @@ -48,6 +48,17 @@ } } + .text-contrast { + --accessible-color: calc(((((var(--red) * 299) + (var(--green) * 587) + (var(--blue) * 114)) / 1000) - 128) * -1000); + + color: rgb(var(--accessible-color), + var(--accessible-color), + var(--accessible-color)); + fill: rgb(var(--accessible-color), + var(--accessible-color), + var(--accessible-color)); + } + :root { --background: 0 0% 100%; --foreground: 240 10% 3.9%; @@ -79,6 +90,8 @@ --ring: 240 10% 3.9%; --radius: 0.5rem; + + --custom: #fff; } .dark { @@ -110,6 +123,8 @@ --destructive-foreground: 0 0% 98%; --ring: 240 4.9% 83.9%; + + --custom: #fff; } } @@ -246,7 +261,7 @@ details, align-items: center; } -.text-contrast { +.text-contrast-filter { filter: invert(1) grayscale(1) brightness(1.2) contrast(9000); mix-blend-mode: luminosity; -webkit-font-smoothing: antialiased; diff --git a/src/lib/components/EntryEditor.svelte b/src/lib/components/EntryEditor.svelte index 4501301..37b5206 100644 --- a/src/lib/components/EntryEditor.svelte +++ b/src/lib/components/EntryEditor.svelte @@ -37,7 +37,7 @@ - diff --git a/src/lib/components/EpisodesList.svelte b/src/lib/components/EpisodesList.svelte index 43236fc..20fc4de 100644 --- a/src/lib/components/EpisodesList.svelte +++ b/src/lib/components/EpisodesList.svelte @@ -57,7 +57,7 @@
play(episode)} class={cn( 'select:scale-[1.05] select:shadow-lg scale-100 transition-[transform,box-shadow] duration-200 shrink-0 ease-out focus-visible:ring-ring focus-visible:ring-1 rounded-md bg-neutral-950 text-secondary-foreground select:bg-neutral-900 flex w-full max-h-28 cursor-pointer relative overflow-hidden group', - target && 'ring-ring ring-1', + target && 'ring-custom ring-1', filler && '!ring-yellow-400 ring-1' )}> {#if image} diff --git a/src/lib/components/Shadow.svelte b/src/lib/components/Shadow.svelte index 13c2fa4..99605e5 100644 --- a/src/lib/components/Shadow.svelte +++ b/src/lib/components/Shadow.svelte @@ -26,7 +26,7 @@ font-weight: bold; cursor: pointer; list-style: none; - background: #0f0f0f; + background: #0003; display: inline-block; padding: 0.4em 0.8em; border-radius: 0.5em; diff --git a/src/lib/components/ui/cards/preview.svelte b/src/lib/components/ui/cards/preview.svelte index 318f9ed..95826b4 100644 --- a/src/lib/components/ui/cards/preview.svelte +++ b/src/lib/components/ui/cards/preview.svelte @@ -40,10 +40,10 @@ {/if}
-
+
{title(media)}
-
+
diff --git a/src/lib/components/ui/player/player.svelte b/src/lib/components/ui/player/player.svelte index 0e3737f..02612fc 100644 --- a/src/lib/components/ui/player/player.svelte +++ b/src/lib/components/ui/player/player.svelte @@ -315,16 +315,13 @@ } let completed = false - function checkCompletion () { + async function checkCompletion () { if (!completed && $settings.playerAutocomplete) { - checkCompletionByTime(currentTime, safeduration) - } - } - function checkCompletionByTime (currentTime: number, safeduration: number) { - const fromend = Math.max(180, safeduration / 10) - if (safeduration && currentTime && readyState && safeduration - fromend < currentTime) { - authAggregator.watch(mediaInfo.media, mediaInfo.episode) - completed = true + const fromend = Math.max(180, safeduration / 10) + if (safeduration && currentTime && readyState && safeduration - fromend < currentTime) { + authAggregator.watch(mediaInfo.media, mediaInfo.episode) + completed = true + } } } diff --git a/src/lib/components/ui/profile/Profile.svelte b/src/lib/components/ui/profile/Profile.svelte index d3b5dcc..bfb03aa 100644 --- a/src/lib/components/ui/profile/Profile.svelte +++ b/src/lib/components/ui/profile/Profile.svelte @@ -55,7 +55,7 @@ {#if bubble && bubble !== 'Donator'}
- + {bubble}
diff --git a/src/lib/components/ui/themes/Themes.svelte b/src/lib/components/ui/themes/Themes.svelte index ad00c56..0e38139 100644 --- a/src/lib/components/ui/themes/Themes.svelte +++ b/src/lib/components/ui/themes/Themes.svelte @@ -71,7 +71,7 @@ Episodes {entry.episodes}
{#if entry.videos?.length} - + {/if}
{#if src === url} diff --git a/src/lib/modules/auth/client.ts b/src/lib/modules/auth/client.ts index 34098fd..b827d02 100644 --- a/src/lib/modules/auth/client.ts +++ b/src/lib/modules/auth/client.ts @@ -115,12 +115,15 @@ export default new class AuthAggregator { return null }) - watch (media: Media, progress: number) { + async watch (outdated: Media, progress: number) { + const media = (await client.single(outdated.id)).data?.Media ?? outdated // TODO: auto re-watch status const totalEps = episodes(media) ?? 1 // episodes or movie which is single episode if (totalEps < progress) return // woah, bad data from resolver?! - const currentProgress = media.mediaListEntry?.progress ?? 0 + const mediaList = this.mediaListEntry(media) + + const currentProgress = mediaList?.progress ?? 0 if (currentProgress >= progress) return // there's an edge case here that episodes returns 1, because anilist doesn't have episode count for an airing show without an expected end date @@ -130,11 +133,11 @@ export default new class AuthAggregator { const status = totalEps === progress && canBeCompleted ? 'COMPLETED' - : media.mediaListEntry?.status === 'REPEATING' ? 'REPEATING' : 'CURRENT' + : mediaList?.status === 'REPEATING' ? 'REPEATING' : 'CURRENT' - const lists = (media.mediaListEntry?.customLists as Array<{enabled: boolean, name: string}> | undefined)?.filter(({ enabled }) => enabled).map(({ name }) => name) ?? [] + const lists = (mediaList?.customLists as Array<{enabled: boolean, name: string}> | undefined)?.filter(({ enabled }) => enabled).map(({ name }) => name) ?? [] - this.entry({ id: media.id, progress, status, lists }) + return await this.entry({ id: media.id, progress, status, lists }) } delete (media: Media) { diff --git a/src/lib/utils.ts b/src/lib/utils.ts index 40c06b3..5cb5876 100644 --- a/src/lib/utils.ts +++ b/src/lib/utils.ts @@ -308,3 +308,11 @@ export function arrayEqual (a: T[], b: T[]) { export function nextTick () { return new Promise(resolve => queueMicrotask(resolve)) } + +export function colors (hex = '#ffffff') { + const bigint = parseInt(hex.slice(1), 16) + const r = (bigint >> 16) & 255 + const g = (bigint >> 8) & 255 + const b = bigint & 255 + return { r, g, b } +} diff --git a/src/routes/app/anime/[id]/+layout.svelte b/src/routes/app/anime/[id]/+layout.svelte index 8e35035..8dc4376 100644 --- a/src/routes/app/anime/[id]/+layout.svelte +++ b/src/routes/app/anime/[id]/+layout.svelte @@ -1,5 +1,5 @@ -
+
@@ -92,34 +95,22 @@

{media.title?.romaji?.toLowerCase().trim() === title(media).toLowerCase().trim() ? nativeTitle : romajiTitle}

{title(media)}

diff --git a/src/routes/app/anime/[id]/+page.svelte b/src/routes/app/anime/[id]/+page.svelte index 4e72a91..4870ac6 100644 --- a/src/routes/app/anime/[id]/+page.svelte +++ b/src/routes/app/anime/[id]/+page.svelte @@ -50,7 +50,7 @@
-
{relation(rel.relationType)}
+
{relation(rel.relationType)}
{media.title?.userPreferred ?? 'N/A'}
{format(media)}
@@ -63,9 +63,9 @@
- Episodes - Threads - Themes + Episodes + Threads + Themes
diff --git a/tailwind.config.ts b/tailwind.config.ts index 3770cb0..e05a83c 100644 --- a/tailwind.config.ts +++ b/tailwind.config.ts @@ -58,6 +58,20 @@ const config: Config = { }, extend: { colors: { + custom: { + DEFAULT: 'hsl(from var(--custom) h s l / )', + 50: 'hsl(from var(--custom) h s 95% / )', + 100: 'hsl(from var(--custom) h s 90% / )', + 200: 'hsl(from var(--custom) h s 80% / )', + 300: 'hsl(from var(--custom) h s 70% / )', + 400: 'hsl(from var(--custom) h s 60% / )', + 500: 'hsl(from var(--custom) h s l / )', + 600: 'hsl(from var(--custom) h s 40% / )', + 700: 'hsl(from var(--custom) h s 30% / )', + 800: 'hsl(from var(--custom) h s 20% / )', + 900: 'hsl(from var(--custom) h s 10% / )', + 950: 'hsl(from var(--custom) h s 5% / )' + }, theme: 'hsl(346.6deg 79.12% 51.18% / )', border: 'hsl(var(--border) / )', input: 'hsl(var(--input) / )',