fix(FEC-13729): transcript menu fix (#29)

kaltura · Jun 26, 2024 · fd50310 · fd50310
1 parent 2116145
commit fd50310
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 8 deletions.
diff --git a/src/components/plugins/menu-item/menu-item.scss b/src/components/plugins/menu-item/menu-item.scss
@@ -5,6 +5,11 @@
   cursor: pointer;
   border-radius: 2px;
 
+  &.disabled {
+    cursor: not-allowed;
+    opacity: 0.6;
+  }
+
   .plugin-icon {
     width: 24px;
     height: 24px;

diff --git a/src/components/plugins/menu-item/menu-item.tsx b/src/components/plugins/menu-item/menu-item.tsx
@@ -8,13 +8,13 @@ interface MenuItemProps {
   onClick: (player: any) => void;
   pluginName: string;
   icon: {svgUrl: string; viewBox: string};
+  disabled?: boolean;
 }
 
-const MenuItem = ({pluginName, icon, onClick}: MenuItemProps) => {
+const MenuItem = ({pluginName, icon, onClick, disabled}: MenuItemProps) => {
   return (
-    // @ts-ignore - error TS2786: 'A11yWrapper' cannot be used as a JSX component.
     <A11yWrapper onClick={onClick}>
-      <div className={styles.menuItem} tabIndex={0} aria-label={pluginName}>
+      <div className={[styles.menuItem, disabled ? styles.disabled : ''].join(' ')} tabIndex={0} aria-label={pluginName} aria-disabled={disabled}>
         <span className={styles.pluginIcon}>
           <Icon id={`min-audio-player-${pluginName}`} path={icon.svgUrl} viewBox={icon.viewBox} />
         </span>

diff --git a/src/components/plugins/plugins-menu-overlay/plugins-menu-overlay.tsx b/src/components/plugins/plugins-menu-overlay/plugins-menu-overlay.tsx
@@ -23,25 +23,26 @@ const PluginsMenuOverlay = ({plugins, onClose, player}: PluginsMenuOverlayProps)
           <div className={styles.menu}>
             {plugins.map(({pluginName, action, icon, isDisabled}) => {
               const disabled = isDisabled?.(player);
-              if (disabled) {
-                return null;
-              }
               return (
                 <MenuItem
+                  disabled={disabled}
                   pluginName={pluginName}
                   icon={icon}
                   onClick={() => {
+                    if (disabled) {
+                      return;
+                    }
                     onClose();
                     action(player);
                   }}
                 />
-              )
+              );
             })}
           </div>
         </div>
       </Overlay>
     </OverlayPortal>
-  )
+  );
 };
 
 export {PluginsMenuOverlay};