fix: migrate media location and thumbnails to agnostic space provider

Author: ascariandrea

packages/@liexp/backend/src/flows/event/createEventFromURL.flow.ts

@@ -7,6 +7,7 @@ import * as TE from "fp-ts/lib/TaskEither.js";
 import { Equal } from "typeorm";
 import { type ConfigContext } from "../../context/config.context.js";
 import { type DatabaseContext } from "../../context/db.context.js";
+import { type ENVContext } from "../../context/env.context.js";
 import { type FSClientContext } from "../../context/fs.context.js";
 import { type NERProviderContext } from "../../context/index.js";
 import { type LoggerContext } from "../../context/logger.context.js";
@@ -24,7 +25,8 @@ export type CreateEventFromURLContext = LoggerContext &
   NERProviderContext &
   DatabaseContext &
   URLMetadataContext &
-  PuppeteerProviderContext;
+  PuppeteerProviderContext &
+  ENVContext;
 
 export const createEventFromURL = <C extends CreateEventFromURLContext>(
   user: UserEntity,

packages/@liexp/backend/src/flows/event/extractEventFromURL.flow.ts

@@ -17,6 +17,7 @@ import { type Metadata } from "page-metadata-parser";
 import type * as puppeteer from "puppeteer-core";
 import { type ConfigContext } from "../../context/config.context.js";
 import { type DatabaseContext } from "../../context/db.context.js";
+import { type ENVContext } from "../../context/env.context.js";
 import { type FSClientContext } from "../../context/fs.context.js";
 import { type NERProviderContext } from "../../context/index.js";
 import { type LoggerContext } from "../../context/logger.context.js";
@@ -166,7 +167,8 @@ const extractByProvider =
       ConfigContext &
       FSClientContext &
       NERProviderContext &
-      DatabaseContext,
+      DatabaseContext &
+      ENVContext,
   >(
     p: puppeteer.Page,
     host: string,
@@ -201,7 +203,7 @@ const extractByProvider =
           TE.Do,
           TE.bind("link", () => {
             return pipe(
-              LinkIO.decodeSingle(l),
+              LinkIO.decodeSingle(l, ctx.env.SPACE_ENDPOINT),
               fp.E.fold(() => fp.O.none, fp.O.some),
               fp.TE.right,
             );
@@ -276,7 +278,8 @@ export const extractEventFromURL =
       FSClientContext &
       NERProviderContext &
       DatabaseContext &
-      URLMetadataContext,
+      URLMetadataContext &
+      ENVContext,
   >(
     p: puppeteer.Page,
     user: UserEntity,

packages/@liexp/backend/src/flows/tg/parseVideo.flow.ts

@@ -73,7 +73,7 @@ export const parseVideo =
                 TE.mapLeft(ServerError.fromUnknown),
               );
             }),
-            TE.map((r) => ensureHTTPS(r.Location)),
+            TE.map((r) => ensureHTTPS(ctx.env.SPACE_ENDPOINT, r.Location)),
           ),
       ),
     );

packages/@liexp/backend/src/io/link.io.ts

@@ -9,6 +9,7 @@ import {
   MediaExtraMonoid,
 } from "@liexp/shared/lib/io/http/Media/MediaExtra.js";
 import * as io from "@liexp/shared/lib/io/index.js";
+import { ensureHTTPS } from "@liexp/shared/lib/utils/url.utils.js";
 import { IOError } from "@ts-endpoint/core";
 import { Schema } from "effect";
 import * as E from "fp-ts/lib/Either.js";
@@ -17,6 +18,7 @@ import { IOCodec } from "./DomainCodec.js";
 
 const toLinkIO = (
   link: LinkEntity,
+  spaceEndpoint: string,
 ): E.Either<_DecodeError, io.http.Link.Link> => {
   return pipe(
     {
@@ -36,7 +38,12 @@ const toLinkIO = (
                     link.image.extra,
                   )
                 : undefined,
-              thumbnail: link.image.thumbnail ?? undefined,
+              location: link.image.location
+                ? ensureHTTPS(spaceEndpoint, link.image.location)
+                : undefined,
+              thumbnail: link.image.thumbnail
+                ? ensureHTTPS(spaceEndpoint, link.image.thumbnail)
+                : undefined,
               links: link.image.links ?? [],
               events: (link.image.events ?? []).map((e) =>
                 Schema.is(UUID)(e) ? e : e.id,

packages/@liexp/backend/src/io/media.io.ts

@@ -30,9 +30,12 @@ const encodeMedia = (
   return pipe(
     Schema.encodeEither(io.http.Media.AdminMedia)({
       ...media,
+      location: ensureHTTPS(spaceEndpoint, media.location),
       label: media.label ?? media.location,
       description: media.description ?? undefined,
-      thumbnail: media.thumbnail ? ensureHTTPS(media.thumbnail) : undefined,
+      thumbnail: media.thumbnail
+        ? ensureHTTPS(spaceEndpoint, media.thumbnail)
+        : undefined,
       transferable: !media.location.includes(spaceEndpoint),
       creator: Schema.is(UUID)(media.creator)
         ? media.creator
@@ -65,7 +68,7 @@ const decodeMedia = (
       ...media,
       label: media.label ?? media.location,
       description: media.description ?? undefined,
-      location: ensureHTTPS(media.location),
+      location: ensureHTTPS(spaceEndpoint, media.location),
       creator: Schema.is(UUID)(media.creator)
         ? media.creator
         : media.creator?.id,
@@ -76,8 +79,10 @@ const decodeMedia = (
       areas: (media.areas ?? []).map((a) => (Schema.is(UUID)(a) ? a : a.id)),
       featuredInStories: media.featuredInStories ?? [],
       socialPosts: media.socialPosts ?? [],
-      thumbnail: media.thumbnail ? ensureHTTPS(media.thumbnail) : undefined,
-      transferable: !media.location.includes(spaceEndpoint),
+      thumbnail: media.thumbnail
+        ? ensureHTTPS(spaceEndpoint, media.thumbnail)
+        : undefined,
+      transferable: !media.location.startsWith("/"),
       createdAt: media.createdAt.toISOString(),
       updatedAt: media.updatedAt.toISOString(),
       deletedAt: media.deletedAt?.toISOString() ?? undefined,

packages/@liexp/backend/src/providers/puppeteer.provider.ts

@@ -172,10 +172,11 @@ export const GetPuppeteerProvider = (
         });
         b.on("disconnected", (e) => {
           puppeteerLogger.debug.log(
-            "browser disconnected %ds",
+            "browser disconnected %ds: %O",
             differenceInSeconds(new Date(), connectedAt, {
               roundingMethod: "ceil",
             }),
+            e,
           );
         });
         return b;

packages/@liexp/backend/src/providers/wikipedia/wikipedia.provider.ts

@@ -52,6 +52,7 @@ interface WikipediaProviderOpts {
   logger: Logger;
   client: Bot;
   restClient: AxiosInstance;
+  spaceEndpoint: string;
 }
 
 const toMWError = (e: unknown): Error => {
@@ -62,6 +63,7 @@ export const WikipediaProvider = ({
   logger,
   client,
   restClient,
+  spaceEndpoint,
 }: WikipediaProviderOpts): WikipediaProvider => {
   logger.debug.log("Wikipedia provider created");
 
@@ -127,7 +129,7 @@ export const WikipediaProvider = ({
             items.filter((i) => i.type === "image"),
             fp.A.head,
             fp.O.chainNullableK((r) => r.srcset?.[0]?.src),
-            fp.O.map((url) => ensureHTTPS(url)),
+            fp.O.map((url) => ensureHTTPS(spaceEndpoint, url)),
             fp.O.toUndefined,
           );
         }),

packages/@liexp/shared/src/utils/url.utils.ts

@@ -1,7 +1,8 @@
+import { Schema } from "effect/index";
 import * as R from "fp-ts/lib/Record.js";
 import { pipe } from "fp-ts/lib/function.js";
 import qs from "query-string";
-import { type URL } from "../io/http/Common/URL.js";
+import { URL } from "../io/http/Common/URL.js";
 
 export const sanitizeURL = (url: URL): URL => {
   const [cleanURL, query] = url.split("?");
@@ -14,20 +15,28 @@ export const sanitizeURL = (url: URL): URL => {
   );
 
   if (!R.isEmpty(cleanQuery)) {
-    return `${cleanURL}?${qs.stringify(cleanQuery)}` as URL;
+    return Schema.decodeSync(URL)(`${cleanURL}?${qs.stringify(cleanQuery)}`);
   }
 
-  return cleanURL as URL;
+  return Schema.decodeSync(URL)(cleanURL);
 };
 
-export const ensureHTTPS = (url: string): URL => {
-  if (url.startsWith("https://") || url.startsWith("http://")) {
-    return url as URL;
+const encodeWithSpaceEndpoint = (spaceHost: string, url: string): string => {
+  if (url.startsWith("//")) {
+    return `https:${url}`;
   }
 
-  if (url.startsWith("//")) {
-    return `https:${url}` as URL;
+  if (url.startsWith("/")) {
+    return `https://${spaceHost}${url}`;
+  }
+
+  if (url.startsWith("https://") || url.startsWith("http://")) {
+    return url;
   }
 
-  return `https://${url}` as URL;
+  return `https://${url}`;
+};
+
+export const ensureHTTPS = (spaceHost: string, url: string): URL => {
+  return pipe(encodeWithSpaceEndpoint(spaceHost, url), Schema.decodeSync(URL));
 };

packages/@liexp/ui/src/components/Cards/Events/EventCard.tsx

@@ -87,6 +87,11 @@ const EventCard = <E extends SearchEvent.SearchEvent>({
                   height: props.style?.maxHeight ?? 150,
                   width: isVertical ? "100%" : 150,
                 }}
+                onError={(e) => {
+                  if (defaultImage && e.currentTarget.src !== defaultImage) {
+                    e.currentTarget.src = defaultImage;
+                  }
+                }}
               />
             </Stack>
           ) : null}

packages/@liexp/ui/src/components/Media/ExpandableImageElement.tsx

@@ -64,6 +64,7 @@ interface ExpandableImageElementProps {
   onLoad?: (rect: DOMRect) => void;
   onClick?: (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
   disableZoom?: boolean;
+  fallbackImage?: string;
 }
 
 const ExpandableImageElement: React.FC<ExpandableImageElementProps> = ({
@@ -73,6 +74,7 @@ const ExpandableImageElement: React.FC<ExpandableImageElementProps> = ({
   onLoad,
   onClick,
   disableZoom = false,
+  fallbackImage,
 }) => {
   const [modal, showModal] = useModal({ disablePortal: false });
 
@@ -135,6 +137,11 @@ const ExpandableImageElement: React.FC<ExpandableImageElementProps> = ({
           const rect = e.currentTarget.getBoundingClientRect();
           onLoad?.(rect);
         }}
+        onError={(e) => {
+          if (fallbackImage) {
+            e.currentTarget.src = fallbackImage;
+          }
+        }}
         loading="lazy"
       />
       {!disableZoom ? (