Skip to content

Commit

Permalink
fix(FEC-10766): create static method for copy instead inner config (#524
Browse files Browse the repository at this point in the history 
)

create new instance instead of changing the current instance and add helper to make a new object base config or make config base on current object.
  • Loading branch information
@Yuvalke
Yuvalke authored Dec 30, 2020
1 parent c4e0cb5 commit ab06f5d
Show file tree
Hide file tree
Showing 4 changed files with 130 additions and 127 deletions.
2 changes: 1 addition & 1 deletion flow-typed/types/text-config.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ declare type PKTextConfigObject = {
enableCEA708Captions: boolean,
useNativeTextTrack: boolean,
textTrackDisplaySetting: Object,
textStyle: TextStyle | PKTextStyleObject,
textStyle: PKTextStyleObject,
forceCenter: boolean,
captionsTextTrack1Label: string,
captionsTextTrack1LanguageCode: string,
Expand Down
6 changes: 1 addition & 5 deletions src/player.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1283,11 +1283,7 @@ export default class Player extends FakeEventTarget {
}
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);
}
this.textStyle = TextStyle.fromJson(this._config.text.textStyle);
}
} catch (e) {
Player._logger.warn(e);
Expand Down
190 changes: 69 additions & 121 deletions src/track/text-style.js
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
// @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.
Expand Down Expand Up @@ -139,64 +138,81 @@ class TextStyle {
return 'rgba(' + color.concat(opacity).join(',') + ')';
}

_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,
static fromJson(setting: PKTextStyleObject): TextStyle {
let clonedTextStyle = new TextStyle();
clonedTextStyle.fontEdge = setting.fontEdge || clonedTextStyle.fontEdge;
clonedTextStyle.fontSize = setting.fontSize || clonedTextStyle.fontSize;
clonedTextStyle.fontScale = setting.fontScale || clonedTextStyle.fontScale;
clonedTextStyle.fontColor = setting.fontColor || clonedTextStyle.fontColor;
clonedTextStyle.fontOpacity = setting.fontOpacity || clonedTextStyle.fontOpacity;
clonedTextStyle.backgroundColor = setting.backgroundColor || clonedTextStyle.backgroundColor;
clonedTextStyle.backgroundOpacity = setting.backgroundOpacity || clonedTextStyle.backgroundOpacity;
clonedTextStyle.fontFamily = setting.fontFamily || clonedTextStyle.fontFamily;
return clonedTextStyle;
}

/**
* @type {TextStyle.StandardOpacities}
* @expose
*/
fontOpacity: TextStyle.StandardOpacities.OPAQUE,
static toJson(text: TextStyle): PKTextStyleObject {
return {
fontEdge: text.fontEdge,
fontSize: text.fontSize,
fontScale: text.fontScale,
fontColor: text.fontColor,
fontOpacity: text.fontOpacity,
backgroundColor: text.backgroundColor,
backgroundOpacity: text.backgroundOpacity,
fontFamily: text.fontFamily
};
}

/**
* @type {TextStyle.StandardColors}
*/
backgroundColor: TextStyle.StandardColors.BLACK,
/**
* Font size, such as 1, 2, 3...
* @type {number}
*/
fontSize: string = '100%';

/**
* @type {TextStyle.StandardOpacities}
*/
backgroundOpacity: TextStyle.StandardOpacities.OPAQUE,
fontScale: number = 1;

/**
* @type {TextStyle.EdgeStyles}
* @expose
*/
fontEdge: TextStyle.EdgeStyles.NONE
};
/**
* @type {TextStyle.FontFamily}
*/
fontFamily: string = TextStyle.FontFamily.SANS_SERIF;

constructor(settings?: PKTextStyleObject) {
this.setTextStyle(settings);
}
/**
* @type {TextStyle.StandardColors}
*/
fontColor: Array<number> = TextStyle.StandardColors.WHITE;

setTextStyle(settings?: PKTextStyleObject) {
if (settings) {
this._config = Utils.Object.mergeDeep({}, this._config, settings);
}
}
/**
* @type {TextStyle.StandardOpacities}
* @expose
*/
fontOpacity: number = TextStyle.StandardOpacities.OPAQUE;

/**
* @type {TextStyle.StandardColors}
*/
backgroundColor: Array<number> = TextStyle.StandardColors.BLACK;

/**
* @type {TextStyle.StandardOpacities}
*/
backgroundOpacity: number = TextStyle.StandardOpacities.OPAQUE;

/**
* @type {TextStyle.EdgeStyles}
* @expose
*/
fontEdge: Array<Array<number>> = TextStyle.EdgeStyles.NONE;

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<string> = [];
for (let i = 0; i < this._config.fontEdge.length; i++) {
for (let i = 0; i < this.fontEdge.length; i++) {
// shaka.asserts.assert(this.fontEdge[i].length == 6);
const color: Array<number> = this._config.fontEdge[i].slice(0, 3);
let shadow: Array<number> = this._config.fontEdge[i].slice(3, 6);
shadows.push(TextStyle.toRGBA(color, this._config.fontOpacity) + ' ' + shadow.join('px ') + 'px');
const color: Array<number> = this.fontEdge[i].slice(0, 3);
let shadow: Array<number> = this.fontEdge[i].slice(3, 6);
shadows.push(TextStyle.toRGBA(color, this.fontOpacity) + ' ' + shadow.join('px ') + 'px');
}
return shadows.join(',');
}
Expand All @@ -209,9 +225,9 @@ class TextStyle {
*/
toCSS(): string {
let attributes: Array<string> = [];
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('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('text-shadow: ' + this.getTextShadow());
return attributes.join('!important; ');
}
Expand All @@ -221,7 +237,7 @@ class TextStyle {
* @returns {TextStyle} the cloned textStyle object
*/
clone(): TextStyle {
return new TextStyle(Utils.Object.copyDeep(this.config));
return TextStyle.fromJson(TextStyle.toJson(this));
}

/**
Expand All @@ -230,79 +246,11 @@ class TextStyle {
* @returns {boolean} - Whether the text styles are equal.
*/
isEqual(textStyle: TextStyle): boolean {
return JSON.stringify(textStyle.config) === JSON.stringify(this._config);
}

get config(): PKTextStyleObject {
return Utils.Object.copyDeep(this._config);
return JSON.stringify(TextStyle.toJson(this)) === JSON.stringify(TextStyle.toJson(textStyle));
}

get implicitFontScale(): number {
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<number> {
return this._config.fontColor;
}

set fontColor(fontColor: Array<number>) {
this._config.fontColor = fontColor;
}

get fontOpacity(): number {
return this._config.fontOpacity;
}

set fontOpacity(fontOpacity: number) {
this._config.fontOpacity = fontOpacity;
}

get backgroundColor(): Array<number> {
return this._config.backgroundColor;
}

set backgroundColor(backgroundColor: Array<number>) {
this._config.backgroundColor = backgroundColor;
}

get backgroundOpacity(): number {
return this._config.backgroundOpacity;
}

set backgroundOpacity(backgroundOpacity: number) {
this._config.backgroundOpacity = backgroundOpacity;
}

get fontEdge(): Array<Array<number>> {
return this._config.fontEdge;
}

set fontEdge(fontEdge: Array<Array<number>>) {
this._config.fontEdge = fontEdge;
return IMPLICIT_SCALE_PERCENTAGE * this.fontScale + 1;
}
}

Expand Down
59 changes: 59 additions & 0 deletions test/src/player.spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1225,6 +1225,65 @@ describe('Player', function () {
currentTextStyle.fontColor.should.deep.equal(textStyle.fontColor);
currentTextStyle.fontEdge.should.deep.equal(textStyle.fontEdge);
});

it('should fromJson return an object equal to explicit set object', () => {
const settings = {
fontEdge: TextStyle.EdgeStyles.RAISED,
fontSize: '75%',
fontScale: '3',
fontColor: TextStyle.StandardColors.CYAN,
fontOpacity: TextStyle.StandardOpacities.SEMI_LOW,
backgroundOpacity: TextStyle.StandardOpacities.SEMI_LOW,
fontFamily: TextStyle.FontFamily.ARIAL,
backgroundColor: TextStyle.StandardColors.RED
};
let textStyle = new TextStyle();
textStyle.fontEdge = TextStyle.EdgeStyles.RAISED;
textStyle.fontSize = '75%';
textStyle.fontScale = '3';
textStyle.fontColor = TextStyle.StandardColors.CYAN;
textStyle.fontOpacity = TextStyle.StandardOpacities.SEMI_LOW;
textStyle.backgroundColor = TextStyle.StandardColors.RED;
textStyle.backgroundOpacity = TextStyle.StandardOpacities.SEMI_LOW;
textStyle.fontFamily = TextStyle.FontFamily.ARIAL;
TextStyle.fromJson(settings).isEqual(textStyle).should.be.true;
});

it('should toJson return same object', () => {
const settings = {
fontEdge: TextStyle.EdgeStyles.RAISED,
fontSize: '75%',
fontScale: '3',
fontColor: TextStyle.StandardColors.CYAN,
fontOpacity: TextStyle.StandardOpacities.SEMI_LOW,
backgroundOpacity: TextStyle.StandardOpacities.SEMI_LOW,
fontFamily: TextStyle.FontFamily.ARIAL,
backgroundColor: TextStyle.StandardColors.RED
};
let textStyle = new TextStyle();
textStyle.fontEdge = TextStyle.EdgeStyles.RAISED;
textStyle.fontSize = '75%';
textStyle.fontScale = '3';
textStyle.fontColor = TextStyle.StandardColors.CYAN;
textStyle.fontOpacity = TextStyle.StandardOpacities.SEMI_LOW;
textStyle.backgroundColor = TextStyle.StandardColors.RED;
textStyle.backgroundOpacity = TextStyle.StandardOpacities.SEMI_LOW;
textStyle.fontFamily = TextStyle.FontFamily.ARIAL;
TextStyle.toJson(textStyle).should.deep.equal(settings);
});

it('should clone API return exact same object', () => {
let clonedTextStyle = new TextStyle();
clonedTextStyle.fontEdge = TextStyle.EdgeStyles.RAISED;
clonedTextStyle.fontSize = '75%';
clonedTextStyle.fontScale = '3';
clonedTextStyle.fontColor = TextStyle.StandardColors.CYAN;
clonedTextStyle.fontOpacity = TextStyle.StandardOpacities.SEMI_LOW;
clonedTextStyle.backgroundColor = TextStyle.StandardColors.RED;
clonedTextStyle.backgroundOpacity = TextStyle.StandardOpacities.SEMI_LOW;
clonedTextStyle.fontFamily = TextStyle.FontFamily.ARIAL;
clonedTextStyle.clone().isEqual(clonedTextStyle).should.be.true;
});
});

describe('setTextDisplaySettings', () => {
Expand Down

0 comments on commit ab06f5d

Please sign in to comment.