Merge pull request #357 from BinaryStudioAcademy/task/OV-352-add-logic-for-edit-video-button

OV-352: Add logic for edit video button

Author: nikita-remeslov

backend/src/bundles/videos/video.entity.ts

@@ -1,17 +1,14 @@
+import { type Composition } from 'shared';
+
 import { type Entity } from '~/common/types/types.js';
 
 class VideoEntity implements Entity {
     private 'id': string | null;
-
     private 'userId': string;
-
     private 'name': string;
-
     private 'url': string | null;
-
     public 'previewUrl': string;
-
-    public 'composition': string;
+    public 'composition': Composition;
 
     public 'createdAt': string;
 
@@ -28,7 +25,7 @@ class VideoEntity implements Entity {
         userId: string;
         name: string;
         previewUrl: string;
-        composition: string;
+        composition: Composition;
         url: string | null;
         createdAt: string;
     }) {
@@ -45,24 +42,24 @@ class VideoEntity implements Entity {
         id,
         userId,
         name,
-        url,
-        composition,
         previewUrl,
+        composition,
+        url,
         createdAt,
     }: {
-        id: string;
+        id: string | null;
         userId: string;
         name: string;
         previewUrl: string;
-        composition: string;
+        composition: Composition;
         url: string | null;
         createdAt: string;
     }): VideoEntity {
         return new VideoEntity({
             id,
             userId,
             name,
-            composition,
+            composition: composition,
             previewUrl,
             url,
             createdAt,
@@ -72,16 +69,15 @@ class VideoEntity implements Entity {
     public static initializeNew({
         userId,
         name,
-        composition,
         previewUrl,
+        composition,
         url,
         createdAt = new Date().toISOString(),
     }: {
         userId: string;
         name: string;
         previewUrl: string;
-        composition: string;
-
+        composition: Composition;
         url?: string;
         createdAt?: string;
     }): VideoEntity {
@@ -102,7 +98,7 @@ class VideoEntity implements Entity {
         name: string;
         url: string | null;
         previewUrl: string;
-        composition: string;
+        composition: Composition;
         createdAt: string;
     } {
         return {
@@ -120,7 +116,7 @@ class VideoEntity implements Entity {
         userId: string;
         name: string;
         previewUrl: string;
-        composition: string;
+        composition: Composition;
         url: string | null;
         createdAt: string;
     } {

backend/src/bundles/videos/video.model.ts

@@ -1,3 +1,5 @@
+import { type Composition } from 'shared';
+
 import {
     AbstractModel,
     DatabaseTableName,
@@ -10,7 +12,7 @@ class VideoModel extends AbstractModel {
 
     public 'previewUrl': string;
 
-    public 'composition': string;
+    public 'composition': Composition;
 
     public 'url': string | null;
 

backend/src/bundles/videos/video.repository.ts

@@ -34,6 +34,7 @@ class VideoRepository implements Repository {
     public async create(entity: VideoEntity): Promise<VideoEntity> {
         const { userId, name, url, composition, previewUrl } =
             entity.toNewObject();
+
         const item = await this.videoModel
             .query()
             .insert({
@@ -56,7 +57,7 @@ class VideoRepository implements Repository {
         const data: Partial<VideoModel> = {};
 
         if (payload.composition) {
-            data.composition = JSON.stringify(payload.composition);
+            data.composition = payload.composition;
             data.previewUrl = payload.composition.scenes[0]?.avatar?.url ?? '';
         }
 
@@ -67,6 +68,7 @@ class VideoRepository implements Repository {
         if (payload.url) {
             data.url = payload.url;
         }
+
         const updatedItem = await this.videoModel
             .query()
             .patchAndFetchById(id, data)

backend/src/bundles/videos/video.service.ts

@@ -59,8 +59,8 @@ class VideoService implements Service {
         const video = await this.videoRepository.create(
             VideoEntity.initializeNew({
                 name: payload.name,
-                composition: JSON.stringify(payload.composition),
-                previewUrl: payload.composition?.scenes[0]?.avatar?.url || '',
+                composition: payload.composition,
+                previewUrl: payload.composition?.scenes[0]?.avatar?.url ?? '',
                 userId: payload.userId,
             }),
         );

frontend/src/bundles/home/components/video-card/video-card.tsx

@@ -15,10 +15,12 @@ import {
     MenuList,
     Text,
 } from '~/bundles/common/components/components.js';
+import { AppRoute } from '~/bundles/common/enums/enums.js';
 import {
     useAppDispatch,
     useCallback,
     useEffect,
+    useNavigate,
     useState,
 } from '~/bundles/common/hooks/hooks.js';
 import { IconName, IconSize } from '~/bundles/common/icons/icons.js';
@@ -44,6 +46,7 @@ const VideoCard: React.FC<Properties> = ({
     previewUrl,
 }) => {
     const dispatch = useAppDispatch();
+    const navigate = useNavigate();
 
     const [isVideoModalOpen, setIsVideoModalOpen] = useState(false);
     const [isWarningModalOpen, setIsWarningModalOpen] = useState(false);
@@ -61,9 +64,15 @@ const VideoCard: React.FC<Properties> = ({
 
     const handleIconClick = useCallback(() => {
         if (url) {
-            setIsVideoModalOpen(true);
+            return setIsVideoModalOpen(true);
         }
-    }, [url]);
+
+        navigate(AppRoute.STUDIO, {
+            state: {
+                id,
+            },
+        });
+    }, [url, navigate, id]);
 
     const date = new Date(createdAt);
     const formattedDate = format(date, 'MMM d, yyyy, h:mm a');

frontend/src/bundles/studio/pages/studio.tsx

@@ -1,5 +1,4 @@
 import { type PlayerRef } from '@remotion/player';
-import { useNavigate } from 'react-router-dom';
 
 import {
     Box,
@@ -21,6 +20,8 @@ import {
     useAppSelector,
     useCallback,
     useEffect,
+    useLocation,
+    useNavigate,
     useRef,
 } from '~/bundles/common/hooks/hooks.js';
 import { IconName } from '~/bundles/common/icons/icons.js';
@@ -42,16 +43,29 @@ import {
 } from '../constants/constants.js';
 import { NotificationMessage, NotificationTitle } from '../enums/enums.js';
 import { getVoicesConfigs } from '../helpers/helpers.js';
+import { selectVideoDataById } from '../store/selectors.js';
 import { actions as studioActions } from '../store/studio.js';
 
 const Studio: React.FC = () => {
+    const { state: locationState } = useLocation();
+
+    const videoData = useAppSelector((state) =>
+        selectVideoDataById(state, locationState?.id),
+    );
+
     const { scenes, scripts, videoName, videoId, scriptPlayer } =
         useAppSelector(({ studio }) => studio);
 
     const playerReference = useRef<PlayerRef>(null);
     const dispatch = useAppDispatch();
     const navigate = useNavigate();
 
+    useEffect((): void => {
+        if (videoData) {
+            void dispatch(studioActions.loadVideoData(videoData));
+        }
+    }, [dispatch, videoData]);
+
     const handleResize = useCallback(() => {
         dispatch(studioActions.changeVideoSize());
     }, [dispatch]);
@@ -98,7 +112,9 @@ const Studio: React.FC = () => {
     }, [dispatch, navigate, scenes, scripts, videoId, videoName]);
 
     useEffect(() => {
-        return () => void dispatch(studioActions.resetStudio());
+        return () => {
+            dispatch(studioActions.resetStudio());
+        };
     }, [dispatch]);
 
     const handleSaveDraft = useCallback((): void => {

frontend/src/bundles/studio/store/selectors.ts

@@ -3,10 +3,16 @@ import { secondsToMilliseconds } from 'date-fns';
 
 import { type RootState } from '~/bundles/common/types/types.js';
 
-import { type Script } from '../types/types.js';
+import {
+    type Script,
+    type VideoGetAllItemResponseDto,
+} from '../types/types.js';
 
 const selectScrips = (state: RootState): Script[] => state.studio.scripts;
 
+const selectVideos = (state: RootState): VideoGetAllItemResponseDto[] =>
+    state.home.videos;
+
 const selectTotalDuration = createSelector([selectScrips], (scripts) => {
     const totalDuration = scripts.reduce(
         (total, script) => total + script.duration,
@@ -16,4 +22,11 @@ const selectTotalDuration = createSelector([selectScrips], (scripts) => {
     return secondsToMilliseconds(totalDuration);
 });
 
-export { selectTotalDuration };
+const selectVideoDataById = createSelector(
+    [selectVideos, (_, id: string): string => id],
+    (videos, id) => {
+        return videos.find((video) => video.id === id);
+    },
+);
+
+export { selectTotalDuration, selectVideoDataById };

frontend/src/bundles/studio/store/slice.ts

@@ -25,11 +25,13 @@ import {
 import { type Script } from '../types/script.type.js';
 import {
     type AvatarGetResponseDto,
+    type CompositionScript,
     type DestinationPointer,
     type RowType,
     type Scene,
     type SceneAvatar,
     type TimelineItemWithSpan,
+    type VideoGetAllItemResponseDto,
     type Voice,
 } from '../types/types.js';
 import {
@@ -100,7 +102,7 @@ const initialState: State = {
     selectedScriptId: null,
     videoSize: VideoPreview.LANDSCAPE,
     videoName: 'Untitled Video',
-    isDraftSaved: false,
+    isDraftSaved: true,
     videoId: null,
     voices: [],
     ui: {
@@ -332,6 +334,30 @@ const { reducer, actions, name } = createSlice({
                 avatars: state.avatars,
             };
         },
+        loadVideoData(
+            state,
+            action: PayloadAction<VideoGetAllItemResponseDto>,
+        ) {
+            const { id, name, composition } = action.payload;
+
+            state.videoName = name;
+            state.videoId = id;
+            state.scenes = composition.scenes;
+            state.scripts = composition.scripts.map(
+                (script: CompositionScript) => {
+                    const voice = state.voices.find(
+                        (voice) => voice.name === script.voiceName,
+                    );
+
+                    return {
+                        ...script,
+                        iconName: PlayIconNames.READY,
+                        voice: voice ?? DEFAULT_VOICE,
+                        url: null,
+                    };
+                },
+            );
+        },
     },
     extraReducers(builder) {
         builder.addCase(loadAvatars.pending, (state) => {

frontend/src/bundles/studio/types/types.ts

@@ -11,6 +11,8 @@ export {
     type TimelineItemWithSpan,
 } from './timeline-item.type.js';
 export {
+    type Composition,
+    type Script as CompositionScript,
     type CreateVideoRequestDto,
     type GenerateSpeechRequestDto,
     type GenerateSpeechResponseDto,

shared/src/bundles/videos/types/video-get-all-item-response-dto.type.ts

@@ -1,10 +1,12 @@
+import { type Composition } from '../../avatar-videos/types/types.js';
+
 type VideoGetAllItemResponseDto = {
     id: string;
     userId: string;
     name: string;
     url: string | null;
     previewUrl: string;
-    composition: string;
+    composition: Composition;
     createdAt: string;
 };