fix(FEC-13209): [Audio Player] adjust full size player UI to entries …

…of audio media type
kaltura · Sep 14, 2023 · fdf0aeb · fdf0aeb
2 parents ff86f1e + 1db0f75
commit fdf0aeb
Show file tree

Hide file tree

Showing 17 changed files with 336 additions and 459 deletions.
diff --git a/package.json b/package.json
@@ -17,7 +17,7 @@
     "@playkit-js/ui-managers": "^1.3.11"
   },
   "devDependencies": {
-    "@playkit-js/kaltura-player-js": "canary",
+    "@playkit-js/kaltura-player-js": "3.15.3-canary.0-d05bc55",
     "conventional-github-releaser": "3.1.3",
     "cross-env": "^7.0.3",
     "css-loader": "^6.7.1",

diff --git a/src/components/navigation/navigation-item/NavigationItem.tsx b/src/components/navigation/navigation-item/NavigationItem.tsx
@@ -1,8 +1,11 @@
 import {Component, h} from 'preact';
-import {A11yWrapper, OnClickEvent} from '@playkit-js/common/dist/hoc/a11y-wrapper';
+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';
+
+const {ExpandableText} = ui.Components;
 
 const {Text} = KalturaPlayer.ui.preacti18n;
 
@@ -15,30 +18,22 @@ export interface NavigationItemProps {
   showIcon: boolean;
   onNext: () => void;
   onPrev: () => void;
-  readLessTranslate: string;
-  readMoreTranslate: string;
-  readMoreLabel: string;
-  readLessLabel: string;
 }
 
 export interface NavigationItemState {
-  expandText: boolean;
-  titleTrimmed: boolean;
   imageLoaded: boolean;
   imageFailed: boolean;
   focused: boolean;
+  useExpandableText: boolean;
 }
 
 export class NavigationItem extends Component<NavigationItemProps, NavigationItemState> {
   private _itemElementRef: HTMLDivElement | null = null;
   private _textContainerRef: HTMLDivElement | null = null;
-  private _titleRef: HTMLSpanElement | null = null;
-  private _showMoreButtonRef: HTMLDivElement | null = null;
-  private _showLessButtonRef: HTMLDivElement | null = null;
 
   constructor(props: NavigationItemProps) {
     super(props);
-    this.state = {expandText: !props.data.previewImage, imageLoaded: false, imageFailed: false, titleTrimmed: false, focused: false};
+    this.state = {imageLoaded: false, imageFailed: false, focused: false, useExpandableText: !props.data.previewImage};
   }
 
   public setFocus() {
@@ -59,8 +54,6 @@ export class NavigationItem extends Component<NavigationItemProps, NavigationIte
       selectedItem !== nextProps.selectedItem ||
       this.state.focused !== nextState.focused ||
       data !== nextProps.data ||
-      nextState.expandText !== this.state.expandText ||
-      nextState.titleTrimmed !== this.state.titleTrimmed ||
       nextState.imageLoaded !== this.state.imageLoaded ||
       nextState.imageFailed !== this.state.imageFailed ||
       nextProps.widgetWidth !== widgetWidth
@@ -73,21 +66,14 @@ export class NavigationItem extends Component<NavigationItemProps, NavigationIte
   componentDidUpdate(previousProps: Readonly<NavigationItemProps>, nextState: Readonly<NavigationItemState>) {
     this._getSelected();
     this.matchHeight();
-    if (nextState.imageLoaded !== this.state.imageLoaded) {
-      this.setState({
-        titleTrimmed: this._isEllipsisActive()
-      });
-    }
   }
 
   componentDidMount() {
     this._getSelected();
     this.matchHeight();
-    if (!this.props.data?.previewImage) {
-      this.setState({
-        titleTrimmed: this._isEllipsisActive()
-      });
-    }
+    this.setState({
+      useExpandableText: !this.props.data?.previewImage
+    });
   }
 
   private _getSelected = () => {
@@ -124,23 +110,6 @@ export class NavigationItem extends Component<NavigationItemProps, NavigationIte
     this.props.onClick(this.props.data.startTime);
   };
 
-  private _handleExpandChange = (e: OnClickEvent, byKeyboard?: boolean) => {
-    this.setState(
-      {
-        expandText: !this.state.expandText
-      },
-      () => {
-        if (byKeyboard) {
-          if (this.state.expandText) {
-            this._showLessButtonRef?.focus();
-          } else {
-            this._showMoreButtonRef?.focus();
-          }
-        }
-      }
-    );
-  };
-
   private _renderThumbnail = () => {
     if (this.state.imageFailed) {
       return null;
@@ -161,37 +130,6 @@ export class NavigationItem extends Component<NavigationItemProps, NavigationIte
     return <img {...imageProps} />;
   };
 
-  private _renderShowMoreLessButton = (title: string) => {
-    if (!this.props.data.previewImage) {
-      return null;
-    }
-    const {expandText} = this.state;
-    return (
-      <A11yWrapper onClick={this._handleExpandChange}>
-        <div
-          tabIndex={0}
-          className={styles.showMoreButton}
-          ref={node => {
-            if (expandText) {
-              this._showLessButtonRef = node;
-            } else {
-              this._showMoreButtonRef = node;
-            }
-          }}
-          aria-label={`${expandText ? this.props.readLessLabel : this.props.readMoreLabel} ${title}`}>
-          {expandText ? this.props.readLessTranslate : this.props.readMoreTranslate}
-        </div>
-      </A11yWrapper>
-    );
-  };
-
-  private _isEllipsisActive() {
-    if (!this._titleRef || !this._textContainerRef) {
-      return false;
-    }
-    return this._titleRef.getBoundingClientRect().width > this._textContainerRef.getBoundingClientRect().width;
-  }
-
   render({selectedItem, showIcon, data}: NavigationItemProps) {
     const {id, previewImage, itemType, displayTime, liveCuePoint, groupData, displayTitle, displayDescription} = data;
     const hasTitle = Boolean(displayTitle || displayDescription);
@@ -231,37 +169,26 @@ export class NavigationItem extends Component<NavigationItemProps, NavigationIte
             {!liveCuePoint && <span>{displayTime}</span>}
             {showIcon && (
               <div className={styles.iconWrapper}>
-                <IconsFactory iconType={itemType}/>
+                <IconsFactory iconType={itemType} />
               </div>
             )}
           </div>
           <div className={[styles.content, previewImage ? styles.hasImage : null].join(' ')}>
-            <div
-              className={styles.contentText}
-              ref={node => {
-                this._textContainerRef = node;
-              }}>
-              {hasTitle && !this.state.expandText && (
+            {this.state.useExpandableText ? (
+              <ExpandableText text={ariaLabelTitle} lines={1}>
+                {displayTitle && <span>{displayTitle}</span>}
+                {displayDescription && <div className={styles.description}>{displayDescription}</div>}
+              </ExpandableText>
+            ) : (
+              hasTitle && (
                 <div className={styles.titleWrapper}>
                   <div className={styles.title}>
-                    <span
-                      ref={node => {
-                        this._titleRef = node;
-                      }}>
-                      {displayTitle || displayDescription}
-                    </span>
+                    <span>{displayTitle || displayDescription}</span>
                   </div>
-                  {this.state.titleTrimmed && this._renderShowMoreLessButton(ariaLabelTitle)}
                 </div>
-              )}
-              {this.state.expandText && (
-                <div className={styles.expandTextWrapper}>
-                  {displayTitle && <span>{displayTitle}</span>}
-                  {displayDescription && <div className={styles.description}>{displayDescription}</div>}
-                  {this._renderShowMoreLessButton(ariaLabelTitle)}
-                </div>
-              )}
-            </div>
+              )
+            )}
+
             {previewImage && this._renderThumbnail()}
           </div>
         </div>

diff --git a/src/components/navigation/navigation-list/NavigationList.tsx b/src/components/navigation/navigation-list/NavigationList.tsx
@@ -7,15 +7,6 @@ import {EmptyState} from '../icons/EmptyState';
 import {isDataEqual} from '../../../utils';
 import {ItemData, ItemTypesTranslates} from '../../../types';
 
-const {withText, Text} = ui.preacti18n;
-
-const translates = {
-  readLess: <Text id="navigation.read_less">Less</Text>,
-  readMore: <Text id="navigation.read_more">More</Text>,
-  readMoreLabel: <Text id="navigation.read_more_of">Read more of</Text>,
-  readLessLabel: <Text id="navigation.read_less_of">Read less of</Text>
-};
-
 export interface Props {
   data: Array<ItemData>;
   onSeek: (n: number) => void;
@@ -27,13 +18,8 @@ export interface Props {
   listDataContainCaptions: boolean;
   searchActive: boolean;
   itemTypesTranslates: ItemTypesTranslates;
-  readLess?: string;
-  readMore?: string;
-  readMoreLabel?: string;
-  readLessLabel?: string;
 }
 
-@withText(translates)
 export class NavigationList extends Component<Props> {
   private _selectedElementY = 0;
   private _itemsRefMap: Map<number, NavigationItem | null> = new Map();
@@ -107,10 +93,6 @@ export class NavigationList extends Component<Props> {
               showIcon={showItemsIcons}
               onNext={() => this._handleDownKeyPressed(index)}
               onPrev={() => this._handleUpKeyPressed(index)}
-              readLessTranslate={this.props.readLess!}
-              readMoreTranslate={this.props.readMore!}
-              readMoreLabel={`${this.props.readMoreLabel} ${itemTypeTranslate}`}
-              readLessLabel={`${this.props.readLessLabel} ${itemTypeTranslate}`}
             />
           );
         })}

diff --git a/translations/de.i18n.json b/translations/de.i18n.json
@@ -3,8 +3,6 @@
     "navigation": {
       "hide_plugin": "Navigation ausblenden",
       "show_plugin": "Navigation anzeigen",
-      "read_less": "Weniger",
-      "read_more": "Mehr",
       "whoops": "Hoppla!",
       "error_message": "Wir konnten Ihre Daten nicht wiederherstellen.",
       "retry": "Erneut versuchen",

diff --git a/translations/en.i18n.json b/translations/en.i18n.json
@@ -3,10 +3,6 @@
     "navigation": {
       "hide_plugin": "Hide Navigation",
       "show_plugin": "Show Navigation",
-      "read_less": "Less",
-      "read_more": "More",
-      "read_more_of": "Read more of",
-      "read_less_of": "Read less of",
       "whoops": "Whoops!",
       "error_message": "We couldn't retrieve your Data.",
       "retry": "Retry",

diff --git a/translations/es.i18n.json b/translations/es.i18n.json
@@ -3,10 +3,6 @@
     "navigation": {
       "hide_plugin": "Ocultar navegación",
       "show_plugin": "Mostrar navegación",
-      "read_less": "Menos",
-      "read_more": "Más",
-      "read_more_of": "Mostrar más",
-      "read_less_of": "Mostrar menos",
       "whoops": "¡Vaya!",
       "error_message": "No hemos podido recuperar sus datos.",
       "retry": "Reintentar",

diff --git a/translations/fi.i18n.json b/translations/fi.i18n.json
@@ -1,38 +1,36 @@
 {
-    "fi": {
-        "navigation": {
-            "hide_plugin": "Piilota navigointi",
-            "show_plugin": "Näytä navigointi",
-            "read_less": "Vähemmän",
-            "read_more": "Lisää",
-            "whoops": "Ups!",
-            "error_message": "Tietojasi ei voitu noutaa.",
-            "retry": "Yritä uudelleen",
-            "search_placeholder": "Hae videosta",
-            "clear_search": "Tyhjennä haku",
-            "all_types": "Kaikki",
-            "aoa_type": "Vastaa lähetyksessä",
-            "chapter_type": "Osat",
-            "slide_type": "Diat",
-            "hotspot_type": "Tukiasemat",
-            "caption_type": "Tekstitykset",
-            "search_result_one_type": {
-              "one": "{{totalResults}} tulos tyypissä {{type}}",
-              "many": "{{totalResults}} tulosta tyypissä {{type}}"
-            },
-            "search_result_all_types": {
-              "one": "{{totalResults}} tulos kaikessa sisällössä",
-              "many": "{{totalResults}} tulosta kaikessa sisällössä"
-            },
-            "search_result_all_types_with_captions": {
-              "one": "{{totalResults}} tulos kaikessa sisällössä tekstitykset mukaan lukien",
-              "many": "{{totalResults}} tulosta kaikessa sisällössä tekstitykset mukaan lukien"
-            },
-            "search_no_results_title": "Tuloksia ei löytynyt",
-            "search_no_results_description": "Kokeile yleisempää hakusanaa",
-            "loading": "Ladataan",
-            "auto_scroll": "Jatka automaattista vieritystä",
-            "image_alt": "Dian esikatselu"      
-        }
+  "fi": {
+    "navigation": {
+      "hide_plugin": "Piilota navigointi",
+      "show_plugin": "Näytä navigointi",
+      "whoops": "Ups!",
+      "error_message": "Tietojasi ei voitu noutaa.",
+      "retry": "Yritä uudelleen",
+      "search_placeholder": "Hae videosta",
+      "clear_search": "Tyhjennä haku",
+      "all_types": "Kaikki",
+      "aoa_type": "Vastaa lähetyksessä",
+      "chapter_type": "Osat",
+      "slide_type": "Diat",
+      "hotspot_type": "Tukiasemat",
+      "caption_type": "Tekstitykset",
+      "search_result_one_type": {
+        "one": "{{totalResults}} tulos tyypissä {{type}}",
+        "many": "{{totalResults}} tulosta tyypissä {{type}}"
+      },
+      "search_result_all_types": {
+        "one": "{{totalResults}} tulos kaikessa sisällössä",
+        "many": "{{totalResults}} tulosta kaikessa sisällössä"
+      },
+      "search_result_all_types_with_captions": {
+        "one": "{{totalResults}} tulos kaikessa sisällössä tekstitykset mukaan lukien",
+        "many": "{{totalResults}} tulosta kaikessa sisällössä tekstitykset mukaan lukien"
+      },
+      "search_no_results_title": "Tuloksia ei löytynyt",
+      "search_no_results_description": "Kokeile yleisempää hakusanaa",
+      "loading": "Ladataan",
+      "auto_scroll": "Jatka automaattista vieritystä",
+      "image_alt": "Dian esikatselu"
     }
-}
+  }
+}