fix issue where video player renders twice (TNL-3064)

common/djangoapps/terrain/stubs/youtube.py

@@ -92,12 +92,11 @@ class StubYouTubeHandler(StubHttpRequestHandler):
                 self._send_video_response(youtube_id, "I'm youtube.")
 
         elif 'get_youtube_api' in self.path:
+            # Delay the response to simulate network latency
+            time.sleep(self.server.config.get('time_to_response', self.DEFAULT_DELAY_SEC))
             if self.server.config.get('youtube_api_blocked'):
                 self.send_response(404, content='', headers={'Content-type': 'text/plain'})
             else:
-                # Delay the response to simulate network latency
-                time.sleep(self.server.config.get('time_to_response', self.DEFAULT_DELAY_SEC))
-
                 # Get the response to send from YouTube.
                 # We need to do this every time because Google sometimes sends different responses
                 # as part of their own experiments, which has caused our tests to become "flaky"

common/lib/xmodule/xmodule/js/src/video/01_initialize.js

@@ -596,7 +596,11 @@ function (VideoPlayer, i18n) {
                     '[Video info]: YouTube returned an error for ' +
                     'video with id "' + self.id + '".'
                 );
-                self.loadHtmlPlayer();
+                // If the video is already loaded in `_waitForYoutubeApi` by the
+                // time we get here, then we shouldn't load it again.
+                if (!self.htmlPlayerLoaded) {
+                    self.loadHtmlPlayer();
+                }
             });
 
             window.Video.loadYouTubeIFrameAPI(scriptTag);

common/test/acceptance/tests/video/test_video_module.py

@@ -384,13 +384,36 @@ class YouTubeVideoTest(VideoBaseTest):
 
         self.assertTrue(self.video.is_video_rendered('html5'))
 
-    def test_video_with_youtube_blocked(self):
+    def test_video_with_youtube_blocked_with_default_response_time(self):
+        """
+        Scenario: Video is rendered in HTML5 mode when the YouTube API is blocked
+        Given the YouTube API is blocked
+        And the course has a Video component in "Youtube_HTML5" mode
+        Then the video has rendered in "HTML5" mode
+        And only one video has rendered
+        """
+        # configure youtube server
+        self.youtube_configuration.update({
+            'youtube_api_blocked': True,
+        })
+
+        self.metadata = self.metadata_for_mode('youtube_html5')
+
+        self.navigate_to_video()
+
+        self.assertTrue(self.video.is_video_rendered('html5'))
+
+        # The video should only be loaded once
+        self.assertEqual(len(self.video.q(css='video')), 1)
+
+    def test_video_with_youtube_blocked_delayed_response_time(self):
         """
         Scenario: Video is rendered in HTML5 mode when the YouTube API is blocked
         Given the YouTube server response time is greater than 1.5 seconds
         And the YouTube API is blocked
         And the course has a Video component in "Youtube_HTML5" mode
         Then the video has rendered in "HTML5" mode
+        And only one video has rendered
         """
         # configure youtube server
         self.youtube_configuration.update({
@@ -404,6 +427,9 @@ class YouTubeVideoTest(VideoBaseTest):
 
         self.assertTrue(self.video.is_video_rendered('html5'))
 
+        # The video should only be loaded once
+        self.assertEqual(len(self.video.q(css='video')), 1)
+
     def test_html5_video_rendered_with_youtube_captions(self):
         """
         Scenario: User should see Youtube captions for If there are no transcripts