Merge pull request #367 from movie-web/dev

v3.1.1

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.

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=...

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": {

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: ""
 };

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(),
     };
   }

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<T>(url: string, params?: object): Promise<T> {

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 {

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<keyof Config, undefined | string> = {
-  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<keyof Config, undefined | string> = {
   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<keyof Config> = ["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()),