Merge pull request #1167 from guardian/rm/upload-ux

Add some user experience improvements to the uploads page (again)

public/video-ui/src/components/VideoUpload/AddAssetFromURL.js

@@ -25,6 +25,12 @@ export default class AddAssetFromURL extends React.Component {
           <header className="video__detailbox__header video__detailbox__header-with-border">Asset URL</header>
           <div className="form__row">
             <div>
+              <p className="form__message form__message--warning">
+                This should only be used as a backup if the &apos;Upload to YouTube&apos; option is not available.
+              </p>
+              <p className="form__message form__message--warning">
+                Using an Asset URL from an existing YouTube video will not pass video data to our video commissioning and syndication tool, Pluto.
+              </p>
               <input
                 className="form__field"
                 type="text"

public/video-ui/src/components/VideoUpload/VideoAsset.js

@@ -85,7 +85,7 @@ function AssetDisplay({ id, isActive, sources }) {
 
   return (
     <div className="upload">
-      {id ? <YouTubeEmbed id={id} /> : <VideoEmbed sources={sources} />}
+      {id ? <YouTubeEmbed id={id} largePreview={true}/> : <VideoEmbed sources={sources} />}
       {linkProps
         ? <a {...linkProps}>
             <Icon icon="open_in_new" className="icon__assets" />

public/video-ui/src/components/VideoUpload/YoutubeUpload.js

@@ -17,21 +17,13 @@ export default class YoutubeUpload extends React.Component {
     }
   };
 
-  renderWarning() {
-    return (
-      <p className="form__message form__message--warning">
-        A YouTube channel, category and privacy status are needed before uploading a video
-      </p>
-    );
-  }
-
   render() {
     const { video, startUpload } = this.props;
 
     const canUploadToYouTube = VideoUtils.canUploadToYouTube(video);
 
     return (
-      <div className="video__detailbox video__detailbox__assets">   
+      <div className="video__detailbox video__detailbox__assets">
         <div className="form__group">
           <header className="video__detailbox__header video__detailbox__header-with-border">
             Upload to YouTube
@@ -44,6 +36,11 @@ export default class YoutubeUpload extends React.Component {
               disabled={!canUploadToYouTube || this.props.uploading}
               accept="video/*,.mxf"
             />
+            { !canUploadToYouTube ?
+              <p className="form__message form__message--warning">
+              A YouTube channel, category and privacy status are needed before uploading a video. Please set these in the YouTube furniture tab.
+              </p> : null
+            }
             <button
               type="button"
               className="btn button__secondary__assets"

public/video-ui/src/components/utils/YouTubeEmbed.js

@@ -6,14 +6,16 @@ export const getYouTubeEmbedUrl = (id) => {
   const embedUrl = getStore().getState().config.youtubeEmbedUrl;
   return `${embedUrl}${id}?showinfo=0&rel=0`;
 }
-export function YouTubeEmbed({ id, className }) {
+export function YouTubeEmbed({ id, className, largePreview }) {
   return (
     <iframe
       type="text/html"
       className={className}
       src={getYouTubeEmbedUrl(id)}
       allowFullScreen
       frameBorder="0"
+      height={largePreview ? "250px" : undefined}
+      width={largePreview ? "400px" : undefined}
     />
   );
 }

public/video-ui/styles/abstracts/_mixins.scss

@@ -12,7 +12,7 @@
   }
 
   &:disabled {
-    cursor: default;
+    cursor: not-allowed;
     opacity: 0.5;
   }
 

public/video-ui/styles/components/_forms.scss

@@ -102,6 +102,16 @@
         cursor: pointer;
       }
     }
+
+    &:disabled {
+      &::file-selector-button {
+        background-color: #888888;
+        &:hover {
+          background-color: #888888;
+          cursor: not-allowed;
+        }
+      }
+    }
   }
 
   // Placeholder styling, separated because if one selector is invalid, the browser will ignore the rest

public/video-ui/styles/components/_presence.scss

@@ -56,6 +56,7 @@
     border-radius: 50%;
     color: $color600Grey;
     background-color: $cWhite;
+    height: 32px;
 
     &:not(:last-child) {
       margin-right: 7px;
@@ -65,4 +66,4 @@
       cursor: default;
     }
   }
-}
+}

public/video-ui/styles/layout/_grid.scss

@@ -76,6 +76,7 @@
   width: 100%;
   background-color: $color700Grey;
   height: 60px;
+  min-height: 60px;
 }
 
 .grid__item__title {

public/video-ui/styles/layout/_upload.scss

@@ -18,12 +18,13 @@
 
   &__right {
     display: flex;
+    height: 38px;
   }
 
   &__info {
     overflow: hidden;
     text-overflow: ellipsis;
-    white-space: nowrap;
+    white-space: normal;
     color: white;
   }
 

public/video-ui/styles/layout/_video.scss

@@ -107,6 +107,15 @@
     margin-top: 20px;
     padding-left: 20px;
     flex: 8;
+
+    .grid__item {
+      width: 400px;
+      height: 300px;
+
+      .upload {
+        height: 250px;
+      }
+    }
   }
 }