feat(FEC-8671): add CVAA menu labels/ids to enable external CSS to cu…

…stomize it (#308) * add classes to the cvaa menu items add classes to the cvaa menu items background: initial, so it will be in the global style object. background initial will set the background to the default value of the browser. * docs * Update cvaa-override.md
kaltura · Dec 2, 2018 · cd1f115 · cd1f115
1 parent a987f2a
commit cd1f115
Show file tree

Hide file tree

Showing 4 changed files with 44 additions and 7 deletions.
diff --git a/docs/cvaa-override.md b/docs/cvaa-override.md
@@ -0,0 +1,27 @@
+# Removing style settings from the captions menu
+
+The player enables viewers to modify the captions style using the "Advanced captions settings" in the language menu, and clicking the 'Set custom caption' button.
+
+To prevent viewers from using these modifications, simply overload the style option's class and add ```display: none``` to it.
+
+For example, adding the line below will remove the ability to change the captions color:
+
+```
+.playkit-font-color {
+  display: none
+}
+```
+Refer to the list of caption settings classes below for detailed information on each class.
+
+## Captions settings class list
+
+
+| Class Name                             | Description                                          |
+| -------------------------------------- | ---------------------------------------------------- |
+| `.playkit-font-size`                   | Changes the size of the captions                    |
+| `.playkit-font-color`                  | Changes the color of the captions                   |
+| `.playkit-font-family`                 | Changes the font family of the captions             |
+| `.playkit-font-style`                  | Changes the weight of the captions                  |
+| `.playkit-font-opacity`                | Changes the opacity of the captions                 |
+| `.playkit-background-color`            | Changes the color of the captions background        |
+| `.playkit-background-opacity`          | Changes the opacity of the captions background      |
diff --git a/docs/ui-customization.md b/docs/ui-customization.md
@@ -15,3 +15,9 @@ The player builds its UI by definfing presets which are built upon the applicati
 An application can define its own UI layout and styling, by defining its presets, which can be built from custom components and/or the default components library.
 
 More information on how to build custom components and composing your own UI layout see [here](custom-ui-preset.md).
+
+## Removing style settings from the captions menu
+
+The captions customizing level can be modified by removing settings from the captions setting menu.
+
+More information on removing settings from the menu can be found [here](cvaa-override.md).
diff --git a/src/components/cvaa-overlay/_cvaa-overlay.scss b/src/components/cvaa-overlay/_cvaa-overlay.scss
@@ -113,3 +113,7 @@
     }
   }
 }
+
+.font-size, .font-color, .font-family, .font-style, .font-opacity, .background-color, .background-opacity{
+  background: initial;
+}
diff --git a/src/components/cvaa-overlay/cvaa-overlay.js b/src/components/cvaa-overlay/cvaa-overlay.js
@@ -294,31 +294,31 @@ class CVAAOverlay extends BaseComponent {
     return (
       <div className={this.state.state === cvaaOverlayState.CustomCaptions ? [style.overlayScreen, style.active].join(' ') : style.overlayScreen}>
         <form className={[style.form, style.customCaptionForm].join(' ')}>
-          <div className={style.formGroupRow}>
+          <div className={[style.formGroupRow, style.fontSize].join(' ')}>
             <label>
               <Text id={'cvaa.size_label'} />
             </label>
             <DropDown onSelect={fontSize => this.changeCustomStyle({fontSize})} options={fontSizeOptions} />
           </div>
-          <div className={style.formGroupRow}>
+          <div className={[style.formGroupRow, style.fontColor].join(' ')}>
             <label>
               <Text id={'cvaa.font_color_label'} />
             </label>
             <DropDown onSelect={fontColor => this.changeCustomStyle({fontColor})} options={fontColorOptions} />
           </div>
-          <div className={style.formGroupRow}>
+          <div className={[style.formGroupRow, style.fontFamily].join(' ')}>
             <label>
               <Text id={'cvaa.font_family_label'} />
             </label>
             <DropDown onSelect={fontFamily => this.changeCustomStyle({fontFamily})} options={fontFamilyOptions} />
           </div>
-          <div className={style.formGroupRow}>
+          <div className={[style.formGroupRow, style.fontStyle].join(' ')}>
             <label>
               <Text id={'cvaa.font_style_label'} />
             </label>
             <DropDown onSelect={fontEdge => this.changeCustomStyle({fontEdge})} options={fontStyleOptions} />
           </div>
-          <div className={style.formGroupRow}>
+          <div className={[style.formGroupRow, style.fontOpacity].join(' ')}>
             <label>
               <Text id={'cvaa.font_opacity_label'} />
             </label>
@@ -329,13 +329,13 @@ class CVAAOverlay extends BaseComponent {
               onChange={fontOpacity => this.changeCustomStyle({fontOpacity: fontOpacity / 100})}
             />
           </div>
-          <div className={style.formGroupRow}>
+          <div className={[style.formGroupRow, style.backgroundColor].join(' ')}>
             <label>
               <Text id={'cvaa.background_color_label'} />
             </label>
             <DropDown onSelect={backgroundColor => this.changeCustomStyle({backgroundColor})} options={backgroundColorOptions} />
           </div>
-          <div className={style.formGroupRow}>
+          <div className={[style.formGroupRow, style.backgrouOpacity].join(' ')}>
             <label>
               <Text id={'cvaa.background_opacity_label'} />
             </label>