From 6dde098ffa7bd0bc7d8bcd745d176e5b14841f27 Mon Sep 17 00:00:00 2001
From: Rhys Mills <rhys.mills@guardian.co.uk>
Date: Fri, 21 Jun 2024 16:09:41 +0100
Subject: [PATCH] Implement UX improvements to upload page

---
 .../src/components/VideoUpload/AddAssetFromURL.js |  6 ++++++
 .../src/components/VideoUpload/VideoAsset.js      |  2 +-
 .../src/components/VideoUpload/YoutubeUpload.js   | 15 ++++++---------
 .../video-ui/src/components/utils/YouTubeEmbed.js |  4 +++-
 public/video-ui/styles/abstracts/_mixins.scss     |  2 +-
 public/video-ui/styles/components/_forms.scss     | 10 ++++++++++
 public/video-ui/styles/components/_presence.scss  |  3 ++-
 public/video-ui/styles/layout/_grid.scss          |  1 +
 public/video-ui/styles/layout/_upload.scss        |  3 ++-
 public/video-ui/styles/layout/_video.scss         |  9 +++++++++
 10 files changed, 41 insertions(+), 14 deletions(-)

diff --git a/public/video-ui/src/components/VideoUpload/AddAssetFromURL.js b/public/video-ui/src/components/VideoUpload/AddAssetFromURL.js
index f0032aad3..3ef207f37 100644
--- a/public/video-ui/src/components/VideoUpload/AddAssetFromURL.js
+++ b/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"
diff --git a/public/video-ui/src/components/VideoUpload/VideoAsset.js b/public/video-ui/src/components/VideoUpload/VideoAsset.js
index c159e21e2..a22e77b0f 100644
--- a/public/video-ui/src/components/VideoUpload/VideoAsset.js
+++ b/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" />
diff --git a/public/video-ui/src/components/VideoUpload/YoutubeUpload.js b/public/video-ui/src/components/VideoUpload/YoutubeUpload.js
index 70b2c5b9f..4e2658c63 100644
--- a/public/video-ui/src/components/VideoUpload/YoutubeUpload.js
+++ b/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"
diff --git a/public/video-ui/src/components/utils/YouTubeEmbed.js b/public/video-ui/src/components/utils/YouTubeEmbed.js
index bece17524..86d927a3b 100644
--- a/public/video-ui/src/components/utils/YouTubeEmbed.js
+++ b/public/video-ui/src/components/utils/YouTubeEmbed.js
@@ -6,7 +6,7 @@ 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"
@@ -14,6 +14,8 @@ export function YouTubeEmbed({ id, className }) {
       src={getYouTubeEmbedUrl(id)}
       allowFullScreen
       frameBorder="0"
+      height={largePreview ? "250px" : undefined}
+      width={largePreview ? "400px" : undefined}
     />
   );
 }
diff --git a/public/video-ui/styles/abstracts/_mixins.scss b/public/video-ui/styles/abstracts/_mixins.scss
index 8a54a37e4..3fe4570d6 100644
--- a/public/video-ui/styles/abstracts/_mixins.scss
+++ b/public/video-ui/styles/abstracts/_mixins.scss
@@ -12,7 +12,7 @@
   }
 
   &:disabled {
-    cursor: default;
+    cursor: not-allowed;
     opacity: 0.5;
   }
 
diff --git a/public/video-ui/styles/components/_forms.scss b/public/video-ui/styles/components/_forms.scss
index a92ee3ef8..29d7ea599 100644
--- a/public/video-ui/styles/components/_forms.scss
+++ b/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
diff --git a/public/video-ui/styles/components/_presence.scss b/public/video-ui/styles/components/_presence.scss
index 2d9b395f5..3f54353a0 100644
--- a/public/video-ui/styles/components/_presence.scss
+++ b/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;
     }
   }
-}
\ No newline at end of file
+}
diff --git a/public/video-ui/styles/layout/_grid.scss b/public/video-ui/styles/layout/_grid.scss
index 1f5962f84..db19ef1dc 100644
--- a/public/video-ui/styles/layout/_grid.scss
+++ b/public/video-ui/styles/layout/_grid.scss
@@ -76,6 +76,7 @@
   width: 100%;
   background-color: $color700Grey;
   height: 60px;
+  min-height: 60px;
 }
 
 .grid__item__title {
diff --git a/public/video-ui/styles/layout/_upload.scss b/public/video-ui/styles/layout/_upload.scss
index 2f2fe4a60..1dd2a9aa3 100644
--- a/public/video-ui/styles/layout/_upload.scss
+++ b/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;
   }
 
diff --git a/public/video-ui/styles/layout/_video.scss b/public/video-ui/styles/layout/_video.scss
index a74296832..230b712cc 100644
--- a/public/video-ui/styles/layout/_video.scss
+++ b/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;
+      }
+    }
   }
 }