From b6808d3d1339741795a87d69181ae215a7be92ca Mon Sep 17 00:00:00 2001 From: polesye Date: Fri, 13 Dec 2013 18:03:27 +0200 Subject: [PATCH] BLD-541: Fix video controls on iPad. --- CHANGELOG.rst | 8 + cms/djangoapps/contentstore/features/video.py | 5 +- cms/static/coffee/src/main.coffee | 2 +- .../xmodule/xmodule/css/video/display.scss | 41 +- .../xmodule/xmodule/js/fixtures/video.html | 6 +- .../xmodule/js/fixtures/video_all.html | 6 +- .../xmodule/js/fixtures/video_html5.html | 6 +- .../js/fixtures/video_no_captions.html | 6 +- .../js/fixtures/video_yt_multiple.html | 6 +- .../xmodule/js/spec/video/events_spec.js | 164 ++++++ .../xmodule/js/spec/video/general_spec.js | 1 - .../xmodule/js/spec/video/html5_video_spec.js | 490 +++++++++--------- .../js/spec/video/video_caption_spec.js | 6 +- .../js/spec/video/video_control_spec.js | 144 ++++- .../js/spec/video/video_player_spec.js | 114 ++-- .../spec/video/video_progress_slider_spec.js | 135 ++--- .../spec/video/video_quality_control_spec.js | 4 +- .../js/spec/video/video_speed_control_spec.js | 15 +- .../spec/video/video_volume_control_spec.js | 24 +- .../xmodule/js/src/video/01_initialize.js | 45 +- .../xmodule/js/src/video/02_html5_video.js | 63 ++- .../xmodule/js/src/video/03_video_player.js | 78 ++- .../xmodule/js/src/video/04_video_control.js | 59 ++- .../js/src/video/05_video_quality_control.js | 1 + .../js/src/video/06_video_progress_slider.js | 8 +- .../js/src/video/07_video_volume_control.js | 7 + .../js/src/video/08_video_speed_control.js | 9 +- .../xmodule/js/src/video/09_video_caption.js | 28 +- lms/static/coffee/src/main.coffee | 2 +- lms/templates/video.html | 5 +- 30 files changed, 986 insertions(+), 502 deletions(-) create mode 100644 common/lib/xmodule/xmodule/js/spec/video/events_spec.js diff --git a/CHANGELOG.rst b/CHANGELOG.rst index 3a83020f6a..1dcf960e0e 100644 --- a/CHANGELOG.rst +++ b/CHANGELOG.rst @@ -5,6 +5,14 @@ These are notable changes in edx-platform. This is a rolling list of changes, in roughly chronological order, most recent first. Add your entries at or near the top. Include a label indicating the component affected. +Blades: Video player improvements: + - Disable edX controls for iPhone (native controls are used). + - Disable volume and speed controls for iPad. + - controls becomes visible after click on video or play placeholder to avoid + issues with YouTube API. + - Captions becomes visible just after full initialization of video player. + - Fix blinking of captions after video player initialization. BLD-206. + LMS: Fix answer distribution download for small courses. LMS-922, LMS-811 Blades: Add template for the zooming image in studio. BLD-206. diff --git a/cms/djangoapps/contentstore/features/video.py b/cms/djangoapps/contentstore/features/video.py index a293b13727..2a86222584 100644 --- a/cms/djangoapps/contentstore/features/video.py +++ b/cms/djangoapps/contentstore/features/video.py @@ -141,12 +141,13 @@ def the_youtube_video_is_shown(_step): @step('Make sure captions are (.+)$') def set_captions_visibility_state(_step, captions_state): SELECTOR = '.closed .subtitles' + world.wait_for_visible('.hide-subtitles') if captions_state == 'closed': if not world.is_css_present(SELECTOR): - world.browser.find_by_css('.hide-subtitles').click() + world.css_find('.hide-subtitles').click() else: if world.is_css_present(SELECTOR): - world.browser.find_by_css('.hide-subtitles').click() + world.css_find('.hide-subtitles').click() @step('I hover over button "([^"]*)"$') diff --git a/cms/static/coffee/src/main.coffee b/cms/static/coffee/src/main.coffee index fef7ce9871..5c835b27b2 100644 --- a/cms/static/coffee/src/main.coffee +++ b/cms/static/coffee/src/main.coffee @@ -9,7 +9,7 @@ define ["domReady", "jquery", "underscore.string", "backbone", "gettext", window.CMS = window.CMS or {} CMS.URL = CMS.URL or {} window.onTouchBasedDevice = -> - navigator.userAgent.match /iPhone|iPod|iPad/i + navigator.userAgent.match /iPhone|iPod|iPad|Android/i _.extend CMS, Backbone.Events Backbone.emulateHTTP = true diff --git a/common/lib/xmodule/xmodule/css/video/display.scss b/common/lib/xmodule/xmodule/css/video/display.scss index 36318df11b..5f4e9d1063 100644 --- a/common/lib/xmodule/xmodule/css/video/display.scss +++ b/common/lib/xmodule/xmodule/css/video/display.scss @@ -2,6 +2,10 @@ margin-bottom: 30px; } +.is-hidden { + display: none; +} + div.video { @include clearfix(); background: #f3f3f3; @@ -97,12 +101,35 @@ div.video { } } + .btn-play { + @include transform(translate(-50%, -50%)); + position: absolute; + z-index: 1; + background: rgba(0, 0, 0, 0.7); + top: 50%; + left: 50%; + padding: 30px; + border-radius: 25%; + + &:after{ + content: ''; + display: block; + width: 0px; + height: 0px; + border-style: solid; + border-width: 30px 0 30px 50px; + border-color: transparent transparent transparent #ffffff; + position: relative; + } + } section.video-player { overflow: hidden; min-height: 300px; - div { + > div { + height: 100%; + &.hidden { display: none; } @@ -674,6 +701,7 @@ div.video { width: 275px; padding: 0 20px; z-index: 0; + display: none; } } @@ -764,6 +792,17 @@ div.video { } } } + + &.is-touch { + div.tc-wrapper { + article.video-wrapper { + object, iframe, video{ + width: 100%; + height: 100%; + } + } + } + } } diff --git a/common/lib/xmodule/xmodule/js/fixtures/video.html b/common/lib/xmodule/xmodule/js/fixtures/video.html index e80bd3a0dd..a28d10422a 100644 --- a/common/lib/xmodule/xmodule/js/fixtures/video.html +++ b/common/lib/xmodule/xmodule/js/fixtures/video.html @@ -3,7 +3,7 @@
+ +
-
+