1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
|
import Component from '../component';
import * as Dom from '../utils/dom';
import * as Guid from '../utils/guid';
import TextTrackSelect from './text-track-select';
/** @import Player from './player' */
/** @import { ContentDescriptor } from '../utils/dom' */
/**
* Creates fieldset section of 'TextTrackSettings'.
* Manganes two versions of fieldsets, one for type of 'colors'
* & the other for 'font', Component adds diferent DOM elements
* to that fieldset depending on the type.
*
* @extends Component
*/
class TextTrackFieldset extends Component {
/**
* 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.
*
* @param {ContentDescriptor} [options.content=undefined]
* Provide customized content for this modal.
*
* @param {string} [options.legendId]
* A text with part of an string to create atribute of aria-labelledby.
* It passes to 'TextTrackSelect'.
*
* @param {string} [options.id]
* A text with part of an string to create atribute of aria-labelledby.
* It passes to 'TextTrackSelect'.
*
* @param {string} [options.legendText]
* A text to use as the text content of the legend element.
*
* @param {Array} [options.selects]
* Array that contains the selects that are use to create 'selects'
* components.
*
* @param {Array} [options.SelectOptions]
* Array that contains the value & textContent of for each of the
* options elements, it passes to 'TextTrackSelect'.
*
* @param {string} [options.type]
* Conditions if some DOM elements will be added to the fieldset
* component.
*
* @param {Object} [options.selectConfigs]
* Object with the following properties that are the selects configurations:
* backgroundColor, backgroundOpacity, color, edgeStyle, fontFamily,
* fontPercent, textOpacity, windowColor, windowOpacity.
* These properties are use to configure the 'TextTrackSelect' Component.
*/
constructor(player, options = {}) {
super(player, options);
// Add Components & DOM Elements
const legendElement = Dom.createEl('legend', {
textContent: this.localize(this.options_.legendText),
id: this.options_.legendId
});
this.el().appendChild(legendElement);
const selects = this.options_.selects;
// Iterate array of selects to create 'selects' components
for (const i of selects) {
const selectConfig = this.options_.selectConfigs[i];
const selectClassName = selectConfig.className;
const id = selectConfig.id.replace('%s', this.options_.id_);
let span = null;
const guid = `vjs_select_${Guid.newGUID()}`;
// Conditionally create span to add on the component
if (this.options_.type === 'colors') {
span = Dom.createEl('span', {
className: selectClassName
});
const label = Dom.createEl('label', {
id,
className: 'vjs-label',
textContent: this.localize(selectConfig.label)
});
label.setAttribute('for', guid);
span.appendChild(label);
}
const textTrackSelect = new TextTrackSelect(player, {
SelectOptions: selectConfig.options,
legendId: this.options_.legendId,
id: guid,
labelId: id
});
this.addChild(textTrackSelect);
// Conditionally append to 'select' component to conditionally created span
if (this.options_.type === 'colors') {
span.appendChild(textTrackSelect.el());
this.el().appendChild(span);
}
}
}
/**
* Create the `TextTrackFieldset`'s DOM element
*
* @return {Element}
* The DOM element that gets created.
*/
createEl() {
const el = Dom.createEl('fieldset', {
// Prefixing classes of elements within a player with "vjs-"
// is a convention used in Video.js.
className: this.options_.className
});
return el;
}
}
Component.registerComponent('TextTrackFieldset', TextTrackFieldset);
export default TextTrackFieldset;
|
