diff --git a/package-lock.json b/package-lock.json index f0dff1c..a099071 100644 --- a/package-lock.json +++ b/package-lock.json @@ -14,7 +14,8 @@ "hls.js": "^1.4.6", "openapi-fetch": "^0.2.1", "radix-icons-svelte": "^1.2.1", - "svelte-apollo": "^0.5.0" + "svelte-apollo": "^0.5.0", + "tailwind-scrollbar-hide": "^1.1.7" }, "devDependencies": { "@fontsource/fira-mono": "^4.5.10", @@ -7752,6 +7753,11 @@ "node": ">=0.10" } }, + "node_modules/tailwind-scrollbar-hide": { + "version": "1.1.7", + "resolved": "https://registry.npmjs.org/tailwind-scrollbar-hide/-/tailwind-scrollbar-hide-1.1.7.tgz", + "integrity": "sha512-X324n9OtpTmOMqEgDUEA/RgLrNfBF/jwJdctaPZDzB3mppxJk7TLIDmOreEDm1Bq4R9LSPu4Epf8VSdovNU+iA==" + }, "node_modules/tailwindcss": { "version": "3.3.2", "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.3.2.tgz", diff --git a/package.json b/package.json index 310bf65..c4d46f5 100644 --- a/package.json +++ b/package.json @@ -52,6 +52,7 @@ "hls.js": "^1.4.6", "openapi-fetch": "^0.2.1", "radix-icons-svelte": "^1.2.1", - "svelte-apollo": "^0.5.0" + "svelte-apollo": "^0.5.0", + "tailwind-scrollbar-hide": "^1.1.7" } } diff --git a/src/lib/tmdb-api.ts b/src/lib/tmdb-api.ts index d355127..61421e7 100644 --- a/src/lib/tmdb-api.ts +++ b/src/lib/tmdb-api.ts @@ -1,5 +1,6 @@ import axios from 'axios'; import { PUBLIC_TMDB_API_KEY } from '$env/static/public'; +import { request } from '$lib/utils'; export const TmdbApi = axios.create({ baseURL: 'https://api.themoviedb.org/3', @@ -8,17 +9,6 @@ export const TmdbApi = axios.create({ } }); -export async function fetchFullMovieDetails(tmdbId: string): Promise { - return { - ...(await fetchTmdbMovie(tmdbId)), - videos: await fetchTmdbMovieVideos(tmdbId), - images: await fetchTmdbMovieImages(tmdbId), - credits: await TmdbApi.get('/movie/' + tmdbId + '/credits').then( - (res) => res.data.cast - ) - }; -} - export const fetchTmdbMovie = async (tmdbId: string): Promise => await TmdbApi.get('/movie/' + tmdbId).then((r) => r.data); @@ -31,6 +21,12 @@ export const fetchTmdbMovieImages = async (tmdbId: string): Promise => await TmdbApi.get('/movie/' + tmdbId + '/credits').then((res) => res.data.cast); +export const requestTmdbPopularMovies = () => + request( + () => TmdbApi.get('/movie/popular').then((res) => res.data.results), + null + ); + export interface TmdbMovieFull extends TmdbMovie { videos: Video[]; images: { @@ -208,3 +204,27 @@ export interface MultiSearchResult { vote_average: number; vote_count: number; } + +export interface PopularMoviesResponse { + page: number; + results: PopularMovieResult[]; + total_pages: number; + total_results: number; +} + +export interface PopularMovieResult { + adult: boolean; + backdrop_path: string; + genre_ids: number[]; + id: number; + original_language: string; + original_title: string; + overview: string; + popularity: number; + poster_path: string; + release_date: string; + title: string; + video: boolean; + vote_average: number; + vote_count: number; +} diff --git a/src/lib/utils.ts b/src/lib/utils.ts index 9ac531c..3f27009 100644 --- a/src/lib/utils.ts +++ b/src/lib/utils.ts @@ -23,10 +23,10 @@ export function formatSize(size: number) { } } -export function request(fetcher: (arg: A) => Promise, args: A | undefined = undefined) { +export function request(fetcher: (arg: A) => Promise, args: A | undefined = undefined) { const loading = writable(args !== undefined); const error = writable(null); - const data = writable(null); + const data = writable(null); const didLoad = writable(false); async function load(arg: A) { @@ -45,7 +45,7 @@ export function request(fetcher: (arg: A) => Promise, args: A | undefin }); } - if (args) { + if (args !== undefined) { load(args); } diff --git a/src/routes/components/Card/Card.svelte b/src/routes/components/Card/Card.svelte index 35b69e1..ff33f1f 100644 --- a/src/routes/components/Card/Card.svelte +++ b/src/routes/components/Card/Card.svelte @@ -38,7 +38,7 @@ {:else}
+
diff --git a/src/routes/components/Carousel/Carousel.svelte b/src/routes/components/Carousel/Carousel.svelte new file mode 100644 index 0000000..3c6b2bc --- /dev/null +++ b/src/routes/components/Carousel/Carousel.svelte @@ -0,0 +1,37 @@ + + +
+ +
+ + + + + + +
+
+ +
+
(scrollX = carousel.scrollLeft)} + > + +
+ {#if scrollX > 0} +
+ {/if} +
+
diff --git a/src/routes/components/Carousel/CarouselPlaceholderItems.svelte b/src/routes/components/Carousel/CarouselPlaceholderItems.svelte new file mode 100644 index 0000000..f66d094 --- /dev/null +++ b/src/routes/components/Carousel/CarouselPlaceholderItems.svelte @@ -0,0 +1,7 @@ + + +{#each Array(10) as _, i (i)} + +{/each} diff --git a/src/routes/components/IconButton.svelte b/src/routes/components/IconButton.svelte index 0a7721e..b8480e8 100644 --- a/src/routes/components/IconButton.svelte +++ b/src/routes/components/IconButton.svelte @@ -1,3 +1,6 @@ -
+
diff --git a/src/routes/components/Modal/Modal.svelte b/src/routes/components/Modal/Modal.svelte index ba40def..dec85ae 100644 --- a/src/routes/components/Modal/Modal.svelte +++ b/src/routes/components/Modal/Modal.svelte @@ -1,19 +1,20 @@ -
- -
+{#if visible} +
+ +
+{/if} diff --git a/src/routes/components/Modal/ModalContent.svelte b/src/routes/components/Modal/ModalContent.svelte index 32ee854..b91a9cb 100644 --- a/src/routes/components/Modal/ModalContent.svelte +++ b/src/routes/components/Modal/ModalContent.svelte @@ -1,9 +1,10 @@ - - - +
diff --git a/src/routes/components/ResourceDetails/ResourceDetails.svelte b/src/routes/components/ResourceDetails/ResourceDetails.svelte index cf1bca0..f81d0c0 100644 --- a/src/routes/components/ResourceDetails/ResourceDetails.svelte +++ b/src/routes/components/ResourceDetails/ResourceDetails.svelte @@ -179,7 +179,9 @@ in:fly={{ x: -20, duration: 200, delay: 600 }} >
- +
+ +