From c02955d0254679ead8a515cf516cf985df8af8b6 Mon Sep 17 00:00:00 2001
From: muhammad-ammar <mammar@gmail.com>
Date: Thu, 12 Apr 2018 17:35:02 +0500
Subject: [PATCH] add check transcript ajax for edx_video_id

---
 .../contentstore/views/transcripts_ajax.py    |   6 +-
 cms/static/cms/js/spec/main.js                |   2 +-
 cms/static/cms/js/spec/main_squire.js         |   5 +
 .../js/spec/video/transcripts/editor_spec.js  | 105 +++++-
 .../spec/video/transcripts/videolist_spec.js  | 325 ++++++++++--------
 .../js/spec/views/metadata_edit_spec.js       |  50 ++-
 .../js/spec/views/modals/edit_xblock_spec.js  |  10 +-
 cms/static/js/views/metadata.js               |  38 +-
 cms/static/js/views/modals/edit_xblock.js     |   9 +-
 .../js/views/video/transcripts/editor.js      |  47 ++-
 .../video/transcripts/metadata_videolist.js   |  74 ++--
 .../xmodule/video_module/video_module.py      |   6 +
 12 files changed, 468 insertions(+), 209 deletions(-)

diff --git a/cms/djangoapps/contentstore/views/transcripts_ajax.py b/cms/djangoapps/contentstore/views/transcripts_ajax.py
index e5501d46e2..ae1c856231 100644
--- a/cms/djangoapps/contentstore/views/transcripts_ajax.py
+++ b/cms/djangoapps/contentstore/views/transcripts_ajax.py
@@ -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']
diff --git a/cms/static/cms/js/spec/main.js b/cms/static/cms/js/spec/main.js
index 1b3344f8d7..eb0d03c706 100644
--- a/cms/static/cms/js/spec/main.js
+++ b/cms/static/cms/js/spec/main.js
@@ -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',
diff --git a/cms/static/cms/js/spec/main_squire.js b/cms/static/cms/js/spec/main_squire.js
index 3ae2b2bf32..936aa39055 100644
--- a/cms/static/cms/js/spec/main_squire.js
+++ b/cms/static/cms/js/spec/main_squire.js
@@ -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']
             },
diff --git a/cms/static/js/spec/video/transcripts/editor_spec.js b/cms/static/js/spec/video/transcripts/editor_spec.js
index 4d9fefbdaf..71536f3792 100644
--- a/cms/static/js/spec/video/transcripts/editor_spec.js
+++ b/cms/static/js/spec/video/transcripts/editor_spec.js
@@ -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);
diff --git a/cms/static/js/spec/video/transcripts/videolist_spec.js b/cms/static/js/spec/video/transcripts/videolist_spec.js
index 2b2a396820..2158c8ddbe 100644
--- a/cms/static/js/spec/video/transcripts/videolist_spec.js
+++ b/cms/static/js/spec/video/transcripts/videolist_spec.js
@@ -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');
+            });
         });
     });
 });
diff --git a/cms/static/js/spec/views/metadata_edit_spec.js b/cms/static/js/spec/views/metadata_edit_spec.js
index 90c400be62..9df165f9e5 100644
--- a/cms/static/js/spec/views/metadata_edit_spec.js
+++ b/cms/static/js/spec/views/metadata_edit_spec.js
@@ -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);
diff --git a/cms/static/js/spec/views/modals/edit_xblock_spec.js b/cms/static/js/spec/views/modals/edit_xblock_spec.js
index cb945b5e33..a076c5ee4c 100644
--- a/cms/static/js/spec/views/modals/edit_xblock_spec.js
+++ b/cms/static/js/spec/views/modals/edit_xblock_spec.js
@@ -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() {
diff --git a/cms/static/js/views/metadata.js b/cms/static/js/views/metadata.js
index 97c531064b..f348d9f5a9 100644
--- a/cms/static/js/views/metadata.js
+++ b/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: {
diff --git a/cms/static/js/views/modals/edit_xblock.js b/cms/static/js/views/modals/edit_xblock.js
index de5ca6ca2e..8b928520f4 100644
--- a/cms/static/js/views/modals/edit_xblock.js
+++ b/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
diff --git a/cms/static/js/views/video/transcripts/editor.js b/cms/static/js/views/video/transcripts/editor.js
index aebb4427a9..3183c061d9 100644
--- a/cms/static/js/views/video/transcripts/editor.js
+++ b/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;
diff --git a/cms/static/js/views/video/transcripts/metadata_videolist.js b/cms/static/js/views/video/transcripts/metadata_videolist.js
index 4bc7ed7d18..6d27e1343c 100644
--- a/cms/static/js/views/video/transcripts/metadata_videolist.js
+++ b/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
+                );
         },
 
         /**
diff --git a/common/lib/xmodule/xmodule/video_module/video_module.py b/common/lib/xmodule/xmodule/video_module/video_module.py
index 68ee9a5ed0..34dc33938d 100644
--- a/common/lib/xmodule/xmodule/video_module/video_module.py
+++ b/common/lib/xmodule/xmodule/video_module/video_module.py
@@ -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)