Skip to content

E
edx-platform
Commit 0ebc9047 by Chris Rodriguez
Options

AC-571 updating video download/transcript area

parent 087acb8a
Showing with 144 additions and 185 deletions
common/lib/xmodule/xmodule/css/video/display.scss
...@@ -21,7 +21,7 @@ ...@@ -21,7 +21,7 @@
.video { .video {
@include clearfix(); @include clearfix();
background: rgb(240, 243, 245); // UXPL grayscale-cool xx-light; background: rgb(245, 245, 245); // UXPL grayscale x-back
display: block; display: block;
margin: 0 -12px; margin: 0 -12px;
padding: 12px; padding: 12px;
...@@ -74,70 +74,68 @@ ...@@ -74,70 +74,68 @@
width: 0px; width: 0px;
height: 0px; height: 0px;
} }
.wrapper-downloads { .downloads-heading {
margin: 0; margin: 1em 0 0 0;
padding: 0;
.video-download-button {
display: inline-block;
vertical-align: top;
margin: ($baseline*0.75) ($baseline/2) 0 0;
> a {
@include transition(all $tmg-f2 ease-in-out 0s);
@include font-size(14);
line-height : 14px;
float: left;
border-radius: 3px;
background-color: $very-light-text;
padding: ($baseline*0.75);
color: $lighter-base-font-color;
&:hover,
&:focus {
background-color: $action-primary-active-bg;
color: $very-light-text;
}
}
}
.video-tracks {
> a {
border-radius: 3px 0 0 3px;
}
> a.external-track {
border-radius: 3px;
}
} }
.wrapper-downloads {
display: flex;
.hd {
margin: 0;
}
.wrapper-download-video,
.wrapper-download-transcripts,
.wrapper-handouts,
.branding {
flex: 1;
margin-top: $baseline;
@include padding-right($baseline);
vertical-align: top;
}
.wrapper-download-video {
.video-sources {
margin: 0;
}
}
.wrapper-download-transcripts {
.list-download-transcripts {
margin: 0;
padding: 0;
list-style: none;
.transcript-option {
margin: 0;
}
}
}
.branding {
@include padding-right(0);
.branding { .host-tag {
display: inline-block; position: absolute;
float: right; left: -9999em;
margin: 15px 0 0 10px; display: inline-block;
vertical-align: top; vertical-align: middle;
color: $base-font-color;
.host-tag { }
@include margin-right($baseline/2);
position: absolute;
left: -9999em;
display: inline-block;
vertical-align: middle;
font-size: 70%;
color: #777;
}
.brand-logo { .brand-logo {
display: inline-block; display: inline-block;
max-width: 100%; max-width: 100%;
max-height: ($baseline*2); max-height: ($baseline*2);
padding: ($baseline/4) 0; padding: ($baseline/4) 0;
vertical-align: middle; vertical-align: middle;
} }
}
} }
}
.video-wrapper { .video-wrapper {
@include float(left); @include float(left);
......
common/lib/xmodule/xmodule/js/fixtures/video_all.html
...@@ -10,8 +10,8 @@ ...@@ -10,8 +10,8 @@
<div class="tc-wrapper"> <div class="tc-wrapper">
<article class="video-wrapper"> <article class="video-wrapper">
<span tabindex="0" class="spinner" aria-hidden="false" aria-label="${_('Loading video player')}"></span> <span tabindex="0" class="spinner" aria-hidden="false" aria-label="Loading video player"></span>
<span tabindex="-1" class="btn-play is-hidden" aria-hidden="true" aria-label="${_('Play video')}"></span> <span tabindex="-1" class="btn-play is-hidden" aria-hidden="true" aria-label="Play video"></span>
<div class="video-player-pre"></div> <div class="video-player-pre"></div>
<section class="video-player"> <section class="video-player">
<div id="id"></div> <div id="id"></div>
...@@ -29,22 +29,32 @@ ...@@ -29,22 +29,32 @@
</div> </div>
<div class="focus_grabber last"></div> <div class="focus_grabber last"></div>
<ul class="wrapper-downloads"> <h3 class="hd hd-4 downloads-heading sr" id="video-download-transcripts">Downloads and transcripts</h3>
<li class="video-tracks"> <div class="wrapper-downloads" role="region" aria-labelledby="video-download-transcripts">
<div class="a11y-menu-container"> <div class="wrapper-download-video">
<a class="a11y-menu-button" href="#" title=".srt">.srt</a> <h4 class="hd hd-5">Video</h4>
<ol class="a11y-menu-list"> <a class="btn-link video-sources video-download-button" href="#">
<li class="a11y-menu-item"> Download video file
<a class="a11y-menu-item-link" href="#txt" title="Text (.txt) file" data-value="txt">Text (.txt) file</a> </a>
</li> </div>
<li class="a11y-menu-item active"> <div class="wrapper-download-transcripts">
<a class="a11y-menu-item-link" href="#srt" title="SubRip (.srt) file" data-value="srt">SubRip (.srt) file</a> <h4 class="hd hd-5">Transcripts</h4>
</li> <ul class="list-download-transcripts">
</ol> <li class="transcript-option">
<a href="#" class="btn btn-link" data-href="txt">Download Text (.txt) file</a>
</li>
<li class="transcript-option">
<a href="#" class="btn btn-link" data-href="srt">Download SubRip (.srt) file</a>
</li>
</ul>
<a href="#" class="external-track">Download transcript</a>
</div> </div>
</li> <div class="wrapper-handouts">
</ul> <h4 class="hd hd-5">Handouts</h4>
<a href="#">Download Handout</a>
</div>
</div>
</div> </div>
</div> </div>
......
common/test/acceptance/pages/lms/video/video.py
...@@ -57,7 +57,10 @@ VIDEO_MENUS = { ...@@ -57,7 +57,10 @@ VIDEO_MENUS = {
'language': '.lang .menu', 'language': '.lang .menu',
'speed': '.speed .menu', 'speed': '.speed .menu',
'download_transcript': '.video-tracks .a11y-menu-list', 'download_transcript': '.video-tracks .a11y-menu-list',
'transcript-format': '.video-tracks .a11y-menu-button', 'transcript-format': {
'srt': '.wrapper-download-transcripts .list-download-transcripts .btn-link[data-value="srt"]',
'txt': '.wrapper-download-transcripts .list-download-transcripts .btn-link[data-value="txt"]'
},
'transcript-skip': '.sr-is-focusable.transcript-start', 'transcript-skip': '.sr-is-focusable.transcript-start',
} }
...@@ -584,7 +587,7 @@ class VideoPage(PageObject): ...@@ -584,7 +587,7 @@ class VideoPage(PageObject):
bool: Transcript download result. bool: Transcript download result.
""" """
transcript_selector = self.get_element_selector(VIDEO_MENUS['transcript-format']) transcript_selector = self.get_element_selector(VIDEO_MENUS['transcript-format'][transcript_format])
# check if we have a transcript with correct format # check if we have a transcript with correct format
if '.' + transcript_format not in self.q(css=transcript_selector).text[0]: if '.' + transcript_format not in self.q(css=transcript_selector).text[0]:
...@@ -595,16 +598,15 @@ class VideoPage(PageObject): ...@@ -595,16 +598,15 @@ class VideoPage(PageObject):
'txt': 'text/plain', 'txt': 'text/plain',
} }
transcript_url_selector = self.get_element_selector(VIDEO_BUTTONS['download_transcript']) link = self.q(css=transcript_selector)
url = self.q(css=transcript_url_selector).attrs('href')[0] url = link.attrs('href')[0]
link.click()
result, headers, content = self._get_transcript(url) result, headers, content = self._get_transcript(url)
if result is False: if result is False:
return False return False
if formats[transcript_format] not in headers.get('content-type', ''):
return False
if text_to_search not in content.decode('utf-8'): if text_to_search not in content.decode('utf-8'):
return False return False
...@@ -674,45 +676,6 @@ class VideoPage(PageObject): ...@@ -674,45 +676,6 @@ class VideoPage(PageObject):
selector = self.get_element_selector(VIDEO_MENUS[menu_name]) selector = self.get_element_selector(VIDEO_MENUS[menu_name])
return self.q(css=selector).present return self.q(css=selector).present
def select_transcript_format(self, transcript_format):
"""
Select transcript with format `transcript_format`.
Arguments:
transcript_format (st): Transcript file format `srt` or `txt`.
Returns:
bool: Selection Result.
"""
button_selector = self.get_element_selector(VIDEO_MENUS['transcript-format'])
button = self.q(css=button_selector).results[0]
hover = ActionChains(self.browser).move_to_element(button)
hover.perform()
if '...' not in self.q(css=button_selector).text[0]:
return False
menu_selector = self.get_element_selector(VIDEO_MENUS['download_transcript'])
menu_items = self.q(css=menu_selector + ' a').results
for item in menu_items:
if item.get_attribute('data-value') == transcript_format:
ActionChains(self.browser).move_to_element(item).click().perform()
self.wait_for_ajax()
break
self.browser.execute_script("window.scrollTo(0, 0);")
if self.q(css=menu_selector + ' .active a').attrs('data-value')[0] != transcript_format:
return False
if '.' + transcript_format not in self.q(css=button_selector).text[0]:
return False
return True
@property @property
def sources(self): def sources(self):
""" """
......
common/test/acceptance/pages/studio/video/video.py
...@@ -32,7 +32,7 @@ CLASS_SELECTORS = { ...@@ -32,7 +32,7 @@ CLASS_SELECTORS = {
BUTTON_SELECTORS = { BUTTON_SELECTORS = {
'create_video': 'button[data-category="video"]', 'create_video': 'button[data-category="video"]',
'handout_download': '.video-handout.video-download-button a', 'handout_download': '.wrapper-handouts .btn-link',
'handout_download_editor': '.wrapper-comp-setting.file-uploader .download-action', 'handout_download_editor': '.wrapper-comp-setting.file-uploader .download-action',
'upload_asset': '.upload-action', 'upload_asset': '.upload-action',
'asset_submit': '.action-upload', 'asset_submit': '.action-upload',
......
common/test/acceptance/tests/video/test_video_module.py
...@@ -4,6 +4,7 @@ ...@@ -4,6 +4,7 @@
Acceptance tests for Video. Acceptance tests for Video.
""" """
import os import os
from ddt import ddt, unpack, data
from mock import patch from mock import patch
from nose.plugins.attrib import attr from nose.plugins.attrib import attr
...@@ -199,6 +200,7 @@ class VideoBaseTest(UniqueCourseTest): ...@@ -199,6 +200,7 @@ class VideoBaseTest(UniqueCourseTest):
@attr(shard=4) @attr(shard=4)
@ddt
class YouTubeVideoTest(VideoBaseTest): class YouTubeVideoTest(VideoBaseTest):
""" Test YouTube Video Player """ """ Test YouTube Video Player """
...@@ -491,15 +493,16 @@ class YouTubeVideoTest(VideoBaseTest): ...@@ -491,15 +493,16 @@ class YouTubeVideoTest(VideoBaseTest):
self.assertTrue(self.video.is_button_shown('transcript_button')) self.assertTrue(self.video.is_button_shown('transcript_button'))
self._verify_caption_text('Welcome to edX.') self._verify_caption_text('Welcome to edX.')
def test_download_transcript_button_works_correctly(self): @data(('srt', '00:00:00,260'), ('txt', 'Welcome to edX.'))
@unpack
def test_download_transcript_links_work_correctly(self, file_type, search_text):
""" """
Scenario: Download Transcript button works correctly Scenario: Download 'srt' transcript link works correctly.
Download 'txt' transcript link works correctly.
Given the course has Video components A and B in "Youtube" mode Given the course has Video components A and B in "Youtube" mode
And Video component C in "HTML5" mode And Video component C in "HTML5" mode
And I have defined downloadable transcripts for the videos And I have defined downloadable transcripts for the videos
Then I can download a transcript for Video A in "srt" format Then I can download a transcript for Video A in "srt" format
And I can download a transcript for Video A in "txt" format
And I can download a transcript for Video B in "txt" format
And the Download Transcript menu does not exist for Video C And the Download Transcript menu does not exist for Video C
""" """
...@@ -524,19 +527,7 @@ class YouTubeVideoTest(VideoBaseTest): ...@@ -524,19 +527,7 @@ class YouTubeVideoTest(VideoBaseTest):
self.navigate_to_video() self.navigate_to_video()
# check if we can download transcript in "srt" format that has text "00:00:00,260" # check if we can download transcript in "srt" format that has text "00:00:00,260"
self.assertTrue(self.video.downloaded_transcript_contains_text('srt', '00:00:00,260')) self.assertTrue(self.video.downloaded_transcript_contains_text(file_type, search_text))
# select the transcript format "txt"
self.assertTrue(self.video.select_transcript_format('txt'))
# check if we can download transcript in "txt" format that has text "Welcome to edX."
self.assertTrue(self.video.downloaded_transcript_contains_text('txt', 'Welcome to edX.'))
# open vertical containing video "B"
self.course_nav.go_to_vertical('Test Vertical-1')
# check if we can download transcript in "txt" format that has text "Equal transcripts"
self.assertTrue(self.video.downloaded_transcript_contains_text('txt', 'Equal transcripts'))
# open vertical containing video "C" # open vertical containing video "C"
self.course_nav.go_to_vertical('Test Vertical-2') self.course_nav.go_to_vertical('Test Vertical-2')
......
lms/templates/video.html
...@@ -39,52 +39,49 @@ from openedx.core.djangolib.js_utils import js_escaped_string ...@@ -39,52 +39,49 @@ from openedx.core.djangolib.js_utils import js_escaped_string
</div> </div>
<div class="focus_grabber last"></div> <div class="focus_grabber last"></div>
<ul class="wrapper-downloads">
% if download_video_link: % if download_video_link or track or handout or branding_info:
<li class="video-sources video-download-button"> <h3 class="hd hd-4 downloads-heading sr" id="video-download-transcripts_${id}">${_('Downloads and transcripts')}</h3>
<a href="${download_video_link}">${_('Download video')}</a> <div class="wrapper-downloads" role="region" aria-labelledby="video-download-transcripts_${id}">
</li> % if download_video_link:
% endif <div class="wrapper-download-video">
% if track: <h4 class="hd hd-5">${_('Video')}</h4>
<li class="video-tracks video-download-button"> <a class="btn-link video-sources video-download-button" href="${download_video_link}">
% if transcript_download_format: ${_('Download video file')}
<a href="${track}">${_('Download transcript')}</a> </a>
<div class="a11y-menu-container"> </div>
<a class="a11y-menu-button" href="#" title="${'.' + transcript_download_format}" role="button" aria-disabled="false">${'.' + transcript_download_format}</a> % endif
<ol class="a11y-menu-list" role="menu"> % if track:
<div class="wrapper-download-transcripts">
<h4 class="hd hd-5">${_('Transcripts')}</h4>
% if transcript_download_format:
<ul class="list-download-transcripts">
% for item in transcript_download_formats_list: % for item in transcript_download_formats_list:
% if item['value'] == transcript_download_format: <li class="transcript-option">
<li class="a11y-menu-item active"> <% dname = _("Download {file}").format(file=item['display_name']) %>
% else: <a class="btn btn-link" href="${track}" data-value="${item['value']}">${dname}</a>
<li class="a11y-menu-item"> </li>
% endif
## This is necessary so we don't scrape 'display_name' as a string.
<% dname = item['display_name'] %>
<a class="a11y-menu-item-link" href="#${item['value']}" title="${_(dname)}" data-value="${item['value']}" role="menuitem" aria-disabled="false">
${_(dname)}
</a>
</li>
% endfor % endfor
</ol> </ul>
</div> % else:
% else: <a class="btn-link external-track" href="${track}">${_('Download transcript')}</a>
<a href="${track}" class="external-track">${_('Download transcript')}</a> % endif
% endif </div>
</li> % endif
% endif % if handout:
% if handout: <div class="wrapper-handouts">
<li class="video-handout video-download-button"> <h4 class="hd hd-5">${_('Handouts')}</h4>
<a href="${handout}" target="_blank">${_('Download Handout')}</a> <a class="btn-link" href="${handout}">${_('Download Handout')}</a>
</li> </div>
% endif % endif
% if branding_info:
% if branding_info: <div class="branding">
<li id="branding" class="branding"> <span class="host-tag">${branding_info['logo_tag']}</span>
<span class="host-tag">${branding_info['logo_tag']}</span> <a href="${branding_info['url']}"><img class="brand-logo" src="${branding_info['logo_src']}" alt="${branding_info['logo_tag']}" /></a>
<a href="${branding_info['url']}" target="_blank" title="${branding_info['logo_tag']}"><img class="brand-logo" src="${branding_info['logo_src']}" alt="${branding_info['logo_tag']}" /></a> </div>
</li> % endif
</div>
% endif % endif
</ul>
</div> </div>
% if cdn_eval: % if cdn_eval:
<script> <script>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment