Shortvid new server + API change for shortvid (#121)

* Remove console.error in firestoreQueryHook.ts * Improve shortvid video generation error display * Add shortvid server endpoint selection & new params on the API
HugoGresse · May 27, 2024 · f475cd4 · f475cd4
1 parent 103c82a
commit f475cd4
Show file tree

Hide file tree

Showing 7 changed files with 60 additions and 20 deletions.
diff --git a/functions/src/api/routes/sessions/sessions.ts b/functions/src/api/routes/sessions/sessions.ts
@@ -22,6 +22,7 @@ const ShortVid = Type.Object({
     shortVidType: Type.String(),
     updateSession: Type.Boolean(),
     frame: Type.Optional(Type.Number()),
+    endpoint: Type.Optional(Type.String()),
     settings: Type.Object({
         backgroundColor: Type.String(),
         title: Type.String(),
@@ -95,12 +96,16 @@ export const sessionsRoutes = (fastify: FastifyInstance, options: any, done: ()
             const shortVidType = request.body.shortVidType
             const shortVidSettings = request.body.settings
             const frame = request.body.frame
+            const endpoint = request.body.endpoint
 
             const isFrameGeneration = Number.isInteger(frame)
 
-            const url = isFrameGeneration
-                ? `https://api.shortvid.io/frame/${shortVidType}/${frame}`
-                : `https://api.shortvid.io/${shortVidType}`
+            const baseUrl =
+                endpoint === 'shortvid-official' ? 'https://api.shortvid.io' : 'https://shortvid-api.minix.gresse.io'
+
+            const url = isFrameGeneration ? `${baseUrl}/frame/${shortVidType}/${frame}` : `${baseUrl}/${shortVidType}`
+
+            console.log(url, shortVidSettings)
 
             const shortVidResponse = await fetch(url, {
                 method: 'POST',
@@ -115,7 +120,7 @@ export const sessionsRoutes = (fastify: FastifyInstance, options: any, done: ()
 
             if (!shortVidResponse.ok) {
                 // @ts-ignore
-                reply.code(400).send({ error: 'ShortVid API error, ' + shortVidResponse.statusText, success: false })
+                reply.code(500).send({ error: 'ShortVid API error, ' + shortVidResponse.statusText, success: false })
                 return
             }
 
@@ -136,7 +141,7 @@ export const sessionsRoutes = (fastify: FastifyInstance, options: any, done: ()
             if (!success) {
                 const text = await cloneResponseInCaseOfError.text()
                 console.error('ShortVid API error', text)
-                return reply.status(400).send({
+                return reply.status(500).send({
                     success: false,
                     // @ts-ignore
                     error: publicFileUrlOrError + ' ' + text,

diff --git a/src/events/actions/sessions/generation/generateShortVid.ts b/src/events/actions/sessions/generation/generateShortVid.ts
@@ -2,7 +2,7 @@ import { Session } from '../../../../types'
 import { generateApiKey } from '../../../../utils/generateApiKey'
 import { updateEvent } from '../../updateEvent'
 import { GenerateBaseResultAnswer } from './useSessionsGenerationGeneric'
-import { shortVidAPI, ShortVidSettings } from './shortVidAPI'
+import { shortVidAPI, ShortVidEndpoints, ShortVidSettings } from './shortVidAPI'
 
 export type ShortVidGenerationSettings = {
     template: string
@@ -13,6 +13,7 @@ export type ShortVidGenerationSettings = {
     logoUrl: string
     colorBackground: string
     eventStartDate: Date | null
+    endpoint: keyof typeof ShortVidEndpoints
 }
 
 export type GeneratedSessionVideoAnswer = {
@@ -86,7 +87,8 @@ export const generateShortVid = async (
                 apiKey,
                 settings.template,
                 settings.updateSession,
-                sessionSettings
+                sessionSettings,
+                settings.endpoint
             ),
             shortVidAPI(
                 settings.eventId,
@@ -95,6 +97,7 @@ export const generateShortVid = async (
                 settings.template,
                 settings.updateSession,
                 sessionSettings,
+                settings.endpoint,
                 -1
             ),
         ])

diff --git a/src/events/actions/sessions/generation/shortVidAPI.ts b/src/events/actions/sessions/generation/shortVidAPI.ts
@@ -19,13 +19,23 @@ export type ShortVidSettings = {
     speakers?: ShortVidSpeakerInput[]
 } & ShortVidDesignSetting
 
+export enum ShortVidEndpoints {
+    'shortvid-openplanner' = 'ShortVid hosted by Hugo Gresse (faster?)',
+    'shortvid-official' = 'ShortVid Official',
+}
+export const ShortVidEndpointDefault = ShortVidEndpoints['shortvid-openplanner']
+export const ShortVidEndpointDefaultKey: keyof typeof ShortVidEndpoints = Object.keys(ShortVidEndpoints)[
+    Object.values(ShortVidEndpoints).indexOf(ShortVidEndpointDefault as any)
+] as any
+
 export const shortVidAPI = async (
     eventId: string,
     sessionId: string,
     eventApiKey: string,
     shortVidType: string,
     updateSession: boolean,
     settings: ShortVidSettings,
+    endpoint: keyof typeof ShortVidEndpoints = ShortVidEndpointDefaultKey,
     frame?: number
 ) => {
     const url = new URL(API_URL as string)
@@ -44,6 +54,7 @@ export const shortVidAPI = async (
                 updateSession,
                 settings,
                 frame,
+                endpoint: endpoint,
             }),
         })
         if (!response.ok) {

diff --git a/src/events/page/sessions/components/GenerateSessionsVideoDialog.tsx b/src/events/page/sessions/components/GenerateSessionsVideoDialog.tsx
@@ -13,6 +13,7 @@ import {
 } from '../../../actions/sessions/generation/generateShortVid'
 import { ShortVidSettings } from './ShortVidSettings'
 import { useNotification } from '../../../../hooks/notificationHook'
+import { ShortVidEndpointDefaultKey } from '../../../actions/sessions/generation/shortVidAPI'
 
 export const GenerateSessionsVideoDialog = ({
     isOpen,
@@ -39,8 +40,9 @@ export const GenerateSessionsVideoDialog = ({
         generateShortVid
     )
 
-    const shortVidSetting = {
+    const shortVidSetting: Omit<ShortVidGenerationSettings, 'updateSession'> = {
         template: event.shortVidSettings?.template || 'TalkBranded',
+        endpoint: (event.shortVidSettings?.server as any) || ShortVidEndpointDefaultKey,
         eventId: event.id,
         eventApiKey: event.apiKey,
         locationName: event.locationName || '',
@@ -65,12 +67,19 @@ export const GenerateSessionsVideoDialog = ({
                 updateSession: updateDoc,
             })
             .then(({ success, results }: GeneratedSessionVideoAnswer) => {
-                if (onSuccess && success && results.length) {
-                    onSuccess(results[0])
+                if (success && results.length) {
+                    const text = onSuccess ? 'Video generation done!' : 'Video generation done, sessions updated!'
+                    if (onSuccess) {
+                        onSuccess(results[0])
+                    }
+                    createNotification(text, { type: 'success' })
+                    onClose()
+                } else {
+                    createNotification(
+                        'Error while generating the video/image, you may want to switch the ShortVid server',
+                        { type: 'error' }
+                    )
                 }
-                onClose()
-                const text = onSuccess ? 'Video generation done!' : 'Video generation done, sessions updated!'
-                createNotification(text, { type: 'success' })
             })
     }
 

diff --git a/src/events/page/sessions/components/ShortVidSettings.tsx b/src/events/page/sessions/components/ShortVidSettings.tsx
@@ -1,4 +1,4 @@
-import { FormContainer, TextFieldElement, useForm } from 'react-hook-form-mui'
+import { FormContainer, SelectElement, TextFieldElement, useForm } from 'react-hook-form-mui'
 import { Box, Button, Grid, Typography } from '@mui/material'
 import LoadingButton from '@mui/lab/LoadingButton'
 import { SaveShortcut } from '../../../../components/form/SaveShortcut'
@@ -8,6 +8,7 @@ import { doc } from 'firebase/firestore'
 import { collections } from '../../../../services/firebase'
 import { Event, EventShortVidSettings } from '../../../../types'
 import { ExpandMore } from '@mui/icons-material'
+import { ShortVidEndpointDefaultKey, ShortVidEndpoints } from '../../../actions/sessions/generation/shortVidAPI'
 
 export const ShortVidSettings = ({ event }: { event: Event }) => {
     const mutation = useFirestoreDocumentMutation(doc(collections.events, event.id))
@@ -16,6 +17,7 @@ export const ShortVidSettings = ({ event }: { event: Event }) => {
     const formContext = useForm({
         defaultValues: {
             template: event.shortVidSettings?.template || 'TalkBranded',
+            server: event.shortVidSettings?.server || ShortVidEndpointDefaultKey,
         },
     })
     const { formState } = formContext
@@ -27,6 +29,7 @@ export const ShortVidSettings = ({ event }: { event: Event }) => {
                 onSuccess={async (data) => {
                     const shortVidSettings: EventShortVidSettings = {
                         template: data.template,
+                        server: data.server,
                     }
                     return mutation.mutate({
                         shortVidSettings: shortVidSettings,
@@ -47,6 +50,20 @@ export const ShortVidSettings = ({ event }: { event: Event }) => {
                             variant="filled"
                             disabled={formState.isSubmitting}
                         />
+                        <SelectElement
+                            margin="dense"
+                            required
+                            fullWidth
+                            label="Server"
+                            name="server"
+                            helperText="The server to used, OpenPlanner is 2x faster but not aligned with the official ShortVid"
+                            variant="filled"
+                            disabled={formState.isSubmitting}
+                            options={Object.keys(ShortVidEndpoints).map((key) => ({
+                                id: key,
+                                label: ShortVidEndpoints[key as keyof typeof ShortVidEndpoints],
+                            }))}
+                        />
                     </Grid>
                     <Grid item xs={12} md={6}>
                         <Button endIcon={<ExpandMore />} onClick={() => setFormatOpen(!formatOpen)}>

diff --git a/src/services/hooks/firestoreQueryHook.ts b/src/services/hooks/firestoreQueryHook.ts
@@ -49,7 +49,6 @@ export const useFirestoreCollection = <T>(query: Query<T>, subscribe: boolean =
                         setLoading(false)
                     },
                     (error) => {
-                        console.log(error)
                         setError(error.message)
                         setLoading(false)
                     }
@@ -60,7 +59,6 @@ export const useFirestoreCollection = <T>(query: Query<T>, subscribe: boolean =
                         docTransformer(querySnapshot)
                     })
                     .catch((error) => {
-                        console.log(error)
                         setLoading(false)
                         setError(error.message)
                     })
@@ -69,7 +67,6 @@ export const useFirestoreCollection = <T>(query: Query<T>, subscribe: boolean =
                     })
             }
         } catch (error: any) {
-            console.log(error)
             setError(error.message)
         }
 
@@ -124,7 +121,6 @@ export const useFirestoreDocument = <T>(ref: DocumentReference<T>, subscribe: bo
                         setLoading(false)
                     },
                     (error) => {
-                        console.log(error)
                         setError(error.message)
                         setLoading(false)
                     }
@@ -135,15 +131,13 @@ export const useFirestoreDocument = <T>(ref: DocumentReference<T>, subscribe: bo
                         docTransformer(docSnapshot)
                     })
                     .catch((error) => {
-                        console.log(error)
                         setError(error.message)
                     })
                     .finally(() => {
                         setLoading(false)
                     })
             }
         } catch (error: any) {
-            console.log(error)
             setError(error.message)
         }
 

diff --git a/src/types.ts b/src/types.ts
@@ -108,6 +108,7 @@ export interface EventFiles {
 
 export interface EventShortVidSettings {
     template: string | null
+    server: string | null
 }
 export interface EventAISettings {
     model: string