add provider scrape hookiboi

src/backend/embeds/testEmbedScraper.ts

@@ -2,16 +2,25 @@ import { MWEmbedType } from "../helpers/embed";
 import { registerEmbedScraper } from "../helpers/register";
 import { MWStreamQuality, MWStreamType } from "../helpers/streams";
 
+const timeout = (time: number) =>
+  new Promise<void>((resolve) => {
+    setTimeout(() => resolve(), time);
+  });
+
 registerEmbedScraper({
   id: "testembed",
   rank: 23,
   for: MWEmbedType.OPENLOAD,
 
-  async getStream({ progress, url }) {
+  async getStream({ progress }) {
-    console.log("scraping url: ", url);
+    await timeout(1000);
     progress(25);
+    await timeout(1000);
     progress(50);
+    await timeout(1000);
     progress(75);
+    throw new Error("failed to load or something");
+    await timeout(1000);
     return {
       streamUrl: "hello-world",
       type: MWStreamType.MP4,

src/backend/embeds/testEmbedScraperTwo.ts

@@ -0,0 +1,24 @@
+import { MWEmbedType } from "../helpers/embed";
+import { registerEmbedScraper } from "../helpers/register";
+import { MWStreamQuality, MWStreamType } from "../helpers/streams";
+
+const timeout = (time: number) =>
+  new Promise<void>((resolve) => {
+    setTimeout(() => resolve(), time);
+  });
+
+registerEmbedScraper({
+  id: "testembedtwo",
+  rank: 19,
+  for: MWEmbedType.ANOTHER,
+
+  async getStream({ progress }) {
+    progress(75);
+    await timeout(1000);
+    return {
+      streamUrl: "hello-world-5",
+      type: MWStreamType.MP4,
+      quality: MWStreamQuality.Q1080P,
+    };
+  },
+});

src/backend/helpers/embed.ts

@@ -2,6 +2,7 @@ import { MWStream } from "./streams";
 
 export enum MWEmbedType {
   OPENLOAD = "openload",
+  ANOTHER = "another",
 }
 
 export type MWEmbed = {

src/backend/helpers/register.ts

@@ -1,4 +1,4 @@
-import { MWEmbedScraper } from "./embed";
+import { MWEmbedScraper, MWEmbedType } from "./embed";
 import { MWProvider } from "./provider";
 
 let providers: MWProvider[] = [];
@@ -15,8 +15,8 @@ export function registerEmbedScraper(embed: MWEmbedScraper) {
 
 export function initializeScraperStore() {
   // sort by ranking
-  providers = providers.sort((a, b) => a.rank - b.rank);
+  providers = providers.sort((a, b) => b.rank - a.rank);
-  embeds = embeds.sort((a, b) => a.rank - b.rank);
+  embeds = embeds.sort((a, b) => b.rank - a.rank);
 
   // check for invalid ranks
   let lastRank: null | number = null;
@@ -50,6 +50,11 @@ export function initializeScraperStore() {
   const embedIds = embeds.map((v) => v.id);
   if (embedIds.length > 0 && new Set(embedIds).size !== embedIds.length)
     throw new Error("Duplicate IDS in embed scrapers");
+
+  // check for duplicate embed types
+  const embedTypes = embeds.map((v) => v.for);
+  if (embedTypes.length > 0 && new Set(embedTypes).size !== embedTypes.length)
+    throw new Error("Duplicate types in embed scrapers");
 }
 
 export function getProviders(): MWProvider[] {
@@ -59,3 +64,9 @@ export function getProviders(): MWProvider[] {
 export function getEmbeds(): MWEmbedScraper[] {
   return embeds;
 }
+
+export function getEmbedScraperByType(
+  type: MWEmbedType
+): MWEmbedScraper | null {
+  return getEmbeds().find((v) => v.for === type) ?? null;
+}

src/backend/helpers/run.ts

@@ -0,0 +1,52 @@
+import { MWEmbed, MWEmbedContext, MWEmbedScraper } from "./embed";
+import {
+  MWProvider,
+  MWProviderContext,
+  MWProviderScrapeResult,
+} from "./provider";
+import { getEmbedScraperByType } from "./register";
+import { MWStream } from "./streams";
+
+function sortProviderResult(
+  ctx: MWProviderScrapeResult
+): MWProviderScrapeResult {
+  ctx.embeds = ctx.embeds
+    .map<[MWEmbed, MWEmbedScraper | null]>((v) => [
+      v,
+      v.type ? getEmbedScraperByType(v.type) : null,
+    ])
+    .sort(([, a], [, b]) => (b?.rank ?? 0) - (a?.rank ?? 0))
+    .map((v) => v[0]);
+  return ctx;
+}
+
+export async function runProvider(
+  provider: MWProvider,
+  ctx: MWProviderContext
+): Promise<MWProviderScrapeResult> {
+  try {
+    const data = await provider.scrape(ctx);
+    return sortProviderResult(data);
+  } catch (err) {
+    console.error("Failed to run provider", {
+      id: provider.id,
+      ctx: { ...ctx },
+    });
+    throw err;
+  }
+}
+
+export async function runEmbedScraper(
+  scraper: MWEmbedScraper,
+  ctx: MWEmbedContext
+): Promise<MWStream> {
+  try {
+    return await scraper.getStream(ctx);
+  } catch (err) {
+    console.error("Failed to run embed scraper", {
+      id: scraper.id,
+      ctx: { ...ctx },
+    });
+    throw err;
+  }
+}

src/backend/helpers/scrape.ts

@@ -0,0 +1,117 @@
+import { MWProviderScrapeResult } from "./provider";
+import { getEmbedScraperByType, getProviders } from "./register";
+import { runEmbedScraper, runProvider } from "./run";
+import { MWStream } from "./streams";
+
+interface MWProgressData {
+  type: "embed" | "provider";
+  id: string;
+  percentage: number;
+  errored: boolean;
+}
+interface MWNextData {
+  id: string;
+  type: "embed" | "provider";
+}
+
+export interface MWProviderRunContext {
+  tmdb: string;
+  imdb: string;
+  onProgress?: (data: MWProgressData) => void;
+  onNext?: (data: MWNextData) => void;
+}
+
+async function findBestEmbedStream(
+  result: MWProviderScrapeResult,
+  ctx: MWProviderRunContext
+): Promise<MWStream | null> {
+  if (result.stream) return result.stream;
+
+  for (const embed of result.embeds) {
+    if (!embed.type) continue;
+    const scraper = getEmbedScraperByType(embed.type);
+    if (!scraper) throw new Error("Type for embed not found");
+
+    ctx.onNext?.({ id: scraper.id, type: "embed" });
+
+    let stream: MWStream;
+    try {
+      stream = await runEmbedScraper(scraper, {
+        url: embed.url,
+        progress(num) {
+          ctx.onProgress?.({
+            errored: false,
+            id: scraper.id,
+            percentage: num,
+            type: "embed",
+          });
+        },
+      });
+    } catch {
+      ctx.onProgress?.({
+        errored: true,
+        id: scraper.id,
+        percentage: 100,
+        type: "embed",
+      });
+      continue;
+    }
+
+    ctx.onProgress?.({
+      errored: false,
+      id: scraper.id,
+      percentage: 100,
+      type: "embed",
+    });
+
+    return stream;
+  }
+
+  return null;
+}
+
+export async function findBestStream(
+  ctx: MWProviderRunContext
+): Promise<MWStream | null> {
+  const providers = getProviders();
+
+  for (const provider of providers) {
+    ctx.onNext?.({ id: provider.id, type: "provider" });
+    let result: MWProviderScrapeResult;
+    try {
+      result = await runProvider(provider, {
+        imdbId: ctx.imdb,
+        tmdbId: ctx.tmdb,
+        progress(num) {
+          ctx.onProgress?.({
+            percentage: num,
+            errored: false,
+            id: provider.id,
+            type: "provider",
+          });
+        },
+      });
+    } catch (err) {
+      ctx.onProgress?.({
+        percentage: 100,
+        errored: true,
+        id: provider.id,
+        type: "provider",
+      });
+      continue;
+    }
+
+    ctx.onProgress?.({
+      errored: false,
+      id: provider.id,
+      percentage: 100,
+      type: "provider",
+    });
+
+    const stream = await findBestEmbedStream(result, ctx);
+    if (!stream) continue;
+    return stream;
+  }
+
+  return null;
+}

src/backend/index.ts

@@ -1,7 +1,6 @@
 import { initializeScraperStore } from "./helpers/register";
 
 // TODO backend system:
-//  - run providers/embedscrapers in webworkers for multithreading and isolation
 //  - caption support
 //  - hooks to run all providers one by one
 //  - move over old providers to new system
@@ -10,8 +9,11 @@ import { initializeScraperStore } from "./helpers/register";
 // providers
 // -- nothing here yet
 import "./providers/testProvider";
+import "./providers/testProviderTwo";
 
 // embeds
 // -- nothing here yet
+import "./embeds/testEmbedScraper";
+import "./embeds/testEmbedScraperTwo";
 
 initializeScraperStore();

src/backend/metadata/search.ts

@@ -1,5 +1,4 @@
-import { MWMediaType, MWQuery } from "@/providers";
+import { MWMediaMeta, MWMediaType, MWQuery } from "./types";
-import { MWMediaMeta } from "./types";
 
 const JW_API_BASE = "https://apis.justwatch.com";
 

src/backend/metadata/types.ts

@@ -11,3 +11,8 @@ export type MWMediaMeta = {
   poster?: string;
   type: MWMediaType;
 };
+
+export interface MWQuery {
+  searchQuery: string;
+  type: MWMediaType;
+}

src/backend/providers/testProvider.ts

@@ -1,32 +1,35 @@
-import { MWEmbedType } from "../helpers/embed";
 import { registerProvider } from "../helpers/register";
-import { MWStreamQuality, MWStreamType } from "../helpers/streams";
 import { MWMediaType } from "../metadata/types";
 
+const timeout = (time: number) =>
+  new Promise<void>((resolve) => {
+    setTimeout(() => resolve(), time);
+  });
+
 registerProvider({
   id: "testprov",
   rank: 42,
   type: [MWMediaType.MOVIE],
 
-  async scrape({ progress, imdbId, tmdbId }) {
+  async scrape({ progress }) {
-    console.log("scraping provider for: ", imdbId, tmdbId);
+    await timeout(1000);
     progress(25);
+    await timeout(1000);
     progress(50);
+    await timeout(1000);
     progress(75);
+    await timeout(1000);
 
-    // providers can optionally provide a stream themselves,
-    // incase they host their own streams instead of using embeds
     return {
-      stream: {
-        streamUrl: "hello-world",
-        type: MWStreamType.HLS,
-        quality: MWStreamQuality.Q1080P,
-      },
       embeds: [
-        {
+        // {
-          type: MWEmbedType.OPENLOAD,
+        //   type: MWEmbedType.OPENLOAD,
-          url: "https://google.com",
+        //   url: "https://google.com",
-        },
+        // },
+        // {
+        //   type: MWEmbedType.ANOTHER,
+        //   url: "https://google.com",
+        // },
       ],
     };
   },

src/backend/providers/testProviderTwo.ts

@@ -0,0 +1,37 @@
+import { MWEmbedType } from "../helpers/embed";
+import { registerProvider } from "../helpers/register";
+import { MWMediaType } from "../metadata/types";
+
+const timeout = (time: number) =>
+  new Promise<void>((resolve) => {
+    setTimeout(() => resolve(), time);
+  });
+
+registerProvider({
+  id: "testprov2",
+  rank: 40,
+  type: [MWMediaType.MOVIE],
+
+  async scrape({ progress }) {
+    await timeout(1000);
+    progress(25);
+    await timeout(1000);
+    progress(50);
+    await timeout(1000);
+    progress(75);
+    await timeout(1000);
+
+    return {
+      embeds: [
+        {
+          type: MWEmbedType.OPENLOAD,
+          url: "https://google.com",
+        },
+        {
+          type: MWEmbedType.ANOTHER,
+          url: "https://google.com",
+        },
+      ],
+    };
+  },
+});

src/components/SearchBar.tsx

@@ -1,6 +1,6 @@
+import { MWMediaType, MWQuery } from "@/backend/metadata/types";
 import { useState } from "react";
 import { useTranslation } from "react-i18next";
-import { MWMediaType, MWQuery } from "@/providers";
 import { DropdownButton } from "./buttons/DropdownButton";
 import { Icon, Icons } from "./Icon";
 import { TextInputControl } from "./text-inputs/TextInputControl";

src/components/layout/Seasons.tsx

@@ -7,17 +7,9 @@ import { Icons } from "@/components/Icon";
 import { WatchedEpisode } from "@/components/media/WatchedEpisodeButton";
 import { useLoading } from "@/hooks/useLoading";
 import { serializePortableMedia } from "@/hooks/usePortableMedia";
-import {
-  convertMediaToPortable,
-  MWMedia,
-  MWMediaSeasons,
-  MWMediaSeason,
-  MWPortableMedia,
-} from "@/providers";
-import { getSeasonDataFromMedia } from "@/providers/methods/seasons";
 
 export interface SeasonsProps {
-  media: MWMedia;
+  media: any;
 }
 
 export function LoadingSeasons(props: { error?: boolean }) {
@@ -45,80 +37,73 @@ export function LoadingSeasons(props: { error?: boolean }) {
 }
 
 export function Seasons(props: SeasonsProps) {
-  const { t } = useTranslation();
+  // const { t } = useTranslation();
-
+  // const [searchSeasons, loading, error, success] = useLoading(
-  const [searchSeasons, loading, error, success] = useLoading(
+  //   (portableMedia: MWPortableMedia) => getSeasonDataFromMedia(portableMedia)
-    (portableMedia: MWPortableMedia) => getSeasonDataFromMedia(portableMedia)
+  // );
-  );
+  // const history = useHistory();
-  const history = useHistory();
+  // const [seasons, setSeasons] = useState<MWMediaSeasons>({ seasons: [] });
-  const [seasons, setSeasons] = useState<MWMediaSeasons>({ seasons: [] });
+  // const seasonSelected = props.media.seasonId as string;
-  const seasonSelected = props.media.seasonId as string;
+  // const episodeSelected = props.media.episodeId as string;
-  const episodeSelected = props.media.episodeId as string;
+  // useEffect(() => {
-
+  //   (async () => {
-  useEffect(() => {
+  //     const seasonData = await searchSeasons(props.media);
-    (async () => {
+  //     setSeasons(seasonData);
-      const seasonData = await searchSeasons(props.media);
+  //   })();
-      setSeasons(seasonData);
+  // }, [searchSeasons, props.media]);
-    })();
+  // function navigateToSeasonAndEpisode(seasonId: string, episodeId: string) {
-  }, [searchSeasons, props.media]);
+  //   const newMedia: MWMedia = { ...props.media };
-
+  //   newMedia.episodeId = episodeId;
-  function navigateToSeasonAndEpisode(seasonId: string, episodeId: string) {
+  //   newMedia.seasonId = seasonId;
-    const newMedia: MWMedia = { ...props.media };
+  //   history.replace(
-    newMedia.episodeId = episodeId;
+  //     `/media/${newMedia.mediaType}/${serializePortableMedia(
-    newMedia.seasonId = seasonId;
+  //       convertMediaToPortable(newMedia)
-    history.replace(
+  //     )}`
-      `/media/${newMedia.mediaType}/${serializePortableMedia(
+  //   );
-        convertMediaToPortable(newMedia)
+  // }
-      )}`
+  // const mapSeason = (season: MWMediaSeason) => ({
-    );
+  //   id: season.id,
-  }
+  //   name: season.title || `${t("seasons.season", { season: season.sort })}`,
-
+  // });
-  const mapSeason = (season: MWMediaSeason) => ({
+  // const options = seasons.seasons.map(mapSeason);
-    id: season.id,
+  // const foundSeason = seasons.seasons.find(
-    name: season.title || `${t("seasons.season", { season: season.sort })}`,
+  //   (season) => season.id === seasonSelected
-  });
+  // );
-
+  // const selectedItem = foundSeason ? mapSeason(foundSeason) : null;
-  const options = seasons.seasons.map(mapSeason);
+  // return (
-
+  //   <>
-  const foundSeason = seasons.seasons.find(
+  //     {loading ? <LoadingSeasons /> : null}
-    (season) => season.id === seasonSelected
+  //     {error ? <LoadingSeasons error /> : null}
-  );
+  //     {success && seasons.seasons.length ? (
-  const selectedItem = foundSeason ? mapSeason(foundSeason) : null;
+  //       <>
-
+  //         <Dropdown
-  return (
+  //           selectedItem={selectedItem as OptionItem}
-    <>
+  //           options={options}
-      {loading ? <LoadingSeasons /> : null}
+  //           setSelectedItem={(seasonItem) =>
-      {error ? <LoadingSeasons error /> : null}
+  //             navigateToSeasonAndEpisode(
-      {success && seasons.seasons.length ? (
+  //               seasonItem.id,
-        <>
+  //               seasons.seasons.find((s) => s.id === seasonItem.id)?.episodes[0]
-          <Dropdown
+  //                 .id as string
-            selectedItem={selectedItem as OptionItem}
+  //             )
-            options={options}
+  //           }
-            setSelectedItem={(seasonItem) =>
+  //         />
-              navigateToSeasonAndEpisode(
+  //         {seasons.seasons
-                seasonItem.id,
+  //           .find((s) => s.id === seasonSelected)
-                seasons.seasons.find((s) => s.id === seasonItem.id)?.episodes[0]
+  //           ?.episodes.map((v) => (
-                  .id as string
+  //             <WatchedEpisode
-              )
+  //               key={v.id}
-            }
+  //               media={{
-          />
+  //                 ...props.media,
-          {seasons.seasons
+  //                 seriesData: seasons,
-            .find((s) => s.id === seasonSelected)
+  //                 episodeId: v.id,
-            ?.episodes.map((v) => (
+  //                 seasonId: seasonSelected,
-              <WatchedEpisode
+  //               }}
-                key={v.id}
+  //               active={v.id === episodeSelected}
-                media={{
+  //               onClick={() => navigateToSeasonAndEpisode(seasonSelected, v.id)}
-                  ...props.media,
+  //             />
-                  seriesData: seasons,
+  //           ))}
-                  episodeId: v.id,
+  //       </>
-                  seasonId: seasonSelected,
+  //     ) : null}
-                }}
+  //   </>
-                active={v.id === episodeSelected}
+  // );
-                onClick={() => navigateToSeasonAndEpisode(seasonSelected, v.id)}
-              />
-            ))}
-        </>
-      ) : null}
-    </>
-  );
 }

src/components/media/MediaCard.tsx

@@ -1,10 +1,9 @@
 import { Link } from "react-router-dom";
 import { DotList } from "@/components/text/DotList";
-import { MWSearchResult } from "@/backend/metadata/search";
+import { MWMediaMeta, MWMediaType } from "@/backend/metadata/types";
-import { MWMediaType } from "@/providers";
 
 export interface MediaCardProps {
-  media: MWSearchResult;
+  media: MWMediaMeta;
   linkable?: boolean;
 }
 

src/components/media/WatchedEpisodeButton.tsx

@@ -1,25 +1,24 @@
-import { getEpisodeFromMedia, MWMedia } from "@/providers";
+import { MWMediaMeta } from "@/backend/metadata/types";
 import { useWatchedContext, getWatchedFromPortable } from "@/state/watched";
 import { Episode } from "./EpisodeButton";
 
 export interface WatchedEpisodeProps {
-  media: MWMedia;
+  media: MWMediaMeta;
   onClick?: () => void;
   active?: boolean;
 }
 
 export function WatchedEpisode(props: WatchedEpisodeProps) {
-  const { watched } = useWatchedContext();
+  // const { watched } = useWatchedContext();
-  const foundWatched = getWatchedFromPortable(watched.items, props.media);
+  // const foundWatched = getWatchedFromPortable(watched.items, props.media);
-  const episode = getEpisodeFromMedia(props.media);
+  // // const episode = getEpisodeFromMedia(props.media);
-  const watchedPercentage = (foundWatched && foundWatched.percentage) || 0;
+  // const watchedPercentage = (foundWatched && foundWatched.percentage) || 0;
-
+  // return (
-  return (
+  //   <Episode
-    <Episode
+  //     progress={watchedPercentage}
-      progress={watchedPercentage}
+  //     episodeNumber={episode?.episode?.sort ?? 1}
-      episodeNumber={episode?.episode?.sort ?? 1}
+  //     active={props.active}
-      active={props.active}
+  //     onClick={props.onClick}
-      onClick={props.onClick}
+  //   />
-    />
+  // );
-  );
 }

src/components/media/WatchedMediaCard.tsx

@@ -1,8 +1,8 @@
-import { MWSearchResult } from "@/backend/metadata/search";
+import { MWMediaMeta } from "@/backend/metadata/types";
 import { MediaCard } from "./MediaCard";
 
 export interface WatchedMediaCardProps {
-  media: MWSearchResult;
+  media: MWMediaMeta;
 }
 
 export function WatchedMediaCard(props: WatchedMediaCardProps) {

src/hooks/usePortableMedia.ts

@@ -1,30 +0,0 @@
-import { useEffect, useState } from "react";
-import { useParams } from "react-router-dom";
-import { MWPortableMedia } from "@/providers";
-
-export function deserializePortableMedia(media: string): MWPortableMedia {
-  return JSON.parse(atob(decodeURIComponent(media)));
-}
-
-export function serializePortableMedia(media: MWPortableMedia): string {
-  const data = encodeURIComponent(btoa(JSON.stringify(media)));
-  return data;
-}
-
-export function usePortableMedia(): MWPortableMedia | undefined {
-  const { media } = useParams<{ media: string }>();
-  const [mediaObject, setMediaObject] = useState<MWPortableMedia | undefined>(
-    undefined
-  );
-
-  useEffect(() => {
-    try {
-      setMediaObject(deserializePortableMedia(media));
-    } catch (err) {
-      console.error("Failed to deserialize portable media", err);
-      setMediaObject(undefined);
-    }
-  }, [media, setMediaObject]);
-
-  return mediaObject;
-}

src/hooks/useScrape.ts

@@ -0,0 +1,59 @@
+import { findBestStream } from "@/backend/helpers/scrape";
+import { MWStream } from "@/backend/helpers/streams";
+import { useEffect, useState } from "react";
+
+interface ScrapeEventLog {
+  type: "provider" | "embed";
+  errored: boolean;
+  percentage: number;
+  id: string;
+}
+
+export function useScrape() {
+  const [eventLog, setEventLog] = useState<ScrapeEventLog[]>([]);
+  const [stream, setStream] = useState<MWStream | null>(null);
+  const [pending, setPending] = useState(true);
+
+  useEffect(() => {
+    setPending(true);
+    setStream(null);
+    setEventLog([]);
+    (async () => {
+      // TODO has test inputs
+      const scrapedStream = await findBestStream({
+        imdb: "test1",
+        tmdb: "test2",
+        onNext(ctx) {
+          setEventLog((arr) => [
+            ...arr,
+            {
+              errored: false,
+              id: ctx.id,
+              type: ctx.type,
+              percentage: 0,
+            },
+          ]);
+        },
+        onProgress(ctx) {
+          setEventLog((arr) => {
+            const item = arr.reverse().find((v) => v.id === ctx.id);
+            if (item) {
+              item.errored = ctx.errored;
+              item.percentage = ctx.percentage;
+            }
+            return [...arr];
+          });
+        },
+      });
+
+      setPending(false);
+      setStream(scrapedStream);
+    })();
+  }, []);
+
+  return {
+    stream,
+    pending,
+    eventLog,
+  };
+}

src/hooks/useSearchQuery.ts

@@ -1,6 +1,6 @@
+import { MWMediaType, MWQuery } from "@/backend/metadata/types";
 import React, { useRef, useState } from "react";
 import { generatePath, useHistory, useRouteMatch } from "react-router-dom";
-import { MWMediaType, MWQuery } from "@/providers";
 
 export function useSearchQuery(): [
   MWQuery,

src/setup/App.tsx

@@ -1,5 +1,4 @@
 import { Redirect, Route, Switch } from "react-router-dom";
-import { MWMediaType } from "@/providers";
 import { BookmarkContextProvider } from "@/state/bookmark";
 import { WatchedContextProvider } from "@/state/watched";
 
@@ -7,6 +6,7 @@ import { NotFoundPage } from "@/views/notfound/NotFoundView";
 import { MediaView } from "@/views/MediaView";
 import { SearchView } from "@/views/search/SearchView";
 import { TestView } from "@/views/TestView";
+import { MWMediaType } from "@/backend/metadata/types";
 
 function App() {
   return (

src/state/bookmark/context.tsx

@@ -1,3 +1,4 @@
+import { MWMediaMeta } from "@/backend/metadata/types";
 import {
   createContext,
   ReactNode,
@@ -6,7 +7,6 @@ import {
   useMemo,
   useState,
 } from "react";
-import { getProviderMetadata, MWMediaMeta } from "@/providers";
 import { BookmarkStore } from "./store";
 
 interface BookmarkStoreData {
@@ -64,7 +64,7 @@ export function BookmarkContextProvider(props: { children: ReactNode }) {
 
   const contextValue = useMemo(
     () => ({
-      setItemBookmark(media: MWMediaMeta, bookmarked: boolean) {
+      setItemBookmark(media: any, bookmarked: boolean) {
         setBookmarked((data: BookmarkStoreData) => {
           if (bookmarked) {
             const itemIndex = getBookmarkIndexFromMedia(data.bookmarks, media);
@@ -90,9 +90,7 @@ export function BookmarkContextProvider(props: { children: ReactNode }) {
         });
       },
       getFilteredBookmarks() {
-        return bookmarkStorage.bookmarks.filter(
+        return [];
-          (bookmark) => getProviderMetadata(bookmark.providerId)?.enabled
-        );
       },
       bookmarkStore: bookmarkStorage,
     }),

src/state/watched/context.tsx

@@ -1,3 +1,4 @@
+import { MWMediaMeta } from "@/backend/metadata/types";
 import React, {
   createContext,
   ReactNode,
@@ -6,7 +7,6 @@ import React, {
   useMemo,
   useState,
 } from "react";
-import { MWMediaMeta, getProviderMetadata, MWMediaType } from "@/providers";
 import { VideoProgressStore } from "./store";
 
 interface WatchedStoreItem extends MWMediaMeta {
@@ -28,13 +28,7 @@ export function getWatchedFromPortable(
   items: WatchedStoreItem[],
   media: MWMediaMeta
 ): WatchedStoreItem | undefined {
-  return items.find(
+  return undefined;
-    (v) =>
-      v.mediaId === media.mediaId &&
-      v.providerId === media.providerId &&
-      v.episodeId === media.episodeId &&
-      v.seasonId === media.seasonId
-  );
 }
 
 const WatchedContext = createContext<WatchedStoreDataWrapper>({
@@ -73,76 +67,73 @@ export function WatchedContextProvider(props: { children: ReactNode }) {
         progress: number,
         total: number
       ): void {
-        setWatched((data: WatchedStoreData) => {
+        // setWatched((data: WatchedStoreData) => {
-          let item = getWatchedFromPortable(data.items, media);
+        //   let item = getWatchedFromPortable(data.items, media);
-          if (!item) {
+        //   if (!item) {
-            item = {
+        //     item = {
-              mediaId: media.mediaId,
+        //       mediaId: media.mediaId,
-              mediaType: media.mediaType,
+        //       mediaType: media.mediaType,
-              providerId: media.providerId,
+        //       providerId: media.providerId,
-              title: media.title,
+        //       title: media.title,
-              year: media.year,
+        //       year: media.year,
-              percentage: 0,
+        //       percentage: 0,
-              progress: 0,
+        //       progress: 0,
-              episodeId: media.episodeId,
+        //       episodeId: media.episodeId,
-              seasonId: media.seasonId,
+        //       seasonId: media.seasonId,
-            };
+        //     };
-            data.items.push(item);
+        //     data.items.push(item);
-          }
+        //   }
-
+        //   // update actual item
-          // update actual item
+        //   item.progress = progress;
-          item.progress = progress;
+        //   item.percentage = Math.round((progress / total) * 100);
-          item.percentage = Math.round((progress / total) * 100);
+        //   return data;
-
+        // });
-          return data;
-        });
       },
       getFilteredWatched() {
         // remove disabled providers
-        let filtered = watched.items.filter(
+        // let filtered = watched.items.filter(
-          (item) => getProviderMetadata(item.providerId)?.enabled
+        //   (item) => getProviderMetadata(item.providerId)?.enabled
-        );
+        // );
-
+        // // get highest episode number for every anime/season
-        // get highest episode number for every anime/season
+        // const highestEpisode: Record<string, [number, number]> = {};
-        const highestEpisode: Record<string, [number, number]> = {};
+        // const highestWatchedItem: Record<string, WatchedStoreItem> = {};
-        const highestWatchedItem: Record<string, WatchedStoreItem> = {};
+        // filtered = filtered.filter((item) => {
-        filtered = filtered.filter((item) => {
+        //   if (
-          if (
+        //     [MWMediaType.ANIME, MWMediaType.SERIES].includes(item.mediaType)
-            [MWMediaType.ANIME, MWMediaType.SERIES].includes(item.mediaType)
+        //   ) {
-          ) {
+        //     const key = `${item.mediaType}-${item.mediaId}`;
-            const key = `${item.mediaType}-${item.mediaId}`;
+        //     const current: [number, number] = [
-            const current: [number, number] = [
+        //       item.episodeId ? parseInt(item.episodeId, 10) : -1,
-              item.episodeId ? parseInt(item.episodeId, 10) : -1,
+        //       item.seasonId ? parseInt(item.seasonId, 10) : -1,
-              item.seasonId ? parseInt(item.seasonId, 10) : -1,
+        //     ];
-            ];
+        //     let existing = highestEpisode[key];
-            let existing = highestEpisode[key];
+        //     if (!existing) {
-            if (!existing) {
+        //       existing = current;
-              existing = current;
+        //       highestEpisode[key] = current;
-              highestEpisode[key] = current;
+        //       highestWatchedItem[key] = item;
-              highestWatchedItem[key] = item;
+        //     }
-            }
+        //     if (
-
+        //       current[0] > existing[0] ||
-            if (
+        //       (current[0] === existing[0] && current[1] > existing[1])
-              current[0] > existing[0] ||
+        //     ) {
-              (current[0] === existing[0] && current[1] > existing[1])
+        //       highestEpisode[key] = current;
-            ) {
+        //       highestWatchedItem[key] = item;
-              highestEpisode[key] = current;
+        //     }
-              highestWatchedItem[key] = item;
+        //     return false;
-            }
+        //   }
-            return false;
+        //   return true;
-          }
+        // });
-          return true;
+        // return [...filtered, ...Object.values(highestWatchedItem)];
-        });
-
-        return [...filtered, ...Object.values(highestWatchedItem)];
       },
       watched,
     }),
-    [watched, setWatched]
+    [
+      /*watched, setWatched*/
+    ]
   );
 
   return (
-    <WatchedContext.Provider value={contextValue}>
+    <WatchedContext.Provider value={contextValue as any}>
       {props.children}
     </WatchedContext.Provider>
   );

src/state/watched/store.ts

@@ -1,6 +1,4 @@
-import { MWMediaType } from "@/providers";
 import { versionedStoreBuilder } from "@/utils/storage";
-import { WatchedStoreData } from "./context";
 
 export const VideoProgressStore = versionedStoreBuilder()
   .setKey("video-progress")
@@ -9,79 +7,79 @@ export const VideoProgressStore = versionedStoreBuilder()
   })
   .addVersion({
     version: 1,
-    migrate(data: any) {
+    migrate() {
-      const output: WatchedStoreData = { items: [] };
+      // const output: WatchedStoreData = { items: [] };
 
-      if (!data || data.constructor !== Object) return output;
+      // if (!data || data.constructor !== Object) return output;
 
-      Object.keys(data).forEach((scraperId) => {
+      // Object.keys(data).forEach((scraperId) => {
-        if (scraperId === "--version") return;
+      //   if (scraperId === "--version") return;
-        if (scraperId === "save") return;
+      //   if (scraperId === "save") return;
 
-        if (
+      //   if (
-          data[scraperId].movie &&
+      //     data[scraperId].movie &&
-          data[scraperId].movie.constructor === Object
+      //     data[scraperId].movie.constructor === Object
-        ) {
+      //   ) {
-          Object.keys(data[scraperId].movie).forEach((movieId) => {
+      //     Object.keys(data[scraperId].movie).forEach((movieId) => {
-            try {
+      //       try {
-              output.items.push({
+      //         output.items.push({
-                mediaId: movieId.includes("player.php")
+      //           mediaId: movieId.includes("player.php")
-                  ? movieId.split("player.php%3Fimdb%3D")[1]
+      //             ? movieId.split("player.php%3Fimdb%3D")[1]
-                  : movieId,
+      //             : movieId,
-                mediaType: MWMediaType.MOVIE,
+      //           mediaType: MWMediaType.MOVIE,
-                providerId: scraperId,
+      //           providerId: scraperId,
-                title: data[scraperId].movie[movieId].full.meta.title,
+      //           title: data[scraperId].movie[movieId].full.meta.title,
-                year: data[scraperId].movie[movieId].full.meta.year,
+      //           year: data[scraperId].movie[movieId].full.meta.year,
-                progress: data[scraperId].movie[movieId].full.currentlyAt,
+      //           progress: data[scraperId].movie[movieId].full.currentlyAt,
-                percentage: Math.round(
+      //           percentage: Math.round(
-                  (data[scraperId].movie[movieId].full.currentlyAt /
+      //             (data[scraperId].movie[movieId].full.currentlyAt /
-                    data[scraperId].movie[movieId].full.totalDuration) *
+      //               data[scraperId].movie[movieId].full.totalDuration) *
-                    100
+      //               100
-                ),
+      //           ),
-              });
+      //         });
-            } catch (err) {
+      //       } catch (err) {
-              console.error(
+      //         console.error(
-                `Failed to migrate movie: ${scraperId}/${movieId}`,
+      //           `Failed to migrate movie: ${scraperId}/${movieId}`,
-                data[scraperId].movie[movieId]
+      //           data[scraperId].movie[movieId]
-              );
+      //         );
-            }
+      //       }
-          });
+      //     });
-        }
+      //   }
 
-        if (
+      //   if (
-          data[scraperId].show &&
+      //     data[scraperId].show &&
-          data[scraperId].show.constructor === Object
+      //     data[scraperId].show.constructor === Object
-        ) {
+      //   ) {
-          Object.keys(data[scraperId].show).forEach((showId) => {
+      //     Object.keys(data[scraperId].show).forEach((showId) => {
-            if (data[scraperId].show[showId].constructor !== Object) return;
+      //       if (data[scraperId].show[showId].constructor !== Object) return;
-            Object.keys(data[scraperId].show[showId]).forEach((episodeId) => {
+      //       Object.keys(data[scraperId].show[showId]).forEach((episodeId) => {
-              try {
+      //         try {
-                output.items.push({
+      //           output.items.push({
-                  mediaId: showId,
+      //             mediaId: showId,
-                  mediaType: MWMediaType.SERIES,
+      //             mediaType: MWMediaType.SERIES,
-                  providerId: scraperId,
+      //             providerId: scraperId,
-                  title: data[scraperId].show[showId][episodeId].meta.title,
+      //             title: data[scraperId].show[showId][episodeId].meta.title,
-                  year: data[scraperId].show[showId][episodeId].meta.year,
+      //             year: data[scraperId].show[showId][episodeId].meta.year,
-                  percentage: Math.round(
+      //             percentage: Math.round(
-                    (data[scraperId].show[showId][episodeId].currentlyAt /
+      //               (data[scraperId].show[showId][episodeId].currentlyAt /
-                      data[scraperId].show[showId][episodeId].totalDuration) *
+      //                 data[scraperId].show[showId][episodeId].totalDuration) *
-                      100
+      //                 100
-                  ),
+      //             ),
-                  progress: data[scraperId].show[showId][episodeId].currentlyAt,
+      //             progress: data[scraperId].show[showId][episodeId].currentlyAt,
-                  episodeId:
+      //             episodeId:
-                    data[scraperId].show[showId][episodeId].show.episode,
+      //               data[scraperId].show[showId][episodeId].show.episode,
-                  seasonId: data[scraperId].show[showId][episodeId].show.season,
+      //             seasonId: data[scraperId].show[showId][episodeId].show.season,
-                });
+      //           });
-              } catch (err) {
+      //         } catch (err) {
-                console.error(
+      //           console.error(
-                  `Failed to migrate series: ${scraperId}/${showId}/${episodeId}`,
+      //             `Failed to migrate series: ${scraperId}/${showId}/${episodeId}`,
-                  data[scraperId].show[showId][episodeId]
+      //             data[scraperId].show[showId][episodeId]
-                );
+      //           );
-              }
+      //         }
-            });
+      //       });
-          });
+      //     });
-        }
+      //   }
-      });
+      // });
 
       return output;
     },

src/views/MediaView.tsx

@@ -1,220 +1,215 @@
-import { ReactElement, useCallback, useEffect, useState } from "react";
+// import { ReactElement, useCallback, useEffect, useState } from "react";
-import { useHistory } from "react-router-dom";
+// import { useHistory } from "react-router-dom";
+// import { useTranslation } from "react-i18next";
+// import { IconPatch } from "@/components/buttons/IconPatch";
+// import { Icons } from "@/components/Icon";
+// import { Navigation } from "@/components/layout/Navigation";
+// import { Paper } from "@/components/layout/Paper";
+// import { LoadingSeasons, Seasons } from "@/components/layout/Seasons";
+// import { DecoratedVideoPlayer } from "@/components/video/DecoratedVideoPlayer";
+// import { ArrowLink } from "@/components/text/ArrowLink";
+// import { DotList } from "@/components/text/DotList";
+// import { Title } from "@/components/text/Title";
+// import { useLoading } from "@/hooks/useLoading";
+// import { usePortableMedia } from "@/hooks/usePortableMedia";
+// import {
+//   getIfBookmarkedFromPortable,
+//   useBookmarkContext,
+// } from "@/state/bookmark";
+// import { getWatchedFromPortable, useWatchedContext } from "@/state/watched";
+// import { SourceControl } from "@/components/video/controls/SourceControl";
+// import { ProgressListenerControl } from "@/components/video/controls/ProgressListenerControl";
+// import { Loading } from "@/components/layout/Loading";
+// import { NotFoundChecks } from "./notfound/NotFoundChecks";
+
 import { useTranslation } from "react-i18next";
-import { IconPatch } from "@/components/buttons/IconPatch";
+import { useHistory } from "react-router-dom";
-import { Icons } from "@/components/Icon";
 import { Navigation } from "@/components/layout/Navigation";
-import { Paper } from "@/components/layout/Paper";
-import { LoadingSeasons, Seasons } from "@/components/layout/Seasons";
-import { DecoratedVideoPlayer } from "@/components/video/DecoratedVideoPlayer";
 import { ArrowLink } from "@/components/text/ArrowLink";
-import { DotList } from "@/components/text/DotList";
-import { Title } from "@/components/text/Title";
-import { useLoading } from "@/hooks/useLoading";
-import { usePortableMedia } from "@/hooks/usePortableMedia";
-import {
-  MWPortableMedia,
-  getStream,
-  MWMediaStream,
-  MWMedia,
-  convertPortableToMedia,
-  getProviderFromId,
-  MWMediaProvider,
-  MWMediaType,
-} from "@/providers";
-import {
-  getIfBookmarkedFromPortable,
-  useBookmarkContext,
-} from "@/state/bookmark";
-import { getWatchedFromPortable, useWatchedContext } from "@/state/watched";
-import { SourceControl } from "@/components/video/controls/SourceControl";
-import { ProgressListenerControl } from "@/components/video/controls/ProgressListenerControl";
-import { Loading } from "@/components/layout/Loading";
-import { NotFoundChecks } from "./notfound/NotFoundChecks";
-
-interface StyledMediaViewProps {
-  media: MWMedia;
-  stream: MWMediaStream;
-}
-
-export function SkeletonVideoPlayer(props: { error?: boolean }) {
-  return (
-    <div className="flex aspect-video w-full items-center justify-center bg-denim-200 lg:rounded-xl">
-      {props.error ? (
-        <div className="flex flex-col items-center">
-          <IconPatch icon={Icons.WARNING} className="text-red-400" />
-          <p className="mt-5 text-white">Couldn&apos;t get your stream</p>
-        </div>
-      ) : (
-        <div className="flex flex-col items-center">
-          <Loading />
-          <p className="mt-3 text-white">Getting your stream...</p>
-        </div>
-      )}
-    </div>
-  );
-}
-
-function StyledMediaView(props: StyledMediaViewProps) {
-  const reactHistory = useHistory();
-  const watchedStore = useWatchedContext();
-  const startAtTime: number | undefined = getWatchedFromPortable(
-    watchedStore.watched.items,
-    props.media
-  )?.progress;
-
-  const updateProgress = useCallback(
-    (time: number, duration: number) => {
-      // Don't update stored progress if less than 30s into the video
-      if (time <= 30) return;
-      watchedStore.updateProgress(props.media, time, duration);
-    },
-    [props, watchedStore]
-  );
-
-  const goBack = useCallback(() => {
-    if (reactHistory.action !== "POP") reactHistory.goBack();
-    else reactHistory.push("/");
-  }, [reactHistory]);
-
-  return (
-    <div className="overflow-hidden lg:rounded-xl">
-      <DecoratedVideoPlayer title={props.media.title} onGoBack={goBack}>
-        <SourceControl source={props.stream.url} type={props.stream.type} />
-        <ProgressListenerControl
-          startAt={startAtTime}
-          onProgress={updateProgress}
-        />
-      </DecoratedVideoPlayer>
-    </div>
-  );
-}
-
-interface StyledMediaFooterProps {
-  media: MWMedia;
-  provider: MWMediaProvider;
-}
 
-function StyledMediaFooter(props: StyledMediaFooterProps) {
+// interface StyledMediaViewProps {
-  const { setItemBookmark, getFilteredBookmarks } = useBookmarkContext();
+//   media: MWMedia;
-  const isBookmarked = getIfBookmarkedFromPortable(
+//   stream: MWMediaStream;
-    getFilteredBookmarks(),
+// }
-    props.media
+
-  );
+// export function SkeletonVideoPlayer(props: { error?: boolean }) {
-
+//   return (
-  return (
+//     <div className="flex aspect-video w-full items-center justify-center bg-denim-200 lg:rounded-xl">
-    <Paper className="mt-5">
+//       {props.error ? (
-      <div className="flex">
+//         <div className="flex flex-col items-center">
-        <div className="flex-1">
+//           <IconPatch icon={Icons.WARNING} className="text-red-400" />
-          <Title>{props.media.title}</Title>
+//           <p className="mt-5 text-white">Couldn&apos;t get your stream</p>
-          <DotList
+//         </div>
-            className="mt-3 text-sm"
+//       ) : (
-            content={[
+//         <div className="flex flex-col items-center">
-              props.provider.displayName,
+//           <Loading />
-              props.media.mediaType,
+//           <p className="mt-3 text-white">Getting your stream...</p>
-              props.media.year,
+//         </div>
-            ]}
+//       )}
-          />
+//     </div>
-        </div>
+//   );
-        <div>
+// }
-          <IconPatch
+
-            icon={Icons.BOOKMARK}
+// function StyledMediaView(props: StyledMediaViewProps) {
-            active={isBookmarked}
+//   const reactHistory = useHistory();
-            onClick={() => setItemBookmark(props.media, !isBookmarked)}
+//   const watchedStore = useWatchedContext();
-            clickable
+//   const startAtTime: number | undefined = getWatchedFromPortable(
-          />
+//     watchedStore.watched.items,
-        </div>
+//     props.media
-      </div>
+//   )?.progress;
-      {props.media.mediaType !== MWMediaType.MOVIE ? (
+
-        <Seasons media={props.media} />
+//   const updateProgress = useCallback(
-      ) : null}
+//     (time: number, duration: number) => {
-    </Paper>
+//       // Don't update stored progress if less than 30s into the video
-  );
+//       if (time <= 30) return;
-}
+//       watchedStore.updateProgress(props.media, time, duration);
-
+//     },
-function LoadingMediaFooter(props: { error?: boolean }) {
+//     [props, watchedStore]
-  const { t } = useTranslation();
+//   );
-
+
-  return (
+//   const goBack = useCallback(() => {
-    <Paper className="mt-5">
+//     if (reactHistory.action !== "POP") reactHistory.goBack();
-      <div className="flex">
+//     else reactHistory.push("/");
-        <div className="flex-1">
+//   }, [reactHistory]);
-          <div className="mb-2 h-4 w-48 rounded-full bg-denim-500" />
+
-          <div>
+//   return (
-            <span className="mr-4 inline-block h-2 w-12 rounded-full bg-denim-400" />
+//     <div className="overflow-hidden lg:rounded-xl">
-            <span className="mr-4 inline-block h-2 w-12 rounded-full bg-denim-400" />
+//       <DecoratedVideoPlayer title={props.media.title} onGoBack={goBack}>
-          </div>
+//         <SourceControl source={props.stream.url} type={props.stream.type} />
-          {props.error ? (
+//         <ProgressListenerControl
-            <div className="flex items-center space-x-3">
+//           startAt={startAtTime}
-              <IconPatch icon={Icons.WARNING} className="text-red-400" />
+//           onProgress={updateProgress}
-              <p>{t("media.invalidUrl")}</p>
+//         />
-            </div>
+//       </DecoratedVideoPlayer>
-          ) : (
+//     </div>
-            <LoadingSeasons />
+//   );
-          )}
+// }
-        </div>
+
-      </div>
+// interface StyledMediaFooterProps {
-    </Paper>
+//   media: MWMedia;
-  );
+//   provider: MWMediaProvider;
-}
+// }
-
+
-function MediaViewContent(props: { portable: MWPortableMedia }) {
+// function StyledMediaFooter(props: StyledMediaFooterProps) {
-  const mediaPortable = props.portable;
+//   const { setItemBookmark, getFilteredBookmarks } = useBookmarkContext();
-  const [streamUrl, setStreamUrl] = useState<MWMediaStream | undefined>();
+//   const isBookmarked = getIfBookmarkedFromPortable(
-  const [media, setMedia] = useState<MWMedia | undefined>();
+//     getFilteredBookmarks(),
-  const [fetchMedia, loadingPortable, errorPortable] = useLoading(
+//     props.media
-    (portable: MWPortableMedia) => convertPortableToMedia(portable)
+//   );
-  );
+
-  const [fetchStream, loadingStream, errorStream] = useLoading(
+//   return (
-    (portable: MWPortableMedia) => getStream(portable)
+//     <Paper className="mt-5">
-  );
+//       <div className="flex">
-
+//         <div className="flex-1">
-  useEffect(() => {
+//           <Title>{props.media.title}</Title>
-    (async () => {
+//           <DotList
-      if (mediaPortable) {
+//             className="mt-3 text-sm"
-        setMedia(await fetchMedia(mediaPortable));
+//             content={[
-      }
+//               props.provider.displayName,
-    })();
+//               props.media.mediaType,
-  }, [mediaPortable, setMedia, fetchMedia]);
+//               props.media.year,
-
+//             ]}
-  useEffect(() => {
+//           />
-    (async () => {
+//         </div>
-      if (mediaPortable) {
+//         <div>
-        setStreamUrl(await fetchStream(mediaPortable));
+//           <IconPatch
-      }
+//             icon={Icons.BOOKMARK}
-    })();
+//             active={isBookmarked}
-  }, [mediaPortable, setStreamUrl, fetchStream]);
+//             onClick={() => setItemBookmark(props.media, !isBookmarked)}
-
+//             clickable
-  let playerContent: ReactElement | null = null;
+//           />
-  if (loadingStream) playerContent = <SkeletonVideoPlayer />;
+//         </div>
-  else if (errorStream) playerContent = <SkeletonVideoPlayer error />;
+//       </div>
-  else if (media && streamUrl)
+//       {props.media.mediaType !== MWMediaType.MOVIE ? (
-    playerContent = <StyledMediaView media={media} stream={streamUrl} />;
+//         <Seasons media={props.media} />
-
+//       ) : null}
-  let footerContent: ReactElement | null = null;
+//     </Paper>
-  if (loadingPortable) footerContent = <LoadingMediaFooter />;
+//   );
-  else if (errorPortable) footerContent = <LoadingMediaFooter error />;
+// }
-  else if (mediaPortable && media)
+
-    footerContent = (
+// function LoadingMediaFooter(props: { error?: boolean }) {
-      <StyledMediaFooter
+//   const { t } = useTranslation();
-        provider={
+
-          getProviderFromId(mediaPortable.providerId) as MWMediaProvider
+//   return (
-        }
+//     <Paper className="mt-5">
-        media={media}
+//       <div className="flex">
-      />
+//         <div className="flex-1">
-    );
+//           <div className="mb-2 h-4 w-48 rounded-full bg-denim-500" />
-
+//           <div>
-  return (
+//             <span className="mr-4 inline-block h-2 w-12 rounded-full bg-denim-400" />
-    <>
+//             <span className="mr-4 inline-block h-2 w-12 rounded-full bg-denim-400" />
-      {playerContent}
+//           </div>
-      {footerContent}
+//           {props.error ? (
-    </>
+//             <div className="flex items-center space-x-3">
-  );
+//               <IconPatch icon={Icons.WARNING} className="text-red-400" />
-}
+//               <p>{t("media.invalidUrl")}</p>
+//             </div>
+//           ) : (
+//             <LoadingSeasons />
+//           )}
+//         </div>
+//       </div>
+//     </Paper>
+//   );
+// }
+
+// function MediaViewContent(props: { portable: MWPortableMedia }) {
+//   const mediaPortable = props.portable;
+//   const [streamUrl, setStreamUrl] = useState<MWMediaStream | undefined>();
+//   const [media, setMedia] = useState<MWMedia | undefined>();
+//   const [fetchMedia, loadingPortable, errorPortable] = useLoading(
+//     (portable: MWPortableMedia) => convertPortableToMedia(portable)
+//   );
+//   const [fetchStream, loadingStream, errorStream] = useLoading(
+//     (portable: MWPortableMedia) => getStream(portable)
+//   );
+
+//   useEffect(() => {
+//     (async () => {
+//       if (mediaPortable) {
+//         setMedia(await fetchMedia(mediaPortable));
+//       }
+//     })();
+//   }, [mediaPortable, setMedia, fetchMedia]);
+
+//   useEffect(() => {
+//     (async () => {
+//       if (mediaPortable) {
+//         setStreamUrl(await fetchStream(mediaPortable));
+//       }
+//     })();
+//   }, [mediaPortable, setStreamUrl, fetchStream]);
+
+//   let playerContent: ReactElement | null = null;
+//   if (loadingStream) playerContent = <SkeletonVideoPlayer />;
+//   else if (errorStream) playerContent = <SkeletonVideoPlayer error />;
+//   else if (media && streamUrl)
+//     playerContent = <StyledMediaView media={media} stream={streamUrl} />;
+
+//   let footerContent: ReactElement | null = null;
+//   if (loadingPortable) footerContent = <LoadingMediaFooter />;
+//   else if (errorPortable) footerContent = <LoadingMediaFooter error />;
+//   else if (mediaPortable && media)
+//     footerContent = (
+//       <StyledMediaFooter
+//         provider={
+//           getProviderFromId(mediaPortable.providerId) as MWMediaProvider
+//         }
+//         media={media}
+//       />
+//     );
+
+//   return (
+//     <>
+//       {playerContent}
+//       {footerContent}
+//     </>
+//   );
+// }
 
 export function MediaView() {
   const { t } = useTranslation();
-  const mediaPortable: MWPortableMedia | undefined = usePortableMedia();
+  // const mediaPortable: MWPortableMedia | undefined = usePortableMedia();
   const reactHistory = useHistory();
 
   return (
@@ -230,11 +225,11 @@ export function MediaView() {
           linkText={t("media.arrowText")}
         />
       </Navigation>
-      <NotFoundChecks portable={mediaPortable}>
+      {/* <NotFoundChecks portable={mediaPortable}>
         <div className="container mx-auto mt-40 mb-16 max-w-[1100px]">
           <MediaViewContent portable={mediaPortable as MWPortableMedia} />
         </div>
-      </NotFoundChecks>
+      </NotFoundChecks> */}
     </div>
   );
 }

src/views/TestView.tsx

@@ -1,9 +1,10 @@
-import { searchForMedia } from "@/backend/metadata/search";
+// import { searchForMedia } from "@/backend/metadata/search";
-import { ProgressListenerControl } from "@/components/video/controls/ProgressListenerControl";
+// import { ProgressListenerControl } from "@/components/video/controls/ProgressListenerControl";
-import { SourceControl } from "@/components/video/controls/SourceControl";
+// import { SourceControl } from "@/components/video/controls/SourceControl";
-import { DecoratedVideoPlayer } from "@/components/video/DecoratedVideoPlayer";
+// import { DecoratedVideoPlayer } from "@/components/video/DecoratedVideoPlayer";
-import { MWMediaType } from "@/providers";
+import { useScrape } from "@/hooks/useScrape";
-import { useCallback, useState } from "react";
+// import { MWMediaType } from "@/providers";
+// import { useCallback, useState } from "react";
 
 // test videos: https://gist.github.com/jsturgis/3b19447b304616f18657
 
@@ -24,37 +25,58 @@ import { useCallback, useState } from "react";
 //  - devices: ipadOS
 //  - features: HLS, error handling, preload interactions
 
+// export function TestView() {
+//   const [show, setShow] = useState(true);
+//   const handleClick = useCallback(() => {
+//     setShow((v) => !v);
+//   }, [setShow]);
+
+//   if (!show) {
+//     return <p onClick={handleClick}>Click me to show</p>;
+//   }
+
+//   async function search() {
+//     const test = await searchForMedia({
+//       searchQuery: "tron",
+//       type: MWMediaType.MOVIE,
+//     });
+//     console.log(test);
+//   }
+
+//   return (
+//     <div className="w-[40rem] max-w-full">
+//       <DecoratedVideoPlayer>
+//         <SourceControl
+//           source="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/Sintel.mp4"
+//           type="mp4"
+//         />
+//         <ProgressListenerControl
+//           startAt={283}
+//           onProgress={(a, b) => console.log(a, b)}
+//         />
+//       </DecoratedVideoPlayer>
+//       <p onClick={() => search()}>click me to search</p>
+//     </div>
+//   );
+// }
+
 export function TestView() {
-  const [show, setShow] = useState(true);
+  const { eventLog, pending, stream } = useScrape();
-  const handleClick = useCallback(() => {
-    setShow((v) => !v);
-  }, [setShow]);
-
-  if (!show) {
-    return <p onClick={handleClick}>Click me to show</p>;
-  }
-
-  async function search() {
-    const test = await searchForMedia({
-      searchQuery: "tron",
-      type: MWMediaType.MOVIE,
-    });
-    console.log(test);
-  }
 
   return (
-    <div className="w-[40rem] max-w-full">
+    <div>
-      <DecoratedVideoPlayer>
+      <p>pending: {pending}</p>
-        <SourceControl
+      <p>
-          source="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/Sintel.mp4"
+        stream: {stream?.streamUrl} - {stream?.type} - {stream?.quality}
-          type="mp4"
+      </p>
-        />
+      <hr />
-        <ProgressListenerControl
+      {eventLog.map((v) => (
-          startAt={283}
+        <div className="rounded-xl p-1 text-white">
-          onProgress={(a, b) => console.log(a, b)}
+          <p>
-        />
+            {v.percentage}% - {v.type} - {v.errored ? "ERROR" : "pending"}
-      </DecoratedVideoPlayer>
+          </p>
-      <p onClick={() => search()}>click me to search</p>
+        </div>
+      ))}
     </div>
   );
 }

src/views/notfound/NotFoundChecks.tsx

@@ -1,9 +1,8 @@
 import { ReactElement } from "react";
-import { getProviderMetadata, MWPortableMedia } from "@/providers";
+// import { NotFoundMedia, NotFoundProvider } from "./NotFoundView";
-import { NotFoundMedia, NotFoundProvider } from "./NotFoundView";
 
 export interface NotFoundChecksProps {
-  portable: MWPortableMedia | undefined;
+  // portable: MWPortableMedia | undefined;
   children?: ReactElement;
 }
 
@@ -13,17 +12,17 @@ export interface NotFoundChecksProps {
 export function NotFoundChecks(
   props: NotFoundChecksProps
 ): ReactElement | null {
-  const providerMeta = props.portable
+  // const providerMeta = props.portable
-    ? getProviderMetadata(props.portable.providerId)
+  //   ? getProviderMetadata(props.portable.providerId)
-    : undefined;
+  //   : undefined;
 
-  if (!providerMeta || !providerMeta.exists) {
+  // if (!providerMeta || !providerMeta.exists) {
-    return <NotFoundMedia />;
+  //   return <NotFoundMedia />;
-  }
+  // }
 
-  if (!providerMeta.enabled) {
+  // if (!providerMeta.enabled) {
-    return <NotFoundProvider />;
+  //   return <NotFoundProvider />;
-  }
+  // }
 
   return props.children || null;
 }

src/views/search/HomeView.tsx

@@ -2,7 +2,6 @@ import { useTranslation } from "react-i18next";
 import { Icons } from "@/components/Icon";
 import { SectionHeading } from "@/components/layout/SectionHeading";
 import { MediaGrid } from "@/components/media/MediaGrid";
-import { WatchedMediaCard } from "@/components/media/WatchedMediaCard";
 import {
   getIfBookmarkedFromPortable,
   useBookmarkContext,
@@ -22,12 +21,12 @@ function Bookmarks() {
       icon={Icons.BOOKMARK}
     >
       <MediaGrid>
-        {bookmarks.map((v) => (
+        {/* {bookmarks.map((v) => (
           <WatchedMediaCard
             key={[v.mediaId, v.providerId].join("|")}
             media={v}
           />
-        ))}
+        ))} */}
       </MediaGrid>
     </SectionHeading>
   );
@@ -51,13 +50,13 @@ function Watched() {
       icon={Icons.CLOCK}
     >
       <MediaGrid>
-        {watchedItems.map((v) => (
+        {/* {watchedItems.map((v) => (
           <WatchedMediaCard
             key={[v.mediaId, v.providerId].join("|")}
             media={v}
             series
           />
-        ))}
+        ))} */}
       </MediaGrid>
     </SectionHeading>
   );

src/views/search/SearchResultsPartial.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useMemo, useState } from "react";
 import { useDebounce } from "@/hooks/useDebounce";
-import { MWQuery } from "@/providers";
+import { MWQuery } from "@/backend/metadata/types";
 import { HomeView } from "./HomeView";
 import { SearchLoadingView } from "./SearchLoadingView";
 import { SearchResultsView } from "./SearchResultsView";

src/views/search/SearchResultsView.tsx

@@ -6,8 +6,8 @@ import { SectionHeading } from "@/components/layout/SectionHeading";
 import { MediaGrid } from "@/components/media/MediaGrid";
 import { WatchedMediaCard } from "@/components/media/WatchedMediaCard";
 import { useLoading } from "@/hooks/useLoading";
-import { MWQuery } from "@/providers";
+import { searchForMedia } from "@/backend/metadata/search";
-import { MWSearchResult, searchForMedia } from "@/backend/metadata/search";
+import { MWMediaMeta, MWQuery } from "@/backend/metadata/types";
 import { SearchLoadingView } from "./SearchLoadingView";
 
 function SearchSuffix(props: { failed?: boolean; results?: number }) {
@@ -46,7 +46,7 @@ function SearchSuffix(props: { failed?: boolean; results?: number }) {
 export function SearchResultsView({ searchQuery }: { searchQuery: MWQuery }) {
   const { t } = useTranslation();
 
-  const [results, setResults] = useState<MWSearchResult[]>([]);
+  const [results, setResults] = useState<MWMediaMeta[]>([]);
   const [runSearchQuery, loading, error] = useLoading((query: MWQuery) =>
     searchForMedia(query)
   );