10 |
11 |
Top Billed Cast 39 |
40 |${each(cast, (person) => `
${person.profile_path ? `![${]()
` : `
`}
41 | ${escape(person.character)}
42 |${escape(person.name)} 43 |
44 |Not Found
4 |This route doesn't exist.
`; 5 | }); 6 | export { NotFound as default }; 7 | -------------------------------------------------------------------------------- /.svelte-kit/output/server/chunks/ProgressBar-607c37c9.js: -------------------------------------------------------------------------------- 1 | import { c as create_ssr_component, a as add_attribute, b as escape } from "./app-14a936dc.js"; 2 | const ProgressBar = create_ssr_component(($$result, $$props, $$bindings, slots) => { 3 | let { progress } = $$props; 4 | let progress_percent; 5 | let canvas; 6 | if ($$props.progress === void 0 && $$bindings.progress && progress !== void 0) 7 | $$bindings.progress(progress); 8 | progress_percent = progress * 10; 9 | return `
10 |
${escape(progress_percent)}%
${episode_details.id ? `![${]()
11 |
12 |
17 |
18 | ${episode_details.guest_stars.length ? `` : ``}
23 |
24 | ${episode_details.crew.length ? `` : ``}` : ``}
Episode Information
10 |Season: ${escape(episode_details.season_number)} Episode: ${escape(episode_details.episode_number)}
13 |Episode Name: ${escape(episode_details.name)}
14 |Air Date: ${escape(episode_details.air_date)}
15 |Overview:
16 |${escape(episode_details.overview)}
Guest Stars
19 |${each(episode_details.guest_stars, (guest_star) => `![${]()
20 | `)}
Character ${escape(guest_star.character)}
21 |Name ${escape(guest_star.name)}
22 |Crew
25 |${each(episode_details.crew, (crew_member) => `![${]()
26 | `)}
${escape(crew_member.job)}
27 |${escape(crew_member.name)}
28 |Movies 21 |
22 |${each(films, (movie) => ``)}
` : ``}
27 | ${tv ? `TV 28 |
29 |${each(tv, (show) => ``)}
` : ``}${person.profile_path ? `![${]()
` : ``}
44 |
56 |
57 | ${escape(person.name)}
45 |Personal Info
46 |Known For
47 |${escape(person.known_for_department)}
48 |Gender
49 | ${person.gender === 2 ? `Male
` : `Female
`} 50 |Birthdate
51 | ${person.birthday ? `${escape(person.birthday)}
` : `Unknown
`} 52 |Place of Birth
53 | ${person.place_of_birth ? `${escape(person.place_of_birth)}
` : `Unknown
`} 54 | ${person.also_known_as && person.also_known_as.length ? `Also Known As
55 | ${each(person.also_known_as, (alias) => `${escape(alias)}
`)}` : ``}${escape(person.name)}
58 |Biography
59 |${escape(person.biography)}
Known For
61 | ${validate_component(KnownFor, "KnownFor").$$render($$result, { knownFor }, {}, {})}${escape(movie_details.title)} 26 | ${escape(movie_details.release_date ? movie_details.release_date.substring(0, 4) : "")}
27 |${escape(movie_details.release_date ? movie_details.release_date : "No Date Available")}
28 | \u2022
29 | ${each(movie_details.genres, ({ id, name }, i) => `${escape(name)}
30 | ${i !== movie_details.genres.length - 1 ? `|` : ``}`)}
31 | ${"runtime" in movie_details ? `\u2022${escape((movie_details.runtime - movie_details.runtime % 60) / 60)}h ${escape(movie_details.runtime % 60)}m
32 |
` : ``}${movie_details.vote_average ? ``}
36 | ${validate_component(ProgressBar, "ProgressBar").$$render($$result, { progress: movie_details.vote_average }, {}, {})}
` : ``}
34 | ${trailer_id !== 999 ? `
35 |
` : `Play Trailer
No Trailer Available
${escape(movie_details.tagline)}
37 | Overview
38 |${escape(movie_details.overview)}
${season_details.id ? `![${]()
15 |
20 |
21 | Season Information
14 | ${each(season_details.episodes, (episode) => `${escape(episode.name)}
16 |Air Date: ${escape(episode.air_date)}
17 |Overview:
18 |${escape(episode.overview)}
19 |${escape(title)}
24 | 25 |${escape(message)}
26 | 27 | ${error.stack ? ` 28 |This page does not exist
29 | 30 |${escape(error.stack)}` : ``}`;
31 | });
32 | export { _error as default, load };
33 |
--------------------------------------------------------------------------------
/.svelte-kit/output/server/chunks/apiCalls-537263b8.js:
--------------------------------------------------------------------------------
1 |
2 |
--------------------------------------------------------------------------------
/.svelte-kit/output/server/chunks/getCast-7cf0533a.js:
--------------------------------------------------------------------------------
1 | const api = "61e588d14c9ac42a437e560cc3d65659";
2 | const post = async (request) => {
3 | try {
4 | const api_url = `https://api.themoviedb.org/3/${request.body["media"]}/${request.body["id"]}/credits?api_key=${api}&language=en-US`;
5 | const res_mov = await fetch(api_url);
6 | const res = await res_mov.json();
7 | return {
8 | body: JSON.stringify({ res })
9 | };
10 | } catch (e) {
11 | console.log("error", e);
12 | }
13 | };
14 | export { post };
15 |
--------------------------------------------------------------------------------
/.svelte-kit/output/server/chunks/getEpisode-3741fea8.js:
--------------------------------------------------------------------------------
1 | const api = "61e588d14c9ac42a437e560cc3d65659";
2 | const post = async (request) => {
3 | try {
4 | const api_url = `https://api.themoviedb.org/3/tv/${request.body["id"]}/season/${request.body["season_number"]}/episode/${request.body["episode_number"]}?api_key=${api}&language=en-US`;
5 | const res_api = await fetch(api_url);
6 | const res = await res_api.json();
7 | return {
8 | body: JSON.stringify({ res })
9 | };
10 | } catch (e) {
11 | console.log("error", e);
12 | }
13 | };
14 | export { post };
15 |
--------------------------------------------------------------------------------
/.svelte-kit/output/server/chunks/getKnownFor-737a4ce8.js:
--------------------------------------------------------------------------------
1 | const api = "61e588d14c9ac42a437e560cc3d65659";
2 | const post = async (request) => {
3 | try {
4 | const api_url = `https://api.themoviedb.org/3/person/${request.body["person"]}/combined_credits?api_key=${api}&language=en-US`;
5 | const res_mov = await fetch(api_url);
6 | const res = await res_mov.json();
7 | return {
8 | body: JSON.stringify({ res })
9 | };
10 | } catch (e) {
11 | console.log("error", e);
12 | }
13 | };
14 | export { post };
15 |
--------------------------------------------------------------------------------
/.svelte-kit/output/server/chunks/getMovie-dfbada3a.js:
--------------------------------------------------------------------------------
1 | const api = "61e588d14c9ac42a437e560cc3d65659";
2 | const post = async (request) => {
3 | try {
4 | const api_url = `https://api.themoviedb.org/3/${request.body["media"]}/${request.body["id"]}?api_key=${api}&language=en-US`;
5 | const res_mov = await fetch(api_url);
6 | const res = await res_mov.json();
7 | return {
8 | body: JSON.stringify({ res })
9 | };
10 | } catch (e) {
11 | console.log("error", e);
12 | }
13 | };
14 | export { post };
15 |
--------------------------------------------------------------------------------
/.svelte-kit/output/server/chunks/getMovieGenres-3625ddfd.js:
--------------------------------------------------------------------------------
1 | const api = "61e588d14c9ac42a437e560cc3d65659";
2 | const GENRES_MOVIE_API = `https://api.themoviedb.org/3/genre/movie/list?api_key=${api}&language-en-GB`;
3 | const get = async () => {
4 | try {
5 | const response = await fetch(GENRES_MOVIE_API);
6 | const response_json = await response.json();
7 | const movie_genres = response_json.genres;
8 | return {
9 | body: JSON.stringify({ movie_genres })
10 | };
11 | } catch (e) {
12 | console.log("error", e);
13 | }
14 | };
15 | export { get };
16 |
--------------------------------------------------------------------------------
/.svelte-kit/output/server/chunks/getMovieGenres-daf20458.js:
--------------------------------------------------------------------------------
1 | const api = "61e588d14c9ac42a437e560cc3d65659";
2 | const GENRES_MOVIE_API = `https://api.themoviedb.org/3/genre/movie/list?api_key=${api}&language-en-GB`;
3 | const get = async () => {
4 | try {
5 | const response = await fetch(GENRES_MOVIE_API);
6 | const response_json = await response.json();
7 | const movie_genres = response_json.genres;
8 | return {
9 | body: JSON.stringify({ movie_genres })
10 | };
11 | } catch (e) {
12 | console.log("error", e);
13 | }
14 | };
15 | export { get };
16 |
--------------------------------------------------------------------------------
/.svelte-kit/output/server/chunks/getPerson-73622a35.js:
--------------------------------------------------------------------------------
1 | const api = "61e588d14c9ac42a437e560cc3d65659";
2 | const post = async (request) => {
3 | try {
4 | const api_url = `https://api.themoviedb.org/3/${request.body["media"]}/${request.body["id"]}/credits?api_key=${api}&language=en-US`;
5 | const res_mov = await fetch(api_url);
6 | const res = await res_mov.json();
7 | return {
8 | body: JSON.stringify({ res })
9 | };
10 | } catch (e) {
11 | console.log("error", e);
12 | }
13 | };
14 | export { post };
15 |
--------------------------------------------------------------------------------
/.svelte-kit/output/server/chunks/getSearch-b70547a7.js:
--------------------------------------------------------------------------------
1 | const api = "61e588d14c9ac42a437e560cc3d65659";
2 | const post = async (request) => {
3 | try {
4 | const api_url = `https://api.themoviedb.org/3/search/${request.body["media"]}?api_key=${api}&language=en-US&page=${request.body["page"]}&include_adult=false&query=${request.body["query"]}`;
5 | const res_mov = await fetch(api_url);
6 | const res = await res_mov.json();
7 | return {
8 | body: JSON.stringify({ res })
9 | };
10 | } catch (e) {
11 | console.log("error", e);
12 | }
13 | };
14 | export { post };
15 |
--------------------------------------------------------------------------------
/.svelte-kit/output/server/chunks/getSeason-d3cb4046.js:
--------------------------------------------------------------------------------
1 | const api = "61e588d14c9ac42a437e560cc3d65659";
2 | const post = async (request) => {
3 | try {
4 | const api_url = `https://api.themoviedb.org/3/tv/${request.body["id"]}/season/${request.body["season_number"]}?api_key=${api}&language=en-US`;
5 | const res_api = await fetch(api_url);
6 | const res = await res_api.json();
7 | return {
8 | body: JSON.stringify({ res })
9 | };
10 | } catch (e) {
11 | console.log("error", e);
12 | }
13 | };
14 | export { post };
15 |
--------------------------------------------------------------------------------
/.svelte-kit/output/server/chunks/getShow-6a79cddc.js:
--------------------------------------------------------------------------------
1 | const api = "61e588d14c9ac42a437e560cc3d65659";
2 | const post = async (request) => {
3 | try {
4 | const api_url = `https://api.themoviedb.org/3/trending/${request.body["media"]}/week?api_key=${api}&language=en-GB&page=${request.body["page"]}`;
5 | const res_mov = await fetch(api_url);
6 | const res = await res_mov.json();
7 | return {
8 | body: JSON.stringify({ res })
9 | };
10 | } catch (e) {
11 | console.log("error", e);
12 | }
13 | };
14 | export { post };
15 |
--------------------------------------------------------------------------------
/.svelte-kit/output/server/chunks/getShow-f81111d3.js:
--------------------------------------------------------------------------------
1 | const api = "61e588d14c9ac42a437e560cc3d65659";
2 | const post = async (request) => {
3 | try {
4 | const api_url = `https://api.themoviedb.org/3/trending/${request.body["media"]}/week?api_key=${api}&language=en-GB&page=${request.body["page"]}`;
5 | const res_mov = await fetch(api_url);
6 | const res = await res_mov.json();
7 | return {
8 | body: JSON.stringify({ res })
9 | };
10 | } catch (e) {
11 | console.log("error", e);
12 | }
13 | };
14 | export { post };
15 |
--------------------------------------------------------------------------------
/.svelte-kit/output/server/chunks/getShowGenre-bece8541.js:
--------------------------------------------------------------------------------
1 | const api = "61e588d14c9ac42a437e560cc3d65659";
2 | const post = async (request) => {
3 | try {
4 | const api_url = `https://api.themoviedb.org/3/discover/${request.body["media"]}?api_key=${api}&with_genres=${request.body["genre"]}&page=${request.body["page"]}`;
5 | const res_mov = await fetch(api_url);
6 | const res = await res_mov.json();
7 | return {
8 | body: JSON.stringify({ res })
9 | };
10 | } catch (e) {
11 | console.log("error", e);
12 | }
13 | };
14 | export { post };
15 |
--------------------------------------------------------------------------------
/.svelte-kit/output/server/chunks/getTrailer-b36b5a94.js:
--------------------------------------------------------------------------------
1 | const api = "61e588d14c9ac42a437e560cc3d65659";
2 | const post = async (request) => {
3 | try {
4 | const api_url = `https://api.themoviedb.org/3/${request.body["media"]}/${request.body["id"]}/videos?api_key=${api}&language=en-US`;
5 | const res_mov = await fetch(api_url);
6 | const res = await res_mov.json();
7 | return {
8 | body: JSON.stringify({ res })
9 | };
10 | } catch (e) {
11 | console.log("error", e);
12 | }
13 | };
14 | export { post };
15 |
--------------------------------------------------------------------------------
/.svelte-kit/output/server/chunks/getTvGenres-8924ea77.js:
--------------------------------------------------------------------------------
1 | const api = "61e588d14c9ac42a437e560cc3d65659";
2 | const GENRES_TV_API = `https://api.themoviedb.org/3/genre/tv/list?api_key=${api}&language-en-GB`;
3 | const get = async () => {
4 | try {
5 | const response = await fetch(GENRES_TV_API);
6 | const response_json = await response.json();
7 | const tv_genres = response_json.genres;
8 | return {
9 | body: JSON.stringify({ tv_genres })
10 | };
11 | } catch (e) {
12 | console.log("error", e);
13 | }
14 | };
15 | export { get };
16 |
--------------------------------------------------------------------------------
/.svelte-kit/output/server/chunks/getTvGenres-912a2a2a.js:
--------------------------------------------------------------------------------
1 | const api = "61e588d14c9ac42a437e560cc3d65659";
2 | const GENRES_TV_API = `https://api.themoviedb.org/3/genre/tv/list?api_key=${api}&language-en-GB`;
3 | const get = async () => {
4 | try {
5 | const response = await fetch(GENRES_TV_API);
6 | const response_json = await response.json();
7 | const tv_genres = response_json.genres;
8 | return {
9 | body: JSON.stringify({ tv_genres })
10 | };
11 | } catch (e) {
12 | console.log("error", e);
13 | }
14 | };
15 | export { get };
16 |
--------------------------------------------------------------------------------
/.svelte-kit/output/server/chunks/getTvNetworks-3869faf2.js:
--------------------------------------------------------------------------------
1 | const api = "61e588d14c9ac42a437e560cc3d65659";
2 | const TV_NETWORKS_API = `https://api.themoviedb.org/3/watch/providers/tv?api_key=${api}&language=en-US`;
3 | const get = async () => {
4 | try {
5 | const response = await fetch(TV_NETWORKS_API);
6 | const response_json = await response.json();
7 | const tv_network = response_json.results;
8 | return {
9 | body: JSON.stringify({ tv_network })
10 | };
11 | } catch (e) {
12 | console.log("error", e);
13 | }
14 | };
15 | export { get };
16 |
--------------------------------------------------------------------------------
/.svelte-kit/output/server/chunks/index-6445fb8c.js:
--------------------------------------------------------------------------------
1 | import { c as create_ssr_component, s as subscribe, f as set_store_value, v as validate_component } from "./app-14a936dc.js";
2 | import { d as data, s as selected } from "./store-cc224516.js";
3 | import { M as MainSection } from "./MainSection-8f5559a2.js";
4 | import "./ProgressBar-607c37c9.js";
5 | async function load({ fetch }) {
6 | data.set(void 0);
7 | const res = await fetch("./api/getShow", {
8 | headers: { "Content-Type": "application/json" },
9 | method: "POST",
10 | body: JSON.stringify({ media: "movie", page: "1" })
11 | });
12 | const datas = await res.json();
13 | data.set(await datas.res.results);
14 | const total_pages = await datas.res.total_pages;
15 | return { props: { total_pages } };
16 | }
17 | const Routes = create_ssr_component(($$result, $$props, $$bindings, slots) => {
18 | let $selected, $$unsubscribe_selected;
19 | $$unsubscribe_selected = subscribe(selected, (value) => $selected = value);
20 | let { total_pages } = $$props;
21 | set_store_value(selected, $selected = null, $selected);
22 | if ($$props.total_pages === void 0 && $$bindings.total_pages && total_pages !== void 0)
23 | $$bindings.total_pages(total_pages);
24 | $$unsubscribe_selected();
25 | return `${validate_component(MainSection, "MainSection").$$render($$result, { total_pages }, {}, {})}`;
26 | });
27 | export { Routes as default, load };
28 |
--------------------------------------------------------------------------------
/.svelte-kit/output/server/chunks/store-cc224516.js:
--------------------------------------------------------------------------------
1 | import { n as noop, d as safe_not_equal } from "./app-14a936dc.js";
2 | const subscriber_queue = [];
3 | function writable(value, start = noop) {
4 | let stop;
5 | const subscribers = new Set();
6 | function set(new_value) {
7 | if (safe_not_equal(value, new_value)) {
8 | value = new_value;
9 | if (stop) {
10 | const run_queue = !subscriber_queue.length;
11 | for (const subscriber of subscribers) {
12 | subscriber[1]();
13 | subscriber_queue.push(subscriber, value);
14 | }
15 | if (run_queue) {
16 | for (let i = 0; i < subscriber_queue.length; i += 2) {
17 | subscriber_queue[i][0](subscriber_queue[i + 1]);
18 | }
19 | subscriber_queue.length = 0;
20 | }
21 | }
22 | }
23 | }
24 | function update(fn) {
25 | set(fn(value));
26 | }
27 | function subscribe(run, invalidate = noop) {
28 | const subscriber = [run, invalidate];
29 | subscribers.add(subscriber);
30 | if (subscribers.size === 1) {
31 | stop = start(set) || noop;
32 | }
33 | run(value);
34 | return () => {
35 | subscribers.delete(subscriber);
36 | if (subscribers.size === 0) {
37 | stop();
38 | stop = null;
39 | }
40 | };
41 | }
42 | return { set, update, subscribe };
43 | }
44 | const current_page = writable(1);
45 | const media_type = writable("movie");
46 | const selected = writable(null);
47 | const show_name = writable("");
48 | const season_count = writable(0);
49 | const show_id = writable(0);
50 | const data = writable([]);
51 | const tv_genres = writable([]);
52 | const movie_genres = writable([]);
53 | export { media_type as a, show_name as b, current_page as c, data as d, show_id as e, season_count as f, movie_genres as m, selected as s, tv_genres as t, writable as w };
54 |
--------------------------------------------------------------------------------
/.svelte-kit/output/server/chunks/stores-bd543f9c.js:
--------------------------------------------------------------------------------
1 | import { i as getContext } from "./app-14a936dc.js";
2 | const getStores = () => {
3 | const stores = getContext("__svelte__");
4 | return {
5 | page: {
6 | subscribe: stores.page.subscribe
7 | },
8 | navigating: {
9 | subscribe: stores.navigating.subscribe
10 | },
11 | get preloading() {
12 | console.error("stores.preloading is deprecated; use stores.navigating instead");
13 | return {
14 | subscribe: stores.navigating.subscribe
15 | };
16 | },
17 | session: stores.session
18 | };
19 | };
20 | const page = {
21 | subscribe(fn) {
22 | const store = getStores().page;
23 | return store.subscribe(fn);
24 | }
25 | };
26 | export { page as p };
27 |
--------------------------------------------------------------------------------
/CNAME:
--------------------------------------------------------------------------------
1 | tmdb.athena-designs.com
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | ## SvelteKit Movies
2 |
3 | Note: Majority credit for this implementation goes to [WayneMorganUK](https://github.com/WayneMorganUK/sveltekit-movie-app).
4 |
5 | ## please note this app will not work unles you provide your own TMDB api key
6 |
7 | ## adding environment variables
8 |
9 | in dev mode create a .env file similar to the example.
10 | You will need your own [TMDB api key ](https://www.themoviedb.org/faq/api)
11 |
12 |
13 | ## create-svelte
14 |
15 | Everything you need to build a Svelte project, powered by [`create-svelte`](https://github.com/sveltejs/kit/tree/master/packages/create-svelte);
16 |
17 | ## Creating a project
18 |
19 | If you're seeing this, you've probably already done this step. Congrats!
20 |
21 | ```bash
22 | # create a new project in the current directory
23 | npm init svelte@next
24 |
25 | # create a new project in my-app
26 | npm init svelte@next my-app
27 | ```
28 |
29 | > Note: the `@next` is temporary
30 |
31 | ## Developing
32 |
33 | Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
34 |
35 | ```bash
36 | npm run dev
37 |
38 | # or start the server and open the app in a new browser tab
39 | npm run dev -- --open
40 | ```
41 |
42 | ## Building
43 |
44 | Svelte apps are built with _adapters_, which optimise your project for deployment to different environments.
45 |
46 | By default, `npm run build` will generate a Node app that you can run with `node build`. To use a different adapter, add it to the `devDependencies` in `package.json` making sure to specify the version as `next` and update your `svelte.config.cjs` to [specify your chosen adapter](https://kit.svelte.dev/docs#configuration-adapter). The following official adapters are available:
47 |
48 | - [@sveltejs/adapter-node](https://github.com/sveltejs/kit/tree/master/packages/adapter-node)
49 | - [@sveltejs/adapter-static](https://github.com/sveltejs/kit/tree/master/packages/adapter-static)
50 | - [@sveltejs/adapter-netlify](https://github.com/sveltejs/kit/tree/master/packages/adapter-netlify)
51 | - [@sveltejs/adapter-vercel](https://github.com/sveltejs/kit/tree/master/packages/adapter-vercel)
52 | - ...more soon
53 |
54 | [See the adapter documentation for more detail](https://kit.svelte.dev/docs#adapters)
55 |
--------------------------------------------------------------------------------
/netlify.toml:
--------------------------------------------------------------------------------
1 | [build]
2 | command = "npm run build"
3 | publish = "build/"
4 |
5 | [dev]
6 | command = "svelte-kit dev"
7 | framework = "svelte-kit"
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "sveltekit-movie-app",
3 | "version": "0.0.1",
4 | "scripts": {
5 | "dev": "svelte-kit dev",
6 | "build": "svelte-kit build",
7 | "package": "svelte-kit package",
8 | "preview": "svelte-kit preview",
9 | "check": "svelte-check --tsconfig ./tsconfig.json",
10 | "rimraf": "./node_modules/rimraf/bin.js",
11 | "check:watch": "svelte-check --tsconfig ./tsconfig.json --watch",
12 | "lint": "prettier --ignore-path .gitignore --check --plugin-search-dir=. . && eslint --ignore-path .gitignore .",
13 | "format": "prettier --ignore-path .gitignore --write --plugin-search-dir=. ."
14 | },
15 | "devDependencies": {
16 | "@sveltejs/adapter-netlify": "^1.0.0-next.38",
17 | "@sveltejs/adapter-node": "^1.0.0-next.61",
18 | "@sveltejs/adapter-static": "^1.0.0-next.26",
19 | "@sveltejs/kit": "^1.0.0-next.229",
20 | "@tailwindcss/line-clamp": "^0.3.0",
21 | "@types/node": "^17.0.8",
22 | "@typescript-eslint/eslint-plugin": "^5.8.0",
23 | "@typescript-eslint/parser": "^5.8.0",
24 | "autoprefixer": "^10.4.0",
25 | "cssnano": "^5.0.14",
26 | "eslint": "^8.5.0",
27 | "eslint-config-prettier": "^8.3.0",
28 | "eslint-plugin-svelte3": "^3.2.1",
29 | "node-fetch": "^3.1.0",
30 | "postcss": "^8.4.5",
31 | "postcss-load-config": "^3.1.0",
32 | "prettier": "~2.5.1",
33 | "prettier-plugin-svelte": "^2.5.1",
34 | "stream": "^0.0.2",
35 | "svelte": "^3.42.6",
36 | "svelte-preprocess": "^4.9.4",
37 | "tailwindcss": "^3.0.7",
38 | "tslib": "^2.3.1",
39 | "typescript": "^4.5.4",
40 | "vite": "^2.7.7"
41 | },
42 | "type": "module",
43 | "engines": {
44 | "node": ">= 12.17.0"
45 | },
46 | "dependencies": {
47 | "sapper-environment": "^1.0.1"
48 | }
49 | }
50 |
--------------------------------------------------------------------------------
/postcss.config.cjs:
--------------------------------------------------------------------------------
1 | const tailwindcss = require('tailwindcss');
2 | const autoprefixer = require('autoprefixer');
3 | const cssnano = require('cssnano');
4 |
5 | const mode = process.env.NODE_ENV;
6 | const dev = mode === 'development';
7 |
8 | const config = {
9 | plugins: [
10 | //Some plugins, like postcss-nested, need to run before Tailwind,
11 | tailwindcss(),
12 | //But others, like autoprefixer, need to run after,
13 | autoprefixer(),
14 | !dev &&
15 | cssnano({
16 | preset: 'default'
17 | })
18 | ]
19 | };
20 |
21 | module.exports = config;
22 |
--------------------------------------------------------------------------------
/src/app.css:
--------------------------------------------------------------------------------
1 | @tailwind base;
2 | @tailwind components;
3 | @tailwind utilities;
4 |
5 | @layer base {
6 | .light {
7 | --color-text-base: #eae2e2;
8 | --color-text-muted: #ffcf91;
9 | --color-text-inverted: #ffffff;
10 | --color-text-muted-inverted: #d7d7d7;
11 | --color-text-selected: #f19f36;
12 | --color-bg: #938e94;
13 | --color-primary: #5d5c61;
14 | --color-secondary: #7395ae;
15 | --color-tertiary: #557a95;
16 | --color-border: #b0a295;
17 | }
18 |
19 | .dark {
20 | --color-text-base: #09d3ac;
21 | --color-text-muted: #ffffff;
22 | --color-text-inverted: #ececec;
23 | --color-text-muted-inverted: #616161;
24 | --color-text-selected: #ff206e;
25 | --color-bg: #000000;
26 | --color-primary: #424242;
27 | --color-secondary: #393737;
28 | --color-tertiary: #1c1c1c;
29 | --color-border: #303030;
30 | }
31 |
32 | @font-face {
33 | font-family: 'Raleway';
34 | font-weight: 400;
35 | font-style: normal;
36 | unicode-range: U+000-5FF;
37 | src: local('Raleway');
38 | font-display: swap;
39 | }
40 |
41 | h1 {
42 | @apply text-4xl;
43 | }
44 | h2 {
45 | @apply text-3xl;
46 | }
47 | h3 {
48 | @apply text-2xl;
49 | }
50 | h4 {
51 | @apply text-xl;
52 | }
53 | h5 {
54 | @apply text-lg;
55 | }
56 | h6 {
57 | @apply text-base;
58 | }
59 | p {
60 | @apply text-xs;
61 | }
62 | h1,
63 | h2,
64 | h3,
65 | h4,
66 | h5,
67 | h6 {
68 | @apply font-semibold;
69 | }
70 | body {
71 | @apply mx-auto;
72 | @apply bg-skin-bg;
73 | }
74 | }
75 |
76 | html {
77 | overflow-y: scroll;
78 | }
79 |
80 | .root {
81 | display: flex;
82 | flex-direction: column;
83 | }
84 |
--------------------------------------------------------------------------------
/src/app.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | %svelte.head%
8 |
9 |
10 | %svelte.body%
11 |
12 |
13 |
--------------------------------------------------------------------------------
/src/global.d.ts:
--------------------------------------------------------------------------------
1 | /// 14 | Top Billed Cast 15 |
16 |
19 | {#each cast as person}
20 |
51 | {/each}
52 |
53 |
7 |
55 |
--------------------------------------------------------------------------------
/src/lib/components/Header.svelte:
--------------------------------------------------------------------------------
1 |
14 |
15 |
8 |
54 |
9 |
31 | 10 | Movies 11 |
12 | 13 |-
14 | {#each $movie_genres as genre}
15 |
- 16 | 27 | 28 | {/each} 29 |
32 |
53 | 33 | Tv 34 |
35 | 36 |-
37 | {#each $tv_genres as genre}
38 |
- 39 | 49 | 50 | {/each} 51 |
17 |
31 |
18 |
26 |
28 |
14 |
33 |
34 |
15 | 
17 |
30 |
32 |
18 |
26 | 20 | {datum.title} 21 |
22 |23 | {datum.release_date ? datum.release_date.substring(0, 4) : '-'} 24 |
25 |
27 |
29 |
31 |
33 |
--------------------------------------------------------------------------------
/src/lib/components/PersonCard.svelte:
--------------------------------------------------------------------------------
1 |
5 |
6 | {page_title}
32 |
14 |
20 |
21 | 17 | {datum.name} 18 |
19 |
10 |
26 |
--------------------------------------------------------------------------------
/src/lib/components/TvCard.svelte:
--------------------------------------------------------------------------------
1 |
8 |
9 |
11 |
25 | {$show_name}
12 |
13 |
24 | Season
14 | {#each season_details as season} 15 | ${season.season_number} 21 | 22 | {/each} 23 |
14 | {#if episode_details.id}
15 |
91 | Episode Information
16 |
17 |
35 |
36 | {#if episode_details.guest_stars.length}
37 |
18 | 
25 |
26 |
27 |
28 |
34 | Season: {episode_details.season_number} Episode: {episode_details.episode_number}
29 |Episode Name: {episode_details.name}
30 |Air Date: {episode_details.air_date}
31 |Overview:
32 |{episode_details.overview}
33 |
38 |
61 | {/if}
62 |
63 | {#if episode_details.crew.length}
64 | Guest Stars
39 |
42 | {#each episode_details.guest_stars as guest_star}
43 |
58 | {/each}
59 |
60 |
65 |
88 | {/if}
89 | {/if}
90 | Crew
66 |
69 | {#each episode_details.crew as crew_member}
70 |
85 | {/each}
86 |
87 |
37 |
118 |
40 |
117 |
41 | 
48 |
49 |
50 |
116 |
51 |
85 | 52 | {movie_details.title} 53 | 54 | {movie_details.release_date ? movie_details.release_date.substring(0, 4) : ''} 55 | 56 |
57 | {#if movie_details.vote_average} 58 |
61 |
63 | {/if}
64 |
65 |
66 |
84 |
67 | {movie_details.release_date ? movie_details.release_date : 'No Date Available'}
68 | •
69 |
70 |
71 | {#each movie_details.genres as { id, name }, i}
72 | {name}
73 | {#if i !== movie_details.genres.length - 1}|{/if}
74 | {/each}
75 |
76 | {#if 'runtime' in movie_details}
77 |
78 | •{(movie_details.runtime -
79 | (movie_details.runtime % 60)) /
80 | 60}h {movie_details.runtime % 60}m
81 |
82 | {/if}
83 |
88 | {#if trailer_details.length > 0}
89 | {#each trailer_details as trailer}
90 |
110 |
91 |
101 |
102 | {/each}
103 |
104 | {:else}
105 |
106 |
108 | {/if}
109 | No Trailer Available
107 |
111 |
115 | {movie_details.tagline}
112 | Overview
113 |{movie_details.overview}
114 |
10 |
76 |
13 | {#if person.profile_path}
14 | 
19 | {:else}
20 | 
25 | {/if}
26 |
57 |
58 |
25 | {/if}
26 | {person.name}
27 |
28 |
56 | Personal Info
29 |Known For
30 |{person.known_for_department}
31 |Gender
32 | {#if person.gender === 2} 33 |Male
34 | {:else} 35 |Female
36 | {/if} 37 |Birthdate
38 | {#if person.birthday} 39 |{person.birthday}
40 | {:else} 41 |Unknown
42 | {/if} 43 |Place of Birth
44 | {#if person.place_of_birth} 45 |{person.place_of_birth}
46 | {:else} 47 |Unknown
48 | {/if} 49 | {#if person.also_known_as && person.also_known_as.length} 50 |Also Known As
51 | {#each person.also_known_as as alias} 52 |{alias}
53 | {/each} 54 | {/if} 55 |
61 |
67 |
62 |
66 | {person.name}
63 |Biography
64 |{person.biography}
65 |
70 |
75 |
71 |
74 | Known For
72 |
15 | {#if season_details.id}
16 |
43 |
44 | Season Information
17 | {#each season_details.episodes as episode} 18 | 40 | {/each} 41 | {/if} 42 |
48 |
121 |
51 |
120 |
52 | 
59 |
60 |
61 |
119 |
62 |
88 | 63 | {tv_details.name} 64 | 65 | {tv_details ? tv_details.first_air_date.substring(0, 4) : ''} 66 | 67 |
68 | {#if tv_details.vote_average} 69 |
72 |
74 | {/if}
75 |
76 |
87 |
77 | {'first_air_date' in tv_details ? tv_details.first_air_date : 'No Date Available'}
78 | •
79 |
80 |
81 | {#each tv_details.genres as { id, name }, i}
82 | {name}
83 | {#if i !== tv_details.genres.length - 1}|{/if}
84 | {/each}
85 |
86 |
91 | {#if trailer_details.length > 0}
92 | {#each trailer_details as trailer}
93 |
113 |
94 |
104 |
105 | {/each}
106 |
107 | {:else}
108 |
109 |
111 | {/if}
112 | No Trailer Available
110 |
114 |
118 | {tv_details.tagline}
115 | Overview
116 |{tv_details.overview}
117 | 27 | Movies 28 |
29 |
32 | {#each films as movie}
33 |
52 | {/each}
53 |
54 | {/if}
55 | {#if tv}
56 | 57 | TV 58 |
59 |
62 | {#each tv as show}
63 |
82 | {/each}
83 |
84 | {/if}
85 |
16 | {#if $video_site === 'YouTube'}
17 |
27 | {:else if $video_site === 'Vimeo'}
28 |
36 | {/if}
37 |
38 |
39 | hide()}
42 | >
43 |
44 |
45 |
9 |
--------------------------------------------------------------------------------
/src/lib/utilities/Pagination.svelte:
--------------------------------------------------------------------------------
1 |
61 |
62 | {#if total_pages > 1}
63 |
67 | {#each pages as page}
68 | {#if $current_page === page}
69 |
75 | {:else if page === LEFT_PAGE}
76 |
83 | {:else if page === pages[0]}
84 |
90 | {:else if page === pages[0]}
91 |
97 | {:else if page === pages[pages.length - 1]}
98 |
104 | {:else if page === RIGHT_PAGE}
105 |
112 | {:else}
113 |
119 | {/if}
120 | {/each}
121 |
122 |
41 |
50 |
42 |
43 |
49 |
44 |
48 | 45 | {progress_percent}% 46 |
47 |
11 |
37 |
38 |
39 |
57 | Season Information
12 | {#each tv_details.seasons as episode} 13 | 35 | {/each} 36 |
20 |
35 |
36 |
21 |
33 |
34 |
37 |
52 |
53 |
38 |
50 |
51 |
54 |
69 | {#key $selected}
70 |
55 |
67 |
68 |
71 |
89 | {/key}
90 |
--------------------------------------------------------------------------------
/src/lib/utilities/Skeleton.svelte:
--------------------------------------------------------------------------------
1 | {#each Array(20) as _}
2 |
72 |
82 |
87 |
88 |
4 |
5 |
10 |
6 |
7 |
8 |
9 |
4 |
5 |
6 |
7 |
8 | Not Found
2 |This route doesn't exist.
3 | -------------------------------------------------------------------------------- /src/routes/__error.svelte: -------------------------------------------------------------------------------- 1 | 11 | 12 | 20 | 21 |{title}
26 | 27 |{message}
28 | 29 | {#if error.stack} 30 | 31 |This page does not exist
32 | 33 |{error.stack}
34 | {/if}
35 |
36 |
55 |
--------------------------------------------------------------------------------
/src/routes/__layout.svelte:
--------------------------------------------------------------------------------
1 |
18 |
19 |
25 |
26 | element in src/app.html
21 | target: '#svelte'
22 | }
23 | };
24 |
25 | export default config;
26 |
--------------------------------------------------------------------------------
/tailwind.config.cjs:
--------------------------------------------------------------------------------
1 | const plugin = require('tailwindcss/plugin');
2 | const config = {
3 | content: ['./src/**/*.{html,js,svelte,ts}'],
4 | theme: {
5 | extend: {
6 | borderColor: {
7 | skin: {
8 | border: 'var(--color-border)'
9 | }
10 | },
11 | fill: {
12 | current: 'currentColor'
13 | },
14 | textColor: {
15 | skin: {
16 | base: 'var(--color-text-base)',
17 | muted: 'var(--color-text-muted)',
18 | inverted: 'var(--color-text-inverted)',
19 | selected: 'var(--color-text-selected)',
20 | mutedinverted: 'var(--color-text-muted-inverted)'
21 | }
22 | },
23 | backgroundColor: {
24 | skin: {
25 | primary: 'var(--color-primary)',
26 | secondary: 'var(--color-secondary)',
27 | tertiary: 'var(--color-tertiary)',
28 | bg: 'var(--color-bg)',
29 | border: 'var(--color-border)',
30 | selected: 'var(--color-selected)'
31 | }
32 | },
33 | gradientColorStops: {
34 | skin: {
35 | primary: 'var(--color-primary)',
36 | secondary: 'var(--color-secondary)',
37 | tertiary: 'var(--color-tertiary)',
38 | bg: 'var(--color-bg)',
39 | border: 'var(--color-border)'
40 | }
41 | },
42 | fontFamily: {
43 | body: ['Raleway']
44 | },
45 |
46 | spacing: {
47 | 5: '1.125rem',
48 | 18: '4.5rem',
49 | 42: '10.5rem',
50 | 66: '16.5rem',
51 | 72: '18rem',
52 | 90: '22.5rem',
53 | 100: '25rem',
54 | 104: '26rem',
55 | 108: '27rem',
56 | 112: '28rem',
57 | 120: '30rem',
58 | '16/9': '56.25%'
59 | },
60 | scale: {
61 | 60: '0.6',
62 | 44: '0.44'
63 | },
64 | gridTemplateRows: {
65 | auto: 'repeat(auto-fill, minmax(0,auto))'
66 | }
67 | }
68 | },
69 | plugins: [
70 | plugin(function ({ addUtilities }) {
71 | const newUtilities = {
72 | '.preserve-3d': {
73 | 'transform-style': 'preserve-3d'
74 | },
75 | '.perspective-1000': {
76 | perspective: '1000px'
77 | },
78 | '.backface-hidden': {
79 | 'backface-visibility': 'hidden'
80 | },
81 | '.rotate-y-0': {
82 | transform: 'rotateY(0deg)'
83 | },
84 | '.rotate-y-180': {
85 | transform: 'rotateY(180deg)'
86 | }
87 | };
88 |
89 | addUtilities(newUtilities, ['group-hover']);
90 | }),
91 | require('@tailwindcss/line-clamp')
92 | ]
93 | };
94 |
95 | module.exports = config;
96 |
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "moduleResolution": "node",
4 | "module": "es2020",
5 | "lib": ["es2020", "DOM"],
6 | "target": "es2019",
7 | /**
8 | svelte-preprocess cannot figure out whether you have a value or a type, so tell TypeScript
9 | to enforce using \`import type\` instead of \`import\` for Types.
10 | */
11 | "importsNotUsedAsValues": "error",
12 | "isolatedModules": true,
13 | "resolveJsonModule": true,
14 | /**
15 | To have warnings/errors of the Svelte compiler at the correct position,
16 | enable source maps by default.
17 | */
18 | "sourceMap": true,
19 | "esModuleInterop": true,
20 | "skipLibCheck": true,
21 | "forceConsistentCasingInFileNames": true,
22 | "baseUrl": ".",
23 | "allowJs": true,
24 | "checkJs": true,
25 | "paths": {
26 | "$lib": ["src/lib"],
27 | "$lib/*": ["src/lib/*"],
28 | "$stores":["src/lib/stores"],
29 | "$api":["src/routes/api"],
30 | "$api/*":["src/routes/api/*"]
31 | }
32 | },
33 | "include": ["src/**/*.d.ts", "src/**/*.js", "src/**/*.ts", "src/**/*.svelte"]
34 | }
35 |
--------------------------------------------------------------------------------