add icon on media profile page

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

@@ -9,10 +9,29 @@
 
   .bulk-actions-container {
     display: flex;
-    align-items: center;
+    align-items: flex-start;
+    justify-content: space-between;
     flex-wrap: wrap;
     gap: 20px;
     margin-bottom: 16px;
+
+    .add-media-button {
+      margin-left: auto;
+
+      a {
+        display: flex;
+        align-items: center;
+      }
+
+      .circle-icon-button {
+        width: 48px;
+        height: 48px;
+
+        .material-icons {
+          font-size: 32px;
+        }
+      }
+    }
   }
 }
 

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

@@ -2,6 +2,9 @@ import React from 'react';
 import { MediaListRow } from './MediaListRow';
 import { BulkActionsDropdown } from './BulkActionsDropdown';
 import { SelectAllCheckbox } from './SelectAllCheckbox';
+import { CircleIconButton, MaterialIcon } from './_shared';
+import { LinksConsumer } from '../utils/contexts';
+import { translateString } from '../utils/helpers/';
 import './MediaListWrapper.scss';
 
 interface MediaListWrapperProps {
@@ -17,6 +20,7 @@ interface MediaListWrapperProps {
   onBulkAction?: (action: string) => void;
   onSelectAll?: () => void;
   onDeselectAll?: () => void;
+  showAddMediaButton?: boolean;
 }
 
 export const MediaListWrapper: React.FC<MediaListWrapperProps> = ({
@@ -32,19 +36,35 @@ export const MediaListWrapper: React.FC<MediaListWrapperProps> = ({
   onBulkAction = () => {},
   onSelectAll = () => {},
   onDeselectAll = () => {},
+  showAddMediaButton = false,
 }) => (
   <div className={(className ? className + ' ' : '') + 'media-list-wrapper'} style={style}>
     <MediaListRow title={title} viewAllLink={viewAllLink} viewAllText={viewAllText}>
       {showBulkActions && (
-        <div className="bulk-actions-container">
-          <BulkActionsDropdown selectedCount={selectedCount} onActionSelect={onBulkAction} />
-          <SelectAllCheckbox
-            totalCount={totalCount}
-            selectedCount={selectedCount}
-            onSelectAll={onSelectAll}
-            onDeselectAll={onDeselectAll}
-          />
-        </div>
+        <LinksConsumer>
+          {(links) => (
+            <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">
+                  <a href={links.user.addMedia} title={translateString('Add media')}>
+                    <CircleIconButton>
+                      <MaterialIcon type="video_call" />
+                    </CircleIconButton>
+                  </a>
+                </div>
+              )}
+            </div>
+          )}
+        </LinksConsumer>
       )}
       {children || null}
     </MediaListRow>

frontend/src/static/js/pages/ProfileMediaPage.js

@@ -898,6 +898,7 @@ export class ProfileMediaPage extends Page {
             onBulkAction={this.handleBulkAction}
             onSelectAll={this.handleSelectAll}
             onDeselectAll={this.handleDeselectAll}
+            showAddMediaButton={isMediaAuthor}
           >
             <ProfileMediaFilters hidden={this.state.hiddenFilters} tags={this.state.availableTags} onFiltersUpdate={this.onFiltersUpdate} selectedTag={this.state.selectedTag} selectedSort={this.state.selectedSort} />
             <ProfileMediaTags hidden={this.state.hiddenTags} tags={this.state.availableTags} onTagSelect={this.onTagSelect} />