3 exports.__esModule = true;
5 var _window = require('global/window');
7 var _window2 = _interopRequireDefault(_window);
9 var _component = require('../component');
11 var _component2 = _interopRequireDefault(_component);
13 var _dom = require('../utils/dom');
15 var _fn = require('../utils/fn');
17 var Fn = _interopRequireWildcard(_fn);
19 var _obj = require('../utils/obj');
21 var Obj = _interopRequireWildcard(_obj);
23 var _log = require('../utils/log');
25 var _log2 = _interopRequireDefault(_log);
27 function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj['default'] = obj; return newObj; } }
29 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
31 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
33 function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
35 function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } /**
36 * @file text-track-settings.js
40 var LOCAL_STORAGE_KEY = 'vjs-text-track-settings';
42 var COLOR_BLACK = ['#000', 'Black'];
43 var COLOR_BLUE = ['#00F', 'Blue'];
44 var COLOR_CYAN = ['#0FF', 'Cyan'];
45 var COLOR_GREEN = ['#0F0', 'Green'];
46 var COLOR_MAGENTA = ['#F0F', 'Magenta'];
47 var COLOR_RED = ['#F00', 'Red'];
48 var COLOR_WHITE = ['#FFF', 'White'];
49 var COLOR_YELLOW = ['#FF0', 'Yellow'];
51 var OPACITY_OPAQUE = ['1', 'Opaque'];
52 var OPACITY_SEMI = ['0.5', 'Semi-Transparent'];
53 var OPACITY_TRANS = ['0', 'Transparent'];
55 // Configuration for the various <select> elements in the DOM of this component.
57 // Possible keys include:
60 // The default option index. Only needs to be provided if not zero.
62 // A function which is used to parse the value from the selected option in
65 // The selector used to find the associated <select> element.
68 selector: '.vjs-bg-color > select',
69 id: 'captions-background-color-%s',
71 options: [COLOR_BLACK, COLOR_WHITE, COLOR_RED, COLOR_GREEN, COLOR_BLUE, COLOR_YELLOW, COLOR_MAGENTA, COLOR_CYAN]
75 selector: '.vjs-bg-opacity > select',
76 id: 'captions-background-opacity-%s',
77 label: 'Transparency',
78 options: [OPACITY_OPAQUE, OPACITY_SEMI, OPACITY_TRANS]
82 selector: '.vjs-fg-color > select',
83 id: 'captions-foreground-color-%s',
85 options: [COLOR_WHITE, COLOR_BLACK, COLOR_RED, COLOR_GREEN, COLOR_BLUE, COLOR_YELLOW, COLOR_MAGENTA, COLOR_CYAN]
89 selector: '.vjs-edge-style > select',
91 label: 'Text Edge Style',
92 options: [['none', 'None'], ['raised', 'Raised'], ['depressed', 'Depressed'], ['uniform', 'Uniform'], ['dropshadow', 'Dropshadow']]
96 selector: '.vjs-font-family > select',
97 id: 'captions-font-family-%s',
99 options: [['proportionalSansSerif', 'Proportional Sans-Serif'], ['monospaceSansSerif', 'Monospace Sans-Serif'], ['proportionalSerif', 'Proportional Serif'], ['monospaceSerif', 'Monospace Serif'], ['casual', 'Casual'], ['script', 'Script'], ['small-caps', 'Small Caps']]
103 selector: '.vjs-font-percent > select',
104 id: 'captions-font-size-%s',
106 options: [['0.50', '50%'], ['0.75', '75%'], ['1.00', '100%'], ['1.25', '125%'], ['1.50', '150%'], ['1.75', '175%'], ['2.00', '200%'], ['3.00', '300%'], ['4.00', '400%']],
108 parser: function parser(v) {
109 return v === '1.00' ? null : Number(v);
114 selector: '.vjs-text-opacity > select',
115 id: 'captions-foreground-opacity-%s',
116 label: 'Transparency',
117 options: [OPACITY_OPAQUE, OPACITY_SEMI]
120 // Options for this object are defined below.
122 selector: '.vjs-window-color > select',
123 id: 'captions-window-color-%s',
127 // Options for this object are defined below.
129 selector: '.vjs-window-opacity > select',
130 id: 'captions-window-opacity-%s',
131 label: 'Transparency',
132 options: [OPACITY_TRANS, OPACITY_SEMI, OPACITY_OPAQUE]
136 selectConfigs.windowColor.options = selectConfigs.backgroundColor.options;
139 * Get the actual value of an option.
141 * @param {string} value
144 * @param {Function} [parser]
145 * Optional function to adjust the value.
148 * - Will be `undefined` if no value exists
149 * - Will be `undefined` if the given value is "none".
150 * - Will be the actual value otherwise.
154 function parseOptionValue(value, parser) {
156 value = parser(value);
159 if (value && value !== 'none') {
165 * Gets the value of the selected <option> element within a <select> element.
167 * @param {Element} el
168 * the element to look in
170 * @param {Function} [parser]
171 * Optional function to adjust the value.
174 * - Will be `undefined` if no value exists
175 * - Will be `undefined` if the given value is "none".
176 * - Will be the actual value otherwise.
180 function getSelectedOptionValue(el, parser) {
181 var value = el.options[el.options.selectedIndex].value;
183 return parseOptionValue(value, parser);
187 * Sets the selected <option> element within a <select> element based on a
190 * @param {Element} el
191 * The element to look in.
193 * @param {string} value
194 * the property to look on.
196 * @param {Function} [parser]
197 * Optional function to adjust the value before comparing.
201 function setSelectedOption(el, value, parser) {
206 for (var i = 0; i < el.options.length; i++) {
207 if (parseOptionValue(el.options[i].value, parser) === value) {
208 el.selectedIndex = i;
215 * Manipulate Text Tracks settings.
220 var TextTrackSettings = function (_Component) {
221 _inherits(TextTrackSettings, _Component);
224 * Creates an instance of this class.
226 * @param {Player} player
227 * The `Player` that this class should be attached to.
229 * @param {Object} [options]
230 * The key/value store of player options.
232 function TextTrackSettings(player, options) {
233 _classCallCheck(this, TextTrackSettings);
235 var _this = _possibleConstructorReturn(this, _Component.call(this, player, options));
240 _this.updateDisplay = Fn.bind(_this, _this.updateDisplay);
242 // Grab `persistTextTrackSettings` from the player options if not passed in child options
243 if (options.persistTextTrackSettings === undefined) {
244 _this.options_.persistTextTrackSettings = _this.options_.playerOptions.persistTextTrackSettings;
247 _this.on(_this.$('.vjs-done-button'), 'click', function () {
248 _this.saveSettings();
252 _this.on(_this.$('.vjs-default-button'), 'click', function () {
254 _this.updateDisplay();
257 Obj.each(selectConfigs, function (config) {
258 _this.on(_this.$(config.selector), 'change', _this.updateDisplay);
261 if (_this.options_.persistTextTrackSettings) {
262 _this.restoreSettings();
268 * Create a <select> element with configured options.
270 * @param {string} key
271 * Configuration key to use during creation.
274 * The DOM element that gets created.
279 TextTrackSettings.prototype.createElSelect_ = function createElSelect_(key) {
282 var config = selectConfigs[key];
283 var id = config.id.replace('%s', this.id_);
285 return [(0, _dom.createEl)('label', {
286 className: 'vjs-label',
287 textContent: config.label
290 }), (0, _dom.createEl)('select', { id: id }, undefined, config.options.map(function (o) {
291 return (0, _dom.createEl)('option', {
292 textContent: _this2.localize(o[1]),
299 * Create foreground color element for the component
302 * The element that was created.
308 TextTrackSettings.prototype.createElFgColor_ = function createElFgColor_() {
309 var legend = (0, _dom.createEl)('legend', {
310 textContent: this.localize('Text')
313 var select = this.createElSelect_('color');
315 var opacity = (0, _dom.createEl)('span', {
316 className: 'vjs-text-opacity vjs-opacity'
317 }, undefined, this.createElSelect_('textOpacity'));
319 return (0, _dom.createEl)('fieldset', {
320 className: 'vjs-fg-color vjs-tracksetting'
321 }, undefined, [legend].concat(select, opacity));
325 * Create background color element for the component
328 * The element that was created
334 TextTrackSettings.prototype.createElBgColor_ = function createElBgColor_() {
335 var legend = (0, _dom.createEl)('legend', {
336 textContent: this.localize('Background')
339 var select = this.createElSelect_('backgroundColor');
341 var opacity = (0, _dom.createEl)('span', {
342 className: 'vjs-bg-opacity vjs-opacity'
343 }, undefined, this.createElSelect_('backgroundOpacity'));
345 return (0, _dom.createEl)('fieldset', {
346 className: 'vjs-bg-color vjs-tracksetting'
347 }, undefined, [legend].concat(select, opacity));
351 * Create window color element for the component
354 * The element that was created
360 TextTrackSettings.prototype.createElWinColor_ = function createElWinColor_() {
361 var legend = (0, _dom.createEl)('legend', {
362 textContent: this.localize('Window')
365 var select = this.createElSelect_('windowColor');
367 var opacity = (0, _dom.createEl)('span', {
368 className: 'vjs-window-opacity vjs-opacity'
369 }, undefined, this.createElSelect_('windowOpacity'));
371 return (0, _dom.createEl)('fieldset', {
372 className: 'vjs-window-color vjs-tracksetting'
373 }, undefined, [legend].concat(select, opacity));
377 * Create color elements for the component
380 * The element that was created
386 TextTrackSettings.prototype.createElColors_ = function createElColors_() {
387 return (0, _dom.createEl)('div', {
388 className: 'vjs-tracksettings-colors'
389 }, undefined, [this.createElFgColor_(), this.createElBgColor_(), this.createElWinColor_()]);
393 * Create font elements for the component
396 * The element that was created.
402 TextTrackSettings.prototype.createElFont_ = function createElFont_() {
403 var fontPercent = (0, _dom.createEl)('div', {
404 className: 'vjs-font-percent vjs-tracksetting'
405 }, undefined, this.createElSelect_('fontPercent'));
407 var edgeStyle = (0, _dom.createEl)('div', {
408 className: 'vjs-edge-style vjs-tracksetting'
409 }, undefined, this.createElSelect_('edgeStyle'));
411 var fontFamily = (0, _dom.createEl)('div', {
412 className: 'vjs-font-family vjs-tracksetting'
413 }, undefined, this.createElSelect_('fontFamily'));
415 return (0, _dom.createEl)('div', {
416 className: 'vjs-tracksettings-font'
417 }, undefined, [fontPercent, edgeStyle, fontFamily]);
421 * Create controls for the component
424 * The element that was created.
430 TextTrackSettings.prototype.createElControls_ = function createElControls_() {
431 var defaultsButton = (0, _dom.createEl)('button', {
432 className: 'vjs-default-button',
433 textContent: this.localize('Defaults')
436 var doneButton = (0, _dom.createEl)('button', {
437 className: 'vjs-done-button',
441 return (0, _dom.createEl)('div', {
442 className: 'vjs-tracksettings-controls'
443 }, undefined, [defaultsButton, doneButton]);
447 * Create the component's DOM element
450 * The element that was created.
454 TextTrackSettings.prototype.createEl = function createEl() {
455 var settings = (0, _dom.createEl)('div', {
456 className: 'vjs-tracksettings'
457 }, undefined, [this.createElColors_(), this.createElFont_(), this.createElControls_()]);
459 var heading = (0, _dom.createEl)('div', {
460 className: 'vjs-control-text',
461 id: 'TTsettingsDialogLabel-' + this.id_,
462 textContent: 'Caption Settings Dialog'
468 var description = (0, _dom.createEl)('div', {
469 className: 'vjs-control-text',
470 id: 'TTsettingsDialogDescription-' + this.id_,
471 textContent: 'Beginning of dialog window. Escape will cancel and close the window.'
474 var doc = (0, _dom.createEl)('div', undefined, {
476 }, [heading, description, settings]);
478 return (0, _dom.createEl)('div', {
479 className: 'vjs-caption-settings vjs-modal-overlay',
483 'aria-labelledby': heading.id,
484 'aria-describedby': description.id
489 * Gets an object of text track settings (or null).
492 * An object with config values parsed from the DOM or localStorage.
496 TextTrackSettings.prototype.getValues = function getValues() {
499 return Obj.reduce(selectConfigs, function (accum, config, key) {
500 var value = getSelectedOptionValue(_this3.$(config.selector), config.parser);
502 if (value !== undefined) {
511 * Sets text track settings from an object of values.
513 * @param {Object} values
514 * An object with config values parsed from the DOM or localStorage.
518 TextTrackSettings.prototype.setValues = function setValues(values) {
521 Obj.each(selectConfigs, function (config, key) {
522 setSelectedOption(_this4.$(config.selector), values[key], config.parser);
527 * Sets all <select> elements to their default values.
531 TextTrackSettings.prototype.setDefaults = function setDefaults() {
534 Obj.each(selectConfigs, function (config) {
535 var index = config.hasOwnProperty('default') ? config['default'] : 0;
537 _this5.$(config.selector).selectedIndex = index;
542 * Restore texttrack settings from localStorage
546 TextTrackSettings.prototype.restoreSettings = function restoreSettings() {
550 values = JSON.parse(_window2['default'].localStorage.getItem(LOCAL_STORAGE_KEY));
552 _log2['default'].warn(err);
556 this.setValues(values);
561 * Save text track settings to localStorage
565 TextTrackSettings.prototype.saveSettings = function saveSettings() {
566 if (!this.options_.persistTextTrackSettings) {
570 var values = this.getValues();
573 if (Object.keys(values).length) {
574 _window2['default'].localStorage.setItem(LOCAL_STORAGE_KEY, JSON.stringify(values));
576 _window2['default'].localStorage.removeItem(LOCAL_STORAGE_KEY);
579 _log2['default'].warn(err);
584 * Update display of text track settings
588 TextTrackSettings.prototype.updateDisplay = function updateDisplay() {
589 var ttDisplay = this.player_.getChild('textTrackDisplay');
592 ttDisplay.updateDisplay();
596 return TextTrackSettings;
597 }(_component2['default']);
599 _component2['default'].registerComponent('TextTrackSettings', TextTrackSettings);
601 exports['default'] = TextTrackSettings;