function _addTextStyle(textStyle, options) {
const color = options.color;
const fontOpacity = options.fontOpacity;
if (color || fontOpacity !== _defaults.fontOpacity) {
textStyle.color = getRgba(color || '#ffffff', fontOpacity);
}
if (options.back) {
const bgColor = options.backgroundColor;
const bgOpacity = options.backgroundOpacity;
if (bgColor !== _defaults.backgroundColor || bgOpacity !== _defaults.backgroundOpacity) {
textStyle.backgroundColor = getRgba(bgColor, bgOpacity);
}
} else {
textStyle.background = 'transparent';
}
if (options.fontFamily) {
textStyle.fontFamily = options.fontFamily;
}
if (options.fontStyle) {
textStyle.fontStyle = options.fontStyle;
}
if (options.fontWeight) {
textStyle.fontWeight = options.fontWeight;
}
if (options.textDecoration) {
textStyle.textDecoration = options.textDecoration;
}
}
it('getRgba', function() {
// this should not break
getRgba(null, null);
var rgba = getRgba('123456', 0.5);
assert.equal(rgba, 'rgba(18, 52, 86, 0.005)', 'css getRgba test');
rgba = getRgba('123', 0);
assert.equal(rgba, 'rgba(17, 34, 51, 0)', 'css getRgba test with length 3');
rgba = getRgba('', 0);
assert.equal(rgba, 'rgba(0, 0, 0, 0)', 'css getRgba test with invalid value');
rgba = getRgba('red');
assert.equal(rgba, 'rgb(255, 0, 0)', 'css getRgba test with color value and no alpha');
});
function _addEdgeStyle(option, styles, fontOpacity) {
const color = getRgba('#000000', fontOpacity);
if (option === 'dropshadow') { // small drop shadow
styles.textShadow = '0 2px 1px ' + color;
} else if (option === 'raised') { // larger drop shadow
styles.textShadow = '0 0 5px ' + color + ', 0 1px 5px ' + color + ', 0 2px 5px ' + color;
} else if (option === 'depressed') { // top down shadow
styles.textShadow = '0 -2px 1px ' + color;
} else if (option === 'uniform') { // outline
styles.textShadow = '-2px 0 1px ' + color + ',2px 0 1px ' + color +
',0 -2px 1px ' + color + ',0 2px 1px ' + color + ',-1px 1px 1px ' +
color + ',1px 1px 1px ' + color + ',1px -1px 1px ' + color +
',1px 1px 1px ' + color;
}
}
this.setup = function (playerElementId, options) {
_captionsWindow = document.createElement('div');
_textContainer = document.createElement('span');
_captionsWindow.className = 'jw-captions-window jw-reset';
_textContainer.className = 'jw-captions-text jw-reset';
_options = Object.assign({}, _defaults, options);
_fontScale = _defaults.fontScale;
_setFontScale(_options.fontSize);
const windowColor = _options.windowColor;
const windowOpacity = _options.windowOpacity;
const edgeStyle = _options.edgeStyle;
_windowStyle = {};
const textStyle = {};
_addTextStyle(textStyle, _options);
if (windowColor || windowOpacity !== _defaults.windowOpacity) {
_windowStyle.backgroundColor = getRgba(windowColor || '#000000', windowOpacity);
}
_addEdgeStyle(edgeStyle, textStyle, _options.fontOpacity);
if (!_options.back && edgeStyle === null) {
_addEdgeStyle('uniform', textStyle);
}
style(_captionsWindow, _windowStyle);
style(_textContainer, textStyle);
_setupCaptionStyles(playerElementId, textStyle);
_captionsWindow.appendChild(_textContainer);
_display.appendChild(_captionsWindow);
_model.change('captionsTrack', function (model, captionsTrack) {
this.populate(captionsTrack);
}, this);
_model.set('captions', _options);
};
function styleTimeslider(config) {
addStyle([
'.jw-progress',
'.jw-knob'
], 'background-color', config.progress);
addStyle([
'.jw-buffer',
], 'background-color', getRgba(config.progress, 50));
addStyle([
'.jw-rail'
], 'background-color', config.rail);
addStyle([
'.jw-background-color.jw-slider-time',
'.jw-slider-time .jw-cue'
], 'background-color', config.background);
}