summaryrefslogtreecommitdiff
path: root/javascript/videojs/src/js/tracks/text-track-settings.js
diff options
context:
space:
mode:
Diffstat (limited to 'javascript/videojs/src/js/tracks/text-track-settings.js')
-rw-r--r--javascript/videojs/src/js/tracks/text-track-settings.js471
1 files changed, 0 insertions, 471 deletions
diff --git a/javascript/videojs/src/js/tracks/text-track-settings.js b/javascript/videojs/src/js/tracks/text-track-settings.js
deleted file mode 100644
index 07973e8..0000000
--- a/javascript/videojs/src/js/tracks/text-track-settings.js
+++ /dev/null
@@ -1,471 +0,0 @@
-/**
- * @file text-track-settings.js
- */
-import window from 'global/window';
-import Component from '../component';
-import ModalDialog from '../modal-dialog';
-import {createEl} from '../utils/dom';
-import * as Obj from '../utils/obj';
-import log from '../utils/log';
-import TextTrackSettingsColors from './text-track-settings-colors';
-import TextTrackSettingsFont from './text-track-settings-font';
-import TrackSettingsControls from './text-track-settings-controls';
-
-/** @import Player from '../player' */
-
-const LOCAL_STORAGE_KEY = 'vjs-text-track-settings';
-
-const COLOR_BLACK = ['#000', 'Black'];
-const COLOR_BLUE = ['#00F', 'Blue'];
-const COLOR_CYAN = ['#0FF', 'Cyan'];
-const COLOR_GREEN = ['#0F0', 'Green'];
-const COLOR_MAGENTA = ['#F0F', 'Magenta'];
-const COLOR_RED = ['#F00', 'Red'];
-const COLOR_WHITE = ['#FFF', 'White'];
-const COLOR_YELLOW = ['#FF0', 'Yellow'];
-
-const OPACITY_OPAQUE = ['1', 'Opaque'];
-const OPACITY_SEMI = ['0.5', 'Semi-Transparent'];
-const OPACITY_TRANS = ['0', 'Transparent'];
-
-// Configuration for the various <select> elements in the DOM of this component.
-//
-// Possible keys include:
-//
-// `default`:
-// The default option index. Only needs to be provided if not zero.
-// `parser`:
-// A function which is used to parse the value from the selected option in
-// a customized way.
-// `selector`:
-// The selector used to find the associated <select> element.
-const selectConfigs = {
- backgroundColor: {
- selector: '.vjs-bg-color > select',
- id: 'captions-background-color-%s',
- label: 'Color',
- options: [
- COLOR_BLACK,
- COLOR_WHITE,
- COLOR_RED,
- COLOR_GREEN,
- COLOR_BLUE,
- COLOR_YELLOW,
- COLOR_MAGENTA,
- COLOR_CYAN
- ],
- className: 'vjs-bg-color'
- },
-
- backgroundOpacity: {
- selector: '.vjs-bg-opacity > select',
- id: 'captions-background-opacity-%s',
- label: 'Opacity',
- options: [
- OPACITY_OPAQUE,
- OPACITY_SEMI,
- OPACITY_TRANS
- ],
- className: 'vjs-bg-opacity vjs-opacity'
- },
-
- color: {
- selector: '.vjs-text-color > select',
- id: 'captions-foreground-color-%s',
- label: 'Color',
- options: [
- COLOR_WHITE,
- COLOR_BLACK,
- COLOR_RED,
- COLOR_GREEN,
- COLOR_BLUE,
- COLOR_YELLOW,
- COLOR_MAGENTA,
- COLOR_CYAN
- ],
- className: 'vjs-text-color'
- },
-
- edgeStyle: {
- selector: '.vjs-edge-style > select',
- id: '',
- label: 'Text Edge Style',
- options: [
- ['none', 'None'],
- ['raised', 'Raised'],
- ['depressed', 'Depressed'],
- ['uniform', 'Uniform'],
- ['dropshadow', 'Drop shadow']
- ]
- },
-
- fontFamily: {
- selector: '.vjs-font-family > select',
- id: '',
- label: 'Font Family',
- options: [
- ['proportionalSansSerif', 'Proportional Sans-Serif'],
- ['monospaceSansSerif', 'Monospace Sans-Serif'],
- ['proportionalSerif', 'Proportional Serif'],
- ['monospaceSerif', 'Monospace Serif'],
- ['casual', 'Casual'],
- ['script', 'Script'],
- ['small-caps', 'Small Caps']
- ]
- },
-
- fontPercent: {
- selector: '.vjs-font-percent > select',
- id: '',
- label: 'Font Size',
- 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%']
- ],
- default: 2,
- parser: (v) => v === '1.00' ? null : Number(v)
- },
-
- textOpacity: {
- selector: '.vjs-text-opacity > select',
- id: 'captions-foreground-opacity-%s',
- label: 'Opacity',
- options: [
- OPACITY_OPAQUE,
- OPACITY_SEMI
- ],
- className: 'vjs-text-opacity vjs-opacity'
- },
-
- // Options for this object are defined below.
- windowColor: {
- selector: '.vjs-window-color > select',
- id: 'captions-window-color-%s',
- label: 'Color',
- className: 'vjs-window-color'
- },
-
- // Options for this object are defined below.
- windowOpacity: {
- selector: '.vjs-window-opacity > select',
- id: 'captions-window-opacity-%s',
- label: 'Opacity',
- options: [
- OPACITY_TRANS,
- OPACITY_SEMI,
- OPACITY_OPAQUE
- ],
- className: 'vjs-window-opacity vjs-opacity'
- }
-};
-
-selectConfigs.windowColor.options = selectConfigs.backgroundColor.options;
-
-/**
- * Get the actual value of an option.
- *
- * @param {string} value
- * The value to get
- *
- * @param {Function} [parser]
- * Optional function to adjust the value.
- *
- * @return {*}
- * - Will be `undefined` if no value exists
- * - Will be `undefined` if the given value is "none".
- * - Will be the actual value otherwise.
- *
- * @private
- */
-function parseOptionValue(value, parser) {
- if (parser) {
- value = parser(value);
- }
-
- if (value && value !== 'none') {
- return value;
- }
-}
-
-/**
- * Gets the value of the selected <option> element within a <select> element.
- *
- * @param {Element} el
- * the element to look in
- *
- * @param {Function} [parser]
- * Optional function to adjust the value.
- *
- * @return {*}
- * - Will be `undefined` if no value exists
- * - Will be `undefined` if the given value is "none".
- * - Will be the actual value otherwise.
- *
- * @private
- */
-function getSelectedOptionValue(el, parser) {
- const value = el.options[el.options.selectedIndex].value;
-
- return parseOptionValue(value, parser);
-}
-
-/**
- * Sets the selected <option> element within a <select> element based on a
- * given value.
- *
- * @param {Element} el
- * The element to look in.
- *
- * @param {string} value
- * the property to look on.
- *
- * @param {Function} [parser]
- * Optional function to adjust the value before comparing.
- *
- * @private
- */
-function setSelectedOption(el, value, parser) {
- if (!value) {
- return;
- }
-
- for (let i = 0; i < el.options.length; i++) {
- if (parseOptionValue(el.options[i].value, parser) === value) {
- el.selectedIndex = i;
- break;
- }
- }
-}
-
-/**
- * Manipulate Text Tracks settings.
- *
- * @extends ModalDialog
- */
-class TextTrackSettings extends ModalDialog {
-
- /**
- * Creates an instance of this class.
- *
- * @param {Player} player
- * The `Player` that this class should be attached to.
- *
- * @param {Object} [options]
- * The key/value store of player options.
- */
- constructor(player, options) {
- options.temporary = false;
-
- super(player, options);
-
- this.updateDisplay = this.updateDisplay.bind(this);
-
- // fill the modal and pretend we have opened it
- this.fill();
- this.hasBeenOpened_ = this.hasBeenFilled_ = true;
-
- this.renderModalComponents(player);
-
- this.endDialog = createEl('p', {
- className: 'vjs-control-text',
- textContent: this.localize('End of dialog window.')
- });
- this.el().appendChild(this.endDialog);
-
- this.setDefaults();
-
- // Grab `persistTextTrackSettings` from the player options if not passed in child options
- if (options.persistTextTrackSettings === undefined) {
- this.options_.persistTextTrackSettings = this.options_.playerOptions.persistTextTrackSettings;
- }
-
- this.bindFunctionsToSelectsAndButtons();
-
- if (this.options_.persistTextTrackSettings) {
- this.restoreSettings();
- }
- }
-
- renderModalComponents(player) {
- const textTrackSettingsColors = new TextTrackSettingsColors(
- player,
- {
- textTrackComponentid: this.id_,
- selectConfigs,
- fieldSets:
- [
- ['color', 'textOpacity'],
- ['backgroundColor', 'backgroundOpacity'],
- ['windowColor', 'windowOpacity']
- ]
- }
- );
-
- this.addChild(textTrackSettingsColors);
-
- const textTrackSettingsFont = new TextTrackSettingsFont(
- player,
- {
- textTrackComponentid: this.id_,
- selectConfigs,
- fieldSets:
- [
- ['fontPercent'],
- ['edgeStyle'],
- ['fontFamily']
- ]
- }
- );
-
- this.addChild(textTrackSettingsFont);
-
- const trackSettingsControls = new TrackSettingsControls(player);
-
- this.addChild(trackSettingsControls);
- }
-
- bindFunctionsToSelectsAndButtons() {
- this.on(this.$('.vjs-done-button'), ['click', 'tap'], () => {
- this.saveSettings();
- this.close();
- });
-
- this.on(this.$('.vjs-default-button'), ['click', 'tap'], () => {
- this.setDefaults();
- this.updateDisplay();
- });
-
- Obj.each(selectConfigs, config => {
- this.on(this.$(config.selector), 'change', this.updateDisplay);
- });
- }
-
- dispose() {
- this.endDialog = null;
-
- super.dispose();
- }
-
- label() {
- return this.localize('Caption Settings Dialog');
- }
-
- description() {
- return this.localize('Beginning of dialog window. Escape will cancel and close the window.');
- }
-
- buildCSSClass() {
- return super.buildCSSClass() + ' vjs-text-track-settings';
- }
-
- /**
- * Gets an object of text track settings (or null).
- *
- * @return {Object}
- * An object with config values parsed from the DOM or localStorage.
- */
- getValues() {
- return Obj.reduce(selectConfigs, (accum, config, key) => {
- const value = getSelectedOptionValue(this.$(config.selector), config.parser);
-
- if (value !== undefined) {
- accum[key] = value;
- }
-
- return accum;
- }, {});
- }
-
- /**
- * Sets text track settings from an object of values.
- *
- * @param {Object} values
- * An object with config values parsed from the DOM or localStorage.
- */
- setValues(values) {
- Obj.each(selectConfigs, (config, key) => {
- setSelectedOption(this.$(config.selector), values[key], config.parser);
- });
- }
-
- /**
- * Sets all `<select>` elements to their default values.
- */
- setDefaults() {
- Obj.each(selectConfigs, (config) => {
- const index = config.hasOwnProperty('default') ? config.default : 0;
-
- this.$(config.selector).selectedIndex = index;
- });
- }
-
- /**
- * Restore texttrack settings from localStorage
- */
- restoreSettings() {
- let values;
-
- try {
- values = JSON.parse(window.localStorage.getItem(LOCAL_STORAGE_KEY));
- } catch (err) {
- log.warn(err);
- }
-
- if (values) {
- this.setValues(values);
- }
- }
-
- /**
- * Save text track settings to localStorage
- */
- saveSettings() {
- if (!this.options_.persistTextTrackSettings) {
- return;
- }
-
- const values = this.getValues();
-
- try {
- if (Object.keys(values).length) {
- window.localStorage.setItem(LOCAL_STORAGE_KEY, JSON.stringify(values));
- } else {
- window.localStorage.removeItem(LOCAL_STORAGE_KEY);
- }
- } catch (err) {
- log.warn(err);
- }
- }
-
- /**
- * Update display of text track settings
- */
- updateDisplay() {
- const ttDisplay = this.player_.getChild('textTrackDisplay');
-
- if (ttDisplay) {
- ttDisplay.updateDisplay();
- }
- }
-
- /**
- * Repopulate dialog with new localizations on languagechange
- */
- handleLanguagechange() {
- this.fill();
- this.renderModalComponents(this.player_);
- this.bindFunctionsToSelectsAndButtons();
- }
-
-}
-
-Component.registerComponent('TextTrackSettings', TextTrackSettings);
-
-export default TextTrackSettings;