@playkit-js/playkit-js-ui 0.78.2 → 0.78.3-canary.0-e60bd00

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@playkit-js/playkit-js-ui",
-  "version": "0.78.2",
+  "version": "0.78.3-canary.0-e60bd00",
   "description": "",
   "keywords": [
     "kaltura",

package/src/components/cvaa-overlay/_cvaa-overlay.scss

@@ -119,6 +119,7 @@
 }
 
 .font-size,
+.font-alignment,
 .font-color,
 .font-family,
 .font-style,

package/src/components/cvaa-overlay/custom-captions-window.tsx

@@ -100,6 +100,11 @@ class CustomCaptionsWindow extends Component<any, any> {
       active: props.customTextStyle.backgroundColor.every((value, index) => value === standardColors[key][index])
     }));
 
+    const fontAlignmentOption = player.TextStyle.FontAlignment.map(fontAlignment => ({
+      ...fontAlignment,
+      active: props.customTextStyle.textAlign === fontAlignment.value
+    }));
+
     return (
       <div className={[style.overlayScreen, style.active].join(' ')}>
         <form className={[style.form, style.customCaptionForm].join(' ')}>
@@ -111,6 +116,14 @@ class CustomCaptionsWindow extends Component<any, any> {
             styleName="fontSize"
             changeCustomStyle={props.changeCustomStyle}
           />
+          <DropDownCaptionsStyle
+            addAccessibleChild={props.addAccessibleChild}
+            labelId="cvaa.font_alignment_label"
+            options={fontAlignmentOption}
+            classNames={[style.formGroupRow, style.fontAlignment]}
+            styleName="textAlign"
+            changeCustomStyle={props.changeCustomStyle}
+          />
           <DropDownCaptionsStyle
             addAccessibleChild={props.addAccessibleChild}
             labelId="cvaa.font_color_label"

package/src/components/seekbar/seekbar.tsx

@@ -27,7 +27,8 @@ const mapStateToProps = state => ({
   previewHoverActive: state.seekbar.previewHoverActive,
   hidePreview: state.seekbar.hidePreview,
   hideTimeBubble: state.seekbar.hideTimeBubble,
-  segments: state.seekbar.segments
+  segments: state.seekbar.segments,
+  seekbarClasses: state.seekbar.seekbarClasses
 });
 
 const COMPONENT_NAME = 'SeekBar';
@@ -547,7 +548,7 @@ class SeekBar extends Component<any, any> {
   render(props: any, state: any): VNode<any> {
     const virtualProgressWidth = `${(props.virtualTime / props.duration) * 100}%`;
     const scrubberProgressPosition = `${(props.currentTime / props.duration) * this._seekBarElement?.clientWidth}px`;
-    const seekbarStyleClass = [style.seekBar];
+    const seekbarStyleClass = [style.seekBar, ...props.seekbarClasses];
     if (props.adBreak) seekbarStyleClass.push(style.adBreak);
     if (props.isDvr) seekbarStyleClass.push(style.live);
     if (props.isMobile) seekbarStyleClass.push(style.hover);

package/src/reducers/seekbar.ts

@@ -1,21 +1,25 @@
 /* eslint-disable  @typescript-eslint/explicit-function-return-type */
 import {SeekbarState} from '../types/reducers/seekbar';
 
+const entityName = 'seekbar';
+
 export const types = {
-  UPDATE_SEEKBAR_DRAGGING_STATUS: 'seekbar/UPDATE_SEEKBAR_DRAGGING_STATUS',
-  UPDATE_SEEKBAR_HOVER_ACTIVE: 'seekbar/UPDATE_SEEKBAR_HOVER_ACTIVE',
-  UPDATE_SEEKBAR_PREVIEW_HOVER_ACTIVE: 'seekbar/UPDATE_SEEKBAR_PREVIEW_HOVER_ACTIVE',
-  UPDATE_SEEKBAR_CLIENT_RECT: 'seekbar/UPDATE_SEEKBAR_CLIENT_RECT',
-  UPDATE_HIDE_SEEKBAR_PREVIEW: 'seekbar/UPDATE_HIDE_SEEKBAR_PREVIEW',
-  UPDATE_HIDE_SEEKBAR_TIME_BUBBLE: 'seekbar/UPDATE_HIDE_SEEKBAR_TIME_BUBBLE',
-  UPDATE_CURRENT_TIME: 'seekbar/UPDATE_CURRENT_TIME',
-  UPDATE_VIRTUAL_TIME: 'seekbar/UPDATE_VIRTUAL_TIME',
-  UPDATE_HOVERED_SEGMENT: 'seekbar/UPDATE_HOVERED_SEGMENT',
-  UPDATE_SEEKBAR_SEGMENTS: 'seekbar/UPDATE_SEEKBAR_SEGMENTS',
-  UPDATE_SEGMENT_END_TIME: 'seekbar/UPDATE_SEGMENT_END_TIME'
+  UPDATE_SEEKBAR_DRAGGING_STATUS: `${entityName}/UPDATE_SEEKBAR_DRAGGING_STATUS`,
+  UPDATE_SEEKBAR_HOVER_ACTIVE: `${entityName}/UPDATE_SEEKBAR_HOVER_ACTIVE`,
+  UPDATE_SEEKBAR_PREVIEW_HOVER_ACTIVE: `${entityName}/UPDATE_SEEKBAR_PREVIEW_HOVER_ACTIVE`,
+  UPDATE_SEEKBAR_CLIENT_RECT: `${entityName}/UPDATE_SEEKBAR_CLIENT_RECT`,
+  UPDATE_HIDE_SEEKBAR_PREVIEW: `${entityName}/UPDATE_HIDE_SEEKBAR_PREVIEW`,
+  UPDATE_HIDE_SEEKBAR_TIME_BUBBLE: `${entityName}/UPDATE_HIDE_SEEKBAR_TIME_BUBBLE`,
+  UPDATE_CURRENT_TIME: `${entityName}/UPDATE_CURRENT_TIME`,
+  UPDATE_VIRTUAL_TIME: `${entityName}/UPDATE_VIRTUAL_TIME`,
+  UPDATE_HOVERED_SEGMENT: `${entityName}/UPDATE_HOVERED_SEGMENT`,
+  UPDATE_SEEKBAR_SEGMENTS: `${entityName}/UPDATE_SEEKBAR_SEGMENTS`,
+  UPDATE_SEGMENT_END_TIME: `${entityName}/UPDATE_SEGMENT_END_TIME`,
+  ADD_SEEKBAR_CLASS: `${entityName}/ADD_SEEKBAR_CLASS`,
+  REMOVE_SEEKBAR_CLASS: `${entityName}/REMOVE_SEEKBAR_CLASS`
 };
 
-export const initialState = {
+export const initialState: SeekbarState = {
   currentTime: 0,
   virtualTime: 0,
   draggingActive: false,
@@ -24,7 +28,8 @@ export const initialState = {
   clientRect: {x: 0, y: 0, width: 0, height: 0, top: 0, right: 0, bottom: 0, left: 0},
   hidePreview: false,
   hideTimeBubble: false,
-  segments: []
+  segments: [],
+  seekbarClasses: []
 };
 
 export default (state: SeekbarState = initialState, action: any) => {
@@ -95,6 +100,20 @@ export default (state: SeekbarState = initialState, action: any) => {
         segments: state.segments.map(segment => (segment.id === action.id ? {...segment, endTime: action.endTime} : segment))
       };
 
+    case types.ADD_SEEKBAR_CLASS:
+      if (state.seekbarClasses.includes(action.className)) {
+        return state;
+      }
+      return {
+        ...state,
+        seekbarClasses: [...state.seekbarClasses, action.className]
+      };
+    case types.REMOVE_SEEKBAR_CLASS:
+      return {
+        ...state,
+        seekbarClasses: state.seekbarClasses.filter(c => c !== action.className)
+      };
+
     default:
       return state;
   }
@@ -126,5 +145,7 @@ export const actions = {
   updateVirtualTime: (virtualTime: number) => ({type: types.UPDATE_VIRTUAL_TIME, virtualTime}),
   updateHoveredSegment: (id: string, isHovered: boolean) => ({type: types.UPDATE_HOVERED_SEGMENT, id, isHovered}),
   updateSegmentEndTime: (id: string, endTime: number) => ({type: types.UPDATE_SEGMENT_END_TIME, id, endTime}),
-  updateSeekbarSegments: (segments: any[]) => ({type: types.UPDATE_SEEKBAR_SEGMENTS, segments})
+  updateSeekbarSegments: (segments: any[]) => ({type: types.UPDATE_SEEKBAR_SEGMENTS, segments}),
+  addSeekbarClass: (className: string) => ({type: types.ADD_SEEKBAR_CLASS, className}),
+  removeSeekbarClass: (className: string) => ({type: types.REMOVE_SEEKBAR_CLASS, className})
 } as const;

package/src/types/reducers/seekbar.ts

@@ -25,4 +25,5 @@ export interface SeekbarState {
   hidePreview: boolean;
   hideTimeBubble: boolean;
   segments: SeekbarSegment[];
+  seekbarClasses: string[];
 }

package/translations/en.i18n.json

@@ -85,6 +85,7 @@
       "edit_caption": "Edit caption",
       "size_label": "Size",
       "font_color_label": "Font color",
+      "font_alignment_label": "Font alignment",
       "font_family_label": "Font family",
       "font_style_label": "Font style",
       "font_opacity_label": "Font opacity",