fix(FEC-14174): Player v7 | If call to action overlay is opened behin…

…d advanced caption settings overlay, when closed, the video is blurred.
kaltura · Oct 7, 2024 · 07c5a7a · 07c5a7a
1 parent e292bba
commit 07c5a7a
Show file tree

Hide file tree

Showing 15 changed files with 2,001 additions and 470 deletions.
diff --git a/.eslintignore b/.eslintignore
@@ -1,3 +1,4 @@
 node_modules
 dist
+cypress/public
 webpack.config.js
diff --git a/.eslintrc b/.eslintrc
@@ -1,37 +1,25 @@
 {
     "root": true,
     "parser": "@typescript-eslint/parser",
-    "plugins": [
-        "@typescript-eslint",
-        "prettier",
-        "cypress"
-    ],
-    "extends": [
-        "eslint:recommended",
-        "plugin:@typescript-eslint/recommended",
-        "preact",
-        "plugin:cypress/recommended"
-    ],
+    "plugins": ["@typescript-eslint", "prettier", "jsdoc", "cypress", "jest"],
+    "extends": ["eslint:recommended", "plugin:@typescript-eslint/recommended", "preact", "plugin:jsdoc/recommended", "plugin:cypress/recommended"],
     "globals": {
-        "KalturaPlayer": true,
-        "KalturaPlayerTypes": true
+      "KalturaPlayer": true,
+      "KalturaPlayerTypes": true
     },
+    "ignorePatterns": ["node_modules"],
     "rules": {
-        "prettier/prettier": "error",
-        "no-unused-vars": "off",
-        "@typescript-eslint/no-unused-vars": [
-            "error"
-        ],
-        "jest/no-deprecated-functions": "off",
-        "jest/valid-expect": "off",
-        "jest/expect-expect": [
-            "error",
-            {
-                "assertFunctionNames": [
-                    "expect*",
-                    "*.should"
-                ]
-            }
-        ]
+      "prettier/prettier": "error",
+      "no-unused-vars": "off",
+      "@typescript-eslint/no-unused-vars": ["error"],
+      "jest/no-done-callback": "off",
+      "jest/no-deprecated-functions": "off",
+      "jest/valid-expect": "off",
+      "jest/expect-expect": [
+        "error",
+        {
+          "assertFunctionNames": ["expect*", "*.should"]
+        }
+      ]
     }
-}
+  }
diff --git a/package.json b/package.json
@@ -39,20 +39,29 @@
     "access": "public"
   },
   "devDependencies": {
-    "@playkit-js/kaltura-player-js": "3.17.0",
-    "@playkit-js/ui-managers": "1.4.3-canary.0-b33eab0",
+    "@babel/core": "^7.23.7",
+    "@babel/plugin-proposal-decorators": "^7.10.5",
+    "@babel/plugin-transform-react-jsx": "^7.23.4",
+    "@babel/plugin-transform-runtime": "^7.23.7",
+    "@babel/preset-env": "^7.23.8",
+    "@babel/preset-typescript": "^7.23.3",
+    "@babel/runtime": "^7.23.8",
+    "@playkit-js/kaltura-player-js": "3.17.25",
+    "@playkit-js/ui-managers": "1.6.0",
     "@types/node": "^14.11.2",
     "@typescript-eslint/eslint-plugin": "^5.25.0",
     "@typescript-eslint/parser": "^5.25.0",
+    "babel-loader": "^9.1.3",
     "conventional-github-releaser": "3.1.3",
     "copyfiles": "^2.4.1",
     "css-loader": "^6.7.1",
     "cypress": "13.13.1",
-    "eslint": "^7.32.0",
+    "eslint": "^8.42.0",
     "eslint-config-preact": "^1.3.0",
     "eslint-config-prettier": "^8.8.0",
     "eslint-plugin-cypress": "^2.13.3",
-    "eslint-plugin-mocha": "^10.1.0",
+    "eslint-plugin-jest": "^28.8.3",
+    "eslint-plugin-jsdoc": "^41.1.2",
     "eslint-plugin-prettier": "^4.2.1",
     "prettier": "^2.6.2",
     "rimraf": "^5.0.5",
@@ -63,6 +72,7 @@
     "style-loader": "^3.3.1",
     "ts-loader": "^9.2.8",
     "typescript": "^4.9.4",
+    "typescript-plugin-css-modules": "^5.1.0",
     "webpack": "^5.74.0",
     "webpack-cli": "^4.10.0",
     "webpack-dev-server": "^4.10.1"

diff --git a/src/call-to-action-manager.tsx b/src/call-to-action-manager.tsx
@@ -1,10 +1,11 @@
-// @ts-expect-error - TS2305: Module "@playkit-js/kaltura-player-js" has no exported member core
-import {KalturaPlayer, ui, PlaykitUI, core} from '@playkit-js/kaltura-player-js';
+import {h} from 'preact';
+
+import {KalturaPlayer, ui, core} from '@playkit-js/kaltura-player-js';
 const {PLAYER_SIZE} = ui.Components;
 
 import {FloatingItem, FloatingManager} from '@playkit-js/ui-managers';
 
-import {MessageButtonData, MessageData} from './types';
+import {MessageButtonData, MessageData} from './types/message-data';
 import {CallToActionOverlay, CallToActionPopup} from './components';
 import {CallToActionEvents} from './events/events';
 
@@ -15,7 +16,7 @@ const DESCRIPTION_LINES_LARGE = 4;
 
 class CallToActionManager {
   private player: KalturaPlayer;
-  private eventManager: PlaykitUI.EventManager;
+  private eventManager: any;
   private store: any;
 
   private removeActiveOverlay: null | (() => void) = null;
@@ -24,7 +25,7 @@ class CallToActionManager {
   private playQueued = false;
   private playOnClose = false;
 
-  constructor(player: KalturaPlayer, eventManager: PlaykitUI.EventManager) {
+  constructor(player: KalturaPlayer, eventManager: any) {
     this.player = player;
     this.store = ui.redux.useStore();
     this.eventManager = eventManager;
@@ -133,13 +134,9 @@ class CallToActionManager {
     if (link.startsWith('http://') || link.startsWith('https://')) {
       window.open(link, '_blank');
     } else {
-      // TODO use updated player types
-      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-      // @ts-ignore
       this.player.loadMedia({entryId: link});
     }
 
-    // @ts-expect-error - TS2339: Property dispatchEvent does not exist on type KalturaPlayer
     this.player.dispatchEvent(new FakeEvent(CallToActionEvents.CALL_TO_ACTION_BUTTON_CLICK, messageButtonData));
   }
 

diff --git a/src/components/button-with-tooltip/button-with-tooltip.tsx b/src/components/button-with-tooltip/button-with-tooltip.tsx
@@ -1,3 +1,5 @@
+import {h} from 'preact';
+
 import {useState, useEffect} from 'preact/hooks';
 import {Button, ButtonType} from '@playkit-js/common/dist/components/button';
 interface ButtonWithTooltipProps {
@@ -8,7 +10,7 @@ interface ButtonWithTooltipProps {
 }
 
 const ButtonWithTooltip = ({type, label, focusOnMount, onClick}: ButtonWithTooltipProps) => {
-  const [buttonRef, setButtonRef] = useState<HTMLButtonElement | null>();
+  const [buttonRef, setButtonRef] = useState<HTMLButtonElement | null>(null);
 
   const [isFinalized, setIsFinalized] = useState(false);
   const [showTooltip, setShowTooltip] = useState(true);

diff --git a/src/components/call-to-action-buttons/call-to-action-buttons.tsx b/src/components/call-to-action-buttons/call-to-action-buttons.tsx
@@ -1,8 +1,10 @@
+import {h} from 'preact';
+
 import {ButtonType} from '@playkit-js/common';
 import {ButtonWithTooltip} from '../button-with-tooltip';
 
 import * as styles from './call-to-action-buttons.scss';
-import {MessageButtonData, MessageButtonType} from '../../types';
+import {MessageButtonData, MessageButtonType} from '../../types/message-data';
 
 const CallToActionButtons = ({buttons, onClick}: {buttons: Array<MessageButtonData>; onClick: (messageButtonData: MessageButtonData) => void}) => {
   if (!buttons.length) {
@@ -23,7 +25,7 @@ const CallToActionButtons = ({buttons, onClick}: {buttons: Array<MessageButtonDa
   const button2Type = button2.type === MessageButtonType.SECONDARY ? ButtonType.secondary : ButtonType.primary;
 
   return (
-    <div className={`${styles.callToActionButtons} ${styles.twoButtons}`}>
+    <div className={styles.callToActionButtons}>
       <ButtonWithTooltip type={button1Type} label={button1.label} onClick={(): void => onClick(button1)} focusOnMount />
       <ButtonWithTooltip type={button2Type} label={button2.label} onClick={(): void => onClick(button2)} />
     </div>

diff --git a/src/components/call-to-action-overlay/call-to-action-overlay.scss b/src/components/call-to-action-overlay/call-to-action-overlay.scss
@@ -1,8 +1,5 @@
 .call-to-action-overlay {
-    -webkit-backdrop-filter: blur(16px);
     align-items: center;
-    backdrop-filter: blur(16px);
-    background-color: rgba(0, 0, 0, 0.7);
     display: flex;
     height: 100%;
     justify-content: center;

diff --git a/src/components/call-to-action-overlay/call-to-action-overlay.tsx b/src/components/call-to-action-overlay/call-to-action-overlay.tsx
@@ -1,15 +1,17 @@
+import {h} from 'preact';
+
 import {Button, ButtonType, ButtonSize, OverlayPortal, FocusTrap} from '@playkit-js/common';
 
 import {ui} from '@playkit-js/kaltura-player-js';
-const {PLAYER_SIZE} = ui.Components;
+const {PLAYER_SIZE, Overlay} = ui.Components;
 const {withText} = ui.preacti18n;
 const {connect} = ui.redux;
 
 import {TextWithTooltip} from '../text-with-tooltip';
 import {CallToActionButtons} from '../call-to-action-buttons';
 
 import * as styles from './call-to-action-overlay.scss';
-import {MessageButtonData} from '../../types';
+import {MessageButtonData} from '../../types/message-data';
 
 interface CallToActionOverlayProps {
   title: string;
@@ -58,35 +60,37 @@ const CallToActionOverlay = withText({closeLabel: 'overlay.close'})(
     ({title, description, buttons, onClose, onClick, closeLabel, descriptionLines, sizeClass}: CallToActionOverlayProps): any => {
       return (
         <OverlayPortal>
-          <div data-testid="call-to-action-overlay" className={`${styles.callToActionOverlay} ${sizeClass}`}>
-            <FocusTrap active>
-              <div className={styles.closeButton} data-testid="call-to-action-overlay-close-button">
-                <Button
-                  tabIndex={0}
-                  onClick={onClose}
-                  type={ButtonType.borderless}
-                  size={ButtonSize.medium}
-                  tooltip={{label: closeLabel!}}
-                  ariaLabel={closeLabel}
-                  icon={'close'}
-                  focusOnMount={buttons.length === 0}
-                />
-              </div>
-              <div className={styles.content}>
-                <div className={styles.title}>
-                  <TextWithTooltip text={title || ''} numberOfLines={1} />
+          <FocusTrap active>
+            <Overlay open permanent>
+              <div data-testid="call-to-action-overlay" className={`${styles.callToActionOverlay} ${sizeClass}`}>
+                <div className={styles.closeButton} data-testid="call-to-action-overlay-close-button">
+                  <Button
+                    tabIndex={0}
+                    onClick={onClose}
+                    type={ButtonType.borderless}
+                    size={ButtonSize.medium}
+                    tooltip={{label: closeLabel!}}
+                    ariaLabel={closeLabel}
+                    icon={'close'}
+                    focusOnMount={buttons.length === 0}
+                  />
                 </div>
+                <div className={styles.content}>
+                  <div className={styles.title}>
+                    <TextWithTooltip text={title || ''} numberOfLines={1} />
+                  </div>
 
-                <div className={styles.description}>
-                  <TextWithTooltip text={description || ''} numberOfLines={descriptionLines} />
-                </div>
+                  <div className={styles.description}>
+                    <TextWithTooltip text={description || ''} numberOfLines={descriptionLines} />
+                  </div>
 
-                <div className={styles.buttonsContainer}>
-                  <CallToActionButtons buttons={buttons} onClick={onClick} />
+                  <div className={styles.buttonsContainer}>
+                    <CallToActionButtons buttons={buttons} onClick={onClick} />
+                  </div>
                 </div>
               </div>
-            </FocusTrap>
-          </div>
+            </Overlay>
+          </FocusTrap>
         </OverlayPortal>
       );
     }

diff --git a/src/components/call-to-action-popup/call-to-action-popup.scss b/src/components/call-to-action-popup/call-to-action-popup.scss
@@ -1,5 +1,3 @@
-@import '~@playkit-js/playkit-js-ui';
-
 .call-to-action-popup {
     background-color: rgba(0, 0, 0, 0.7); 
     bottom: 0;

diff --git a/src/components/call-to-action-popup/call-to-action-popup.tsx b/src/components/call-to-action-popup/call-to-action-popup.tsx
@@ -1,3 +1,5 @@
+import {h} from 'preact';
+
 import {Button, ButtonType, ButtonSize} from '@playkit-js/common';
 import {ui} from '@playkit-js/kaltura-player-js';
 const {withText} = ui.preacti18n;
@@ -6,7 +8,7 @@ import {TextWithTooltip} from '../text-with-tooltip';
 import {CallToActionButtons} from '../call-to-action-buttons';
 
 import * as styles from './call-to-action-popup.scss';
-import {MessageButtonData} from '../../types';
+import {MessageButtonData} from '../../types/message-data';
 interface CallToActionPopupProps {
   title: string;
   description: string;

diff --git a/src/components/text-with-tooltip/text-with-tooltip.tsx b/src/components/text-with-tooltip/text-with-tooltip.tsx
@@ -1,9 +1,12 @@
+import {h, Fragment} from 'preact';
+
 import {useState, useRef, useLayoutEffect} from 'preact/hooks';
 import {ui} from '@playkit-js/kaltura-player-js';
 const {Tooltip} = ui.Components;
 
 import * as styles from './text-with-tooltip.scss';
 
+// TODO - use version with key fix from common once the component is added to common
 const TextWithTooltip = ({text, numberOfLines}: {text: string; numberOfLines: number}) => {
   const comparisonTextRef = useRef(null);
   const textRef = useRef(null);
@@ -35,10 +38,10 @@ const TextWithTooltip = ({text, numberOfLines}: {text: string; numberOfLines: nu
     </div>
   );
   const content = !isFinalized ? (
-    <>
+    <Fragment>
       {textElement}
       {comparisonTextElement}
-    </>
+    </Fragment>
   ) : (
     textElement
   );

diff --git a/src/types/index.ts b/src/types/index.ts
diff --git a/tsconfig.json b/tsconfig.json
@@ -1,22 +1,53 @@
 {
   "compilerOptions": {
-    "allowJs": false,
-    "baseUrl": "..",
-    "experimentalDecorators": true,
-    "jsx": "react-jsx",
-    "jsxImportSource": "preact",
-    "module": "commonjs",
+    "plugins": [
+      {
+        "name": "typescript-plugin-css-modules",
+        "options": {
+          "customMatcher": "\\.(css|scss)$",
+          "classnameTransform": "camelCase"
+        }
+      }
+    ],
+    "target": "ESNext",
+    "module": "ESNext",
     "moduleResolution": "Node",
-    "preserveSymlinks": true,
-    "skipLibCheck": true,
+    "baseUrl": ".",
     "sourceMap": true,
     "strict": true,
-    "target": "ES5",
-    "types": ["cypress", "node"],
+    "strictNullChecks": true,
+    "strictPropertyInitialization": true,
+    "resolveJsonModule": true,
+    "esModuleInterop": true,
+    "experimentalDecorators": true,
+    "skipLibCheck": true,
+    "jsx": "preserve",
+    "jsxFactory": "h",
+    "jsxFragmentFactory": "Fragment",
+    "types": [
+      "cypress",
+      "node"
+    ],
     "paths": {
-      "*": ["./src/*", "./node_modules/*"]
+      "react": [
+        "./node_modules/preact/compat/"
+      ],
+      "react-dom": [
+        "./node_modules/preact/compat/"
+      ]
     },
-    "lib": ["es2015", "dom"],
+    "lib": [
+      "dom",
+      "ESNext"
+    ],
+    "outDir": "./lib/",
+    "allowSyntheticDefaultImports": true
   },
-  "include": ["src/**/*.tsx", "src/**/*.ts", "node_modules/@playkit-js/kaltura-player-js/types.d.ts", "cypress/e2e/*.ts"]
+  "include": [
+    "src/**/*",
+    "cypress/e2e/*.ts"
+  ],
+  "exclude": [
+    "node_modules/**/*",
+  ]
 }