Make <Avatar> blurrable

images/icons/v2/click-outline-24.svg

@@ -0,0 +1 @@
+<svg fill="none" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><g stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"><path d="m14 12.37-.1-4.56c-.0053-.17991-.0459-.35703-.1196-.52123-.0737-.16421-.179-.31229-.3099-.43579-.131-.1235-.285-.22001-.4532-.284-.1682-.064-.3474-.09423-.5273-.08898s-.357.04589-.5212.11959-.3123.17903-.4358.30996-.22.2849-.284.45313-.0943.34741-.089.52732"/><path d="m16.79 12.74-.11-3.65c-.0119-.36335-.1677-.70707-.4331-.95556-.2653-.24848-.6186-.38137-.9819-.36944s-.7071.16772-.9556.43308c-.2484.26537-.3813.61857-.3694.98192"/><path d="m11.3 12.46-.3-9.13c-.0053-.17991-.0459-.35703-.1196-.52123-.0737-.16421-.179-.31229-.3099-.43579-.131-.1235-.285-.22001-.4532-.284-.1682-.064-.34739-.09423-.5273-.08898s-.35702.04589-.52123.11959-.31229.17903-.43579.30996-.22.2849-.284.45313-.09423.34741-.08898.52732l.29 9.13v1.37.78s-1.71-2.28-3.15-4.48c-1.06-1.65-2.8-.23-2.07 1 2.84 5.24 4.49 11.27 10.55 10.79s5.78-5.2 5.72-7-.12-4.11-.12-4.11v-.45c-.0106-.3633-.1651-.7076-.4295-.95702-.2645-.24942-.6172-.38359-.9805-.37298s-.7076.16512-.957.42955c-.2494.26442-.3836.61715-.373.98045"/></g></svg>

stylesheets/components/Avatar.scss

@@ -8,6 +8,7 @@
   justify-content: center;
   line-height: 0;
   overflow: hidden;
+  position: relative;
   user-select: none;
   vertical-align: middle;
 
@@ -27,12 +28,45 @@
     }
   }
 
-  img {
-    object-fit: cover;
+  &__image {
+    background-size: cover;
+    display: flex;
     height: 100%;
+    transition: filter 100ms ease-out;
     width: 100%;
   }
 
+  &__click-to-view {
+    @include font-body-2;
+    align-items: center;
+    background: $color-black-alpha-20;
+    color: $color-white;
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    justify-content: center;
+    left: 0;
+    position: absolute;
+    top: 0;
+    width: 100%;
+
+    &::before {
+      @include color-svg(
+        '../images/icons/v2/click-outline-24.svg',
+        $color-white
+      );
+      content: '';
+      display: block;
+      height: 24px;
+      margin-bottom: 8px;
+      width: 24px;
+    }
+
+    &:hover {
+      background: $color-black-alpha-40;
+    }
+  }
+
   &__label {
     align-items: center;
     display: flex;

ts/components/Avatar.stories.tsx

@@ -1,4 +1,4 @@
-// Copyright 2020 Signal Messenger, LLC
+// Copyright 2020-2021 Signal Messenger, LLC
 // SPDX-License-Identifier: AGPL-3.0-only
 
 import * as React from 'react';
@@ -7,7 +7,7 @@ import { storiesOf } from '@storybook/react';
 import { boolean, select, text } from '@storybook/addon-knobs';
 import { action } from '@storybook/addon-actions';
 
-import { Avatar, Props } from './Avatar';
+import { Avatar, AvatarBlur, Props } from './Avatar';
 import { setup as setupI18n } from '../../js/modules/i18n';
 import enMessages from '../../_locales/en/messages.json';
 import { Colors, ColorType } from '../types/Colors';
@@ -31,6 +31,7 @@ const conversationTypeMap: Record<string, Props['conversationType']> = {
 
 const createProps = (overrideProps: Partial<Props> = {}): Props => ({
   avatarPath: text('avatarPath', overrideProps.avatarPath || ''),
+  blur: overrideProps.blur,
   color: select('color', colorMap, overrideProps.color || 'blue'),
   conversationType: select(
     'conversationType',
@@ -149,3 +150,21 @@ story.add('Loading', () => {
 
   return sizes.map(size => <Avatar key={size} {...props} size={size} />);
 });
+
+story.add('Blurred', () => {
+  const props = createProps({
+    avatarPath: '/fixtures/kitten-3-64-64.jpg',
+    blur: AvatarBlur.BlurPicture,
+  });
+
+  return sizes.map(size => <Avatar key={size} {...props} size={size} />);
+});
+
+story.add('Blurred with "click to view"', () => {
+  const props = createProps({
+    avatarPath: '/fixtures/kitten-3-64-64.jpg',
+    blur: AvatarBlur.BlurPictureWithClickToView,
+  });
+
+  return <Avatar {...props} size={112} />;
+});

ts/components/Avatar.tsx

@@ -8,6 +8,7 @@ import React, {
   useState,
 } from 'react';
 import classNames from 'classnames';
+import { noop } from 'lodash';
 
 import { Spinner } from './Spinner';
 
@@ -15,6 +16,13 @@ import { getInitials } from '../util/getInitials';
 import { LocalizerType } from '../types/Util';
 import { ColorType } from '../types/Colors';
 import * as log from '../logging/log';
+import { assert } from '../util/assert';
+
+export enum AvatarBlur {
+  NoBlur,
+  BlurPicture,
+  BlurPictureWithClickToView,
+}
 
 export enum AvatarSize {
   TWENTY_EIGHT = 28,
@@ -27,6 +35,7 @@ export enum AvatarSize {
 
 export type Props = {
   avatarPath?: string;
+  blur?: AvatarBlur;
   color?: ColorType;
   loading?: boolean;
 
@@ -58,6 +67,7 @@ export const Avatar: FunctionComponent<Props> = ({
   onClick,
   size,
   title,
+  blur = AvatarBlur.NoBlur,
 }) => {
   const [imageBroken, setImageBroken] = useState(false);
 
@@ -65,6 +75,23 @@ export const Avatar: FunctionComponent<Props> = ({
     setImageBroken(false);
   }, [avatarPath]);
 
+  useEffect(() => {
+    if (!avatarPath) {
+      return noop;
+    }
+
+    const image = new Image();
+    image.src = avatarPath;
+    image.onerror = () => {
+      log.warn('Avatar: Image failed to load; failing over to placeholder');
+      setImageBroken(true);
+    };
+
+    return () => {
+      image.onerror = noop;
+    };
+  }, [avatarPath]);
+
   const initials = getInitials(title);
   const hasImage = !noteToSelf && avatarPath && !imageBroken;
   const shouldUseInitials =
@@ -83,15 +110,28 @@ export const Avatar: FunctionComponent<Props> = ({
       </div>
     );
   } else if (hasImage) {
+    assert(avatarPath, 'avatarPath should be defined here');
+    assert(
+      blur !== AvatarBlur.BlurPictureWithClickToView || size >= 100,
+      'Rendering "click to view" for a small avatar. This may not render correctly'
+    );
+
+    const isBlurred =
+      blur === AvatarBlur.BlurPicture ||
+      blur === AvatarBlur.BlurPictureWithClickToView;
     contents = (
-      <img
-        onError={() => {
-          log.warn('Avatar: Image failed to load; failing over to placeholder');
-          setImageBroken(true);
-        }}
-        alt={i18n('contactAvatarAlt', [title])}
-        src={avatarPath}
-      />
+      <>
+        <div
+          className="module-Avatar__image"
+          style={{
+            backgroundImage: `url('${encodeURI(avatarPath)}')`,
+            ...(isBlurred ? { filter: `blur(${Math.ceil(size / 2)}px)` } : {}),
+          }}
+        />
+        {blur === AvatarBlur.BlurPictureWithClickToView && (
+          <div className="module-Avatar__click-to-view">{i18n('view')}</div>
+        )}
+      </>
     );
   } else if (noteToSelf) {
     contents = (
@@ -105,6 +145,7 @@ export const Avatar: FunctionComponent<Props> = ({
   } else if (shouldUseInitials) {
     contents = (
       <div
+        aria-hidden="true"
         className="module-Avatar__label"
         style={{ fontSize: Math.ceil(size * 0.5) }}
       >
@@ -132,6 +173,7 @@ export const Avatar: FunctionComponent<Props> = ({
 
   return (
     <div
+      aria-label={i18n('contactAvatarAlt', [title])}
       className={classNames(
         'module-Avatar',
         hasImage ? 'module-Avatar--with-image' : 'module-Avatar--no-image',