diff --git a/src/css/components/_control.scss b/src/css/components/_control.scss index 5b9d18cfb..a1c2f5999 100644 --- a/src/css/components/_control.scss +++ b/src/css/components/_control.scss @@ -10,7 +10,7 @@ width: 4em; @include flex(none); - & .vjs-icon-placeholder:before { + & > .vjs-icon-placeholder:before { font-size: 1.8em; line-height: 1.67; diff --git a/src/css/components/_subs-caps.scss b/src/css/components/_subs-caps.scss index bd35d28a0..550e7f19a 100644 --- a/src/css/components/_subs-caps.scss +++ b/src/css/components/_subs-caps.scss @@ -14,9 +14,12 @@ @extend .vjs-icon-subtitles; } -.video-js .vjs-subs-caps-button + .vjs-menu .vjs-captions-menu-item .vjs-menu-item-text:after { - content: " \f10d"; - font-family: VideoJS; - vertical-align: bottom; - font-size: 1.5em; +.video-js .vjs-subs-caps-button + .vjs-menu .vjs-captions-menu-item .vjs-menu-item-text .vjs-icon-placeholder { + position: absolute; +} +.video-js .vjs-subs-caps-button + .vjs-menu .vjs-captions-menu-item .vjs-menu-item-text .vjs-icon-placeholder:before { + font-family: VideoJS; + content: "\f10d"; + font-size: 1.5em; + line-height: inherit; } diff --git a/src/js/control-bar/text-track-controls/subs-caps-button.js b/src/js/control-bar/text-track-controls/subs-caps-button.js index e5dd4bfbc..3ce40b803 100644 --- a/src/js/control-bar/text-track-controls/subs-caps-button.js +++ b/src/js/control-bar/text-track-controls/subs-caps-button.js @@ -4,6 +4,7 @@ import TextTrackButton from './text-track-button.js'; import Component from '../../component.js'; import CaptionSettingsMenuItem from './caption-settings-menu-item.js'; +import SubsCapsMenuItem from './subs-caps-menu-item.js'; import toTitleCase from '../../utils/to-title-case.js'; /** * The button component for toggling and selecting captions and/or subtitles @@ -79,7 +80,7 @@ class SubsCapsButton extends TextTrackButton { items.push(new CaptionSettingsMenuItem(this.player_, {kind: this.label_})); } - items = super.createItems(items); + items = super.createItems(items, SubsCapsMenuItem); return items; } diff --git a/src/js/control-bar/text-track-controls/subs-caps-menu-item.js b/src/js/control-bar/text-track-controls/subs-caps-menu-item.js new file mode 100644 index 000000000..403b9867d --- /dev/null +++ b/src/js/control-bar/text-track-controls/subs-caps-menu-item.js @@ -0,0 +1,37 @@ +/** + * @file subs-caps-menu-item.js + */ +import TextTrackMenuItem from './text-track-menu-item.js'; +import Component from '../../component.js'; +import {assign} from '../../utils/obj'; + +/** + * SubsCapsMenuItem has an [cc] icon to distinguish captions from subtitles + * in the SubsCapsMenu. + * + * @extends TextTrackMenuItem + */ +class SubsCapsMenuItem extends TextTrackMenuItem { + + createEl(type, props, attrs) { + let innerHTML = `<span class="vjs-menu-item-text">${this.localize(this.options_.label)}`; + + if (this.options_.track.kind === 'captions') { + innerHTML += ` + <span aria-hidden="true" class="vjs-icon-placeholder"></span> + <span class="vjs-control-text"> ${this.localize('Captions')}</span> + `; + } + + innerHTML += '</span>'; + + const el = super.createEl(type, assign({ + innerHTML + }, props), attrs); + + return el; + } +} + +Component.registerComponent('SubsCapsMenuItem', SubsCapsMenuItem); +export default SubsCapsMenuItem; diff --git a/src/js/control-bar/text-track-controls/text-track-button.js b/src/js/control-bar/text-track-controls/text-track-button.js index 28da312ec..3b220d1e7 100644 --- a/src/js/control-bar/text-track-controls/text-track-button.js +++ b/src/js/control-bar/text-track-controls/text-track-button.js @@ -41,7 +41,7 @@ class TextTrackButton extends TrackButton { * @return {TextTrackMenuItem[]} * Array of menu items that were created */ - createItems(items = []) { + createItems(items = [], TrackMenuItem = TextTrackMenuItem) { // Label is an overide for the [track] off label // USed to localise captions/subtitles @@ -64,7 +64,7 @@ class TextTrackButton extends TrackButton { // only add tracks that are of an appropriate kind and have a label if (this.kinds_.indexOf(track.kind) > -1) { - const item = new TextTrackMenuItem(this.player_, { + const item = new TrackMenuItem(this.player_, { track, // MenuItem is selectable selectable: true