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,36 +38,60 @@ export const MediaListWrapper: React.FC<MediaListWrapperProps> = ({
   onSelectAll = () => {},
   onDeselectAll = () => {},
   showAddMediaButton = false,
-}) => (
+}) => {
-  <div className={(className ? className + ' ' : '') + 'media-list-wrapper'} style={style}>
+  const [popupContentRef, PopupContent, PopupTrigger] = usePopup() as [any, any, any];
-    <MediaListRow title={title} viewAllLink={viewAllLink} viewAllText={viewAllText}>
+
-      {showBulkActions && (
+  return (
-        <LinksConsumer>
+    <div className={(className ? className + ' ' : '') + 'media-list-wrapper'} style={style}>
-          {(links) => (
+      <MediaListRow title={title} viewAllLink={viewAllLink} viewAllText={viewAllText}>
-            <div className="bulk-actions-container">
+        {showBulkActions && (
-              <div style={{ display: 'flex', alignItems: 'center', gap: '10px' }}>
+          <LinksConsumer>
-                <BulkActionsDropdown selectedCount={selectedCount} onActionSelect={onBulkAction} />
+            {(links) => {
-                <SelectAllCheckbox
+              const uploadMenuItems = [
-                  totalCount={totalCount}
+                {
-                  selectedCount={selectedCount}
+                  link: links.user.addMedia,
-                  onSelectAll={onSelectAll}
+                  icon: 'upload',
-                  onDeselectAll={onDeselectAll}
+                  text: translateString('Upload'),
-                />
+                },
-              </div>
+                {
-              {showAddMediaButton && (
+                  link: '/record_screen',
-                <div className="add-media-button">
+                  icon: 'videocam',
-                  <a href={links.user.addMedia} title={translateString('Add media')}>
+                  text: translateString('Record Screen'),
-                    <CircleIconButton>
+                },
-                      <MaterialIcon type="video_call" />
+              ];
-                    </CircleIconButton>
+
-                  </a>
+              return (
+                <div className="bulk-actions-container">
+                  <div style={{ display: 'flex', alignItems: 'center', gap: '10px' }}>
+                    <BulkActionsDropdown selectedCount={selectedCount} onActionSelect={onBulkAction} />
+                    <SelectAllCheckbox
+                      totalCount={totalCount}
+                      selectedCount={selectedCount}
+                      onSelectAll={onSelectAll}
+                      onDeselectAll={onDeselectAll}
+                    />
+                  </div>
+                  {showAddMediaButton && (
+                    <div className="add-media-button">
+                      <PopupTrigger contentRef={popupContentRef}>
+                        <CircleIconButton title={translateString('Add media')}>
+                          <MaterialIcon type="video_call" />
+                        </CircleIconButton>
+                      </PopupTrigger>
+                      <PopupContent contentRef={popupContentRef}>
+                        <PopupMain>
+                          <NavigationMenuList items={uploadMenuItems} />
+                        </PopupMain>
+                      </PopupContent>
+                    </div>
+                  )}
                 </div>
-              )}
+              );
-            </div>
+            }}
-          )}
+          </LinksConsumer>
-        </LinksConsumer>
+        )}
-      )}
+        {children || null}
-      {children || null}
+      </MediaListRow>
-    </MediaListRow>
+    </div>
-  </div>
+  );
-);
+};