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..8401967e57 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 b1a85a9408..dbf0c3a550 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 = () => { {fallbackVideos.formValue.length > 0 ? fallbackVideos.formValue.map((videoUrl, index) => ( - + // eslint-disable-next-line react/no-array-index-key + { onBlur={fallbackVideos.onBlur(index)} /> deleteFallbackVideo(videoUrl)} + onClick={() => deleteFallbackVideo(index)} /> 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 e2913332ce..de02953efe 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', () => {