Merge pull request #15688 from edx/ammar/update-video-uploads-page

update video uploads page

cms/static/js/spec/views/active_video_upload_list_spec.js

@@ -57,6 +57,20 @@ define(
                 jasmine.Ajax.uninstall();
             });
 
+            it('renders correct text in file drag/drop area', function() {
+                var messages = {
+                        '.video-uploads-header': this.view.uploadHeader,
+                        '.video-upload-text': this.view.uploadText.toString(),
+                        '.video-max-file-size-text': this.view.maxSizeText,
+                        '.video-allowed-extensions-text': this.view.supportedVideosText
+                    },
+                    self = this;
+
+                Object.keys(messages).forEach(function(messageClass) {
+                    expect(self.view.$(messageClass).html()).toEqual(messages[messageClass]);
+                });
+            });
+
             it('should trigger file selection when either the upload button or the drop zone is clicked', function() {
                 var clickSpy = jasmine.createSpy();
                 clickSpy.and.callFake(function(event) { event.preventDefault(); });

cms/static/js/views/active_video_upload_list.js

@@ -23,10 +23,18 @@ define([
                 'drop .file-drop-area': 'dragleave'
             },
 
+            uploadHeader: gettext('Upload Videos'),
+            uploadText: HtmlUtils.interpolateHtml(
+                gettext('Drag and drop or {spanStart}browse your computer{spanEnd}.'),
+                {
+                    spanStart: HtmlUtils.HTML('<span class="upload-text-link">'),
+                    spanEnd: HtmlUtils.HTML('</span>')
+                }
+            ),
             defaultFailureMessage: gettext('This may be happening because of an error with our server or your internet connection. Try refreshing the page or making sure you are online.'),  // eslint-disable-line max-len
 
             initialize: function(options) {
-                this.template = HtmlUtils.template(activeVideoUploadListTemplate)({});
+                this.template = HtmlUtils.template(activeVideoUploadListTemplate);
                 this.collection = new Backbone.Collection();
                 this.itemViews = [];
                 this.listenTo(this.collection, 'add', this.addUpload);
@@ -38,6 +46,19 @@ define([
                 if (options.uploadButton) {
                     options.uploadButton.click(this.chooseFile.bind(this));
                 }
+
+                this.maxSizeText = StringUtils.interpolate(
+                    gettext('Maximum file size: {maxFileSize} GB'),
+                    {
+                        maxFileSize: this.videoUploadMaxFileSizeInGB
+                    }
+                );
+                this.supportedVideosText = edx.StringUtils.interpolate(
+                    gettext('Supported file types: {supportedVideoTypes}'),
+                    {
+                        supportedVideoTypes: this.videoSupportedFileFormats.join(', ')
+                    }
+                );
             },
 
             render: function() {
@@ -45,7 +66,12 @@ define([
 
                 HtmlUtils.setHtml(
                     this.$el,
-                    this.template
+                    this.template({
+                        uploadHeader: this.uploadHeader,
+                        uploadText: this.uploadText,
+                        maxSizeText: this.maxSizeText,
+                        supportedVideosText: this.supportedVideosText
+                    })
                 );
                 _.each(this.itemViews, this.renderUploadView.bind(this));
                 this.$uploadForm = this.$('.file-upload-form');

cms/static/sass/views/_video-upload.scss

@@ -4,14 +4,6 @@
     @include box-sizing(border-box);
   }
 
-  .content-primary {
-    @extend .ui-col-wide;
-  }
-
-  .content-supplementary {
-    @extend .ui-col-narrow;
-  }
-
   .nav-actions {
 
     .fa-cloud-upload {
@@ -23,15 +15,15 @@
 
   .file-upload-form {
     @include clearfix();
-    margin-bottom: ($baseline*1.5);
     width: 100%;
 
     .file-drop-area {
       border: 2px dashed $gray-l3;
       border-radius: ($baseline/5);
-      padding: ($baseline*3);
+      padding: ($baseline*1.25);
       background: $white;
-      text-align: center;
+      @include text-align(center);
+      cursor: pointer;
 
       &:hover,
       &.is-dragged {
@@ -39,6 +31,35 @@
         border-style: solid;
         border-color: $blue-l4;
       }
+
+      &:hover .upload-text-link {
+        text-decoration:underline;
+      }
+
+      .fa-cloud-upload{
+        font-size:7em;
+        vertical-align: top;
+        @include margin-right(0.1em);
+      }
+
+      .text-container {
+        display: inline-block;
+        @include text-align(left);
+
+        .upload-text-link {
+          color: $ui-link-color;
+        }
+
+        .video-uploads-header {
+          font-size: 1.5em;
+          margin-bottom: .25em;
+          font-weight: 600
+        }
+
+        .video-max-file-size-text {
+          margin-top: ($baseline/2);
+        }
+      }
     }
   }
 

cms/templates/js/active-video-upload-list.underscore

 <form class="file-upload-form">
     <div class="file-drop-area">
-        <%- gettext("Drag and drop or click here to upload video files.") %>
+        <span class="icon fa fa-cloud-upload" aria-hidden="true"></span>
+        <div class="text-container">
+            <div class="video-uploads-header"><%- uploadHeader %></div>
+            <div class="video-upload-text"><%= uploadText %></div>
+            <div class="video-max-file-size-text"><%- maxSizeText %></div>
+            <div class="video-allowed-extensions-text"><%- supportedVideosText %></div>
+        </div>
     </div>
     <input type="file" class="sr js-file-input" name="file" multiple>
 </form>

cms/templates/videos_index.html

@@ -66,36 +66,6 @@
 <div class="wrapper-content wrapper">
     <section class="content">
         <article class="content-primary" role="main" data-previous-uploads="${json.dumps(previous_uploads, cls=DjangoJSONEncoder)}"></article>
-
-        <aside class="content-supplementary" role="complementary">
-            <div class="bit">
-                <h3 class="title-3">${_("Why upload video files?")}</h3>
-                <p>${_("For a video to play on different devices, it needs to be available in multiple formats. After you upload an original video file in {file_formats} format on this page, an automated process creates those additional formats and stores them for you.").format(
-                    file_formats=' or '.join(video_supported_file_formats)
-                )}</p>
-                <h3 class="title-3">${_("Maximum Video File Size")}</h3>
-                <p>${Text(_("The maximum size for each video file that you upload is {em_start}5 GB{em_end}. The upload process fails for larger files.")).format(
-                    em_start=HTML('<strong>'),
-                    em_end=HTML('</strong>')
-                )}</p>
-                <h3 class="title-3">${_("Monitoring files as they upload")}</h3>
-                <p>${_("Each video file that you upload needs to reach the video processing servers successfully before additional work can begin. You can monitor the progress of files as they upload, and try again if the upload fails.")}</p>
-                <h3 class="title-3">${_("Managing uploaded files")}</h3>
-                <p>${Text(_("After a file uploads successfully, automated processing begins. The file is then listed under Previous Uploads as {em_start}In Progress{em_end}. You can add the video to your course as soon as it has a unique video ID and the status is {em_start}Ready{em_end}. Allow 24 hours for file processing at the external video hosting sites to complete.")).format(
-                    em_start=HTML('<strong>'),
-                    em_end=HTML('</strong>')
-                )}</p>
-                <p>${Text(_("If something goes wrong, the {em_start}Failed{em_end} status message appears. Check for problems in your original file and upload a replacement.")).format(
-                    em_start=HTML('<strong>'),
-                    em_end=HTML('</strong>')
-                )}</p>
-                <h3 class="title-3">${_("How do I get the videos into my course?")}</h3>
-                <p>${Text(_("When the status for a file is {em_start}Ready{em_end}, you can add that video to a component in your course. Copy the unique video ID. In another browser window, on the Course Outline page, create or locate a video component to play this video. Edit the video component to paste the ID into the Advanced {em_start}Video ID{em_end} field. The video can play in the LMS as soon as its status is {em_start}Ready{em_end}, although processing may not be complete for all encodings and all video hosting sites.")).format(
-                    em_start=HTML('<strong>'),
-                    em_end=HTML('</strong>')
-                )}</p>
-            </div>
-        </aside>
     </section>
 </div>