feat: take link screenshot as thumbnail (#1060)

lies-exposed · Nov 21, 2023 · 9b5f915 · 9b5f915
1 parent 2ff0a9e
commit 9b5f915
Show file tree

Hide file tree

Showing 39 changed files with 542 additions and 220 deletions.
diff --git a/packages/@liexp/backend/src/providers/puppeteer.provider.ts b/packages/@liexp/backend/src/providers/puppeteer.provider.ts
@@ -5,7 +5,7 @@ import type * as error from "@liexp/shared/lib/io/http/Error";
 import * as E from "fp-ts/Either";
 import * as TE from "fp-ts/TaskEither";
 import { pipe } from "fp-ts/function";
-import type * as puppeteer from "puppeteer-core";
+import * as puppeteer from "puppeteer-core";
 import { addExtra, type VanillaPuppeteer } from "puppeteer-extra";
 import puppeteerStealth from "puppeteer-extra-plugin-stealth";
 
@@ -107,6 +107,7 @@ type BrowserLaunchOpts = puppeteer.LaunchOptions &
   puppeteer.BrowserLaunchArgumentOptions;
 
 export interface PuppeteerProvider {
+  devices: typeof puppeteer.KnownDevices;
   getBrowser: (
     opts: BrowserLaunchOpts,
   ) => TE.TaskEither<PuppeteerError, puppeteer.Browser>;
@@ -257,6 +258,7 @@ export const GetPuppeteerProvider = (
   };
 
   return {
+    devices: puppeteer.KnownDevices,
     getBrowser,
     goToPage,
     download,

diff --git a/packages/@liexp/backend/src/providers/space/s3.provider.ts b/packages/@liexp/backend/src/providers/space/s3.provider.ts
@@ -1,4 +1,6 @@
 import { S3Client, type S3ClientConfig } from "@aws-sdk/client-s3";
+import { Upload } from "@aws-sdk/lib-storage";
+import { getSignedUrl } from "@aws-sdk/s3-request-presigner";
 import { type Reader } from "fp-ts/Reader";
 import { MakeSpaceProvider, type SpaceProvider } from "./space.provider";
 
@@ -7,6 +9,8 @@ type GetS3ProviderConfig = S3ClientConfig;
 const GetS3Provider: Reader<GetS3ProviderConfig, SpaceProvider> = (config) =>
   MakeSpaceProvider({
     client: new S3Client(config),
+    getSignedUrl,
+    classes: { Upload }
   });
 
 export { GetS3Provider };
diff --git a/packages/@liexp/backend/src/providers/space/space.provider.ts b/packages/@liexp/backend/src/providers/space/space.provider.ts
@@ -16,8 +16,8 @@ import {
   type ListObjectsCommandInput,
   type ListObjectsCommandOutput,
 } from "@aws-sdk/client-s3";
-import { Upload } from "@aws-sdk/lib-storage";
-import { getSignedUrl } from "@aws-sdk/s3-request-presigner";
+import { type Upload } from "@aws-sdk/lib-storage";
+import { type getSignedUrl } from "@aws-sdk/s3-request-presigner";
 import { type Endpoint } from "@aws-sdk/types";
 import * as logger from "@liexp/core/lib/logger";
 import * as TE from "fp-ts/TaskEither";
@@ -90,10 +90,16 @@ export type SpaceProviderImpl = S3Client;
 
 export interface MakeSpaceProviderConfig {
   client: SpaceProviderImpl;
+  getSignedUrl: typeof getSignedUrl,
+  classes: {
+  Upload: typeof Upload,
+  }
 }
 
 export const MakeSpaceProvider = ({
   client,
+  getSignedUrl,
+  classes
 }: MakeSpaceProviderConfig): SpaceProvider => {
   return {
     getEndpoint: (bucket, path) => {
@@ -145,15 +151,15 @@ export const MakeSpaceProvider = ({
     upload(input) {
       return pipe(
         TE.tryCatch(async () => {
-          const parallelUploads3 = new Upload({
+          const parallelUploads3 = new classes.Upload({
             client,
             params: { ...input },
             queueSize: 4, // optional concurrency configuration
             partSize: 1024 * 1024 * 5, // optional size of each part, in bytes, at least 5MB
             leavePartsOnError: false, // optional manually handle dropped parts
           });
-
-          return await parallelUploads3.done();
+          const result = await parallelUploads3.done();
+          return result;
         }, toError),
         TE.filterOrElse(
           (

diff --git a/packages/@liexp/shared/src/endpoints/link.endpoints.ts b/packages/@liexp/shared/src/endpoints/link.endpoints.ts
@@ -82,6 +82,16 @@ export const UpdateMetadata = Endpoint({
   Output: OneLinkOutput,
 });
 
+export const TakeLinkScreenshot = Endpoint({
+  Method: "POST",
+  getPath: ({ id }) => `/links/${id}/screenshot`,
+  Input: {
+    Params: t.type({ id: UUID }),
+    Body: Link.EditLink,
+  },
+  Output: OneLinkOutput,
+});
+
 export const links = ResourceEndpoints({
   Get,
   List,
@@ -91,5 +101,6 @@ export const links = ResourceEndpoints({
   Custom: {
     CreateMany,
     Submit,
+    TakeLinkScreenshot
   },
 });
diff --git a/packages/@liexp/shared/src/io/http/Media.ts b/packages/@liexp/shared/src/io/http/Media.ts
@@ -11,7 +11,8 @@ export type MEDIA = t.TypeOf<typeof MEDIA>;
 
 const JpgType = t.literal("image/jpg");
 const JpegType = t.literal("image/jpeg");
-const PngType = t.literal("image/png");
+export const PngType = t.literal("image/png");
+export type PngType = t.TypeOf<typeof PngType>
 
 /** audio types */
 export const MP3Type = t.literal("audio/mp3");

diff --git a/packages/@liexp/shared/src/tests/arbitrary/Media.arbitrary.ts b/packages/@liexp/shared/src/tests/arbitrary/Media.arbitrary.ts
@@ -41,7 +41,7 @@ export const MediaArb: tests.fc.Arbitrary<http.Media.Media> = tests
           keywords: [],
           featuredIn: [],
           areas: [],
-          type: "image/png",
+          type: http.Media.PngType.value,
           creator: undefined,
           extra: undefined,
           socialPosts: undefined,

diff --git a/packages/@liexp/ui/src/components/admin/links/AdminLinks.tsx b/packages/@liexp/ui/src/components/admin/links/AdminLinks.tsx
@@ -1,46 +1,24 @@
-import { ImageType } from "@liexp/shared/lib/io/http/Media";
 import { checkIsAdmin } from "@liexp/shared/lib/utils/user.utils";
 import * as React from "react";
 import {
   BooleanInput,
-  Button,
   Create,
   CreateButton,
-  Datagrid,
   DateInput,
-  FormTab,
   List,
   LoadingPage,
-  ReferenceManyField,
   SimpleForm,
-  TabbedForm,
-  TextField,
   TextInput,
-  useDataProvider,
   useGetIdentity,
   usePermissions,
-  useRecordContext,
-  useRefresh,
   type ListProps,
-  type RaRecord,
 } from "react-admin";
-import { Box, Grid, Toolbar } from "../../mui";
-import { SocialPostFormTabContent } from '../SocialPost/SocialPostFormTabContent';
-import { DangerZoneField } from "../common/DangerZoneField";
-import { EditForm } from "../common/EditForm";
+import { Box } from "../../mui";
 import URLMetadataInput from "../common/URLMetadataInput";
-import { CreateEventFromLinkButton } from "../events/CreateEventFromLinkButton";
 import ReferenceArrayEventInput from "../events/ReferenceArrayEventInput";
-import ReferenceManyEventField from "../events/ReferenceManyEventField";
 import ReferenceGroupInput from "../groups/ReferenceGroupInput";
-import ReferenceArrayKeywordInput from "../keywords/ReferenceArrayKeywordInput";
 import { SearchLinksButton } from "../links/SearchLinksButton";
-import { MediaField } from "../media/MediaField";
-import ReferenceMediaInput from "../media/input/ReferenceMediaInput";
-import LinkPreview from "../previews/LinkPreview";
-import ReferenceUserInput from "../user/ReferenceUserInput";
 import { LinkDataGrid } from './LinkDataGrid';
-import { LinkTGPostButton } from "./button/LinkTGPostButton";
 
 const RESOURCE = "links";
 
@@ -93,139 +71,6 @@ export const LinkList: React.FC<ListProps> = (props) => {
   );
 };
 
-const transformLink = ({ newEvents, ...r }: RaRecord): RaRecord => {
-  return {
-    ...r,
-    image: r.image.id ? r.image.id : undefined,
-    provider: r.provider === "" ? undefined : r.provider,
-    events: (r.events ?? []).concat(newEvents ?? []),
-  };
-};
-
-const EditTitle: React.FC = () => {
-  const record = useRecordContext();
-  return <span>Link {record?.title}</span>;
-};
-
-const OverrideThumbnail: React.FC = () => {
-  const refresh = useRefresh();
-  const record = useRecordContext();
-  const dataProvider = useDataProvider();
-  return (
-    <Button
-      label="resources.links.actions.override_thumbnail"
-      variant="contained"
-      onClick={() => {
-        void dataProvider
-          .put(
-            `/links/${record?.id}`,
-            transformLink({
-              ...record,
-              overrideThumbnail: true,
-            }),
-          )
-          .then(() => {
-            refresh();
-          });
-      }}
-    />
-  );
-};
-
-const UpdateMetadataButton: React.FC = () => {
-  const refresh = useRefresh();
-  const record = useRecordContext();
-  const dataProvider = useDataProvider();
-  return (
-    <Button
-      label="resources.links.actions.update_metadata"
-      variant="contained"
-      onClick={() => {
-        void dataProvider.put(`/links/${record?.id}/metadata`).then(() => {
-          refresh();
-        });
-      }}
-    />
-  );
-};
-
-export const LinkEdit: React.FC = () => {
-  const record = useRecordContext();
-  const { permissions, isLoading: isLoadingPermissions } = usePermissions();
-  if (isLoadingPermissions) {
-    return <LoadingPage />;
-  }
-
-  const isAdmin = checkIsAdmin(permissions);
-
-  return (
-    <EditForm
-      redirect={false}
-      title={<EditTitle />}
-      actions={
-        <Toolbar>
-          <UpdateMetadataButton />
-          <LinkTGPostButton />
-        </Toolbar>
-      }
-      preview={<LinkPreview record={record} />}
-      transform={transformLink}
-    >
-      <TabbedForm>
-        <FormTab label="General">
-          <Grid container spacing={2}>
-            <Grid item md={6}>
-              <TextInput source="title" fullWidth />
-              <URLMetadataInput source="url" type="Link" />
-              <DateInput source="publishDate" />
-              <MediaField
-                source="image.thumbnail"
-                sourceType="image/jpeg"
-                controls={false}
-              />
-              <ReferenceMediaInput
-                source="image.id"
-                allowedTypes={ImageType.types.map((t) => t.value)}
-              />
-              <OverrideThumbnail />
-              <TextInput source="description" fullWidth multiline />
-              <ReferenceGroupInput source="provider" />
-              {isAdmin && <DangerZoneField />}
-            </Grid>
-            <Grid item md={6}>
-              <ReferenceArrayKeywordInput source="keywords" showAdd={true} />
-              {isAdmin && <ReferenceUserInput source="creator" />}
-            </Grid>
-          </Grid>
-        </FormTab>
-        <FormTab label="Events">
-          <CreateEventFromLinkButton />
-          <ReferenceArrayEventInput source="newEvents" defaultValue={[]} />
-          <ReferenceManyEventField
-            target="links[]"
-            filter={{ withDrafts: true }}
-          />
-        </FormTab>
-        <FormTab label="Event Suggestions">
-          <ReferenceManyField
-            reference="events/suggestions"
-            filter={{ links: record?.id ? [record.id] : [] }}
-            target="links[]"
-          >
-            <Datagrid rowClick="edit">
-              <TextField source="id" />
-              <TextField source="payload.event.payload.title" />
-            </Datagrid>
-          </ReferenceManyField>
-        </FormTab>
-        <FormTab label="Social Posts">
-          <SocialPostFormTabContent type='links' source="id" />
-        </FormTab>
-      </TabbedForm>
-    </EditForm>
-  );
-};
-
 export const LinkCreate: React.FC = () => {
   return (
     <Create title="Create a Link">

diff --git a/packages/@liexp/ui/src/components/admin/links/EditTitle.tsx b/packages/@liexp/ui/src/components/admin/links/EditTitle.tsx
@@ -0,0 +1,8 @@
+import * as React from "react";
+import { useRecordContext } from "react-admin";
+
+
+export const EditTitle: React.FC = () => {
+  const record = useRecordContext();
+  return <span>Link {record?.title}</span>;
+};