add check transcript ajax for edx_video_id

cms/static/js/views/metadata.js

@@ -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: {

cms/static/js/views/modals/edit_xblock.js

@@ -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

cms/static/js/views/video/transcripts/editor.js

@@ -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;

cms/static/js/views/video/transcripts/metadata_videolist.js

@@ -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
+                );
         },
 
         /**