diff --git a/docs/configuration.md b/docs/configuration.md index b17067047..c5a2ecfbe 100644 --- a/docs/configuration.md +++ b/docs/configuration.md @@ -38,15 +38,18 @@ var config = { }, metadata: {} }, - playback: { - audioLanguage: '', - textLanguage: '', - useNativeTextTrack: false, + text: { enableCEA708Captions: false, + useNativeTextTrack: false, + forceCenter: false, captionsTextTrack1Label: 'English', captionsTextTrack1LanguageCode: 'en', captionsTextTrack2Label: 'Spanish', - captionsTextTrack2LanguageCode: 'es', + captionsTextTrack2LanguageCode: 'es' + }, + playback: { + audioLanguage: '', + textLanguage: '', volume: 1, startTime: -1, playsinline: true, @@ -457,22 +460,140 @@ var config = { > > }; > > ``` -## - -> ### config.playback +> ## +> ### config.text > -> ##### Type: `PKPlaybackConfigObject` +> ##### Type: `PKTextConfigObject` > > ```js > { -> audioLanguage: string, -> textLanguage: string, > useNativeTextTrack: boolean, > enableCEA708Captions: boolean, +> forceCenter: boolean, +> textTrackDisplaySetting: Object, +> textStyle: TextStyle, > captionsTextTrack1Label: string, > captionsTextTrack1LanguageCode: string, > captionsTextTrack2Label: string, -> captionsTextTrack2LanguageCode: string, +> captionsTextTrack2LanguageCode: string +> } +> ``` +> +> ##### Default: +> +> ```js +> { +> useNativeTextTrack: false, +> enableCEA708Captions: false, +> forceCenter: false, +> captionsTextTrack1Label: "English", +> captionsTextTrack1LanguageCode: "en", +> captionsTextTrack2Label: "Spanish", +> captionsTextTrack2LanguageCode: "es" +> } +> ``` +> +> ## +> +> > ### config.text.useNativeTextTrack +> > +> > ##### Type: `boolean` +> > +> > ##### Default: `false` +> > +> > ##### Description: Determines whether to use native browser text tracks or not. +> > +> > If set to True, the native browser captions will be displayed. +> +> ## +> +> > ### config.text.enableCEA708Captions +> > +> > ##### Type: `boolean` +> > +> > ##### Default: `false` +> > +> > ##### Description: Whether or not to enable CEA-708 captions. +> +> ## +> +> > ### config.text.forceCenter +> > +> > ##### Type: `Object` +> > +> > ##### Default: `false` +> > +> > ##### Description: set the forceCenter to true will override the position, align and size in textTrackDisplaySetting +> +> ## +> +> > ### config.text.textTrackDisplaySetting +> > +> > ##### Type: `Object` +> > +> > ##### Default: `null` +> > +> > ##### Description: set the textTrackDisplaySetting to override the cues position +> +> ## +> +> > ### config.text.textStyle +> > +> > ##### Type: `TextStyle` +> > +> > ##### Default: `null` +> > +> > ##### Description: set the styling for text tracks +> +> ## +> +> > ### config.text.captionsTextTrack1Label +> > +> > ##### Type: `string` +> > +> > ##### Default: `English` +> > +> > ##### Description: Label for the CEA-708 captions track 1. +> +> ## +> +> > ### config.text.captionsTextTrack1LanguageCode +> > +> > ##### Type: `string` +> > +> > ##### Default: `en` +> > +> > ##### Description: RFC 3066 language code for the CEA-708 captions track 1. +> +> ## +> +> > ### config.text.captionsTextTrack2Label +> > +> > ##### Type: `string` +> > +> > ##### Default: `Spanish` +> > +> > ##### Description: Label for the CEA-708 captions track 2. +> +> ## +> +> > ### config.text.captionsTextTrack2LanguageCode +> > +> > ##### Type: `string` +> > +> > ##### Default: `es` +> > +> > ##### Description: RFC 3066 language code for the CEA-708 captions track 2. +> +> ## +> ### config.playback +> +> ##### Type: `PKPlaybackConfigObject` +> +> ```js +> { +> audioLanguage: string, +> textLanguage: string, > volume: number, > startTime: number, > playsinline: boolean, @@ -497,12 +618,6 @@ var config = { > { > audioLanguage: "", > textLanguage: "", -> useNativeTextTrack: false, -> enableCEA708Captions: false, -> captionsTextTrack1Label: "English", -> captionsTextTrack1LanguageCode: "en", -> captionsTextTrack2Label: "Spanish", -> captionsTextTrack2LanguageCode: "es", > volume: 1, > startTime: -1, > playsinline: true, @@ -603,68 +718,6 @@ var config = { > > ## > -> > ### config.playback.useNativeTextTrack -> > -> > ##### Type: `boolean` -> > -> > ##### Default: `false` -> > -> > ##### Description: Determines whether to use native browser text tracks or not. -> > -> > If set to True, the native browser captions will be displayed. -> -> ## -> -> > ### config.playback.enableCEA708Captions -> > -> > ##### Type: `boolean` -> > -> > ##### Default: `false` -> > -> > ##### Description: Whether or not to enable CEA-708 captions. -> -> ## -> -> > ### config.playback.captionsTextTrack1Label -> > -> > ##### Type: `string` -> > -> > ##### Default: `English` -> > -> > ##### Description: Label for the CEA-708 captions track 1. -> -> ## -> -> > ### config.playback.captionsTextTrack1LanguageCode -> > -> > ##### Type: `string` -> > -> > ##### Default: `en` -> > -> > ##### Description: RFC 3066 language code for the CEA-708 captions track 1. -> -> ## -> -> > ### config.playback.captionsTextTrack2Label -> > -> > ##### Type: `string` -> > -> > ##### Default: `Spanish` -> > -> > ##### Description: Label for the CEA-708 captions track 2. -> -> ## -> -> > ### config.playback.captionsTextTrack2LanguageCode -> > -> > ##### Type: `string` -> > -> > ##### Default: `es` -> > -> > ##### Description: RFC 3066 language code for the CEA-708 captions track 2. -> -> ## -> > > ### config.playback.volume > > > > ##### Type: `number` diff --git a/flow-typed/types/playback-config.js b/flow-typed/types/playback-config.js index 91afabd87..f9705dba5 100644 --- a/flow-typed/types/playback-config.js +++ b/flow-typed/types/playback-config.js @@ -2,7 +2,6 @@ declare type PKPlaybackConfigObject = { audioLanguage: string, textLanguage: string, - useNativeTextTrack: boolean, volume: number, playsinline: boolean, crossOrigin: string, diff --git a/flow-typed/types/text-config.js b/flow-typed/types/text-config.js new file mode 100644 index 000000000..bc111313e --- /dev/null +++ b/flow-typed/types/text-config.js @@ -0,0 +1,14 @@ +// @flow +import {TextStyle} from '../../src/track/text-style'; + +declare type PKTextConfigObject = { + enableCEA708Captions: boolean, + useNativeTextTrack: boolean, + textTrackDisplaySetting: Object, + textStyle: TextStyle | PKTextStyleObject, + forceCenter: boolean, + captionsTextTrack1Label: string, + captionsTextTrack1LanguageCode: string, + captionsTextTrack2Label: string, + captionsTextTrack2LanguageCode: string +}; diff --git a/flow-typed/types/text-style.js b/flow-typed/types/text-style.js new file mode 100644 index 000000000..f412687bf --- /dev/null +++ b/flow-typed/types/text-style.js @@ -0,0 +1,11 @@ +// @flow +declare type PKTextStyleObject = { + fontSize: string, + fontScale: number, + fontFamily: string, + fontColor: Array, + fontOpacity: number, + backgroundColor: Array, + backgroundOpacity: number, + fontEdge: Array> +}; diff --git a/src/engines/html5/media-source/adapters/native-adapter.js b/src/engines/html5/media-source/adapters/native-adapter.js index a0a60e166..d5026d376 100644 --- a/src/engines/html5/media-source/adapters/native-adapter.js +++ b/src/engines/html5/media-source/adapters/native-adapter.js @@ -188,18 +188,20 @@ export default class NativeAdapter extends BaseMediaSourceAdapter { displayTextTrack: false, progressiveSources: [] }; - if (Utils.Object.hasPropertyPath(config, 'playback.useNativeTextTrack')) { - adapterConfig.displayTextTrack = Utils.Object.getPropertyPath(config, 'playback.useNativeTextTrack'); + if (Utils.Object.hasPropertyPath(config, 'text.useNativeTextTrack')) { + adapterConfig.displayTextTrack = Utils.Object.getPropertyPath(config, 'text.useNativeTextTrack'); } if (Utils.Object.hasPropertyPath(config, 'sources.progressive')) { adapterConfig.progressiveSources = Utils.Object.getPropertyPath(config, 'sources.progressive'); } - if (config.playback) { - adapterConfig.enableCEA708Captions = config.playback.enableCEA708Captions; - adapterConfig.captionsTextTrack1Label = config.playback.captionsTextTrack1Label; - adapterConfig.captionsTextTrack1LanguageCode = config.playback.captionsTextTrack1LanguageCode; - adapterConfig.captionsTextTrack2Label = config.playback.captionsTextTrack2Label; - adapterConfig.captionsTextTrack2LanguageCode = config.playback.captionsTextTrack2LanguageCode; + if (Utils.Object.hasPropertyPath(config, 'text')) { + adapterConfig.enableCEA708Captions = config.text.enableCEA708Captions; + adapterConfig.captionsTextTrack1Label = config.text.captionsTextTrack1Label; + adapterConfig.captionsTextTrack1LanguageCode = config.text.captionsTextTrack1LanguageCode; + adapterConfig.captionsTextTrack2Label = config.text.captionsTextTrack2Label; + adapterConfig.captionsTextTrack2LanguageCode = config.text.captionsTextTrack2LanguageCode; + } + if (Utils.Object.hasPropertyPath(config, 'playback')) { if (Utils.Object.hasPropertyPath(config.playback, 'options.html5.native')) { Utils.Object.mergeDeep(adapterConfig, config.playback.options.html5.native); } diff --git a/src/player-config.js b/src/player-config.js index 0e32bb990..518c3cfbe 100644 --- a/src/player-config.js +++ b/src/player-config.js @@ -10,15 +10,18 @@ const DefaultConfig = { }, metadata: {} }, - playback: { - audioLanguage: '', - textLanguage: '', - useNativeTextTrack: false, + text: { enableCEA708Captions: false, + useNativeTextTrack: false, + forceCenter: false, captionsTextTrack1Label: 'English', captionsTextTrack1LanguageCode: 'en', captionsTextTrack2Label: 'Spanish', - captionsTextTrack2LanguageCode: 'es', + captionsTextTrack2LanguageCode: 'es' + }, + playback: { + audioLanguage: '', + textLanguage: '', volume: 1, startTime: -1, playsinline: true, diff --git a/src/player.js b/src/player.js index dd4fffd3c..5d063feee 100644 --- a/src/player.js +++ b/src/player.js @@ -481,6 +481,7 @@ export default class Player extends FakeEventTarget { } else { Utils.Object.mergeDeep(this._config, config); } + this._applyTextTrackConfig(config); } /** @@ -1258,6 +1259,41 @@ export default class Player extends FakeEventTarget { return false; } + /** + * update the text track config from current config + * @function _applyTextTrackConfig + * @returns {void} + * @param {Object} config - new config which configure for checking if it relevant config has changed + * @private + */ + _applyTextTrackConfig(config: Object): void { + if (Utils.Object.hasPropertyPath(config, 'text.textTrackDisplaySetting') || Utils.Object.getPropertyPath(config, 'text.forceCenter')) { + let textDisplaySettings = {}; + if (Utils.Object.hasPropertyPath(this._config, 'text.textTrackDisplaySetting')) { + textDisplaySettings = Utils.Object.mergeDeep(textDisplaySettings, this._config.text.textTrackDisplaySetting); + } + if (Utils.Object.getPropertyPath(this._config, 'text.forceCenter')) { + textDisplaySettings = Utils.Object.mergeDeep(textDisplaySettings, { + position: 'auto', + align: 'center', + size: '100' + }); + } + this.setTextDisplaySettings(textDisplaySettings); + } + try { + if (Utils.Object.hasPropertyPath(config, 'text.textStyle')) { + if (this._config.text.textStyle instanceof TextStyle) { + this.textStyle = this._config.text.textStyle; + } else { + this._textStyle.setTextStyle(this._config.text.textStyle); + } + } + } catch (e) { + Player._logger.warn(e); + } + } + /** * update the text display settings * @param {Object} settings - text cue display settings @@ -1265,7 +1301,7 @@ export default class Player extends FakeEventTarget { * @returns {void} */ setTextDisplaySettings(settings: Object): void { - this._textDisplaySettings = settings; + this._textDisplaySettings = Utils.Object.mergeDeep(this._textDisplaySettings, settings); this._updateCueDisplaySettings(); for (let i = 0; i < this._activeTextCues.length; i++) { this._activeTextCues[i].hasBeenReset = true; @@ -1273,6 +1309,9 @@ export default class Player extends FakeEventTarget { this._updateTextDisplay(this._activeTextCues); } + get textDisplaySetting(): Object { + return Utils.Object.copyDeep(this._textDisplaySettings); + } /** * Sets style attributes for text tracks. * @param {TextStyle} style - text styling settings @@ -1297,7 +1336,7 @@ export default class Player extends FakeEventTarget { try { this._textStyle = style; - if (this._config.playback.useNativeTextTrack) { + if (this._config.text.useNativeTextTrack) { sheet.insertRule(`#${this._playerId} video.${ENGINE_CLASS_NAME}::cue { ${style.toCSS()} }`, 0); } else if (this._engine) { this._engine.resetAllCues(); @@ -2250,7 +2289,9 @@ export default class Player extends FakeEventTarget { for (let i = 0; i < activeCues.length; i++) { let cue = activeCues[i]; for (let name in settings) { - cue[name] = settings[name]; + if (settings[name]) { + cue[name] = settings[name]; + } } } } @@ -2262,7 +2303,7 @@ export default class Player extends FakeEventTarget { * @returns {void} */ _updateTextDisplay(cues: Array): void { - if (!this._config.playback.useNativeTextTrack) { + if (!this._config.text.useNativeTextTrack) { processCues(window, cues, this._textDisplayEl, this._textStyle); } } diff --git a/src/track/external-captions-handler.js b/src/track/external-captions-handler.js index 152efa9b6..7ac7af06e 100644 --- a/src/track/external-captions-handler.js +++ b/src/track/external-captions-handler.js @@ -98,7 +98,7 @@ class ExternalCaptionsHandler extends FakeEventTarget { * @public */ hideTextTrack(): void { - if (this._player.config.playback.useNativeTextTrack) { + if (this._player.config.text.useNativeTextTrack) { this._resetExternalNativeTextTrack(); } else { // only if external text track was active we need to hide it. @@ -121,7 +121,7 @@ class ExternalCaptionsHandler extends FakeEventTarget { if (!captions) { return []; } - if (this._player.config.playback.useNativeTextTrack) { + if (this._player.config.text.useNativeTextTrack) { this._addNativeTextTrack(); } const playerTextTracks = tracks.filter(track => track instanceof TextTrack); @@ -213,7 +213,7 @@ class ExternalCaptionsHandler extends FakeEventTarget { } _selectTextTrack(textTrack: TextTrack) { this.hideTextTrack(); - if (this._player.config.playback.useNativeTextTrack) { + if (this._player.config.text.useNativeTextTrack) { this._addCuesToNativeTextTrack(this._textTrackModel[textTrack.language].cues); } else { this._setTextTrack(textTrack); @@ -515,7 +515,7 @@ class ExternalCaptionsHandler extends FakeEventTarget { * @private */ _setTextTrack(textTrack: TextTrack): void { - if (!this._player.config.playback.useNativeTextTrack) { + if (!this._player.config.text.useNativeTextTrack) { this._isTextTrackActive = true; ExternalCaptionsHandler._logger.debug('External text track changed', textTrack); this._activeTextCues = []; diff --git a/src/track/text-style.js b/src/track/text-style.js index 2302683a3..59df8f2db 100644 --- a/src/track/text-style.js +++ b/src/track/text-style.js @@ -1,4 +1,5 @@ // @flow +import * as Utils from '../utils/util'; /** * We use this number to calculate the scale of the text. so it will be : 1 + 0.25 * FontSizes.value * So, if the user selects 400% the scale would be: 1 + 0.25 * 4 = 2. so the font size should be multiplied by 2. @@ -138,55 +139,64 @@ class TextStyle { return 'rgba(' + color.concat(opacity).join(',') + ')'; } - /** - * Font size, such as 1, 2, 3... - * @type {number} - */ - fontSize: string = '100%'; + _config: PKTextStyleObject = { + /** + * Font size, such as 1, 2, 3... + * @type {number} + */ + fontSize: '100%', + fontScale: 1, + /** + * @type {TextStyle.FontFamily} + */ + fontFamily: TextStyle.FontFamily.SANS_SERIF, + /** + * @type {TextStyle.StandardColors} + */ + fontColor: TextStyle.StandardColors.WHITE, - fontScale: number = 1; + /** + * @type {TextStyle.StandardOpacities} + * @expose + */ + fontOpacity: TextStyle.StandardOpacities.OPAQUE, - /** - * @type {TextStyle.FontFamily} - */ - fontFamily: string = TextStyle.FontFamily.SANS_SERIF; - - /** - * @type {TextStyle.StandardColors} - */ - fontColor: Array = TextStyle.StandardColors.WHITE; + /** + * @type {TextStyle.StandardColors} + */ + backgroundColor: TextStyle.StandardColors.BLACK, - /** - * @type {TextStyle.StandardOpacities} - * @expose - */ - fontOpacity: number = TextStyle.StandardOpacities.OPAQUE; + /** + * @type {TextStyle.StandardOpacities} + */ + backgroundOpacity: TextStyle.StandardOpacities.OPAQUE, - /** - * @type {TextStyle.StandardColors} - */ - backgroundColor: Array = TextStyle.StandardColors.BLACK; + /** + * @type {TextStyle.EdgeStyles} + * @expose + */ + fontEdge: TextStyle.EdgeStyles.NONE + }; - /** - * @type {TextStyle.StandardOpacities} - */ - backgroundOpacity: number = TextStyle.StandardOpacities.OPAQUE; + constructor(settings?: PKTextStyleObject) { + this.setTextStyle(settings); + } - /** - * @type {TextStyle.EdgeStyles} - * @expose - */ - fontEdge: Array> = TextStyle.EdgeStyles.NONE; + setTextStyle(settings?: PKTextStyleObject) { + if (settings) { + this._config = Utils.Object.mergeDeep({}, this._config, settings); + } + } getTextShadow(): string { // A given edge effect may be implemented with multiple shadows. // Collect them all into an array, then combine into one attribute. let shadows: Array = []; - for (let i = 0; i < this.fontEdge.length; i++) { + for (let i = 0; i < this._config.fontEdge.length; i++) { // shaka.asserts.assert(this.fontEdge[i].length == 6); - const color: Array = this.fontEdge[i].slice(0, 3); - let shadow: Array = this.fontEdge[i].slice(3, 6); - shadows.push(TextStyle.toRGBA(color, this.fontOpacity) + ' ' + shadow.join('px ') + 'px'); + const color: Array = this._config.fontEdge[i].slice(0, 3); + let shadow: Array = this._config.fontEdge[i].slice(3, 6); + shadows.push(TextStyle.toRGBA(color, this._config.fontOpacity) + ' ' + shadow.join('px ') + 'px'); } return shadows.join(','); } @@ -199,9 +209,9 @@ class TextStyle { */ toCSS(): string { let attributes: Array = []; - attributes.push('font-family: ' + this.fontFamily); - attributes.push('color: ' + TextStyle.toRGBA(this.fontColor, this.fontOpacity)); - attributes.push('background-color: ' + TextStyle.toRGBA(this.backgroundColor, this.backgroundOpacity)); + attributes.push('font-family: ' + this._config.fontFamily); + attributes.push('color: ' + TextStyle.toRGBA(this._config.fontColor, this._config.fontOpacity)); + attributes.push('background-color: ' + TextStyle.toRGBA(this._config.backgroundColor, this._config.backgroundOpacity)); attributes.push('text-shadow: ' + this.getTextShadow()); return attributes.join('!important; '); } @@ -211,16 +221,7 @@ class TextStyle { * @returns {TextStyle} the cloned textStyle object */ clone(): TextStyle { - let clonedTextStyle = new TextStyle(); - clonedTextStyle.fontEdge = this.fontEdge; - clonedTextStyle.fontSize = this.fontSize; - clonedTextStyle.fontScale = this.fontScale; - clonedTextStyle.fontColor = this.fontColor; - clonedTextStyle.fontOpacity = this.fontOpacity; - clonedTextStyle.backgroundColor = this.backgroundColor; - clonedTextStyle.backgroundOpacity = this.backgroundOpacity; - clonedTextStyle.fontFamily = this.fontFamily; - return clonedTextStyle; + return new TextStyle(Utils.Object.copyDeep(this.config)); } /** @@ -229,18 +230,79 @@ class TextStyle { * @returns {boolean} - Whether the text styles are equal. */ isEqual(textStyle: TextStyle): boolean { - return ( - textStyle.fontEdge === this.fontEdge && - textStyle.fontSize === this.fontSize && - textStyle.fontColor === this.fontColor && - textStyle.fontOpacity === this.fontOpacity && - textStyle.backgroundColor === this.backgroundColor && - textStyle.backgroundOpacity === this.backgroundOpacity - ); + return JSON.stringify(textStyle.config) === JSON.stringify(this._config); + } + + get config(): PKTextStyleObject { + return Utils.Object.copyDeep(this._config); } get implicitFontScale(): number { - return IMPLICIT_SCALE_PERCENTAGE * this.fontScale + 1; + return IMPLICIT_SCALE_PERCENTAGE * this._config.fontScale + 1; + } + + get fontSize(): string { + return this._config.fontSize; + } + + set fontSize(fontSize: string) { + this._config.fontSize = fontSize; + } + + get fontScale(): number { + return this._config.fontScale; + } + + set fontScale(fontScale: number) { + this._config.fontScale = fontScale; + } + + get fontFamily(): string { + return this._config.fontFamily; + } + + set fontFamily(fontFamily: string) { + this._config.fontFamily = fontFamily; + } + + get fontColor(): Array { + return this._config.fontColor; + } + + set fontColor(fontColor: Array) { + this._config.fontColor = fontColor; + } + + get fontOpacity(): number { + return this._config.fontOpacity; + } + + set fontOpacity(fontOpacity: number) { + this._config.fontOpacity = fontOpacity; + } + + get backgroundColor(): Array { + return this._config.backgroundColor; + } + + set backgroundColor(backgroundColor: Array) { + this._config.backgroundColor = backgroundColor; + } + + get backgroundOpacity(): number { + return this._config.backgroundOpacity; + } + + set backgroundOpacity(backgroundOpacity: number) { + this._config.backgroundOpacity = backgroundOpacity; + } + + get fontEdge(): Array> { + return this._config.fontEdge; + } + + set fontEdge(fontEdge: Array>) { + this._config.fontEdge = fontEdge; } } diff --git a/test/src/engines/html5/media-source/adapters/native-adapter.spec.js b/test/src/engines/html5/media-source/adapters/native-adapter.spec.js index fef20f239..e26bae8e7 100644 --- a/test/src/engines/html5/media-source/adapters/native-adapter.spec.js +++ b/test/src/engines/html5/media-source/adapters/native-adapter.spec.js @@ -346,7 +346,7 @@ describe('NativeAdapter: _getParsedTracks', function () { video = document.createElement('video'); nativeInstance = NativeAdapter.createAdapter(video, sourcesConfig.MultipleSources.progressive[0], { sources: sourcesConfig.MultipleSources, - playback: {enableCEA708Captions: true, captionsTextTrack1Label: ''} + text: {enableCEA708Captions: true, captionsTextTrack1Label: ''} }); }); diff --git a/test/src/player.spec.js b/test/src/player.spec.js index 7503fb55d..b7b90bc37 100644 --- a/test/src/player.spec.js +++ b/test/src/player.spec.js @@ -1221,9 +1221,9 @@ describe('Player', function () { textStyle.fontEdge = TextStyle.EdgeStyles.RAISED; player.textStyle = textStyle; const currentTextStyle = player.textStyle; - currentTextStyle.backgroundColor.should.be.equal(textStyle.backgroundColor); - currentTextStyle.fontColor.should.be.equal(textStyle.fontColor); - currentTextStyle.fontEdge.should.be.equal(textStyle.fontEdge); + currentTextStyle.backgroundColor.should.deep.equal(textStyle.backgroundColor); + currentTextStyle.fontColor.should.deep.equal(textStyle.fontColor); + currentTextStyle.fontEdge.should.deep.equal(textStyle.fontEdge); }); }); @@ -1231,7 +1231,81 @@ describe('Player', function () { it('should change textDisplay settings', () => { const settings = {line: -4}; player.setTextDisplaySettings(settings); - player._textDisplaySettings.should.be.equal(settings); + player._textDisplaySettings.should.deep.equal(settings); + }); + + it('should change textDisplay settings and remove setting from cue for empty values', () => { + const settings = {line: -4, position: '10%'}; + player._activeTextCues[0] = { + position: 'auto', + align: 'center', + size: 100, + vertical: '' + }; + player.setTextDisplaySettings(settings); + player._textDisplaySettings.should.deep.equal(settings); + player._activeTextCues[0].should.deep.equal(Utils.Object.mergeDeep(player._activeTextCues[0], settings)); + const settingsToRemovePositionValue = {line: -4, position: ''}; + player.setTextDisplaySettings(settingsToRemovePositionValue); + player._activeTextCues[0].should.deep.equal(Utils.Object.mergeDeep(player._activeTextCues[0], {line: -4})); + }); + }); + + describe('configure text track display', () => { + it('should change textDisplay settings by config', () => { + const settings = {line: -4}; + player = new Player({text: {textTrackDisplaySetting: settings}}); + player._textDisplaySettings.should.deep.equal(settings); + }); + + it('should forceCenter override textTrackDisplaySetting', () => { + const settings = {position: '10%', align: 'left', size: '10'}; + player = new Player({text: {forceCenter: true, textTrackDisplaySetting: settings}}); + player._textDisplaySettings.should.deep.equal({position: 'auto', align: 'center', size: '100'}); + }); + + it('should forceCenter keep the other values from textTrackDisplaySetting', () => { + const settings = {line: '-4', lineAlign: 'end', position: '10%'}; + player = new Player({text: {forceCenter: true, textTrackDisplaySetting: settings}}); + player._textDisplaySettings.should.deep.equal(Utils.Object.mergeDeep(settings, {position: 'auto', align: 'center', size: '100'})); + }); + + it('should configure change of textTrackDisplaySetting will apply forceCenter', () => { + const settings = {position: '10%', align: 'left', size: '10'}; + player = new Player({text: {forceCenter: true, textTrackDisplaySetting: settings}}); + player.configure({text: {textTrackDisplaySetting: settings}}); + player._textDisplaySettings.should.deep.equal({position: 'auto', align: 'center', size: '100'}); + }); + + it('should empty configure will not take the previous config and change the values from setTextDisplaySettings', () => { + const settings = {position: '10%', align: 'left', size: '10'}; + player = new Player({text: {forceCenter: true, textTrackDisplaySetting: settings}}); + player.setTextDisplaySettings(settings); + player.configure({text: {}}); + player._textDisplaySettings.should.deep.equal(settings); + }); + + it('should keep the current setting for empty config', () => { + const settings = {line: '-4', lineAlign: 'end', position: '10%'}; + player.setTextDisplaySettings(settings); + player.configure({text: {}}); + player._textDisplaySettings.should.deep.equal(settings); + }); + + it('should change style setting by config', () => { + player = new Player({ + text: { + textStyle: { + backgroundColor: TextStyle.StandardColors.RED, + fontColor: TextStyle.StandardColors.CYAN, + fontEdge: TextStyle.EdgeStyles.RAISED + } + } + }); + const currentTextStyle = player.textStyle; + currentTextStyle.backgroundColor.should.deep.equal(TextStyle.StandardColors.RED); + currentTextStyle.fontColor.should.deep.equal(TextStyle.StandardColors.CYAN); + currentTextStyle.fontEdge.should.deep.equal(TextStyle.EdgeStyles.RAISED); }); }); }); @@ -1300,7 +1374,7 @@ describe('Player', function () { beforeEach(() => { config = Utils.Object.mergeDeep(getConfigStructure(), { sources: Utils.Object.mergeDeep({captions: [ExternalCaption.He, ExternalCaption.Ru]}, sourcesConfig.Mp4), - playback: {useNativeTextTrack: true} + text: {useNativeTextTrack: true} }); player = new Player(config); playerContainer.appendChild(player.getView()); @@ -1396,7 +1470,7 @@ describe('Player', function () { beforeEach(() => { config = Utils.Object.mergeDeep(getConfigStructure(), { sources: Utils.Object.mergeDeep({captions: [ExternalCaption.He, ExternalCaption.Ru]}, sourcesConfig.Mp4), - playback: {useNativeTextTrack: false} + text: {useNativeTextTrack: false} }); player = new Player(config); playerContainer.appendChild(player.getView()); diff --git a/test/src/state/state-manger.spec.js b/test/src/state/state-manger.spec.js index bf85061ec..48c9ac5b9 100644 --- a/test/src/state/state-manger.spec.js +++ b/test/src/state/state-manger.spec.js @@ -78,7 +78,6 @@ describe('StateManager', () => { done(); }); stateManager._updateState(StateType.LOADING); - stateManager._dispatchEvent(); }); it('should reset the state manager', () => { diff --git a/test/src/utils/test-utils.js b/test/src/utils/test-utils.js index 13a19ac27..99c418e9b 100644 --- a/test/src/utils/test-utils.js +++ b/test/src/utils/test-utils.js @@ -6,8 +6,10 @@ function getConfigStructure(targetId) { return { targetId, sources: {}, + text: { + enableCEA708Captions: true + }, playback: { - enableCEA708Captions: true, preload: 'none', autoplay: false, muted: false,