coms complete

src/components/audio-entry-details/audio-entry-details.tsx

@@ -14,7 +14,7 @@ import {WithEventManagerProps} from '../../event/with-event-manager';
 interface AudioEntryDetailsProps {
   player: any;
   isAudio: boolean;
-  playerSize: typeof PLAYER_SIZE;
+  playerSize: string;
   eventManager: EventManager;
 }
 
@@ -31,8 +31,7 @@ const mapStateToProps = state => ({
 const COMPONENT_NAME = 'AudioEntryDetails';
 
 const AudioEntryDetailsComp: FunctionComponent<AudioEntryDetailsProps> = (props: AudioEntryDetailsProps) => {
-  // eslint-disable-next-line require-jsdoc
-  const getSizeClass = (playerSize: typeof PLAYER_SIZE) => {
+  const getSizeClass = (playerSize: string) => {
     switch (playerSize) {
     case PLAYER_SIZE.EXTRA_LARGE:
     case PLAYER_SIZE.LARGE:

src/components/audio-menu/audio-menu.tsx

@@ -11,8 +11,8 @@ import {WithPlayerProps} from '../player/with-player';
 import {WithEventDispatcherProps} from '../event-dispatcher';
 
 type AudioMenuProps = {
-  audioTracks: any[];
-  audioLabelText: string;
+  audioTracks?: any[];
+  audioLabelText?: string;
 }
 
 /**
@@ -51,7 +51,7 @@ class AudioMenu extends Component<AudioMenuProps & WithPlayerProps & WithEventDi
     // @ts-ignore - store types
     this.props.updateAudio(audioTrack);
     this.props.player!.selectTrack(audioTrack);
-    this.props.notifyClick({
+    this.props.notifyClick!({
       type: this.props.player!.Track.AUDIO,
       track: audioTrack
     });

src/components/base.js → src/components/base.ts

@@ -1,18 +1,17 @@
-//@flow
-import {Component} from 'preact';
+import {Component, RenderableProps, ComponentChild} from 'preact';
 import getLogger from '../utils/logger';
 import {types} from '../middlewares/event-dispatcher';
-import {EventManager} from '../event/event-manager';
+import {EventManager} from '@playkit-js/playkit-js';
+import {KalturaPlayer} from '@playkit-js/kaltura-player-js';
 
 /**
  * Base component to be extended by other player UI components
  *
  * @class BaseComponent
  * @extends {Component}
  */
-class BaseComponent extends Component {
-  state: Object;
-  player: Object;
+class BaseComponent extends Component<any, any> {
+  player: KalturaPlayer;
   name: string;
   config: Object;
   logger: any;
@@ -23,14 +22,14 @@ class BaseComponent extends Component {
    * @type {Object}
    * @static
    */
-  static defaultProps: Object = {};
+  static defaultProps: any = {};
 
   /**
    * Creates an instance of BaseComponent.
    * @param {Object} [obj={ config: {} }] obj
    * @memberof BaseComponent
    */
-  constructor(obj?: Object = {config: {}}) {
+  constructor(obj: any = {config: {}}) {
     super();
     this.name = obj.name;
     this.config = obj.config;
@@ -79,6 +78,10 @@ class BaseComponent extends Component {
   componentWillUnmount(): void {
     this.eventManager.removeAll();
   }
+
+  render(props?: RenderableProps<any>, state?: Readonly<any>, context?: any): ComponentChild {
+    return undefined;
+  }
 }
 
 export default BaseComponent;

src/components/copy-button/copy-button.tsx

@@ -110,7 +110,7 @@ class CopyButton extends Component<any, any> {
     return (
       <Localizer>
         <ButtonControl name={COMPONENT_NAME}>
-          <Tooltip label={<Text id="copy.button" />}>
+          <Tooltip label={<Text id="copy.button" /> as unknown as string}>
             <Button
               tabIndex="0"
               ref={el => {

src/components/event-dispatcher/with-event-dispatcher.tsx

@@ -1,9 +1,9 @@
 import {h, Component} from 'preact';
 
 export type WithEventDispatcherProps = {
-  notifyClick(payload?: any): void
-  notifyChange(payload?: any): void
-  notifyHoverChange(payload?: any): void
+  notifyClick?(payload?: any): void
+  notifyChange?(payload?: any): void
+  notifyHoverChange?(payload?: any): void
 }
 
 /**

src/components/fullscreen/fullscreen.tsx

@@ -113,7 +113,7 @@ class Fullscreen extends Component<FullscreenProps & WithPlayerProps & WithLogge
     const {logger, player} = this.props;
     logger.debug(`Toggle fullscreen`);
     player!.isFullscreen() ? player!.exitFullscreen() : player!.enterFullscreen();
-    this.props.notifyClick();
+    this.props.notifyClick!();
   };
 
   /**

src/components/settings/settings.js → src/components/settings/settings.tsx

@@ -1,18 +1,17 @@
-//@flow
 import style from '../../styles/style.scss';
-import {h, Component} from 'preact';
+import {h, Component, VNode} from 'preact';
 import {withText, Text} from 'preact-i18n';
 import {connect} from 'react-redux';
-import {bindActions} from 'utils';
-import {actions} from 'reducers/settings';
-import {AdvancedAudioDescToggle, AudioMenu, CaptionsMenu, QualityMenu, SmartContainer, SpeedMenu, CVAAOverlay, getLabelBadgeType} from 'components';
+import {bindActions} from '../../utils';
+import {actions} from '../../reducers/settings';
+import {AdvancedAudioDescToggle, AudioMenu, CaptionsMenu, QualityMenu, SmartContainer, SpeedMenu, CVAAOverlay, getLabelBadgeType} from '../../components';
 import {default as Icon, IconType, BadgeType} from '../icon';
 import {withPlayer} from '../player';
-import {withEventManager} from 'event/with-event-manager';
-import {actions as overlayIconActions} from 'reducers/overlay-action';
-import {Tooltip} from 'components/tooltip';
-import {Button} from 'components/button';
-import {ButtonControl} from 'components/button-control';
+import {withEventManager} from '../../event';
+import {actions as overlayIconActions} from '../../reducers/overlay-action';
+import {Tooltip} from '../../components/tooltip';
+import {Button} from '../button';
+import {ButtonControl} from '../button-control';
 import {createPortal} from 'preact/compat';
 
 /**
@@ -48,9 +47,8 @@ const COMPONENT_NAME = 'Settings';
 })
 @withPlayer
 @withEventManager
-class Settings extends Component {
-  state: Object;
-  _controlSettingsElement: HTMLDivElement;
+class Settings extends Component<any, any> {
+  _controlSettingsElement!: HTMLDivElement;
 
   /**
    * before component mounted, set initial state
@@ -123,7 +121,7 @@ class Settings extends Component {
    * @memberof Settings
    */
   getButtonBadgeType(): string | null {
-    const activeVideoTrackHeight: Object = this.props.player.getActiveTracks()?.video?.height;
+    const activeVideoTrackHeight: number = this.props.player.getActiveTracks()?.video?.height;
     return activeVideoTrackHeight ? getLabelBadgeType(activeVideoTrackHeight) : null;
   }
 
@@ -134,7 +132,7 @@ class Settings extends Component {
    * @returns {React$Element} - component element
    * @memberof Settings
    */
-  render(props: any): React$Element<any> | void {
+  render(props: any): VNode<any> | undefined {
     const showAudioMenu = props.showAudioMenu && props.audioTracks.length > 1;
     const showAdvancedAudioDescToggle = props.showAdvancedAudioDescToggle;
     const showCaptionsMenu = props.showCaptionsMenu && props.textTracks.length > 1;
@@ -145,7 +143,7 @@ class Settings extends Component {
     if (props.isLive && props.videoTracks.length <= 1 && !showAudioMenu && !showCaptionsMenu) return undefined;
     const buttonBadgeType: string = this.getButtonBadgeType() || '';
 
-    const targetId = document.getElementById(this.props.player.config.targetId) || document;
+    const targetId: HTMLDivElement | Document = document.getElementById(this.props.player.config.targetId) as HTMLDivElement || document;
     const portalSelector = `.overlay-portal`;
     return (
       <ButtonControl name={COMPONENT_NAME} ref={c => (c ? (this._controlSettingsElement = c) : undefined)}>
@@ -173,7 +171,7 @@ class Settings extends Component {
             {showSpeedMenu && <SpeedMenu />}
           </SmartContainer>
         )}
-        {this.state.cvaaOverlay ? createPortal(<CVAAOverlay onClose={this.onCVAAOverlayClose} />, targetId.querySelector(portalSelector)) : <div />}
+        {this.state.cvaaOverlay ? createPortal(<CVAAOverlay onClose={this.onCVAAOverlayClose} />, targetId.querySelector(portalSelector)!) : <div />}
       </ButtonControl>
     );
   }

src/components/shell/shell.js → src/components/shell/shell.tsx

@@ -1,18 +1,16 @@
-//@flow
 import style from '../../styles/style.scss';
-import {h, Component} from 'preact';
+import {h, Component, VNode} from 'preact';
 import {connect} from 'react-redux';
-import {bindActions} from '../../utils/bind-actions';
+import {bindActions} from '../../utils';
 import {actions as shellActions} from '../../reducers/shell';
 import {actions as engineActions} from '../../reducers/engine';
-import {KeyMap} from '../../utils/key-map';
+import {KeyMap} from '../../utils';
 import {withPlayer} from '../player';
-import {withEventManager} from 'event/with-event-manager';
-import {withEventDispatcher} from 'components/event-dispatcher';
-import {withLogger} from 'components/logger';
+import {EventType, withEventManager} from '../../event';
+import {withEventDispatcher} from '../event-dispatcher';
+import {withLogger} from '../logger';
 import {ResizeWatcher} from '../../utils/resize-watcher';
-import {debounce} from 'utils/debounce';
-import {FakeEvent} from 'event/fake-event';
+import {debounce} from '../../utils/debounce';
 
 /**
  * mapping state to props
@@ -76,12 +74,11 @@ const COMPONENT_NAME = 'Shell';
 @withEventManager
 @withLogger(COMPONENT_NAME)
 @withEventDispatcher(COMPONENT_NAME)
-class Shell extends Component {
-  state: Object;
-  hoverTimeout: ?TimeoutID;
-  _environmentClasses: Array<string>;
-  _playerResizeWatcher: ResizeWatcher;
-  _playerRef: ?HTMLDivElement;
+class Shell extends Component<any, any> {
+  hoverTimeout: number | null = null;
+  _environmentClasses!: string[];
+  _playerResizeWatcher!: ResizeWatcher;
+  _playerRef: HTMLDivElement | null = null;
 
   /**
    * on mouse over, add hover class (shows the player ui) and timeout of 3 seconds bt default or what pass as prop configuration to component
@@ -192,7 +189,8 @@ class Shell extends Component {
 
     if (this.state.nav && (e.keyCode === KeyMap.ENTER || e.keyCode === KeyMap.SPACE)) {
       this.unMuteFallback();
-      if (e.srcElement.contains(this._playerRef)) {
+      // @ts-ignore
+      if (e.srcElement!.contains(this._playerRef)) {
         e.preventDefault();
         this.props.player.paused ? this.props.player.play() : this.props.player.pause();
       }
@@ -228,8 +226,8 @@ class Shell extends Component {
     eventManager.listen(window, 'resize', debounce(this._onWindowResize, ON_PLAYER_RECT_CHANGE_DEBOUNCE_DELAY));
     eventManager.listen(document, 'scroll', debounce(this._updatePlayerClientRect, ON_PLAYER_RECT_CHANGE_DEBOUNCE_DELAY));
     this._playerResizeWatcher = new ResizeWatcher();
-    this._playerResizeWatcher.init(document.getElementById(this.props.targetId));
-    eventManager.listen(this._playerResizeWatcher, FakeEvent.Type.RESIZE, debounce(this._onWindowResize, ON_PLAYER_RECT_CHANGE_DEBOUNCE_DELAY));
+    this._playerResizeWatcher.init(document.getElementById(this.props.targetId)!);
+    eventManager.listen(this._playerResizeWatcher, EventType.RESIZE, debounce(this._onWindowResize, ON_PLAYER_RECT_CHANGE_DEBOUNCE_DELAY));
     eventManager.listen(player, player.Event.FIRST_PLAY, () => this._onWindowResize());
     this._onWindowResize();
   }
@@ -325,11 +323,11 @@ class Shell extends Component {
   _startHoverTimeout(): void {
     this._clearHoverTimeout();
     if (this.props.hoverTimeout) {
-      this.hoverTimeout = setTimeout(() => {
+      this.hoverTimeout = (setTimeout(() => {
         if (this._canEndHoverState()) {
           this._updatePlayerHover(false);
         }
-      }, this.props.hoverTimeout);
+      }, this.props.hoverTimeout)) as unknown as number;
     }
   }
 
@@ -354,7 +352,7 @@ class Shell extends Component {
    * @returns {void}
    * @memberof Shell
    */
-  componentDidUpdate(prevProps: Object): void {
+  componentDidUpdate(prevProps: any): void {
     // Update the hover state if the transition was from pre playback screen
     // or hover state changed from different component - should be handled in shell
     // or from paused to playing
@@ -382,7 +380,7 @@ class Shell extends Component {
    * @returns {React$Element} - component element
    * @memberof Shell
    */
-  render(props: any): React$Element<any> {
+  render(props: any): VNode<any> {
     let playerClasses = [style.player, style.skinDefault, ...this._environmentClasses].concat(props.playerClasses);
 
     if (this.props.prePlayback) playerClasses.push(style.prePlayback);
@@ -422,13 +420,13 @@ class Shell extends Component {
       );
     }
     playerClasses.push('notranslate');
-    playerClasses = playerClasses.join(' ');
+    const JoinedPlayerClasses = playerClasses.join(' ');
 
     return (
       <div
-        tabIndex="-1"
+        tabIndex={-1}
         ref={node => (this._playerRef = node)}
-        className={playerClasses}
+        className={JoinedPlayerClasses}
         onTouchEnd={this.onTouchEnd}
         onMouseUp={this.onMouseUp}
         onMouseOver={this.onMouseOver}

src/components/side-panel/side-panel.js → src/components/side-panel/side-panel.tsx

@@ -1,6 +1,5 @@
-//@flow
 import style from '../../styles/style.scss';
-import {h, Component} from 'preact';
+import {h, Component, VNode} from 'preact';
 import {PlayerArea} from '../player-area';
 import {SidePanelPositions} from '../../reducers/shell';
 import {connect} from 'react-redux';
@@ -23,15 +22,15 @@ const mapStateToProps = state => ({
  * @extends {Component}
  */
 @connect(mapStateToProps)
-class SidePanel extends Component {
+class SidePanel extends Component<any, any> {
   /**
    * this component should not render itself when player object changes.
    *
    * @param {Object} nextProps - next props of the component
    * @returns {void}
    * @memberof VideoPlayer
    */
-  shouldComponentUpdate(nextProps: Object): boolean {
+  shouldComponentUpdate(nextProps: any): boolean {
     const {sidePanelsStyles, position} = this.props;
     const {sidePanelsStyles: nextSidePanelsStyles, position: nextPosition} = nextProps;
     const currentStyle = sidePanelsStyles[position];
@@ -46,7 +45,7 @@ class SidePanel extends Component {
    * @returns {React$Element} - component element
    * @memberof SidePanel
    */
-  render(props: any): React$Element<any> {
+  render(props: any): VNode<any> {
     const {position, sidePanelsStyles} = props;
 
     const isVertical = [SidePanelPositions.RIGHT, SidePanelPositions.LEFT].indexOf(position) !== -1;

src/components/slider/slider.js → src/components/slider/slider.tsx

@@ -1,7 +1,6 @@
-//@flow
 import style from '../../styles/style.scss';
-import {h, Component} from 'preact';
-import {KeyMap} from '../../utils/key-map';
+import {h, Component, VNode} from 'preact';
+import {KeyMap} from '../../utils';
 
 const KEYBOARD_DRAG_STEP = 5;
 
@@ -14,11 +13,10 @@ const COMPONENT_NAME = 'Slider';
  * @example <Slider onChange={value => this.onOpacityChange(value)} value={this.initialOpacity} min={0} max={100} />
  * @extends {Component}
  */
-class Slider extends Component {
-  state: Object;
-  sliderWidth: number;
-  _sliderElement: HTMLElement;
-  _sliderElementOffsetLeft: number;
+class Slider extends Component<any, any> {
+  sliderWidth!: number;
+  _sliderElement!: HTMLElement;
+  _sliderElementOffsetLeft!: number;
 
   /**
    * before component mounted, set initial state of the slider
@@ -192,7 +190,7 @@ class Slider extends Component {
    * @returns {number} slider value
    * @memberof Slider
    */
-  mouseEventToValue(e: any, state: Object): number {
+  mouseEventToValue(e: any, state: any): number {
     let clientX;
     if (e.touches && e.touches.length > 0) {
       clientX = e.touches[0].clientX;
@@ -238,15 +236,15 @@ class Slider extends Component {
    * @returns {React$Element<any>} component element
    * @memberof Slider
    */
-  render(props: any): React$Element<any> {
+  render(props: any): VNode<any> {
     return (
       <div
         role="slider"
         aria-valuemin={this.state.min}
         aria-valuenow={this.state.value}
         aria-valuemax={this.state.max}
         aria-labelledby={props.name}
-        tabIndex="0"
+        tabIndex={0}
         ref={c => {
           if (c) {
             this._sliderElement = c;