From f68c8148d8fde3ca1478236f761f8670da6fa744 Mon Sep 17 00:00:00 2001 From: adrifcastr Date: Fri, 23 Jun 2023 14:20:04 +0200 Subject: [PATCH 1/6] fix poster path --- src/backend/metadata/getmeta.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/backend/metadata/getmeta.ts b/src/backend/metadata/getmeta.ts index c09d8292..3893db53 100644 --- a/src/backend/metadata/getmeta.ts +++ b/src/backend/metadata/getmeta.ts @@ -73,7 +73,7 @@ export function formatTMDBMetaResult( season_number: v.season_number, title: v.name, })), - poster: (details as TMDBMovieData).poster_path ?? undefined, + poster: getMediaPoster(show.poster_path) ?? undefined, original_release_year: new Date(show.first_air_date).getFullYear(), }; } From fcf8a9e755ecc3bdc91d5d3c4dd4caee8ac05261 Mon Sep 17 00:00:00 2001 From: mrjvs Date: Fri, 23 Jun 2023 21:58:33 +0200 Subject: [PATCH 2/6] update configuration documentation --- SELFHOSTING.md | 3 ++- example.env | 5 +---- public/config.js | 3 +-- src/backend/metadata/tmdb.ts | 2 +- src/index.tsx | 3 ++- src/setup/config.ts | 43 ++++++++++++++++++------------------ 6 files changed, 28 insertions(+), 31 deletions(-) diff --git a/SELFHOSTING.md b/SELFHOSTING.md index 7137be1f..926322d6 100644 --- a/SELFHOSTING.md +++ b/SELFHOSTING.md @@ -32,7 +32,8 @@ Your proxy is now hosted on cloudflare. Note the url of your worker. you will ne 4. Put your cloudflare proxy URL inbetween the double qoutes of `VITE_CORS_PROXY_URL: "",`. Make sure to not have a slash at the end of your URL. Example (THIS IS MINE, IT WONT WORK FOR YOU): `VITE_CORS_PROXY_URL: "https://test-proxy.test.workers.dev",` -5. Save the file +5. Put your TMDB read access token inside the quotes of `VITE_TMDB_API_KEY: "",`. You can generate it for free at [https://www.themoviedb.org/settings/api](https://www.themoviedb.org/settings/api). +6. Save the file Your client has been prepared, you can now host it on any webhost. It doesn't require php, its just a standard static page. diff --git a/example.env b/example.env index 5416f0f1..d191d741 100644 --- a/example.env +++ b/example.env @@ -1,6 +1,3 @@ # make sure the cors proxy url does NOT have a slash at the end VITE_CORS_PROXY_URL=... - -# the keys below are optional - defaults are provided -VITE_TMDB_API_KEY=... -VITE_OMDB_API_KEY=... +VITE_TMDB_READ_API_KEY=... diff --git a/public/config.js b/public/config.js index b69f60eb..abd72baf 100644 --- a/public/config.js +++ b/public/config.js @@ -1,6 +1,5 @@ window.__CONFIG__ = { // url must NOT end with a slash VITE_CORS_PROXY_URL: "", - VITE_TMDB_API_KEY: "b030404650f279792a8d3287232358e3", - VITE_OMDB_API_KEY: "aa0937c0", + TMDB_READ_API_KEY: "" }; diff --git a/src/backend/metadata/tmdb.ts b/src/backend/metadata/tmdb.ts index 1c442028..9b38d995 100644 --- a/src/backend/metadata/tmdb.ts +++ b/src/backend/metadata/tmdb.ts @@ -99,7 +99,7 @@ const baseURL = "https://api.themoviedb.org/3"; const headers = { accept: "application/json", - Authorization: `Bearer ${conf().TMDB_API_KEY}`, + Authorization: `Bearer ${conf().TMDB_READ_API_KEY}`, }; async function get(url: string, params?: object): Promise { diff --git a/src/index.tsx b/src/index.tsx index 36b1fb14..839d7a90 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -7,7 +7,7 @@ import { registerSW } from "virtual:pwa-register"; import { ErrorBoundary } from "@/components/layout/ErrorBoundary"; import App from "@/setup/App"; -import { conf } from "@/setup/config"; +import { assertConfig, conf } from "@/setup/config"; import i18n from "@/setup/i18n"; import "@/setup/ga"; @@ -30,6 +30,7 @@ registerSW({ }); const LazyLoadedApp = React.lazy(async () => { + await assertConfig(); await initializeStores(); i18n.changeLanguage(SettingsStore.get().language ?? "en"); return { diff --git a/src/setup/config.ts b/src/setup/config.ts index f1db01da..a7d9067b 100644 --- a/src/setup/config.ts +++ b/src/setup/config.ts @@ -4,8 +4,7 @@ interface Config { APP_VERSION: string; GITHUB_LINK: string; DISCORD_LINK: string; - OMDB_API_KEY: string; - TMDB_API_KEY: string; + TMDB_READ_API_KEY: string; CORS_PROXY_URL: string; NORMAL_ROUTER: boolean; } @@ -14,15 +13,13 @@ export interface RuntimeConfig { APP_VERSION: string; GITHUB_LINK: string; DISCORD_LINK: string; - OMDB_API_KEY: string; - TMDB_API_KEY: string; + TMDB_READ_API_KEY: string; NORMAL_ROUTER: boolean; PROXY_URLS: string[]; } const env: Record = { - OMDB_API_KEY: import.meta.env.VITE_OMDB_API_KEY, - TMDB_API_KEY: import.meta.env.VITE_TMDB_API_KEY, + TMDB_READ_API_KEY: import.meta.env.VITE_TMDB_READ_API_KEY, APP_VERSION: undefined, GITHUB_LINK: undefined, DISCORD_LINK: undefined, @@ -30,25 +27,28 @@ const env: Record = { NORMAL_ROUTER: import.meta.env.VITE_NORMAL_ROUTER, }; -const alerts = [] as string[]; - // loads from different locations, in order: environment (VITE_{KEY}), window (public/config.js) -function getKey(key: keyof Config, defaultString?: string): string { +function getKeyValue(key: keyof Config): string | undefined { let windowValue = (window as any)?.__CONFIG__?.[`VITE_${key}`]; if (windowValue !== undefined && windowValue.length === 0) windowValue = undefined; - const value = env[key] ?? windowValue ?? undefined; - if (value === undefined) { - if (defaultString) return defaultString; - if (!alerts.includes(key)) { - // eslint-disable-next-line no-alert - window.alert(`Misconfigured instance, missing key: ${key}`); - alerts.push(key); - } - return ""; - } + return env[key] ?? windowValue ?? undefined; +} - return value; +function getKey(key: keyof Config, defaultString?: string): string { + return getKeyValue(key) ?? defaultString ?? ""; +} + +export function assertConfig() { + const keys: Array = ["TMDB_READ_API_KEY", "CORS_PROXY_URL"]; + const values = keys.map((key) => { + const val = getKeyValue(key); + if (val) return val; + // eslint-disable-next-line no-alert + window.alert(`Misconfigured instance, missing key: ${key}`); + return val; + }); + if (values.includes(undefined)) throw new Error("Misconfigured instance"); } export function conf(): RuntimeConfig { @@ -56,8 +56,7 @@ export function conf(): RuntimeConfig { APP_VERSION, GITHUB_LINK, DISCORD_LINK, - OMDB_API_KEY: getKey("OMDB_API_KEY"), - TMDB_API_KEY: getKey("TMDB_API_KEY"), + TMDB_READ_API_KEY: getKey("TMDB_READ_API_KEY"), PROXY_URLS: getKey("CORS_PROXY_URL") .split(",") .map((v) => v.trim()), From 6aa0c86e42d0a5821d702842aaf941d984ded7a4 Mon Sep 17 00:00:00 2001 From: mrjvs Date: Fri, 23 Jun 2023 21:58:45 +0200 Subject: [PATCH 3/6] bump version --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 3f7c4bf9..025a2844 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "movie-web", - "version": "3.1.0", + "version": "3.1.1", "private": true, "homepage": "https://movie-web.app", "dependencies": { From ea52156bb892400f0f6891505e34bda5c04589d7 Mon Sep 17 00:00:00 2001 From: mrjvs Date: Fri, 23 Jun 2023 23:00:28 +0200 Subject: [PATCH 4/6] fix config.js preset and typo in documentation --- SELFHOSTING.md | 6 +++--- public/config.js | 2 +- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/SELFHOSTING.md b/SELFHOSTING.md index 926322d6..5784b228 100644 --- a/SELFHOSTING.md +++ b/SELFHOSTING.md @@ -29,10 +29,10 @@ Your proxy is now hosted on cloudflare. Note the url of your worker. you will ne 1. Download the file `movie-web.zip` from the latest release: [https://github.com/movie-web/movie-web/releases/latest](https://github.com/movie-web/movie-web/releases/latest) 2. Extract the zip file so you can edit the files. 3. Open `config.js` in notepad, VScode or similar. -4. Put your cloudflare proxy URL inbetween the double qoutes of `VITE_CORS_PROXY_URL: "",`. Make sure to not have a slash at the end of your URL. +4. Put your cloudflare proxy URL inbetween the double qoutes of `VITE_CORS_PROXY_URL: ""`. Make sure to not have a slash at the end of your URL. - Example (THIS IS MINE, IT WONT WORK FOR YOU): `VITE_CORS_PROXY_URL: "https://test-proxy.test.workers.dev",` -5. Put your TMDB read access token inside the quotes of `VITE_TMDB_API_KEY: "",`. You can generate it for free at [https://www.themoviedb.org/settings/api](https://www.themoviedb.org/settings/api). + Example (THIS IS MINE, IT WONT WORK FOR YOU): `VITE_CORS_PROXY_URL: "https://test-proxy.test.workers.dev"` +5. Put your TMDB read access token inside the quotes of `VITE_TMDB_READ_API_KEY: ""`. You can generate it for free at [https://www.themoviedb.org/settings/api](https://www.themoviedb.org/settings/api). 6. Save the file Your client has been prepared, you can now host it on any webhost. diff --git a/public/config.js b/public/config.js index abd72baf..c08704c2 100644 --- a/public/config.js +++ b/public/config.js @@ -1,5 +1,5 @@ window.__CONFIG__ = { // url must NOT end with a slash VITE_CORS_PROXY_URL: "", - TMDB_READ_API_KEY: "" + VITE_TMDB_READ_API_KEY: "" }; From ce00f1c5c293e9074902641ab454db130ae043be Mon Sep 17 00:00:00 2001 From: mrjvs Date: Fri, 23 Jun 2023 23:04:42 +0200 Subject: [PATCH 5/6] version bump --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 025a2844..327ba30b 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "movie-web", - "version": "3.1.1", + "version": "3.1.2", "private": true, "homepage": "https://movie-web.app", "dependencies": { From bfa9638d0eef8aa766525a49f91235b56d3fcf5f Mon Sep 17 00:00:00 2001 From: Jordaar <69628820+Jordaar@users.noreply.github.com> Date: Mon, 26 Jun 2023 19:16:29 +0530 Subject: [PATCH 6/6] feat(metadata): change `window.meta` --- src/video/components/actions/MetaAction.tsx | 44 ++++++++------------- 1 file changed, 17 insertions(+), 27 deletions(-) diff --git a/src/video/components/actions/MetaAction.tsx b/src/video/components/actions/MetaAction.tsx index db5ad6b4..710cbed2 100644 --- a/src/video/components/actions/MetaAction.tsx +++ b/src/video/components/actions/MetaAction.tsx @@ -1,29 +1,21 @@ import { useEffect } from "react"; -import { MWCaption } from "@/backend/helpers/streams"; -import { DetailedMeta } from "@/backend/metadata/getmeta"; import { useVideoPlayerDescriptor } from "@/video/state/hooks"; +import { + VideoMediaPlayingEvent, + useMediaPlaying, +} from "@/video/state/logic/mediaplaying"; import { useMeta } from "@/video/state/logic/meta"; -import { useProgress } from "@/video/state/logic/progress"; +import { VideoProgressEvent, useProgress } from "@/video/state/logic/progress"; +import { VideoPlayerMeta } from "@/video/state/types"; export type WindowMeta = { - meta: DetailedMeta; - captions: MWCaption[]; - episode?: { - episodeId: string; - seasonId: string; + media: VideoPlayerMeta; + state: { + mediaPlaying: VideoMediaPlayingEvent; + progress: VideoProgressEvent; }; - seasons?: { - id: string; - number: number; - title: string; - episodes?: { id: string; number: number; title: string }[]; - }[]; - progress: { - time: number; - duration: number; - }; -} | null; +}; declare global { interface Window { @@ -35,18 +27,16 @@ export function MetaAction() { const descriptor = useVideoPlayerDescriptor(); const meta = useMeta(descriptor); const progress = useProgress(descriptor); + const mediaPlaying = useMediaPlaying(descriptor); useEffect(() => { if (!window.meta) window.meta = {}; if (meta) { window.meta[descriptor] = { - meta: meta.meta, - captions: meta.captions, - seasons: meta.seasons, - episode: meta.episode, - progress: { - time: progress.time, - duration: progress.duration, + media: meta, + state: { + mediaPlaying, + progress, }, }; } @@ -54,7 +44,7 @@ export function MetaAction() { return () => { if (window.meta) delete window.meta[descriptor]; }; - }, [meta, descriptor, progress]); + }, [meta, descriptor, mediaPlaying, progress]); return null; }