From c6c7f7eb2f29fdf2c3684c5e0c275fd875df01e3 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Mon, 24 Jul 2023 14:47:09 -0500
Subject: [PATCH] Fix aspect ratio of avatars in audio player Fixes
 https://gitlab.com/soapbox-pub/soapbox/-/issues/1345

---
 CHANGELOG.md                         | 1 +
 app/soapbox/features/audio/index.tsx | 8 ++------
 2 files changed, 3 insertions(+), 6 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 3f5f12683..baaf46aa9 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -31,6 +31,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Fixed
 - Posts: fixed emojis being cut off in reactions modal.
 - Posts: fix audio player progress bar visibility.
+- Posts: fix audio player avatar aspect ratio for non-square avatars.
 - Posts: added missing gap in pending status.
 - Compatibility: fixed quote posting compatibility with custom Pleroma forks.
 - Profile: fix "load more" button height on account gallery page.
diff --git a/app/soapbox/features/audio/index.tsx b/app/soapbox/features/audio/index.tsx
index 3b91aee88..a4a5ee19c 100644
--- a/app/soapbox/features/audio/index.tsx
+++ b/app/soapbox/features/audio/index.tsx
@@ -465,10 +465,9 @@ const Audio: React.FC<IAudio> = (props) => {
       <canvas
         role='button'
         tabIndex={0}
-        className='audio-player__canvas'
+        className='audio-player__canvas absolute left-0 top-0 w-full'
         width={width}
         height={height}
-        style={{ width: '100%', position: 'absolute', top: 0, left: 0 }}
         ref={canvas}
         onClick={togglePlay}
         onKeyDown={handleAudioKeyDown}
@@ -480,15 +479,12 @@ const Audio: React.FC<IAudio> = (props) => {
         <img
           src={poster}
           alt=''
+          className='pointer-events-none absolute aspect-1 -translate-x-1/2 -translate-y-1/2 rounded-full object-cover'
           width={(_getRadius() - TICK_SIZE) * 2}
           height={(_getRadius() - TICK_SIZE) * 2}
           style={{
-            position: 'absolute',
             left: _getCX(),
             top: _getCY(),
-            transform: 'translate(-50%, -50%)',
-            borderRadius: '50%',
-            pointerEvents: 'none',
           }}
         />
       )}