Skip to content

E
edx-platform
Commit 4f28b81f by Chris Committed by GitHub
Options

Merge pull request #13334 from edx/clrux/ac-571-video-transcript-download 

AC-571 updating video download/transcript area
parents 13d7ea46 0ebc9047
Showing with 144 additions and 185 deletions
common/lib/xmodule/xmodule/css/video/display.scss
......@@ -21,7 +21,7 @@
.video {
@include clearfix();
background: rgb(240, 243, 245); // UXPL grayscale-cool xx-light;
background: rgb(245, 245, 245); // UXPL grayscale x-back
display: block;
margin: 0 -12px;
padding: 12px;
......@@ -74,70 +74,68 @@
width: 0px;
height: 0px;
}
.wrapper-downloads {
margin: 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;
}
.downloads-heading {
margin: 1em 0 0 0;
}
.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 {
display: inline-block;
float: right;
margin: 15px 0 0 10px;
vertical-align: top;
.host-tag {
@include margin-right($baseline/2);
position: absolute;
left: -9999em;
display: inline-block;
vertical-align: middle;
font-size: 70%;
color: #777;
}
.host-tag {
position: absolute;
left: -9999em;
display: inline-block;
vertical-align: middle;
color: $base-font-color;
}
.brand-logo {
display: inline-block;
max-width: 100%;
max-height: ($baseline*2);
padding: ($baseline/4) 0;
vertical-align: middle;
}
.brand-logo {
display: inline-block;
max-width: 100%;
max-height: ($baseline*2);
padding: ($baseline/4) 0;
vertical-align: middle;
}
}
}
}
.video-wrapper {
@include float(left);
......
common/lib/xmodule/xmodule/js/fixtures/video_all.html
......@@ -10,8 +10,8 @@
<div class="tc-wrapper">
<article class="video-wrapper">
<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="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>
<div class="video-player-pre"></div>
<section class="video-player">
<div id="id"></div>
......@@ -29,22 +29,32 @@
</div>
<div class="focus_grabber last"></div>
<ul class="wrapper-downloads">
<li class="video-tracks">
<div class="a11y-menu-container">
<a class="a11y-menu-button" href="#" title=".srt">.srt</a>
<ol class="a11y-menu-list">
<li class="a11y-menu-item">
<a class="a11y-menu-item-link" href="#txt" title="Text (.txt) file" data-value="txt">Text (.txt) file</a>
</li>
<li class="a11y-menu-item active">
<a class="a11y-menu-item-link" href="#srt" title="SubRip (.srt) file" data-value="srt">SubRip (.srt) file</a>
</li>
</ol>
<h3 class="hd hd-4 downloads-heading sr" id="video-download-transcripts">Downloads and transcripts</h3>
<div class="wrapper-downloads" role="region" aria-labelledby="video-download-transcripts">
<div class="wrapper-download-video">
<h4 class="hd hd-5">Video</h4>
<a class="btn-link video-sources video-download-button" href="#">
Download video file
</a>
</div>
<div class="wrapper-download-transcripts">
<h4 class="hd hd-5">Transcripts</h4>
<ul class="list-download-transcripts">
<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>
</li>
</ul>
<div class="wrapper-handouts">
<h4 class="hd hd-5">Handouts</h4>
<a href="#">Download Handout</a>
</div>
</div>
</div>
</div>
......
common/test/acceptance/pages/lms/video/video.py
......@@ -57,7 +57,10 @@ VIDEO_MENUS = {
'language': '.lang .menu',
'speed': '.speed .menu',
'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',
}
......@@ -584,7 +587,7 @@ class VideoPage(PageObject):
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
if '.' + transcript_format not in self.q(css=transcript_selector).text[0]:
......@@ -595,16 +598,15 @@ class VideoPage(PageObject):
'txt': 'text/plain',
}
transcript_url_selector = self.get_element_selector(VIDEO_BUTTONS['download_transcript'])
url = self.q(css=transcript_url_selector).attrs('href')[0]
link = self.q(css=transcript_selector)
url = link.attrs('href')[0]
link.click()
result, headers, content = self._get_transcript(url)
if result is 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'):
return False
......@@ -674,45 +676,6 @@ class VideoPage(PageObject):
selector = self.get_element_selector(VIDEO_MENUS[menu_name])
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
def sources(self):
"""
......
common/test/acceptance/pages/studio/video/video.py
......@@ -32,7 +32,7 @@ CLASS_SELECTORS = {
BUTTON_SELECTORS = {
'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',
'upload_asset': '.upload-action',
'asset_submit': '.action-upload',
......
common/test/acceptance/tests/video/test_video_module.py
......@@ -4,6 +4,7 @@
Acceptance tests for Video.
"""
import os
from ddt import ddt, unpack, data
from mock import patch
from nose.plugins.attrib import attr
......@@ -199,6 +200,7 @@ class VideoBaseTest(UniqueCourseTest):
@attr(shard=4)
@ddt
class YouTubeVideoTest(VideoBaseTest):
""" Test YouTube Video Player """
......@@ -491,15 +493,16 @@ class YouTubeVideoTest(VideoBaseTest):
self.assertTrue(self.video.is_button_shown('transcript_button'))
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
And Video component C in "HTML5" mode
And I have defined downloadable transcripts for the videos
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
"""
......@@ -524,19 +527,7 @@ class YouTubeVideoTest(VideoBaseTest):
self.navigate_to_video()
# 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'))
# 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'))
self.assertTrue(self.video.downloaded_transcript_contains_text(file_type, search_text))
# open vertical containing video "C"
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
</div>
<div class="focus_grabber last"></div>
<ul class="wrapper-downloads">
% if download_video_link:
<li class="video-sources video-download-button">
<a href="${download_video_link}">${_('Download video')}</a>
</li>
% endif
% if track:
<li class="video-tracks video-download-button">
% if transcript_download_format:
<a href="${track}">${_('Download transcript')}</a>
<div class="a11y-menu-container">
<a class="a11y-menu-button" href="#" title="${'.' + transcript_download_format}" role="button" aria-disabled="false">${'.' + transcript_download_format}</a>
<ol class="a11y-menu-list" role="menu">
% if download_video_link or track or handout or branding_info:
<h3 class="hd hd-4 downloads-heading sr" id="video-download-transcripts_${id}">${_('Downloads and transcripts')}</h3>
<div class="wrapper-downloads" role="region" aria-labelledby="video-download-transcripts_${id}">
% if download_video_link:
<div class="wrapper-download-video">
<h4 class="hd hd-5">${_('Video')}</h4>
<a class="btn-link video-sources video-download-button" href="${download_video_link}">
${_('Download video file')}
</a>
</div>
% endif
% 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:
% if item['value'] == transcript_download_format:
<li class="a11y-menu-item active">
% else:
<li class="a11y-menu-item">
% 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>
<li class="transcript-option">
<% dname = _("Download {file}").format(file=item['display_name']) %>
<a class="btn btn-link" href="${track}" data-value="${item['value']}">${dname}</a>
</li>
% endfor
</ol>
</div>
% else:
<a href="${track}" class="external-track">${_('Download transcript')}</a>
% endif
</li>
% endif
% if handout:
<li class="video-handout video-download-button">
<a href="${handout}" target="_blank">${_('Download Handout')}</a>
</li>
% endif
% if branding_info:
<li id="branding" class="branding">
<span class="host-tag">${branding_info['logo_tag']}</span>
<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>
</li>
</ul>
% else:
<a class="btn-link external-track" href="${track}">${_('Download transcript')}</a>
% endif
</div>
% endif
% if handout:
<div class="wrapper-handouts">
<h4 class="hd hd-5">${_('Handouts')}</h4>
<a class="btn-link" href="${handout}">${_('Download Handout')}</a>
</div>
% endif
% if branding_info:
<div class="branding">
<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>
</div>
% endif
</div>
% endif
</ul>
</div>
% if cdn_eval:
<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