facebook thumbnail

apps/frontend/src/components/launches/providers/facebook/facebook.provider.tsx

@@ -1,3 +1,28 @@
+import { FC } from 'react';
 import { withProvider } from '@gitroom/frontend/components/launches/providers/high.order.provider';
+import { useSettings } from '@gitroom/frontend/components/launches/helpers/use.values';
+import { MediaComponent } from '@gitroom/frontend/components/media/media.component';
 
-export default withProvider(null, undefined, undefined, undefined, 63206);
+const FacebookSettings: FC = () => {
+  const { register } = useSettings();
+  return (
+    <div className="mt-[20px]">
+      <MediaComponent
+        type="image"
+        width={1280}
+        height={720}
+        label="Video Thumbnail"
+        description="Thumbnail for video posts (optional)"
+        {...register('thumbnail')}
+      />
+    </div>
+  );
+};
+
+export default withProvider(
+  FacebookSettings,
+  undefined,
+  undefined,
+  undefined,
+  63206
+);

libraries/nestjs-libraries/src/integrations/social/facebook.provider.ts

@@ -71,6 +71,34 @@ export class FacebookProvider extends SocialAbstract implements SocialProvider {
     };
   }
 
+  async uploadVideoThumbnail(
+    accessToken: string,
+    videoId: string,
+    thumbnailUrl: string
+  ): Promise<void> {
+    const response = await this.fetch(
+      `https://graph.facebook.com/v20.0/${videoId}/thumbnails`,
+      {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({
+          access_token: accessToken,
+          is_preferred: true,
+          source: thumbnailUrl,
+        }),
+      }
+    );
+
+    if (!response.ok) {
+      const errorData = await response.json();
+      throw new Error(
+        `Failed to upload video thumbnail: ${JSON.stringify(errorData)}`
+      );
+    }
+  }
+
   async authenticate(params: {
     code: string;
     codeVerifier: string;
@@ -202,6 +230,13 @@ export class FacebookProvider extends SocialAbstract implements SocialProvider {
 
       finalUrl = 'https://www.facebook.com/reel/' + videoId;
       finalId = videoId;
+      if (firstPost.settings?.thumbnail?.url) {
+        await this.uploadVideoThumbnail(
+          accessToken,
+          videoId,
+          firstPost.settings.thumbnail.url
+        );
+      }
     } else {
       const uploadPhotos = !firstPost?.media?.length
         ? []

libraries/nestjs-libraries/src/integrations/social/social.integrations.interface.ts

@@ -77,7 +77,11 @@ export type PostResponse = {
 export type PostDetails<T = any> = {
   id: string;
   message: string;
-  settings: T;
+  settings: T & {
+    thumbnail?: {
+      url: string;
+    };
+  };
   media?: MediaContent[];
   poll?: PollDetails;
 };