Fix audio and video items in account gallery in web UI (#14282)

* Fix audio and video items in account gallery in web UI

- Fix audio items not using thumbnails
- Fix video items not using custom thumbnails
- Fix video items autoplaying like GIFs

* Change audio and video items in account gallery to autoplay when opened in web UI

* Fix code style issue

1 files changed, 48 insertions, 44 deletions

diff --git a/app/javascript/mastodon/features/account_gallery/components/media_item.js b/app/javascript/mastodon/features/account_gallery/components/media_item.js
index 9eb4ed0d3..c9a7af7f7 100644
--- a/app/javascript/mastodon/features/account_gallery/components/media_item.js
+++ b/app/javascript/mastodon/features/account_gallery/components/media_item.js
@@ -61,78 +61,82 @@ export default class MediaItem extends ImmutablePureComponent {
     const width  = `${Math.floor((displayWidth - 4) / 3) - 4}px`;
     const height = width;
     const status = attachment.get('status');
-    const title = status.get('spoiler_text') || attachment.get('description');
+    const title  = status.get('spoiler_text') || attachment.get('description');
 
-    let thumbnail = '';
-    let icon;
+    let thumbnail, label, icon, content;
 
-    if (attachment.get('type') === 'unknown') {
-      // Skip
-    } else if (attachment.get('type') === 'audio') {
-      thumbnail = (
+    if (!visible) {
+      icon = (
         <span className='account-gallery__item__icons'>
-          <Icon id='music' />
+          <Icon id='eye-slash' />
         </span>
       );
-    } else if (attachment.get('type') === 'image') {
-      const focusX = attachment.getIn(['meta', 'focus', 'x']) || 0;
-      const focusY = attachment.getIn(['meta', 'focus', 'y']) || 0;
-      const x      = ((focusX /  2) + .5) * 100;
-      const y      = ((focusY / -2) + .5) * 100;
-
-      thumbnail = (
-        <img
-          src={attachment.get('preview_url')}
-          alt={attachment.get('description')}
-          title={attachment.get('description')}
-          style={{ objectPosition: `${x}% ${y}%` }}
-          onLoad={this.handleImageLoad}
-        />
-      );
-    } else if (['gifv', 'video'].indexOf(attachment.get('type')) !== -1) {
-      const autoPlay = !isIOS() && autoPlayGif;
-      const label    = attachment.get('type') === 'video' ? <Icon id='play' /> : 'GIF';
-
-      thumbnail = (
-        <div className={classNames('media-gallery__gifv', { autoplay: autoPlay })}>
+    } else {
+      if (['audio', 'video'].includes(attachment.get('type'))) {
+        content = (
+          <img
+            src={attachment.get('preview_url') || attachment.getIn(['account', 'avatar_static'])}
+            alt={attachment.get('description')}
+            onLoad={this.handleImageLoad}
+          />
+        );
+
+        if (attachment.get('type') === 'audio') {
+          label = <Icon id='music' />;
+        } else {
+          label = <Icon id='play' />;
+        }
+      } else if (attachment.get('type') === 'image') {
+        const focusX = attachment.getIn(['meta', 'focus', 'x']) || 0;
+        const focusY = attachment.getIn(['meta', 'focus', 'y']) || 0;
+        const x      = ((focusX /  2) + .5) * 100;
+        const y      = ((focusY / -2) + .5) * 100;
+
+        content = (
+          <img
+            src={attachment.get('preview_url')}
+            alt={attachment.get('description')}
+            style={{ objectPosition: `${x}% ${y}%` }}
+            onLoad={this.handleImageLoad}
+          />
+        );
+      } else if (attachment.get('type') === 'gifv') {
+        content = (
           <video
             className='media-gallery__item-gifv-thumbnail'
             aria-label={attachment.get('description')}
-            title={attachment.get('description')}
             role='application'
             src={attachment.get('url')}
             onMouseEnter={this.handleMouseEnter}
             onMouseLeave={this.handleMouseLeave}
-            autoPlay={autoPlay}
+            autoPlay={!isIOS() && autoPlayGif}
             loop
             muted
           />
+        );
+
+        label = 'GIF';
+      }
+
+      thumbnail = (
+        <div className='media-gallery__gifv'>
+          {content}
 
           <span className='media-gallery__gifv__label'>{label}</span>
         </div>
       );
     }
 
-    if (!visible) {
-      icon = (
-        <span className='account-gallery__item__icons'>
-          <Icon id='eye-slash' />
-        </span>
-      );
-    }
-
     return (
       <div className='account-gallery__item' style={{ width, height }}>
         <a className='media-gallery__item-thumbnail' href={status.get('url')} onClick={this.handleClick} title={title} target='_blank' rel='noopener noreferrer'>
           <Blurhash
             hash={attachment.get('blurhash')}
-            className={classNames('media-gallery__preview', {
-              'media-gallery__preview--hidden': visible && loaded,
-            })}
+            className={classNames('media-gallery__preview', { 'media-gallery__preview--hidden': visible && loaded })}
             dummy={!useBlurhash}
           />
-          {visible && thumbnail}
-          {!visible && icon}
+
+          {visible ? thumbnail : icon}
         </a>
       </div>
     );