Andal.LND/edx-platform
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add check transcript ajax for edx_video_id

Browse Source
This commit is contained in:
muhammad-ammar
2018-04-12 17:35:02 +05:00
parent 16b0070982
commit c02955d025
12 changed files with 468 additions and 209 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
cms/djangoapps/contentstore/views/transcripts_ajax.py
View File

@@ -310,7 +310,8 @@ def check_transcripts(request):
transcripts_presence['status'] = 'Success'
try:
get_transcript_from_val(edx_video_id=item.edx_video_id, lang=u'en')
edx_video_id = clean_video_id(videos.get('edx_video_id'))
get_transcript_from_val(edx_video_id=edx_video_id, lang=u'en')
command = 'found'
except NotFoundError:
filename = 'subs_{0}.srt.sjson'.format(item.sub)
@@ -465,6 +466,9 @@ def _validate_transcripts_data(request):
for video_data in data.get('videos'):
if video_data['type'] == 'youtube':
videos['youtube'] = video_data['video']
elif video_data['type'] == 'edx_video_id':
if clean_video_id(video_data['video']):
videos['edx_video_id'] = video_data['video']
else: # do not add same html5 videos
if videos['html5'].get('video') != video_data['video']:
videos['html5'][video_data['video']] = video_data['mode']

2
cms/static/cms/js/spec/main.js
View File

@@ -242,10 +242,10 @@
'js/spec/views/metadata_edit_spec',
'js/spec/views/textbook_spec',
'js/spec/views/upload_spec',
'js/spec/video/transcripts/message_manager_spec',
'js/spec/video/transcripts/utils_spec',
'js/spec/video/transcripts/editor_spec',
'js/spec/video/transcripts/videolist_spec',
'js/spec/video/transcripts/message_manager_spec',
'js/spec/video/transcripts/file_uploader_spec',
'js/spec/models/component_template_spec',
'js/spec/models/explicit_url_spec',

5
cms/static/cms/js/spec/main_squire.js
View File

@@ -28,6 +28,7 @@
'jquery.iframe-transport': 'xmodule_js/common_static/js/vendor/jQuery-File-Upload/js/jquery.iframe-transport', // eslint-disable-line max-len
'jquery.inputnumber': 'xmodule_js/common_static/js/vendor/html5-input-polyfills/number-polyfill',
'jquery.immediateDescendents': 'xmodule_js/common_static/js/src/jquery.immediateDescendents',
'jquery.ajaxQueue': 'xmodule_js/common_static/js/vendor/jquery.ajaxQueue',
'datepair': 'xmodule_js/common_static/js/vendor/timepicker/datepair',
'date': 'xmodule_js/common_static/js/vendor/date',
'text': 'xmodule_js/common_static/js/vendor/requirejs/text',
@@ -108,6 +109,10 @@
deps: ['jquery', 'tinymce'],
exports: 'jQuery.fn.tinymce'
},
'jquery.ajaxQueue': {
deps: ['jquery'],
exports: 'jQuery.fn.ajaxQueue'
},
'datepair': {
deps: ['jquery.ui', 'jquery.timepicker']
},

105
cms/static/js/spec/video/transcripts/editor_spec.js
View File

@@ -38,7 +38,7 @@ function($, Backbone, _, Utils, Editor, MetadataView, MetadataModel, MetadataCol
field_name: 'edx_video_id',
help: 'Specifies the video ID.',
options: [],
type: MetadataModel.GENERIC_TYPE,
type: 'VideoID',
value: 'basic tab video id'
},
models = [DisplayNameEntry, VideoListEntry, VideoIDEntry],
@@ -51,7 +51,8 @@ function($, Backbone, _, Utils, Editor, MetadataView, MetadataModel, MetadataCol
object: testData,
string: JSON.stringify(testData)
},
transcripts, $container;
component_locator = 'component_locator',
transcripts, $container, waitForEvent, editor;
var waitsForDisplayName = function(collection) {
return jasmine.waitUntil(function() {
@@ -76,15 +77,109 @@ function($, Backbone, _, Utils, Editor, MetadataView, MetadataModel, MetadataCol
Utils.Storage.remove('sub');
});
describe('Events', function() {
beforeEach(function() {
Utils.command.and.callThrough();
spyOn(Backbone, 'trigger').and.callThrough();
spyOn(Editor.prototype, 'destroy').and.callThrough();
spyOn(Editor.prototype, 'handleFieldChanged').and.callThrough();
spyOn(Editor.prototype, 'getLocator').and.returnValue(component_locator);
appendSetFixtures(
sandbox({ // eslint-disable-line no-undef
class: 'wrapper-comp-settings basic_metadata_edit',
'data-metadata': JSON.stringify({video_url: VideoListEntry, edx_video_id: VideoIDEntry})
})
);
appendSetFixtures(
$('<script>',
{
id: 'metadata-videolist-entry',
type: 'text/template'
}
).text(readFixtures('video/transcripts/metadata-videolist-entry.underscore'))
);
appendSetFixtures(
$('<script>',
{
id: 'metadata-string-entry',
type: 'text/template'
}
).text(readFixtures('metadata-string-entry.underscore'))
);
editor = new Editor({
el: $('.basic_metadata_edit')
});
// reset the already triggered events
Backbone.trigger.calls.reset();
// reset the manual call to `handleFieldChanged` we made in the `editor.js::initialize`
Editor.prototype.handleFieldChanged.calls.reset();
});
waitForEvent = function(eventName) {
var triggerCallArgs;
return jasmine.waitUntil(function() {
triggerCallArgs = Backbone.trigger.calls.mostRecent().args;
return Backbone.trigger.calls.count() === 1 && triggerCallArgs[0] === eventName;
});
};
afterEach(function() {
Backbone.trigger.calls.reset();
Editor.prototype.destroy.calls.reset();
Editor.prototype.handleFieldChanged.calls.reset();
});
it('handles transcripts:basicTabFieldChanged', function(done) {
var event = 'transcripts:basicTabFieldChanged';
Backbone.trigger(event);
waitForEvent(event)
.then(function() {
expect(Editor.prototype.handleFieldChanged).toHaveBeenCalled();
expect(Utils.command).toHaveBeenCalledWith(
'check',
component_locator,
[
{ mode: 'youtube', video: '12345678901', type: 'youtube' },
{ mode: 'html5', video: 'video', type: 'mp4' },
{ mode: 'html5', video: 'video', type: 'webm' },
{ mode: 'edx_video_id', type: 'edx_video_id', video: 'basic tab video id' }
]
);
}).always(done);
});
it('handles xblock:editorModalHidden', function(done) {
var event = 'xblock:editorModalHidden';
Backbone.trigger(event);
waitForEvent(event)
.then(function() {
expect(Editor.prototype.destroy).toHaveBeenCalled();
}).always(done);
});
});
describe('Test initialization', function() {
beforeEach(function() {
spyOn(MetadataView, 'Editor');
spyOn(Editor.prototype, 'handleFieldChanged');
transcripts = new Editor({
el: $container
});
});
afterEach(function() {
MetadataView.Editor.calls.reset();
Editor.prototype.handleFieldChanged.calls.reset();
});
$.each(metadataDict, function(index, val) {
it('toModels with argument as ' + index, function() {
expect(transcripts.toModels(val)).toEqual(models);
@@ -159,6 +254,7 @@ function($, Backbone, _, Utils, Editor, MetadataView, MetadataModel, MetadataCol
beforeEach(function() {
spyOn(MetadataView, 'Editor');
spyOn(Editor.prototype, 'handleFieldChanged');
transcripts = new Editor({
el: $container
@@ -182,6 +278,11 @@ function($, Backbone, _, Utils, Editor, MetadataView, MetadataModel, MetadataCol
);
});
afterEach(function() {
MetadataView.Editor.calls.reset();
Editor.prototype.handleFieldChanged.calls.reset();
});
describe('Test Advanced to Basic synchronization', function() {
it('Correct data', function(done) {
transcripts.syncBasicTab(metadataCollection, metadataView);

325
cms/static/js/spec/video/transcripts/videolist_spec.js
View File

@@ -1,13 +1,15 @@
define(
[
'jquery', 'underscore',
'jquery', 'underscore', 'backbone',
'edx-ui-toolkit/js/utils/spec-helpers/ajax-helpers',
'js/views/video/transcripts/utils',
'js/views/video/transcripts/editor',
'js/views/video/transcripts/metadata_videolist', 'js/models/metadata',
'js/views/abstract_editor',
'js/views/video/transcripts/message_manager',
'xmodule'
],
function($, _, AjaxHelpers, Utils, VideoList, MetadataModel, AbstractEditor) {
function($, _, Backbone, AjaxHelpers, Utils, Editor, VideoList, MetadataModel, AbstractEditor, MessageManager) {
'use strict';
describe('CMS.Views.Metadata.VideoList', function() {
var videoListEntryTemplate = readFixtures(
@@ -46,12 +48,23 @@ function($, _, AjaxHelpers, Utils, VideoList, MetadataModel, AbstractEditor) {
'video.webm'
]
},
videoIDStub = {
default_value: 'test default value',
display_name: 'Video ID',
explicitly_set: true,
field_name: 'edx_video_id',
help: 'Specifies the video ID.',
options: [],
type: 'VideoID',
value: 'advanced tab video id'
},
response = JSON.stringify({
command: 'found',
status: 'Success',
subs: 'video_id'
}),
MessageManager, messenger;
waitForEvent,
createVideoListView;
var createMockAjaxServer = function() {
@@ -67,7 +80,7 @@ function($, _, AjaxHelpers, Utils, VideoList, MetadataModel, AbstractEditor) {
};
beforeEach(function() {
var tpl = sandbox({
var tpl = sandbox({ // eslint-disable-line no-undef
class: 'component',
'data-locator': component_locator
});
@@ -86,24 +99,16 @@ function($, _, AjaxHelpers, Utils, VideoList, MetadataModel, AbstractEditor) {
// create mock server
this.mockServer = createMockAjaxServer();
spyOn(Backbone, 'trigger').and.callThrough();
spyOn(Utils, 'command').and.callThrough();
spyOn(abstractEditor, 'initialize').and.callThrough();
spyOn(abstractEditor, 'render').and.callThrough();
spyOn(console, 'error');
messenger = jasmine.createSpyObj('MessageManager', [
'initialize', 'render', 'showError', 'hideError'
]);
$.each(messenger, function(index, method) {
method.and.returnValue(messenger);
});
MessageManager = function() {
messenger.initialize();
return messenger;
};
spyOn(MessageManager.prototype, 'initialize').and.callThrough();
spyOn(MessageManager.prototype, 'render').and.callThrough();
spyOn(MessageManager.prototype, 'showError').and.callThrough();
spyOn(MessageManager.prototype, 'hideError').and.callThrough();
jasmine.addMatchers({
assertValueInView: function() {
@@ -154,13 +159,49 @@ function($, _, AjaxHelpers, Utils, VideoList, MetadataModel, AbstractEditor) {
this.mockServer.restore();
});
var createVideoListView = function() {
var model = new MetadataModel(modelStub);
return new VideoList({
waitForEvent = function() {
var triggerCallArgs;
return jasmine.waitUntil(function() {
triggerCallArgs = Backbone.trigger.calls.mostRecent().args;
return Backbone.trigger.calls.count() === 1 &&
triggerCallArgs[0] === 'transcripts:basicTabFieldChanged';
});
};
createVideoListView = function(mockServer) {
var $container, editor, model, videoListView;
appendSetFixtures(
sandbox({ // eslint-disable-line no-undef
class: 'wrapper-comp-settings basic_metadata_edit',
'data-metadata': JSON.stringify({video_url: modelStub, edx_video_id: videoIDStub})
})
);
$container = $('.basic_metadata_edit');
editor = new Editor({
el: $container
});
spyOn(editor, 'getLocator').and.returnValue(component_locator);
// reset
Backbone.trigger.calls.reset();
mockServer.requests.length = 0;
model = new MetadataModel(modelStub);
videoListView = new VideoList({
el: $('.component'),
model: model,
MessageManager: MessageManager
});
waitForEvent()
.then(function() {
return true;
});
return videoListView;
};
var waitsForResponse = function(mockServer) {
@@ -174,36 +215,43 @@ function($, _, AjaxHelpers, Utils, VideoList, MetadataModel, AbstractEditor) {
it('Initialize', function(done) {
var view = createVideoListView();
var view = createVideoListView(this.mockServer);
waitsForResponse(this.mockServer)
.then(function() {
expect(abstractEditor.initialize).toHaveBeenCalled();
expect(messenger.initialize).toHaveBeenCalled();
expect(MessageManager.prototype.initialize).toHaveBeenCalled();
expect(view.component_locator).toBe(component_locator);
expect(view.$el).toHandle('input');
}).always(done);
});
describe('Render', function() {
var assertToHaveBeenRendered = function(videoList) {
expect(abstractEditor.render).toHaveBeenCalled();
expect(Utils.command).toHaveBeenCalledWith(
'check',
component_locator,
videoList
);
var assertToHaveBeenRendered = function(expectedVideoList) {
var commandCallArgs = Utils.command.calls.mostRecent().args,
actualVideoList = commandCallArgs[2].slice(0, expectedVideoList.length);
expect(messenger.render).toHaveBeenCalled();
expect(commandCallArgs[0]).toEqual('check');
expect(commandCallArgs[1]).toEqual(component_locator);
_.each([0, 1, 2], function(index) {
expect(_.isEqual(expectedVideoList[index], actualVideoList[index])).toBeTruthy();
});
expect(abstractEditor.render).toHaveBeenCalled();
expect(MessageManager.prototype.render).toHaveBeenCalled();
},
resetSpies = function(mockServer) {
abstractEditor.render.calls.reset();
Utils.command.calls.reset();
messenger.render.calls.reset();
mockServer.requests.length = 0;
MessageManager.prototype.render.calls.reset();
mockServer.requests.length = 0; // eslint-disable-line no-param-reassign
};
afterEach(function() {
Backbone.trigger('xblock:editorModalHidden');
});
it('is rendered in correct way', function(done) {
createVideoListView();
var view = createVideoListView(this.mockServer);
waitsForResponse(this.mockServer)
.then(function() {
assertToHaveBeenRendered(videoList);
@@ -212,7 +260,7 @@ function($, _, AjaxHelpers, Utils, VideoList, MetadataModel, AbstractEditor) {
});
it('is rendered with opened extra videos bar', function(done) {
var view = createVideoListView();
var view = createVideoListView(this.mockServer);
var videoListLength = [
{
mode: 'youtube',
@@ -233,8 +281,8 @@ function($, _, AjaxHelpers, Utils, VideoList, MetadataModel, AbstractEditor) {
}
];
spyOn(view, 'getVideoObjectsList').and.returnValue(videoListLength);
spyOn(view, 'openExtraVideosBar');
spyOn(VideoList.prototype, 'getVideoObjectsList').and.returnValue(videoListLength);
spyOn(VideoList.prototype, 'openExtraVideosBar');
resetSpies(this.mockServer);
view.render();
@@ -260,7 +308,7 @@ function($, _, AjaxHelpers, Utils, VideoList, MetadataModel, AbstractEditor) {
});
it('is rendered without opened extra videos bar', function(done) {
var view = createVideoListView(),
var view = createVideoListView(this.mockServer),
videoList = [
{
mode: 'youtube',
@@ -269,8 +317,8 @@ function($, _, AjaxHelpers, Utils, VideoList, MetadataModel, AbstractEditor) {
}
];
spyOn(view, 'getVideoObjectsList').and.returnValue(videoList);
spyOn(view, 'closeExtraVideosBar');
spyOn(VideoList.prototype, 'getVideoObjectsList').and.returnValue(videoList);
spyOn(VideoList.prototype, 'closeExtraVideosBar');
resetSpies(this.mockServer);
view.render();
@@ -286,7 +334,7 @@ function($, _, AjaxHelpers, Utils, VideoList, MetadataModel, AbstractEditor) {
describe('isUniqOtherVideos', function() {
it('Unique data - return true', function(done) {
var view = createVideoListView(),
var view = createVideoListView(this.mockServer),
data = videoList.concat([{
mode: 'html5',
type: 'other',
@@ -302,7 +350,7 @@ function($, _, AjaxHelpers, Utils, VideoList, MetadataModel, AbstractEditor) {
});
it('Not Unique data - return false', function(done) {
var view = createVideoListView(),
var view = createVideoListView(this.mockServer),
data = [
{
mode: 'html5',
@@ -342,7 +390,7 @@ function($, _, AjaxHelpers, Utils, VideoList, MetadataModel, AbstractEditor) {
describe('isUniqVideoTypes', function() {
it('Unique data - return true', function(done) {
var view = createVideoListView(),
var view = createVideoListView(this.mockServer),
data = videoList;
waitsForResponse(this.mockServer)
@@ -354,7 +402,7 @@ function($, _, AjaxHelpers, Utils, VideoList, MetadataModel, AbstractEditor) {
});
it('Not Unique data - return false', function(done) {
var view = createVideoListView(),
var view = createVideoListView(this.mockServer),
data = [
{
mode: 'html5',
@@ -389,7 +437,7 @@ function($, _, AjaxHelpers, Utils, VideoList, MetadataModel, AbstractEditor) {
describe('checkIsUniqVideoTypes', function() {
it('Error is shown', function(done) {
var view = createVideoListView(),
var view = createVideoListView(this.mockServer),
data = [
{
mode: 'html5',
@@ -417,14 +465,14 @@ function($, _, AjaxHelpers, Utils, VideoList, MetadataModel, AbstractEditor) {
.then(function() {
var result = view.checkIsUniqVideoTypes(data);
expect(messenger.showError).toHaveBeenCalled();
expect(MessageManager.prototype.showError).toHaveBeenCalled();
expect(result).toBe(false);
})
.always(done);
});
it('All works okay if arguments are not passed', function(done) {
var view = createVideoListView();
var view = createVideoListView(this.mockServer);
spyOn(view, 'getVideoObjectsList').and.returnValue(videoList);
waitsForResponse(this.mockServer)
@@ -432,7 +480,7 @@ function($, _, AjaxHelpers, Utils, VideoList, MetadataModel, AbstractEditor) {
var result = view.checkIsUniqVideoTypes();
expect(view.getVideoObjectsList).toHaveBeenCalled();
expect(messenger.showError).not.toHaveBeenCalled();
expect(MessageManager.prototype.showError).not.toHaveBeenCalled();
expect(result).toBe(true);
})
.always(done);
@@ -441,7 +489,7 @@ function($, _, AjaxHelpers, Utils, VideoList, MetadataModel, AbstractEditor) {
describe('checkValidity', function() {
it('Error message is shown', function(done) {
var view = createVideoListView();
var view = createVideoListView(this.mockServer);
spyOn(view, 'checkIsUniqVideoTypes').and.returnValue(true);
waitsForResponse(this.mockServer)
@@ -449,7 +497,7 @@ function($, _, AjaxHelpers, Utils, VideoList, MetadataModel, AbstractEditor) {
var data = {mode: 'incorrect'},
result = view.checkValidity(data, true);
expect(messenger.showError).toHaveBeenCalled();
expect(MessageManager.prototype.showError).toHaveBeenCalled();
expect(view.checkIsUniqVideoTypes).toHaveBeenCalled();
expect(result).toBe(false);
})
@@ -457,7 +505,7 @@ function($, _, AjaxHelpers, Utils, VideoList, MetadataModel, AbstractEditor) {
});
it('Error message is shown when flag is not passed', function(done) {
var view = createVideoListView();
var view = createVideoListView(this.mockServer);
spyOn(view, 'checkIsUniqVideoTypes').and.returnValue(true);
waitsForResponse(this.mockServer)
@@ -465,14 +513,14 @@ function($, _, AjaxHelpers, Utils, VideoList, MetadataModel, AbstractEditor) {
var data = {mode: 'incorrect'},
result = view.checkValidity(data);
expect(messenger.showError).not.toHaveBeenCalled();
expect(MessageManager.prototype.showError).not.toHaveBeenCalled();
expect(view.checkIsUniqVideoTypes).toHaveBeenCalled();
expect(result).toBe(true);
}).always(done);
});
it('All works okay if correct data is passed', function(done) {
var view = createVideoListView();
var view = createVideoListView(this.mockServer);
spyOn(view, 'checkIsUniqVideoTypes').and.returnValue(true);
waitsForResponse(this.mockServer)
@@ -480,7 +528,7 @@ function($, _, AjaxHelpers, Utils, VideoList, MetadataModel, AbstractEditor) {
var data = videoList,
result = view.checkValidity(data);
expect(messenger.showError).not.toHaveBeenCalled();
expect(MessageManager.prototype.showError).not.toHaveBeenCalled();
expect(view.checkIsUniqVideoTypes).toHaveBeenCalled();
expect(result).toBe(true);
})
@@ -489,7 +537,7 @@ function($, _, AjaxHelpers, Utils, VideoList, MetadataModel, AbstractEditor) {
});
it('openExtraVideosBar', function(done) {
var view = createVideoListView();
var view = createVideoListView(this.mockServer);
waitsForResponse(this.mockServer)
.then(function() {
view.$extraVideosBar.removeClass('is-visible');
@@ -500,7 +548,7 @@ function($, _, AjaxHelpers, Utils, VideoList, MetadataModel, AbstractEditor) {
});
it('closeExtraVideosBar', function(done) {
var view = createVideoListView();
var view = createVideoListView(this.mockServer);
waitsForResponse(this.mockServer)
.then(function() {
view.$extraVideosBar.addClass('is-visible');
@@ -512,7 +560,7 @@ function($, _, AjaxHelpers, Utils, VideoList, MetadataModel, AbstractEditor) {
});
it('toggleExtraVideosBar', function(done) {
var view = createVideoListView();
var view = createVideoListView(this.mockServer);
waitsForResponse(this.mockServer)
.then(function() {
view.$extraVideosBar.addClass('is-visible');
@@ -525,7 +573,7 @@ function($, _, AjaxHelpers, Utils, VideoList, MetadataModel, AbstractEditor) {
});
it('getValueFromEditor', function(done) {
var view = createVideoListView();
var view = createVideoListView(this.mockServer);
waitsForResponse(this.mockServer)
.then(function() {
expect(view).assertValueInView(modelStub.value);
@@ -534,7 +582,7 @@ function($, _, AjaxHelpers, Utils, VideoList, MetadataModel, AbstractEditor) {
});
it('setValueInEditor', function(done) {
var view = createVideoListView();
var view = createVideoListView(this.mockServer);
waitsForResponse(this.mockServer)
.then(function() {
expect(view).assertCanUpdateView(['abc.mp4']);
@@ -543,7 +591,7 @@ function($, _, AjaxHelpers, Utils, VideoList, MetadataModel, AbstractEditor) {
});
it('getVideoObjectsList', function(done) {
var view = createVideoListView();
var view = createVideoListView(this.mockServer);
var value = [
{
mode: 'youtube',
@@ -577,7 +625,7 @@ function($, _, AjaxHelpers, Utils, VideoList, MetadataModel, AbstractEditor) {
describe('getPlaceholders', function() {
it('All works okay if empty values are passed', function(done) {
var view = createVideoListView(),
var view = createVideoListView(this.mockServer),
defaultPlaceholders = view.placeholders;
waitsForResponse(this.mockServer)
@@ -593,7 +641,7 @@ function($, _, AjaxHelpers, Utils, VideoList, MetadataModel, AbstractEditor) {
it('On filling less than 3 fields, remaining fields should have ' +
'placeholders for video types that were not filled yet',
function(done) {
var view = createVideoListView(),
var view = createVideoListView(this.mockServer),
defaultPlaceholders = view.placeholders;
var dataDict = {
youtube: {
@@ -640,7 +688,7 @@ function($, _, AjaxHelpers, Utils, VideoList, MetadataModel, AbstractEditor) {
var eventObject;
var resetSpies = function(view) {
messenger.hideError.calls.reset();
MessageManager.prototype.hideError.calls.reset();
view.updateModel.calls.reset();
view.closeExtraVideosBar.calls.reset();
};
@@ -660,100 +708,77 @@ function($, _, AjaxHelpers, Utils, VideoList, MetadataModel, AbstractEditor) {
resetSpies(view);
};
it('Field has invalid value - nothing should happen',
function(done) {
var view = createVideoListView();
setUp(view);
$.fn.hasClass.and.returnValue(false);
view.checkValidity.and.returnValue(false);
var videoListView = function() {
return new VideoList({
el: $('.component'),
model: new MetadataModel(modelStub),
MessageManager: MessageManager
});
};
waitsForResponse(this.mockServer)
.then(function() {
view.inputHandler(eventObject);
expect(messenger.hideError).not.toHaveBeenCalled();
expect(view.updateModel).not.toHaveBeenCalled();
expect(view.closeExtraVideosBar).not.toHaveBeenCalled();
expect($.fn.prop).toHaveBeenCalledWith(
'disabled', true
);
expect($.fn.addClass).toHaveBeenCalledWith(
'is-disabled'
);
})
.always(done);
}
);
beforeEach(function() {
MessageManager.prototype.render.and.callFake(function() { return true; });
});
it('Main field has invalid value - extra Videos Bar is closed',
function(done) {
var view = createVideoListView();
setUp(view);
$.fn.hasClass.and.returnValue(true);
view.checkValidity.and.returnValue(false);
afterEach(function() {
MessageManager.prototype.render.and.callThrough();
});
waitsForResponse(this.mockServer)
.then(function() {
view.inputHandler(eventObject);
expect(messenger.hideError).not.toHaveBeenCalled();
expect(view.updateModel).not.toHaveBeenCalled();
expect(view.closeExtraVideosBar).toHaveBeenCalled();
expect($.fn.prop).toHaveBeenCalledWith(
'disabled', true
);
expect($.fn.addClass).toHaveBeenCalledWith(
'is-disabled'
);
})
.always(done);
}
);
it('Field has invalid value - nothing should happen', function() {
var view = videoListView();
setUp(view);
$.fn.hasClass.and.returnValue(false);
view.checkValidity.and.returnValue(false);
it('Model is updated if value is valid',
function(done) {
var view = createVideoListView();
setUp(view);
view.checkValidity.and.returnValue(true);
_.isEqual.and.returnValue(false);
view.inputHandler(eventObject);
expect(MessageManager.prototype.hideError).not.toHaveBeenCalled();
expect(view.updateModel).not.toHaveBeenCalled();
expect(view.closeExtraVideosBar).not.toHaveBeenCalled();
expect($.fn.prop).toHaveBeenCalledWith('disabled', true);
expect($.fn.addClass).toHaveBeenCalledWith('is-disabled');
});
waitsForResponse(this.mockServer)
.then(function() {
view.inputHandler(eventObject);
expect(messenger.hideError).not.toHaveBeenCalled();
expect(view.updateModel).toHaveBeenCalled();
expect(view.closeExtraVideosBar).not.toHaveBeenCalled();
expect($.fn.prop).toHaveBeenCalledWith(
'disabled', false
);
expect($.fn.removeClass).toHaveBeenCalledWith(
'is-disabled'
);
})
.always(done);
}
);
it('Main field has invalid value - extra Videos Bar is closed', function() {
var view = videoListView();
setUp(view);
$.fn.hasClass.and.returnValue(true);
view.checkValidity.and.returnValue(false);
it('Corner case: Error is hided',
function(done) {
var view = createVideoListView();
setUp(view);
view.checkValidity.and.returnValue(true);
_.isEqual.and.returnValue(true);
waitsForResponse(this.mockServer)
.then(function() {
view.inputHandler(eventObject);
expect(messenger.hideError).toHaveBeenCalled();
expect(view.updateModel).not.toHaveBeenCalled();
expect(view.closeExtraVideosBar).not.toHaveBeenCalled();
expect($.fn.prop).toHaveBeenCalledWith(
'disabled', false
);
expect($.fn.removeClass).toHaveBeenCalledWith(
'is-disabled'
);
})
.always(done);
}
);
view.inputHandler(eventObject);
expect(MessageManager.prototype.hideError).not.toHaveBeenCalled();
expect(view.updateModel).not.toHaveBeenCalled();
expect(view.closeExtraVideosBar).toHaveBeenCalled();
expect($.fn.prop).toHaveBeenCalledWith('disabled', true);
expect($.fn.addClass).toHaveBeenCalledWith('is-disabled');
});
it('Model is updated if value is valid', function() {
var view = videoListView();
setUp(view);
view.checkValidity.and.returnValue(true);
_.isEqual.and.returnValue(false);
view.inputHandler(eventObject);
expect(MessageManager.prototype.hideError).not.toHaveBeenCalled();
expect(view.updateModel).toHaveBeenCalled();
expect(view.closeExtraVideosBar).not.toHaveBeenCalled();
expect($.fn.prop).toHaveBeenCalledWith('disabled', false);
expect($.fn.removeClass).toHaveBeenCalledWith('is-disabled');
});
it('Corner case: Error is hided', function() {
var view = videoListView();
setUp(view);
view.checkValidity.and.returnValue(true);
_.isEqual.and.returnValue(true);
view.inputHandler(eventObject);
expect(MessageManager.prototype.hideError).toHaveBeenCalled();
expect(view.updateModel).not.toHaveBeenCalled();
expect(view.closeExtraVideosBar).not.toHaveBeenCalled();
expect($.fn.prop).toHaveBeenCalledWith('disabled', false);
expect($.fn.removeClass).toHaveBeenCalledWith('is-disabled');
});
});
});
});

50
cms/static/js/spec/views/metadata_edit_spec.js
View File

@@ -3,8 +3,9 @@
* DS207: Consider shorter variations of null checks
* Full docs: https://github.com/decaffeinate/decaffeinate/blob/master/docs/suggestions.md
*/
define(["js/models/metadata", "js/collections/metadata", "js/views/metadata", "cms/js/main"],
function(MetadataModel, MetadataCollection, MetadataView, main) {
define(["underscore", "js/models/metadata", "js/collections/metadata", "js/views/metadata", "cms/js/main",
"js/views/video/transcripts/utils", 'edx-ui-toolkit/js/utils/spec-helpers/ajax-helpers'],
function(_, MetadataModel, MetadataCollection, MetadataView, main, Utils, AjaxHelpers) {
const verifyInputType = function(input, expectedType) {
// Some browsers (e.g. FireFox) do not support the "number"
// input type. We can accept a "text" input instead
@@ -43,6 +44,8 @@ function(MetadataModel, MetadataCollection, MetadataView, main) {
value: "Word cloud"
};
const videoIDEntry = _.extend({}, genericEntry, {field_name: "edx_video_id", type: "VideoID"});
const selectEntry = {
default_value: "answered",
display_name: "Show Answer",
@@ -271,6 +274,49 @@ function(MetadataModel, MetadataCollection, MetadataView, main) {
});
});
describe("MetadataView.VideoID", function() {
var waitForMock;
waitForMock = function(mock) {
return jasmine.waitUntil(function() {
return mock.calls.count() === 1;
});
};
beforeEach(function() {
const model = new MetadataModel(videoIDEntry);
this.view = new MetadataView.VideoID({model});
spyOn(Backbone, 'trigger');
});
it("triggers correct event on input change", function(done) {
// change value and trigger input event
this.view.$el.find('input').val("1234-5678-90").trigger('input');
waitForMock(Backbone.trigger)
.then(function() {
expect(Backbone.trigger).toHaveBeenCalledWith('transcripts:basicTabFieldChanged');
})
.always(done);
});
it("triggers correct event on clear", function(done) {
this.view.clear();
waitForMock(Backbone.trigger)
.then(function() {
expect(Backbone.trigger).toHaveBeenCalledWith('transcripts:basicTabFieldChanged');
})
.always(done);
});
it("constructs correct data", function() {
expect(
this.view.getData()
).toEqual(
[{mode: 'edx_video_id', type: 'edx_video_id', video: this.view.getValueFromEditor()}]
);
});
});
describe("MetadataView.Option is an option input type with clear functionality", function() {
beforeEach(function() {
const model = new MetadataModel(selectEntry);

10
cms/static/js/spec/views/modals/edit_xblock_spec.js
View File

@@ -1,6 +1,7 @@
define(['jquery', 'underscore', 'edx-ui-toolkit/js/utils/spec-helpers/ajax-helpers', 'js/spec_helpers/edit_helpers',
'js/views/modals/edit_xblock', 'js/models/xblock_info'],
function($, _, AjaxHelpers, EditHelpers, EditXBlockModal, XBlockInfo) {
define(['jquery', 'underscore', 'backbone', 'edx-ui-toolkit/js/utils/spec-helpers/ajax-helpers',
'js/spec_helpers/edit_helpers', 'js/views/modals/edit_xblock', 'js/models/xblock_info'],
function($, _, Backbone, AjaxHelpers, EditHelpers, EditXBlockModal, XBlockInfo) {
'use strict';
describe('EditXBlockModal', function() {
var model, modal, showModal;
@@ -30,6 +31,7 @@ define(['jquery', 'underscore', 'edx-ui-toolkit/js/utils/spec-helpers/ajax-helpe
beforeEach(function() {
EditHelpers.installMockXBlock();
spyOn(Backbone, 'trigger').and.callThrough();
});
afterEach(function() {
@@ -74,6 +76,7 @@ define(['jquery', 'underscore', 'edx-ui-toolkit/js/utils/spec-helpers/ajax-helpe
modal.editorView.notifyRuntime('save', {state: 'end'});
expect(EditHelpers.isShowingModal(modal)).toBeFalsy();
expect(refreshed).toBeTruthy();
expect(Backbone.trigger).toHaveBeenCalledWith('xblock:editorModalHidden');
});
it('hides itself and does not refresh after cancel notification', function() {
@@ -86,6 +89,7 @@ define(['jquery', 'underscore', 'edx-ui-toolkit/js/utils/spec-helpers/ajax-helpe
modal.editorView.notifyRuntime('cancel');
expect(EditHelpers.isShowingModal(modal)).toBeFalsy();
expect(refreshed).toBeFalsy();
expect(Backbone.trigger).toHaveBeenCalledWith('xblock:editorModalHidden');
});
describe('Custom Buttons', function() {

38
cms/static/js/views/metadata.js
View File

@@ -1,16 +1,20 @@
define(
[
'backbone',
'js/views/baseview', 'underscore', 'js/models/metadata', 'js/views/abstract_editor',
'js/models/uploads', 'js/views/uploads',
'js/models/license', 'js/views/license',
'js/views/video/transcripts/metadata_videolist',
'js/views/video/translations_editor'
],
function(BaseView, _, MetadataModel, AbstractEditor, FileUpload, UploadDialog,
function(Backbone, BaseView, _, MetadataModel, AbstractEditor, FileUpload, UploadDialog,
LicenseModel, LicenseView, VideoList, VideoTranslations) {
'use strict';
var Metadata = {};
Metadata.Editor = BaseView.extend({
// Store rendered view references
views: {},
// Model is CMS.Models.MetadataCollection,
initialize: function() {
@@ -42,10 +46,10 @@ function(BaseView, _, MetadataModel, AbstractEditor, FileUpload, UploadDialog,
}
if (_.isFunction(Metadata[type])) {
new Metadata[type](data);
self.views[data.model.getFieldName()] = new Metadata[type](data);
} else {
// Everything else is treated as GENERIC_TYPE, which uses String editor.
new Metadata.String(data);
self.views[data.model.getFieldName()] = new Metadata.String(data);
}
});
},
@@ -120,6 +124,34 @@ function(BaseView, _, MetadataModel, AbstractEditor, FileUpload, UploadDialog,
}
});
Metadata.VideoID = Metadata.String.extend({
// Delay between check_transcript requests
requestDelay: 300,
initialize: function() {
Metadata.String.prototype.initialize.apply(this, arguments);
this.$el.on(
'input',
'input',
_.debounce(_.bind(this.inputChange, this), this.requestDelay)
);
},
clear: function() {
this.model.setValue('');
this.inputChange();
},
getData: function() {
return [{mode: 'edx_video_id', type: 'edx_video_id', video: this.getValueFromEditor()}];
},
inputChange: function() {
Backbone.trigger('transcripts:basicTabFieldChanged');
}
});
Metadata.Number = AbstractEditor.extend({
events: {

9
cms/static/js/views/modals/edit_xblock.js
View File

@@ -3,9 +3,9 @@
* It is invoked using the edit method which is passed an existing rendered xblock,
* and upon save an optional refresh function can be invoked to update the display.
*/
define(['jquery', 'underscore', 'gettext', 'js/views/modals/base_modal', 'common/js/components/utils/view_utils',
'js/views/utils/xblock_utils', 'js/views/xblock_editor'],
function($, _, gettext, BaseModal, ViewUtils, XBlockViewUtils, XBlockEditorView) {
define(['jquery', 'underscore', 'backbone', 'gettext', 'js/views/modals/base_modal',
'common/js/components/utils/view_utils', 'js/views/utils/xblock_utils', 'js/views/xblock_editor'],
function($, _, Backbone, gettext, BaseModal, ViewUtils, XBlockViewUtils, XBlockEditorView) {
'use strict';
var EditXBlockModal = BaseModal.extend({
@@ -181,6 +181,9 @@ define(['jquery', 'underscore', 'gettext', 'js/views/modals/base_modal', 'common
},
hide: function() {
// Notify child views to stop listening events
Backbone.trigger('xblock:editorModalHidden');
BaseModal.prototype.hide.call(this);
// Notify the runtime that the modal has been hidden

47
cms/static/js/views/video/transcripts/editor.js
View File

@@ -12,7 +12,6 @@ function($, Backbone, _, Utils, MetadataView, MetadataCollection) {
initialize: function() {
// prepare data for MetadataView.Editor
var metadata = this.$el.data('metadata'),
models = this.toModels(metadata);
@@ -26,6 +25,20 @@ function($, Backbone, _, Utils, MetadataView, MetadataCollection) {
// Listen to edx_video_id update
this.listenTo(Backbone, 'transcripts:basicTabUpdateEdxVideoId', this.handleUpdateEdxVideoId);
// Listen to `video_url` and `edx_video_id` updates
this.listenTo(Backbone, 'transcripts:basicTabFieldChanged', this.handleFieldChanged);
// Listen to modal hidden event
this.listenTo(Backbone, 'xblock:editorModalHidden', this.destroy);
// Now `video_url` and `edx_video_id` viwes are rendered so
// send a `check_transcript` request to get transctip status
// This is needed because we need to update the transcrript status
// when basic tabs renders. We trigger `basicTabFieldChanged` event
// in `video_url` field but that event triggers before event is
// actually binded
this.handleFieldChanged();
},
/**
@@ -196,8 +209,38 @@ function($, Backbone, _, Utils, MetadataView, MetadataCollection) {
handleUpdateEdxVideoId: function(edxVideoId) {
var edxVideoIdField = Utils.getField(this.collection, 'edx_video_id');
edxVideoIdField.setValue(edxVideoId);
}
},
getLocator: function() {
return this.$el.closest('[data-locator]').data('locator');
},
/**
* Event handler for `transcripts:basicTabFieldChanged` event.
*/
handleFieldChanged: function() {
var views = this.settingsView.views,
videoURLSView = views.video_url,
edxVideoIdView = views.edx_video_id,
edxVideoIdData = edxVideoIdView.getData(),
videoURLsData = videoURLSView.getVideoObjectsList(),
data = videoURLsData.concat(edxVideoIdData),
locator = this.getLocator();
Utils.command('check', locator, data)
.done(function(response) {
videoURLSView.updateOnCheckTranscriptSuccess(videoURLsData, response);
})
.fail(function(response) {
videoURLSView.showServerError(response);
});
},
destroy: function() {
this.stopListening();
this.undelegateEvents();
this.$el.empty();
}
});
return Editor;

74
cms/static/js/views/video/transcripts/metadata_videolist.js
View File

@@ -56,55 +56,45 @@ function($, Backbone, _, AbstractEditor, Utils, MessageManager) {
AbstractEditor.prototype.render
.apply(this, arguments);
var self = this,
component_locator = this.$el.closest('[data-locator]')
.data('locator'),
videoList = this.getVideoObjectsList(),
showServerError = function(response) {
var errorMessage = response.status ||
gettext('Error: Connection with server failed.');
self.messenger
.render('not_found')
.showError(
errorMessage,
true // hide buttons
);
};
this.$extraVideosBar = this.$el.find('.videolist-extra-videos');
if (videoList.length === 0) {
this.messenger
.render('not_found')
.showError(
gettext('No sources'),
true // hide buttons
);
// Check current state of Timed Transcripts.
Backbone.trigger('transcripts:basicTabFieldChanged');
},
return void(0);
updateOnCheckTranscriptSuccess: function(videoList, response) {
var params = response,
len = videoList.length,
mode = (len === 1) ? videoList[0].mode : false;
// If there are more than 1 video or just html5 source is
// passed, video sources box should expand
if (len > 1 || mode === 'html5') {
this.openExtraVideosBar();
} else {
this.closeExtraVideosBar();
}
// Check current state of Timed Transcripts.
Utils.command('check', component_locator, videoList)
.done(function(resp) {
var params = resp,
len = videoList.length,
mode = (len === 1) ? videoList[0].mode : false;
this.messenger.render(response.command, params);
this.checkIsUniqVideoTypes();
},
// If there are more than 1 video or just html5 source is
// passed, video sources box should expand
if (len > 1 || mode === 'html5') {
self.openExtraVideosBar();
} else {
self.closeExtraVideosBar();
}
/**
* Updates the message with error.
*/
showServerError: function(response) {
var errorMessage = gettext('Error: Connection with server failed.');
self.messenger.render(resp.command, params);
self.checkIsUniqVideoTypes();
})
.fail(showServerError);
if (response.responseJSON !== undefined) {
errorMessage = response.responseJSON.status;
}
this.messenger
.render('not_found')
.showError(
errorMessage,
true // hide buttons
);
},
/**

6
common/lib/xmodule/xmodule/video_module/video_module.py
View File

@@ -614,6 +614,12 @@ class VideoDescriptor(VideoFields, VideoTranscriptsMixin, VideoStudioViewHandler
editable_fields['transcripts']['languages'] = languages
editable_fields['transcripts']['type'] = 'VideoTranslations'
# We need to send ajax requests to show transcript status
# whenever edx_video_id changes on frontend. Thats why we
# are changing type to `VideoID` so that a specific
# Backbonjs view can handle it.
editable_fields['edx_video_id']['type'] = 'VideoID'
# construct transcripts info and also find if `en` subs exist
transcripts_info = self.get_transcripts_info()
possible_sub_ids = [self.sub, self.youtube_id_1_0] + get_html5_ids(self.html5_sources)