From fea78afa85e3a258a85b8e2b652e21ebc973f10e Mon Sep 17 00:00:00 2001
From: vladislavkeblysh <138868841+vladislavkeblysh@users.noreply.github.com>
Date: Thu, 11 Dec 2025 01:13:27 +0200
Subject: [PATCH] fix: Fixed delete for additional video url fields (backport)
 (#2471)

Backport of 2470
---
 .../VideoSourceWidget/__snapshots__/index.test.jsx.snap  | 4 ++--
 .../components/VideoSourceWidget/hooks.jsx               | 9 +++++----
 .../components/VideoSourceWidget/index.jsx               | 5 ++---
 3 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/VideoSourceWidget/__snapshots__/index.test.jsx.snap b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/VideoSourceWidget/__snapshots__/index.test.jsx.snap
index c4fe62487..09319a07d 100644
--- a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/VideoSourceWidget/__snapshots__/index.test.jsx.snap
+++ b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/VideoSourceWidget/__snapshots__/index.test.jsx.snap
@@ -78,6 +78,7 @@ exports[`VideoSourceWidget snapshots snapshots: renders as expected with default
   </div>
   <Form.Row
     className="mt-3.5 mx-0 flex-nowrap"
+    key="somEUrL"
   >
     <Form.Group>
       <Form.Control
@@ -86,7 +87,6 @@ exports[`VideoSourceWidget snapshots snapshots: renders as expected with default
       <IconButtonWithTooltip
         alt="Delete"
         iconAs="Icon"
-        key="top-delete-somEUrL"
         onClick={[Function]}
         tooltipContent="Delete"
         tooltipPlacement="top"
@@ -237,6 +237,7 @@ exports[`VideoSourceWidget snapshots snapshots: renders as expected with videoSh
   </div>
   <Form.Row
     className="mt-3.5 mx-0 flex-nowrap"
+    key="somEUrL"
   >
     <Form.Group>
       <Form.Control
@@ -245,7 +246,6 @@ exports[`VideoSourceWidget snapshots snapshots: renders as expected with videoSh
       <IconButtonWithTooltip
         alt="Delete"
         iconAs="Icon"
-        key="top-delete-somEUrL"
         onClick={[Function]}
         tooltipContent="Delete"
         tooltipPlacement="top"
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..51da6ffd4 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,17 @@ 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);
+  deleteFallbackVideo: (videoIndex) => {
     const updatedFallbackVideos = [
-      ...fallbackVideos.slice(0, index),
-      ...fallbackVideos.slice(index + 1),
+      ...fallbackVideos.slice(0, videoIndex),
+      ...fallbackVideos.slice(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 bac6c347c..dd4a3899a 100644
--- a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/VideoSourceWidget/index.jsx
+++ b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/VideoSourceWidget/index.jsx
@@ -101,7 +101,7 @@ 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">
+        <Form.Row className="mt-3.5 mx-0 flex-nowrap" key={videoUrl}>
           <Form.Group>
             <Form.Control
               floatingLabel={intl.formatMessage(messages.fallbackVideoLabel)}
@@ -110,13 +110,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>