OV-421: Add templates menu

backend/src/bundles/templates/enums/enums.ts

@@ -1,2 +1,2 @@
 export { templateErrorMessage } from './template-error-message.enum.js';
-export { templateApiPath } from './templates-api-path.enum.js';
+export { TemplateApiPath } from 'shared';

backend/src/bundles/templates/templates.controller.ts

@@ -7,7 +7,7 @@ import { ApiPath } from '~/common/enums/enums.js';
 import { HTTPCode, HTTPMethod } from '~/common/http/http.js';
 import { type Logger } from '~/common/logger/logger.js';
 
-import { templateApiPath } from './enums/enums.js';
+import { TemplateApiPath } from './enums/enums.js';
 import { type TemplateService } from './templates.service.js';
 import {
     type CreateTemplateRequestDto,
@@ -111,7 +111,7 @@ class TemplateController extends BaseController {
         this.templateService = templateService;
 
         this.addRoute({
-            path: templateApiPath.USER,
+            path: TemplateApiPath.USER,
             method: HTTPMethod.GET,
             handler: (options) =>
                 this.findAllByUser(
@@ -122,15 +122,15 @@ class TemplateController extends BaseController {
         });
 
         this.addRoute({
-            path: templateApiPath.PUBLIC,
+            path: TemplateApiPath.PUBLIC,
             method: HTTPMethod.GET,
             handler: () => {
                 return this.findPublicTemplates();
             },
         });
 
         this.addRoute({
-            path: templateApiPath.ID,
+            path: TemplateApiPath.ID,
             method: HTTPMethod.GET,
             handler: (options) => {
                 return this.findById(
@@ -142,7 +142,7 @@ class TemplateController extends BaseController {
         });
 
         this.addRoute({
-            path: templateApiPath.ROOT,
+            path: TemplateApiPath.ROOT,
             method: HTTPMethod.POST,
             validation: {
                 body: createTemplateValidationSchema,
@@ -156,7 +156,7 @@ class TemplateController extends BaseController {
         });
 
         this.addRoute({
-            path: templateApiPath.ID,
+            path: TemplateApiPath.ID,
             method: HTTPMethod.PATCH,
             validation: {
                 body: updateTemplateValidationSchema,
@@ -172,7 +172,7 @@ class TemplateController extends BaseController {
         });
 
         this.addRoute({
-            path: templateApiPath.ID,
+            path: TemplateApiPath.ID,
             method: HTTPMethod.DELETE,
             handler: (options) =>
                 this.delete(

frontend/src/bundles/common/middlewares/draft.middleware.ts

@@ -14,6 +14,8 @@ const CHANGE_DRAFT_ACTIONS = new Set<string>([
     studioActions.resizeScene.type,
     studioActions.setVideoName.type,
     studioActions.setVideoSize.type,
+    studioActions.addBackgroundToScene.type,
+    studioActions.loadTemplate.type,
 ]);
 
 const isChangeDraftAction = (action: Action): boolean => {

frontend/src/bundles/studio/components/video-menu/components/menu-content/backgrounds-content/backgrounds-content.tsx

@@ -14,7 +14,7 @@ import backgroundColors from '~/bundles/studio/data/bg-colors.json';
 import backgroundImages from '~/bundles/studio/data/bg-images.json';
 import { actions as studioActions } from '~/bundles/studio/store/studio.js';
 
-import { ColorCard, ImageCard } from './components/components.js';
+import { BackgroundImageCard, ColorCard } from './components/components.js';
 import styles from './styles.module.css';
 
 const BackgroundsContent: React.FC = () => {
@@ -43,7 +43,7 @@ const BackgroundsContent: React.FC = () => {
                             </Flex>
 
                             {backgroundImages.map((imageSource, index) => (
-                                <ImageCard
+                                <BackgroundImageCard
                                     key={index}
                                     imageSource={imageSource}
                                 />

frontend/src/bundles/studio/components/video-menu/components/menu-content/backgrounds-content/components/components.ts

@@ -1,2 +1,2 @@
 export { ColorCard } from './color-card.js';
-export { ImageCard } from './image-card.js';
+export { BackgroundImageCard } from './image-card.js';

frontend/src/bundles/studio/components/video-menu/components/menu-content/backgrounds-content/components/image-card.tsx

@@ -1,14 +1,12 @@
-import { Box, Image } from '~/bundles/common/components/components.js';
 import { useAppDispatch, useCallback } from '~/bundles/common/hooks/hooks.js';
+import { ImageCard } from '~/bundles/studio/components/video-menu/components/menu-content/components/components.js';
 import { actions as studioActions } from '~/bundles/studio/store/studio.js';
 
-import styles from './styles.module.css';
-
 type Properties = {
     imageSource: string;
 };
 
-const ImageCard: React.FC<Properties> = ({ imageSource }) => {
+const BackgroundImageCard: React.FC<Properties> = ({ imageSource }) => {
     const dispatch = useAppDispatch();
 
     const handleImageClick = useCallback((): void => {
@@ -20,16 +18,7 @@ const ImageCard: React.FC<Properties> = ({ imageSource }) => {
         );
     }, [dispatch, imageSource]);
 
-    return (
-        <Box className={styles['image-item']} onClick={handleImageClick}>
-            <Image
-                src={imageSource}
-                objectFit="contain"
-                width="100%"
-                height="100%"
-            ></Image>
-        </Box>
-    );
+    return <ImageCard imageSource={imageSource} onClick={handleImageClick} />;
 };
 
-export { ImageCard };
+export { BackgroundImageCard };

frontend/src/bundles/studio/components/video-menu/components/menu-content/backgrounds-content/components/styles.module.css

@@ -1,12 +1,3 @@
-.image-item {
-    height: 100px;
-    background-color: var(--chakra-colors-background-700);
-    border-radius: 7px;
-    border-width: 1px;
-    border-color: transparent;
-    transition: all 0.3s ease;
-}
-
 .color-item {
     border-radius: 7px;
     height: 80px;
@@ -15,12 +6,6 @@
     transition: all 0.3s ease;
 }
 
-.image-item:hover {
-    background-color: var(--chakra-colors-background-600);
-    border-color: var(--chakra-colors-brand-secondary-300);
-    cursor: pointer;
-}
-
 .color-item:hover {
     border-color: var(--chakra-colors-brand-secondary-300);
     cursor: pointer;

frontend/src/bundles/studio/components/video-menu/components/menu-content/components/components.ts

@@ -0,0 +1 @@
+export { ImageCard } from './image-card/image-card.js';

frontend/src/bundles/studio/components/video-menu/components/menu-content/components/image-card/image-card.tsx

@@ -0,0 +1,23 @@
+import { Box, Image } from '~/bundles/common/components/components.js';
+
+import styles from './styles.module.css';
+
+type Properties = {
+    imageSource: string;
+    onClick?: () => void;
+};
+
+const ImageCard: React.FC<Properties> = ({ imageSource, onClick }) => {
+    return (
+        <Box className={styles['image-item']} onClick={onClick}>
+            <Image
+                src={imageSource}
+                objectFit="contain"
+                width="100%"
+                height="100%"
+            ></Image>
+        </Box>
+    );
+};
+
+export { ImageCard };

frontend/src/bundles/studio/components/video-menu/components/menu-content/components/image-card/styles.module.css

@@ -0,0 +1,14 @@
+.image-item {
+    height: 100px;
+    background-color: var(--chakra-colors-background-700);
+    border-radius: 7px;
+    border-width: 1px;
+    border-color: transparent;
+    transition: all 0.3s ease;
+}
+
+.image-item:hover {
+    background-color: var(--chakra-colors-background-600);
+    border-color: var(--chakra-colors-brand-secondary-300);
+    cursor: pointer;
+}

frontend/src/bundles/studio/components/video-menu/components/menu-content/content.ts

@@ -1,3 +1,4 @@
 export { AvatarsContent } from './avatars-content/avatars-content.js';
 export { BackgroundsContent } from './backgrounds-content/backgrounds-content.js';
 export { ScriptContent } from './script-content/script-content.js';
+export { TemplatesContent } from './templates-content/templates-content.js';

frontend/src/bundles/studio/components/video-menu/components/menu-content/templates-content/components/components.ts

@@ -0,0 +1 @@
+export { TemplateCard } from './template-card.js';

frontend/src/bundles/studio/components/video-menu/components/menu-content/templates-content/components/template-card.tsx

@@ -0,0 +1,22 @@
+import { useAppDispatch, useCallback } from '~/bundles/common/hooks/hooks.js';
+import { ImageCard } from '~/bundles/studio/components/video-menu/components/menu-content/components/components.js';
+import { actions as studioActions } from '~/bundles/studio/store/studio.js';
+import { type Template } from '~/bundles/studio/types/types.js';
+
+type Properties = {
+    template: Template;
+};
+
+const TemplateCard: React.FC<Properties> = ({ template }) => {
+    const dispatch = useAppDispatch();
+
+    const handleClick = useCallback((): void => {
+        void dispatch(studioActions.loadTemplate(template));
+    }, [dispatch, template]);
+
+    return (
+        <ImageCard imageSource={template.previewUrl} onClick={handleClick} />
+    );
+};
+
+export { TemplateCard };

frontend/src/bundles/studio/components/video-menu/components/menu-content/templates-content/templates-content.tsx

@@ -0,0 +1,86 @@
+import {
+    Box,
+    Loader,
+    SimpleGrid,
+    Tab,
+    TabList,
+    TabPanel,
+    TabPanels,
+    Tabs,
+    Text,
+} from '~/bundles/common/components/components.js';
+import { EMPTY_VALUE } from '~/bundles/common/constants/constants.js';
+import { DataStatus } from '~/bundles/common/enums/data-status.enum.js';
+import {
+    useAppDispatch,
+    useAppSelector,
+    useEffect,
+} from '~/bundles/common/hooks/hooks.js';
+import { actions as studioActions } from '~/bundles/studio/store/studio.js';
+
+import { TemplateCard } from './components/components.js';
+
+const TemplatesContent: React.FC = () => {
+    const dispatch = useAppDispatch();
+
+    const { templates, dataStatus } = useAppSelector(({ studio }) => studio);
+
+    useEffect(() => {
+        if (templates.public.length === EMPTY_VALUE) {
+            void dispatch(studioActions.loadPublicTemplates());
+        }
+        if (!templates.isUserLoaded) {
+            void dispatch(studioActions.loadUserTemplates());
+        }
+    }, [dispatch, templates]);
+
+    return (
+        <Tabs>
+            <TabList>
+                <Tab>Templates</Tab>
+                <Tab>My templates</Tab>
+            </TabList>
+
+            {dataStatus === DataStatus.PENDING ? (
+                <Box mt="100px">
+                    <Loader />
+                </Box>
+            ) : (
+                <TabPanels>
+                    <TabPanel>
+                        <SimpleGrid columns={2} spacingX="13px" spacingY="10px">
+                            {templates.public.map((template) => (
+                                <TemplateCard
+                                    key={template.id}
+                                    template={template}
+                                />
+                            ))}
+                        </SimpleGrid>
+                    </TabPanel>
+                    <TabPanel>
+                        {templates.user.length > EMPTY_VALUE ? (
+                            <SimpleGrid
+                                columns={2}
+                                spacingX="13px"
+                                spacingY="10px"
+                            >
+                                {templates.user.map((template) => (
+                                    <TemplateCard
+                                        key={template.id}
+                                        template={template}
+                                    />
+                                ))}
+                            </SimpleGrid>
+                        ) : (
+                            <Text color="typography.600" variant="body1">
+                                You have no templates yet.
+                            </Text>
+                        )}
+                    </TabPanel>
+                </TabPanels>
+            )}
+        </Tabs>
+    );
+};
+
+export { TemplatesContent };

frontend/src/bundles/studio/components/video-menu/video-menu.tsx

@@ -19,6 +19,7 @@ import {
     AvatarsContent,
     BackgroundsContent,
     ScriptContent,
+    TemplatesContent,
 } from './components/menu-content/content.js';
 // import {
 //     AssetsContent,
@@ -66,11 +67,11 @@ const VideoMenu: React.FC = () => {
 
     // TODO: Uncomment menu items after demo
     const menuItems: Record<ValueOf<typeof MenuItems>, MenuItem> = {
-        // templates: {
-        //     label: 'Templates',
-        //     icon: <Icon as={IconName.TEMPLATE} />,
-        //     getContent: () => <TemplatesContent />,
-        // },
+        templates: {
+            label: 'Templates',
+            icon: <Icon as={IconName.TEMPLATE} />,
+            getContent: () => <TemplatesContent />,
+        },
         avatars: {
             label: 'Avatars',
             icon: <Icon as={IconName.AVATAR} />,

frontend/src/bundles/studio/constants/constants.ts

@@ -10,6 +10,8 @@ export { MIN_SCENE_DURATION } from './min-scene-duration.constant.js';
 export { NEW_SCRIPT_TEXT } from './new-script-text.constant.js';
 export { SCRIPT_AND_AVATAR_ARE_REQUIRED } from './script-and-avatar-are-required.constant.js';
 export { SKIP_TO_PREV_SCENE_THRESHOLD } from './skip-to-previous-scene-threshold.constant.js';
+export { TEMPLATE_SAVE_FAILED_NOTOFICATION_ID } from './template-save-failed-notification-id.js';
+export { TEMPLATE_SAVE_NOTOFICATION_ID } from './template-save-notification-id.js';
 export { VIDEO_SAVE_FAILED_NOTIFICATION_ID } from './video-save-failed-notification-id.js';
 export { VIDEO_SAVE_NOTIFICATION_ID } from './video-save-notification-id.js';
 export { VIDEO_SUBMIT_FAILED_NOTIFICATION_ID } from './video-submit-failed-id.constant.js';

frontend/src/bundles/studio/constants/template-save-failed-notification-id.ts

@@ -0,0 +1,3 @@
+const TEMPLATE_SAVE_FAILED_NOTOFICATION_ID = 'template-save-failed';
+
+export { TEMPLATE_SAVE_FAILED_NOTOFICATION_ID };

frontend/src/bundles/studio/constants/template-save-notification-id.ts

@@ -0,0 +1,3 @@
+const TEMPLATE_SAVE_NOTOFICATION_ID = 'template-save';
+
+export { TEMPLATE_SAVE_NOTOFICATION_ID };

frontend/src/bundles/studio/enums/enums.ts

@@ -3,4 +3,4 @@ export { NotificationMessage } from './notification-message.enum.js';
 export { NotificationTitle } from './notification-title.enum.js';
 export { PlayIconNames } from './play-icon-names.enum.js';
 export { RowNames } from './row-names.enum.js';
-export { AvatarsApiPath, SpeechApiPath } from 'shared';
+export { AvatarsApiPath, SpeechApiPath, TemplateApiPath } from 'shared';

frontend/src/bundles/studio/enums/menu-items.enum.ts

@@ -1,6 +1,6 @@
 // TODO: Uncomment menu items after demo
 const MenuItems = {
-    // TEMPLATES: 'templates',
+    TEMPLATES: 'templates',
     AVATARS: 'avatars',
     SCRIPT: 'script',
     // TEXT: 'text',

frontend/src/bundles/studio/enums/notification-message.enum.ts

@@ -5,6 +5,8 @@ const NotificationMessage = {
         'To create a video, you need to have an avatar and a script.',
     VIDEO_SAVE: 'Video saved successfully',
     VIDEO_SAVE_FAILED: 'Video save failed',
+    TEMPLATE_SAVE: 'Template saved successfully',
+    TEMPLATE_SAVE_FAILED: 'Template save failed',
 } as const;
 
 export { NotificationMessage };

frontend/src/bundles/studio/enums/notification-title.enum.ts

@@ -4,6 +4,8 @@ const NotificationTitle = {
     SCRIPT_AND_AVATAR_ARE_REQUIRED: 'Script and avatar are required',
     VIDEO_SAVED: 'Video saved',
     VIDEO_SAVE_FAILED: 'Video save failed',
+    TEMPLATE_SAVED: 'Template saved',
+    TEMPLATE_SAVE_FAILED: 'Template save failed',
 } as const;
 
 export { NotificationTitle };