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

) Issue: text track doesn't have a config for styling, there is only an API for styling. Solution: create a text container for the text track and add the options for styling the text track. Add an option to disable external setting by set attribute explicit as null or ''. fix test: should dispatch new state event - updateState dispatch the event so two events dispatched cause FEC-10760
kaltura · Dec 29, 2020 · c4e0cb5 · c4e0cb5
1 parent 68a7026
commit c4e0cb5
Show file tree

Hide file tree

Showing 13 changed files with 430 additions and 170 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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>>
+};
diff --git 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
@@ -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,