fix: transcript styling (#159)

src/editors/containers/VideoEditor/components/VideoSettingsModal/components/LicenseWidget/LicenseSelector.jsx

@@ -32,7 +32,7 @@ export const LicenseSelector = ({
   const ref = React.useRef();
   return (
     <Form.Group className="mx-2 my-0">
-      <Form.Row>
+      <Form.Row className="flex-nowrap">
         <Form.Control
           as="select"
           ref={ref}

src/editors/containers/VideoEditor/components/VideoSettingsModal/components/LicenseWidget/__snapshots__/LicenseSelector.test.jsx.snap

@@ -4,7 +4,9 @@ exports[`LicenseSelector snapshots snapshots: renders as expected with block lev
 <Form.Group
   className="mx-2 my-0"
 >
-  <Form.Row>
+  <Form.Row
+    className="flex-nowrap"
+  >
     <Form.Control
       as="select"
       defaultValue="all-rights-reserved"
@@ -60,7 +62,9 @@ exports[`LicenseSelector snapshots snapshots: renders as expected with default p
 <Form.Group
   className="mx-2 my-0"
 >
-  <Form.Row>
+  <Form.Row
+    className="flex-nowrap"
+  >
     <Form.Control
       as="select"
       defaultValue="all-rights-reserved"
@@ -104,7 +108,9 @@ exports[`LicenseSelector snapshots snapshots: renders as expected with library l
 <Form.Group
   className="mx-2 my-0"
 >
-  <Form.Row>
+  <Form.Row
+    className="flex-nowrap"
+  >
     <Form.Control
       as="select"
       defaultValue="all-rights-reserved"
@@ -160,7 +166,9 @@ exports[`LicenseSelector snapshots snapshots: renders as expected with no licens
 <Form.Group
   className="mx-2 my-0"
 >
-  <Form.Row>
+  <Form.Row
+    className="flex-nowrap"
+  >
     <Form.Control
       as="select"
       defaultValue=""

src/editors/containers/VideoEditor/components/VideoSettingsModal/components/TranscriptWidget/LanguageSelector.jsx

@@ -54,13 +54,13 @@ export const LanguageSelector = ({
   const onLanguageChange = module.hooks.onSelectLanguage({
     dispatch: useDispatch(), languageBeforeChange: localLang, setLocalLang, triggerupload: input.click,
   });
-
   return (
     <div className="col col-11">
       <Form.Group controlId={`selectLanguage-form-${index}`} className="mw-100">
-        <Form.Control as="select" defaultValue={language} onChange={(e) => onLanguageChange(e)} floatingLabel={intl.formatMessage(messages.languageSelectLabel)}>
+        <Form.Control as="select" aria-label={intl.formatMessage(messages.languageSelectLabel)} defaultValue={language} onChange={(e) => onLanguageChange(e)}>
           {Object.entries(videoTranscriptLanguages).map(([lang, text]) => {
             if (language === lang) { return (<option value={lang} selected>{text}</option>); }
+            if (lang === 'placeholder') { return (<option hidden>{intl.formatMessage(messages.languageSelectPlaceholder)}</option>); }
             if (openLanguages.some(row => row.includes(lang))) {
               return (<option value={lang}>{text}</option>);
             }

src/editors/containers/VideoEditor/components/VideoSettingsModal/components/TranscriptWidget/Transcript.jsx

@@ -71,7 +71,7 @@ export const Transcript = ({
           </Card>
         )
         : (
-          <Row>
+          <Row className="flex-nowrap">
             <LanguageSelector
               title={index}
               language={language}

src/editors/containers/VideoEditor/components/VideoSettingsModal/components/TranscriptWidget/__snapshots__/LanguageSelector.test.jsx.snap

@@ -9,9 +9,9 @@ exports[`LanguageSelector snapshot transcript option 1`] = `
     controlId="selectLanguage-form-undefined"
   >
     <Form.Control
+      aria-label="Languages"
       as="select"
       defaultValue="kl"
-      floatingLabel="Languages"
       onChange={[Function]}
     >
       <option
@@ -56,9 +56,9 @@ exports[`LanguageSelector snapshots -- no transcripts no Open Languages, all sho
     controlId="selectLanguage-form-undefined"
   >
     <Form.Control
+      aria-label="Languages"
       as="select"
       defaultValue="kl"
-      floatingLabel="Languages"
       onChange={[Function]}
     >
       <option

src/editors/containers/VideoEditor/components/VideoSettingsModal/components/TranscriptWidget/__snapshots__/Transcript.test.jsx.snap

@@ -2,7 +2,9 @@
 
 exports[`Transcript Component component component snapshots: renders as expected with default props: dont show confirm delete 1`] = `
 <Fragment>
-  <Component>
+  <Component
+    className="flex-nowrap"
+  >
     <LanguageSelector
       language="lAnG"
       title="sOmenUmBer"
@@ -18,7 +20,9 @@ exports[`Transcript Component component component snapshots: renders as expected
 
 exports[`Transcript Component component component snapshots: renders as expected with default props: dont show confirm delete, language is blank so delete is shown instead of action menu 1`] = `
 <Fragment>
-  <Component>
+  <Component
+    className="flex-nowrap"
+  >
     <LanguageSelector
       language=""
       title="sOmenUmBer"

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

@@ -396,17 +396,8 @@ exports[`TranscriptWidget component snapshots snapshots: renders as expected wit
   <Stack
     gap={3}
   >
-    <Alert
-      variant="danger"
-    >
-      <FormattedMessage
-        defaultMessage="Only SRT files can be uploaded. Please select a file ending in .srt to upload."
-        description="Message warning users to only upload .srt files"
-        id="authoring.videoeditor.transcripts.fileTypeWarning"
-      />
-    </Alert>
     <FormattedMessage
-      defaultMessage="Add video transcripts for improved accessibility."
+      defaultMessage="Add video transcripts (.srt files only) for improved accessibility."
       description="Message for adding first transcript"
       id="authoring.videoeditor.transcripts.upload.firstTranscriptMessage"
     />

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

@@ -11,7 +11,6 @@ import {
   Button,
   Stack,
   Icon,
-  Alert,
   OverlayTrigger,
   Tooltip,
   ActionRow,
@@ -153,9 +152,6 @@ export const TranscriptWidget = ({
           </Form.Group>
         ) : (
           <>
-            <Alert variant="danger">
-              <FormattedMessage {...messages.fileTypeWarning} />
-            </Alert>
             <FormattedMessage {...messages.addFirstTranscript} />
           </>
         )}

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

@@ -11,7 +11,7 @@ export const messages = {
   },
   addFirstTranscript: {
     id: 'authoring.videoeditor.transcripts.upload.firstTranscriptMessage',
-    defaultMessage: 'Add video transcripts for improved accessibility.',
+    defaultMessage: 'Add video transcripts (.srt files only) for improved accessibility.',
     description: 'Message for adding first transcript',
   },
   allowDownloadCheckboxLabel: {
@@ -69,6 +69,11 @@ export const messages = {
     defaultMessage: 'Languages',
     description: 'Label For Dropdown, which allows users to set the language associtated with a transcript',
   },
+  languageSelectPlaceholder: {
+    id: 'authoring.videoeditor.transcripts.languageSelectPlaceholder',
+    defaultMessage: 'Select Language',
+    description: 'Placeholder For Dropdown, which allows users to set the language associtated with a transcript',
+  },
   cancelDeleteLabel: {
     id: 'authoring.videoeditor.transcripts.cancelDeleteLabel',
     defaultMessage: 'Cancel',

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

@@ -36,7 +36,7 @@ exports[`VideoSourceWidget snapshots snapshots: renders as expected with default
       />
     </div>
     <Form.Row
-      className="mt-4"
+      className="mt-4 flex-nowrap"
     >
       <Form.Control
         floatingLabel="Video URL"

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

@@ -71,7 +71,7 @@ export const VideoSourceWidget = ({
           <FormattedMessage {...messages.fallbackVideoMessage} />
         </div>
         {fallbackVideos.formValue.map((videoUrl, index) => (
-          <Form.Row className="mt-4">
+          <Form.Row className="mt-4 flex-nowrap">
             <Form.Control
               floatingLabel={intl.formatMessage(messages.fallbackVideoLabel)}
               onChange={fallbackVideos.onChange(index)}

src/editors/data/constants/video.js

@@ -1,6 +1,7 @@
 import { StrictDict } from '../../utils';
 
 export const videoTranscriptLanguages = StrictDict({
+  placeholder: '',
   aa: 'Afar',
   ab: 'Abkhazian',
   af: 'Afrikaans',