Addressing Sivan comments & add browserlist

package.json

@@ -98,8 +98,12 @@
     "typescript-plugin-css-modules": "^5.0.2",
     "webpack": "^5.88.2",
     "webpack-cli": "^5.1.4",
-    "webpack-dev-server": "^4.15.1"
+    "webpack-dev-server": "^4.15.1",
+    "@playkit-js/browserslist-config": "^1.0.5"
   },
+  "browserslist": [
+    "extends @playkit-js/browserslist-config"
+  ],
   "publishConfig": {
     "cache": "~/.npm",
     "access": "public"

src/components/cvaa-overlay/sample-captions-style-button.tsx

@@ -1,4 +1,4 @@
-import {KeyMap} from '../../utils/key-map';
+import {KeyMap} from "../../utils";
 import style from '../../styles/style.scss';
 import {Icon, IconType} from '../icon';
 import {h} from 'preact';

src/components/expandable-text/expandable-text.tsx

@@ -2,7 +2,7 @@ import { h, ComponentChildren } from "preact";
 import {withText} from 'preact-i18n';
 
 import {useState, useRef, useLayoutEffect} from 'preact/hooks';
-import {KeyMap} from '../../utils/key-map';
+import {KeyMap} from "../../utils";
 
 import styles from '../../styles/style.scss';
 
@@ -101,10 +101,8 @@ const ExpandableText: new(props?: any, context?: any) => any = withText({
     </div>
   );
 });
-/*@ts-expect-error - Property 'defaultProps' does not exist on type 'new (props?: any, context?: any) => any */
-ExpandableText.defaultProps = {
+ExpandableText['defaultProps'] = {
   buttonProps: {}
 };
-/*@ts-expect-error - Property 'displayName' does not exist on type 'new (props?: any, context?: any) => any'. */
-ExpandableText.displayName = COMPONENT_NAME;
+ExpandableText['displayName'] = COMPONENT_NAME;
 export {ExpandableText};

src/components/menu/menu.tsx

@@ -8,10 +8,9 @@ import {withEventManager} from '../../event';
 import {WithEventManagerProps} from '../../event/with-event-manager';
 
 type OptionType = {
-  value: any; // Replace 'any' with a more specific type if possible
+  value: any;
   label: string;
   active: boolean;
-  // Add other properties of options here if they exist
 };
 
 type MenuProps = {
@@ -21,11 +20,10 @@ type MenuProps = {
   options: OptionType[];
   labelledby?: string;
   pushRef?: (HTMLElement) => void;
-  onMenuChosen: (value: any) => void; // Replace 'any' with the specific type of option value
+  onMenuChosen: (value: any) => void;
   onClose: () => void;
   hideSelect?: boolean;
   parentEl?: HTMLDivElement;
-  // Add any other props that Menu might use
 };
 
 /**

src/components/player-area/player-area-provider.tsx

@@ -53,10 +53,10 @@ class PlayerAreaProvider extends Component<WithLoggerProps & PlayerAreaProviderP
    * @private
    * @return {void}
    */
-  _initializePlayerComponents() {
+  _initializePlayerComponents(): void {
     if (this.props.uiComponents && this.props.uiComponents.length > 0) {
-      // @ts-ignore
-      this.props.uiComponents.forEach(this._addNewComponent);
+      // @ts-ignore - TODO
+      this.props.uiComponents.forEach((c)=> this._addNewComponent(c));
       this._emitAllListeners();
     }
   }
@@ -66,7 +66,7 @@ class PlayerAreaProvider extends Component<WithLoggerProps & PlayerAreaProviderP
    * @returns {void}
    * @private
    */
-  _emitListeners(listeners: ComponentListener[]) {
+  _emitListeners(listeners: ComponentListener[]): void {
     const {activePresetName} = this.props;
 
     (listeners || []).forEach(listener => {
@@ -84,7 +84,7 @@ class PlayerAreaProvider extends Component<WithLoggerProps & PlayerAreaProviderP
    * @returns {void}
    * @private
    */
-  _emitAllListeners() {
+  _emitAllListeners(): void {
     this._emitListeners(this._listeners);
   }
 

src/components/shell/shell.tsx

@@ -420,13 +420,13 @@ class Shell extends Component<any, any> {
       );
     }
     playerClasses.push('notranslate');
-    const JoinedPlayerClasses = playerClasses.join(' ');
+    const joinedPlayerClasses = playerClasses.join(' ');
 
     return (
       <div
         tabIndex={-1}
         ref={node => (this._playerRef = node)}
-        className={JoinedPlayerClasses}
+        className={joinedPlayerClasses}
         onTouchEnd={this.onTouchEnd}
         onMouseUp={this.onMouseUp}
         onMouseOver={this.onMouseOver}

src/components/smart-container/smart-container.tsx

@@ -39,9 +39,6 @@ const COMPONENT_NAME = 'SmartContainer';
 @withKeyboardA11y
 @withText({settingsText: 'settings.title'})
 class SmartContainer extends Component<any, any> {
-  // ie11 fix (FEC-7312) - don't remove
-  _portal: any;
-
   /**
    * before component mounted, add player css class
    *

src/components/unmute-indication/unmute-indication.tsx

@@ -75,7 +75,7 @@ class UnmuteIndication extends Component<any, any> {
    * @returns {void}
    */
   _iconOnlyTimeout(): void {
-    // @ts-ignore
+    // @ts-expect-error - Type 'Timeout' is not assignable to type 'number'.
     this._iconTimeout = setTimeout(() => {
       this.setState({iconOnly: true});
     }, MUTED_AUTOPLAY_ICON_ONLY_DEFAULT_TIMEOUT);

src/types/global.d.ts

@@ -2,11 +2,6 @@
 declare var __CSS_MODULE_PREFIX__: string;
 declare var __REDUX_DEVTOOLS_EXTENSION_COMPOSE__: string;
 
-declare module '*.css' {
-  const classes: { [key: string]: string };
-  export default classes;
-}
-
 declare module '*.scss' {
   const classes: { [key: string]: string };
   export default classes;

src/types/reducers/engine.ts

@@ -1,4 +1,4 @@
-import { AudioTrack, PKTextTrack, VideoTrack } from "@playkit-js/playkit-js";
+import { AudioTrack, PKTextTrack, VideoTrack } from '@playkit-js/playkit-js';
 
 export interface EngineState {
   isIdle: boolean;

src/ui-manager.tsx

@@ -1,7 +1,8 @@
 import {h, render} from 'preact';
 import {Provider} from 'react-redux';
 import {IntlProvider} from 'preact-i18n';
-import {createStore, compose, Store} from 'redux'; // the former is deprecated, react docs recommends using import {cconfigureStore} from '@reduxjs/toolkit';
+// TODO the 'redux' lib is deprecated, react docs recommends using import {cconfigureStore} from '@reduxjs/toolkit';
+import {createStore, compose, Store} from 'redux';
 import {copyDeep} from './utils/copy-deep';
 import {mergeDeep} from './utils/merge-deep';
 import {getLogLevel, setLogLevel, setLogger, LogLevelType, LogLevel} from './utils/logger';
@@ -28,7 +29,7 @@ import {EventDispatcherProvider} from './components';
 import {KeyboardEventProvider} from './components';
 import {ThemesManager} from './utils/themes-manager';
 import {UIOptionsObject, UIPreset} from './types';
-import {KalturaPlayer, KPUIAddComponent, KPUIComponent} from '@playkit-js/kaltura-player-js';
+import {KalturaPlayer, KPUIComponent} from '@playkit-js/kaltura-player-js';
 import {RootState} from './types';
 
 /**
@@ -162,9 +163,10 @@ class UIManager {
    * @returns {void}
    */
   _createStore(config: UIOptionsObject): void {
-    const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
-    // @ts-ignore
-    this.store = createStore<RootState, any>(reducer, composeEnhancers(middleware(this.player, config)));
+    // const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
+    // TODO - fix the window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__
+    // TODO - Deprecated symbol used, consult docs for better alternative, React recommend using the configureStore method of the @reduxjs/toolkit packag
+    this.store = createStore<RootState, any, any, any>(reducer, compose(middleware(this.player, config)));
   }
 
   /**

src/utils/logger.ts

@@ -82,7 +82,6 @@ function setLogger(logger?: LoggerType): void {
  * @returns {Object} - the logger class
  */
 function getLogger(name?: string): any {
-  //$FlowFixMe
   return JsLogger.get(name);
 }
 

src/utils/time-format.ts

@@ -1,28 +1,30 @@
-// eslint-disable-next-line  @typescript-eslint/ban-ts-comment
-// @ts-nocheck
 /**
  * Formatting seconds input into time format
  *
  * @param {number} input number of seconds
  * @returns {string} formatted time string
  */
-function toHHMMSS(input: number): string {
-  const secNum = parseInt(input, 10);
-  let hours = Math.floor(secNum / 3600);
-  let minutes = Math.floor((secNum - hours * 3600) / 60);
-  let seconds = secNum - hours * 3600 - minutes * 60;
+function toHHMMSS(input: string | number): string {
+  const secNum = parseInt(input as string, 10);
+  const hours: number = Math.floor(secNum / 3600);
+  const minutes: number = Math.floor((secNum - hours * 3600) / 60);
+  const seconds: number = secNum - hours * 3600 - minutes * 60;
+
+  let hoursFormat = hours as unknown as string;
+  let minutesFormat = minutes as unknown as string;
+  let secondsFormat = seconds as unknown as string;
 
   if (hours < 10) {
-    hours = '0' + hours;
+    hoursFormat = '0' + hours;
   }
   if (minutes < 10) {
-    minutes = '0' + minutes;
+    minutesFormat = '0' + minutes;
   }
   if (seconds < 10) {
-    seconds = '0' + seconds;
+    secondsFormat = '0' + seconds;
   }
 
-  return `${hours !== '00' ? hours + ':' : ''}${minutes}:${seconds}`;
+  return `${hoursFormat !== '00' ? hoursFormat + ':' : ''}${minutesFormat}:${secondsFormat}`;
 }
 
 /**

yarn.lock

@@ -1218,6 +1218,11 @@
     "@nodelib/fs.scandir" "2.1.5"
     fastq "^1.6.0"
 
+"@playkit-js/browserslist-config@^1.0.5":
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/@playkit-js/browserslist-config/-/browserslist-config-1.0.5.tgz#7d4a7f7b087caa2620d9f89263a05bd4a0af99a4"
+  integrity sha512-aEx7S4nW1XakhTtx01Use7viuuZ61ho6FeL6iHtZMpclsjEPYf0N8jQt9e3aDBKhaZZ8pKl5250hI4pjWWBfAA==
+
 "@playkit-js/kaltura-player-js@canary":
   version "3.17.5-canary.0-50b07bd"
   resolved "https://registry.yarnpkg.com/@playkit-js/kaltura-player-js/-/kaltura-player-js-3.17.5-canary.0-50b07bd.tgz#1bdc2b7b0dfa2fb4a8ea7d72716b74df9dc5810f"