feat: captions style controls #73
Conversation
dvh91
changed the title
|
@OrenMe |
There was a problem hiding this comment.
- added the font family to it so - to add it to model and UI.
- save UI model state - when choosing settings and saving the style is set on captions, but when opening menu again the style is not accounted in the UI and is set from default state again
- add presets as defined - you can see in V2 in CVAA class
- change captions style on the fly when settings are set in the CVAA screen
- Add font style - it is EdgeStyles in TextStyle
- menus always open upwards and sometimes there's just not enough room upwards
- Playkit now expose the TextStyle on the instance so you can change
window.KalturaPlayer.Playkit.TextStyleto justthis.props.player.TextStyle
|
|
||
| const colorOptions = [ | ||
| { | ||
| value: window.KalturaPlayer.Playkit.TextStyle.StandardColors.WHITE, |
There was a problem hiding this comment.
Would it be more useful to set the enum with value and name, like
"WHITE": {
"value": "...",
"name": "white"
}There was a problem hiding this comment.
and then you can just iterate it to create the colorOptions
There was a problem hiding this comment.
@OrenMe Yes, it will be more useful for me. Same for fontEdge and opacity.
| ]; | ||
|
|
||
| const opacityOptions = [ |
There was a problem hiding this comment.
Same here for the enum value/name
| @@ -97,15 +100,29 @@ class CVAAOverlay extends BaseComponent { | |||
| * @memberof CVAAOverlay | |||
| */ | |||
| renderMainState(): React$Element<any> { | |||
| const captionsStyleDefault = Object.assign(new window.KalturaPlayer.Playkit.TextStyle(), { | |||
There was a problem hiding this comment.
will be changed again when player will expose object for semantic label as well.
There was a problem hiding this comment.
-
The menu selection should show default and two samples and after user selects his settings the menu should have the setting applied on the label
-
The selected setting (default/sample/custom) should have a V icon on it
-
Opacity controls should be range control(scrubber)
-
Style settings options should be camel cased, currently are all UPPERCASE
-
When there are captions enabled on the video and they appear then the demo example caption is shown above the video active caption - this looks bad - need to seat with UX and figure out what is recommended to to
| active: this.state.customTextStyle.fontFamily == fontFamily[key] | ||
| })); | ||
|
|
||
| var fontStyleOptions = Object.keys(edgeStyles).map(key => ({ |
There was a problem hiding this comment.
The font edge change is not shown on the selection menu, and after selecting it keeps showing NONE
There was a problem hiding this comment.
@dvh91 by the original design when a custom style is chosen the selection menu should change to show a label with style applied on it.
See here: https://projects.invisionapp.com/d/main#/console/10293603/221545959/preview
|
@dvh91 I think that importing lodash to our bundle will increase his size significantly. |
|
@dan-ziv I import a single function and not the whole library which means the bundle won't have the whole lodash package. |
|
@dvh91 |
No description provided.