From 22866ac8a1307c41be2c5aa2241934bcb9884469 Mon Sep 17 00:00:00 2001
From: Sergiy <sergiy0378@gmail.com>
Date: Tue, 24 Sep 2024 20:08:51 +0300
Subject: [PATCH 01/12] OV-396: + constants

---
 frontend/src/remotion/composition/constants/constants.js   | 7 +++++++
 .../src/remotion/composition/constants/fps.constant.js     | 4 ++++
 .../composition/constants/height-landscape.constant.js     | 4 ++++
 .../src/remotion/composition/constants/height-portrait.js  | 4 ++++
 .../constants/minimal-duration-in-frames.constant.js       | 4 ++++
 .../composition/constants/width-landscape.constant.js      | 4 ++++
 .../composition/constants/width-portrait.constant.js       | 4 ++++
 7 files changed, 31 insertions(+)
 create mode 100644 frontend/src/remotion/composition/constants/constants.js
 create mode 100644 frontend/src/remotion/composition/constants/fps.constant.js
 create mode 100644 frontend/src/remotion/composition/constants/height-landscape.constant.js
 create mode 100644 frontend/src/remotion/composition/constants/height-portrait.js
 create mode 100644 frontend/src/remotion/composition/constants/minimal-duration-in-frames.constant.js
 create mode 100644 frontend/src/remotion/composition/constants/width-landscape.constant.js
 create mode 100644 frontend/src/remotion/composition/constants/width-portrait.constant.js

diff --git a/frontend/src/remotion/composition/constants/constants.js b/frontend/src/remotion/composition/constants/constants.js
new file mode 100644
index 000000000..9c34e384d
--- /dev/null
+++ b/frontend/src/remotion/composition/constants/constants.js
@@ -0,0 +1,7 @@
+// Using .js extension to avoid TypeScript issues with Remotion's rendering process.
+export { FPS } from './fps.constant.js';
+export { LANDSCAPE_HEIGHT } from './height-landscape.constant.js';
+export { PORTRAIT_HEIGHT } from './height-portrait.js';
+export { MINIMAL_DURATION_IN_FRAMES } from './minimal-duration-in-frames.constant.js';
+export { LANDSCAPE_WIDTH } from './width-landscape.constant.js';
+export { PORTRAIT_WIDTH } from './width-portrait.constant.js';
diff --git a/frontend/src/remotion/composition/constants/fps.constant.js b/frontend/src/remotion/composition/constants/fps.constant.js
new file mode 100644
index 000000000..cd4d7b7df
--- /dev/null
+++ b/frontend/src/remotion/composition/constants/fps.constant.js
@@ -0,0 +1,4 @@
+// Using .js extension to avoid TypeScript issues with Remotion's rendering process.
+const FPS = 30;
+
+export { FPS };
diff --git a/frontend/src/remotion/composition/constants/height-landscape.constant.js b/frontend/src/remotion/composition/constants/height-landscape.constant.js
new file mode 100644
index 000000000..817edff85
--- /dev/null
+++ b/frontend/src/remotion/composition/constants/height-landscape.constant.js
@@ -0,0 +1,4 @@
+// Using .js extension to avoid TypeScript issues with Remotion's rendering process.
+const LANDSCAPE_HEIGHT = 1080;
+
+export { LANDSCAPE_HEIGHT };
diff --git a/frontend/src/remotion/composition/constants/height-portrait.js b/frontend/src/remotion/composition/constants/height-portrait.js
new file mode 100644
index 000000000..c4a6b8f4b
--- /dev/null
+++ b/frontend/src/remotion/composition/constants/height-portrait.js
@@ -0,0 +1,4 @@
+// Using .js extension to avoid TypeScript issues with Remotion's rendering process.
+const PORTRAIT_HEIGHT = 1920;
+
+export { PORTRAIT_HEIGHT };
diff --git a/frontend/src/remotion/composition/constants/minimal-duration-in-frames.constant.js b/frontend/src/remotion/composition/constants/minimal-duration-in-frames.constant.js
new file mode 100644
index 000000000..8af30ecc1
--- /dev/null
+++ b/frontend/src/remotion/composition/constants/minimal-duration-in-frames.constant.js
@@ -0,0 +1,4 @@
+// Using .js extension to avoid TypeScript issues with Remotion's rendering process.
+const MINIMAL_DURATION_IN_FRAMES = 100;
+
+export { MINIMAL_DURATION_IN_FRAMES };
diff --git a/frontend/src/remotion/composition/constants/width-landscape.constant.js b/frontend/src/remotion/composition/constants/width-landscape.constant.js
new file mode 100644
index 000000000..e9ff7f89a
--- /dev/null
+++ b/frontend/src/remotion/composition/constants/width-landscape.constant.js
@@ -0,0 +1,4 @@
+// Using .js extension to avoid TypeScript issues with Remotion's rendering process.
+const LANDSCAPE_WIDTH = 1920;
+
+export { LANDSCAPE_WIDTH };
diff --git a/frontend/src/remotion/composition/constants/width-portrait.constant.js b/frontend/src/remotion/composition/constants/width-portrait.constant.js
new file mode 100644
index 000000000..fc2464213
--- /dev/null
+++ b/frontend/src/remotion/composition/constants/width-portrait.constant.js
@@ -0,0 +1,4 @@
+// Using .js extension to avoid TypeScript issues with Remotion's rendering process.
+const PORTRAIT_WIDTH = 1080;
+
+export { PORTRAIT_WIDTH };

From 702097529ee3ebe355f597cddfeb80ab47afd037 Mon Sep 17 00:00:00 2001
From: Sergiy <sergiy0378@gmail.com>
Date: Tue, 24 Sep 2024 20:09:10 +0300
Subject: [PATCH 02/12] OV-396: + enums

---
 frontend/src/remotion/composition/enums/enums.js           | 2 ++
 .../remotion/composition/enums/video-orientation.enum.js   | 7 +++++++
 2 files changed, 9 insertions(+)
 create mode 100644 frontend/src/remotion/composition/enums/enums.js
 create mode 100644 frontend/src/remotion/composition/enums/video-orientation.enum.js

diff --git a/frontend/src/remotion/composition/enums/enums.js b/frontend/src/remotion/composition/enums/enums.js
new file mode 100644
index 000000000..2805ecd1c
--- /dev/null
+++ b/frontend/src/remotion/composition/enums/enums.js
@@ -0,0 +1,2 @@
+// Using .js extension to avoid TypeScript issues with Remotion's rendering process.
+export { videoOrientation } from './video-orientation.enum.js';
diff --git a/frontend/src/remotion/composition/enums/video-orientation.enum.js b/frontend/src/remotion/composition/enums/video-orientation.enum.js
new file mode 100644
index 000000000..7b20d3fda
--- /dev/null
+++ b/frontend/src/remotion/composition/enums/video-orientation.enum.js
@@ -0,0 +1,7 @@
+// Using .js extension to avoid TypeScript issues with Remotion's rendering process.
+const videoOrientation = {
+    LANDSCAPE: 'landscape',
+    PORTRAIT: 'portrait',
+};
+
+export { videoOrientation };

From 1a0d31aed46f8ae46259888fd14a5fc575becd0e Mon Sep 17 00:00:00 2001
From: Sergiy <sergiy0378@gmail.com>
Date: Tue, 24 Sep 2024 20:12:47 +0300
Subject: [PATCH 03/12] OV-396: * remotion composition

---
 frontend/src/remotion/composition/main.jsx    | 11 +++++---
 .../remotion/composition/styles.module.css    | 11 +++++++-
 frontend/src/remotion/root.jsx                | 27 +++++++++++++++----
 3 files changed, 40 insertions(+), 9 deletions(-)

diff --git a/frontend/src/remotion/composition/main.jsx b/frontend/src/remotion/composition/main.jsx
index 3fdc704ab..e7da6035b 100644
--- a/frontend/src/remotion/composition/main.jsx
+++ b/frontend/src/remotion/composition/main.jsx
@@ -1,9 +1,9 @@
 // Using .js extension to avoid TypeScript issues with Remotion's rendering process.
 import { AbsoluteFill, Video, Series } from 'remotion';
-
+import { videoOrientation as videoOrientationValue } from './enums/enums.js';
 import styles from './styles.module.css';
 
-const Main = ({ scenes }) => {
+const Main = ({ scenes, videoOrientation }) => {
     return (
         <AbsoluteFill>
             <Series>
@@ -14,7 +14,12 @@ const Main = ({ scenes }) => {
                             durationInFrames={scene.durationInFrames}
                         >
                             <Video
-                                className={styles['avatar']}
+                                className={
+                                    videoOrientation ===
+                                    videoOrientationValue.PORTRAIT
+                                        ? styles['avatar-portrait']
+                                        : styles['avatar-landscape']
+                                }
                                 src={scene.avatar.url}
                             />
                             {scene?.background?.url && (
diff --git a/frontend/src/remotion/composition/styles.module.css b/frontend/src/remotion/composition/styles.module.css
index 1f781646e..9e7feda54 100644
--- a/frontend/src/remotion/composition/styles.module.css
+++ b/frontend/src/remotion/composition/styles.module.css
@@ -13,7 +13,16 @@
     position: absolute;
 }
 
-.avatar {
+.avatar-landscape {
     z-index: 3;
     position: absolute;
 }
+
+.avatar-portrait {
+    height: 1500px;
+    z-index: 3;
+    position: absolute;
+    bottom: 0;
+    left: 50%;
+    transform: translate(-50%);
+}
diff --git a/frontend/src/remotion/root.jsx b/frontend/src/remotion/root.jsx
index 9d38cce72..d2aa41fda 100644
--- a/frontend/src/remotion/root.jsx
+++ b/frontend/src/remotion/root.jsx
@@ -1,6 +1,14 @@
 // Using .js extension to avoid TypeScript issues with Remotion's rendering process.
 import { Composition } from 'remotion';
-
+import {
+    FPS,
+    LANDSCAPE_HEIGHT,
+    LANDSCAPE_WIDTH,
+    MINIMAL_DURATION_IN_FRAMES,
+    PORTRAIT_HEIGHT,
+    PORTRAIT_WIDTH,
+} from './composition/constants/constants.js';
+import { videoOrientation } from './composition/enums/enums.js';
 import { Main } from './composition/main.jsx';
 
 export const RemotionRoot = (props) => {
@@ -8,14 +16,23 @@ export const RemotionRoot = (props) => {
         <Composition
             id={'outreachvids-composition'}
             component={Main}
-            durationInFrames={100}
-            fps={30}
-            width={1920}
-            height={1080}
+            durationInFrames={MINIMAL_DURATION_IN_FRAMES}
+            fps={FPS}
+            width={LANDSCAPE_WIDTH}
+            height={LANDSCAPE_HEIGHT}
             defaultProps={{ scenes: props.scenes }}
             calculateMetadata={({ props }) => {
                 return {
                     durationInFrames: props.totalDurationInFrames,
+                    height:
+                        props.videoOrientation === videoOrientation.PORTRAIT
+                            ? PORTRAIT_HEIGHT
+                            : LANDSCAPE_HEIGHT,
+
+                    width:
+                        props.videoOrientation === videoOrientation.PORTRAIT
+                            ? PORTRAIT_WIDTH
+                            : LANDSCAPE_WIDTH,
                 };
             }}
         />

From b46490f6167bb6ea627352af7e5aeff8c9f731ba Mon Sep 17 00:00:00 2001
From: Sergiy <sergiy0378@gmail.com>
Date: Tue, 24 Sep 2024 20:17:51 +0300
Subject: [PATCH 04/12] OV-396: + types

---
 .../types/composition-with-generated-avatar.type.ts  | 12 ++++++++++++
 .../types/composition-with-remotion-scenes.type.ts   |  9 +++++++++
 .../composition-with-scenes-for-rendering.type.ts    | 12 ++++++++++++
 backend/src/bundles/avatar-videos/types/types.ts     |  3 +++
 4 files changed, 36 insertions(+)
 create mode 100644 backend/src/bundles/avatar-videos/types/composition-with-generated-avatar.type.ts
 create mode 100644 backend/src/bundles/avatar-videos/types/composition-with-remotion-scenes.type.ts
 create mode 100644 backend/src/bundles/avatar-videos/types/composition-with-scenes-for-rendering.type.ts

diff --git a/backend/src/bundles/avatar-videos/types/composition-with-generated-avatar.type.ts b/backend/src/bundles/avatar-videos/types/composition-with-generated-avatar.type.ts
new file mode 100644
index 000000000..987f59f8d
--- /dev/null
+++ b/backend/src/bundles/avatar-videos/types/composition-with-generated-avatar.type.ts
@@ -0,0 +1,12 @@
+import { type Composition } from 'shared';
+
+import { type SceneWithGeneratedAvatar } from './types.js';
+
+type CompositionWithGeneratedAvatars = Omit<
+    Composition,
+    'scripts' | 'scenes'
+> & {
+    scenes: SceneWithGeneratedAvatar[];
+};
+
+export { type CompositionWithGeneratedAvatars };
diff --git a/backend/src/bundles/avatar-videos/types/composition-with-remotion-scenes.type.ts b/backend/src/bundles/avatar-videos/types/composition-with-remotion-scenes.type.ts
new file mode 100644
index 000000000..325feb1eb
--- /dev/null
+++ b/backend/src/bundles/avatar-videos/types/composition-with-remotion-scenes.type.ts
@@ -0,0 +1,9 @@
+import { type Composition } from 'shared';
+
+import { type RemotionAvatarScene } from '~/common/services/remotion/type/remotion-avatar-scene.js';
+
+type CompositionWithRemotionScenes = Omit<Composition, 'scripts' | 'scenes'> & {
+    scenes: RemotionAvatarScene[];
+};
+
+export { type CompositionWithRemotionScenes };
diff --git a/backend/src/bundles/avatar-videos/types/composition-with-scenes-for-rendering.type.ts b/backend/src/bundles/avatar-videos/types/composition-with-scenes-for-rendering.type.ts
new file mode 100644
index 000000000..93fd81467
--- /dev/null
+++ b/backend/src/bundles/avatar-videos/types/composition-with-scenes-for-rendering.type.ts
@@ -0,0 +1,12 @@
+import { type Composition } from 'shared';
+
+import { type SceneForRenderAvatar } from './types.js';
+
+type CompositionWithScenesForRenderAvatar = Omit<
+    Composition,
+    'scripts' | 'scenes'
+> & {
+    scenes: SceneForRenderAvatar[];
+};
+
+export { type CompositionWithScenesForRenderAvatar };
diff --git a/backend/src/bundles/avatar-videos/types/types.ts b/backend/src/bundles/avatar-videos/types/types.ts
index 14ce0f901..404885c0e 100644
--- a/backend/src/bundles/avatar-videos/types/types.ts
+++ b/backend/src/bundles/avatar-videos/types/types.ts
@@ -1,3 +1,6 @@
+export { type CompositionWithGeneratedAvatars } from './composition-with-generated-avatar.type.js';
+export { type CompositionWithRemotionScenes } from './composition-with-remotion-scenes.type.js';
+export { type CompositionWithScenesForRenderAvatar } from './composition-with-scenes-for-rendering.type.js';
 export { type SceneForRenderAvatar } from './scene-for-render-avatar.type.js';
 export { type SceneWithGeneratedAvatar } from './scene-with-generated-avatar.type.js';
 export {

From 5d265511a7386948d3d2f91b98aebac702657ec4 Mon Sep 17 00:00:00 2001
From: Sergiy <sergiy0378@gmail.com>
Date: Tue, 24 Sep 2024 20:19:25 +0300
Subject: [PATCH 05/12] OV-396: * schemas

---
 .../render-avatar-video.validation-schema.ts   |  6 ++++--
 .../create-video.validation-schema.ts          | 18 ++++++++++++++++--
 2 files changed, 20 insertions(+), 4 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 b9e092f81..3d6e41562 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
@@ -28,9 +28,10 @@ type ScriptValidation = {
     voiceName: z.ZodString;
 };
 
-type Composition = {
+type CompositionSchema = {
     scenes: z.ZodArray<typeof sceneSchema>;
     scripts: z.ZodArray<typeof scriptSchema>;
+    videoOrientation: z.ZodEnum<['landscape', 'portrait']>;
 };
 
 type GenerateAvatarVideoRequestValidationDto = {
@@ -111,13 +112,14 @@ const scriptSchema = z
         },
     );
 
-const compositionSchema = z.object<Composition>({
+const compositionSchema = z.object<CompositionSchema>({
     scenes: z.array(sceneSchema).min(1, {
         message: AvatarVideoValidationMessage.SCENES_REQUIRED,
     }),
     scripts: z.array(scriptSchema).min(1, {
         message: AvatarVideoValidationMessage.SCRIPTS_REQUIRED,
     }),
+    videoOrientation: z.enum(['landscape', 'portrait']),
 });
 
 const renderAvatarVideo = z.object<GenerateAvatarVideoRequestValidationDto>({
diff --git a/shared/src/bundles/videos/validation-schemas/create-video.validation-schema.ts b/shared/src/bundles/videos/validation-schemas/create-video.validation-schema.ts
index ef2ced1e2..5b8fbf50d 100644
--- a/shared/src/bundles/videos/validation-schemas/create-video.validation-schema.ts
+++ b/shared/src/bundles/videos/validation-schemas/create-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: z.ZodOptional<typeof backgroundSchema>;
 };
 
 type ScriptValidation = {
@@ -22,9 +28,10 @@ type ScriptValidation = {
     voiceName: z.ZodString;
 };
 
-type Composition = {
+type CompositionSchema = {
     scenes: z.ZodArray<typeof sceneSchema>;
     scripts: z.ZodArray<typeof scriptSchema>;
+    videoOrientation: z.ZodEnum<['landscape', 'portrait']>;
 };
 
 type GenerateAvatarVideoRequestValidationDto = {
@@ -48,6 +55,11 @@ const avatarSchema = z.object<SceneAvatarValidation>({
     }),
 });
 
+const backgroundSchema = z.object<SceneBackground>({
+    color: z.string().min(1).optional(),
+    url: z.string().url().optional(),
+});
+
 const sceneSchema = z.object<SceneValidation>({
     duration: z.number().min(1, {
         message: VideoValidationMessage.DURATION_REQUIRED,
@@ -56,6 +68,7 @@ const sceneSchema = z.object<SceneValidation>({
         message: VideoValidationMessage.ID_REQUIRED,
     }),
     avatar: avatarSchema,
+    background: backgroundSchema.optional(),
 });
 
 const scriptSchema = z
@@ -93,13 +106,14 @@ const scriptSchema = z
         },
     );
 
-const compositionSchema = z.object<Composition>({
+const compositionSchema = z.object<CompositionSchema>({
     scenes: z.array(sceneSchema).min(1, {
         message: VideoValidationMessage.SCENES_REQUIRED,
     }),
     scripts: z.array(scriptSchema).min(1, {
         message: VideoValidationMessage.SCRIPTS_REQUIRED,
     }),
+    videoOrientation: z.enum(['landscape', 'portrait']),
 });
 
 const createVideo = z.object<GenerateAvatarVideoRequestValidationDto>({

From 6921286e6bf77d7a95a15e547a35f05ba1d38fce Mon Sep 17 00:00:00 2001
From: Sergiy <sergiy0378@gmail.com>
Date: Tue, 24 Sep 2024 20:20:28 +0300
Subject: [PATCH 06/12] OV-396: * types

---
 shared/src/bundles/avatar-videos/types/composition.type.ts     | 2 ++
 .../src/bundles/avatar-videos/types/video-orientation.type.ts  | 3 +++
 2 files changed, 5 insertions(+)
 create mode 100644 shared/src/bundles/avatar-videos/types/video-orientation.type.ts

diff --git a/shared/src/bundles/avatar-videos/types/composition.type.ts b/shared/src/bundles/avatar-videos/types/composition.type.ts
index 805a638b6..d9a52d22f 100644
--- a/shared/src/bundles/avatar-videos/types/composition.type.ts
+++ b/shared/src/bundles/avatar-videos/types/composition.type.ts
@@ -1,9 +1,11 @@
 import { type Scene } from './scene.type.js';
 import { type Script } from './script.type.js';
+import { type VideoOrientation } from './video-orientation.type.js';
 
 type Composition = {
     scenes: Scene[];
     scripts: Script[];
+    videoOrientation: VideoOrientation;
 };
 
 export { type Composition };
diff --git a/shared/src/bundles/avatar-videos/types/video-orientation.type.ts b/shared/src/bundles/avatar-videos/types/video-orientation.type.ts
new file mode 100644
index 000000000..7450cb086
--- /dev/null
+++ b/shared/src/bundles/avatar-videos/types/video-orientation.type.ts
@@ -0,0 +1,3 @@
+type VideoOrientation = 'landscape' | 'portrait';
+
+export { type VideoOrientation };

From ed63c58a3be75ed454de760685779bcfe03b8d07 Mon Sep 17 00:00:00 2001
From: Sergiy <sergiy0378@gmail.com>
Date: Tue, 24 Sep 2024 20:23:22 +0300
Subject: [PATCH 07/12] OV-396: * avatar-video controller

---
 .../avatar-videos/avatar-videos.controller.ts |   8 +-
 .../avatar-videos/avatar-videos.service.ts    | 236 +++++-------------
 .../bundles/avatar-videos/avatar-videos.ts    |   6 +-
 .../bundles/avatar-videos/scenes.service.ts   | 197 +++++++++++++++
 4 files changed, 258 insertions(+), 189 deletions(-)
 create mode 100644 backend/src/bundles/avatar-videos/scenes.service.ts

diff --git a/backend/src/bundles/avatar-videos/avatar-videos.controller.ts b/backend/src/bundles/avatar-videos/avatar-videos.controller.ts
index 4d2ca691d..02b5ef27d 100644
--- a/backend/src/bundles/avatar-videos/avatar-videos.controller.ts
+++ b/backend/src/bundles/avatar-videos/avatar-videos.controller.ts
@@ -89,13 +89,7 @@ class AvatarVideoController extends BaseController {
             ? this.avatarVideoService.updateVideo({ ...videoPayload, videoId })
             : this.avatarVideoService.createVideo({ ...videoPayload, userId }));
 
-        const scenesConfigs =
-            this.avatarVideoService.getScenesConfigs(composition);
-
-        await this.avatarVideoService.submitAvatarsConfigs(
-            scenesConfigs,
-            videoRecord.id,
-        );
+        await this.avatarVideoService.renderVideo(composition, videoRecord.id);
 
         return {
             payload: { status: ResponseStatus.SUBMITTED },
diff --git a/backend/src/bundles/avatar-videos/avatar-videos.service.ts b/backend/src/bundles/avatar-videos/avatar-videos.service.ts
index 083b4139e..8b121a8cf 100644
--- a/backend/src/bundles/avatar-videos/avatar-videos.service.ts
+++ b/backend/src/bundles/avatar-videos/avatar-videos.service.ts
@@ -1,61 +1,37 @@
-import { type VideoGetAllItemResponseDto } from 'shared';
-import { HTTPCode, HttpError } from 'shared';
+import { type VideoGetAllItemResponseDto, HTTPCode, HttpError } from 'shared';
 
-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 VideoService } from '../videos/video.service.js';
-import { REQUEST_DELAY } from './constants/constnats.js';
-import {
-    GenerateAvatarResponseStatus,
-    RenderVideoErrorMessage,
-} from './enums/enums.js';
-import { generatedAvatarToRemotionScene } from './helpers/generated-avatars-to-remotion-scenes.helper.js';
-import {
-    distributeScriptsToScenes,
-    getFileName,
-    getTotalDuration,
-} from './helpers/helpers.js';
+import { RenderVideoErrorMessage } from './enums/enums.js';
+import { getTotalDuration } from './helpers/helpers.js';
+import { type SceneService } from './scenes.service.js';
 import {
     type Composition,
+    type CompositionWithGeneratedAvatars,
+    type CompositionWithScenesForRenderAvatar,
     type RenderAvatarVideoRequestDto,
-    type SceneForRenderAvatar,
-    type SceneWithGeneratedAvatar,
 } from './types/types.js';
 
 type Constructor = {
-    azureAIService: AzureAIService;
-    fileService: FileService;
     videoService: VideoService;
     remotionService: RemotionService;
+    scenesService: SceneService;
 };
 
 class AvatarVideoService {
-    private azureAIService: AzureAIService;
-    private fileService: FileService;
     private videoService: VideoService;
     private remotionService: RemotionService;
+    private scenesService: SceneService;
 
     public constructor({
-        azureAIService,
-        fileService,
         remotionService,
         videoService,
+        scenesService,
     }: Constructor) {
-        this.azureAIService = azureAIService;
-        this.fileService = fileService;
         this.videoService = videoService;
         this.remotionService = remotionService;
-    }
-
-    private async saveAvatarVideo(url: string, id: string): Promise<string> {
-        const buffer = await this.azureAIService.getAvatarVideoBuffer(url);
-
-        const fileName = getFileName(id);
-
-        await this.fileService.uploadFile(buffer, fileName);
-        return this.fileService.getCloudFrontFileUrl(fileName);
+        this.scenesService = scenesService;
     }
 
     public async createVideo({
@@ -83,179 +59,79 @@ class AvatarVideoService {
         });
     }
 
-    public getScenesConfigs(composition: Composition): SceneForRenderAvatar[] {
-        return distributeScriptsToScenes(composition);
-    }
-
-    public async submitAvatarsConfigs(
-        scenesForRenderAvatar: SceneForRenderAvatar[],
-        recordId: string,
+    public async renderVideo(
+        composition: Composition,
+        videoRecordId: string,
     ): Promise<void> {
-        try {
-            await Promise.all(
-                scenesForRenderAvatar.map((scene) => {
-                    return this.azureAIService.renderAvatarVideo({
-                        id: scene.id,
-                        payload: scene.avatar,
-                    });
-                }),
-            );
+        const scenesForAvatarsRendering = this.scenesService.getScenesConfigs({
+            scenes: composition.scenes,
+            scripts: composition.scripts,
+        });
 
-            this.checkAvatarsProcessing(scenesForRenderAvatar, recordId).catch(
-                () => {
-                    throw new HttpError({
-                        message: RenderVideoErrorMessage.RENDER_ERROR,
-                        status: HTTPCode.BAD_REQUEST,
-                    });
-                },
-            );
-        } catch {
+        await this.scenesService.submitAvatarsConfigs(
+            scenesForAvatarsRendering,
+        );
+
+        this.handleRenderingVideo(
+            {
+                ...composition,
+                scenes: scenesForAvatarsRendering,
+            },
+            videoRecordId,
+        ).catch(() => {
             throw new HttpError({
                 message: RenderVideoErrorMessage.RENDER_ERROR,
                 status: HTTPCode.BAD_REQUEST,
             });
-        }
+        });
     }
 
-    public async checkAvatarsProcessing(
-        scenesForRenderAvatar: SceneForRenderAvatar[],
+    public async handleRenderingVideo(
+        composition: CompositionWithScenesForRenderAvatar,
         videoRecordId: string,
     ): Promise<void> {
-        try {
-            const response = await Promise.all(
-                scenesForRenderAvatar.map((scene) => {
-                    return this.checkAvatarStatus(scene);
-                }),
-            );
-
-            await this.handleSuccessfulAvatarsGeneration({
-                scenesWithGeneratedAvatars: response,
-                videoRecordId,
-            });
-        } catch {
-            throw new HttpError({
-                message: RenderVideoErrorMessage.RENDER_ERROR,
-                status: HTTPCode.BAD_REQUEST,
-            });
-        }
-    }
-
-    private checkAvatarStatus(
-        scene: SceneForRenderAvatar,
-    ): Promise<SceneWithGeneratedAvatar> {
-        return new Promise((resolve, reject) => {
-            const interval = setInterval(() => {
-                this.azureAIService
-                    .getAvatarVideo(scene.id)
-                    .then((response) => {
-                        if (
-                            response.status ===
-                            GenerateAvatarResponseStatus.SUCCEEDED
-                        ) {
-                            clearInterval(interval);
-
-                            resolve({
-                                ...scene,
-                                avatar: {
-                                    url: response.outputs.result,
-                                },
-                                durationInMilliseconds:
-                                    response.properties.durationInMilliseconds,
-                            });
-                        } else if (
-                            response.status ===
-                            GenerateAvatarResponseStatus.FAILED
-                        ) {
-                            reject(
-                                new HttpError({
-                                    message:
-                                        RenderVideoErrorMessage.RENDER_ERROR,
-                                    status: HTTPCode.BAD_REQUEST,
-                                }),
-                            );
-                            clearInterval(interval);
-                        }
-                    })
-                    .catch(() => {
-                        reject(
-                            new HttpError({
-                                message: RenderVideoErrorMessage.RENDER_ERROR,
-                                status: HTTPCode.BAD_REQUEST,
-                            }),
-                        );
-                        clearInterval(interval);
-                    });
-            }, REQUEST_DELAY);
+        const scenesWithGeneratedAvatar =
+            await this.scenesService.checkAvatarsProcessing(composition.scenes);
+
+        await this.handleSuccessfulAvatarsGeneration({
+            videoRecordId,
+            compositionWithGeneratedAvatars: {
+                ...composition,
+                scenes: scenesWithGeneratedAvatar,
+            },
         });
     }
 
     private async handleSuccessfulAvatarsGeneration({
         videoRecordId,
-        scenesWithGeneratedAvatars,
+        compositionWithGeneratedAvatars,
     }: {
         videoRecordId: string;
-        scenesWithGeneratedAvatars: SceneWithGeneratedAvatar[];
+        compositionWithGeneratedAvatars: CompositionWithGeneratedAvatars;
     }): Promise<void> {
-        const scenesWithSavedAvatars = await this.saveGeneratedAvatar(
-            scenesWithGeneratedAvatars,
-        );
-        const scenesForRendering = generatedAvatarToRemotionScene(
-            scenesWithSavedAvatars,
-        );
+        const compositionForRender = {
+            ...compositionWithGeneratedAvatars,
+            scenes: await this.scenesService.getScenesForRemotionRender(
+                compositionWithGeneratedAvatars.scenes,
+            ),
+        };
 
         const renderId = await this.remotionService.renderVideo({
-            scenes: scenesForRendering,
-            totalDurationInFrames: getTotalDuration(scenesForRendering),
+            ...compositionForRender,
+            totalDurationInFrames: getTotalDuration(
+                compositionForRender.scenes,
+            ),
         });
 
         const url =
             await this.remotionService.getRemotionRenderProgress(renderId);
 
-        await this.removeGeneratedAvatars(scenesWithSavedAvatars);
-        await this.removeAvatarsFromBucket(scenesWithSavedAvatars);
-
-        if (!url) {
-            return;
+        if (url) {
+            // TODO: NOTIFY USER
+            await this.videoService.update(videoRecordId, { url });
         }
-        // TODO: NOTIFY USER
-        await this.videoService.update(videoRecordId, { url });
-    }
 
-    private async removeGeneratedAvatars(
-        scenesWithGeneratedAvatars: SceneWithGeneratedAvatar[],
-    ): Promise<unknown> {
-        return Promise.all(
-            scenesWithGeneratedAvatars.map((scene) => {
-                return this.azureAIService.removeAvatarVideo(scene.id);
-            }),
-        );
-    }
-
-    private async saveGeneratedAvatar(
-        scenesWithGeneratedAvatars: SceneWithGeneratedAvatar[],
-    ): Promise<SceneWithGeneratedAvatar[]> {
-        const urls = await Promise.all(
-            scenesWithGeneratedAvatars.map(async (scene) => {
-                return this.saveAvatarVideo(scene.avatar.url, scene.id);
-            }),
-        );
-
-        return scenesWithGeneratedAvatars.map((scene, index) => ({
-            ...scene,
-            avatar: {
-                url: urls[index] as string,
-            },
-        }));
-    }
-
-    private async removeAvatarsFromBucket(
-        scenesWithGeneratedAvatars: SceneWithGeneratedAvatar[],
-    ): Promise<unknown> {
-        return Promise.all(
-            scenesWithGeneratedAvatars.map((scene) => {
-                return this.fileService.deleteFile(getFileName(scene.id));
-            }),
-        );
+        await this.scenesService.clearAvatars(compositionForRender.scenes);
     }
 }
 
diff --git a/backend/src/bundles/avatar-videos/avatar-videos.ts b/backend/src/bundles/avatar-videos/avatar-videos.ts
index 3f4c729c5..93b76b54b 100644
--- a/backend/src/bundles/avatar-videos/avatar-videos.ts
+++ b/backend/src/bundles/avatar-videos/avatar-videos.ts
@@ -8,12 +8,14 @@ import {
 import { videoService } from '../videos/videos.js';
 import { AvatarVideoController } from './avatar-videos.controller.js';
 import { AvatarVideoService } from './avatar-videos.service.js';
+import { SceneService } from './scenes.service.js';
+
+const scenesService = new SceneService({ azureAIService, fileService });
 
 const avatarVideoService = new AvatarVideoService({
-    azureAIService,
-    fileService,
     videoService,
     remotionService,
+    scenesService,
 });
 
 const avatarVideoController = new AvatarVideoController(
diff --git a/backend/src/bundles/avatar-videos/scenes.service.ts b/backend/src/bundles/avatar-videos/scenes.service.ts
new file mode 100644
index 000000000..8296df9e7
--- /dev/null
+++ b/backend/src/bundles/avatar-videos/scenes.service.ts
@@ -0,0 +1,197 @@
+import { HTTPCode, HttpError } from '~/common/http/http.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 RemotionAvatarScene } from '~/common/services/remotion/type/remotion-avatar-scene.js';
+
+import { REQUEST_DELAY } from './constants/constnats.js';
+import {
+    GenerateAvatarResponseStatus,
+    RenderVideoErrorMessage,
+} from './enums/enums.js';
+import { generatedAvatarToRemotionScene } from './helpers/generated-avatars-to-remotion-scenes.helper.js';
+import { distributeScriptsToScenes, getFileName } from './helpers/helpers.js';
+import {
+    type Scene,
+    type SceneForRenderAvatar,
+    type SceneWithGeneratedAvatar,
+    type Script,
+} from './types/types.js';
+
+type Constructor = {
+    azureAIService: AzureAIService;
+    fileService: FileService;
+};
+
+class SceneService {
+    private azureAIService: AzureAIService;
+    private fileService: FileService;
+
+    public constructor({ azureAIService, fileService }: Constructor) {
+        this.azureAIService = azureAIService;
+        this.fileService = fileService;
+    }
+
+    public getScenesConfigs({
+        scenes,
+        scripts,
+    }: {
+        scenes: Scene[];
+        scripts: Script[];
+    }): SceneForRenderAvatar[] {
+        return distributeScriptsToScenes({
+            scenes,
+            scripts,
+        });
+    }
+
+    public async getScenesForRemotionRender(
+        scenesWithGeneratedAvatars: SceneWithGeneratedAvatar[],
+    ): Promise<RemotionAvatarScene[]> {
+        const scenesWithSavedAvatars = await this.saveGeneratedAvatar(
+            scenesWithGeneratedAvatars,
+        );
+
+        return generatedAvatarToRemotionScene(scenesWithSavedAvatars);
+    }
+
+    private async saveGeneratedAvatar(
+        scenesWithGeneratedAvatars: SceneWithGeneratedAvatar[],
+    ): Promise<SceneWithGeneratedAvatar[]> {
+        const urls = await Promise.all(
+            scenesWithGeneratedAvatars.map(async (scene) => {
+                return this.saveAvatarVideo(scene.avatar.url, scene.id);
+            }),
+        );
+
+        return scenesWithGeneratedAvatars.map((scene, index) => ({
+            ...scene,
+            avatar: {
+                url: urls[index] as string,
+            },
+        }));
+    }
+
+    public async checkAvatarsProcessing(
+        scenesForRenderingAvatars: SceneForRenderAvatar[],
+    ): Promise<SceneWithGeneratedAvatar[]> {
+        try {
+            return await Promise.all(
+                scenesForRenderingAvatars.map((scene) => {
+                    return this.checkAvatarStatus(scene);
+                }),
+            );
+        } catch {
+            throw new HttpError({
+                message: RenderVideoErrorMessage.RENDER_ERROR,
+                status: HTTPCode.BAD_REQUEST,
+            });
+        }
+    }
+
+    private async saveAvatarVideo(url: string, id: string): Promise<string> {
+        const buffer = await this.azureAIService.getAvatarVideoBuffer(url);
+
+        const fileName = getFileName(id);
+
+        await this.fileService.uploadFile(buffer, fileName);
+        return this.fileService.getCloudFrontFileUrl(fileName);
+    }
+
+    public async submitAvatarsConfigs(
+        scenesForRenderingAvatars: SceneForRenderAvatar[],
+    ): Promise<void> {
+        try {
+            await Promise.all(
+                scenesForRenderingAvatars.map((scene) => {
+                    return this.azureAIService.renderAvatarVideo({
+                        id: scene.id,
+                        payload: scene.avatar,
+                    });
+                }),
+            );
+        } catch {
+            throw new HttpError({
+                message: RenderVideoErrorMessage.RENDER_ERROR,
+                status: HTTPCode.BAD_REQUEST,
+            });
+        }
+    }
+
+    private checkAvatarStatus(
+        scene: SceneForRenderAvatar,
+    ): Promise<SceneWithGeneratedAvatar> {
+        return new Promise((resolve, reject) => {
+            const interval = setInterval(() => {
+                this.azureAIService
+                    .getAvatarVideo(scene.id)
+                    .then((response) => {
+                        if (
+                            response.status ===
+                            GenerateAvatarResponseStatus.SUCCEEDED
+                        ) {
+                            clearInterval(interval);
+
+                            resolve({
+                                ...scene,
+                                avatar: {
+                                    url: response.outputs.result,
+                                },
+                                durationInMilliseconds:
+                                    response.properties.durationInMilliseconds,
+                            });
+                        } else if (
+                            response.status ===
+                            GenerateAvatarResponseStatus.FAILED
+                        ) {
+                            reject(
+                                new HttpError({
+                                    message:
+                                        RenderVideoErrorMessage.RENDER_ERROR,
+                                    status: HTTPCode.BAD_REQUEST,
+                                }),
+                            );
+                            clearInterval(interval);
+                        }
+                    })
+                    .catch(() => {
+                        reject(
+                            new HttpError({
+                                message: RenderVideoErrorMessage.RENDER_ERROR,
+                                status: HTTPCode.BAD_REQUEST,
+                            }),
+                        );
+                        clearInterval(interval);
+                    });
+            }, REQUEST_DELAY);
+        });
+    }
+
+    public async clearAvatars(
+        remotionAvatarScenes: RemotionAvatarScene[],
+    ): Promise<void> {
+        await this.removeGeneratedAvatars(remotionAvatarScenes);
+        await this.removeAvatarsFromBucket(remotionAvatarScenes);
+    }
+
+    private async removeGeneratedAvatars(
+        scenesWithGeneratedAvatars: RemotionAvatarScene[],
+    ): Promise<unknown> {
+        return Promise.all(
+            scenesWithGeneratedAvatars.map((scene) => {
+                return this.azureAIService.removeAvatarVideo(scene.id);
+            }),
+        );
+    }
+
+    private async removeAvatarsFromBucket(
+        scenesWithGeneratedAvatars: RemotionAvatarScene[],
+    ): Promise<unknown> {
+        return Promise.all(
+            scenesWithGeneratedAvatars.map((scene) => {
+                return this.fileService.deleteFile(getFileName(scene.id));
+            }),
+        );
+    }
+}
+
+export { SceneService };

From 7ab8597588b6d31ef1b611910a1d114299b5f188 Mon Sep 17 00:00:00 2001
From: Sergiy <sergiy0378@gmail.com>
Date: Tue, 24 Sep 2024 20:36:57 +0300
Subject: [PATCH 08/12] OV-396: * actions

---
 frontend/src/bundles/studio/pages/studio.tsx | 7 ++++---
 frontend/src/bundles/studio/store/actions.ts | 4 +++-
 2 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/frontend/src/bundles/studio/pages/studio.tsx b/frontend/src/bundles/studio/pages/studio.tsx
index 1fbf71ef2..0761c0880 100644
--- a/frontend/src/bundles/studio/pages/studio.tsx
+++ b/frontend/src/bundles/studio/pages/studio.tsx
@@ -53,7 +53,7 @@ const Studio: React.FC = () => {
         selectVideoDataById(state, locationState?.id),
     );
 
-    const { scenes, scripts, videoName, videoId, scriptPlayer } =
+    const { scenes, scripts, videoName, videoId, scriptPlayer, videoSize } =
         useAppSelector(({ studio }) => studio);
 
     const playerReference = useRef<PlayerRef>(null);
@@ -71,7 +71,6 @@ const Studio: React.FC = () => {
     }, [dispatch]);
 
     const handleSubmit = useCallback(() => {
-        // TODO: REPLACE LOGIC WITH MULTIPLE SCENES
         const scene = scenes[0];
         const script = scripts[0];
 
@@ -130,6 +129,8 @@ const Studio: React.FC = () => {
                 composition: {
                     scenes,
                     scripts: getVoicesConfigs(scripts),
+                    // TODO : CHANGE TO ENUM
+                    videoOrientation: videoSize,
                 },
                 name: videoName,
             }),
@@ -148,7 +149,7 @@ const Studio: React.FC = () => {
                     title: NotificationTitle.VIDEO_SAVE_FAILED,
                 });
             });
-    }, [dispatch, scenes, scripts, videoId, videoName]);
+    }, [dispatch, scenes, scripts, videoId, videoName, videoSize]);
 
     const handleAudioEnd = useCallback((): void => {
         dispatch(studioActions.playScript({ isPlaying: false }));
diff --git a/frontend/src/bundles/studio/store/actions.ts b/frontend/src/bundles/studio/store/actions.ts
index e43a1bb69..05c79464b 100644
--- a/frontend/src/bundles/studio/store/actions.ts
+++ b/frontend/src/bundles/studio/store/actions.ts
@@ -96,11 +96,13 @@ const renderAvatar = createAsyncThunk<
     AsyncThunkConfig
 >(`${sliceName}/render-avatar`, (_, { extra, getState }) => {
     const { avatarVideosApi } = extra;
-    const { scripts, scenes, videoName, videoId } = getState().studio;
+    const { scripts, scenes, videoName, videoId, videoSize } =
+        getState().studio;
     return avatarVideosApi.renderVideo({
         composition: {
             scenes,
             scripts: getVoicesConfigs(scripts),
+            videoOrientation: videoSize,
         },
         name: videoName,
         ...(videoId && { videoId }),

From 8a741a341db1d447b4159c4623c7f9c2913995a5 Mon Sep 17 00:00:00 2001
From: Sergiy <sergiy0378@gmail.com>
Date: Wed, 25 Sep 2024 16:43:19 +0300
Subject: [PATCH 09/12] OV-426: * vite config

---
 frontend/vite.config.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/frontend/vite.config.ts b/frontend/vite.config.ts
index 0ba26a62c..ae64c67ca 100644
--- a/frontend/vite.config.ts
+++ b/frontend/vite.config.ts
@@ -55,6 +55,7 @@ const config = ({ mode }: ConfigEnv): ReturnType<typeof defineConfig> => {
                 [VITE_APP_API_ORIGIN_URL as string]: {
                     target: VITE_APP_PROXY_SERVER_URL,
                     changeOrigin: true,
+                    ws: true,
                 },
             },
         },

From 69ab354e2843c171f45e653d2fbd8214b3e02c9b Mon Sep 17 00:00:00 2001
From: Sergiy <sergiy0378@gmail.com>
Date: Wed, 25 Sep 2024 17:06:26 +0300
Subject: [PATCH 10/12] OV-426: * vite

---
 frontend/.env.example                                | 1 +
 frontend/src/framework/config/base-config.package.ts | 3 +++
 frontend/vite.config.ts                              | 5 +++++
 3 files changed, 9 insertions(+)

diff --git a/frontend/.env.example b/frontend/.env.example
index ff8005638..ff5f13673 100644
--- a/frontend/.env.example
+++ b/frontend/.env.example
@@ -9,3 +9,4 @@ VITE_APP_API_ORIGIN_URL=/api/v1
 # DEV
 #
 VITE_APP_PROXY_SERVER_URL=http://localhost:3001
+VITE_APP_SOCKET_ORIGIN_URL=/socket.io
\ No newline at end of file
diff --git a/frontend/src/framework/config/base-config.package.ts b/frontend/src/framework/config/base-config.package.ts
index 1224b76c5..f58044b4b 100644
--- a/frontend/src/framework/config/base-config.package.ts
+++ b/frontend/src/framework/config/base-config.package.ts
@@ -16,6 +16,9 @@ class BaseConfig implements Config {
                 ORIGIN_URL: import.meta.env[
                     'VITE_APP_API_ORIGIN_URL'
                 ] as string,
+                SOCKET_ORIGIN_URL: import.meta.env[
+                    'VITE_APP_SOCKET_ORIGIN_URL'
+                ] as string,
             },
         };
     }
diff --git a/frontend/vite.config.ts b/frontend/vite.config.ts
index ae64c67ca..bfd716c3f 100644
--- a/frontend/vite.config.ts
+++ b/frontend/vite.config.ts
@@ -9,6 +9,7 @@ const config = ({ mode }: ConfigEnv): ReturnType<typeof defineConfig> => {
         VITE_APP_DEVELOPMENT_PORT,
         VITE_APP_API_ORIGIN_URL,
         VITE_APP_PROXY_SERVER_URL,
+        VITE_APP_SOCKET_ORIGIN_URL,
     } = loadEnv(mode, process.cwd());
 
     return defineConfig({
@@ -55,6 +56,10 @@ const config = ({ mode }: ConfigEnv): ReturnType<typeof defineConfig> => {
                 [VITE_APP_API_ORIGIN_URL as string]: {
                     target: VITE_APP_PROXY_SERVER_URL,
                     changeOrigin: true,
+                },
+                [VITE_APP_SOCKET_ORIGIN_URL as string]: {
+                    target: VITE_APP_PROXY_SERVER_URL,
+                    changeOrigin: true,
                     ws: true,
                 },
             },

From c991a299fe276f4a97f494619ed61a1a763410bd Mon Sep 17 00:00:00 2001
From: Sergiy <sergiy0378@gmail.com>
Date: Wed, 25 Sep 2024 17:08:56 +0300
Subject: [PATCH 11/12] OV-426: * vite

---
 frontend/src/framework/config/types/environment-schema.type.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/frontend/src/framework/config/types/environment-schema.type.ts b/frontend/src/framework/config/types/environment-schema.type.ts
index 6f8f4df7c..92adb2fd0 100644
--- a/frontend/src/framework/config/types/environment-schema.type.ts
+++ b/frontend/src/framework/config/types/environment-schema.type.ts
@@ -7,6 +7,7 @@ type EnvironmentSchema = {
     };
     API: {
         ORIGIN_URL: string;
+        SOCKET_ORIGIN_URL: string;
     };
 };
 

From 6a93f63a2fb51649b66ad3f8797dfa04d42fd043 Mon Sep 17 00:00:00 2001
From: Sergiy <sergiy0378@gmail.com>
Date: Wed, 25 Sep 2024 17:15:12 +0300
Subject: [PATCH 12/12] OV-426: * env.example

---
 frontend/.env.example | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/.env.example b/frontend/.env.example
index ff5f13673..9d1ec0623 100644
--- a/frontend/.env.example
+++ b/frontend/.env.example
@@ -9,4 +9,4 @@ VITE_APP_API_ORIGIN_URL=/api/v1
 # DEV
 #
 VITE_APP_PROXY_SERVER_URL=http://localhost:3001
-VITE_APP_SOCKET_ORIGIN_URL=/socket.io
\ No newline at end of file
+VITE_APP_SOCKET_ORIGIN_URL=/socket.io