Use YouTube video title and channel as assignment description (#5500)

hypothesis · Jun 21, 2023 · 22114e1 · 22114e1
1 parent 0970cc8
commit 22114e1
Show file tree

Hide file tree

Showing 5 changed files with 46 additions and 7 deletions.
diff --git 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({
         <YouTubePicker
           defaultURL={getDefaultValueIfYouTubeURL()}
           onCancel={cancelDialog}
-          onSelectURL={selectURL}
+          onSelectURL={selectYouTubeURL}
         />
       );
       break;

diff --git 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) {
 
                 <div data-testid="content-selector-container">
                   {content && currentStep !== 'content-selection' ? (
-                    <div className="flex gap-x-2 items-center">
+                    <div className="flex gap-x-2 items-start">
                       <span
                         className="break-words italic"
                         data-testid="content-summary"

diff --git a/lms/static/scripts/frontend_apps/components/YouTubePicker.tsx b/lms/static/scripts/frontend_apps/components/YouTubePicker.tsx
@@ -15,7 +15,7 @@ export type YouTubePickerProps = {
 
   onCancel: () => 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 && (
           <UIMessage data-testid="selected-video" status="success">
             <span className="font-bold italic">
-              {videoInfo.data.title} ({videoInfo.data.channel})
+              {formatVideoName(videoInfo.data)}
             </span>
           </UIMessage>
         )}

diff --git 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
@@ -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 => {