Merge pull request #258 from open-craft/0x29a/video-duration-widget-improvements

feat: video duration section improvements [BD-12]

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

@@ -3,7 +3,7 @@
 exports[`DurationWidget render snapshots: renders as expected with default props 1`] = `
 <injectIntl(ShimmedIntlComponent)
   fontSize="x-small"
-  subtitle="Total: 00:00:00"
+  subtitle="Custom: 00:00:00"
   title="Duration"
 >
   <FormattedMessage
@@ -52,9 +52,13 @@ exports[`DurationWidget render snapshots: renders as expected with default props
     </Form.Group>
   </Form.Row>
   <div
-    className="mt-4"
+    className="mt-4 mx-2 text-right"
   >
-    Total: 00:00:00
+    <span
+      className="p-2 total-label rounded"
+    >
+      Total: 00:00:00
+    </span>
   </div>
 </injectIntl(ShimmedIntlComponent)>
 `;

src/editors/containers/VideoEditor/components/VideoSettingsModal/components/DurationWidget/hooks.js

@@ -47,7 +47,10 @@ export const durationWidget = ({ duration, updateField }) => {
         return null;
       }
       const total = durationString.stopTime - (durationString.startTime || 0);
-      return intl.formatMessage(messages.total, { total: module.durationStringFromValue(total) });
+      return intl.formatMessage(
+        subtitle ? messages.custom : messages.total,
+        { total: module.durationStringFromValue(total) },
+      );
     },
   };
 };

src/editors/containers/VideoEditor/components/VideoSettingsModal/components/DurationWidget/hooks.test.js

@@ -120,10 +120,20 @@ describe('Video Settings DurationWidget hooks', () => {
               startTime: '00:00:00',
               stopTime: '00:00:10',
             },
-            subtitle: true,
+            subtitle: false,
             intl,
           })).toEqual(messages.total);
         });
+        describe('returns custom message when at least stopTime is set and subtitle is true', () => {
+          expect(testMethod.getTotalLabel({
+            durationString: {
+              startTime: '00:00:00',
+              stopTime: '00:00:10',
+            },
+            subtitle: true,
+            intl,
+          })).toEqual(messages.custom);
+        });
       });
     });
   });

src/editors/containers/VideoEditor/components/VideoSettingsModal/components/DurationWidget/index.jsx

@@ -11,6 +11,8 @@ import CollapsibleFormWidget from '../CollapsibleFormWidget';
 import hooks from './hooks';
 import messages from '../messages';
 
+import './index.scss';
+
 /**
  * Collapsible Form widget controlling video start and end times
  * Also displays the total run time of the video.
@@ -69,12 +71,14 @@ export const DurationWidget = ({
           </Form.Control.Feedback>
         </Form.Group>
       </Form.Row>
-      <div className="mt-4">
-        {getTotalLabel({
-          durationString: duration,
-          subtitle: false,
-          intl,
-        })}
+      <div className="mt-4 mx-2 text-right">
+        <span className="p-2 total-label rounded">
+          {getTotalLabel({
+            durationString: duration,
+            subtitle: false,
+            intl,
+          })}
+        </span>
       </div>
     </CollapsibleFormWidget>
   );

src/editors/containers/VideoEditor/components/VideoSettingsModal/components/DurationWidget/index.scss

@@ -0,0 +1,5 @@
+@import "@edx/paragon/scss/core/core";
+
+.total-label {
+    border: 1px solid $gray-500;
+}

src/editors/containers/VideoEditor/components/VideoSettingsModal/components/messages.js

@@ -57,6 +57,11 @@ export const messages = {
     defaultMessage: 'Total: {total}',
     description: 'Text describing a video with custom start time and custom stop time, or just a custom stop time',
   },
+  custom: {
+    id: 'authoring.videoeditor.duration.custom',
+    defaultMessage: 'Custom: {total}',
+    description: 'Text describing a video with custom start time and custom stop time, or just a custom stop time for a collapsed widget',
+  },
 };
 
 export default messages;