[#1090] Add fallback image to channels (#1254)

airyhq · Mar 16, 2021 · 14c7e3d · 14c7e3d
1 parent 0c5fb20
commit 14c7e3d
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 2 deletions.
diff --git a/frontend/ui/src/pages/Channels/ChannelsMainPage/SourceInfo/index.module.scss b/frontend/ui/src/pages/Channels/ChannelsMainPage/SourceInfo/index.module.scss
@@ -66,7 +66,6 @@
   display: flex;
   align-items: center;
   margin: 4px;
-  align-items: flex-start;
   border: none;
   outline: none;
   background-color: inherit;

diff --git a/frontend/ui/src/pages/Channels/ChannelsMainPage/SourceInfo/index.tsx b/frontend/ui/src/pages/Channels/ChannelsMainPage/SourceInfo/index.tsx
@@ -2,6 +2,7 @@ import React from 'react';
 import {Channel} from 'httpclient';
 import {LinkButton} from '@airyhq/components';
 import {ReactComponent as AddChannel} from 'assets/images/icons/plus-circle.svg';
+import {fallbackImage} from '../../../../services/image/index';
 import styles from './index.module.scss';
 
 type SourceInfoProps = {
@@ -44,6 +45,9 @@ const SourceInfo = (props: SourceInfoProps) => {
                             src={channel.metadata?.imageUrl}
                             alt={channel.metadata?.name}
                             className={styles.facebookImage}
+                            onError={(event: React.SyntheticEvent<HTMLImageElement, Event>) => {
+                              fallbackImage(event, channel.source);
+                            }}
                           />
                         ) : (
                           <div className={styles.placeholderLogo}>{props.placeholderImage} </div>

diff --git a/frontend/ui/src/pages/Channels/ConnectedChannelsList/ChannelListItem.tsx b/frontend/ui/src/pages/Channels/ConnectedChannelsList/ChannelListItem.tsx
@@ -11,6 +11,7 @@ import {ReactComponent as AiryLogo} from 'assets/images/icons/airy_avatar.svg';
 import {ReactComponent as CheckMark} from 'assets/images/icons/checkmark.svg';
 import styles from './ChannelListItem.module.scss';
 import {RouteComponentProps, withRouter} from 'react-router-dom';
+import {fallbackImage} from '../../../services/image/index';
 
 type ChannelItemProps = {
   channel: Channel;
@@ -53,7 +54,13 @@ const ChannelItem = (props: ChannelItemProps) => {
 
   const ChannelIcon = ({channel}: {channel: Channel}) => {
     if (channel?.metadata?.imageUrl) {
-      return <img className={styles.imageUrlLogo} src={channel.metadata.imageUrl} />;
+      return (
+        <img
+          onError={(event: React.SyntheticEvent<HTMLImageElement, Event>) => fallbackImage(event, channel.source)}
+          className={styles.imageUrlLogo}
+          src={channel.metadata.imageUrl}
+        />
+      );
     }
     return getSourceLogo(channel);
   };

diff --git a/frontend/ui/src/services/image/index.ts b/frontend/ui/src/services/image/index.ts
@@ -0,0 +1,6 @@
+import _, {SyntheticEvent} from 'react';
+
+export const fallbackImage = (event: SyntheticEvent<HTMLImageElement, Event>, source: string) => {
+  event.currentTarget.src = `https://s3.amazonaws.com/assets.airy.co/${source}_avatar.svg`;
+  event.currentTarget.alt = 'fallback image';
+};