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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@playkit-js/playkit-js-ui",
-  "version": "0.78.2",
+  "version": "0.78.3-canary.0-dbecd05",
   "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/event-dispatcher/event-dispatcher-provider.tsx

@@ -173,6 +173,9 @@ function onClickableComponentsHandler(store: any, action: any, player: KalturaPl
     case 'LiveTag':
       player.dispatchEvent(new FakeEvent(EventType.USER_CLICKED_LIVE_TAG));
       break;
+    case 'Logo':
+      player.dispatchEvent(new FakeEvent(EventType.USER_CLICKED_LOGO, action.payload));
+      break;
 
     case 'PrePlaybackPlayOverlay':
     case 'PlayPause':

package/src/components/logo/logo.tsx

@@ -5,6 +5,7 @@ import {withText} from 'preact-i18n';
 import {withPlayer} from '../player';
 import {withLogger} from '../logger';
 import {withEventManager} from '../../event';
+import {withEventDispatcher} from '../event-dispatcher';
 
 const COMPONENT_NAME = 'Logo';
 
@@ -32,6 +33,7 @@ const ENTRY_VAR = '{entryId}';
 @withPlayer
 @withEventManager
 @withLogger(COMPONENT_NAME)
+@withEventDispatcher(COMPONENT_NAME)
 @withText({logoText: 'controls.logo'})
 class Logo extends Component<any, any> {
   /**
@@ -72,6 +74,10 @@ class Logo extends Component<any, any> {
     }
   }
 
+  _handleOnClick = (): void => {
+    this.props.notifyClick({logoUrl: this.state.urlLink});
+  };
+
   /**
    * sets the url with the entry id
    * @param {string} url - the url configured on the logo
@@ -116,7 +122,13 @@ class Logo extends Component<any, any> {
       <div
         className={[style.controlButtonContainer, !props.config.url || !this.state.isUrlClickable ? style.emptyUrl : ''].join(' ')}
         title={props.config.text}>
-        <a className={style.controlButton} href={this.state.urlLink} aria-label={props.logoText} target="_blank" rel="noopener noreferrer">
+        <a
+          onClick={this._handleOnClick}
+          className={style.controlButton}
+          href={this.state.urlLink}
+          aria-label={props.logoText}
+          target="_blank"
+          rel="noopener noreferrer">
           <img className={style.icon} src={props.config.img} />
         </a>
       </div>

package/src/components/seekbar/seekbar.tsx

@@ -27,7 +27,9 @@ 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,
+  isPreventSeek: state.seekbar.isPreventSeek
 });
 
 const COMPONENT_NAME = 'SeekBar';
@@ -497,7 +499,7 @@ class SeekBar extends Component<any, any> {
    * @memberof SeekBar
    */
   renderFramePreview(): VNode<any> | undefined {
-    if (!this.props.showFramePreview || this.props.isMobile) return undefined;
+    if (!this.props.showFramePreview || this.props.isMobile || this.props.isPreventSeek) return undefined;
     return (
       <div
         className={this.props.hidePreview ? [style.framePreview, style.hideFramePreview].join(' ') : style.framePreview}
@@ -547,7 +549,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/event/event-type.ts

@@ -12,6 +12,7 @@ const EventType = {
   USER_CLICKED_REWIND: `${namespace}-userclickedrewind`,
   USER_CLICKED_FORWARD: `${namespace}-userclickedforward`,
   USER_CLICKED_LIVE_TAG: `${namespace}-userclickedlivetag`,
+  USER_CLICKED_LOGO: `${namespace}-userclickedlogo`,
   USER_CLICKED_MUTE: `${namespace}-userclickedmute`,
   USER_CLICKED_UNMUTE: `${namespace}-userclickedunmute`,
   USER_CLICKED_ADVANCED_AUDIO_DESCRIPTION: `${namespace}-userclickedadvancedaudiodescription`,

package/src/reducers/seekbar.ts

@@ -1,21 +1,26 @@
 /* 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`,
+  UPDATE_PREVENT_SEEK: `${entityName}/UPDATE_PREVENT_SEEK`
 };
 
-export const initialState = {
+export const initialState: SeekbarState = {
   currentTime: 0,
   virtualTime: 0,
   draggingActive: false,
@@ -24,7 +29,9 @@ 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: [],
+  isPreventSeek: false
 };
 
 export default (state: SeekbarState = initialState, action: any) => {
@@ -95,6 +102,26 @@ 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)
+      };
+
+    case types.UPDATE_PREVENT_SEEK:
+      return {
+        ...state,
+        isPreventSeek: action.isPreventSeek
+      };
+
     default:
       return state;
   }
@@ -126,5 +153,8 @@ 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}),
+  updatePreventSeek: (isPreventSeek: boolean) => ({type: types.UPDATE_PREVENT_SEEK, isPreventSeek})
 } as const;

package/src/types/reducers/seekbar.ts

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

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",