From 59e7c6538ec43764ec4941a8a80c64fd8b853f52 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Tue, 5 Oct 2021 00:44:49 -0500
Subject: [PATCH] Audio: ingest attachment metadata

---
 app/soapbox/components/status.js              | 15 ++---
 app/soapbox/features/audio/index.js           | 10 ++--
 .../status/components/detailed_status.js      | 16 ++---
 .../features/ui/components/media_modal.js     | 58 +++++++++----------
 4 files changed, 51 insertions(+), 48 deletions(-)

diff --git a/app/soapbox/components/status.js b/app/soapbox/components/status.js
index 86d1e593a..5a4aa572d 100644
--- a/app/soapbox/components/status.js
+++ b/app/soapbox/components/status.js
@@ -414,21 +414,22 @@ class Status extends ImmutablePureComponent {
           </Bundle>
         );
       } else if (size === 1 && status.getIn(['media_attachments', 0, 'type']) === 'audio' && status.get('media_attachments').size === 1) {
-        const audio = status.getIn(['media_attachments', 0]);
+        const attachment = status.getIn(['media_attachments', 0]);
 
         media = (
           <Bundle fetchComponent={Audio} loading={this.renderLoadingAudioPlayer} >
             {Component => (
               <Component
-                src={audio.get('url')}
-                alt={audio.get('description')}
+                src={attachment.get('url')}
+                alt={attachment.get('description')}
+                poster={attachment.get('preview_url') !== attachment.get('url') ? attachment.get('preview_url') : status.getIn(['account', 'avatar_static'])}
+                backgroundColor={attachment.getIn(['meta', 'colors', 'background'])}
+                foregroundColor={attachment.getIn(['meta', 'colors', 'foreground'])}
+                accentColor={attachment.getIn(['meta', 'colors', 'accent'])}
+                duration={attachment.getIn(['meta', 'original', 'duration'], 0)}
                 width={this.props.cachedMediaWidth}
                 height={263}
-                inline
-                sensitive={status.get('sensitive')}
                 cacheWidth={this.props.cacheMediaWidth}
-                visible={this.state.showMedia}
-                onOpenAudio={this.handleOpenAudio}
               />
             )}
           </Bundle>
diff --git a/app/soapbox/features/audio/index.js b/app/soapbox/features/audio/index.js
index 946d65210..ed6548434 100644
--- a/app/soapbox/features/audio/index.js
+++ b/app/soapbox/features/audio/index.js
@@ -467,13 +467,13 @@ class Audio extends React.PureComponent {
           aria-label={alt}
         />
 
-        <img
+        {this.props.poster && <img
           src={this.props.poster}
           alt=''
           width={(this._getRadius() - TICK_SIZE) * 2 || null}
           height={(this._getRadius() - TICK_SIZE) * 2 || null}
           style={{ position: 'absolute', left: this._getCX(), top: this._getCY(), transform: 'translate(-50%, -50%)', borderRadius: '50%', pointerEvents: 'none' }}
-        />
+        />}
 
         <div className='video-player__seek' onMouseDown={this.handleMouseDown} ref={this.setSeekRef}>
           <div className='video-player__seek__buffer' style={{ width: `${buffer}%` }} />
@@ -490,8 +490,8 @@ class Audio extends React.PureComponent {
         <div className='video-player__controls active'>
           <div className='video-player__buttons-bar'>
             <div className='video-player__buttons left'>
-              <button type='button' title={intl.formatMessage(paused ? messages.play : messages.pause)} aria-label={intl.formatMessage(paused ? messages.play : messages.pause)} className='player-button' onClick={this.togglePlay}><Icon id={paused ? 'play' : 'pause'} fixedWidth /></button>
-              <button type='button' title={intl.formatMessage(muted ? messages.unmute : messages.mute)} aria-label={intl.formatMessage(muted ? messages.unmute : messages.mute)} className='player-button' onClick={this.toggleMute}><Icon id={muted ? 'volume-off' : 'volume-up'} fixedWidth /></button>
+              <button type='button' title={intl.formatMessage(paused ? messages.play : messages.pause)} aria-label={intl.formatMessage(paused ? messages.play : messages.pause)} className='player-button' onClick={this.togglePlay}><Icon src={paused ? require('@tabler/icons/icons/player-play.svg') : require('@tabler/icons/icons/player-pause.svg')} /></button>
+              <button type='button' title={intl.formatMessage(muted ? messages.unmute : messages.mute)} aria-label={intl.formatMessage(muted ? messages.unmute : messages.mute)} className='player-button' onClick={this.toggleMute}><Icon src={muted ? require('@tabler/icons/icons/volume-3.svg') : require('@tabler/icons/icons/volume.svg')} /></button>
 
               <div className={classNames('video-player__volume', { active: this.state.hovered })} ref={this.setVolumeRef} onMouseDown={this.handleVolumeMouseDown}>
                 <div className='video-player__volume__current' style={{ width: `${volume * 100}%`, backgroundColor: this._getAccentColor() }} />
@@ -521,7 +521,7 @@ class Audio extends React.PureComponent {
                 download
                 target='_blank'
               >
-                <Icon id={'download'} fixedWidth />
+                <Icon src={require('@tabler/icons/icons/download.svg')} />
               </a>
             </div>
           </div>
diff --git a/app/soapbox/features/status/components/detailed_status.js b/app/soapbox/features/status/components/detailed_status.js
index 1f0809132..c19d092e8 100644
--- a/app/soapbox/features/status/components/detailed_status.js
+++ b/app/soapbox/features/status/components/detailed_status.js
@@ -123,16 +123,18 @@ export default class DetailedStatus extends ImmutablePureComponent {
           />
         );
       } else if (size === 1 && status.getIn(['media_attachments', 0, 'type']) === 'audio' && status.get('media_attachments').size === 1) {
-        const audio = status.getIn(['media_attachments', 0]);
+        const attachment = status.getIn(['media_attachments', 0]);
 
         media = (
           <Audio
-            src={audio.get('url')}
-            alt={audio.get('description')}
-            inline
-            sensitive={status.get('sensitive')}
-            visible={this.props.showMedia}
-            onToggleVisibility={this.props.onToggleMediaVisibility}
+            src={attachment.get('url')}
+            alt={attachment.get('description')}
+            duration={attachment.getIn(['meta', 'original', 'duration'], 0)}
+            poster={attachment.get('preview_url') !== attachment.get('url') ? attachment.get('preview_url') : status.getIn(['account', 'avatar_static'])}
+            backgroundColor={attachment.getIn(['meta', 'colors', 'background'])}
+            foregroundColor={attachment.getIn(['meta', 'colors', 'foreground'])}
+            accentColor={attachment.getIn(['meta', 'colors', 'accent'])}
+            height={150}
           />
         );
       } else {
diff --git a/app/soapbox/features/ui/components/media_modal.js b/app/soapbox/features/ui/components/media_modal.js
index e8bdd58de..5cdfabd3b 100644
--- a/app/soapbox/features/ui/components/media_modal.js
+++ b/app/soapbox/features/ui/components/media_modal.js
@@ -159,65 +159,65 @@ class MediaModal extends ImmutablePureComponent {
       return false;
     }).toArray();
 
-    const content = media.map((image) => {
-      const width  = image.getIn(['meta', 'original', 'width']) || null;
-      const height = image.getIn(['meta', 'original', 'height']) || null;
+    const content = media.map(attachment => {
+      const width  = attachment.getIn(['meta', 'original', 'width']) || null;
+      const height = attachment.getIn(['meta', 'original', 'height']) || null;
       const link = (status && account && <a href={status.get('url')} onClick={this.handleStatusClick}><FormattedMessage id='lightbox.view_context' defaultMessage='View context' /></a>);
 
-      if (image.get('type') === 'image') {
+      if (attachment.get('type') === 'image') {
         return (
           <ImageLoader
-            previewSrc={image.get('preview_url')}
-            src={image.get('url')}
+            previewSrc={attachment.get('preview_url')}
+            src={attachment.get('url')}
             width={width}
             height={height}
-            alt={image.get('description')}
-            key={image.get('url')}
+            alt={attachment.get('description')}
+            key={attachment.get('url')}
             onClick={this.toggleNavigation}
           />
         );
-      } else if (image.get('type') === 'video') {
+      } else if (attachment.get('type') === 'video') {
         const { time } = this.props;
 
         return (
           <Video
-            preview={image.get('preview_url')}
-            blurhash={image.get('blurhash')}
-            src={image.get('url')}
-            width={image.get('width')}
-            height={image.get('height')}
+            preview={attachment.get('preview_url')}
+            blurhash={attachment.get('blurhash')}
+            src={attachment.get('url')}
+            width={attachment.get('width')}
+            height={attachment.get('height')}
             startTime={time || 0}
             onCloseVideo={onClose}
             detailed
             link={link}
-            alt={image.get('description')}
-            key={image.get('url')}
+            alt={attachment.get('description')}
+            key={attachment.get('url')}
           />
         );
-      } else if (image.get('type') === 'audio') {
-        const { time } = this.props;
-
+      } else if (attachment.get('type') === 'audio') {
         return (
           <Audio
-            src={image.get('url')}
-            startTime={time || 0}
-            detailed
-            link={link}
-            alt={image.get('description')}
-            key={image.get('url')}
+            src={attachment.get('url')}
+            alt={attachment.get('description')}
+            poster={attachment.get('preview_url') !== attachment.get('url') ? attachment.get('preview_url') : (status && status.getIn(['account', 'avatar_static']))}
+            backgroundColor={attachment.getIn(['meta', 'colors', 'background'])}
+            foregroundColor={attachment.getIn(['meta', 'colors', 'foreground'])}
+            accentColor={attachment.getIn(['meta', 'colors', 'accent'])}
+            duration={attachment.getIn(['meta', 'original', 'duration'], 0)}
+            key={attachment.get('url')}
           />
         );
-      } else if (image.get('type') === 'gifv') {
+      } else if (attachment.get('type') === 'gifv') {
         return (
           <ExtendedVideoPlayer
-            src={image.get('url')}
+            src={attachment.get('url')}
             muted
             controls={false}
             width={width}
             link={link}
             height={height}
-            key={image.get('preview_url')}
-            alt={image.get('description')}
+            key={attachment.get('preview_url')}
+            alt={attachment.get('description')}
             onClick={this.toggleNavigation}
           />
         );