Generate video from web app

deployment-helper · Nov 27, 2023 · 4f08919 · 4f08919
1 parent c00865e
commit 4f08919
Show file tree

Hide file tree

Showing 6 changed files with 46 additions and 7 deletions.
diff --git a/app/auth/layout.tsx b/app/auth/layout.tsx
@@ -17,8 +17,10 @@ export const AuthLayout: FC<{
     }
     const apiServer = document.querySelector("[data-store='apiServer']")
       ?.textContent;
-    if (apiServer && apiServer) {
-      addServer(apiServer);
+    const batchApiServer = document.querySelector("[data-store='batchApiServer']")
+      ?.textContent;
+    if (apiServer && batchApiServer) {
+      addServer(apiServer,batchApiServer);
     }
   }, [addServer, addUser]);
 

diff --git a/app/auth/slides/layout.tsx b/app/auth/slides/layout.tsx
@@ -13,6 +13,7 @@ export const SlidesLayout: FC<{ children: ReactNode }> = async ({
         <div style={{ display: "none" }}>
           <div data-store="addUser">{JSON.stringify(user)}</div>
           <div data-store="apiServer">{process.env.API_SERVER}</div>
+          <div data-store="batchApiServer">{process.env.BATCH_API_SERVER}</div>
         </div>
 
         <Header

diff --git a/app/auth/slides/page.tsx b/app/auth/slides/page.tsx
@@ -25,6 +25,7 @@ const Slides: FC = () => {
   const currentProject = useSlidesStore((store) => store.currentProject);
   const presentations = useSlidesStore((store) => store.presentations);
   const apiServer = useSlidesStore((store) => store.apiServer);
+  const batchApiServer =useSlidesStore((store) => store.batchApiServer);
 
   const refreshList = () => {
     if (currentProject) {
@@ -35,6 +36,9 @@ const Slides: FC = () => {
   const generateAudio = (presentation: IPresentation) => {
     ServerClient.generateAudio(apiServer as string, presentation);
   };
+  const generateVideo = (presentation: IPresentation) => {
+    ServerClient.generateVideo(batchApiServer as string, presentation,`${location.protocol}//${location.host}/auth/slides/${presentation.project.projectId}?updatedAt=${presentation.updatedAt}`);
+  };
 
   const columns: TableColumnDefinition<IPresentation>[] = [
     createTableColumn<IPresentation>({
@@ -74,9 +78,9 @@ const Slides: FC = () => {
       },
     }),
     createTableColumn<IPresentation>({
-      columnId: "Auido",
+      columnId: "Audio",
       renderHeaderCell: () => {
-        return <Subtitle2>Auido</Subtitle2>;
+        return <Subtitle2>Audio</Subtitle2>;
       },
       renderCell: (item) => {
         return item.isAudioGenerated ? (
@@ -93,6 +97,26 @@ const Slides: FC = () => {
         );
       },
     }),
+    createTableColumn<IPresentation>({
+      columnId: "Video",
+      renderHeaderCell: () => {
+        return <Subtitle2>Video</Subtitle2>;
+      },
+      renderCell: (item) => {
+        return item.isVideoGenerated ? (
+            <CheckmarkCircle20Filled className="text-green-800" />
+        ) : (
+            <Button
+                appearance="outline"
+                onClick={() => {
+                  generateVideo(item);
+                }}
+            >
+              Generate
+            </Button>
+        );
+      },
+    }),
     createTableColumn<IPresentation>({
       columnId: "Duration",
       renderHeaderCell: () => {

diff --git a/src/server-client.ts b/src/server-client.ts
@@ -107,4 +107,13 @@ export class ServerClient {
     const url = `${apiServer}/slides/generateAudios`;
     ServerClient.send(url, presentation, HttpMethod.POST);
   }
+
+  public static async generateVideo(
+      apiServer: string,
+      presentation: IPresentation,
+      presentationUrl:string,
+  ) {
+    const url = `${apiServer}/video/generate`;
+    ServerClient.send(url, {...presentation,url:presentationUrl, pid:presentation.id}, HttpMethod.POST);
+  }
 }
diff --git a/src/store.ts b/src/store.ts
@@ -12,8 +12,8 @@ import { ServerClient } from "./server-client";
 export const useSlidesStore = create<IStore>()(
   devtools(
     (set, get) => ({
-      addServer: (server: string) =>
-        set((state) => ({ ...state, apiServer: server })),
+      addServer: (server: string,batchApiServer:string) =>
+        set((state) => ({ ...state, apiServer: server, batchApiServer:batchApiServer })),
       addUser: (user) => {
         set((store) => ({
           ...store,
@@ -59,6 +59,7 @@ export const useSlidesStore = create<IStore>()(
             s3File: pitem.s3File,
             s3MetaFile: pitem.s3MetaFile,
             isAudioGenerated: pitem.isAudioGenerated,
+            isVideoGenerated:pitem.isVideoGenerated,
           };
           return presentation;
         });

diff --git a/src/types.ts b/src/types.ts
@@ -72,18 +72,20 @@ export interface IPresentation {
   s3MetaFile: string;
   user: IUserWithProjectTypes;
   isAudioGenerated?: boolean;
+  isVideoGenerated?:boolean;
 }
 
 export interface IStore {
   apiServer?: string;
+  batchApiServer?:string;
   currentProject?: IProject;
   user?: IUserWithProjectTypes;
   presentations?: Array<IPresentation>;
   fullPresentations?: Map<string, any>;
   createSlide?: {
     editorFile: any;
   };
-  addServer(server: string): void;
+  addServer(server: string, batchApiServer:string): void;
   addEditorFile(content: any): void;
   addUser(user: IUserWithProjectTypes): void;
   listPresentations(projectId: string): void;