feat: fixed delete button

Author: vladislavkeblysh

src/editors/containers/VideoEditor/components/VideoSettingsModal/components/VideoSourceWidget/hooks.jsx

@@ -39,16 +39,13 @@ export const sourceHooks = ({ dispatch, previousVideoId, setAlert }) => ({
 
 export const fallbackHooks = ({ fallbackVideos, dispatch }) => ({
   addFallbackVideo: () => dispatch(actions.video.updateField({ fallbackVideos: [...fallbackVideos, ''] })),
-  /**
-   * Deletes the first occurrence of the given videoUrl from the fallbackVideos list
-   * @param {string} videoUrl - the video URL to delete
-   */
-  deleteFallbackVideo: (videoUrl) => {
-    const index = fallbackVideos.findIndex(video => video === videoUrl);
-    const updatedFallbackVideos = [
-      ...fallbackVideos.slice(0, index),
-      ...fallbackVideos.slice(index + 1),
-    ];
+
+  deleteFallbackVideo: (videoIndex) => {
+    const updatedFallbackVideos = fallbackVideos.reduce((result, currentItem, index) => {
+      if (index === videoIndex) { return result; }
+      return [...result, currentItem];
+    }, []);
+
     dispatch(actions.video.updateField({ fallbackVideos: updatedFallbackVideos }));
   },
 });

src/editors/containers/VideoEditor/components/VideoSettingsModal/components/VideoSourceWidget/index.jsx

@@ -107,13 +107,13 @@ const VideoSourceWidget = () => {
               onBlur={fallbackVideos.onBlur(index)}
             />
             <IconButtonWithTooltip
-              key={`top-delete-${videoUrl}`}
               tooltipPlacement="top"
               tooltipContent={intl.formatMessage(messages.deleteFallbackVideo)}
               src={DeleteOutline}
               iconAs={Icon}
               alt={intl.formatMessage(messages.deleteFallbackVideo)}
-              onClick={() => deleteFallbackVideo(videoUrl)}
+              onClick={() => deleteFallbackVideo(index)}
+              data-testid="delete-fallback-video"
             />
           </Form.Group>
         </Form.Row>

src/editors/containers/VideoEditor/components/VideoSettingsModal/components/VideoSourceWidget/index.test.tsx

@@ -150,7 +150,7 @@ describe('VideoSourceWidget', () => {
     expect(screen.getAllByText('Video URL').length).toBe(3); // 1 main + 2 fallback
     const deleteButtons = screen.getAllByRole('button', { name: /delete/i });
     fireEvent.click(deleteButtons[0]);
-    expect(deleteFallbackVideo).toHaveBeenCalledWith('url1');
+    expect(deleteFallbackVideo).toHaveBeenCalledWith(0);
   });
 
   it('calls addFallbackVideo when add button is clicked', () => {