www.aleph1.co.uk Git - yaffs-website/blob - node_modules/video.js/es5/tracks/text-track-settings.js

   1 'use strict';
   2
   3 exports.__esModule = true;
   4
   5 var _window = require('global/window');
   6
   7 var _window2 = _interopRequireDefault(_window);
   8
   9 var _component = require('../component');
  10
  11 var _component2 = _interopRequireDefault(_component);
  12
  13 var _dom = require('../utils/dom');
  14
  15 var _fn = require('../utils/fn');
  16
  17 var Fn = _interopRequireWildcard(_fn);
  18
  19 var _obj = require('../utils/obj');
  20
  21 var Obj = _interopRequireWildcard(_obj);
  22
  23 var _log = require('../utils/log');
  24
  25 var _log2 = _interopRequireDefault(_log);
  26
  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; } }
  28
  29 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
  30
  31 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
  32
  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; }
  34
  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
  37                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 */
  38
  39
  40 var LOCAL_STORAGE_KEY = 'vjs-text-track-settings';
  41
  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'];
  50
  51 var OPACITY_OPAQUE = ['1', 'Opaque'];
  52 var OPACITY_SEMI = ['0.5', 'Semi-Transparent'];
  53 var OPACITY_TRANS = ['0', 'Transparent'];
  54
  55 // Configuration for the various <select> elements in the DOM of this component.
  56 //
  57 // Possible keys include:
  58 //
  59 // `default`:
  60 //   The default option index. Only needs to be provided if not zero.
  61 // `parser`:
  62 //   A function which is used to parse the value from the selected option in
  63 //   a customized way.
  64 // `selector`:
  65 //   The selector used to find the associated <select> element.
  66 var selectConfigs = {
  67   backgroundColor: {
  68     selector: '.vjs-bg-color > select',
  69     id: 'captions-background-color-%s',
  70     label: 'Color',
  71     options: [COLOR_BLACK, COLOR_WHITE, COLOR_RED, COLOR_GREEN, COLOR_BLUE, COLOR_YELLOW, COLOR_MAGENTA, COLOR_CYAN]
  72   },
  73
  74   backgroundOpacity: {
  75     selector: '.vjs-bg-opacity > select',
  76     id: 'captions-background-opacity-%s',
  77     label: 'Transparency',
  78     options: [OPACITY_OPAQUE, OPACITY_SEMI, OPACITY_TRANS]
  79   },
  80
  81   color: {
  82     selector: '.vjs-fg-color > select',
  83     id: 'captions-foreground-color-%s',
  84     label: 'Color',
  85     options: [COLOR_WHITE, COLOR_BLACK, COLOR_RED, COLOR_GREEN, COLOR_BLUE, COLOR_YELLOW, COLOR_MAGENTA, COLOR_CYAN]
  86   },
  87
  88   edgeStyle: {
  89     selector: '.vjs-edge-style > select',
  90     id: '%s',
  91     label: 'Text Edge Style',
  92     options: [['none', 'None'], ['raised', 'Raised'], ['depressed', 'Depressed'], ['uniform', 'Uniform'], ['dropshadow', 'Dropshadow']]
  93   },
  94
  95   fontFamily: {
  96     selector: '.vjs-font-family > select',
  97     id: 'captions-font-family-%s',
  98     label: 'Font Family',
  99     options: [['proportionalSansSerif', 'Proportional Sans-Serif'], ['monospaceSansSerif', 'Monospace Sans-Serif'], ['proportionalSerif', 'Proportional Serif'], ['monospaceSerif', 'Monospace Serif'], ['casual', 'Casual'], ['script', 'Script'], ['small-caps', 'Small Caps']]
 100   },
 101
 102   fontPercent: {
 103     selector: '.vjs-font-percent > select',
 104     id: 'captions-font-size-%s',
 105     label: 'Font Size',
 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%']],
 107     'default': 2,
 108     parser: function parser(v) {
 109       return v === '1.00' ? null : Number(v);
 110     }
 111   },
 112
 113   textOpacity: {
 114     selector: '.vjs-text-opacity > select',
 115     id: 'captions-foreground-opacity-%s',
 116     label: 'Transparency',
 117     options: [OPACITY_OPAQUE, OPACITY_SEMI]
 118   },
 119
 120   // Options for this object are defined below.
 121   windowColor: {
 122     selector: '.vjs-window-color > select',
 123     id: 'captions-window-color-%s',
 124     label: 'Color'
 125   },
 126
 127   // Options for this object are defined below.
 128   windowOpacity: {
 129     selector: '.vjs-window-opacity > select',
 130     id: 'captions-window-opacity-%s',
 131     label: 'Transparency',
 132     options: [OPACITY_TRANS, OPACITY_SEMI, OPACITY_OPAQUE]
 133   }
 134 };
 135
 136 selectConfigs.windowColor.options = selectConfigs.backgroundColor.options;
 137
 138 /**
 139  * Get the actual value of an option.
 140  *
 141  * @param  {string} value
 142  *         The value to get
 143  *
 144  * @param  {Function} [parser]
 145  *         Optional function to adjust the value.
 146  *
 147  * @return {Mixed}
 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.
 151  *
 152  * @private
 153  */
 154 function parseOptionValue(value, parser) {
 155   if (parser) {
 156     value = parser(value);
 157   }
 158
 159   if (value && value !== 'none') {
 160     return value;
 161   }
 162 }
 163
 164 /**
 165  * Gets the value of the selected <option> element within a <select> element.
 166  *
 167  * @param  {Element} el
 168  *         the element to look in
 169  *
 170  * @param  {Function} [parser]
 171  *         Optional function to adjust the value.
 172  *
 173  * @return {Mixed}
 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.
 177  *
 178  * @private
 179  */
 180 function getSelectedOptionValue(el, parser) {
 181   var value = el.options[el.options.selectedIndex].value;
 182
 183   return parseOptionValue(value, parser);
 184 }
 185
 186 /**
 187  * Sets the selected <option> element within a <select> element based on a
 188  * given value.
 189  *
 190  * @param {Element} el
 191  *        The element to look in.
 192  *
 193  * @param {string} value
 194  *        the property to look on.
 195  *
 196  * @param {Function} [parser]
 197  *        Optional function to adjust the value before comparing.
 198  *
 199  * @private
 200  */
 201 function setSelectedOption(el, value, parser) {
 202   if (!value) {
 203     return;
 204   }
 205
 206   for (var i = 0; i < el.options.length; i++) {
 207     if (parseOptionValue(el.options[i].value, parser) === value) {
 208       el.selectedIndex = i;
 209       break;
 210     }
 211   }
 212 }
 213
 214 /**
 215  * Manipulate Text Tracks settings.
 216  *
 217  * @extends Component
 218  */
 219
 220 var TextTrackSettings = function (_Component) {
 221   _inherits(TextTrackSettings, _Component);
 222
 223   /**
 224    * Creates an instance of this class.
 225    *
 226    * @param {Player} player
 227    *         The `Player` that this class should be attached to.
 228    *
 229    * @param {Object} [options]
 230    *         The key/value store of player options.
 231    */
 232   function TextTrackSettings(player, options) {
 233     _classCallCheck(this, TextTrackSettings);
 234
 235     var _this = _possibleConstructorReturn(this, _Component.call(this, player, options));
 236
 237     _this.setDefaults();
 238     _this.hide();
 239
 240     _this.updateDisplay = Fn.bind(_this, _this.updateDisplay);
 241
 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;
 245     }
 246
 247     _this.on(_this.$('.vjs-done-button'), 'click', function () {
 248       _this.saveSettings();
 249       _this.hide();
 250     });
 251
 252     _this.on(_this.$('.vjs-default-button'), 'click', function () {
 253       _this.setDefaults();
 254       _this.updateDisplay();
 255     });
 256
 257     Obj.each(selectConfigs, function (config) {
 258       _this.on(_this.$(config.selector), 'change', _this.updateDisplay);
 259     });
 260
 261     if (_this.options_.persistTextTrackSettings) {
 262       _this.restoreSettings();
 263     }
 264     return _this;
 265   }
 266
 267   /**
 268    * Create a <select> element with configured options.
 269    *
 270    * @param {string} key
 271    *        Configuration key to use during creation.
 272    *
 273    * @return {Element}
 274    *         The DOM element that gets created.
 275    * @private
 276    */
 277
 278
 279   TextTrackSettings.prototype.createElSelect_ = function createElSelect_(key) {
 280     var _this2 = this;
 281
 282     var config = selectConfigs[key];
 283     var id = config.id.replace('%s', this.id_);
 284
 285     return [(0, _dom.createEl)('label', {
 286       className: 'vjs-label',
 287       textContent: config.label
 288     }, {
 289       'for': id
 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]),
 293         value: o[0]
 294       });
 295     }))];
 296   };
 297
 298   /**
 299    * Create foreground color element for the component
 300    *
 301    * @return {Element}
 302    *         The element that was created.
 303    *
 304    * @private
 305    */
 306
 307
 308   TextTrackSettings.prototype.createElFgColor_ = function createElFgColor_() {
 309     var legend = (0, _dom.createEl)('legend', {
 310       textContent: this.localize('Text')
 311     });
 312
 313     var select = this.createElSelect_('color');
 314
 315     var opacity = (0, _dom.createEl)('span', {
 316       className: 'vjs-text-opacity vjs-opacity'
 317     }, undefined, this.createElSelect_('textOpacity'));
 318
 319     return (0, _dom.createEl)('fieldset', {
 320       className: 'vjs-fg-color vjs-tracksetting'
 321     }, undefined, [legend].concat(select, opacity));
 322   };
 323
 324   /**
 325    * Create background color element for the component
 326    *
 327    * @return {Element}
 328    *         The element that was created
 329    *
 330    * @private
 331    */
 332
 333
 334   TextTrackSettings.prototype.createElBgColor_ = function createElBgColor_() {
 335     var legend = (0, _dom.createEl)('legend', {
 336       textContent: this.localize('Background')
 337     });
 338
 339     var select = this.createElSelect_('backgroundColor');
 340
 341     var opacity = (0, _dom.createEl)('span', {
 342       className: 'vjs-bg-opacity vjs-opacity'
 343     }, undefined, this.createElSelect_('backgroundOpacity'));
 344
 345     return (0, _dom.createEl)('fieldset', {
 346       className: 'vjs-bg-color vjs-tracksetting'
 347     }, undefined, [legend].concat(select, opacity));
 348   };
 349
 350   /**
 351    * Create window color element for the component
 352    *
 353    * @return {Element}
 354    *         The element that was created
 355    *
 356    * @private
 357    */
 358
 359
 360   TextTrackSettings.prototype.createElWinColor_ = function createElWinColor_() {
 361     var legend = (0, _dom.createEl)('legend', {
 362       textContent: this.localize('Window')
 363     });
 364
 365     var select = this.createElSelect_('windowColor');
 366
 367     var opacity = (0, _dom.createEl)('span', {
 368       className: 'vjs-window-opacity vjs-opacity'
 369     }, undefined, this.createElSelect_('windowOpacity'));
 370
 371     return (0, _dom.createEl)('fieldset', {
 372       className: 'vjs-window-color vjs-tracksetting'
 373     }, undefined, [legend].concat(select, opacity));
 374   };
 375
 376   /**
 377    * Create color elements for the component
 378    *
 379    * @return {Element}
 380    *         The element that was created
 381    *
 382    * @private
 383    */
 384
 385
 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_()]);
 390   };
 391
 392   /**
 393    * Create font elements for the component
 394    *
 395    * @return {Element}
 396    *         The element that was created.
 397    *
 398    * @private
 399    */
 400
 401
 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'));
 406
 407     var edgeStyle = (0, _dom.createEl)('div', {
 408       className: 'vjs-edge-style vjs-tracksetting'
 409     }, undefined, this.createElSelect_('edgeStyle'));
 410
 411     var fontFamily = (0, _dom.createEl)('div', {
 412       className: 'vjs-font-family vjs-tracksetting'
 413     }, undefined, this.createElSelect_('fontFamily'));
 414
 415     return (0, _dom.createEl)('div', {
 416       className: 'vjs-tracksettings-font'
 417     }, undefined, [fontPercent, edgeStyle, fontFamily]);
 418   };
 419
 420   /**
 421    * Create controls for the component
 422    *
 423    * @return {Element}
 424    *         The element that was created.
 425    *
 426    * @private
 427    */
 428
 429
 430   TextTrackSettings.prototype.createElControls_ = function createElControls_() {
 431     var defaultsButton = (0, _dom.createEl)('button', {
 432       className: 'vjs-default-button',
 433       textContent: this.localize('Defaults')
 434     });
 435
 436     var doneButton = (0, _dom.createEl)('button', {
 437       className: 'vjs-done-button',
 438       textContent: 'Done'
 439     });
 440
 441     return (0, _dom.createEl)('div', {
 442       className: 'vjs-tracksettings-controls'
 443     }, undefined, [defaultsButton, doneButton]);
 444   };
 445
 446   /**
 447    * Create the component's DOM element
 448    *
 449    * @return {Element}
 450    *         The element that was created.
 451    */
 452
 453
 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_()]);
 458
 459     var heading = (0, _dom.createEl)('div', {
 460       className: 'vjs-control-text',
 461       id: 'TTsettingsDialogLabel-' + this.id_,
 462       textContent: 'Caption Settings Dialog'
 463     }, {
 464       'aria-level': '1',
 465       'role': 'heading'
 466     });
 467
 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.'
 472     });
 473
 474     var doc = (0, _dom.createEl)('div', undefined, {
 475       role: 'document'
 476     }, [heading, description, settings]);
 477
 478     return (0, _dom.createEl)('div', {
 479       className: 'vjs-caption-settings vjs-modal-overlay',
 480       tabIndex: -1
 481     }, {
 482       'role': 'dialog',
 483       'aria-labelledby': heading.id,
 484       'aria-describedby': description.id
 485     }, doc);
 486   };
 487
 488   /**
 489    * Gets an object of text track settings (or null).
 490    *
 491    * @return {Object}
 492    *         An object with config values parsed from the DOM or localStorage.
 493    */
 494
 495
 496   TextTrackSettings.prototype.getValues = function getValues() {
 497     var _this3 = this;
 498
 499     return Obj.reduce(selectConfigs, function (accum, config, key) {
 500       var value = getSelectedOptionValue(_this3.$(config.selector), config.parser);
 501
 502       if (value !== undefined) {
 503         accum[key] = value;
 504       }
 505
 506       return accum;
 507     }, {});
 508   };
 509
 510   /**
 511    * Sets text track settings from an object of values.
 512    *
 513    * @param {Object} values
 514    *        An object with config values parsed from the DOM or localStorage.
 515    */
 516
 517
 518   TextTrackSettings.prototype.setValues = function setValues(values) {
 519     var _this4 = this;
 520
 521     Obj.each(selectConfigs, function (config, key) {
 522       setSelectedOption(_this4.$(config.selector), values[key], config.parser);
 523     });
 524   };
 525
 526   /**
 527    * Sets all <select> elements to their default values.
 528    */
 529
 530
 531   TextTrackSettings.prototype.setDefaults = function setDefaults() {
 532     var _this5 = this;
 533
 534     Obj.each(selectConfigs, function (config) {
 535       var index = config.hasOwnProperty('default') ? config['default'] : 0;
 536
 537       _this5.$(config.selector).selectedIndex = index;
 538     });
 539   };
 540
 541   /**
 542    * Restore texttrack settings from localStorage
 543    */
 544
 545
 546   TextTrackSettings.prototype.restoreSettings = function restoreSettings() {
 547     var values = void 0;
 548
 549     try {
 550       values = JSON.parse(_window2['default'].localStorage.getItem(LOCAL_STORAGE_KEY));
 551     } catch (err) {
 552       _log2['default'].warn(err);
 553     }
 554
 555     if (values) {
 556       this.setValues(values);
 557     }
 558   };
 559
 560   /**
 561    * Save text track settings to localStorage
 562    */
 563
 564
 565   TextTrackSettings.prototype.saveSettings = function saveSettings() {
 566     if (!this.options_.persistTextTrackSettings) {
 567       return;
 568     }
 569
 570     var values = this.getValues();
 571
 572     try {
 573       if (Object.keys(values).length) {
 574         _window2['default'].localStorage.setItem(LOCAL_STORAGE_KEY, JSON.stringify(values));
 575       } else {
 576         _window2['default'].localStorage.removeItem(LOCAL_STORAGE_KEY);
 577       }
 578     } catch (err) {
 579       _log2['default'].warn(err);
 580     }
 581   };
 582
 583   /**
 584    * Update display of text track settings
 585    */
 586
 587
 588   TextTrackSettings.prototype.updateDisplay = function updateDisplay() {
 589     var ttDisplay = this.player_.getChild('textTrackDisplay');
 590
 591     if (ttDisplay) {
 592       ttDisplay.updateDisplay();
 593     }
 594   };
 595
 596   return TextTrackSettings;
 597 }(_component2['default']);
 598
 599 _component2['default'].registerComponent('TextTrackSettings', TextTrackSettings);
 600
 601 exports['default'] = TextTrackSettings;