Merge branch 'v4' into feat-urls-quicksearch

SELFHOSTING.md

@@ -29,10 +29,11 @@ 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. Save the file
+   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.
 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=...

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

src/backend/metadata/getmeta.ts

@@ -74,7 +74,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

@@ -109,7 +109,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()),

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