Skip to content

E
edx-platform
Commit 1bc1c545 by tan
Options

MA-333 Added ability to refresh uploaded videos 

This adds ability to refresh the list of uploaded videos without refreshing the whole page.

Added a refresh button that when clicked:
- fetches a fresh list of uploaded files from the server
- updates `PreviousVideoUploadListView`
- removes the successfully completed uploads from `ActiveVideoUploadListView`
- retains the ongoing or failed uploads in `ActiveVideoUploadListView` so that they can be monitored/retried

The view can also be refreshed without user action, but I felt it may be less surprising to have a button instead.

MA-333 update: auto-refresh list, fix test failure

Changes:
1. Refresh of file list triggered by upload completion. Refresh button retained and label changed to "Refresh List".
2. Added `aria-live="polite"` to `.active-video-upload-list` and `.assets-table`.
3. Removed unused parameter `evt`.
4. Added self to the `AUTHORS` file.

MA-333 update: added tests

MA-333 update: removed refresh button

MA-333 update: address review comments of @mushtaqak

MA-333 update: simplify nested `_each`

MA-333 update: rename viewRefresh to isViewRefresh

MA-333 update: doc string for `clearSuccesful`

MA-333 update: fix accessibility

MA-333 update: update only successfully uploaded videos

MA-333 update: use window.SR feature to notify screen readers that video upload was successful (@pomegranited)
parent c012bd6c
Showing with 120 additions and 28 deletions
AUTHORS
...@@ -276,3 +276,4 @@ Kevin Kim <kkim@edx.org> ...@@ -276,3 +276,4 @@ Kevin Kim <kkim@edx.org>
Albert St. Aubin Jr. <astaubin@edx.org> Albert St. Aubin Jr. <astaubin@edx.org>
Casey Litton <caseylitton@gmail.com> Casey Litton <caseylitton@gmail.com>
Jhony Avella <jhony.avella@edunext.co> Jhony Avella <jhony.avella@edunext.co>
Tanmay Mohapatra <tanmaykm@gmail.com>
cms/djangoapps/contentstore/views/videos.py
...@@ -336,7 +336,7 @@ def videos_post(course, request): ...@@ -336,7 +336,7 @@ def videos_post(course, request):
"courses": [course.id] "courses": [course.id]
}) })
resp_files.append({"file_name": file_name, "upload_url": upload_url}) resp_files.append({"file_name": file_name, "upload_url": upload_url, "edx_video_id": edx_video_id})
return JsonResponse({"files": resp_files}, status=200) return JsonResponse({"files": resp_files}, status=200)
......
cms/static/js/factories/videos_index.js
define( define([
['jquery', 'backbone', 'js/views/active_video_upload_list', 'js/views/previous_video_upload_list'], 'jquery', 'backbone', 'js/views/active_video_upload_list',
function($, Backbone, ActiveVideoUploadListView, PreviousVideoUploadListView) { 'js/views/previous_video_upload_list', 'js/views/active_video_upload'
], function($, Backbone, ActiveVideoUploadListView, PreviousVideoUploadListView, ActiveVideoUpload) {
'use strict'; 'use strict';
var VideosIndexFactory = function( var VideosIndexFactory = function(
$contentWrapper, $contentWrapper,
...@@ -13,17 +14,36 @@ define( ...@@ -13,17 +14,36 @@ define(
var activeView = new ActiveVideoUploadListView({ var activeView = new ActiveVideoUploadListView({
postUrl: postUrl, postUrl: postUrl,
concurrentUploadLimit: concurrentUploadLimit, concurrentUploadLimit: concurrentUploadLimit,
uploadButton: uploadButton uploadButton: uploadButton,
onFileUploadDone: function(activeVideos) {
$.ajax({
url: postUrl,
contentType: 'application/json',
dataType: 'json',
type: 'GET'
}).done(function(responseData) {
var updatedCollection = new Backbone.Collection(responseData.videos).filter(function(video) {
// Include videos that are not in the active video upload list,
// or that are marked as Upload Complete
var isActive = activeVideos.where({videoId: video.get('edx_video_id')});
return isActive.length === 0 ||
isActive[0].get('status') === ActiveVideoUpload.STATUS_COMPLETE;
}),
updatedView = new PreviousVideoUploadListView({
collection: updatedCollection,
encodingsDownloadUrl: encodingsDownloadUrl
}); });
$contentWrapper.append(activeView.render().$el); $contentWrapper.find('.wrapper-assets').replaceWith(updatedView.render().$el);
var previousCollection = new Backbone.Collection(previousUploads); });
var previousView = new PreviousVideoUploadListView({ }
collection: previousCollection, }),
previousView = new PreviousVideoUploadListView({
collection: new Backbone.Collection(previousUploads),
encodingsDownloadUrl: encodingsDownloadUrl encodingsDownloadUrl: encodingsDownloadUrl
}); });
$contentWrapper.append(activeView.render().$el);
$contentWrapper.append(previousView.render().$el); $contentWrapper.append(previousView.render().$el);
}; };
return VideosIndexFactory; return VideosIndexFactory;
} });
);
cms/static/js/models/active_video_upload.js
...@@ -19,6 +19,7 @@ define( ...@@ -19,6 +19,7 @@ define(
var ActiveVideoUpload = Backbone.Model.extend( var ActiveVideoUpload = Backbone.Model.extend(
{ {
defaults: { defaults: {
videoId: null,
status: statusStrings.STATUS_QUEUED, status: statusStrings.STATUS_QUEUED,
progress: 0 progress: 0
} }
......
cms/static/js/spec/views/active_video_upload_list_spec.js
/* global _ */
define( define(
[ [
'jquery', 'jquery',
...@@ -174,42 +175,68 @@ define( ...@@ -174,42 +175,68 @@ define(
// 2.0, the latest version of jasmine-ajax (mock-ajax.js) does have the // 2.0, the latest version of jasmine-ajax (mock-ajax.js) does have the
// necessary support. // necessary support.
_.each( _.each([true, false],
[ function(isViewRefresh) {
var refreshDescription = isViewRefresh ? ' (refreshed)' : ' (not refreshed)';
var subCases = [
{ {
desc: 'completion', desc: 'completion' + refreshDescription,
responseStatus: 204, responseStatus: 204,
statusText: ActiveVideoUpload.STATUS_COMPLETED, statusText: ActiveVideoUpload.STATUS_COMPLETED,
progressValue: 1, progressValue: 1,
presentClass: 'success', presentClass: 'success',
absentClass: 'error' absentClass: 'error',
isViewRefresh: isViewRefresh
}, },
{ {
desc: 'failure', desc: 'failure' + refreshDescription,
responseStatus: 500, responseStatus: 500,
statusText: ActiveVideoUpload.STATUS_FAILED, statusText: ActiveVideoUpload.STATUS_FAILED,
progressValue: 0, progressValue: 0,
presentClass: 'error', presentClass: 'error',
absentClass: 'success' absentClass: 'success',
isViewRefresh: isViewRefresh
} }
], ];
_.each(subCases,
function(subCaseInfo) { function(subCaseInfo) {
describe('and upload ' + subCaseInfo.desc, function() { describe('and upload ' + subCaseInfo.desc, function() {
var refreshSpy = null;
beforeEach(function() { beforeEach(function() {
getSentRequests()[0].respondWith({status: subCaseInfo.responseStatus}); refreshSpy = subCaseInfo.isViewRefresh ? jasmine.createSpy() : null;
this.view.onFileUploadDone = refreshSpy;
getSentRequests()[0].respondWith(
{status: subCaseInfo.responseStatus}
);
}); });
it('should update status and progress', function() { it('should update status and progress', function() {
var $uploadElem = this.view.$('.active-video-upload:first'); var $uploadElem = this.view.$('.active-video-upload:first');
if (subCaseInfo.isViewRefresh &&
subCaseInfo.responseStatus === 204) {
expect(refreshSpy).toHaveBeenCalled();
if ($uploadElem.length > 0) {
expect(
$.trim($uploadElem.find('.video-detail-status').text())
).not.toEqual(ActiveVideoUpload.STATUS_COMPLETED);
expect(
$uploadElem.find('.video-detail-progress').val()
).not.toEqual(1);
expect($uploadElem).not.toHaveClass('success');
}
} else {
expect($uploadElem.length).toEqual(1); expect($uploadElem.length).toEqual(1);
expect($.trim($uploadElem.find('.video-detail-status').text())).toEqual( expect(
subCaseInfo.statusText $.trim($uploadElem.find('.video-detail-status').text())
); ).toEqual(subCaseInfo.statusText);
expect( expect(
$uploadElem.find('.video-detail-progress').val() $uploadElem.find('.video-detail-progress').val()
).toEqual(subCaseInfo.progressValue); ).toEqual(subCaseInfo.progressValue);
expect($uploadElem).toHaveClass(subCaseInfo.presentClass); expect($uploadElem).toHaveClass(subCaseInfo.presentClass);
expect($uploadElem).not.toHaveClass(subCaseInfo.absentClass); expect($uploadElem).not.toHaveClass(subCaseInfo.absentClass);
}
}); });
it('should not trigger the global AJAX error handler', function() { it('should not trigger the global AJAX error handler', function() {
...@@ -218,13 +245,13 @@ define( ...@@ -218,13 +245,13 @@ define(
if (caseInfo.numFiles > concurrentUploadLimit) { if (caseInfo.numFiles > concurrentUploadLimit) {
it('should start a new upload', function() { it('should start a new upload', function() {
var $uploadElem = $(this.$uploadElems[concurrentUploadLimit]);
expect(getSentRequests().length).toEqual( expect(getSentRequests().length).toEqual(
concurrentUploadLimit + 1 concurrentUploadLimit + 1
); );
var $uploadElem = $(this.$uploadElems[concurrentUploadLimit]); expect(
expect($.trim($uploadElem.find('.video-detail-status').text())).toEqual( $.trim($uploadElem.find('.video-detail-status').text())
ActiveVideoUpload.STATUS_UPLOADING ).toEqual(ActiveVideoUpload.STATUS_UPLOADING);
);
expect($uploadElem).not.toHaveClass('queued'); expect($uploadElem).not.toHaveClass('queued');
}); });
} }
...@@ -246,6 +273,8 @@ define( ...@@ -246,6 +273,8 @@ define(
}); });
} }
); );
}
);
}); });
}); });
} }
......
cms/static/js/views/active_video_upload_list.js
...@@ -18,6 +18,7 @@ define( ...@@ -18,6 +18,7 @@ define(
this.listenTo(this.collection, 'add', this.addUpload); this.listenTo(this.collection, 'add', this.addUpload);
this.concurrentUploadLimit = options.concurrentUploadLimit || 0; this.concurrentUploadLimit = options.concurrentUploadLimit || 0;
this.postUrl = options.postUrl; this.postUrl = options.postUrl;
this.onFileUploadDone = options.onFileUploadDone;
if (options.uploadButton) { if (options.uploadButton) {
options.uploadButton.click(this.chooseFile.bind(this)); options.uploadButton.click(this.chooseFile.bind(this));
} }
...@@ -99,9 +100,10 @@ define( ...@@ -99,9 +100,10 @@ define(
// individual file uploads, using the extra `redirected` field to // individual file uploads, using the extra `redirected` field to
// indicate that the correct upload url has already been retrieved // indicate that the correct upload url has already been retrieved
fileUploadAdd: function(event, uploadData) { fileUploadAdd: function(event, uploadData) {
var view = this; var view = this,
model;
if (uploadData.redirected) { if (uploadData.redirected) {
var model = new ActiveVideoUpload({fileName: uploadData.files[0].name}); model = new ActiveVideoUpload({fileName: uploadData.files[0].name, videoId: uploadData.videoId});
this.collection.add(model); this.collection.add(model);
uploadData.cid = model.cid; uploadData.cid = model.cid;
uploadData.submit(); uploadData.submit();
...@@ -126,6 +128,7 @@ define( ...@@ -126,6 +128,7 @@ define(
view.$uploadForm.fileupload('add', { view.$uploadForm.fileupload('add', {
files: [uploadData.files[index]], files: [uploadData.files[index]],
url: file['upload_url'], url: file['upload_url'],
videoId: file.edx_video_id,
multipart: false, multipart: false,
global: false, // Do not trigger global AJAX error handler global: false, // Do not trigger global AJAX error handler
redirected: true redirected: true
...@@ -156,10 +159,48 @@ define( ...@@ -156,10 +159,48 @@ define(
fileUploadDone: function(event, data) { fileUploadDone: function(event, data) {
this.setStatus(data.cid, ActiveVideoUpload.STATUS_COMPLETED); this.setStatus(data.cid, ActiveVideoUpload.STATUS_COMPLETED);
this.setProgress(data.cid, 1); this.setProgress(data.cid, 1);
if (this.onFileUploadDone) {
this.onFileUploadDone(this.collection);
this.clearSuccessful();
}
}, },
fileUploadFail: function(event, data) { fileUploadFail: function(event, data) {
this.setStatus(data.cid, ActiveVideoUpload.STATUS_FAILED); this.setStatus(data.cid, ActiveVideoUpload.STATUS_FAILED);
},
removeViewAt: function(index) {
this.itemViews.splice(index);
this.$('.active-video-upload-list li').eq(index).remove();
},
// Removes the upload progress view for files that have been
// uploaded successfully. Also removes the corresponding models
// from `collection`, keeping both in sync.
clearSuccessful: function() {
var idx,
completedIndexes = [],
completedModels = [],
completedMessages = [];
this.collection.each(function(model, index) {
if (model.get('status') === ActiveVideoUpload.STATUS_COMPLETED) {
completedModels.push(model);
completedIndexes.push(index - completedIndexes.length);
completedMessages.push(model.get('fileName') +
gettext(': video upload complete.'));
}
});
for (idx = 0; idx < completedIndexes.length; idx++) {
this.removeViewAt(completedIndexes[idx]);
this.collection.remove(completedModels[idx]);
}
// Alert screen readers that the uploads were successful
if (completedMessages.length) {
completedMessages.push(gettext('Previous Uploads table has been updated.'));
if ($(window).prop('SR') !== undefined) {
$(window).prop('SR').readTexts(completedMessages);
}
}
} }
}); });
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment