fix(FEC-13535): align more/less button with design (#350)

semarche-kaltura · web-flow · commit e9dc686bb072 · 2024-02-14T15:18:34.000+02:00
1. fix styles <img width="331" alt="image" src="https://github.com/kaltura/playkit-js-navigation/assets/51074448/1b9a2754-f55e-41a7-ac22-13c33f00ab0d"> 2. upd Kaltura-player version 3. cleanup code from ts-ignores
diff --git a/package.json b/package.json
@@ -12,13 +12,14 @@
     "url": "git+https://github.com/kaltura/playkit-js-navigation.git"
   },
   "dependencies": {
-    "@playkit-js/common": "^1.2.10",
-    "@playkit-js/playkit-js-ui": "^0.77.3",
-    "@playkit-js/ui-managers": "^1.3.11",
-    "sanitize-html": "^2.11.0"
+    "@playkit-js/common": "1.5.8",
+    "@playkit-js/playkit-js-ui": "0.78.1-canary.0-a561b43",
+    "@playkit-js/ui-managers": "^1.5.2",
+    "sanitize-html": "2.11.0"
   },
   "devDependencies": {
-    "@playkit-js/kaltura-player-js": "3.15.3-canary.0-d05bc55",
+    "@playkit-js/kaltura-player-js": "3.17.10-canary.0-7871537",
+    "@types/sanitize-html": "^2.11.0",
     "conventional-github-releaser": "3.1.3",
     "cross-env": "^7.0.3",
     "css-loader": "^6.7.1",
@@ -37,7 +38,7 @@
     "webpack-dev-server": "^4.9.0"
   },
   "peerDependencies": {
-    "@playkit-js/kaltura-player-js": "canary"
+    "@playkit-js/kaltura-player-js": "3.17.10-canary.0-7871537"
   },
   "license": "AGPL-3.0",
   "files": [
diff --git a/src/components/close-button/index.tsx b/src/components/close-button/index.tsx
@@ -1,5 +1,5 @@
 import {h} from 'preact';
-import {ui} from '@playkit-js/kaltura-player-js';
+import {preacti18n} from '@playkit-js/playkit-js-ui';
 import * as styles from './close-button.scss';
 import {A11yWrapper} from '@playkit-js/common/dist/hoc/a11y-wrapper';
 import {icons} from '../icons';
@@ -10,7 +10,7 @@ interface CloseButtonProps {
   closeButtonLabel?: string;
 }
 
-const {withText, Text} = ui.preacti18n;
+const {withText, Text} = preacti18n;
 
 const translates = {
   closeButtonLabel: <Text id="navigation.hide_plugin">Hide Navigation</Text>
diff --git a/src/components/error/error.tsx b/src/components/error/error.tsx
@@ -1,10 +1,10 @@
 import {h} from 'preact';
-import {ui} from '@playkit-js/kaltura-player-js';
+import {preacti18n} from '@playkit-js/playkit-js-ui';
 import {A11yWrapper} from '@playkit-js/common/dist/hoc/a11y-wrapper';
 import * as styles from './error.scss';
 import {ErrorIconSVG} from '../icons/error-icon';
 
-const {withText, Text} = ui.preacti18n;
+const {withText, Text} = preacti18n;
 
 export interface ErrorProps {
   onRetryLoad: () => void;
diff --git a/src/components/loading/loading.tsx b/src/components/loading/loading.tsx
@@ -1,9 +1,9 @@
 import {h} from 'preact';
-import {ui} from '@playkit-js/kaltura-player-js';
+import {preacti18n} from '@playkit-js/playkit-js-ui';
 import * as styles from './loading.scss';
 import {LoaderIconSVG} from '../icons/loader-icon';
 
-const {withText, Text} = ui.preacti18n;
+const {withText, Text} = preacti18n;
 
 const translates = {
   loading: <Text id="navigation.loading">Loading</Text>
diff --git a/src/components/navigation-filter/navigation-filter.tsx b/src/components/navigation-filter/navigation-filter.tsx
@@ -1,12 +1,13 @@
 import {h, Component, Fragment} from 'preact';
 import {ui} from '@playkit-js/kaltura-player-js';
+import {preacti18n} from '@playkit-js/playkit-js-ui';
 import {A11yWrapper} from '@playkit-js/common/dist/hoc/a11y-wrapper';
 import * as styles from './navigation-filter.scss';
 import {ItemTypes, ItemTypesTranslates} from '../../types';
 import {IconsFactory} from '../navigation/icons/IconsFactory';
 
-const {Tooltip} = KalturaPlayer.ui.components;
-const {withText, Text} = ui.preacti18n;
+const {Tooltip} = ui.components;
+const {withText, Text} = preacti18n;
 
 const translates = (props: FilterProps) => {
   const {activeTab, totalResults, listDataContainCaptions} = props;
@@ -98,7 +99,8 @@ export class NavigationFilter extends Component<FilterProps> {
   componentDidUpdate(previousProps: Readonly<FilterProps>, previousState: Readonly<{}>, snapshot: any) {
     if (previousProps.totalResults !== this.props.totalResults) {
       const noResultsFound = `${this.props.noResultTitle}. ${this.props.noResultDescription}`;
-      const searchResultsLabel = this.props.totalResults === null ? '' : (this.props.totalResults > 0 ? this.props.searchResultsLabel! : noResultsFound);
+      const searchResultsLabel =
+        this.props.totalResults === null ? '' : this.props.totalResults > 0 ? this.props.searchResultsLabel! : noResultsFound;
       this.props.setTextToRead(searchResultsLabel);
     }
   }
diff --git a/src/components/navigation-search/navigation-search.tsx b/src/components/navigation-search/navigation-search.tsx
@@ -1,9 +1,9 @@
 import {h, Component} from 'preact';
-import {ui} from '@playkit-js/kaltura-player-js';
+import {preacti18n} from '@playkit-js/playkit-js-ui';
 import {InputField} from '@playkit-js/common/dist/components/input-field';
 import {debounce} from '@playkit-js/common/dist/utils-common/utils';
 
-const {withText, Text} = ui.preacti18n;
+const {withText, Text} = preacti18n;
 
 const translates = {
   searchPlaceholder: <Text id="navigation.search_placeholder">Search in video</Text>,
diff --git a/src/components/navigation/autoscroll-button/autoscroll-button.tsx b/src/components/navigation/autoscroll-button/autoscroll-button.tsx
@@ -1,10 +1,11 @@
 import {h} from 'preact';
 import {ui} from '@playkit-js/kaltura-player-js';
+import {preacti18n} from '@playkit-js/playkit-js-ui';
 import * as styles from './autoscroll-button.scss';
 import {A11yWrapper, OnClick} from '@playkit-js/common/dist/hoc/a11y-wrapper';
 
-const {withText, Text} = ui.preacti18n;
-const {Tooltip} = KalturaPlayer.ui.components;
+const {withText, Text} = preacti18n;
+const {Tooltip} = ui.components;
 
 interface AutoscrollButtonProps {
   onClick: OnClick;
@@ -26,7 +27,7 @@ export const AutoscrollButton = withText(translates)(
           tabIndex={isAutoScrollEnabled ? -1 : 1}
           aria-label={autoScrollLabel}
           ref={setAutoscrollButtonRef}>
-          <Tooltip label={autoScrollLabel} type="left">
+          <Tooltip label={autoScrollLabel!} type="left">
             <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
               <path
                 d="M6.29289 15.2929C6.65338 14.9324 7.22061 14.9047 7.6129 15.2097L7.70711 15.2929L12 19.585L16.2929 15.2929C16.6534 14.9324 17.2206 14.9047 17.6129 15.2097L17.7071 15.2929C18.0676 15.6534 18.0953 16.2206 17.7903 16.6129L17.7071 16.7071L12.7071 21.7071C12.3466 22.0676 11.7794 22.0953 11.3871 21.7903L11.2929 21.7071L6.29289 16.7071C5.90237 16.3166 5.90237 15.6834 6.29289 15.2929Z"
diff --git a/src/components/navigation/icons/EmptyList.tsx b/src/components/navigation/icons/EmptyList.tsx
@@ -1,8 +1,8 @@
 import {h} from 'preact';
-import {ui} from '@playkit-js/kaltura-player-js';
+import {preacti18n} from '@playkit-js/playkit-js-ui';
 import * as styles from './EmptyList.scss';
 
-const {withText, Text} = ui.preacti18n;
+const {withText, Text} = preacti18n;
 
 const translates = {
   noResultTitle: <Text id="navigation.search_no_results_title">No Results Found</Text>,
diff --git a/src/components/navigation/icons/EmptyState.tsx b/src/components/navigation/icons/EmptyState.tsx
@@ -1,35 +1,30 @@
 import {h} from 'preact';
 import * as styles from './EmptyState.scss';
-import {ARROW_IMG, CURLY_LINE_IMG} from "../../constants/svgs";
-import {ui} from '@playkit-js/kaltura-player-js';
-const {withText, Text} = ui.preacti18n;
+import {ARROW_IMG, CURLY_LINE_IMG} from '../../constants/svgs';
+import {preacti18n} from '@playkit-js/playkit-js-ui';
+const {withText, Text} = preacti18n;
 
 interface EmptyStateProps {
-    searchPlaceholder?: string;
-    searchDescription?: string;
+  searchPlaceholder?: string;
+  searchDescription?: string;
 }
 
 const translates = {
-    searchPlaceholder: <Text id="navigation.search_placeholder">Search in video</Text>,
-    searchDescription: <Text id="navigation.search_description">You can search the video captions for specific words or phrases.</Text>
+  searchPlaceholder: <Text id="navigation.search_placeholder">Search in video</Text>,
+  searchDescription: <Text id="navigation.search_description">You can search the video captions for specific words or phrases.</Text>
 };
 
 export const EmptyState = withText(translates)((props: EmptyStateProps) => {
   return (
-      <div class={styles.emptyState}>
-        <div class={styles.arrow}>
-          <svg width="109" height="51" viewBox="0 0 109 51" fill="none" xmlns="http://www.w3.org/2000/svg">
-            <path fill-rule="evenodd" clip-rule="evenodd" d={CURLY_LINE_IMG} fill="#CCCCCC"/>
-            <path fill-rule="evenodd" clip-rule="evenodd" d={ARROW_IMG} fill="#CCCCCC"/>
-          </svg>
-        </div>
-        <p class={styles.title}>
-            {props.searchPlaceholder}
-        </p>
-        <p class={styles.description}>
-            {props.searchDescription}
-
-        </p>
+    <div class={styles.emptyState}>
+      <div class={styles.arrow}>
+        <svg width="109" height="51" viewBox="0 0 109 51" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <path fill-rule="evenodd" clip-rule="evenodd" d={CURLY_LINE_IMG} fill="#CCCCCC" />
+          <path fill-rule="evenodd" clip-rule="evenodd" d={ARROW_IMG} fill="#CCCCCC" />
+        </svg>
       </div>
+      <p class={styles.title}>{props.searchPlaceholder}</p>
+      <p class={styles.description}>{props.searchDescription}</p>
+    </div>
   );
 });
diff --git a/src/components/navigation/icons/IconsFactory.tsx b/src/components/navigation/icons/IconsFactory.tsx
@@ -6,7 +6,7 @@ import {ChapterIcon} from './ChapterIcon';
 import {SlideIcon} from './SlideIcon';
 import {CaptionIcon} from './CaptionIcon';
 import * as styles from './IconsFactory.scss';
-import {QuizIcon} from "@playkit-js/common/dist/icon/icons/quiz";
+import {QuizIcon} from '@playkit-js/common/dist/icon/icons/quiz';
 export interface Props {
   iconType: ItemTypes;
   color?: any;
diff --git a/src/components/navigation/index.tsx b/src/components/navigation/index.tsx
@@ -1,5 +1,5 @@
 import {h, Component} from 'preact';
-import {ui} from '@playkit-js/kaltura-player-js';
+import {preacti18n, utils} from '@playkit-js/playkit-js-ui';
 import * as styles from './navigaton.scss';
 import {OnClick} from '@playkit-js/common/dist/hoc/a11y-wrapper';
 import {NavigationList, Props} from './navigation-list/NavigationList';
@@ -22,8 +22,8 @@ import {ItemTypes, ItemData, HighlightedMap, ItemTypesTranslates} from '../../ty
 import {CloseButton} from '../close-button';
 import {ScreenReaderContext, ScreenReaderProvider} from '@playkit-js/common/dist/hoc/sr-wrapper';
 
-const {KeyMap} = ui.utils;
-const {withText, Text} = ui.preacti18n;
+const {KeyMap} = utils;
+const {withText, Text} = preacti18n;
 
 export interface SearchFilter {
   searchQuery: string;
@@ -95,18 +95,18 @@ class TranslatedNavigationFilter extends Component<Omit<FilterProps, 'itemTypesT
     return (
       <ScreenReaderContext.Consumer>
         {(setTextToRead: (textToRead: string, delay?: number | undefined) => void) => {
-          return <NavigationFilter {...this.props} itemTypesTranslates={itemTypesTranslates} setTextToRead={setTextToRead}/>;
+          return <NavigationFilter {...this.props} itemTypesTranslates={itemTypesTranslates} setTextToRead={setTextToRead} />;
         }}
       </ScreenReaderContext.Consumer>
-    )
+    );
   }
 }
 
 @withText(translates(1))
 class TranslatedNavigationList extends Component<Omit<Props, 'itemTypesTranslates'>> {
   render() {
     const itemTypesTranslates = getItemTypesTranslates(this.props);
-    return <NavigationList {...this.props} itemTypesTranslates={itemTypesTranslates}/>
+    return <NavigationList {...this.props} itemTypesTranslates={itemTypesTranslates} />;
   }
 }
 
diff --git a/src/components/navigation/navigation-item/NavigationItem.scss b/src/components/navigation/navigation-item/NavigationItem.scss
@@ -124,3 +124,9 @@
     border-radius: 3px;
   }
 }
+
+.expandable-text:not(.expanded) {
+  display: flex;
+  justify-content: space-between;
+  gap: 8px;
+}
diff --git a/src/components/navigation/navigation-item/NavigationItem.tsx b/src/components/navigation/navigation-item/NavigationItem.tsx
@@ -1,14 +1,13 @@
 import {Component, h, Fragment} from 'preact';
+import {preacti18n} from '@playkit-js/playkit-js-ui';
+import {ui} from '@playkit-js/kaltura-player-js';
 import {A11yWrapper} from '@playkit-js/common/dist/hoc/a11y-wrapper';
 import * as styles from './NavigationItem.scss';
 import {GroupTypes, ItemData} from '../../../types';
 import {IconsFactory} from '../icons/IconsFactory';
-import {ui} from '@playkit-js/kaltura-player-js';
-
-//@ts-ignore
-const {ExpandableText} = ui.Components;
 
-const {Text, Localizer} = KalturaPlayer.ui.preacti18n;
+const {ExpandableText} = ui.components;
+const {Text, Localizer} = preacti18n;
 
 export interface NavigationItemProps {
   data: ItemData;
@@ -149,8 +148,9 @@ export class NavigationItem extends Component<NavigationItemProps, NavigationIte
               text={ariaLabelTitle || displayDescription || ''}
               lines={1}
               forceShowMore={Boolean(displayTitle && displayDescription)}
-              //@ts-ignore
               onClick={this._handleExpand}
+              className={styles.expandableText}
+              classNameExpanded={styles.expanded}
               buttonProps={{
                 tabIndex: 0
               }}>
@@ -176,7 +176,8 @@ export class NavigationItem extends Component<NavigationItemProps, NavigationIte
                 }}
                 text={displayDescription}
                 lines={3}
-                //@ts-ignore
+                className={styles.expandableText}
+                classNameExpanded={styles.expanded}
                 onClick={this._handleExpand}>
                 {displayDescription}
               </ExpandableText>
diff --git a/src/components/navigation/plugin-button/index.tsx b/src/components/navigation/plugin-button/index.tsx
@@ -1,11 +1,12 @@
 import {h} from 'preact';
 import {ui} from '@playkit-js/kaltura-player-js';
+import {preacti18n} from '@playkit-js/playkit-js-ui';
 import * as styles from './plugin-button.scss';
 import {icons} from '../../icons';
-import { pluginName } from "../../../navigation-plugin";
+import {pluginName} from '../../../navigation-plugin';
 
-const {Tooltip, Icon} = KalturaPlayer.ui.components;
-const {withText, Text} = ui.preacti18n;
+const {Tooltip, Icon} = ui.components;
+const {withText, Text} = preacti18n;
 
 const translates = ({isActive}: PluginButtonProps) => {
   return {
@@ -21,23 +22,23 @@ interface PluginButtonProps {
 
 export const PluginButton = withText(translates)(({isActive, setRef, ...otherProps}: PluginButtonProps) => {
   return (
-    <Tooltip label={otherProps.label} type="bottom">
-        <button
-          ref={node => {
-            setRef(node);
-          }}
-          type="button"
-          aria-label={otherProps.label}
-          className={[ui.style.upperBarIcon, styles.pluginButton, isActive ? styles.active : ''].join(' ')}
-          data-testid={'navigation_pluginButton'}>
-          <Icon
-            id={pluginName}
-            height={icons.BigSize}
-            width={icons.BigSize}
-            viewBox={`0 0 ${icons.BigSize} ${icons.BigSize}`}
-            path={icons.PLUGIN_ICON}
-          />
-        </button>
+    <Tooltip label={otherProps.label!} type="bottom">
+      <button
+        ref={node => {
+          setRef(node);
+        }}
+        type="button"
+        aria-label={otherProps.label}
+        className={[ui.style.upperBarIcon, styles.pluginButton, isActive ? styles.active : ''].join(' ')}
+        data-testid={'navigation_pluginButton'}>
+        <Icon
+          id={pluginName}
+          height={icons.BigSize}
+          width={icons.BigSize}
+          viewBox={`0 0 ${icons.BigSize} ${icons.BigSize}`}
+          path={icons.PLUGIN_ICON}
+        />
+      </button>
     </Tooltip>
   );
 });
diff --git a/src/navigation-plugin.tsx b/src/navigation-plugin.tsx
@@ -1,7 +1,5 @@
-// @ts-ignore
 import {core, ui} from '@playkit-js/kaltura-player-js';
 import {h} from 'preact';
-// @ts-ignore
 import * as sanitizeHtml from 'sanitize-html';
 import {UpperBarManager, SidePanelsManager} from '@playkit-js/ui-managers';
 import {OnClickEvent} from '@playkit-js/common/dist/hoc/a11y-wrapper';
@@ -158,7 +156,7 @@ export class NavigationPlugin extends KalturaPlayer.core.BasePlugin {
   private _sanitizeCaptions = (data: ItemData[]) => {
     return data.map(itemData => ({
       ...itemData,
-      displayTitle: sanitizeHtml(itemData.displayTitle || '', {allowedTags: []})
+      displayTitle: sanitizeHtml(typeof itemData.displayTitle === 'string' ? itemData.displayTitle : '', {allowedTags: []})
     }));
   };
 
@@ -364,16 +362,14 @@ export class NavigationPlugin extends KalturaPlayer.core.BasePlugin {
             itemsOrder={this._itemsOrder}
             ref={node => (this._navigationPluginRef = node)}
           />
-        );
+        ) as any;
       },
       presets: [ReservedPresetNames.Playback, ReservedPresetNames.Live, ReservedPresetNames.Ads],
       position: this.config.position,
       expandMode: this.config.expandMode === SidePanelModes.ALONGSIDE ? SidePanelModes.ALONGSIDE : SidePanelModes.OVER,
       onDeactivate: this._deactivatePlugin
     }) as number;
 
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-ignore
     this._navigationIcon = this.upperBarManager!.add({
       // eslint-disable-next-line @typescript-eslint/ban-ts-comment
       // @ts-ignore
@@ -383,7 +379,7 @@ export class NavigationPlugin extends KalturaPlayer.core.BasePlugin {
       svgIcon: {path: icons.PLUGIN_ICON, viewBox: `0 0 ${icons.BigSize} ${icons.BigSize}`},
       onClick: this._handleClickOnPluginIcon as () => void,
       component: () => {
-        return <PluginButton isActive={this.isPluginActive()} setRef={this._setPluginButtonRef} />;
+        return (<PluginButton isActive={this.isPluginActive()} setRef={this._setPluginButtonRef} />) as any;
       }
     }) as number;
 
diff --git a/yarn.lock b/yarn.lock
