all

frontend/src/static/js/components/MediaListWrapper.tsx

@@ -2,8 +2,9 @@ import React from 'react';
 import { MediaListRow } from './MediaListRow';
 import { BulkActionsDropdown } from './BulkActionsDropdown';
 import { SelectAllCheckbox } from './SelectAllCheckbox';
-import { CircleIconButton, MaterialIcon } from './_shared';
+import { CircleIconButton, MaterialIcon, PopupMain, NavigationMenuList } from './_shared';
 import { LinksConsumer } from '../utils/contexts';
+import { usePopup } from '../utils/hooks';
 import { translateString } from '../utils/helpers/';
 import './MediaListWrapper.scss';
 
@@ -37,12 +38,29 @@ export const MediaListWrapper: React.FC<MediaListWrapperProps> = ({
   onSelectAll = () => {},
   onDeselectAll = () => {},
   showAddMediaButton = false,
-}) => (
+}) => {
+  const [popupContentRef, PopupContent, PopupTrigger] = usePopup() as [any, any, any];
+
+  return (
     <div className={(className ? className + ' ' : '') + 'media-list-wrapper'} style={style}>
       <MediaListRow title={title} viewAllLink={viewAllLink} viewAllText={viewAllText}>
         {showBulkActions && (
           <LinksConsumer>
-          {(links) => (
+            {(links) => {
+              const uploadMenuItems = [
+                {
+                  link: links.user.addMedia,
+                  icon: 'upload',
+                  text: translateString('Upload'),
+                },
+                {
+                  link: '/record_screen',
+                  icon: 'videocam',
+                  text: translateString('Record Screen'),
+                },
+              ];
+
+              return (
                 <div className="bulk-actions-container">
                   <div style={{ display: 'flex', alignItems: 'center', gap: '10px' }}>
                     <BulkActionsDropdown selectedCount={selectedCount} onActionSelect={onBulkAction} />
@@ -55,18 +73,25 @@ export const MediaListWrapper: React.FC<MediaListWrapperProps> = ({
                   </div>
                   {showAddMediaButton && (
                     <div className="add-media-button">
-                  <a href={links.user.addMedia} title={translateString('Add media')}>
+                      <PopupTrigger contentRef={popupContentRef}>
-                    <CircleIconButton>
+                        <CircleIconButton title={translateString('Add media')}>
                           <MaterialIcon type="video_call" />
                         </CircleIconButton>
-                  </a>
+                      </PopupTrigger>
+                      <PopupContent contentRef={popupContentRef}>
+                        <PopupMain>
+                          <NavigationMenuList items={uploadMenuItems} />
+                        </PopupMain>
+                      </PopupContent>
                     </div>
                   )}
                 </div>
-          )}
+              );
+            }}
           </LinksConsumer>
         )}
         {children || null}
       </MediaListRow>
     </div>
   );
+};