diff --git a/src/App.svelte b/src/App.svelte index 10ef247..a63eb7f 100644 --- a/src/App.svelte +++ b/src/App.svelte @@ -3,8 +3,8 @@ import { Route, Router } from 'svelte-navigator'; import { handleKeyboardNavigation } from './lib/selectable'; import Container from './Container.svelte'; - import BrowseSeriesPage from './lib/pages/BrowseSeriesPage.svelte'; - import MoviesPage from './lib/pages/MoviesPage.svelte'; + import BrowseSeriesPage from './lib/pages/SeriesHomePage.svelte'; + import MoviesPage from './lib/pages/MoviesHomePage.svelte'; import LibraryPage from './lib/pages/LibraryPage.svelte'; import ManagePage from './lib/pages/ManagePage.svelte'; import SearchPage from './lib/pages/SearchPage.svelte'; @@ -16,12 +16,29 @@ import ModalStack from './lib/components/Modal/ModalStack.svelte'; import PageNotFound from './lib/pages/PageNotFound.svelte'; import NavigationDebugger from './lib/components/NavigationDebugger.svelte'; + import { onMount } from 'svelte'; + import { isTizen } from './lib/utils/browser-detection'; appState.subscribe((s) => console.log('appState', s)); + + // onMount(() => { + // if (isTizen()) { + // var myMediaKeyChangeListener = { + // onpressed: function (key) { + // console.log('Pressed key: ' + key); + // }, + // onreleased: function (key) { + // console.log('Released key: ' + key); + // } + // }; + // + // tizen.mediakey.setMediaKeyEventListener(myMediaKeyChangeListener); + // } + // }); - + {#if $appState.user === undefined}
@@ -34,7 +51,7 @@ {:else} - + diff --git a/src/app.css b/src/app.css index 096a237..606dc55 100644 --- a/src/app.css +++ b/src/app.css @@ -27,7 +27,7 @@ a { /*}*/ /*.selectable, .selectable-offset {*/ -/* @apply outline outline-0 outline-highlight-foreground*/ +/* @apply outline outline-0 outline-primary-500*/ /*}*/ /*.selectable {*/ @@ -39,19 +39,23 @@ a { /*}*/ html:not([data-useragent*="Tizen"]) .selectable { - @apply outline-none outline-0 border-2 border-[#00000000] focus-visible:border-highlight-foreground; + @apply focus-visible:border-primary-500; } html[data-useragent*="Tizen"] .selectable { - @apply outline-none outline-0 border-2 border-[#00000000] focus-within:border-highlight-foreground; + @apply focus-within:border-primary-500; +} + +.selectable { + @apply outline-none outline-0 border-2 border-[#00000000] transition-colors hover:border-primary-500; } .selectable:focus, .selectable:focus-within { - border-width: 2px; + border-width: 2px; } .selected { - @apply outline-none outline-0 border-2 border-highlight-foreground; + @apply outline-none outline-0 border-2 border-primary-500; } .unselected { diff --git a/src/lib/apis/jellyfin/jellyfin-api.ts b/src/lib/apis/jellyfin/jellyfin-api.ts index 1b04f52..e5d7866 100644 --- a/src/lib/apis/jellyfin/jellyfin-api.ts +++ b/src/lib/apis/jellyfin/jellyfin-api.ts @@ -54,6 +54,20 @@ export class JellyfinApi implements Api { }) .then((r) => r.data?.Items || []); + getContinueWatchingSeries = async () => { + const seriesIds = [ + ...new Set( + await this.getContinueWatching('series') + .then((items) => items?.map((i) => i.SeriesId) || []) + .then((ids) => ids.filter((i) => !!i) as string[]) + ) + ]; + + return Promise.all(seriesIds.map((id) => this.getLibraryItem(id))).then((is) => + is.filter((i): i is JellyfinItem => !!i) + ); + }; + jellyfinItemsCache: JellyfinItem[] = []; async getLibraryItems(refreshCache = false) { if (refreshCache || !this.jellyfinItemsCache.length) { diff --git a/src/lib/components/AnimateScale.svelte b/src/lib/components/AnimateScale.svelte new file mode 100644 index 0000000..6cfcd41 --- /dev/null +++ b/src/lib/components/AnimateScale.svelte @@ -0,0 +1,19 @@ + + +
+ +
diff --git a/src/lib/components/Button.svelte b/src/lib/components/Button.svelte index a1ed465..ec99fcc 100644 --- a/src/lib/components/Button.svelte +++ b/src/lib/components/Button.svelte @@ -2,44 +2,48 @@ import Container from '../../Container.svelte'; import type { Readable } from 'svelte/store'; import classNames from 'classnames'; + import AnimatedSelection from './AnimateScale.svelte'; export let inactive: boolean = false; export let focusOnMount: boolean = false; - let hasFoucus: Readable; + let hasFocus: Readable; - - {#if $$slots.icon} -
- + + + {#if $$slots.icon} +
+ +
+ {/if} +
+
- {/if} -
- -
- {#if $$slots['icon-after']} -
- -
- {/if} -
+ {#if $$slots['icon-after']} +
+ +
+ {/if} + +
diff --git a/src/lib/components/Card/Card.svelte b/src/lib/components/Card/Card.svelte index 6b81e99..c9d6629 100644 --- a/src/lib/components/Card/Card.svelte +++ b/src/lib/components/Card/Card.svelte @@ -7,7 +7,8 @@ import type { TitleType } from '../../types'; import Container from '../../../Container.svelte'; import { useNavigate } from 'svelte-navigator'; - import { scrollIntoView } from '../../selectable'; + import type { Readable } from 'svelte/store'; + import AnimatedSelection from '../AnimateScale.svelte'; export let tmdbId: number | undefined = undefined; export let tvdbId: number | undefined = undefined; @@ -26,97 +27,105 @@ export let orientation: 'portrait' | 'landscape' = 'landscape'; const navigate = useNavigate(); + let hasFocus: Readable; - { - if (tmdbId || tvdbId) { - navigate(`${type}/${tmdbId || tvdbId}`); - } - }} - on:enter - class={classNames( - 'relative flex rounded-xl selectable group hover:text-inherit flex-shrink-0 overflow-hidden text-left cursor-pointer', - { - 'aspect-video': orientation === 'landscape', - 'aspect-[2/3]': orientation === 'portrait', - 'w-32 h-48': size === 'sm' && orientation === 'portrait', - 'h-32 w-56': size === 'sm' && orientation === 'landscape', - 'w-44 h-64': size === 'md' && orientation === 'portrait', - 'h-44 w-80': size === 'md' && orientation === 'landscape', - 'w-60 h-96': size === 'lg' && orientation === 'portrait', - 'h-60 w-96': size === 'lg' && orientation === 'landscape', - 'w-full': size === 'dynamic', - 'shadow-lg': shadow - } - )} -> - -
+ { + if (tmdbId || tvdbId) { + navigate(`${type}/${tmdbId || tvdbId}`); + } + }} + on:enter + class={classNames( + 'relative flex flex-shrink-0 rounded-xl group hover:text-inherit overflow-hidden text-left cursor-pointer', + 'transition-transform selectable', + { + 'aspect-video': orientation === 'landscape', + 'aspect-[2/3]': orientation === 'portrait', + 'w-32 h-48': size === 'sm' && orientation === 'portrait', + 'h-32 w-56': size === 'sm' && orientation === 'landscape', + 'w-44 h-64': size === 'md' && orientation === 'portrait', + 'h-44 w-80': size === 'md' && orientation === 'landscape', + 'w-60 h-96': size === 'lg' && orientation === 'portrait', + 'h-60 w-96': size === 'lg' && orientation === 'landscape', + 'w-full': size === 'dynamic', + 'shadow-lg': shadow + } + )} + bind:hasFocus > - - -
- + +
+ -
-
- -
-

{title}

-

{subtitle}

-
-
- -
- +
+
+ +
+

{title}

+

{subtitle}

+
+
+ +
+ +
+
+ +
+ {#if rating} +

+ {rating.toFixed(1)} +

+ {/if} +
+
+ +
+ +
-
- -
- {#if rating} -

- {rating.toFixed(1)} -

- {/if} -
-
- -
- -
-
- - {#if jellyfinId} -
- { - e.preventDefault(); - jellyfinId && true; //playerState.streamJellyfinId(jellyfinId); - }} - class="sm:opacity-0 group-hover:opacity-100 transition-opacity" - /> -
- {/if} - {#if progress} -
- -
- {/if} - + {#if jellyfinId} +
+ { + e.preventDefault(); + jellyfinId && true; //playerState.streamJellyfinId(jellyfinId); + }} + class="sm:opacity-0 group-hover:opacity-100 transition-opacity" + /> +
+ {/if} + {#if progress} +
+ +
+ {/if} + + diff --git a/src/lib/components/Carousel/Carousel.svelte b/src/lib/components/Carousel/Carousel.svelte index c0302d9..df63e2f 100644 --- a/src/lib/components/Carousel/Carousel.svelte +++ b/src/lib/components/Carousel/Carousel.svelte @@ -5,7 +5,7 @@ import Container from '../../../Container.svelte'; import { PLATFORM_TV } from '../../constants'; - export let gradientFromColor = 'from-stone-950'; + export let gradientFromColor = 'from-secondary-500'; export let heading = ''; let carousel: HTMLDivElement | undefined; @@ -45,7 +45,12 @@
- true }} let:focusIndex> + true }} + let:focusIndex + on:enter + >
{ if ( detail.direction === 'left' && - detail.options.willLeaveContainer && + detail.willLeaveContainer && detail.selectable === detail.options.target ) { history.back(); diff --git a/src/lib/components/EpisodeCard/EpisodeCard.svelte b/src/lib/components/EpisodeCard/EpisodeCard.svelte index 719398d..f656a4b 100644 --- a/src/lib/components/EpisodeCard/EpisodeCard.svelte +++ b/src/lib/components/EpisodeCard/EpisodeCard.svelte @@ -2,48 +2,59 @@ import Container from '../../../Container.svelte'; import classNames from 'classnames'; import { TriangleRight } from 'radix-icons-svelte'; + import type { Readable } from 'svelte/store'; + import AnimateScale from '../AnimateScale.svelte'; export let episodeNumber: number; export let episodeName: string; export let backdropUrl: string; export let handlePlay: () => void = () => {}; + + let hasFocus: Readable; - -
-

Episode {episodeNumber}

-

{episodeName}

-
-
-
- {#if handlePlay} -
-
- -
+ + +
+

Episode {episodeNumber}

+

{episodeName}

- {/if} -
+
+
+ {#if handlePlay} +
+ +
+ +
+
+ {/if} + + diff --git a/src/lib/components/HeroCarousel/HeroBackground.svelte b/src/lib/components/HeroCarousel/HeroBackground.svelte index e383845..2860812 100644 --- a/src/lib/components/HeroCarousel/HeroBackground.svelte +++ b/src/lib/components/HeroCarousel/HeroBackground.svelte @@ -2,9 +2,11 @@ import { PLATFORM_TV } from '../../constants'; import classNames from 'classnames'; import { onDestroy } from 'svelte'; + import { isFirefox } from '../../utils/browser-detection'; export let urls: Promise; export let index: number; + export let hasFocus = true; let visibleIndex = -2; let visibleIndexTimeout: ReturnType; @@ -32,23 +34,25 @@ onDestroy(() => visibleIndexTimeout && clearTimeout(visibleIndexTimeout)); -
- {#if PLATFORM_TV} +
+ {#if !isFirefox()} {#await urls then urls} {#each urls as url, i}
{/each} -
{/await} {:else}
{#await urls then urls} @@ -69,6 +73,9 @@ {/each} {/await}
-
{/if}
+
+
+
+
diff --git a/src/lib/components/HeroCarousel/HeroCarousel.svelte b/src/lib/components/HeroCarousel/HeroCarousel.svelte index ab5f0ec..bb220c5 100644 --- a/src/lib/components/HeroCarousel/HeroCarousel.svelte +++ b/src/lib/components/HeroCarousel/HeroCarousel.svelte @@ -6,6 +6,7 @@ import { ChevronRight } from 'radix-icons-svelte'; import PageDots from '../HeroShowcase/PageDots.svelte'; import SidebarMargin from '../SidebarMargin.svelte'; + import type { Readable, Writable } from 'svelte/store'; export let urls: Promise; @@ -37,22 +38,30 @@ index = i; return true; } + + let hasFocusWithin: Readable; + let focusIndex: Writable; + $: backgroundHasFocus = $hasFocusWithin && $focusIndex === 0; - - - { - if (detail.options.direction === 'right') { - if (onNext()) detail.preventNavigation(); - } else if (detail.options.direction === 'left') { - if (onPrevious()) detail.preventNavigation(); - } else if (detail.options.direction === 'up') { - Selectable.giveFocus('left', false); - detail.preventNavigation(); - } - }} - /> + { + if (!backgroundHasFocus) return; + if (detail.options.direction === 'right') { + if (onNext()) detail.preventNavigation(); + } else if (detail.options.direction === 'left') { + if (onPrevious()) detail.preventNavigation(); + } else if (detail.options.direction === 'up') { + Selectable.giveFocus('left', false); + detail.preventNavigation(); + } + }} + bind:hasFocusWithin + bind:focusIndex +> +
diff --git a/src/lib/components/HeroShowcase/HeroShowcase.svelte b/src/lib/components/HeroShowcase/HeroShowcase.svelte index 415e6a2..63de093 100644 --- a/src/lib/components/HeroShowcase/HeroShowcase.svelte +++ b/src/lib/components/HeroShowcase/HeroShowcase.svelte @@ -16,6 +16,7 @@ items.map((i) => `${TMDB_IMAGES_ORIGINAL}${i.backdropUrl}`))} bind:index={showcaseIndex} + on:enter >
{#await items} @@ -30,13 +31,9 @@ {:then items} {@const item = items[showcaseIndex]} {#if item} -
+
- +
@@ -114,7 +114,7 @@ 'px-3 py-1 cursor-pointer whitespace-nowrap text-xl tracking-wide font-medium rounded-lg', 'hover:font-semibold hover:tracking-wide hover:text-white', { - 'bg-highlight-foreground text-black': hasFocus, + 'bg-primary-500 text-black': hasFocus, //'bg-stone-800/50': hasFocus, 'text-zinc-400': !(focusIndex === i), 'text-white': focusIndex === i && !hasFocus @@ -127,7 +127,7 @@ {/each} -
+
{#each $tmdbSeasons as season} {#each season?.episodes || [] as episode} {@const jellyfinEpisodeId = $jellyfinEpisodes?.find( @@ -135,10 +135,10 @@ i.IndexNumber === episode.episode_number && i.ParentIndexNumber === episode.season_number )?.Id} -
+
{ - scrollIntoView({ left: 64 + 16 })(event); + scrollIntoView({ horizontal: 64 + 32 })(event); focusSeason(season); selectedTmdbEpisode = episode; }} diff --git a/src/lib/components/SeriesPage/SeriesPage.svelte b/src/lib/components/SeriesPage/SeriesPage.svelte index 37b8a9d..6d92f4f 100644 --- a/src/lib/components/SeriesPage/SeriesPage.svelte +++ b/src/lib/components/SeriesPage/SeriesPage.svelte @@ -51,151 +51,155 @@ - { - if (detail.direction === 'down' && detail.willLeaveContainer) { - if (episodesSelectable?.focusChild(1)) detail.preventNavigation(); - } - }} - > - - series?.images.backdrops - ?.sort((a, b) => (b.vote_count || 0) - (a.vote_count || 0)) - ?.map((i) => TMDB_IMAGES_ORIGINAL + i.file_path) - .slice(0, 5) || [] - )} +
+ { + if (detail.direction === 'down' && detail.willLeaveContainer) { + if (episodesSelectable?.focusChild(1)) detail.preventNavigation(); + } + }} > -
- {#await $tmdbSeries then series} - {#if showEpisodeInfo && selectedTmdbEpisode} - {@const episode = selectedTmdbEpisode} -
= 15 - } - )} - > - {episode.name} -
-
-

- {episode.runtime} Minutes -

- - -

- {episode.vote_average?.toFixed(1)} TMDB -

-
-
- {episode.overview} -
- {:else if series} -
= 15 - } - )} - > - {series?.name} -
-
-

- {#if series.status !== 'Ended'} - Since {new Date(series.first_air_date || Date.now())?.getFullYear()} - {:else} - Ended {new Date(series.last_air_date || Date.now())?.getFullYear()} - {/if} -

- - -

- {series.vote_average} TMDB +

+ {series.vote_average} TMDB +

+
+
+ {series.overview} +
+ {/if} + {/await} + {#await Promise.all([$jellyfinItem, $sonarrItem]) then [jellyfinItem, sonarrItem]} + + {#if $nextJellyfinEpisode} +
-
- {series.overview} -
- {/if} - {/await} - {#await Promise.all([$jellyfinItem, $sonarrItem]) then [jellyfinItem, sonarrItem]} - - {#if $nextJellyfinEpisode} - - {/if} - {#if sonarrItem} - - {:else} - - {/if} - {#if PLATFORM_WEB} - - - {/if} - - {/await} -
-
-
- - - + Play Season {$nextJellyfinEpisode?.ParentIndexNumber} Episode + {$nextJellyfinEpisode?.IndexNumber} + + + {/if} + {#if sonarrItem} + + {:else} + + {/if} + {#if PLATFORM_WEB} + + + {/if} + + {/await} +
+ + + + + +
diff --git a/src/lib/components/Sidebar/Sidebar.svelte b/src/lib/components/Sidebar/Sidebar.svelte index ca8f768..4cb93d8 100644 --- a/src/lib/components/Sidebar/Sidebar.svelte +++ b/src/lib/components/Sidebar/Sidebar.svelte @@ -1,135 +1,284 @@ - - - - - - + +
+ +
-
-
- navigate('/')} +
+ +
- - navigate('movies')} + + Series + +
+
+ +
- - navigate('library')} + + Movies + +
+
+ +
- - navigate('search')} + + Library + +
+
+ +
- -
- - navigate('manage')} - > - + + Search + +
-
-
- -
navigate('/')}> - - Series -
- -
navigate('movies')}> - - Movies -
- -
navigate('library')}> - - Library -
- -
navigate('search')}> - - Search -
-
- - -
navigate('manage')}> + +
+ - Manage + Manage +
-
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/lib/components/TextField.svelte b/src/lib/components/TextField.svelte index 0d27269..598384b 100644 --- a/src/lib/components/TextField.svelte +++ b/src/lib/components/TextField.svelte @@ -33,7 +33,7 @@ Label { + if (isTizen()) { + var myMediaKeyChangeListener = { + onpressed: function (key: string) { + console.log('Pressed key: ' + key); + tizenMediaKey = key; + } + }; + + // eslint-disable-next-line no-undef + tizen.tvinputdevice.registerKey('MediaPlayPause'); + (tizen as any).mediakey.setMediaKeyEventListener(myMediaKeyChangeListener); + } + }); User agent: {window.navigator.userAgent}
Last key code: {lastKeyCode}
Last key: {lastKey}
+ {#if tizenMediaKey} +
Tizen media key: {tizenMediaKey}
+ {/if}
diff --git a/src/lib/pages/MoviePage.svelte b/src/lib/pages/MoviePage.svelte index 77d3941..43e8f01 100644 --- a/src/lib/pages/MoviePage.svelte +++ b/src/lib/pages/MoviePage.svelte @@ -43,6 +43,7 @@ .slice(0, 5) || [] )} > +
{#await $movieDataP then movie} {#if movie} diff --git a/src/lib/pages/MoviesHomePage.svelte b/src/lib/pages/MoviesHomePage.svelte new file mode 100644 index 0000000..6d9536f --- /dev/null +++ b/src/lib/pages/MoviesHomePage.svelte @@ -0,0 +1,62 @@ + + + +
+ +
+
+ +
+ {$isLoadingContinueWatching || ($isLoadingRecentlyAdded && !$continueWatching?.length) + ? 'Loading...' + : $continueWatching?.length + ? 'Continue Watching' + : 'Recently Added'} +
+ {#if $isLoadingContinueWatching || ($isLoadingRecentlyAdded && !$continueWatching?.length)} + + {:else if $continueWatching?.length} +
+ {#each $continueWatching as item (item.Id)} + + + + {/each} +
+ {:else if $recentlyAdded?.length} +
+ {#each $recentlyAdded as item (item.Id)} + + + + {/each} +
+ {/if} +
+
+
diff --git a/src/lib/pages/MoviesPage.svelte b/src/lib/pages/MoviesPage.svelte deleted file mode 100644 index 617ff2d..0000000 --- a/src/lib/pages/MoviesPage.svelte +++ /dev/null @@ -1,61 +0,0 @@ - - - -
-
- -
-
- -
- {$isLoadingContinueWatching || ($isLoadingRecentlyAdded && !$continueWatching?.length) - ? 'Loading...' - : $continueWatching?.length - ? 'Continue Watching' - : 'Recently Added'} -
- {#if $isLoadingContinueWatching || ($isLoadingRecentlyAdded && !$continueWatching?.length)} - - {:else if $continueWatching?.length} -
- {#each $continueWatching as item (item.Id)} - - - - {/each} -
- {:else if $recentlyAdded?.length} -
- {#each $recentlyAdded as item (item.Id)} - - - - {/each} -
- {/if} -
-
-
-
diff --git a/src/lib/pages/BrowseSeriesPage.svelte b/src/lib/pages/SeriesHomePage.svelte similarity index 64% rename from src/lib/pages/BrowseSeriesPage.svelte rename to src/lib/pages/SeriesHomePage.svelte index b7dd49c..81638cd 100644 --- a/src/lib/pages/BrowseSeriesPage.svelte +++ b/src/lib/pages/SeriesHomePage.svelte @@ -10,11 +10,9 @@ import { getShowcasePropsFromTmdbSeries } from '../components/HeroShowcase/HeroShowcase'; import { scrollIntoView } from '../selectable'; import JellyfinCard from '../components/Card/JellyfinCard.svelte'; - import JellyfinEpisodeCard from '../components/EpisodeCard/JellyfinEpisodeCard.svelte'; const { data: continueWatching, isLoading: isLoadingContinueWatching } = useRequest( - jellyfinApi.getContinueWatching, - 'series' + jellyfinApi.getContinueWatchingSeries ); const { data: recentlyAdded, isLoading: isLoadingRecentlyAdded } = useRequest( jellyfinApi.getRecentlyAdded, @@ -72,40 +70,41 @@ // } - -
-
- -
-
- -
- {$isLoadingContinueWatching || ($isLoadingRecentlyAdded && !$continueWatching?.length) - ? 'Loading...' - : $continueWatching?.length - ? 'Continue Watching' - : 'Recently Added'} + +
+ +
+
+ +
+ {$isLoadingContinueWatching || ($isLoadingRecentlyAdded && !$continueWatching?.length) + ? 'Loading...' + : $continueWatching?.length + ? 'Continue Watching' + : 'Recently Added'} +
+ {#if $isLoadingContinueWatching || ($isLoadingRecentlyAdded && !$continueWatching?.length)} + + {:else if $continueWatching?.length} +
+ {#each $continueWatching as item (item.Id)} + + + + {/each}
- {#if $isLoadingContinueWatching || ($isLoadingRecentlyAdded && !$continueWatching?.length)} - - {:else if $continueWatching?.length} -
- {#each $continueWatching as item (item.Id)} - - - - {/each} -
- {:else if $recentlyAdded?.length} -
- {#each $recentlyAdded as item (item.Id)} - - - - {/each} -
- {/if} -
-
+ {:else if $recentlyAdded?.length} +
+ {#each $recentlyAdded as item (item.Id)} + + + + {/each} +
+ {/if} +
diff --git a/src/lib/selectable.ts b/src/lib/selectable.ts index d6717bb..39854c4 100644 --- a/src/lib/selectable.ts +++ b/src/lib/selectable.ts @@ -296,56 +296,9 @@ export class Selectable { return true; } - return false; + if (navigationEventOptions.preventNavigation) return true; - // const focusIndex = get(this.focusIndex); - // - // const indexAddition = { - // up: this.direction === 'vertical' ? -1 : -this.gridColumns, - // down: this.direction === 'vertical' ? 1 : this.gridColumns, - // left: - // this.direction === 'horizontal' - // ? (focusIndex % this.gridColumns) - 1 < 0 - // ? 0 - // : -1 - // : -this.gridColumns, - // right: - // this.direction === 'horizontal' - // ? (focusIndex % this.gridColumns) + 1 >= this.gridColumns - // ? 0 - // : 1 - // : this.gridColumns - // }[direction]; - // - // // Cycle siblings - // if (indexAddition !== 0) { - // let index = focusIndex + indexAddition; - // while (index >= 0 && index < this.children.length) { - // const children = this.children[index]; - // if (children && children.isFocusable()) { - // propagateNavigationEvent(this, navigationEventOptions); - // if (navigationEventOptions.preventNavigation) return true; - // children.focus(); - // return true; - // } - // index += indexAddition; - // } - // } - // - // // About to leave this container (=coulnd't cycle siblings) - // navigationEventOptions.willLeaveContainer = true; - // if (!bypassActions) { - // propagateNavigationEvent(this, navigationEventOptions); - // if (navigationEventOptions.preventNavigation) return true; - // } - // if (this.neighbors[direction]?.isFocusable()) { - // this.neighbors[direction]?.focus(); - // return true; - // } else if (!this.trapFocus) { - // return this.parent?.giveFocus(direction, bypassActions) || false; - // } - // - // return false; + return false; } static giveFocus(direction: Direction, fireActions?: boolean) { diff --git a/tailwind.config.js b/tailwind.config.js index 830ea56..b12278c 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -1,3 +1,9 @@ +/** + * https://huemint.com/website-monochrome/#palette=353633-fbfdff + * https://huemint.com/website-monochrome/#palette=161718-dfd1a3 Very Nice + * https://huemint.com/website-monochrome/#palette=151a1a-ebab2e + */ + /** @type {import('tailwindcss').Config} */ export default { content: ['./src/**/*.{html,js,svelte,ts}'], @@ -11,8 +17,34 @@ export default { darken: '#07050166', lighten: '#fde68a20', // 'highlight-foreground': '#E7E5E4' - 'highlight-foreground': '#ffe6abcc', - 'highlight-background': '#2925247F' + 'highlight-foreground': '#f6c304', + 'highlight-background': '#161517', + primary: { + 50: '#FDF8EC', + 100: '#FBEED5', + 200: '#F7DEAB', + 300: '#F3CD81', + 400: '#EFBC57', + 500: '#EBAB2E', + 600: '#CD8F14', + 700: '#9A6B0F', + 800: '#66480A', + 900: '#332405', + 950: '#1C1403' + }, + secondary: { + 50: '#E6EAEA', + 100: '#CCD6D6', + 200: '#99ADAD', + 300: '#698282', + 400: '#3E4C4C', + 500: '#0a0807', + 600: '#101414', + 700: '#211a17', + 800: '#171310', + 900: '#0a0807', + 950: '#020303' + } }, keyframes: { timer: {