Skip to content

Commit 327792c

Browse files
vladislavkeblyshvladislavkeblysh
committed
feat: fixed delete button
1 parent 7e81b52 commit 327792c

File tree

4 files changed

+461
-12
lines changed

4 files changed

+461
-12
lines changed

‎src/editors/containers/VideoEditor/components/VideoSettingsModal/components/VideoSourceWidget/__snapshots__/index.test.jsx.snap‎

Lines changed: 319 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,319 @@
1+
// Jest Snapshot v1, https://goo.gl/fbAQLP
2+
3+
exports[`VideoSourceWidget snapshots snapshots: renders as expected with default props 1`] = `
4+
<injectIntl(ShimmedIntlComponent)
5+
fontSize="x-small"
6+
title="Video source"
7+
>
8+
<ErrorAlert
9+
dismissError={[Function]}
10+
hideHeading={true}
11+
isError={false}
12+
>
13+
<FormattedMessage
14+
defaultMessage="The Video ID field has changed, please check the Video URL and fallback URL values and update them if necessary."
15+
description="Body message for the alert that appears when the video id has been changed."
16+
id="authoring.videoeditor.videoIdChangeAlert.message"
17+
/>
18+
</ErrorAlert>
19+
<div
20+
className="border-primary-100 border-bottom pb-4"
21+
>
22+
<Form.Group>
23+
<Form.Control
24+
floatingLabel="Video ID"
25+
onBlur={[Function]}
26+
onChange={[MockFunction]}
27+
value=""
28+
/>
29+
<Form.Control.Feedback
30+
className="text-primary-300 mb-4"
31+
>
32+
<FormattedMessage
33+
defaultMessage="If you were assigned a video ID by edX, enter the ID here."
34+
description="Feedback for video ID field"
35+
id="authoring.videoeditor.videoSource.videoId.feedback"
36+
/>
37+
</Form.Control.Feedback>
38+
</Form.Group>
39+
<Form.Group>
40+
<Form.Control
41+
floatingLabel="Video URL"
42+
onBlur={[Function]}
43+
onChange={[MockFunction]}
44+
value=""
45+
/>
46+
<Form.Control.Feedback
47+
className="text-primary-300"
48+
>
49+
<FormattedMessage
50+
defaultMessage="The URL for your video. This can be a YouTube URL, or a link
51+
to an .mp4, .ogg, or .webm video file hosted elsewhere on the internet."
52+
description="Feedback for video URL field"
53+
id="authoring.videoeditor.videoSource.videoUrl.feedback"
54+
/>
55+
</Form.Control.Feedback>
56+
</Form.Group>
57+
</div>
58+
<div
59+
className="mt-4"
60+
>
61+
<FormattedMessage
62+
defaultMessage="Fallback videos"
63+
description="Title for the fallback videos section"
64+
id="authoring.videoeditor.videoSource.fallbackVideo.title"
65+
/>
66+
</div>
67+
<div
68+
className="mt-3"
69+
>
70+
<FormattedMessage
71+
defaultMessage="To be sure all learners can access the video, edX
72+
recommends providing additional videos in both .mp4 and
73+
.webm formats. The first listed video compatible with the
74+
learner's device will play."
75+
description="Test explaining reason for fallback videos"
76+
id="authoring.videoeditor.videoSource.fallbackVideo.message"
77+
/>
78+
</div>
79+
<Form.Row
80+
className="mt-3.5 mx-0 flex-nowrap"
81+
>
82+
<Form.Group>
83+
<Form.Control
84+
floatingLabel="Video URL"
85+
/>
86+
<IconButtonWithTooltip
87+
alt="Delete"
88+
data-testid="delete-fallback-video"
89+
iconAs="Icon"
90+
onClick={[Function]}
91+
tooltipContent="Delete"
92+
tooltipPlacement="top"
93+
/>
94+
</Form.Group>
95+
</Form.Row>
96+
<ActionRow
97+
className="mt-4.5"
98+
>
99+
<Form.Group>
100+
<Form.Checkbox
101+
checked={false}
102+
className="decorative-control-label"
103+
onChange={[MockFunction]}
104+
>
105+
<div
106+
className="small text-gray-700"
107+
>
108+
<FormattedMessage
109+
defaultMessage="Allow video downloads"
110+
description="Label for allow video downloads checkbox"
111+
id="authoring.videoeditor.videoSource.allowDownloadCheckboxLabel"
112+
/>
113+
</div>
114+
</Form.Checkbox>
115+
<OverlayTrigger
116+
key="top"
117+
overlay={
118+
<Tooltip
119+
id="tooltip-top"
120+
>
121+
<FormattedMessage
122+
defaultMessage="Allow learners to download versions of this video in
123+
different formats if they cannot use the edX video player or do not have
124+
access to YouTube."
125+
description="Message for allow video downloads checkbox"
126+
id="authoring.videoeditor.videoSource.allowDownloadTooltipMessage"
127+
/>
128+
</Tooltip>
129+
}
130+
placement="top"
131+
>
132+
<Icon
133+
style={
134+
{
135+
"height": "16px",
136+
"width": "16px",
137+
}
138+
}
139+
/>
140+
</OverlayTrigger>
141+
</Form.Group>
142+
<ActionRow.Spacer />
143+
</ActionRow>
144+
<div
145+
className="my-4 border-primary-100 border-bottom"
146+
/>
147+
<Button
148+
className="text-primary-500 font-weight-bold pl-0"
149+
onClick={[Function]}
150+
size="sm"
151+
variant="link"
152+
>
153+
<FormattedMessage
154+
defaultMessage="Add a video URL"
155+
description="Label for add a video URL button"
156+
id="authoring.videoeditor.videoSource.fallbackVideo.addButtonLabel"
157+
/>
158+
</Button>
159+
</injectIntl(ShimmedIntlComponent)>
160+
`;
161+
162+
exports[`VideoSourceWidget snapshots snapshots: renders as expected with videoSharingEnabledForCourse=true 1`] = `
163+
<injectIntl(ShimmedIntlComponent)
164+
fontSize="x-small"
165+
title="Video source"
166+
>
167+
<ErrorAlert
168+
dismissError={[Function]}
169+
hideHeading={true}
170+
isError={false}
171+
>
172+
<FormattedMessage
173+
defaultMessage="The Video ID field has changed, please check the Video URL and fallback URL values and update them if necessary."
174+
description="Body message for the alert that appears when the video id has been changed."
175+
id="authoring.videoeditor.videoIdChangeAlert.message"
176+
/>
177+
</ErrorAlert>
178+
<div
179+
className="border-primary-100 border-bottom pb-4"
180+
>
181+
<Form.Group>
182+
<Form.Control
183+
floatingLabel="Video ID"
184+
onBlur={[Function]}
185+
onChange={[MockFunction]}
186+
value=""
187+
/>
188+
<Form.Control.Feedback
189+
className="text-primary-300 mb-4"
190+
>
191+
<FormattedMessage
192+
defaultMessage="If you were assigned a video ID by edX, enter the ID here."
193+
description="Feedback for video ID field"
194+
id="authoring.videoeditor.videoSource.videoId.feedback"
195+
/>
196+
</Form.Control.Feedback>
197+
</Form.Group>
198+
<Form.Group>
199+
<Form.Control
200+
floatingLabel="Video URL"
201+
onBlur={[Function]}
202+
onChange={[MockFunction]}
203+
value=""
204+
/>
205+
<Form.Control.Feedback
206+
className="text-primary-300"
207+
>
208+
<FormattedMessage
209+
defaultMessage="The URL for your video. This can be a YouTube URL, or a link
210+
to an .mp4, .ogg, or .webm video file hosted elsewhere on the internet."
211+
description="Feedback for video URL field"
212+
id="authoring.videoeditor.videoSource.videoUrl.feedback"
213+
/>
214+
</Form.Control.Feedback>
215+
</Form.Group>
216+
</div>
217+
<div
218+
className="mt-4"
219+
>
220+
<FormattedMessage
221+
defaultMessage="Fallback videos"
222+
description="Title for the fallback videos section"
223+
id="authoring.videoeditor.videoSource.fallbackVideo.title"
224+
/>
225+
</div>
226+
<div
227+
className="mt-3"
228+
>
229+
<FormattedMessage
230+
defaultMessage="To be sure all learners can access the video, edX
231+
recommends providing additional videos in both .mp4 and
232+
.webm formats. The first listed video compatible with the
233+
learner's device will play."
234+
description="Test explaining reason for fallback videos"
235+
id="authoring.videoeditor.videoSource.fallbackVideo.message"
236+
/>
237+
</div>
238+
<Form.Row
239+
className="mt-3.5 mx-0 flex-nowrap"
240+
>
241+
<Form.Group>
242+
<Form.Control
243+
floatingLabel="Video URL"
244+
/>
245+
<IconButtonWithTooltip
246+
alt="Delete"
247+
data-testid="delete-fallback-video"
248+
iconAs="Icon"
249+
onClick={[Function]}
250+
tooltipContent="Delete"
251+
tooltipPlacement="top"
252+
/>
253+
</Form.Group>
254+
</Form.Row>
255+
<ActionRow
256+
className="mt-4.5"
257+
>
258+
<Form.Group>
259+
<Form.Checkbox
260+
checked={false}
261+
className="decorative-control-label"
262+
onChange={[MockFunction]}
263+
>
264+
<div
265+
className="small text-gray-700"
266+
>
267+
<FormattedMessage
268+
defaultMessage="Allow video downloads"
269+
description="Label for allow video downloads checkbox"
270+
id="authoring.videoeditor.videoSource.allowDownloadCheckboxLabel"
271+
/>
272+
</div>
273+
</Form.Checkbox>
274+
<OverlayTrigger
275+
key="top"
276+
overlay={
277+
<Tooltip
278+
id="tooltip-top"
279+
>
280+
<FormattedMessage
281+
defaultMessage="Allow learners to download versions of this video in
282+
different formats if they cannot use the edX video player or do not have
283+
access to YouTube."
284+
description="Message for allow video downloads checkbox"
285+
id="authoring.videoeditor.videoSource.allowDownloadTooltipMessage"
286+
/>
287+
</Tooltip>
288+
}
289+
placement="top"
290+
>
291+
<Icon
292+
style={
293+
{
294+
"height": "16px",
295+
"width": "16px",
296+
}
297+
}
298+
/>
299+
</OverlayTrigger>
300+
</Form.Group>
301+
<ActionRow.Spacer />
302+
</ActionRow>
303+
<div
304+
className="my-4 border-primary-100 border-bottom"
305+
/>
306+
<Button
307+
className="text-primary-500 font-weight-bold pl-0"
308+
onClick={[Function]}
309+
size="sm"
310+
variant="link"
311+
>
312+
<FormattedMessage
313+
defaultMessage="Add a video URL"
314+
description="Label for add a video URL button"
315+
id="authoring.videoeditor.videoSource.fallbackVideo.addButtonLabel"
316+
/>
317+
</Button>
318+
</injectIntl(ShimmedIntlComponent)>
319+
`;

‎src/editors/containers/VideoEditor/components/VideoSettingsModal/components/VideoSourceWidget/hooks.jsx‎

Lines changed: 7 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -39,16 +39,13 @@ export const sourceHooks = ({ dispatch, previousVideoId, setAlert }) => ({
3939

4040
export const fallbackHooks = ({ fallbackVideos, dispatch }) => ({
4141
addFallbackVideo: () => dispatch(actions.video.updateField({ fallbackVideos: [...fallbackVideos, ''] })),
42-
/**
43-
* Deletes the first occurrence of the given videoUrl from the fallbackVideos list
44-
* @param {string} videoUrl - the video URL to delete
45-
*/
46-
deleteFallbackVideo: (videoUrl) => {
47-
const index = fallbackVideos.findIndex(video => video === videoUrl);
48-
const updatedFallbackVideos = [
49-
...fallbackVideos.slice(0, index),
50-
...fallbackVideos.slice(index + 1),
51-
];
42+
43+
deleteFallbackVideo: (videoIndex) => {
44+
const updatedFallbackVideos = fallbackVideos.reduce((result, currentItem, index) => {
45+
if (index === videoIndex) { return result; }
46+
return [...result, currentItem];
47+
}, []);
48+
5249
dispatch(actions.video.updateField({ fallbackVideos: updatedFallbackVideos }));
5350
},
5451
});

‎src/editors/containers/VideoEditor/components/VideoSettingsModal/components/VideoSourceWidget/index.jsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -107,13 +107,13 @@ const VideoSourceWidget = () => {
107107
onBlur={fallbackVideos.onBlur(index)}
108108
/>
109109
<IconButtonWithTooltip
110-
key={`top-delete-${videoUrl}`}
111110
tooltipPlacement="top"
112111
tooltipContent={intl.formatMessage(messages.deleteFallbackVideo)}
113112
src={DeleteOutline}
114113
iconAs={Icon}
115114
alt={intl.formatMessage(messages.deleteFallbackVideo)}
116-
onClick={() => deleteFallbackVideo(videoUrl)}
115+
onClick={() => deleteFallbackVideo(index)}
116+
data-testid="delete-fallback-video"
117117
/>
118118
</Form.Group>
119119
</Form.Row>

0 commit comments

Comments
 (0)