Andal.LND/edx-platform
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #12894 from edx/alisan/tnl-4698-video-icons

Browse Source 
removed edx-icons fallback images for video icons and fully use Font Awesome
This commit is contained in:
alisan617
2016-06-29 17:01:35 -04:00
committed by GitHub
parent 628ec509cc 68587ade39
commit b3dc456133
9 changed files with 70 additions and 188 deletions
Download Patch File Download Diff File Expand all files Collapse all files

75
common/lib/xmodule/xmodule/css/video/display.scss
View File

@@ -10,56 +10,6 @@
// --------
// the html target is necessary for xblocks and xmodules, but works across the board
.icon-fallback-img {
.fa-play {
background: url('#{$static-path}/edx-pattern-library/fonts/edx-icons/fallback-img/play.svg') center center no-repeat;
}
.fa-pause {
background: url('#{$static-path}/edx-pattern-library/fonts/edx-icons/fallback-img/pause.svg') center center no-repeat;
}
.fa-step-forward {
background: url('#{$static-path}/edx-pattern-library/fonts/edx-icons/fallback-img/fast-forward.svg') center center no-repeat;
}
.fa-arrows-alt {
background: url('#{$static-path}/edx-pattern-library/fonts/edx-icons/fallback-img/fullscreen.svg') center center no-repeat;
}
.fa-caret-right {
background: url('#{$static-path}/edx-pattern-library/fonts/edx-icons/fallback-img/caret-right.svg') center center no-repeat;
}
.fa-caret-left {
background: url('#{$static-path}/edx-pattern-library/fonts/edx-icons/fallback-img/caret-left.svg') center center no-repeat;
}
.fa-caret-up {
background: url('#{$static-path}/edx-pattern-library/fonts/edx-icons/fallback-img/caret-up.svg') center center no-repeat;
}
.fa-compress {
background: url('#{$static-path}/edx-pattern-library/fonts/edx-icons/fallback-img/exit-fullscreen.svg') center center no-repeat;
}
.fa-quote-left {
background: url('#{$static-path}/edx-pattern-library/fonts/edx-icons/fallback-img/quote-left.svg') center center no-repeat;
}
.fa-volume-up {
background: url('#{$static-path}/edx-pattern-library/fonts/edx-icons/fallback-img/volume-up.svg') center center no-repeat;
}
.fa-volume-down {
background: url('#{$static-path}/edx-pattern-library/fonts/edx-icons/fallback-img/volume-down.svg') center center no-repeat;
}
.fa-volume-off {
background: url('#{$static-path}/edx-pattern-library/fonts/edx-icons/fallback-img/volume-off.svg') center center no-repeat;
}
}
& {
margin-bottom: ($baseline*1.5);
@@ -366,18 +316,13 @@
.control {
@extend %video-control;
.icon-fallback-img {
.icon {
width: 1em;
.icon {
// if the icon font doesn't render, we need to provide dimensions for the svg's
width: 1em;
height: 1em;
&.icon-hd {
// except when it's text, like with HD
// otherwise it's shifted to the right because "HD" is wider than 1em
width: auto;
}
&.icon-hd {
// except when it's text, like with HD
// otherwise it's shifted to the right because "HD" is wider than 1em
width: auto;
}
}
}
@@ -555,14 +500,6 @@
.lang,
.grouped-controls {
display: inline-block;
.control {
.icon-fallback-img {
@include float(left);
@include transform-origin(center center);
}
}
}
.speeds {

21
common/lib/xmodule/xmodule/js/src/video/04_video_full_screen.js
View File

@@ -1,16 +1,11 @@
(function (define) {
'use strict';
define('video/04_video_full_screen.js', [], function () {
define('video/04_video_full_screen.js', ['edx-ui-toolkit/js/utils/html-utils'], function (HtmlUtils) {
var template = [
'<button class="control add-fullscreen" aria-disabled="false" title="',
gettext('Fill browser'),
'">',
'<span class="icon-fallback-img">',
'<span class="icon fa fa-arrows-alt" aria-hidden="true"></span>',
'<span class="sr control-text">',
gettext('Fill browser'),
'</span>',
'</span>',
'<span class="icon fa fa-arrows-alt" aria-hidden="true"></span>',
'</button>'
].join('');
@@ -73,7 +68,7 @@ define('video/04_video_full_screen.js', [], function () {
state.videoFullScreen.fullScreenEl = $(template);
state.videoFullScreen.sliderEl = state.el.find('.slider');
state.videoFullScreen.fullScreenState = false;
state.el.find('.secondary-controls').append(state.videoFullScreen.fullScreenEl);
HtmlUtils.append(state.el.find('.secondary-controls'), HtmlUtils.HTML(state.videoFullScreen.fullScreenEl));
state.videoFullScreen.updateControlsHeight();
}
@@ -140,11 +135,10 @@ define('video/04_video_full_screen.js', [], function () {
fullScreenClassNameEl.removeClass('video-fullscreen');
$(window).scrollTop(this.scrollPos);
this.videoFullScreen.fullScreenEl
.attr('title', gettext('Fill browser'))
.find('.icon')
.removeClass('fa-compress')
.addClass('fa-arrows-alt')
.find('.control-text')
.text(gettext('Fill browser'));
.addClass('fa-arrows-alt');
this.el.trigger('fullscreen', [this.isFullScreen]);
@@ -163,11 +157,10 @@ define('video/04_video_full_screen.js', [], function () {
this.videoFullScreen.fullScreenState = this.isFullScreen = true;
fullScreenClassNameEl.addClass('video-fullscreen');
this.videoFullScreen.fullScreenEl
.attr('title', gettext('Exit full browser'))
.find('.icon')
.removeClass('fa-arrows-alt')
.addClass('fa-compress')
.find('.control-text')
.text(gettext('Exit full browser'));
.addClass('fa-compress');
this.el.trigger('fullscreen', [this.isFullScreen]);

40
common/lib/xmodule/xmodule/js/src/video/05_video_quality_control.js
View File

@@ -4,27 +4,27 @@
'use strict';
define(
'video/05_video_quality_control.js',
[],
function () {
var template = [
'<button class="control quality-control is-hidden" aria-disabled="false" title="',
gettext('High Definition'),
'">',
'<span class="icon-fallback-img">',
'<span class="icon icon-hd" aria-hidden="true">HD</span>', // "HD" is treated as a proper noun
// Translator note:
// HD stands for high definition
['edx-ui-toolkit/js/utils/html-utils'],
function (HtmlUtils) {
var template = HtmlUtils.interpolateHtml(
HtmlUtils.HTML([
'<button class="control quality-control is-hidden" aria-disabled="false" title="',
'{highDefinition}',
'">',
'<span class="icon icon-hd" aria-hidden="true">HD</span>',
'<span class="sr text-translation">',
gettext('High Definition'),
'{highDefinition}',
'</span>&nbsp;',
'<span class="text control-text">',
// Translator note:
// Values are 'off' or 'on' depending on the state of the HD control
gettext('off'),
'<span class="sr control-text">',
'{off}',
'</span>',
'</span>',
'</button>'
].join('');
'</button>'
].join('')),
{
highDefinition: gettext('High Definition'),
off: gettext('off')
}
);
// VideoQualityControl() function - what this module "exports".
return function (state) {
@@ -81,9 +81,9 @@ function () {
// make the created DOM elements available via the 'state' object. Much easier to work this
// way - you don't have to do repeated jQuery element selects.
function _renderElements(state) {
var element = state.videoQualityControl.el = $(template);
var element = state.videoQualityControl.el = $(template.toString());
state.videoQualityControl.quality = 'large';
state.el.find('.secondary-controls').append(element);
HtmlUtils.append(state.el.find('.secondary-controls'), HtmlUtils.HTML(element));
}
// function _bindHandlers(state)

42
common/lib/xmodule/xmodule/js/src/video/07_video_volume_control.js
View File

@@ -1,9 +1,9 @@
(function(define) {
(function (define) {
'use strict';
// VideoVolumeControl module.
define(
'video/07_video_volume_control.js', [],
function() {
'video/07_video_volume_control.js', ['edx-ui-toolkit/js/utils/html-utils'],
function (HtmlUtils) {
/**
* Video volume control module.
* @exports video/07_video_volume_control.js
@@ -37,24 +37,20 @@ function() {
/** Step to increase/decrease volume level via keyboard. */
step: 20,
template: [
videoVolumeControlHtml: HtmlUtils.interpolateHtml(
HtmlUtils.HTML([
'<div class="volume" role="application">',
'<p class="sr instructions" id="volume-instructions">',
gettext('Click on this button to mute or unmute this video or press UP or DOWN buttons to increase or decrease volume level.'), // jshint ignore: line
'{volumeInstructions}',
'</p>',
'<button class="control" aria-disabled="false" aria-describedby="volume-instructions"',
'" aria-expanded="false" title="',
gettext('Adjust video volume'),
'{adjustVideoVolume}',
'">',
'<span class="icon-fallback-img">',
'<span class="icon fa fa-volume-up" aria-hidden="true"></span>',
'<span class="sr control-text">',
gettext('Volume'),
'</span>',
'</span>',
'<span class="icon fa fa-volume-up" aria-hidden="true"></span>',
'</button>',
'<div class="volume-slider-container" aria-hidden="true" title="',
gettext('Adjust video volume'),
'{adjustVideoVolume}',
'">',
'<div class="volume-slider" ',
'role="slider"',
@@ -62,10 +58,17 @@ function() {
'aria-valuemin="0" ',
'aria-valuemax="100" ',
'aria-valuenow="" ',
'aria-label="' + gettext('Adjust video volume') + '"></div>',
'aria-label="',
'{volumeText}',
'"></div>',
'</div>',
'</div>'
].join(''),
'</div>'].join('')),
{
volumeInstructions: gettext('Click on this button to mute or unmute this video or press UP or DOWN buttons to increase or decrease volume level.'), // jshint ignore: line
adjustVideoVolume: gettext('Adjust video volume'),
volumeText: gettext('Volume')
}
),
destroy: function () {
this.volumeSlider.slider('destroy');
@@ -103,7 +106,7 @@ function() {
return false;
}
this.el = $(this.template);
this.el = $(this.videoVolumeControlHtml.toString());
// Youtube iframe react on key buttons and has his own handlers.
// So, we disallow focusing on iframe.
this.state.el.find('iframe').attr('tabindex', -1);
@@ -128,8 +131,7 @@ function() {
render: function() {
var container = this.el.find('.volume-slider');
container
.append('<div class="ui-slider-handle volume-handle"></div>');
HtmlUtils.append(container, HtmlUtils.HTML('<div class="ui-slider-handle volume-handle"></div>'));
this.volumeSlider = container.slider({
orientation: 'vertical',
@@ -453,7 +455,7 @@ function() {
'aria-live': 'polite'
});
this.button.after(this.liveRegion);
this.button.after(HtmlUtils.HTML(this.liveRegion).toString());
},
/**

5
common/lib/xmodule/xmodule/js/src/video/08_video_speed_control.js
View File

@@ -38,11 +38,8 @@ define(
'title="',
gettext('Adjust video speed'),
'" aria-describedby="speed-instructions">',
'<span class="icon-fallback-img">',
'<span>',
'<span class="icon fa fa-caret-right" aria-hidden="true"></span>',
'<span class="sr control-text">',
gettext('Speed'),
'</span>',
'</span>',
'<span class="label" aria-hidden="true">',
gettext('Speed'),

15
common/lib/xmodule/xmodule/js/src/video/09_play_pause_control.js
View File

@@ -28,12 +28,7 @@ define('video/09_play_pause_control.js', [], function() {
'<button class="control video_control play" aria-disabled="false" title="',
gettext('Play'),
'">',
'<span class="icon-fallback-img">',
'<span class="icon fa fa-play" aria-hidden="true"></span>',
'<span class="sr control-text">',
gettext('Play'),
'</span>',
'</span>',
'<span class="icon fa fa-play" aria-hidden="true"></span>',
'</button>'
].join(''),
@@ -83,10 +78,6 @@ define('video/09_play_pause_control.js', [], function() {
.find('.icon')
.removeClass('fa-play')
.addClass('fa-pause');
this.el
.find('.control-text')
.text(gettext('Pause'));
},
pause: function () {
@@ -97,10 +88,6 @@ define('video/09_play_pause_control.js', [], function() {
.find('.icon')
.removeClass('fa-pause')
.addClass('fa-play');
this.el
.find('.control-text')
.text(gettext('Play'));
}
};

11
common/lib/xmodule/xmodule/js/src/video/09_play_skip_control.js
View File

@@ -28,12 +28,7 @@ define('video/09_play_skip_control.js', [], function() {
'<button class="control video_control play play-skip-control" title="',
gettext('Play'),
'">',
'<span class="icon-fallback-img">',
'<span class="icon fa fa-play" aria-hidden="true"></span>',
'<span class="text control-text">',
gettext('Play'),
'</span>',
'</span>',
'<span class="icon fa fa-play" aria-hidden="true"></span>',
'</button>'
].join(''),
@@ -83,9 +78,7 @@ define('video/09_play_skip_control.js', [], function() {
.attr('title', gettext('Skip'))
.find('.icon')
.removeClass('fa-play')
.addClass('fa-step-forward')
.find('.control-text')
.text(gettext('Skip'));
.addClass('fa-step-forward');
// Disable possibility to pause the video.
this.state.el.find('video').off('click');
}

7
common/lib/xmodule/xmodule/js/src/video/09_skip_control.js
View File

@@ -31,12 +31,7 @@ function() {
'<button class="control video_control skip skip-control" aria-disabled="false" title="',
gettext('Do not show again'),
'">',
'<span class="icon-fallback-img">',
'<span class="icon fa fa-step-forward" aria-hidden="true"></span>',
'<span class="text control-text">',
gettext('Do not show again'),
'</span>',
'</span>',
'<span class="icon fa fa-step-forward" aria-hidden="true"></span>',
'</button>'
].join(''),

42
common/lib/xmodule/xmodule/js/src/video/09_video_caption.js
View File

@@ -6,10 +6,7 @@
'video/00_sjson.js',
'video/00_async_process.js',
'edx-ui-toolkit/js/utils/html-utils',
'draggabilly',
'modernizr',
'afontgarde',
'edxicons'
'draggabilly'
], function (Sjson, AsyncProcess, HtmlUtils, Draggabilly) {
/**
@@ -83,29 +80,20 @@
var langHtml = HtmlUtils.interpolateHtml(
HtmlUtils.HTML(
[
[
'<div class="grouped-controls">',
'<button class="control toggle-captions" aria-disabled="false">',
'<span class="icon-fallback-img">',
'<span class="icon fa fa-cc" aria-hidden="true"></span>',
'<span class="sr control-text"></span>',
'</span>',
'<span class="icon fa fa-cc" aria-hidden="true"></span>',
'</button>',
'<button class="control toggle-transcript" aria-disabled="false">',
'<span class="icon-fallback-img">',
'<span class="icon fa fa-quote-left" aria-hidden="true"></span>',
'<span class="sr control-text"></span>',
'</span>',
'<span class="icon fa fa-quote-left" aria-hidden="true"></span>',
'</button>',
'<div class="lang menu-container" role="application">',
'<p class="sr instructions" id="lang-instructions"></p>',
'<button class="control language-menu" aria-disabled="false"',
'aria-describedby="lang-instructions" ',
'title="{langTitle}">',
'<span class="icon-fallback-img">',
'<span class="icon fa fa-caret-left" aria-hidden="true"></span>',
'<span class="sr control-text"></span>',
'</span>',
'<span class="icon fa fa-caret-left" aria-hidden="true"></span>',
'</button>',
'</div>',
'</div>'
@@ -759,7 +747,7 @@
'tabindex': 0
});
$(liEl).html(text);
HtmlUtils.setHtml($(liEl), HtmlUtils.HTML(text.toString()));
return liEl[0];
};
@@ -822,8 +810,6 @@
self.container.find('.menu-container .instructions')
.text(gettext('Press the UP arrow key to enter the language menu then use UP and DOWN arrow keys to navigate language options. Press ENTER to change to the selected language.')); // jshint ignore:line
self.container.find('.menu-container .control .control-text')
.text(gettext('Open language menu.'));
};
this.rendered = false;
@@ -1199,9 +1185,7 @@
this.captionControlEl
.addClass('is-active')
.attr('title', gettext('Hide closed captions'))
.find('.control-text')
.text(gettext('Hide closed captions'));
.attr('title', gettext('Hide closed captions'));
if (this.subtitlesEl.find('.current').text()) {
this.captionDisplayEl
@@ -1223,9 +1207,7 @@
this.captionControlEl
.removeClass('is-active')
.attr('title', gettext('Turn on closed captioning'))
.find('.control-text')
.text(gettext('Turn on closed captioning'));
.attr('title', gettext('Turn on closed captioning'));
this.state.el.trigger('captions:hide');
},
@@ -1280,9 +1262,7 @@
transcriptControlEl
.removeClass('is-active')
.attr('title', gettext(text))
.find('.control-text')
.text(gettext(text));
.attr('title', gettext(text));
} else {
state.captionsHidden = false;
state.el.removeClass('closed');
@@ -1294,9 +1274,7 @@
transcriptControlEl
.addClass('is-active')
.attr('title', gettext(text))
.find('.control-text')
.text(gettext(text));
.attr('title', gettext(text));
}
if (state.resizer) {