From 15cf972113471f3e5da14d3059bf55f12e60a1d2 Mon Sep 17 00:00:00 2001
From: Sergiy <sergiy0378@gmail.com>
Date: Sat, 21 Sep 2024 16:42:21 +0300
Subject: [PATCH 1/8] OV-384: * main composition

---
 frontend/src/remotion/composition/main.jsx    | 21 ++++++++++++++++++-
 .../remotion/composition/styles.module.css    | 19 +++++++++++++++++
 2 files changed, 39 insertions(+), 1 deletion(-)
 create mode 100644 frontend/src/remotion/composition/styles.module.css

diff --git a/frontend/src/remotion/composition/main.jsx b/frontend/src/remotion/composition/main.jsx
index 2a70328a5..db288e9ff 100644
--- a/frontend/src/remotion/composition/main.jsx
+++ b/frontend/src/remotion/composition/main.jsx
@@ -1,6 +1,8 @@
 // Using .js extension to avoid TypeScript issues with Remotion's rendering process.
 import { AbsoluteFill, Video, Series } from 'remotion';
 
+import styles from './styles.module.css';
+
 const Main = ({ scenes }) => {
     return (
         <AbsoluteFill>
@@ -11,7 +13,24 @@ const Main = ({ scenes }) => {
                             key={scene.id}
                             durationInFrames={scene.durationInFrames}
                         >
-                            <Video src={scene.url} />
+                            <Video
+                                className={styles['avatar']}
+                                src={scene.url}
+                            />
+                            {scene?.background?.url && (
+                                <img
+                                    className={styles['image']}
+                                    src={scene?.background?.url}
+                                />
+                            )}
+                            {scene?.background?.color && (
+                                <div
+                                    style={{
+                                        backgroundColor: `${scene?.background?.color}`,
+                                    }}
+                                    className={styles['background']}
+                                ></div>
+                            )}
                         </Series.Sequence>
                     );
                 })}
diff --git a/frontend/src/remotion/composition/styles.module.css b/frontend/src/remotion/composition/styles.module.css
new file mode 100644
index 000000000..1f781646e
--- /dev/null
+++ b/frontend/src/remotion/composition/styles.module.css
@@ -0,0 +1,19 @@
+.image {
+    position: absolute;
+    object-fit: cover;
+    z-index: 2;
+    height: 100%;
+    width: 100%;
+}
+
+.background {
+    height: 100%;
+    width: 100%;
+    z-index: 1;
+    position: absolute;
+}
+
+.avatar {
+    z-index: 3;
+    position: absolute;
+}

From d6aba034de9cc38c60e16ac0edaf488eb6926ab0 Mon Sep 17 00:00:00 2001
From: Sergiy <sergiy0378@gmail.com>
Date: Sun, 22 Sep 2024 16:19:49 +0300
Subject: [PATCH 2/8] OV-384: * scene type

---
 .../bundles/avatar-videos/types/scene-background.type.ts    | 6 ++++++
 shared/src/bundles/avatar-videos/types/scene.type.ts        | 3 +++
 shared/src/bundles/avatar-videos/types/types.ts             | 1 +
 3 files changed, 10 insertions(+)
 create mode 100644 shared/src/bundles/avatar-videos/types/scene-background.type.ts

diff --git a/shared/src/bundles/avatar-videos/types/scene-background.type.ts b/shared/src/bundles/avatar-videos/types/scene-background.type.ts
new file mode 100644
index 000000000..1476cf3a6
--- /dev/null
+++ b/shared/src/bundles/avatar-videos/types/scene-background.type.ts
@@ -0,0 +1,6 @@
+type SceneBackground = {
+    color?: string;
+    url?: string;
+};
+
+export { type SceneBackground };
diff --git a/shared/src/bundles/avatar-videos/types/scene.type.ts b/shared/src/bundles/avatar-videos/types/scene.type.ts
index 56f94467b..8bf745433 100644
--- a/shared/src/bundles/avatar-videos/types/scene.type.ts
+++ b/shared/src/bundles/avatar-videos/types/scene.type.ts
@@ -1,3 +1,5 @@
+import { type SceneBackground } from './scene-background.type.js';
+
 type SceneAvatar = {
     id: string;
     name: string;
@@ -9,6 +11,7 @@ type Scene = {
     id: string;
     duration: number;
     avatar?: SceneAvatar;
+    background?: SceneBackground;
 };
 
 export { type Scene, type SceneAvatar };
diff --git a/shared/src/bundles/avatar-videos/types/types.ts b/shared/src/bundles/avatar-videos/types/types.ts
index ca3469643..83465571b 100644
--- a/shared/src/bundles/avatar-videos/types/types.ts
+++ b/shared/src/bundles/avatar-videos/types/types.ts
@@ -4,6 +4,7 @@ export { type InputKind } from './input-kind.type.js';
 export { type RenderAvatarVideoRequestDto } from './render-avatar-request-dto.type.js';
 export { type RenderAvatarResponseDto } from './render-avatar-response-dto.type.js';
 export { type Scene, type SceneAvatar } from './scene.type.js';
+export { type SceneBackground } from './scene-background.type.js';
 export { type Script } from './script.type.js';
 export { type VideoCodec } from './video-codec.type.js';
 export { type VideoFormat } from './video-format.type.js';

From ea47d8e61c0faa7104b676dbd8b2d0c7ac0a6a24 Mon Sep 17 00:00:00 2001
From: Sergiy <sergiy0378@gmail.com>
Date: Sun, 22 Sep 2024 16:22:13 +0300
Subject: [PATCH 3/8] OV-384: * schema

---
 .../bundles/avatar-videos/avatar-videos.ts    |  1 +
 .../avatar-video-validation-message.enum.ts   |  1 +
 .../render-avatar-video.validation-schema.ts  | 20 ++++++++++++++++++-
 shared/src/index.ts                           |  1 +
 4 files changed, 22 insertions(+), 1 deletion(-)

diff --git a/shared/src/bundles/avatar-videos/avatar-videos.ts b/shared/src/bundles/avatar-videos/avatar-videos.ts
index 6a020848d..4fa52026b 100644
--- a/shared/src/bundles/avatar-videos/avatar-videos.ts
+++ b/shared/src/bundles/avatar-videos/avatar-videos.ts
@@ -7,6 +7,7 @@ export {
     type RenderAvatarVideoRequestDto,
     type Scene,
     type SceneAvatar,
+    type SceneBackground,
     type Script,
     type VideoCodec,
     type VideoFormat,
diff --git a/shared/src/bundles/avatar-videos/enum/avatar-video-validation-message.enum.ts b/shared/src/bundles/avatar-videos/enum/avatar-video-validation-message.enum.ts
index c2d59a163..8bdf6b06a 100644
--- a/shared/src/bundles/avatar-videos/enum/avatar-video-validation-message.enum.ts
+++ b/shared/src/bundles/avatar-videos/enum/avatar-video-validation-message.enum.ts
@@ -11,6 +11,7 @@ const AvatarVideoValidationMessage = {
     ID_REQUIRED: 'Id is required',
     AVATAR_ID_REQUIRED: 'Avatar id is required',
     AVATAR_IMG_REQUIRED: 'Avatar img is required',
+    BACKGROUND_IMAGE_SHOULD_BE_URL: 'Background image should be url',
 } as const;
 
 export { AvatarVideoValidationMessage };
diff --git a/shared/src/bundles/avatar-videos/validation-schemas/render-avatar-video.validation-schema.ts b/shared/src/bundles/avatar-videos/validation-schemas/render-avatar-video.validation-schema.ts
index ad8aa5912..2c8eb962d 100644
--- a/shared/src/bundles/avatar-videos/validation-schemas/render-avatar-video.validation-schema.ts
+++ b/shared/src/bundles/avatar-videos/validation-schemas/render-avatar-video.validation-schema.ts
@@ -10,10 +10,16 @@ type SceneAvatarValidation = {
     url: z.ZodString;
 };
 
+type SceneBackground = {
+    color: z.ZodOptional<z.ZodString>;
+    url: z.ZodOptional<z.ZodString>;
+};
+
 type SceneValidation = {
     id: z.ZodString;
     duration: z.ZodNumber;
     avatar: typeof avatarSchema;
+    background: typeof backgroundSchema;
 };
 
 type ScriptValidation = {
@@ -30,7 +36,7 @@ type Composition = {
 type GenerateAvatarVideoRequestValidationDto = {
     name: z.ZodString;
     composition: typeof compositionSchema;
-    videoId?: z.ZodOptional<z.ZodString>;
+    videoId: z.ZodOptional<z.ZodString>;
 };
 
 const avatarSchema = z.object<SceneAvatarValidation>({
@@ -48,6 +54,17 @@ const avatarSchema = z.object<SceneAvatarValidation>({
     }),
 });
 
+const backgroundSchema = z.object<SceneBackground>({
+    color: z.string().min(1).optional(),
+    url: z
+        .string()
+        .url({
+            message:
+                AvatarVideoValidationMessage.BACKGROUND_IMAGE_SHOULD_BE_URL,
+        })
+        .optional(),
+});
+
 const sceneSchema = z.object<SceneValidation>({
     duration: z.number().min(1, {
         message: AvatarVideoValidationMessage.DURATION_REQUIRED,
@@ -56,6 +73,7 @@ const sceneSchema = z.object<SceneValidation>({
         message: AvatarVideoValidationMessage.ID_REQUIRED,
     }),
     avatar: avatarSchema,
+    background: backgroundSchema,
 });
 
 const scriptSchema = z
diff --git a/shared/src/index.ts b/shared/src/index.ts
index bb16a99fd..c5397d697 100644
--- a/shared/src/index.ts
+++ b/shared/src/index.ts
@@ -7,6 +7,7 @@ export {
     type RenderAvatarVideoRequestDto,
     type Scene,
     type SceneAvatar,
+    type SceneBackground,
     type Script,
     type VideoCodec,
     type VideoFormat,

From 836820bd1096857e40489d71009866b66f6815ef Mon Sep 17 00:00:00 2001
From: Sergiy <sergiy0378@gmail.com>
Date: Sun, 22 Sep 2024 16:28:23 +0300
Subject: [PATCH 4/8] OV-384: * types

---
 .../distribute-scripts-to-scenes.helper.ts    | 10 +++---
 ...rated-avatars-to-remotion-scenes.helper.ts | 11 +++---
 .../services/script-processor.service.ts      | 35 +++++++++++++------
 .../types/generated-avatar.type.ts            |  7 ----
 .../types/scene-for-render-avatar.type.ts     |  9 +++++
 .../types/scene-with-generated-avatar.type.ts | 10 ++++++
 .../src/bundles/avatar-videos/types/types.ts  |  3 +-
 7 files changed, 57 insertions(+), 28 deletions(-)
 delete mode 100644 backend/src/bundles/avatar-videos/types/generated-avatar.type.ts
 create mode 100644 backend/src/bundles/avatar-videos/types/scene-for-render-avatar.type.ts
 create mode 100644 backend/src/bundles/avatar-videos/types/scene-with-generated-avatar.type.ts

diff --git a/backend/src/bundles/avatar-videos/helpers/distribute-scripts-to-scenes.helper.ts b/backend/src/bundles/avatar-videos/helpers/distribute-scripts-to-scenes.helper.ts
index 1d9ffacd6..92719f195 100644
--- a/backend/src/bundles/avatar-videos/helpers/distribute-scripts-to-scenes.helper.ts
+++ b/backend/src/bundles/avatar-videos/helpers/distribute-scripts-to-scenes.helper.ts
@@ -1,7 +1,9 @@
-import { type AvatarData } from '~/common/services/azure-ai/avatar-video/types/types.js';
-
 import { ScriptProcessor } from '../services/script-processor.service.js';
-import { type Scene, type Script } from '../types/types.js';
+import {
+    type Scene,
+    type SceneForRenderAvatar,
+    type Script,
+} from '../types/types.js';
 
 function distributeScriptsToScenes({
     scenes,
@@ -9,7 +11,7 @@ function distributeScriptsToScenes({
 }: {
     scenes: Scene[];
     scripts: Script[];
-}): AvatarData[] {
+}): SceneForRenderAvatar[] {
     const processor = new ScriptProcessor(scenes, scripts);
     return processor.distributeScriptsToScenes();
 }
diff --git a/backend/src/bundles/avatar-videos/helpers/generated-avatars-to-remotion-scenes.helper.ts b/backend/src/bundles/avatar-videos/helpers/generated-avatars-to-remotion-scenes.helper.ts
index e2779b8b3..03b49a0f6 100644
--- a/backend/src/bundles/avatar-videos/helpers/generated-avatars-to-remotion-scenes.helper.ts
+++ b/backend/src/bundles/avatar-videos/helpers/generated-avatars-to-remotion-scenes.helper.ts
@@ -1,17 +1,16 @@
 import { type RemotionAvatarScene } from '~/common/services/remotion/type/types.js';
 
 import { FPS } from '../constants/fps.js';
-import { type GeneratedAvatarData } from '../types/types.js';
+import { type SceneWithGeneratedAvatar } from '../types/types.js';
 
 const generatedAvatarToRemotionScene = (
-    generatedAvatars: GeneratedAvatarData[],
+    scenesWithGeneratedAvatars: SceneWithGeneratedAvatar[],
 ): RemotionAvatarScene[] => {
-    return generatedAvatars.map((avatar) => {
+    return scenesWithGeneratedAvatars.map((scene) => {
         return {
-            id: avatar.id,
-            url: avatar.url,
+            ...scene,
             durationInFrames: Math.round(
-                (avatar.durationInMilliseconds / 1000) * FPS,
+                (scene.durationInMilliseconds / 1000) * FPS,
             ),
         };
     });
diff --git a/backend/src/bundles/avatar-videos/services/script-processor.service.ts b/backend/src/bundles/avatar-videos/services/script-processor.service.ts
index ec625ed04..16344051e 100644
--- a/backend/src/bundles/avatar-videos/services/script-processor.service.ts
+++ b/backend/src/bundles/avatar-videos/services/script-processor.service.ts
@@ -1,11 +1,16 @@
-import { type AvatarData } from '~/common/services/azure-ai/avatar-video/types/types.js';
+import { v4 as uuidv4 } from 'uuid';
 
-import { type Scene, type SceneAvatar, type Script } from '../types/types.js';
+import {
+    type Scene,
+    type SceneAvatar,
+    type SceneForRenderAvatar,
+    type Script,
+} from '../types/types.js';
 
 class ScriptProcessor {
     private scenes: Scene[];
     private scripts: Script[];
-    private result: AvatarData[] = [];
+    private result: SceneForRenderAvatar[] = [];
     private sceneIndex: number = 0;
     private sceneRemainder: number = 0;
     private accumulatedText: string = '';
@@ -62,16 +67,22 @@ class ScriptProcessor {
     private addSceneResult({
         text,
         voice,
+        scene,
     }: {
         text: string;
         voice: string;
+        scene: Scene;
     }): void {
         if (text && this.currentAvatar) {
             this.result.push({
-                text,
-                voice,
-                name: this.currentAvatar.name,
-                style: this.currentAvatar.style,
+                ...scene,
+                id: uuidv4(),
+                avatar: {
+                    name: this.currentAvatar.name,
+                    style: this.currentAvatar.style,
+                    text,
+                    voice,
+                },
             });
         }
     }
@@ -88,12 +99,13 @@ class ScriptProcessor {
     private processRemainingScript(script: Script): void {
         const lastResult = this.result.at(-1);
 
-        if (lastResult && lastResult.voice === script.voiceName) {
-            lastResult.text += ' ' + this.scriptTextRemainder;
+        if (lastResult && lastResult.avatar.voice === script.voiceName) {
+            lastResult.avatar.text += ' ' + this.scriptTextRemainder;
         } else {
             this.addSceneResult({
                 text: this.scriptTextRemainder,
                 voice: script.voiceName,
+                scene: this.scenes[this.sceneIndex] as Scene,
             });
         }
     }
@@ -115,6 +127,7 @@ class ScriptProcessor {
                 this.addSceneResult({
                     text: this.accumulatedText,
                     voice: this.currentVoiceName,
+                    scene: this.scenes[this.sceneIndex] as Scene,
                 });
                 this.accumulatedText = '';
                 this.currentVoiceName = script.voiceName;
@@ -141,6 +154,7 @@ class ScriptProcessor {
                 this.addSceneResult({
                     text: this.accumulatedText.trim(),
                     voice: this.currentVoiceName,
+                    scene: this.scenes[this.sceneIndex] as Scene,
                 });
 
                 this.accumulatedText = '';
@@ -150,7 +164,7 @@ class ScriptProcessor {
         }
     }
 
-    public distributeScriptsToScenes(): AvatarData[] {
+    public distributeScriptsToScenes(): SceneForRenderAvatar[] {
         for (const script of this.scripts) {
             this.processScriptForScene(script);
 
@@ -163,6 +177,7 @@ class ScriptProcessor {
             this.addSceneResult({
                 text: this.accumulatedText.trim(),
                 voice: this.currentVoiceName ?? '',
+                scene: this.scenes[this.sceneIndex] as Scene,
             });
         }
 
diff --git a/backend/src/bundles/avatar-videos/types/generated-avatar.type.ts b/backend/src/bundles/avatar-videos/types/generated-avatar.type.ts
deleted file mode 100644
index 13923d3b2..000000000
--- a/backend/src/bundles/avatar-videos/types/generated-avatar.type.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-type GeneratedAvatarData = {
-    url: string;
-    id: string;
-    durationInMilliseconds: number;
-};
-
-export { type GeneratedAvatarData };
diff --git a/backend/src/bundles/avatar-videos/types/scene-for-render-avatar.type.ts b/backend/src/bundles/avatar-videos/types/scene-for-render-avatar.type.ts
new file mode 100644
index 000000000..574747150
--- /dev/null
+++ b/backend/src/bundles/avatar-videos/types/scene-for-render-avatar.type.ts
@@ -0,0 +1,9 @@
+import { type Scene } from 'shared';
+
+import { type AvatarData } from '~/common/services/azure-ai/avatar-video/types/types.js';
+
+type SceneForRenderAvatar = Omit<Scene, 'avatar'> & {
+    avatar: AvatarData;
+};
+
+export { type SceneForRenderAvatar };
diff --git a/backend/src/bundles/avatar-videos/types/scene-with-generated-avatar.type.ts b/backend/src/bundles/avatar-videos/types/scene-with-generated-avatar.type.ts
new file mode 100644
index 000000000..b67a42ad6
--- /dev/null
+++ b/backend/src/bundles/avatar-videos/types/scene-with-generated-avatar.type.ts
@@ -0,0 +1,10 @@
+import { type Scene } from './types.js';
+
+type SceneWithGeneratedAvatar = Omit<Scene, 'avatar' | 'duration'> & {
+    avatar: {
+        url: string;
+    };
+    durationInMilliseconds: number;
+};
+
+export { type SceneWithGeneratedAvatar };
diff --git a/backend/src/bundles/avatar-videos/types/types.ts b/backend/src/bundles/avatar-videos/types/types.ts
index 63c893aa5..14ce0f901 100644
--- a/backend/src/bundles/avatar-videos/types/types.ts
+++ b/backend/src/bundles/avatar-videos/types/types.ts
@@ -1,4 +1,5 @@
-export { type GeneratedAvatarData } from './generated-avatar.type.js';
+export { type SceneForRenderAvatar } from './scene-for-render-avatar.type.js';
+export { type SceneWithGeneratedAvatar } from './scene-with-generated-avatar.type.js';
 export {
     type Composition,
     type RenderAvatarResponseDto,

From c21c4bf4ae6b24ef4b7e7f08489b7116127747bd Mon Sep 17 00:00:00 2001
From: Sergiy <sergiy0378@gmail.com>
Date: Sun, 22 Sep 2024 16:30:25 +0300
Subject: [PATCH 5/8] OV-384: * composition

---
 frontend/src/remotion/composition/main.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/remotion/composition/main.jsx b/frontend/src/remotion/composition/main.jsx
index db288e9ff..3fdc704ab 100644
--- a/frontend/src/remotion/composition/main.jsx
+++ b/frontend/src/remotion/composition/main.jsx
@@ -15,7 +15,7 @@ const Main = ({ scenes }) => {
                         >
                             <Video
                                 className={styles['avatar']}
-                                src={scene.url}
+                                src={scene.avatar.url}
                             />
                             {scene?.background?.url && (
                                 <img

From 6653ee59a4d75f97c0ecc0b00e5c125eba5df60d Mon Sep 17 00:00:00 2001
From: Sergiy <sergiy0378@gmail.com>
Date: Sun, 22 Sep 2024 16:36:21 +0300
Subject: [PATCH 6/8] OV-384: * avatar-render service

---
 .../avatar-videos/avatar-videos.controller.ts |   7 +-
 .../avatar-videos/avatar-videos.service.ts    | 127 ++++++++----------
 .../constants/request-delay.constant.ts       |   2 +-
 .../remotion/type/remotion-avatar-scene.ts    |   9 +-
 .../common/services/remotion/type/types.ts    |   1 +
 5 files changed, 71 insertions(+), 75 deletions(-)

diff --git a/backend/src/bundles/avatar-videos/avatar-videos.controller.ts b/backend/src/bundles/avatar-videos/avatar-videos.controller.ts
index 29455c03f..4d2ca691d 100644
--- a/backend/src/bundles/avatar-videos/avatar-videos.controller.ts
+++ b/backend/src/bundles/avatar-videos/avatar-videos.controller.ts
@@ -77,6 +77,7 @@ class AvatarVideoController extends BaseController {
         }>,
     ): Promise<ApiHandlerResponse> {
         const userId = (options.user as UserGetCurrentResponseDto).id;
+
         const { composition, name, videoId } = options.body;
 
         const videoPayload = {
@@ -88,11 +89,11 @@ class AvatarVideoController extends BaseController {
             ? this.avatarVideoService.updateVideo({ ...videoPayload, videoId })
             : this.avatarVideoService.createVideo({ ...videoPayload, userId }));
 
-        const avatarsConfigs =
-            this.avatarVideoService.getAvatarsConfigs(composition);
+        const scenesConfigs =
+            this.avatarVideoService.getScenesConfigs(composition);
 
         await this.avatarVideoService.submitAvatarsConfigs(
-            avatarsConfigs,
+            scenesConfigs,
             videoRecord.id,
         );
 
diff --git a/backend/src/bundles/avatar-videos/avatar-videos.service.ts b/backend/src/bundles/avatar-videos/avatar-videos.service.ts
index a3457f113..6608b7888 100644
--- a/backend/src/bundles/avatar-videos/avatar-videos.service.ts
+++ b/backend/src/bundles/avatar-videos/avatar-videos.service.ts
@@ -1,12 +1,9 @@
 import { type VideoGetAllItemResponseDto } from 'shared';
 import { HTTPCode, HttpError } from 'shared';
-import { v4 as uuidv4 } from 'uuid';
 
-import { type AvatarData } from '~/common/services/azure-ai/avatar-video/types/avatar-data.js';
 import { type AzureAIService } from '~/common/services/azure-ai/azure-ai.service.js';
 import { type FileService } from '~/common/services/file/file.service.js';
 import { type RemotionService } from '~/common/services/remotion/remotion.service.js';
-import { type RemotionAvatarScene } from '~/common/services/remotion/type/types.js';
 
 import { type VideoService } from '../videos/video.service.js';
 import { REQUEST_DELAY } from './constants/constnats.js';
@@ -22,8 +19,9 @@ import {
 } from './helpers/helpers.js';
 import {
     type Composition,
-    type GeneratedAvatarData,
     type RenderAvatarVideoRequestDto,
+    type SceneForRenderAvatar,
+    type SceneWithGeneratedAvatar,
 } from './types/types.js';
 
 type Constructor = {
@@ -85,36 +83,32 @@ class AvatarVideoService {
         });
     }
 
-    public getAvatarsConfigs(composition: Composition): AvatarData[] {
+    public getScenesConfigs(composition: Composition): SceneForRenderAvatar[] {
         return distributeScriptsToScenes(composition);
     }
 
     public async submitAvatarsConfigs(
-        configs: AvatarData[],
+        scenesForRenderAvatar: SceneForRenderAvatar[],
         recordId: string,
-    ): Promise<string[]> {
+    ): Promise<void> {
         try {
-            const responses = await Promise.all(
-                configs.map((config) => {
+            await Promise.all(
+                scenesForRenderAvatar.map((scene) => {
                     return this.azureAIService.renderAvatarVideo({
-                        id: uuidv4(),
-                        payload: config,
+                        id: scene.id,
+                        payload: scene.avatar,
                     });
                 }),
             );
 
-            const ids = responses.map((response) => {
-                return response.id;
-            });
-
-            this.checkAvatarsProcessing(ids, recordId).catch(() => {
-                throw new HttpError({
-                    message: RenderVideoErrorMessage.RENDER_ERROR,
-                    status: HTTPCode.BAD_REQUEST,
-                });
-            });
-
-            return ids;
+            this.checkAvatarsProcessing(scenesForRenderAvatar, recordId).catch(
+                () => {
+                    throw new HttpError({
+                        message: RenderVideoErrorMessage.RENDER_ERROR,
+                        status: HTTPCode.BAD_REQUEST,
+                    });
+                },
+            );
         } catch {
             throw new HttpError({
                 message: RenderVideoErrorMessage.RENDER_ERROR,
@@ -124,18 +118,18 @@ class AvatarVideoService {
     }
 
     public async checkAvatarsProcessing(
-        ids: string[],
+        scenesForRenderAvatar: SceneForRenderAvatar[],
         videoRecordId: string,
     ): Promise<void> {
         try {
             const response = await Promise.all(
-                ids.map((id) => {
-                    return this.checkAvatarStatus(id);
+                scenesForRenderAvatar.map((scene) => {
+                    return this.checkAvatarStatus(scene);
                 }),
             );
 
             await this.handleSuccessfulAvatarsGeneration({
-                generatedAvatars: response,
+                scenesWithGeneratedAvatars: response,
                 videoRecordId,
             });
         } catch {
@@ -146,20 +140,25 @@ class AvatarVideoService {
         }
     }
 
-    private checkAvatarStatus(id: string): Promise<GeneratedAvatarData> {
+    private checkAvatarStatus(
+        scene: SceneForRenderAvatar,
+    ): Promise<SceneWithGeneratedAvatar> {
         return new Promise((resolve, reject) => {
             const interval = setInterval(() => {
                 this.azureAIService
-                    .getAvatarVideo(id)
+                    .getAvatarVideo(scene.id)
                     .then((response) => {
                         if (
                             response.status ===
                             GenerateAvatarResponseStatus.SUCCEEDED
                         ) {
                             clearInterval(interval);
+
                             resolve({
-                                id,
-                                url: response.outputs.result,
+                                ...scene,
+                                avatar: {
+                                    url: response.outputs.result,
+                                },
                                 durationInMilliseconds:
                                     response.properties.durationInMilliseconds,
                             });
@@ -192,78 +191,70 @@ class AvatarVideoService {
 
     private async handleSuccessfulAvatarsGeneration({
         videoRecordId,
-        generatedAvatars,
+        scenesWithGeneratedAvatars,
     }: {
         videoRecordId: string;
-        generatedAvatars: GeneratedAvatarData[];
+        scenesWithGeneratedAvatars: SceneWithGeneratedAvatar[];
     }): Promise<void> {
-        const scenes = generatedAvatarToRemotionScene(generatedAvatars);
-        const scenesWithSavedAvatars = await this.saveGeneratedAvatar(scenes);
+        const scenesWithSavedAvatars = await this.saveGeneratedAvatar(
+            scenesWithGeneratedAvatars,
+        );
+        const scenesForRendering = generatedAvatarToRemotionScene(
+            scenesWithSavedAvatars,
+        );
 
         const renderId = await this.remotionService.renderVideo({
-            scenes: scenesWithSavedAvatars,
-            totalDurationInFrames: getTotalDuration(scenesWithSavedAvatars),
+            scenes: scenesForRendering,
+            totalDurationInFrames: getTotalDuration(scenesForRendering),
         });
 
         const url =
             await this.remotionService.getRemotionRenderProgress(renderId);
 
-        await this.removeGeneratedAvatars(generatedAvatars);
-        await this.removeAvatarsFromBucket(generatedAvatars);
+        await this.removeGeneratedAvatars(scenesWithSavedAvatars);
+        await this.removeAvatarsFromBucket(scenesWithSavedAvatars);
 
         if (!url) {
             return;
         }
         // TODO: NOTIFY USER
-        await this.updateVideoRecord(videoRecordId, url);
-    }
-
-    private async updateVideoRecord(
-        videoRecordId: string,
-        videoUrl: string,
-    ): Promise<void> {
-        const videoData = await this.videoService.update(videoRecordId, {
-            url: videoUrl,
-        });
-
-        if (!videoData) {
-            throw new HttpError({
-                message: RenderVideoErrorMessage.NOT_SAVED,
-                status: HTTPCode.BAD_REQUEST,
-            });
-        }
+        await this.videoService.update(videoRecordId, { url });
     }
 
     private async removeGeneratedAvatars(
-        generatedAvatars: GeneratedAvatarData[],
+        scenesWithGeneratedAvatars: SceneWithGeneratedAvatar[],
     ): Promise<unknown> {
         return Promise.all(
-            generatedAvatars.map((avatar) => {
-                return this.azureAIService.removeAvatarVideo(avatar.id);
+            scenesWithGeneratedAvatars.map((scene) => {
+                return this.azureAIService.removeAvatarVideo(scene.id);
             }),
         );
     }
 
     private async saveGeneratedAvatar(
-        generatedAvatars: RemotionAvatarScene[],
-    ): Promise<RemotionAvatarScene[]> {
+        scenesWithGeneratedAvatars: SceneWithGeneratedAvatar[],
+    ): Promise<SceneWithGeneratedAvatar[]> {
         return Promise.all(
-            generatedAvatars.map(async (avatar) => {
+            scenesWithGeneratedAvatars.map(async (scene) => {
                 return {
-                    durationInFrames: avatar.durationInFrames,
-                    id: avatar.id,
-                    url: await this.saveAvatarVideo(avatar.url, avatar.id),
+                    ...scene,
+                    avatar: {
+                        url: await this.saveAvatarVideo(
+                            scene.avatar.url,
+                            scene.id,
+                        ),
+                    },
                 };
             }),
         );
     }
 
     private async removeAvatarsFromBucket(
-        generatedAvatars: GeneratedAvatarData[],
+        scenesWithGeneratedAvatars: SceneWithGeneratedAvatar[],
     ): Promise<unknown> {
         return Promise.all(
-            generatedAvatars.map((avatar) => {
-                return this.fileService.deleteFile(getFileName(avatar.id));
+            scenesWithGeneratedAvatars.map((scene) => {
+                return this.fileService.deleteFile(getFileName(scene.id));
             }),
         );
     }
diff --git a/backend/src/bundles/avatar-videos/constants/request-delay.constant.ts b/backend/src/bundles/avatar-videos/constants/request-delay.constant.ts
index ce2d20189..171a6f1f3 100644
--- a/backend/src/bundles/avatar-videos/constants/request-delay.constant.ts
+++ b/backend/src/bundles/avatar-videos/constants/request-delay.constant.ts
@@ -1,3 +1,3 @@
-const REQUEST_DELAY = 4000;
+const REQUEST_DELAY = 5000;
 
 export { REQUEST_DELAY };
diff --git a/backend/src/common/services/remotion/type/remotion-avatar-scene.ts b/backend/src/common/services/remotion/type/remotion-avatar-scene.ts
index 53f6559a2..6906fab8e 100644
--- a/backend/src/common/services/remotion/type/remotion-avatar-scene.ts
+++ b/backend/src/common/services/remotion/type/remotion-avatar-scene.ts
@@ -1,6 +1,9 @@
-type RemotionAvatarScene = {
-    url: string;
-    id: string;
+import { type Scene } from 'shared';
+
+type RemotionAvatarScene = Omit<Scene, 'duration' | 'avatar'> & {
+    avatar: {
+        url: string;
+    };
     durationInFrames: number;
 };
 
diff --git a/backend/src/common/services/remotion/type/types.ts b/backend/src/common/services/remotion/type/types.ts
index d9edf2c81..814ef5e39 100644
--- a/backend/src/common/services/remotion/type/types.ts
+++ b/backend/src/common/services/remotion/type/types.ts
@@ -1,2 +1,3 @@
 export { type InputProps } from './input-properties.js';
 export { type RemotionAvatarScene } from './remotion-avatar-scene.js';
+export { type SceneBackground } from 'shared';

From ca6d48e6be4780dc89d75bf873d9753701c428f1 Mon Sep 17 00:00:00 2001
From: Sergiy <sergiy0378@gmail.com>
Date: Sun, 22 Sep 2024 17:00:36 +0300
Subject: [PATCH 7/8] OV-384: * avatar-video service

---
 .../avatar-videos/avatar-videos.service.ts    | 19 +++++++++----------
 1 file changed, 9 insertions(+), 10 deletions(-)

diff --git a/backend/src/bundles/avatar-videos/avatar-videos.service.ts b/backend/src/bundles/avatar-videos/avatar-videos.service.ts
index 6608b7888..083b4139e 100644
--- a/backend/src/bundles/avatar-videos/avatar-videos.service.ts
+++ b/backend/src/bundles/avatar-videos/avatar-videos.service.ts
@@ -234,19 +234,18 @@ class AvatarVideoService {
     private async saveGeneratedAvatar(
         scenesWithGeneratedAvatars: SceneWithGeneratedAvatar[],
     ): Promise<SceneWithGeneratedAvatar[]> {
-        return Promise.all(
+        const urls = await Promise.all(
             scenesWithGeneratedAvatars.map(async (scene) => {
-                return {
-                    ...scene,
-                    avatar: {
-                        url: await this.saveAvatarVideo(
-                            scene.avatar.url,
-                            scene.id,
-                        ),
-                    },
-                };
+                return this.saveAvatarVideo(scene.avatar.url, scene.id);
             }),
         );
+
+        return scenesWithGeneratedAvatars.map((scene, index) => ({
+            ...scene,
+            avatar: {
+                url: urls[index] as string,
+            },
+        }));
     }
 
     private async removeAvatarsFromBucket(

From c735b521fa4f1172b6be4faad183277f6ce6e696 Mon Sep 17 00:00:00 2001
From: Sergiy <sergiy0378@gmail.com>
Date: Mon, 23 Sep 2024 11:21:03 +0300
Subject: [PATCH 8/8] OV-389: * schema

---
 .../render-avatar-video.validation-schema.ts                  | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/shared/src/bundles/avatar-videos/validation-schemas/render-avatar-video.validation-schema.ts b/shared/src/bundles/avatar-videos/validation-schemas/render-avatar-video.validation-schema.ts
index 2c8eb962d..b9e092f81 100644
--- a/shared/src/bundles/avatar-videos/validation-schemas/render-avatar-video.validation-schema.ts
+++ b/shared/src/bundles/avatar-videos/validation-schemas/render-avatar-video.validation-schema.ts
@@ -19,7 +19,7 @@ type SceneValidation = {
     id: z.ZodString;
     duration: z.ZodNumber;
     avatar: typeof avatarSchema;
-    background: typeof backgroundSchema;
+    background: z.ZodOptional<typeof backgroundSchema>;
 };
 
 type ScriptValidation = {
@@ -73,7 +73,7 @@ const sceneSchema = z.object<SceneValidation>({
         message: AvatarVideoValidationMessage.ID_REQUIRED,
     }),
     avatar: avatarSchema,
-    background: backgroundSchema,
+    background: backgroundSchema.optional(),
 });
 
 const scriptSchema = z