feat(FEC-10766): create text config section and option for styling

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`

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,

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
+};

flow-typed/types/text-style.js

@@ -0,0 +1,11 @@
+// @flow
+declare type PKTextStyleObject = {
+  fontSize: string,
+  fontScale: number,
+  fontFamily: string,
+  fontColor: Array<number>,
+  fontOpacity: number,
+  backgroundColor: Array<number>,
+  backgroundOpacity: number,
+  fontEdge: Array<Array<number>>
+};

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);
       }

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,