From 411d4f053c1a6765112d344bcb98e15d0f35eaf5 Mon Sep 17 00:00:00 2001
From: vladislavkeblysh <138868841+vladislavkeblysh@users.noreply.github.com>
Date: Wed, 15 Oct 2025 19:47:03 +0300
Subject: [PATCH] fix: fixed delete for additional video url fields in video
 editor (#2470)

---
 .../components/VideoSourceWidget/hooks.jsx             | 10 ++++------
 .../components/VideoSourceWidget/index.jsx             |  6 +++---
 .../components/VideoSourceWidget/index.test.tsx        |  2 +-
 3 files changed, 8 insertions(+), 10 deletions(-)

diff --git a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/VideoSourceWidget/hooks.jsx b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/VideoSourceWidget/hooks.jsx
index a527e3404..8401967e5 100644
--- a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/VideoSourceWidget/hooks.jsx
+++ b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/VideoSourceWidget/hooks.jsx
@@ -39,16 +39,14 @@ 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.toSpliced(videoIndex, 1);
+
     dispatch(actions.video.updateField({ fallbackVideos: updatedFallbackVideos }));
   },
 });
diff --git a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/VideoSourceWidget/index.jsx b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/VideoSourceWidget/index.jsx
index b1a85a940..dbf0c3a55 100644
--- a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/VideoSourceWidget/index.jsx
+++ b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/VideoSourceWidget/index.jsx
@@ -98,7 +98,8 @@ const VideoSourceWidget = () => {
         <FormattedMessage {...messages.fallbackVideoMessage} />
       </div>
       {fallbackVideos.formValue.length > 0 ? fallbackVideos.formValue.map((videoUrl, index) => (
-        <Form.Row className="mt-3.5 mx-0 flex-nowrap">
+        // eslint-disable-next-line react/no-array-index-key
+        <Form.Row className="mt-3.5 mx-0 flex-nowrap" key={`${index}-${videoUrl}`}>
           <Form.Group>
             <Form.Control
               floatingLabel={intl.formatMessage(messages.fallbackVideoLabel)}
@@ -107,13 +108,12 @@ 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)}
             />
           </Form.Group>
         </Form.Row>
diff --git a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/VideoSourceWidget/index.test.tsx b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/VideoSourceWidget/index.test.tsx
index e2913332c..de02953ef 100644
--- a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/VideoSourceWidget/index.test.tsx
+++ b/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', () => {