add video poster support

EDUCATOR-44

cms/djangoapps/contentstore/views/tests/test_videos.py

@@ -13,7 +13,7 @@ import ddt
 import pytz
 from django.conf import settings
 from django.test.utils import override_settings
-from edxval.api import create_profile, create_video, get_video_info
+from edxval.api import create_profile, create_video, get_video_info, get_course_video_image_url
 from mock import Mock, patch
 
 from contentstore.models import VideoUploadConfig

cms/static/js/views/video_thumbnail.js

@@ -28,7 +28,7 @@ define(
                     icon: '',
                     text: HtmlUtils.interpolateHtml(
                         // Translators: This is a 3 part text which tells the image requirements.
-                        gettext('Image requirements {lineBreak} 1280px by 720px {lineBreak} .jpg | .png | .gif'),
+                        gettext('Image requirements: {lineBreak} 1280px by 720px {lineBreak} .jpg, .png, or .gif'),
                         {
                             lineBreak: HtmlUtils.HTML('<br>')
                         }
@@ -208,7 +208,10 @@ define(
                     this.$('.thumbnail-action .action-icon'),
                     HtmlUtils.HTML(this.actionsInfo[action].icon)
                 );
-                this.$('.thumbnail-action .action-text').html(this.actionsInfo[action].text);
+                HtmlUtils.setHtml(
+                    this.$('.thumbnail-action .action-text'),
+                    HtmlUtils.HTML(this.actionsInfo[action].text)
+                );
                 this.$('.thumbnail-action .action-text-sr').text(additionalSRText || '');
                 this.$('.thumbnail-wrapper').attr('class', 'thumbnail-wrapper {action}'.replace('{action}', action));
             },

cms/static/sass/views/_video-upload.scss

@@ -147,6 +147,11 @@
   }
 
   .assets-library {
+
+    .js-table-body .video-id-col {
+      word-break: break-all;
+    }
+
     .assets-title {
       display: inline-block;
       width: flex-grid(5, 9);

common/lib/xmodule/xmodule/js/fixtures/video_hls.html

@@ -4,7 +4,7 @@
       <div
         id="video_id"
         class="video closed"
-        data-metadata='{"autohideHtml5": "true", "autoplay": "false", "captionDataDir": "", "endTime": "", "generalSpeed": "1.0", "saveStateUrl": "/save_user_state", "savedVideoPosition": "0", "showCaptions": "true", "sources": ["/base/fixtures/hls/hls.m3u8", "/base/fixtures/test.mp4","/base/fixtures/test.webm"], "speed": "1.5", "startTime": "", "streams": "", "sub": "Z5KLxerq05Y", "transcriptAvailableTranslationsUrl": "/transcript/available_translations", "transcriptLanguage": "en", "transcriptLanguages": {"en": "English", "de": "Deutsch", "zh": "普通话"}, "transcriptTranslationUrl": "/transcript/translation/__lang__", "ytApiUrl": "/base/fixtures/youtube_iframe_api.js", "ytImageUrl": "", "ytTestTimeout": "1500", "ytMetadataUrl": "www.googleapis.com/youtube/v3/videos/", "source": ""}'
+        data-metadata='{"autohideHtml5": "true", "autoplay": "false", "captionDataDir": "", "endTime": "", "generalSpeed": "1.0", "saveStateUrl": "/save_user_state", "savedVideoPosition": "0", "showCaptions": "true", "sources": ["/base/fixtures/hls/hls.m3u8", "/base/fixtures/test.mp4","/base/fixtures/test.webm"], "speed": "1.5", "startTime": "", "streams": "", "sub": "Z5KLxerq05Y", "transcriptAvailableTranslationsUrl": "/transcript/available_translations", "transcriptLanguage": "en", "transcriptLanguages": {"en": "English", "de": "Deutsch", "zh": "普通话"}, "transcriptTranslationUrl": "/transcript/translation/__lang__", "ytApiUrl": "/base/fixtures/youtube_iframe_api.js", "ytImageUrl": "", "ytTestTimeout": "1500", "ytMetadataUrl": "www.googleapis.com/youtube/v3/videos/", "source": "", "poster": "/media/video-images/poster.png"}'
       >
         <div class="focus_grabber first"></div>
 

common/lib/xmodule/xmodule/js/fixtures/video_html5.html

@@ -4,7 +4,7 @@
       <div
         id="video_id"
         class="video closed"
-        data-metadata='{"autohideHtml5": "true", "autoplay": "false", "captionDataDir": "", "endTime": "", "generalSpeed": "1.0", "saveStateUrl": "/save_user_state", "savedVideoPosition": "0", "showCaptions": "true", "sources": ["/base/fixtures/test.mp4","/base/fixtures/test.webm","/base/fixtures/test.ogv"], "speed": "1.5", "startTime": "", "streams": "", "sub": "Z5KLxerq05Y", "transcriptAvailableTranslationsUrl": "/transcript/available_translations", "transcriptLanguage": "en", "transcriptLanguages": {"en": "English", "de": "Deutsch", "zh": "普通话"}, "transcriptTranslationUrl": "/transcript/translation/__lang__", "ytApiUrl": "/base/fixtures/youtube_iframe_api.js", "ytImageUrl": "", "ytTestTimeout": "1500", "ytMetadataUrl": "www.googleapis.com/youtube/v3/videos/", "source": "", "html5_sources": ["http://youtu.be/3_yD_cEKoCk.mp4"]}'
+        data-metadata='{"autohideHtml5": "true", "autoplay": "false", "captionDataDir": "", "endTime": "", "generalSpeed": "1.0", "saveStateUrl": "/save_user_state", "savedVideoPosition": "0", "showCaptions": "true", "sources": ["/base/fixtures/test.mp4","/base/fixtures/test.webm","/base/fixtures/test.ogv"], "speed": "1.5", "startTime": "", "streams": "", "sub": "Z5KLxerq05Y", "transcriptAvailableTranslationsUrl": "/transcript/available_translations", "transcriptLanguage": "en", "transcriptLanguages": {"en": "English", "de": "Deutsch", "zh": "普通话"}, "transcriptTranslationUrl": "/transcript/translation/__lang__", "ytApiUrl": "/base/fixtures/youtube_iframe_api.js", "ytImageUrl": "", "ytTestTimeout": "1500", "ytMetadataUrl": "www.googleapis.com/youtube/v3/videos/", "source": "", "html5_sources": ["http://youtu.be/3_yD_cEKoCk.mp4"], "poster": "/media/video-images/poster.png"}'
       >
         <div class="focus_grabber first"></div>
 

common/lib/xmodule/xmodule/js/spec/video/html5_video_spec.js

@@ -4,7 +4,8 @@
         var state,
             oldOTBD,
             playbackRates = [0.75, 1.0, 1.25, 1.5],
-            describeInfo;
+            describeInfo,
+            POSTER_URL = '/media/video-images/poster.png';
 
         beforeEach(function() {
             oldOTBD = window.onTouchBasedDevice;
@@ -320,6 +321,15 @@
                     }).done(done);
                 });
             });
+
+            describe('poster', function() {
+                it('has url in player config', function() {
+                    expect(state.videoPlayer.player.config.poster).toEqual(POSTER_URL);
+                    expect(state.videoPlayer.player.videoEl).toHaveAttrs({
+                        poster: POSTER_URL
+                    });
+                });
+            });
         });
 
         describe('non-hls encoding', function() {
@@ -338,6 +348,28 @@
             jasmine.getEnv().describe(describeInfo.description, describeInfo.specDefinitions);
         });
 
+        it('does not show poster for html5 video if url is not present', function() {
+            state = jasmine.initializePlayer(
+                'video_html5.html',
+                {
+                    poster: null
+                }
+            );
+            expect(state.videoPlayer.player.config.poster).toEqual(null);
+            expect(state.videoPlayer.player.videoEl).not.toHaveAttr('poster');
+        });
+
+        it('does not show poster for hls video if url is not present', function() {
+            state = jasmine.initializePlayer(
+                'video_hls.html',
+                {
+                    poster: null
+                }
+            );
+            expect(state.videoPlayer.player.config.poster).toEqual(null);
+            expect(state.videoPlayer.player.videoEl).not.toHaveAttr('poster');
+        });
+
         it('native controls are used on  iPhone', function() {
             window.onTouchBasedDevice.and.returnValue(['iPhone']);
 

common/lib/xmodule/xmodule/js/src/video/02_html5_video.js

@@ -44,8 +44,11 @@ function(_) {
          *                            // video format of the source. Supported
          *                            // video formats are: 'mp4', 'webm', and
          *                            // 'ogg'.
+         *        poster:             Video poster URL
          *
-         *          events: {         // Object's properties identify the
+         *        browserIsSafari:    Flag to tell if current browser is Safari
+         *
+         *        events: {           // Object's properties identify the
          *                            // events that the API fires, and the
          *                            // functions (event listeners) that the
          *                            // API will call when those events occur.
@@ -320,6 +323,11 @@ function(_) {
                 this.videoEl.prop('controls', true);
             }
 
+            // Set video poster
+            if (this.config.poster) {
+                this.videoEl.prop('poster', this.config.poster);
+            }
+
             // Place the <video> element on the page.
             this.videoEl.appendTo(el.find('.video-player > div:first-child'));
         };

common/lib/xmodule/xmodule/js/src/video/03_video_player.js

@@ -162,6 +162,7 @@ function(HTML5Video, HTML5HLSVideo, Resizer, HLS, _) {
         commonPlayerConfig = {
             playerVars: state.videoPlayer.playerVars,
             videoSources: state.config.sources,
+            poster: state.config.poster,
             browserIsSafari: state.browserIsSafari,
             events: {
                 onReady: state.videoPlayer.onReady,

common/lib/xmodule/xmodule/video_module/video_module.py

@@ -310,7 +310,10 @@ class VideoModule(VideoFields, VideoTranscriptsMixin, VideoStudentViewHandlers,
             'streams': self.youtube_streams,
             'sub': self.sub,
             'sources': sources,
-
+            'poster': edxval_api and edxval_api.get_course_video_image_url(
+                course_id=self.runtime.course_id.for_branch(None),
+                edx_video_id=self.edx_video_id.strip()
+            ),
             # This won't work when we move to data that
             # isn't on the filesystem
             'captionDataDir': getattr(self, 'data_dir', None),