From f5350aeaa06d8f5d4c97dbf4398203987138c201 Mon Sep 17 00:00:00 2001
From: vladislavkeblysh <vladislav.keblysh@raccoongang.com>
Date: Mon, 22 Sep 2025 08:56:36 +0300
Subject: [PATCH 1/4] feat: fixed delete button

---
 .../__snapshots__/index.test.jsx.snap           |  2 --
 .../components/VideoSourceWidget/hooks.jsx      | 17 +++++++----------
 .../components/VideoSourceWidget/index.jsx      |  3 +--
 3 files changed, 8 insertions(+), 14 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 c4fe624870..a29d36e4c6 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
@@ -86,7 +86,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"
@@ -245,7 +244,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 a527e3404d..71964c8218 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,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 }));
   },
 });
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 bac6c347cb..752152b220 100644
--- a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/VideoSourceWidget/index.jsx
+++ b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/VideoSourceWidget/index.jsx
@@ -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>

From 441f0020da918477a6a4d0d21a0965e65bcb7d1a Mon Sep 17 00:00:00 2001
From: vladislavkeblysh <vladislav.keblysh@raccoongang.com>
Date: Wed, 24 Sep 2025 10:12:22 +0300
Subject: [PATCH 2/4] feat: refactor after review

---
 .../components/VideoSourceWidget/hooks.jsx               | 9 +++++----
 .../components/VideoSourceWidget/index.jsx               | 2 +-
 2 files changed, 6 insertions(+), 5 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 71964c8218..8401967e57 100644
--- a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/VideoSourceWidget/hooks.jsx
+++ b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/VideoSourceWidget/hooks.jsx
@@ -40,11 +40,12 @@ 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: (videoIndex) => {
-    const updatedFallbackVideos = fallbackVideos.reduce((result, currentItem, index) => {
-      if (index === videoIndex) { return result; }
-      return [...result, currentItem];
-    }, []);
+    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 752152b220..dd4a3899ab 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)}

From b0e9f6d8b4129b88ec93e6c38408ae237c1abd07 Mon Sep 17 00:00:00 2001
From: vladislavkeblysh <vladislav.keblysh@raccoongang.com>
Date: Wed, 24 Sep 2025 12:40:30 +0300
Subject: [PATCH 3/4] feat: fix snapshot

---
 .../VideoSourceWidget/__snapshots__/index.test.jsx.snap         | 2 ++
 1 file changed, 2 insertions(+)

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 a29d36e4c6..09319a07d5 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
@@ -236,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

From cb53a96b0c0cc6099c3d071d21c9a80c27d206f5 Mon Sep 17 00:00:00 2001
From: vladislavkeblysh <vladislav.keblysh@raccoongang.com>
Date: Wed, 15 Oct 2025 09:27:04 +0300
Subject: [PATCH 4/4] feat: refactor after review

---
 .../components/VideoSourceWidget/hooks.jsx                   | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

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 8401967e57..51da6ffd49 100644
--- a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/VideoSourceWidget/hooks.jsx
+++ b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/VideoSourceWidget/hooks.jsx
@@ -45,7 +45,10 @@ export const fallbackHooks = ({ fallbackVideos, dispatch }) => ({
    * @param {string} videoUrl - the video URL to delete
    */
   deleteFallbackVideo: (videoIndex) => {
-    const updatedFallbackVideos = fallbackVideos.toSpliced(videoIndex, 1);
+    const updatedFallbackVideos = [
+      ...fallbackVideos.slice(0, videoIndex),
+      ...fallbackVideos.slice(videoIndex + 1),
+    ];
 
     dispatch(actions.video.updateField({ fallbackVideos: updatedFallbackVideos }));
   },