Fix glitch-soc status media icons

ClearlyClaire · Jan 13, 2024 · 46128f2 · 46128f2
1 parent 731f01a
commit 46128f2
Showing 1 changed file with 32 additions and 13 deletions.
diff --git a/app/javascript/flavours/glitch/components/status_icons.jsx b/app/javascript/flavours/glitch/components/status_icons.jsx
@@ -9,6 +9,11 @@ import ImmutablePropTypes from 'react-immutable-proptypes';
 import { ReactComponent as ExpandLessIcon } from '@material-symbols/svg-600/outlined/expand_less.svg';
 import { ReactComponent as ForumIcon } from '@material-symbols/svg-600/outlined/forum.svg';
 import { ReactComponent as HomeIcon } from '@material-symbols/svg-600/outlined/home.svg';
+import { ReactComponent as ImageIcon } from '@material-symbols/svg-600/outlined/image.svg';
+import { ReactComponent as InsertChartIcon } from '@material-symbols/svg-600/outlined/insert_chart.svg';
+import { ReactComponent as LinkIcon } from '@material-symbols/svg-600/outlined/link.svg';
+import { ReactComponent as MovieIcon } from '@material-symbols/svg-600/outlined/movie.svg';
+import { ReactComponent as MusicNoteIcon } from '@material-symbols/svg-600/outlined/music_note.svg';
 
 import { Icon } from 'flavours/glitch/components/icon';
 import { languages } from 'flavours/glitch/initial_state';
@@ -66,29 +71,43 @@ class StatusIcons extends PureComponent {
     }
   };
 
-  mediaIconTitleText (mediaIcon) {
+  renderIcon (mediaIcon) {
     const { intl } = this.props;
 
-    const message = {
-      'link': messages.previewCard,
-      'picture-o': messages.pictures,
-      'tasks': messages.poll,
-      'video-camera': messages.video,
-      'music': messages.audio,
-    }[mediaIcon];
-
-    return message && intl.formatMessage(message);
-  }
+    let title, iconComponent;
+
+    switch (mediaIcon) {
+    case 'link':
+      title = messages.previewCard;
+      iconComponent = LinkIcon;
+      break;
+    case 'picture-o':
+      title = messages.pictures;
+      iconComponent = ImageIcon;
+      break;
+    case 'tasks':
+      title = messages.poll;
+      iconComponent = InsertChartIcon;
+      break;
+    case 'video-camera':
+      title = messages.video;
+      iconComponent = MovieIcon;
+      break;
+    case 'music':
+      title = messages.audio;
+      iconComponent = MusicNoteIcon;
+      break;
+    }
 
-  renderIcon (mediaIcon) {
     return (
       <Icon
         fixedWidth
         className='status__media-icon'
         key={`media-icon--${mediaIcon}`}
         id={mediaIcon}
+        icon={iconComponent}
         aria-hidden='true'
-        title={this.mediaIconTitleText(mediaIcon)}
+        title={title && intl.formatMessage(title)}
       />
     );
   }