Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Merged
merged 16 commits into from
Dec 29, 2020
Merged

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

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
16 commits
Select commit Hold shift + click to select a range
e669628
feat(FEC-10766): create text config section and option for styling
Yuvalke Dec 8, 2020
5c503ed
Update configuration.md
Yuvalke Dec 8, 2020
404bf32
change forceCenterCaption to forceCenter
Yuvalke Dec 8, 2020
aba02dd
add missing configuration from md file
Yuvalke Dec 8, 2020
da5a168
add an option to change the textStyle and generate one from json
Yuvalke Dec 9, 2020
b489390
Update text-config.js
Yuvalke Dec 9, 2020
112036d
fix flow/eslint
Yuvalke Dec 9, 2020
a5c8e3a
remove stateManager._dispatchEvent() cause failure FEC-10760
Yuvalke Dec 10, 2020
ed2274f
Update text-style.js
Yuvalke Dec 10, 2020
c73b77a
Update text-style.js
Yuvalke Dec 13, 2020
fb2b33c
add config object with correct schema
Yuvalke Dec 28, 2020
dccb562
Update text-style.js
Yuvalke Dec 28, 2020
cd58e6d
Merge branch 'master' into FEC-10766
Yuvalke Dec 28, 2020
eb7d162
add tests
Yuvalke Dec 28, 2020
991c9fb
add option to disable the change of text setting
Yuvalke Dec 28, 2020
415929b
Merge branch 'master' into FEC-10766
Yuvalke Dec 28, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
271 changes: 123 additions & 148 deletions docs/configuration.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,8 +20,7 @@ var player = playkit.core.loadPlayer(config);
network: PKNetworkConfigObject,
customLabels: PKCustomLabelsConfigObject,
abr: PKAbrConfigObject,
drm: PKDrmConfigObject,
dimensions: PKDimensionsConfig
Yuvalke marked this conversation as resolved.
Show resolved Hide resolved
drm: PKDrmConfigObject
}
```

Expand All @@ -38,15 +37,18 @@ var config = {
},
metadata: {}
},
playback: {
audioLanguage: '',
textLanguage: '',
useNativeTextTrack: false,
text: {
enableCEA708Captions: false,
useNativeTextTrack: false,
forceCenterCaptions: false,
captionsTextTrack1Label: 'English',
captionsTextTrack1LanguageCode: 'en',
captionsTextTrack2Label: 'Spanish',
captionsTextTrack2LanguageCode: 'es',
captionsTextTrack2LanguageCode: 'es'
},
playback: {
audioLanguage: '',
textLanguage: '',
volume: 1,
startTime: -1,
playsinline: true,
Expand Down Expand Up @@ -457,22 +459,128 @@ var config = {
> > };
> > ```

##

> ### config.playback
> ##
> ### config.text
>
> ##### Type: `PKPlaybackConfigObject`
> ##### Type: `PKTextConfigObject`
>
> ```js
> {
> audioLanguage: string,
> textLanguage: string,
> useNativeTextTrack: boolean,
> enableCEA708Captions: boolean,
> textTrackDisplaySetting: Object,
> textStyle: TextStyle,
> captionsTextTrack1Label: string,
> captionsTextTrack1LanguageCode: string,
> captionsTextTrack2Label: string,
> captionsTextTrack2LanguageCode: string,
> captionsTextTrack2LanguageCode: string
> }
> ```
>
> ##### Default:
>
> ```js
> {
> useNativeTextTrack: false,
> enableCEA708Captions: 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.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,
Expand All @@ -486,8 +594,7 @@ var config = {
> streamPriority: Array<PKStreamPriorityObject>,
> preferNative: PKPreferNativeConfigObject,
> inBrowserFullscreen: boolean,
> playAdsWithMSE: boolean,
> screenLockOrientionMode: string
> playAdsWithMSE: boolean
> }
> ```
>
Expand All @@ -497,12 +604,6 @@ var config = {
> {
> audioLanguage: "",
> textLanguage: "",
> useNativeTextTrack: false,
> enableCEA708Captions: false,
> captionsTextTrack1Label: "English",
> captionsTextTrack1LanguageCode: "en",
> captionsTextTrack2Label: "Spanish",
> captionsTextTrack2LanguageCode: "es",
> volume: 1,
> startTime: -1,
> playsinline: true,
Expand All @@ -512,7 +613,6 @@ var config = {
> muted: false,
> pictureInPicture: true,
> playAdsWithMSE: false,
> screenLockOrientionMode: ScreenOrientationType.NONE,
> options: {
> html5: {
> hls: {},
Expand Down Expand Up @@ -603,68 +703,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`
Expand Down Expand Up @@ -888,20 +926,6 @@ var config = {
>
> ##
>
> > ### config.playback.screenLockOrientionMode
> >
> > ##### Type: `string` - value list option in ScreenOrientationType
> >
> > ##### Default: `none` - ScreenOrientationType.NONE
> >
> > ```js
> > screenLockOrientionMode: string;
> > ```
> >
> > > ##### Description: Gives the ability to lock the screen orientation in fullscreen
>
> ##
>
> > ### config.playback.streamPriority
> >
> > ##### Type: `Array<PKStreamPriorityObject`
Expand Down Expand Up @@ -1403,53 +1427,4 @@ var config = {

##

> ### config.dimensions
>
> ##### Type: `PKDimensionsConfig`
>
> ```js
> {
> width?: string | number;
> height?: string | number;
> ratio?: string;
> }
> ```
>
> ##### Description: Dimensions configuration
>
> > ### config.dimensions.width
> >
> > ##### Type: `string | number`
> >
> > ##### Default: `''`
> >
> > ##### Description: The width of the player.
> >
> > If number was provided, the width will be calculated in pixels (`width: 640` equivalent to `width: '640px'`).
> > If string was provided, any valid css syntax can be passed, for example: `width: '100%'`, `width: 'auto'`, etc.
> >
> > ### config.dimensions.height
> >
> > ##### Type: `string | number`
> >
> > ##### Default: `''`
> >
> > ##### Description: The height of the player.
> >
> > If number was provided, the height will be calculated in pixels (`height: 360` equivalent to `width: '360px'`).
> > If string was provided, any valid css syntax can be passed, for example: `height: '100%'`, `height: 'auto'`, etc.
> >
> > ### config.dimensions.ratio
> >
> > ##### Type: `string`
> >
> > ##### Default: `''`
> >
> > ##### Description: Defines the aspect ratio of the player.
> >
> > The aspect ratio should be written in the form of `'width:height'`, for example: `'4:3'` (classic TV ratio).
> > If one of the `height` or `width` parameters is additionally provided in the configuration, the value of the other parameter not provided will be calculated accordingly to match the aspect ratio. If both were provided, the `height` value would be overridden.

##

Yuvalke marked this conversation as resolved.
Show resolved Hide resolved
Now that we've learned about the different options available in the player configuration, let's see [how does the source selection logic works](./source-selection-logic.md).
1 change: 0 additions & 1 deletion flow-typed/types/playback-config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,6 @@
declare type PKPlaybackConfigObject = {
audioLanguage: string,
textLanguage: string,
useNativeTextTrack: boolean,
volume: number,
playsinline: boolean,
crossOrigin: string,
Expand Down
14 changes: 14 additions & 0 deletions flow-typed/types/text-config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
// @flow
import {TextStyle} from '../../src/track/text-style';

declare type PKTextConfigObject = {
enableCEA708Captions: boolean,
useNativeTextTrack: boolean,
textTrackDisplaySetting: Object,
textStyle: TextStyle,
forceCenterCaptions: boolean,
Yuvalke marked this conversation as resolved.
Show resolved Hide resolved
captionsTextTrack1Label: string,
captionsTextTrack1LanguageCode: string,
captionsTextTrack2Label: string,
captionsTextTrack2LanguageCode: string
};
18 changes: 10 additions & 8 deletions src/engines/html5/media-source/adapters/native-adapter.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
}
Expand Down
Loading