From 9d8cd2de2eb56a4897af5956a7c29ed824d0ed51 Mon Sep 17 00:00:00 2001
From: vladislavkeblysh <vladislav.keblysh@raccoongang.com>
Date: Wed, 1 Nov 2023 17:54:39 +0200
Subject: [PATCH 1/4] feat: fixed delete button

---
 .../__snapshots__/index.test.jsx.snap         |  2 -
 .../components/VideoSourceWidget/hooks.jsx    |  9 ++++-
 .../components/VideoSourceWidget/index.jsx    | 39 ++++++++++---------
 3 files changed, 27 insertions(+), 23 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 b5129af5b..86e0d3e1e 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
@@ -82,7 +82,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"
@@ -235,7 +234,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 fc3100c38..71964c821 100644
--- a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/VideoSourceWidget/hooks.jsx
+++ b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/VideoSourceWidget/hooks.jsx
@@ -39,8 +39,13 @@ export const sourceHooks = ({ dispatch, previousVideoId, setAlert }) => ({
 
 export const fallbackHooks = ({ fallbackVideos, dispatch }) => ({
   addFallbackVideo: () => dispatch(actions.video.updateField({ fallbackVideos: [...fallbackVideos, ''] })),
-  deleteFallbackVideo: (videoUrl) => {
-    const updatedFallbackVideos = fallbackVideos.splice(fallbackVideos.indexOf(videoUrl), 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 bd6459d75..f1e96cb06 100644
--- a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/VideoSourceWidget/index.jsx
+++ b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/VideoSourceWidget/index.jsx
@@ -96,25 +96,26 @@ export const VideoSourceWidget = ({
         <div className="mt-3">
           <FormattedMessage {...messages.fallbackVideoMessage} />
         </div>
-        {fallbackVideos.formValue.length > 0 ? fallbackVideos.formValue.map((videoUrl, index) => (
-          <Form.Row className="mt-3.5 mx-0 flex-nowrap">
-            <Form.Control
-              floatingLabel={intl.formatMessage(messages.fallbackVideoLabel)}
-              onChange={fallbackVideos.onChange(index)}
-              value={fallbackVideos.local[index]}
-              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)}
-            />
-          </Form.Row>
-        )) : null}
+        {fallbackVideos.formValue.length > 0 ? fallbackVideos.formValue.map((videoUrl, index) => {
+          return (
+            <Form.Row className="mt-3.5 mx-0 flex-nowrap">
+              <Form.Control
+                floatingLabel={intl.formatMessage(messages.fallbackVideoLabel)}
+                onChange={fallbackVideos.onChange(index)}
+                value={fallbackVideos.local[index]}
+                onBlur={fallbackVideos.onBlur(index)}
+              />
+              <IconButtonWithTooltip
+                tooltipPlacement="top"
+                tooltipContent={intl.formatMessage(messages.deleteFallbackVideo)}
+                src={DeleteOutline}
+                iconAs={Icon}
+                alt={intl.formatMessage(messages.deleteFallbackVideo)}
+                onClick={() => deleteFallbackVideo(index)}
+              />
+            </Form.Row>
+          );
+        }) : null}
         <ActionRow className="mt-4.5">
           <Form.Checkbox
             checked={allowDownload.local}

From 52ca46f2b36c1dfc9a440f08c5c310dad2ab13e7 Mon Sep 17 00:00:00 2001
From: vladislavkeblysh <vladislav.keblysh@raccoongang.com>
Date: Fri, 29 Dec 2023 17:22:46 +0200
Subject: [PATCH 2/4] feat: fixed tests

---
 .../components/VideoSourceWidget/index.test.jsx                  | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/VideoSourceWidget/index.test.jsx b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/VideoSourceWidget/index.test.jsx
index 655fd34b6..fd4657162 100644
--- a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/VideoSourceWidget/index.test.jsx
+++ b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/VideoSourceWidget/index.test.jsx
@@ -102,7 +102,6 @@ describe('VideoSourceWidget', () => {
       const { onBlur } = el
         // eslint-disable-next-line
         .children().at(1).children().at(0).children().at(2).props();
-      onBlur('onBlur event');
       expect(hook.updateVideoURL).toHaveBeenCalledWith('onBlur event', '');
     });
   });

From 1942b1c52c7ea2a6e83de947bf776680e938a648 Mon Sep 17 00:00:00 2001
From: vladislavkeblysh <vladislav.keblysh@raccoongang.com>
Date: Fri, 29 Dec 2023 17:22:57 +0200
Subject: [PATCH 3/4] feat: fixed tests

---
 .../components/VideoSourceWidget/index.test.jsx                  | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/VideoSourceWidget/index.test.jsx b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/VideoSourceWidget/index.test.jsx
index fd4657162..655fd34b6 100644
--- a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/VideoSourceWidget/index.test.jsx
+++ b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/VideoSourceWidget/index.test.jsx
@@ -102,6 +102,7 @@ describe('VideoSourceWidget', () => {
       const { onBlur } = el
         // eslint-disable-next-line
         .children().at(1).children().at(0).children().at(2).props();
+      onBlur('onBlur event');
       expect(hook.updateVideoURL).toHaveBeenCalledWith('onBlur event', '');
     });
   });

From c99bfe16afefde155f2d7eaa3c75cd1dafab77cd Mon Sep 17 00:00:00 2001
From: vladislavkeblysh <vladislav.keblysh@raccoongang.com>
Date: Tue, 23 Apr 2024 12:08:49 +0300
Subject: [PATCH 4/4] feat: fixed delete button

---
 .../components/VideoSourceWidget/index.jsx    | 38 +++++++++----------
 1 file changed, 18 insertions(+), 20 deletions(-)

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 f1e96cb06..6da54bde4 100644
--- a/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/VideoSourceWidget/index.jsx
+++ b/src/editors/containers/VideoEditor/components/VideoSettingsModal/components/VideoSourceWidget/index.jsx
@@ -96,26 +96,24 @@ export const VideoSourceWidget = ({
         <div className="mt-3">
           <FormattedMessage {...messages.fallbackVideoMessage} />
         </div>
-        {fallbackVideos.formValue.length > 0 ? fallbackVideos.formValue.map((videoUrl, index) => {
-          return (
-            <Form.Row className="mt-3.5 mx-0 flex-nowrap">
-              <Form.Control
-                floatingLabel={intl.formatMessage(messages.fallbackVideoLabel)}
-                onChange={fallbackVideos.onChange(index)}
-                value={fallbackVideos.local[index]}
-                onBlur={fallbackVideos.onBlur(index)}
-              />
-              <IconButtonWithTooltip
-                tooltipPlacement="top"
-                tooltipContent={intl.formatMessage(messages.deleteFallbackVideo)}
-                src={DeleteOutline}
-                iconAs={Icon}
-                alt={intl.formatMessage(messages.deleteFallbackVideo)}
-                onClick={() => deleteFallbackVideo(index)}
-              />
-            </Form.Row>
-          );
-        }) : null}
+        {fallbackVideos.formValue.length > 0 ? fallbackVideos.formValue.map((videoUrl, index) => (
+          <Form.Row className="mt-3.5 mx-0 flex-nowrap">
+            <Form.Control
+              floatingLabel={intl.formatMessage(messages.fallbackVideoLabel)}
+              onChange={fallbackVideos.onChange(index)}
+              value={fallbackVideos.local[index]}
+              onBlur={fallbackVideos.onBlur(index)}
+            />
+            <IconButtonWithTooltip
+              tooltipPlacement="top"
+              tooltipContent={intl.formatMessage(messages.deleteFallbackVideo)}
+              src={DeleteOutline}
+              iconAs={Icon}
+              alt={intl.formatMessage(messages.deleteFallbackVideo)}
+              onClick={() => deleteFallbackVideo(index)}
+            />
+          </Form.Row>
+        )) : null}
         <ActionRow className="mt-4.5">
           <Form.Checkbox
             checked={allowDownload.local}