fix(proxy): refactor cached progress and handle proxy on web

Author: dvcol

src/services/trakt.service.ts

@@ -1,4 +1,4 @@
-import { type BaseCacheOption, type BaseInit, type CacheResponse, getCachedFunction, type TypedResponse } from '@dvcol/base-http-client';
+import { type BaseCacheOption, type CacheResponse } from '@dvcol/base-http-client';
 
 import { CacheRetention } from '@dvcol/common-utils/common/cache';
 import { DateUtils } from '@dvcol/common-utils/common/date';
@@ -13,7 +13,7 @@ import {
   type TmdbPaginatedData,
   type TmdbParamPagination,
 } from '@dvcol/tmdb-http-client/models';
-import { isResponseOk, TraktClient } from '@dvcol/trakt-http-client';
+import { TraktClient } from '@dvcol/trakt-http-client';
 
 import { TraktApiExtended } from '@dvcol/trakt-http-client/models';
 
@@ -58,21 +58,19 @@ import type {
 } from '@dvcol/trakt-http-client/models';
 
 import type { ImagePayload } from '~/models/poster.model';
-import type { ProgressItem } from '~/models/progress.model';
 import type { SettingsAuth, UserSetting } from '~/models/trakt-service.model';
 
 import { ErrorService } from '~/services/error.service';
 import { LoadingBarService } from '~/services/loading-bar.service';
 import { Logger } from '~/services/logger.service';
 import { tmdbUsedApi } from '~/services/tmdb.used.api';
 import { traktUsedApi } from '~/services/trakt-used.api';
-import { ExternaLinks } from '~/settings/external.links';
 import { tmdbClientSettings } from '~/settings/tmdb.api';
 import { traktClientSettings } from '~/settings/traktv.api';
 import { useAuthSettingsStore } from '~/stores/settings/auth.store';
 import { useUserSettingsStore } from '~/stores/settings/user.store';
 import { CachePrefix, ChromeCacheStore } from '~/utils/cache.utils';
-import { cancellablePaginatedWriteJson, getSessionUser } from '~/utils/trakt-service.utils';
+import { cancellablePaginatedWriteJson, getCachedProgressEndpoint, getSessionUser } from '~/utils/trakt-service.utils';
 
 const shouldEvict = (cache?: CacheResponse<unknown>, date?: string | number | Date): boolean => {
   // no cache skip
@@ -353,42 +351,7 @@ export class TraktService {
     return { data: await response.json(), pagination: response.pagination };
   }
 
-  private static cachedProgress = getCachedFunction(
-    // @ts-expect-error -- CancellablePromise extends promise
-    async (init?: BaseInit): CancellablePromise<TypedResponse<ProgressItem[]>> => {
-      const response = await fetch(ExternaLinks.trakt.onDeck, {
-        credentials: 'include',
-        ...init,
-      });
-
-      isResponseOk(response);
-
-      const htmlString = await response.text();
-      const htmlDoc = new DOMParser().parseFromString(htmlString, 'text/html');
-      const data = Array.from(htmlDoc.querySelectorAll<HTMLAnchorElement>('a[class="watch"]')).map(
-        a => ({ ...a.dataset }) as unknown as ProgressItem,
-      );
-
-      return new Response(JSON.stringify(data)) as TypedResponse<ProgressItem[]>;
-    },
-    {
-      cache: this.caches.trakt,
-      retention: CacheRetention.Hour * 2,
-      key: (param, init) => {
-        return JSON.stringify({
-          template: {
-            method: 'GET',
-            url: ExternaLinks.trakt.onDeck,
-          },
-          param,
-          init: {
-            credentials: 'include',
-            ...init,
-          },
-        });
-      },
-    },
-  );
+  private static cachedProgress = getCachedProgressEndpoint(this.caches.trakt);
 
   static progress = {
     async onDeck() {

src/settings/external.links.ts

@@ -2,7 +2,7 @@ export const ExternaLinks = {
   trakt: {
     production: 'https://trakt.tv/',
     staging: 'https://staging.trakt.tv/',
-    onDeck: 'https://trakt.tv/dashboard/on_deck',
+    onDeck: (origin: string = 'https://trakt.tv') => `${origin}/dashboard/on_deck`,
     signOut: 'https://trakt.tv/auth/signout',
   },
   tmdb: 'https://www.themoviedb.org/',

src/settings/traktv.api.ts

@@ -38,7 +38,7 @@ const traktClientSettings: TraktClientSettings = {
 if (!chromeRuntimeId) {
   traktClientSettings.redirect_uri = window.location.href.split('#').at(0)?.replace(/\/$/, '') ?? traktClientSettings.redirect_uri;
   traktClientSettings.corsProxy = WebConfig.CorsProxy;
-  traktClientSettings.corsPrefix = WebConfig.CorsPrefix.trakt;
+  traktClientSettings.corsPrefix = WebConfig.CorsPrefix.ApiTrakt;
 }
 
 export { traktClientSettings };

src/settings/web.config.ts

@@ -1,7 +1,8 @@
 export const WebConfig = {
   CorsProxy: 'https://fastify-cors-proxy.vercel.app',
   CorsPrefix: {
-    trakt: 'api-trakt',
-    tmdb: 'tmdb',
+    Trakt: 'trakt',
+    ApiTrakt: 'api-trakt',
+    Tmdb: 'tmdb',
   },
 };

src/utils/trakt-service.utils.ts

@@ -1,4 +1,10 @@
+import { type BaseInit, getCachedFunction, type TypedResponse } from '@dvcol/base-http-client';
+import { CacheRetention } from '@dvcol/common-utils/common/cache';
+
 import { getJsonWriter } from '@dvcol/common-utils/common/save';
+
+import { isResponseOk } from '@dvcol/trakt-http-client';
+
 import {
   TraktApiExtended,
   type TraktApiParamsExtended,
@@ -8,15 +14,24 @@ import {
 } from '@dvcol/trakt-http-client/models';
 
 import { getCookie } from '@dvcol/web-extension-utils/chrome/cookie';
+
+import { chromeRuntimeId } from '@dvcol/web-extension-utils/chrome/runtime';
 import { reactive, ref, type Ref } from 'vue';
 
+import type { CacheStore } from '@dvcol/common-utils';
 import type { RecursiveRecord } from '@dvcol/common-utils/common';
 import type { JsonWriterOptions } from '@dvcol/common-utils/common/save';
 
+import type { CancellablePromise } from '@dvcol/common-utils/http/fetch';
+
+import type { ProgressItem } from '~/models/progress.model';
+
 import { PageSize } from '~/models/page-size.model';
 
 import { ExternaLinks } from '~/settings/external.links';
 
+import { WebConfig } from '~/settings/web.config';
+
 type PaginatedQuery = TraktApiParamsExtended & TraktApiParamsPagination;
 export const paginatedWriteJson = async <Q extends PaginatedQuery = PaginatedQuery, T extends RecursiveRecord = RecursiveRecord>(
   fetch: (query: Q) => Promise<TraktApiResponse<T>>,
@@ -68,8 +83,41 @@ export const cancellablePaginatedWriteJson = <Q extends PaginatedQuery = Paginat
 export const getSessionUser = async (): Promise<string | undefined> => {
   if (!getCookie) return;
   const cookie = await getCookie({
-    url: ExternaLinks.trakt.onDeck,
+    url: ExternaLinks.trakt.onDeck(),
     name: 'trakt_username',
   });
   return cookie?.value;
 };
+
+export const getCachedProgressEndpoint = (cache: CacheStore<TraktApiResponse>) => {
+  const origin = chromeRuntimeId ? undefined : `${WebConfig.CorsProxy}/${WebConfig.CorsPrefix.Trakt}`;
+  const url: string = ExternaLinks.trakt.onDeck(origin);
+  const baseInit: BaseInit = { credentials: 'include' };
+  return getCachedFunction(
+    // @ts-expect-error -- CancellablePromise extends promise
+    async (init?: BaseInit): CancellablePromise<TypedResponse<ProgressItem[]>> => {
+      const response = await fetch(url, { ...baseInit, ...init });
+
+      isResponseOk(response);
+
+      const htmlString = await response.text();
+      const htmlDoc = new DOMParser().parseFromString(htmlString, 'text/html');
+      const data = Array.from(htmlDoc.querySelectorAll<HTMLAnchorElement>('a[class="watch"]')).map(
+        a => ({ ...a.dataset }) as unknown as ProgressItem,
+      );
+
+      return new Response(JSON.stringify(data)) as TypedResponse<ProgressItem[]>;
+    },
+    {
+      cache,
+      retention: CacheRetention.Hour * 2,
+      key: (param, init) => {
+        return JSON.stringify({
+          template: { method: 'GET', url },
+          param,
+          init: { ...baseInit, ...init },
+        });
+      },
+    },
+  );
+};