OV-396: + merge

backend/src/common/services/remotion/constants/constants.ts

@@ -1,3 +1,5 @@
 export { CODEC } from './codec.constant.js';
 export { COMPOSITION_ID } from './composition-id.constant.js';
+export { DOWNLOAD_BEHAVIOR } from './download-behavior.constant.js';
+export { DOWNLOADED_FILE_NAME } from './downloaded-file-name.constant.js';
 export { REQUEST_DELAY } from './request-delay.constant.js';

backend/src/common/services/remotion/constants/download-behavior.constant.ts

@@ -0,0 +1,3 @@
+const DOWNLOAD_BEHAVIOR = 'download';
+
+export { DOWNLOAD_BEHAVIOR };

backend/src/common/services/remotion/constants/downloaded-file-name.constant.ts

@@ -0,0 +1,3 @@
+const DOWNLOADED_FILE_NAME = 'download.mp4';
+
+export { DOWNLOADED_FILE_NAME };

backend/src/common/services/remotion/remotion.service.ts

@@ -8,7 +8,13 @@ import { HTTPCode, HttpError } from 'shared';
 import { RenderVideoErrorMessage } from '~/bundles/avatar-videos/enums/enums.js';
 import { type BaseConfig } from '~/common/config/base-config.package.js';
 
-import { CODEC, COMPOSITION_ID, REQUEST_DELAY } from './constants/constants.js';
+import {
+    CODEC,
+    COMPOSITION_ID,
+    DOWNLOAD_BEHAVIOR,
+    DOWNLOADED_FILE_NAME,
+    REQUEST_DELAY,
+} from './constants/constants.js';
 import { type InputProps as InputProperties } from './type/types.js';
 
 class RemotionService {
@@ -25,6 +31,10 @@ class RemotionService {
         inputProperties: InputProperties,
     ): Promise<string> {
         const { renderId } = await renderMediaOnLambda({
+            downloadBehavior: {
+                type: DOWNLOAD_BEHAVIOR,
+                fileName: DOWNLOADED_FILE_NAME,
+            },
             region: this.config.ENV.AWS.S3.REGION as AwsRegion,
             functionName: this.config.ENV.REMOTION.LAMBDA_FUNCTION_NAME,
             composition: COMPOSITION_ID,

frontend/src/bundles/auth/components/common/components.ts

@@ -1,3 +1,2 @@
-export { FormError } from './form-error/form-error.js';
 export { FormHeader } from './form-header/form-header.js';
 export { PasswordInput } from './password-input/password-input.js';

frontend/src/bundles/auth/components/sign-in-form/sign-in-form.tsx

@@ -1,5 +1,4 @@
 import {
-    FormError,
     FormHeader,
     PasswordInput,
 } from '~/bundles/auth/components/common/components.js';
@@ -12,16 +11,8 @@ import {
     VStack,
 } from '~/bundles/common/components/components.js';
 import { EMPTY_VALUE } from '~/bundles/common/constants/constants.js';
-import {
-    AppRoute,
-    DataStatus,
-    UserValidationMessage,
-} from '~/bundles/common/enums/enums.js';
-import {
-    useAppForm,
-    useAppSelector,
-    useMemo,
-} from '~/bundles/common/hooks/hooks.js';
+import { AppRoute } from '~/bundles/common/enums/enums.js';
+import { useAppForm, useMemo } from '~/bundles/common/hooks/hooks.js';
 import {
     type UserSignInRequestDto,
     userSignInValidationSchema,
@@ -34,9 +25,6 @@ type Properties = {
 };
 
 const SignInForm: React.FC<Properties> = ({ onSubmit }) => {
-    const { dataStatus } = useAppSelector(({ auth }) => ({
-        dataStatus: auth.dataStatus,
-    }));
     const form = useAppForm<UserSignInRequestDto>({
         initialValues: DEFAULT_SIGN_IN_PAYLOAD,
         validationSchema: userSignInValidationSchema,
@@ -82,10 +70,6 @@ const SignInForm: React.FC<Properties> = ({ onSubmit }) => {
                             hasError={Boolean(errors.password)}
                             required
                         />
-                        <FormError
-                            isVisible={dataStatus === DataStatus.REJECTED}
-                            message={UserValidationMessage.INVALID_DATA}
-                        />
                         <Button
                             type="submit"
                             label="Sign in"

frontend/src/bundles/auth/components/sign-up-form/sign-up-form.tsx

@@ -1,5 +1,3 @@
-import { UserValidationMessage } from 'shared/src/bundles/users/users.js';
-
 import {
     Box,
     Button,
@@ -9,28 +7,21 @@ import {
     VStack,
 } from '~/bundles/common/components/components.js';
 import { EMPTY_VALUE } from '~/bundles/common/constants/constants.js';
-import { AppRoute, DataStatus } from '~/bundles/common/enums/enums.js';
-import {
-    useAppForm,
-    useAppSelector,
-    useMemo,
-} from '~/bundles/common/hooks/hooks.js';
+import { AppRoute } from '~/bundles/common/enums/enums.js';
+import { useAppForm, useMemo } from '~/bundles/common/hooks/hooks.js';
 import {
     type UserSignUpRequestDto,
     userSignUpValidationSchema,
 } from '~/bundles/users/users.js';
 
-import { FormError, FormHeader, PasswordInput } from '../common/components.js';
+import { FormHeader, PasswordInput } from '../common/components.js';
 import { DEFAULT_SIGN_UP_PAYLOAD } from './constants/constants.js';
 
 type Properties = {
     onSubmit: (payload: UserSignUpRequestDto) => void;
 };
 
 const SignUpForm: React.FC<Properties> = ({ onSubmit }) => {
-    const { dataStatus } = useAppSelector(({ auth }) => ({
-        dataStatus: auth.dataStatus,
-    }));
     const form = useAppForm<UserSignUpRequestDto>({
         initialValues: DEFAULT_SIGN_UP_PAYLOAD,
         validationSchema: userSignUpValidationSchema,
@@ -89,12 +80,6 @@ const SignUpForm: React.FC<Properties> = ({ onSubmit }) => {
                             hasError={Boolean(errors.confirmPassword)}
                             required
                         />
-                        <FormError
-                            isVisible={dataStatus === DataStatus.REJECTED}
-                            message={
-                                UserValidationMessage.USER_IS_NOT_AVAILABLE
-                            }
-                        />
                         <Button
                             type="submit"
                             label="Sign up"

frontend/src/bundles/common/components/player/constants/constants.ts

@@ -1,3 +1,4 @@
 export { ASPECT_RATIO_LANDSCAPE } from './aspect-ratio-landscape.constant.js';
 export { ASPECT_RATIO_PORTRAIT } from './aspect-ratio-portrait.constant.js';
+export { FPS } from './fps.constant.js';
 export { MIN_DURATION_IN_FRAMES } from './min-duration-in-frames.js';

frontend/src/bundles/common/components/player/constants/fps.constant.ts

@@ -0,0 +1,3 @@
+const FPS = 30;
+
+export { FPS };

frontend/src/bundles/common/components/player/player.tsx

@@ -9,6 +9,7 @@ import { VideoComponent } from '~/bundles/studio/components/components.js';
 import {
     ASPECT_RATIO_LANDSCAPE,
     ASPECT_RATIO_PORTRAIT,
+    FPS,
     MIN_DURATION_IN_FRAMES,
 } from './constants/constants.js';
 import { LandscapeStyle, PortraitStyle } from './styles/styles.js';
@@ -34,8 +35,8 @@ const Player: React.FC<Properties> = ({ playerRef }) => {
         };
     }, [scenes, scripts]);
 
-    const durationInFrames = scenes.reduce(
-        (sum, scene) => sum + scene.duration,
+    const durationInFrames = scripts.reduce(
+        (sum, script) => sum + Math.round(script.duration),
         0,
     );
 
@@ -59,7 +60,7 @@ const Player: React.FC<Properties> = ({ playerRef }) => {
                 component={VideoComponent}
                 inputProps={inputProperties}
                 durationInFrames={
-                    durationInFrames * 30 || MIN_DURATION_IN_FRAMES
+                    durationInFrames * FPS || MIN_DURATION_IN_FRAMES
                 }
                 compositionWidth={size.width}
                 compositionHeight={size.height}

frontend/src/bundles/common/components/video-modal/components/video-modal-content/components/video-preview/video-preview.tsx

@@ -22,7 +22,11 @@ import {
 } from './libs/enums/enums.js';
 import styles from './styles.module.css';
 
-const VideoPreview: React.FC = () => {
+type Properties = {
+    onClose: () => void;
+};
+
+const VideoPreview: React.FC<Properties> = ({ onClose }) => {
     const dispatch = useAppDispatch();
     const [view, setView] = useState<VideoPreviewT>(
         VideoPreviewValues.PORTRAIT,
@@ -38,7 +42,8 @@ const VideoPreview: React.FC = () => {
 
     const handleClick = useCallback((): void => {
         dispatch(studioActions.setVideoSize(view));
-    }, [dispatch, view]);
+        onClose();
+    }, [dispatch, onClose, view]);
 
     return (
         <Flex className={styles['preview-container']}>

frontend/src/bundles/common/components/video-modal/components/video-modal-content/video-modal-content.tsx

@@ -15,7 +15,11 @@ import {
     VideoPreview,
 } from './components/components.js';
 
-const VideoModalContent: React.FC = () => {
+type Properties = {
+    onClose: () => void;
+};
+
+const VideoModalContent: React.FC<Properties> = ({ onClose }) => {
     return (
         <Tabs orientation="vertical" variant="unstyled" height="full">
             <VStack gap={0}>
@@ -48,7 +52,7 @@ const VideoModalContent: React.FC = () => {
                     alignItems="center"
                     justifyContent="center"
                 >
-                    <VideoPreview />
+                    <VideoPreview onClose={onClose} />
                 </TabPanel>
                 <TabPanel p="0px 24px">
                     <GenerateScriptView />

frontend/src/bundles/common/components/video-modal/video-modal.tsx

@@ -15,7 +15,7 @@ const VideoModal: React.FC<Properties> = ({ isOpen, onClose }) => {
 
     return (
         <Modal isOpen={isOpen} onClose={handleCloseChat}>
-            <VideoModalContent />
+            <VideoModalContent onClose={handleCloseChat} />
         </Modal>
     );
 };

frontend/src/bundles/common/icons/helper/icon-conversion.helper.ts

@@ -8,6 +8,7 @@ import {
     faFont,
     faForwardStep,
     faHouse,
+    faImage,
     faPause,
     faPen,
     faPlay,
@@ -16,6 +17,7 @@ import {
     faStop,
     faT,
     faTableColumns,
+    faVideoCamera,
     faVolumeHigh,
     faVolumeOff,
 } from '@fortawesome/free-solid-svg-icons';
@@ -41,6 +43,8 @@ const CloudArrowDown = convertIcon(faCloudArrowDown);
 const VolumeHigh = convertIcon(faVolumeHigh);
 const VolumeOff = convertIcon(faVolumeOff);
 const Stop = convertIcon(faStop);
+const VideoCamera = convertIcon(faVideoCamera);
+const Image = convertIcon(faImage);
 
 export {
     BackwardStep,
@@ -52,6 +56,7 @@ export {
     Font,
     ForwardStep,
     House,
+    Image,
     Pause,
     Pen,
     Play,
@@ -60,6 +65,7 @@ export {
     Stop,
     T,
     TableColumns,
+    VideoCamera,
     VolumeHigh,
     VolumeOff,
 };

frontend/src/bundles/common/icons/icon-name.ts

@@ -23,6 +23,7 @@ import {
     Font,
     ForwardStep,
     House,
+    Image,
     Pause,
     Pen,
     Play,
@@ -31,6 +32,7 @@ import {
     Stop,
     T,
     TableColumns,
+    VideoCamera,
     VolumeHigh,
     VolumeOff,
 } from './helper/icon-conversion.helper.js';
@@ -69,6 +71,8 @@ const IconName = {
     LOGO_TEXT: LogoText,
     DELETE: DeleteIcon,
     WARNING: WarningIcon,
+    VIDEO_CAMERA: VideoCamera,
+    IMAGE: Image,
 } as const;
 
 export { IconName };

frontend/src/bundles/create-avatar/components/consent/consent.tsx

@@ -0,0 +1,38 @@
+import {
+    Box,
+    Button,
+    Flex,
+    Icon,
+    Text,
+} from '~/bundles/common/components/components.js';
+import { IconName } from '~/bundles/common/icons/icons.js';
+
+import styles from './styles.module.css';
+
+const Consent: React.FC = () => {
+    return (
+        <Flex className={styles['flex-container']}>
+            <Text variant={'title'} color={'background.600'} marginTop={'2vh'}>
+                Concent
+            </Text>
+            <Text variant={'body1'} color="typography.600" mb={3}>
+                To prevent misuse of technology, we just need to confirm the
+                person in the video is you.
+            </Text>
+            <Box
+                className={styles['recordSection']}
+                borderColor={'background.50'}
+            >
+                <Icon
+                    as={IconName.VIDEO_CAMERA}
+                    boxSize={100}
+                    color={'background.600'}
+                />
+                <Button label="Record a consent" width="220px" />
+            </Box>
+            <Button label="Generate Avatar" width="220px" />
+        </Flex>
+    );
+};
+
+export { Consent };

frontend/src/bundles/create-avatar/components/consent/styles.module.css

@@ -0,0 +1,32 @@
+.flex-container {
+    flex-direction: column;
+    background-color: white;
+    padding: 30px;
+    border-radius: 10px;
+    align-items: center;
+    padding-bottom: 80px;
+}
+
+.inner-flex {
+    color: var(--chakra-colors-typography-600);
+    font-size: 14px;
+    justify-content: center;
+    gap: 40px;
+}
+
+.recordSection {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    border-width: 2px;
+    border-radius: 11px;
+    padding: 8vh;
+    padding-left: 20vh;
+    padding-right: 20vh;
+    justify-content: center;
+    margin-bottom: 5vh;
+}
+
+.icon {
+    margin-bottom: 16px;
+}