diff --git a/lms/static/scripts/frontend_apps/components/ContentSelector.tsx b/lms/static/scripts/frontend_apps/components/ContentSelector.tsx index a12fa597de..b5df3cc143 100644 --- a/lms/static/scripts/frontend_apps/components/ContentSelector.tsx +++ b/lms/static/scripts/frontend_apps/components/ContentSelector.tsx @@ -152,6 +152,13 @@ export default function ContentSelector({ onSelectContent({ type: 'url', url }); }; + const selectYouTubeURL = (url: string, title?: string) => { + cancelDialog(); + + const name = title && `YouTube: ${title}`; + onSelectContent({ type: 'url', url, name }); + }; + const selectCanvasFile = (file: File) => { cancelDialog(); onSelectContent({ type: 'file', file }); @@ -259,7 +266,7 @@ export default function ContentSelector({ ); break; diff --git a/lms/static/scripts/frontend_apps/components/FilePickerApp.tsx b/lms/static/scripts/frontend_apps/components/FilePickerApp.tsx index 59aa131a2d..7ee7bf9b8b 100644 --- a/lms/static/scripts/frontend_apps/components/FilePickerApp.tsx +++ b/lms/static/scripts/frontend_apps/components/FilePickerApp.tsx @@ -310,7 +310,7 @@ export default function FilePickerApp({ onSubmit }: FilePickerAppProps) {
{content && currentStep !== 'content-selection' ? ( -
+
void; /** Callback invoked with the entered URL when the user accepts the dialog */ - onSelectURL: (url: string) => void; + onSelectURL: (url: string, videoName?: string) => void; }; function formatRestrictionError( @@ -44,6 +44,10 @@ function formatRestrictionError( ); } +function formatVideoName(videoInfo: YouTubeVideoInfo): string { + return `${videoInfo.title} (${videoInfo.channel})`; +} + export default function YouTubePicker({ onCancel, defaultURL, @@ -87,7 +91,10 @@ export default function YouTubePicker({ const resetCurrentURL = () => setCurrentURL(undefined); const confirmSelection = () => { if (currentURL) { - onSelectURL(currentURL); + const videoName = videoInfo.data + ? formatVideoName(videoInfo.data) + : undefined; + onSelectURL(currentURL, videoName); } }; @@ -131,7 +138,7 @@ export default function YouTubePicker({ {!error && videoInfo.data?.title && videoInfo.data.channel && ( - {videoInfo.data.title} ({videoInfo.data.channel}) + {formatVideoName(videoInfo.data)} )} diff --git a/lms/static/scripts/frontend_apps/components/test/ContentSelector-test.js b/lms/static/scripts/frontend_apps/components/test/ContentSelector-test.js index 7f13920cae..a7c8140662 100644 --- a/lms/static/scripts/frontend_apps/components/test/ContentSelector-test.js +++ b/lms/static/scripts/frontend_apps/components/test/ContentSelector-test.js @@ -669,12 +669,18 @@ describe('ContentSelector', () => { const picker = getYouTubePicker(wrapper); interact(wrapper, () => { - picker.props().onSelectURL('https://youtu.be/EU6TDnV5osM'); + picker + .props() + .onSelectURL( + 'https://youtu.be/EU6TDnV5osM', + 'The video title (channel)' + ); }); assert.calledWith(onSelectContent, { type: 'url', url: 'https://youtu.be/EU6TDnV5osM', + name: 'YouTube: The video title (channel)', }); }); diff --git a/lms/static/scripts/frontend_apps/components/test/YouTubePicker-test.js b/lms/static/scripts/frontend_apps/components/test/YouTubePicker-test.js index 83b8444231..0311f89a21 100644 --- a/lms/static/scripts/frontend_apps/components/test/YouTubePicker-test.js +++ b/lms/static/scripts/frontend_apps/components/test/YouTubePicker-test.js @@ -52,7 +52,26 @@ describe('YouTubePicker', () => { const wrapper = renderComponent(); wrapper.find('button[data-testid="select-button"]').props().onClick(); - assert.calledWith(fakeOnSelectURL, 'https://youtu.be/videoId'); + assert.calledWith(fakeOnSelectURL, 'https://youtu.be/videoId', undefined); + }); + + it('invokes `onSelectURL` with video data, when available', () => { + fakeUseAPIFetch.returns({ + data: { + title: 'The video title', + channel: 'Hypothesis', + restrictions: [], + }, + }); + + const wrapper = renderComponent(); + + wrapper.find('button[data-testid="select-button"]').props().onClick(); + assert.calledWith( + fakeOnSelectURL, + 'https://youtu.be/videoId', + 'The video title (Hypothesis)' + ); }); [undefined, 'not-a-youtube-url'].forEach(defaultURL => {