Add download button to Studio video upload page

The button downloads the CSV data containing all video URLs.

cms/djangoapps/contentstore/views/videos.py

@@ -204,6 +204,7 @@ def videos_index_html(course):
         {
             "context_course": course,
             "post_url": reverse_course_url("videos_handler", unicode(course.id)),
+            "encodings_download_url": reverse_course_url("video_encodings_download", unicode(course.id)),
             "previous_uploads": _get_index_videos(course),
             "concurrent_upload_limit": settings.VIDEO_UPLOAD_PIPELINE.get("CONCURRENT_UPLOAD_LIMIT", 0),
         }

cms/static/js/factories/videos_index.js

@@ -2,7 +2,14 @@ define(
     ["jquery", "backbone", "js/views/active_video_upload_list", "js/views/previous_video_upload_list"],
     function ($, Backbone, ActiveVideoUploadListView, PreviousVideoUploadListView) {
         "use strict";
-        var VideosIndexFactory = function($contentWrapper, postUrl, concurrentUploadLimit, uploadButton, previousUploads) {
+        var VideosIndexFactory = function(
+            $contentWrapper,
+            postUrl,
+            encodingsDownloadUrl,
+            concurrentUploadLimit,
+            uploadButton,
+            previousUploads
+        ) {
             var activeView = new ActiveVideoUploadListView({
                 postUrl: postUrl,
                 concurrentUploadLimit: concurrentUploadLimit,
@@ -10,7 +17,10 @@ define(
             });
             $contentWrapper.append(activeView.render().$el);
             var previousCollection = new Backbone.Collection(previousUploads);
-            var previousView = new PreviousVideoUploadListView({collection: previousCollection});
+            var previousView = new PreviousVideoUploadListView({
+                collection: previousCollection,
+                encodingsDownloadUrl: encodingsDownloadUrl
+            });
             $contentWrapper.append(previousView.render().$el);
         };
 

cms/static/js/views/previous_video_upload_list.js

@@ -6,8 +6,9 @@ define(
             tagName: "section",
             className: "wrapper-assets",
 
-            initialize: function() {
+            initialize: function(options) {
                 this.template = this.loadTemplate("previous-video-upload-list");
+                this.encodingsDownloadUrl = options.encodingsDownloadUrl;
                 this.itemViews = this.collection.map(function(model) {
                     return new PreviousVideoUploadView({model: model});
                 });
@@ -15,7 +16,7 @@ define(
 
             render: function() {
                 var $el = this.$el;
-                $el.html(this.template());
+                $el.html(this.template({encodingsDownloadUrl: this.encodingsDownloadUrl}));
                 var $tabBody = $el.find(".js-table-body");
                 _.each(this.itemViews, function(view) {
                     $tabBody.append(view.render().$el);

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

@@ -90,4 +90,17 @@
     @extend %ui-btn-non;
   }
 
+  .assets-library {
+    .assets-title {
+      display: inline-block;
+      width: flex-grid(5, 9);
+      @include margin-right(flex-gutter());
+    }
+
+    .wrapper-encodings-download {
+      display: inline-block;
+      width: flex-grid(4, 9);
+      text-align: right;
+    }
+  }
 }

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

 <div class="assets-library">
     <h3 class="assets-title"><%- gettext("Previous Uploads") %></h3>
+    <div class="wrapper-encodings-download">
+      <a href="<%- encodingsDownloadUrl %>">
+        <%- gettext("Download available encodings (.csv)") %>
+      </a>
+    </div>
     <table class="assets-table">
         <thead>
             <tr>

cms/templates/videos_index.html

@@ -24,6 +24,7 @@
         VideosIndexFactory(
             $contentWrapper,
             "${post_url}",
+            "${encodings_download_url}",
             ${concurrent_upload_limit},
             $(".nav-actions .upload-button"),
             $contentWrapper.data("previous-uploads")