fix: fixed delete for additional video url fields in video editor (#2470)

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 }));
   },
 });

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>

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', () => {