Skip to content

E
edx-platform
Commit b3dc4561 by alisan617 Committed by GitHub
Options

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

removed edx-icons fallback images for video icons and fully use Font Awesome
parents 628ec509 68587ade
Showing with 70 additions and 188 deletions
common/lib/xmodule/xmodule/css/video/display.scss
......@@ -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 {
// if the icon font doesn't render, we need to provide dimensions for the svg's
width: 1em;
height: 1em;
.icon {
width: 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 {
......
common/lib/xmodule/xmodule/js/src/video/04_video_full_screen.js
(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]);
......
common/lib/xmodule/xmodule/js/src/video/05_video_quality_control.js
......@@ -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)
......
common/lib/xmodule/xmodule/js/src/video/07_video_volume_control.js
(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());
},
/**
......
common/lib/xmodule/xmodule/js/src/video/08_video_speed_control.js
......@@ -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'),
......
common/lib/xmodule/xmodule/js/src/video/09_play_pause_control.js
......@@ -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'));
}
};
......
common/lib/xmodule/xmodule/js/src/video/09_play_skip_control.js
......@@ -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');
}
......
common/lib/xmodule/xmodule/js/src/video/09_skip_control.js
......@@ -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(''),
......
common/lib/xmodule/xmodule/js/src/video/09_video_caption.js
......@@ -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) {
......
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