Merge commit '58b3fc03796dbde54dbba9a4c554c2d8d24f81fd' into glitch-soc/merge-upstream

app/javascript/mastodon/features/compose/components/search.tsx

@@ -557,7 +557,11 @@ export const Search: React.FC<{
                     )}
                   >
                     <span>{label}</span>
-                    <button className='icon-button' onMouseDown={forget}>
+                    <button
+                      className='icon-button'
+                      onMouseDown={forget}
+                      type='button'
+                    >
                       <Icon id='times' icon={CloseIcon} />
                     </button>
                   </div>
@@ -591,6 +595,7 @@ export const Search: React.FC<{
                   className={classNames('search__popout__menu__item', {
                     selected: selectedOption === i,
                   })}
+                  type='button'
                 >
                   {label}
                 </button>
@@ -617,6 +622,7 @@ export const Search: React.FC<{
                     selectedOption ===
                     (quickActions.length || recent.length) + i,
                 })}
+                type='button'
               >
                 {label}
               </button>

app/javascript/mastodon/features/compose/components/upload.tsx

@@ -10,6 +10,7 @@ import { useSortable } from '@dnd-kit/sortable';
 import { CSS } from '@dnd-kit/utilities';
 
 import CloseIcon from '@/material-icons/400-20px/close.svg?react';
+import SoundIcon from '@/material-icons/400-24px/audio.svg?react';
 import EditIcon from '@/material-icons/400-24px/edit.svg?react';
 import WarningIcon from '@/material-icons/400-24px/warning.svg?react';
 import { undoUploadCompose } from 'mastodon/actions/compose';
@@ -17,7 +18,18 @@ import { openModal } from 'mastodon/actions/modal';
 import { Blurhash } from 'mastodon/components/blurhash';
 import { Icon } from 'mastodon/components/icon';
 import type { MediaAttachment } from 'mastodon/models/media_attachment';
-import { useAppDispatch, useAppSelector } from 'mastodon/store';
+import {
+  createAppSelector,
+  useAppDispatch,
+  useAppSelector,
+} from 'mastodon/store';
+
+import { AudioVisualizer } from '../../audio/visualizer';
+
+const selectUserAvatar = createAppSelector(
+  [(state) => state.accounts, (state) => state.meta.get('me') as string],
+  (accounts, myId) => accounts.get(myId)?.avatar_static,
+);
 
 export const Upload: React.FC<{
   id: string;
@@ -38,6 +50,7 @@ export const Upload: React.FC<{
   const sensitive = useAppSelector(
     (state) => state.compose.get('spoiler') as boolean,
   );
+  const userAvatar = useAppSelector(selectUserAvatar);
 
   const handleUndoClick = useCallback(() => {
     dispatch(undoUploadCompose(id));
@@ -67,6 +80,8 @@ export const Upload: React.FC<{
     transform: CSS.Transform.toString(transform),
     transition,
   };
+  const preview_url = media.get('preview_url') as string | null;
+  const blurhash = media.get('blurhash') as string | null;
 
   return (
     <div
@@ -85,17 +100,19 @@ export const Upload: React.FC<{
       <div
         className='compose-form__upload__thumbnail'
         style={{
-          backgroundImage: !sensitive
-            ? `url(${media.get('preview_url') as string})`
-            : undefined,
+          backgroundImage:
+            !sensitive && preview_url ? `url(${preview_url})` : undefined,
           backgroundPosition: `${x}% ${y}%`,
         }}
       >
-        {sensitive && (
-          <Blurhash
-            hash={media.get('blurhash') as string}
-            className='compose-form__upload__preview'
-          />
+        {sensitive && blurhash && (
+          <Blurhash hash={blurhash} className='compose-form__upload__preview' />
+        )}
+        {!sensitive && !preview_url && (
+          <div className='compose-form__upload__visualizer'>
+            <AudioVisualizer poster={userAvatar} />
+            <Icon id='sound' icon={SoundIcon} />
+          </div>
         )}
 
         <div className='compose-form__upload__actions'>