nwpie/reiverr
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Work on migrating files from sveltekit to svelte

Browse Source
This commit is contained in:
Aleksi Lassila
2024-01-15 01:25:07 +02:00
parent a36a65f874
commit fd1a87a2fe
19 changed files with 361 additions and 340 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/App.svelte
View File

@@ -72,7 +72,7 @@
<MoviesPage container={contentContainer} />
</Route>
<Route path="library">
<LibraryPage container={contentContainer} />
<LibraryPage parent={contentContainer} />
</Route>
<Route path="manage">
<ManagePage container={contentContainer} />

30
src/lib/apis/jellyfin/jellyfinApi.ts
View File

@@ -1,9 +1,9 @@
import type { components, paths } from '$lib/apis/jellyfin/jellyfin.generated';
import type { DeviceProfile } from '$lib/apis/jellyfin/playback-profiles';
import { settings } from '$lib/stores/settings.store';
import axios from 'axios';
import createClient from 'openapi-fetch';
import { get } from 'svelte/store';
import type { components, paths } from './jellyfin.generated';
import { settings } from '../../stores/settings.store';
import type { DeviceProfile } from './playback-profiles';
export type JellyfinItem = components['schemas']['BaseItemDto'];
@@ -26,7 +26,7 @@ function getJellyfinApi() {
export const getJellyfinContinueWatching = async (): Promise<JellyfinItem[] | undefined> =>
getJellyfinApi()
?.get('/Users/{userId}/Items/Resume', {
?.GET('/Users/{userId}/Items/Resume', {
params: {
path: {
userId: get(settings)?.jellyfin.userId || ''
@@ -41,7 +41,7 @@ export const getJellyfinContinueWatching = async (): Promise<JellyfinItem[] | un
export const getJellyfinNextUp = async () =>
getJellyfinApi()
?.get('/Shows/NextUp', {
?.GET('/Shows/NextUp', {
params: {
query: {
userId: get(settings)?.jellyfin.userId || '',
@@ -53,7 +53,7 @@ export const getJellyfinNextUp = async () =>
export const getJellyfinItems = async () =>
getJellyfinApi()
?.get('/Users/{userId}/Items', {
?.GET('/Users/{userId}/Items', {
params: {
path: {
userId: get(settings)?.jellyfin.userId || ''
@@ -84,7 +84,7 @@ export const getJellyfinItems = async () =>
export const getJellyfinEpisodes = async (parentId = '') =>
getJellyfinApi()
?.get('/Users/{userId}/Items', {
?.GET('/Users/{userId}/Items', {
params: {
path: {
userId: get(settings)?.jellyfin.userId || ''
@@ -126,7 +126,7 @@ export const getJellyfinEpisodesInSeasons = async (seriesId: string) =>
export const getJellyfinItem = async (itemId: string) =>
getJellyfinApi()
?.get('/Users/{userId}/Items/{itemId}', {
?.GET('/Users/{userId}/Items/{itemId}', {
params: {
path: {
itemId,
@@ -146,7 +146,7 @@ export const getJellyfinPlaybackInfo = async (
maxStreamingBitrate = 140000000
) =>
getJellyfinApi()
?.post('/Items/{itemId}/PlaybackInfo', {
?.POST('/Items/{itemId}/PlaybackInfo', {
params: {
path: {
itemId: itemId
@@ -184,7 +184,7 @@ export const reportJellyfinPlaybackStarted = (
audioStreamIndex?: number,
subtitleStreamIndex?: number
) =>
getJellyfinApi()?.post('/Sessions/Playing', {
getJellyfinApi()?.POST('/Sessions/Playing', {
body: {
CanSeek: true,
ItemId: itemId,
@@ -201,7 +201,7 @@ export const reportJellyfinPlaybackProgress = (
isPaused: boolean,
positionTicks: number
) =>
getJellyfinApi()?.post('/Sessions/Playing/Progress', {
getJellyfinApi()?.POST('/Sessions/Playing/Progress', {
body: {
ItemId: itemId,
PlaySessionId: sessionId,
@@ -217,7 +217,7 @@ export const reportJellyfinPlaybackStopped = (
sessionId: string,
positionTicks: number
) =>
getJellyfinApi()?.post('/Sessions/Playing/Stopped', {
getJellyfinApi()?.POST('/Sessions/Playing/Stopped', {
body: {
ItemId: itemId,
PlaySessionId: sessionId,
@@ -227,7 +227,7 @@ export const reportJellyfinPlaybackStopped = (
});
export const delteActiveEncoding = (playSessionId: string) =>
getJellyfinApi()?.del('/Videos/ActiveEncodings', {
getJellyfinApi()?.DELETE('/Videos/ActiveEncodings', {
params: {
query: {
deviceId: JELLYFIN_DEVICE_ID,
@@ -237,7 +237,7 @@ export const delteActiveEncoding = (playSessionId: string) =>
});
export const setJellyfinItemWatched = async (jellyfinId: string) =>
getJellyfinApi()?.post('/Users/{userId}/PlayedItems/{itemId}', {
getJellyfinApi()?.POST('/Users/{userId}/PlayedItems/{itemId}', {
params: {
path: {
userId: get(settings)?.jellyfin.userId || '',
@@ -250,7 +250,7 @@ export const setJellyfinItemWatched = async (jellyfinId: string) =>
});
export const setJellyfinItemUnwatched = async (jellyfinId: string) =>
getJellyfinApi()?.del('/Users/{userId}/PlayedItems/{itemId}', {
getJellyfinApi()?.DELETE('/Users/{userId}/PlayedItems/{itemId}', {
params: {
path: {
userId: get(settings)?.jellyfin.userId || '',

30
src/lib/apis/radarr/radarrApi.ts
View File

@@ -1,10 +1,10 @@
import type { components, paths } from '$lib/apis/radarr/radarr.generated';
import { getTmdbMovie } from '$lib/apis/tmdb/tmdbApi';
import { settings } from '$lib/stores/settings.store';
import { log } from '$lib/utils';
import axios from 'axios';
import createClient from 'openapi-fetch';
import { get } from 'svelte/store';
import { settings } from '../../stores/settings.store';
import type { components, paths } from './radarr.generated';
import { getTmdbMovie } from '../tmdb/tmdbApi';
import { log } from '../../utils';
export type RadarrMovie = components['schemas']['MovieResource'];
export type MovieFileResource = components['schemas']['MovieFileResource'];
@@ -43,14 +43,14 @@ function getRadarrApi() {
export const getRadarrMovies = (): Promise<RadarrMovie[]> =>
getRadarrApi()
?.get('/api/v3/movie', {
?.GET('/api/v3/movie', {
params: {}
})
.then((r) => r.data || []) || Promise.resolve([]);
export const getRadarrMovieByTmdbId = (tmdbId: string): Promise<RadarrMovie | undefined> =>
getRadarrApi()
?.get('/api/v3/movie', {
?.GET('/api/v3/movie', {
params: {
query: {
tmdbId: Number(tmdbId)
@@ -82,7 +82,7 @@ export const addMovieToRadarr = async (tmdbId: number) => {
return (
getRadarrApi()
?.post('/api/v3/movie', {
?.POST('/api/v3/movie', {
params: {},
body: options
})
@@ -92,7 +92,7 @@ export const addMovieToRadarr = async (tmdbId: number) => {
export const cancelDownloadRadarrMovie = async (downloadId: number) => {
const deleteResponse = await getRadarrApi()
?.del('/api/v3/queue/{id}', {
?.DELETE('/api/v3/queue/{id}', {
params: {
path: {
id: downloadId
@@ -110,12 +110,12 @@ export const cancelDownloadRadarrMovie = async (downloadId: number) => {
export const fetchRadarrReleases = (movieId: number) =>
getRadarrApi()
?.get('/api/v3/release', { params: { query: { movieId: movieId } } })
?.GET('/api/v3/release', { params: { query: { movieId: movieId } } })
.then((r) => r.data || []) || Promise.resolve([]);
export const downloadRadarrMovie = (guid: string, indexerId: number) =>
getRadarrApi()
?.post('/api/v3/release', {
?.POST('/api/v3/release', {
params: {},
body: {
indexerId,
@@ -126,7 +126,7 @@ export const downloadRadarrMovie = (guid: string, indexerId: number) =>
export const deleteRadarrMovie = (id: number) =>
getRadarrApi()
?.del('/api/v3/moviefile/{id}', {
?.DELETE('/api/v3/moviefile/{id}', {
params: {
path: {
id
@@ -137,7 +137,7 @@ export const deleteRadarrMovie = (id: number) =>
export const getRadarrDownloads = (): Promise<RadarrDownload[]> =>
getRadarrApi()
?.get('/api/v3/queue', {
?.GET('/api/v3/queue', {
params: {
query: {
includeMovie: true
@@ -155,7 +155,7 @@ export const getRadarrDownloadsByTmdbId = (tmdbId: number) =>
const lookupRadarrMovieByTmdbId = (tmdbId: number) =>
getRadarrApi()
?.get('/api/v3/movie/lookup/tmdb', {
?.GET('/api/v3/movie/lookup/tmdb', {
params: {
query: {
tmdbId
@@ -166,12 +166,12 @@ const lookupRadarrMovieByTmdbId = (tmdbId: number) =>
export const getDiskSpace = (): Promise<DiskSpaceInfo[]> =>
getRadarrApi()
?.get('/api/v3/diskspace', {})
?.GET('/api/v3/diskspace', {})
.then((d) => d.data || []) || Promise.resolve([]);
export const removeFromRadarr = (id: number) =>
getRadarrApi()
?.del('/api/v3/movie/{id}', {
?.DELETE('/api/v3/movie/{id}', {
params: {
path: {
id

34
src/lib/apis/sonarr/sonarrApi.ts
View File

@@ -1,10 +1,10 @@
import type { components, paths } from '$lib/apis/sonarr/sonarr.generated';
import { settings } from '$lib/stores/settings.store';
import { log } from '$lib/utils';
import axios from 'axios';
import createClient from 'openapi-fetch';
import { get } from 'svelte/store';
import { getTmdbSeries } from '../tmdb/tmdbApi';
import type { components, paths } from './sonarr.generated';
import { settings } from '../../stores/settings.store';
import { log } from '../../utils';
export type SonarrSeries = components['schemas']['SeriesResource'];
export type SonarrReleaseResource = components['schemas']['ReleaseResource'];
@@ -58,14 +58,14 @@ function getSonarrApi() {
export const getSonarrSeries = (): Promise<SonarrSeries[]> =>
getSonarrApi()
?.get('/api/v3/series', {
?.GET('/api/v3/series', {
params: {}
})
.then((r) => r.data || []) || Promise.resolve([]);
export const getSonarrSeriesByTvdbId = (tvdbId: number): Promise<SonarrSeries | undefined> =>
getSonarrApi()
?.get('/api/v3/series', {
?.GET('/api/v3/series', {
params: {
query: {
tvdbId: tvdbId
@@ -76,7 +76,7 @@ export const getSonarrSeriesByTvdbId = (tvdbId: number): Promise<SonarrSeries |
export const getDiskSpace = (): Promise<DiskSpaceInfo[]> =>
getSonarrApi()
?.get('/api/v3/diskspace', {})
?.GET('/api/v3/diskspace', {})
.then((d) => d.data || []) || Promise.resolve([]);
export const addSeriesToSonarr = async (tmdbId: number) => {
@@ -101,7 +101,7 @@ export const addSeriesToSonarr = async (tmdbId: number) => {
};
return getSonarrApi()
?.post('/api/v3/series', {
?.POST('/api/v3/series', {
params: {},
body: options
})
@@ -110,7 +110,7 @@ export const addSeriesToSonarr = async (tmdbId: number) => {
export const cancelDownloadSonarrEpisode = async (downloadId: number) => {
const deleteResponse = await getSonarrApi()
?.del('/api/v3/queue/{id}', {
?.DELETE('/api/v3/queue/{id}', {
params: {
path: {
id: downloadId
@@ -128,7 +128,7 @@ export const cancelDownloadSonarrEpisode = async (downloadId: number) => {
export const downloadSonarrEpisode = (guid: string, indexerId: number) =>
getSonarrApi()
?.post('/api/v3/release', {
?.POST('/api/v3/release', {
params: {},
body: {
indexerId,
@@ -139,7 +139,7 @@ export const downloadSonarrEpisode = (guid: string, indexerId: number) =>
export const deleteSonarrEpisode = (id: number) =>
getSonarrApi()
?.del('/api/v3/episodefile/{id}', {
?.DELETE('/api/v3/episodefile/{id}', {
params: {
path: {
id
@@ -150,7 +150,7 @@ export const deleteSonarrEpisode = (id: number) =>
export const getSonarrDownloads = (): Promise<SonarrDownload[]> =>
getSonarrApi()
?.get('/api/v3/queue', {
?.GET('/api/v3/queue', {
params: {
query: {
includeEpisode: true,
@@ -171,7 +171,7 @@ export const getSonarrDownloadsById = (sonarrId: number) =>
export const removeFromSonarr = (id: number): Promise<boolean> =>
getSonarrApi()
?.del('/api/v3/series/{id}', {
?.DELETE('/api/v3/series/{id}', {
params: {
path: {
id
@@ -183,7 +183,7 @@ export const removeFromSonarr = (id: number): Promise<boolean> =>
export const getSonarrEpisodes = async (seriesId: number) => {
const episodesPromise =
getSonarrApi()
?.get('/api/v3/episode', {
?.GET('/api/v3/episode', {
params: {
query: {
seriesId
@@ -194,7 +194,7 @@ export const getSonarrEpisodes = async (seriesId: number) => {
const episodeFilesPromise =
getSonarrApi()
?.get('/api/v3/episodefile', {
?.GET('/api/v3/episodefile', {
params: {
query: {
seriesId
@@ -214,7 +214,7 @@ export const getSonarrEpisodes = async (seriesId: number) => {
export const fetchSonarrReleases = async (episodeId: number) =>
getSonarrApi()
?.get('/api/v3/release', {
?.GET('/api/v3/release', {
params: {
query: {
episodeId
@@ -225,7 +225,7 @@ export const fetchSonarrReleases = async (episodeId: number) =>
export const fetchSonarrSeasonReleases = async (seriesId: number, seasonNumber: number) =>
getSonarrApi()
?.get('/api/v3/release', {
?.GET('/api/v3/release', {
params: {
query: {
seriesId,
@@ -238,7 +238,7 @@ export const fetchSonarrSeasonReleases = async (seriesId: number, seasonNumber:
export const fetchSonarrEpisodes = async (seriesId: number): Promise<SonarrEpisode[]> => {
return (
getSonarrApi()
?.get('/api/v3/episode', {
?.GET('/api/v3/episode', {
params: {
query: {
seriesId

45
src/lib/apis/tmdb/tmdbApi.ts
View File

@@ -1,10 +1,9 @@
import { browser } from '$app/environment';
import { TMDB_API_KEY, TMDB_BACKDROP_SMALL } from '$lib/constants';
import { settings } from '$lib/stores/settings.store';
import createClient from 'openapi-fetch';
import { get } from 'svelte/store';
import type { operations, paths } from './tmdb.generated';
import type { TitleType } from '$lib/types';
import { TMDB_API_KEY, TMDB_BACKDROP_SMALL } from '../../constants';
import { settings } from '../../stores/settings.store';
import type { TitleType } from '../../types';
const CACHE_ONE_DAY = 'max-age=86400';
const CACHE_FOUR_DAYS = 'max-age=345600';
@@ -39,8 +38,8 @@ export interface TmdbSeriesFull2 extends TmdbSeries2 {
images: operations['tv-series-images']['responses']['200']['content']['application/json'];
}
const backdropCache = browser ? window?.caches?.open('backdrops') : undefined;
const posterCache = browser ? window?.caches?.open('posters') : undefined;
const backdropCache = window?.caches?.open('backdrops') || undefined;
const posterCache = window?.caches?.open('posters') || undefined;
const getTmdbCache = async (
cachePromise: typeof backdropCache,
@@ -72,7 +71,7 @@ export const TmdbApiOpen = createClient<paths>({
});
export const getTmdbMovie = async (tmdbId: number) =>
await TmdbApiOpen.get('/3/movie/{movie_id}', {
await TmdbApiOpen.GET('/3/movie/{movie_id}', {
params: {
path: {
movie_id: tmdbId
@@ -85,7 +84,7 @@ export const getTmdbMovie = async (tmdbId: number) =>
}).then((res) => res.data as TmdbMovieFull2 | undefined);
export const getTmdbSeriesFromTvdbId = async (tvdbId: string) =>
TmdbApiOpen.get('/3/find/{external_id}', {
TmdbApiOpen.GET('/3/find/{external_id}', {
params: {
path: {
external_id: tvdbId
@@ -107,7 +106,7 @@ export const getTmdbIdFromTvdbId = async (tvdbId: number) =>
});
export const getTmdbSeries = async (tmdbId: number): Promise<TmdbSeriesFull2 | undefined> =>
await TmdbApiOpen.get('/3/tv/{series_id}', {
await TmdbApiOpen.GET('/3/tv/{series_id}', {
params: {
path: {
series_id: tmdbId
@@ -126,7 +125,7 @@ export const getTmdbSeriesSeason = async (
tmdbId: number,
season: number
): Promise<TmdbSeason | undefined> =>
TmdbApiOpen.get('/3/tv/{series_id}/season/{season_number}', {
TmdbApiOpen.GET('/3/tv/{series_id}/season/{season_number}', {
params: {
path: {
series_id: tmdbId,
@@ -141,7 +140,7 @@ export const getTmdbSeriesSeasons = async (tmdbId: number, seasons: number) =>
);
export const getTmdbSeriesImages = async (tmdbId: number) =>
TmdbApiOpen.get('/3/tv/{series_id}/images', {
TmdbApiOpen.GET('/3/tv/{series_id}/images', {
params: {
path: {
series_id: tmdbId
@@ -153,7 +152,7 @@ export const getTmdbSeriesImages = async (tmdbId: number) =>
}).then((res) => res.data);
export const getTmdbMovieImages = async (tmdbId: number) =>
await TmdbApiOpen.get('/3/movie/{movie_id}/images', {
await TmdbApiOpen.GET('/3/movie/{movie_id}/images', {
params: {
path: {
movie_id: tmdbId
@@ -203,7 +202,7 @@ export const getTmdbMoviePoster = async (tmdbId: number) =>
/** Discover */
export const getTmdbPopularMovies = () =>
TmdbApiOpen.get('/3/movie/popular', {
TmdbApiOpen.GET('/3/movie/popular', {
params: {
query: {
language: get(settings)?.language,
@@ -213,7 +212,7 @@ export const getTmdbPopularMovies = () =>
}).then((res) => res.data?.results || []);
export const getTmdbPopularSeries = () =>
TmdbApiOpen.get('/3/tv/popular', {
TmdbApiOpen.GET('/3/tv/popular', {
params: {
query: {
language: get(settings)?.language
@@ -222,7 +221,7 @@ export const getTmdbPopularSeries = () =>
}).then((res) => res.data?.results || []);
export const getTmdbNetworkSeries = (networkId: number) =>
TmdbApiOpen.get('/3/discover/tv', {
TmdbApiOpen.GET('/3/discover/tv', {
params: {
query: {
with_networks: networkId
@@ -231,7 +230,7 @@ export const getTmdbNetworkSeries = (networkId: number) =>
}).then((res) => res.data?.results || []);
export const getTmdbGenreMovies = (genreId: number) =>
TmdbApiOpen.get('/3/discover/movie', {
TmdbApiOpen.GET('/3/discover/movie', {
params: {
query: {
with_genres: String(genreId)
@@ -240,7 +239,7 @@ export const getTmdbGenreMovies = (genreId: number) =>
}).then((res) => res.data?.results || []);
export const getTmdbSeriesRecommendations = (tmdbId: number) =>
TmdbApiOpen.get('/3/tv/{series_id}/recommendations', {
TmdbApiOpen.GET('/3/tv/{series_id}/recommendations', {
params: {
path: {
series_id: tmdbId
@@ -249,7 +248,7 @@ export const getTmdbSeriesRecommendations = (tmdbId: number) =>
}).then((res) => res.data?.results || []);
export const getTmdbSeriesSimilar = (tmdbId: number) =>
TmdbApiOpen.get('/3/tv/{series_id}/similar', {
TmdbApiOpen.GET('/3/tv/{series_id}/similar', {
params: {
path: {
series_id: String(tmdbId)
@@ -258,7 +257,7 @@ export const getTmdbSeriesSimilar = (tmdbId: number) =>
}).then((res) => res.data?.results || []);
export const getTmdbSeriesCredits = (tmdbId: number) =>
TmdbApiOpen.get('/3/tv/{series_id}/credits', {
TmdbApiOpen.GET('/3/tv/{series_id}/credits', {
params: {
path: {
series_id: tmdbId
@@ -267,7 +266,7 @@ export const getTmdbSeriesCredits = (tmdbId: number) =>
}).then((res) => res.data?.cast || []);
export const getTmdbMovieRecommendations = (tmdbId: number) =>
TmdbApiOpen.get('/3/movie/{movie_id}/recommendations', {
TmdbApiOpen.GET('/3/movie/{movie_id}/recommendations', {
params: {
path: {
movie_id: tmdbId
@@ -276,7 +275,7 @@ export const getTmdbMovieRecommendations = (tmdbId: number) =>
}).then((res) => res.data?.results || []);
export const getTmdbMovieSimilar = (tmdbId: number) =>
TmdbApiOpen.get('/3/movie/{movie_id}/similar', {
TmdbApiOpen.GET('/3/movie/{movie_id}/similar', {
params: {
path: {
movie_id: tmdbId
@@ -285,7 +284,7 @@ export const getTmdbMovieSimilar = (tmdbId: number) =>
}).then((res) => res.data?.results || []);
export const searchTmdbTitles = (query: string) =>
TmdbApiOpen.get('/3/search/multi', {
TmdbApiOpen.GET('/3/search/multi', {
params: {
query: {
query
@@ -334,7 +333,7 @@ export const getPosterProps = async (
};
export const getTmdbPerson = async (person_id: number) =>
TmdbApiOpen.get('/3/person/{person_id}', {
TmdbApiOpen.GET('/3/person/{person_id}', {
params: {
path: {
person_id: person_id

62
src/lib/components-new/NavbarItem.svelte
View File

@@ -1,31 +1,31 @@
<script lang="ts">
import Selectable from '../components/Selectable.svelte';
import classNames from 'classnames';
import { useNavigate } from 'svelte-navigator';
import { get } from 'svelte/store';
import { Container } from '../actions/focusAction';
export let to: string;
export let parentContainer: Container;
const { container, hasFocus } = parentContainer.createChild('navBarItem').getStores();
const navigate = useNavigate();
function handleClick() {
navigate(to);
get(Container.focusedObject)?.giveFocus('right');
}
</script>
<button on:click={handleClick}>
<Selectable {container}>
<div
class={classNames('flex items-center my-2', {
'text-amber-200': $hasFocus
})}
>
<slot name="icon" />
<slot name="text" />
</div>
</Selectable>
</button>
<script lang="ts">
import Selectable from '../components/Selectable.svelte';
import classNames from 'classnames';
import { useNavigate } from 'svelte-navigator';
import { get } from 'svelte/store';
import { Container } from '../actions/focusAction';
export let to: string;
export let parentContainer: Container;
const { container, hasFocus } = parentContainer.createChild('navBarItem').getStores();
const navigate = useNavigate();
function handleClick() {
navigate(to);
get(Container.focusedObject)?.giveFocus('right');
}
</script>
<button on:click={handleClick}>
<Selectable {container}>
<div
class={classNames('flex items-center my-2', {
'text-amber-200': $hasFocus
})}
>
<slot name="icon" />
<slot name="text" />
</div>
</Selectable>
</button>

46
src/lib/components/Card/CardPlaceholder.svelte
View File

@@ -1,23 +1,23 @@
<script lang="ts">
import classNames from 'classnames';
import { fade } from 'svelte/transition';
export let index = 0;
export let size: 'dynamic' | 'md' | 'lg' = 'md';
export let orientation: 'portrait' | 'landscape' = 'landscape';
</script>
<div
class={classNames('rounded-xl overflow-hidden shadow-lg placeholder shrink-0', {
'aspect-video': orientation === 'landscape',
'aspect-[2/3]': orientation === 'portrait',
'w-44': size === 'md' && orientation === 'portrait',
'h-44': size === 'md' && orientation === 'landscape',
'w-60': size === 'lg' && orientation === 'portrait',
'h-60': size === 'lg' && orientation === 'landscape',
'w-full': size === 'dynamic'
})}
style={'animation-delay: ' + ((index * 100) % 2000) + 'ms;'}
transition:fade|global
tabindex="0"
/>
<script lang="ts">
import classNames from 'classnames';
import { fade } from 'svelte/transition';
export let index = 0;
export let size: 'dynamic' | 'md' | 'lg' = 'md';
export let orientation: 'portrait' | 'landscape' = 'landscape';
</script>
<div
class={classNames('rounded-xl overflow-hidden shadow-lg placeholder shrink-0', {
'aspect-video': orientation === 'landscape',
'aspect-[2/3]': orientation === 'portrait',
'w-44': size === 'md' && orientation === 'portrait',
'h-44': size === 'md' && orientation === 'landscape',
'w-60': size === 'lg' && orientation === 'portrait',
'h-60': size === 'lg' && orientation === 'landscape',
'w-full': size === 'dynamic'
})}
style={'animation-delay: ' + ((index * 100) % 2000) + 'ms;'}
transition:fade|global
tabindex="0"
/>

146
src/lib/components/Carousel/Carousel.svelte
View File

@@ -1,73 +1,73 @@
<script lang="ts">
import { fade } from 'svelte/transition';
import IconButton from '../IconButton.svelte';
import { ChevronLeft, ChevronRight } from 'radix-icons-svelte';
import classNames from 'classnames';
import type { Registerer } from '../../actions/focusAction';
export let gradientFromColor = 'from-stone-950';
export let heading = '';
let carousel: HTMLDivElement | undefined;
let scrollX = 0;
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}>
<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',
{
hidden: (carousel?.scrollWidth || 0) === (carousel?.clientWidth || 0)
}
)}
>
<IconButton
on:click={() => {
carousel?.scrollTo({ left: scrollX - carousel?.clientWidth * 0.8, behavior: 'smooth' });
}}
>
<ChevronLeft size={20} />
</IconButton>
<IconButton
on:click={() => {
carousel?.scrollTo({ left: scrollX + carousel?.clientWidth * 0.8, behavior: 'smooth' });
}}
>
<ChevronRight size={20} />
</IconButton>
</div>
</div>
<div class="relative">
<div
class={classNames(
'flex overflow-x-scroll items-center overflow-y-visible gap-4 relative scrollbar-hide p-1',
scrollClass
)}
bind:this={carousel}
tabindex="-1"
on:scroll={() => (scrollX = carousel?.scrollLeft || scrollX)}
>
<slot />
</div>
{#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}
/>
{/if}
</div>
</div>
<script lang="ts">
import { fade } from 'svelte/transition';
import IconButton from '../IconButton.svelte';
import { ChevronLeft, ChevronRight } from 'radix-icons-svelte';
import classNames from 'classnames';
import type { Registerer } from '../../actions/focusAction';
export let gradientFromColor = 'from-stone-950';
export let heading = '';
let carousel: HTMLDivElement | undefined;
let scrollX = 0;
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}>
<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',
{
hidden: (carousel?.scrollWidth || 0) === (carousel?.clientWidth || 0)
}
)}
>
<IconButton
on:click={() => {
carousel?.scrollTo({ left: scrollX - carousel?.clientWidth * 0.8, behavior: 'smooth' });
}}
>
<ChevronLeft size={20} />
</IconButton>
<IconButton
on:click={() => {
carousel?.scrollTo({ left: scrollX + carousel?.clientWidth * 0.8, behavior: 'smooth' });
}}
>
<ChevronRight size={20} />
</IconButton>
</div>
</div>
<div class="relative">
<div
class={classNames(
'flex overflow-x-scroll items-center overflow-y-visible gap-4 relative scrollbar-hide p-1',
scrollClass
)}
bind:this={carousel}
tabindex="-1"
on:scroll={() => (scrollX = carousel?.scrollLeft || scrollX)}
>
<slot />
</div>
{#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}
/>
{/if}
</div>
</div>

74
src/lib/components/Carousel/CarouselPlaceholderItems.svelte
View File

@@ -1,37 +1,37 @@
<script lang="ts">
import CardPlaceholder from '../Card/CardPlaceholder.svelte';
import { Container } from '../../actions/focusAction';
import classNames from 'classnames';
export let size: 'dynamic' | 'md' | 'lg' = 'md';
export let orientation: 'landscape' | 'portrait' = 'landscape';
export let container: Container;
let carousel = container.createChild('carousel').setDirection('horizontal');
let focusIndexStore = carousel.focusIndex;
let focusWithinStore = carousel.hasFocusWithin;
Container.focusedObject.subscribe((fo) => console.log('focusedObject', fo));
carousel.hasFocus.subscribe((hf) => console.log('hasFocus', hf));
let registerer = carousel.getChildRegisterer();
</script>
<p
class={classNames({
'bg-blue-500': $focusWithinStore
})}
>
Index: {$focusIndexStore}
</p>
{#each Array(10) as _, i (i)}
<div
tabindex="0"
use:registerer
class={classNames({
'bg-red-500': $focusIndexStore === i && $focusWithinStore
})}
>
<CardPlaceholder {size} index={i} {orientation} />
</div>
{/each}
<script lang="ts">
import CardPlaceholder from '../Card/CardPlaceholder.svelte';
import { Container } from '../../actions/focusAction';
import classNames from 'classnames';
export let size: 'dynamic' | 'md' | 'lg' = 'md';
export let orientation: 'landscape' | 'portrait' = 'landscape';
export let container: Container;
let carousel = container.createChild('carousel').setDirection('horizontal');
let focusIndexStore = carousel.focusIndex;
let focusWithinStore = carousel.hasFocusWithin;
Container.focusedObject.subscribe((fo) => console.log('focusedObject', fo));
carousel.hasFocus.subscribe((hf) => console.log('hasFocus', hf));
let registerer = carousel.getChildRegisterer();
</script>
<p
class={classNames({
'bg-blue-500': $focusWithinStore
})}
>
Index: {$focusIndexStore}
</p>
{#each Array(10) as _, i (i)}
<div
tabindex="0"
use:registerer
class={classNames({
'bg-red-500': $focusIndexStore === i && $focusWithinStore
})}
>
<CardPlaceholder {size} index={i} {orientation} />
</div>
{/each}

28
src/lib/components/Selectable.svelte
View File

@@ -1,14 +1,14 @@
<script lang="ts">
import { Container } from '../actions/focusAction';
export let container: Container;
const registerer = container.getHtmlElementRegisterer();
export let handleClick = () => {
container.focus();
};
</script>
<button use:registerer tabindex="0" on:click={handleClick} class="outline-none ring-0">
<slot />
</button>
<script lang="ts">
import { Container } from '../actions/focusAction';
export let container: Container;
const registerer = container.getHtmlElementRegisterer();
export let handleClick = () => {
container.focus();
};
</script>
<button use:registerer tabindex="0" on:click={handleClick} class="outline-none ring-0">
<slot />
</button>

44
src/lib/pages/HomePage.svelte
View File

@@ -1,22 +1,22 @@
<script lang="ts">
import { Container } from '../actions/focusAction';
import Carousel from '../components/Carousel/Carousel.svelte';
import CarouselPlaceholderItems from '../components/Carousel/CarouselPlaceholderItems.svelte';
import classNames from 'classnames';
export let container: Container;
const focusWithin = container.hasFocusWithin;
</script>
<div
class={classNames('flex flex-col', {
'bg-green-100': $focusWithin
})}
>
<Carousel>
<CarouselPlaceholderItems {container} />
</Carousel>
<Carousel>
<CarouselPlaceholderItems {container} />
</Carousel>
</div>
<script lang="ts">
import { Container } from '../actions/focusAction';
import Carousel from '../components/Carousel/Carousel.svelte';
import CarouselPlaceholderItems from '../components/Carousel/CarouselPlaceholderItems.svelte';
import classNames from 'classnames';
export let container: Container;
const focusWithin = container.hasFocusWithin;
</script>
<div
class={classNames('flex flex-col', {
'bg-green-100': $focusWithin
})}
>
<Carousel>
<CarouselPlaceholderItems {container} />
</Carousel>
<Carousel>
<CarouselPlaceholderItems {container} />
</Carousel>
</div>

32
src/lib/pages/LibraryPage.svelte
View File

@@ -1,8 +1,34 @@
<script lang="ts">
import type { Container } from '../actions/focusAction';
import { settings } from '../stores/settings.store';
import { jellyfinItemsStore } from '../stores/data.store';
import Carousel from '../components/Carousel/Carousel.svelte';
import CarouselPlaceholderItems from '../components/Carousel/CarouselPlaceholderItems.svelte';
export let container: Container;
let registerer = container.getChildRegisterer();
export let parent: Container;
let registerer = parent.getChildRegisterer();
settings.update((prev) => ({
...prev,
initialised: true,
jellyfin: {
...prev.jellyfin,
apiKey: import.meta.env.VITE_JELLYFIN_API_KEY,
baseUrl: import.meta.env.VITE_JELLYFIN_BASE_URL,
userId: import.meta.env.VITE_JELLYFIN_USER_ID
}
}));
jellyfinItemsStore.subscribe((items) => {
console.warn('GOT ITEMS', items.data);
});
let asd: HTMLDivElement;
$: console.log('asd', asd);
</script>
<div use:registerer>LibraryPage</div>
<div use:registerer bind:this={asd}>
<div>LibraryPage</div>
<Carousel>
<CarouselPlaceholderItems container={parent} />
</Carousel>
</div>

16
src/lib/pages/ManagePage.svelte
View File

@@ -1,8 +1,8 @@
<script lang="ts">
import type { Container } from '../actions/focusAction';
export let container: Container;
let registerer = container.getChildRegisterer();
</script>
<div use:registerer>ManagePage</div>
<script lang="ts">
import type { Container } from '../actions/focusAction';
export let container: Container;
let registerer = container.getChildRegisterer();
</script>
<div use:registerer>ManagePage</div>

16
src/lib/pages/MoviesPage.svelte
View File

@@ -1,8 +1,8 @@
<script lang="ts">
import type { Container } from '../actions/focusAction';
export let container: Container;
let registerer = container.getChildRegisterer();
</script>
<div use:registerer>MoviesPage</div>
<script lang="ts">
import type { Container } from '../actions/focusAction';
export let container: Container;
let registerer = container.getChildRegisterer();
</script>
<div use:registerer>MoviesPage</div>

16
src/lib/pages/SearchPage.svelte
View File

@@ -1,8 +1,8 @@
<script lang="ts">
import type { Container } from '../actions/focusAction';
export let container: Container;
let registerer = container.getChildRegisterer();
</script>
<div use:registerer>SearchPage</div>
<script lang="ts">
import type { Container } from '../actions/focusAction';
export let container: Container;
let registerer = container.getChildRegisterer();
</script>
<div use:registerer>SearchPage</div>

16
src/lib/pages/SeriesPage.svelte
View File

@@ -1,8 +1,8 @@
<script lang="ts">
import type { Container } from '../actions/focusAction';
export let container: Container;
let registerer = container.getChildRegisterer();
</script>
<div use:registerer>SeriesPage</div>
<script lang="ts">
import type { Container } from '../actions/focusAction';
export let container: Container;
let registerer = container.getChildRegisterer();
</script>
<div use:registerer>SeriesPage</div>

14
src/lib/stores/data.store.ts
View File

@@ -1,17 +1,13 @@
import { getJellyfinItems, type JellyfinItem } from '$lib/apis/jellyfin/jellyfinApi';
import {
getRadarrDownloads,
getRadarrMovies,
type RadarrDownload
} from '$lib/apis/radarr/radarrApi';
import { derived, writable } from 'svelte/store';
import { settings } from './settings.store';
import { getJellyfinItems, type JellyfinItem } from '../apis/jellyfin/jellyfinApi';
import {
getSonarrDownloads,
getSonarrSeries,
type SonarrDownload,
type SonarrSeries
} from '$lib/apis/sonarr/sonarrApi';
import { derived, writable } from 'svelte/store';
import { settings } from './settings.store';
} from '../apis/sonarr/sonarrApi';
import { getRadarrDownloads, getRadarrMovies, type RadarrDownload } from '../apis/radarr/radarrApi';
async function waitForSettings() {
return new Promise((resolve) => {

2
tizen/.gitignore vendored
View File

@@ -1,2 +1,2 @@
.sign/*
.sign/*
*.wgt

48
tizen/.project
View File

@@ -1,24 +1,24 @@
<?xml version="1.0" encoding="UTF-8"?>
<projectDescription>
<name>Reiverr</name>
<comment></comment>
<projects>
</projects>
<buildSpec>
<buildCommand>
<name>json.validation.builder</name>
<arguments>
</arguments>
</buildCommand>
<buildCommand>
<name>org.tizen.web.project.builder.WebBuilder</name>
<arguments>
</arguments>
</buildCommand>
</buildSpec>
<natures>
<nature>json.validation.nature</nature>
<nature>org.eclipse.wst.jsdt.core.jsNature</nature>
<nature>org.tizen.web.project.builder.WebNature</nature>
</natures>
</projectDescription>
<?xml version="1.0" encoding="UTF-8"?>
<projectDescription>
<name>Reiverr</name>
<comment></comment>
<projects>
</projects>
<buildSpec>
<buildCommand>
<name>json.validation.builder</name>
<arguments>
</arguments>
</buildCommand>
<buildCommand>
<name>org.tizen.web.project.builder.WebBuilder</name>
<arguments>
</arguments>
</buildCommand>
</buildSpec>
<natures>
<nature>json.validation.nature</nature>
<nature>org.eclipse.wst.jsdt.core.jsNature</nature>
<nature>org.tizen.web.project.builder.WebNature</nature>
</natures>
</projectDescription>