From f351c30128d4ad26f106540f35fafbcd7e120440 Mon Sep 17 00:00:00 2001
From: Roland Moriz <roland@moriz.de>
Date: Fri, 15 Aug 2025 07:20:27 +0200
Subject: [PATCH] Add ALT button to audio and video players

- Import AltTextBadge component in both audio and video players
- Add ALT button to audio player controls when description exists
- Add ALT button to video player controls when description exists
- Maintains consistent UI with image gallery ALT functionality
---
 app/javascript/mastodon/features/audio/index.tsx | 7 +++++++
 app/javascript/mastodon/features/video/index.tsx | 6 ++++++
 2 files changed, 13 insertions(+)

diff --git a/app/javascript/mastodon/features/audio/index.tsx b/app/javascript/mastodon/features/audio/index.tsx
index a6a131c0d4..2e7af81d5b 100644
--- a/app/javascript/mastodon/features/audio/index.tsx
+++ b/app/javascript/mastodon/features/audio/index.tsx
@@ -13,6 +13,7 @@ import PlayArrowIcon from '@/material-icons/400-24px/play_arrow-fill.svg?react';
 import Replay5Icon from '@/material-icons/400-24px/replay_5-fill.svg?react';
 import VolumeOffIcon from '@/material-icons/400-24px/volume_off-fill.svg?react';
 import VolumeUpIcon from '@/material-icons/400-24px/volume_up-fill.svg?react';
+import { AltTextBadge } from 'mastodon/components/alt_text_badge';
 import { Blurhash } from 'mastodon/components/blurhash';
 import { Icon } from 'mastodon/components/icon';
 import { SpoilerButton } from 'mastodon/components/spoiler_button';
@@ -810,6 +811,12 @@ export const Audio: React.FC<{
           <div className='video-player__buttons right'>
             {!editable && (
               <>
+                {alt && (
+                  <div className='video-player__alt'>
+                    <AltTextBadge description={alt} />
+                  </div>
+                )}
+
                 <button
                   type='button'
                   className='player-button'
diff --git a/app/javascript/mastodon/features/video/index.tsx b/app/javascript/mastodon/features/video/index.tsx
index 65f26cedad..07e5e67ad2 100644
--- a/app/javascript/mastodon/features/video/index.tsx
+++ b/app/javascript/mastodon/features/video/index.tsx
@@ -17,6 +17,7 @@ import Replay5Icon from '@/material-icons/400-24px/replay_5-fill.svg?react';
 import VolumeDownIcon from '@/material-icons/400-24px/volume_down-fill.svg?react';
 import VolumeOffIcon from '@/material-icons/400-24px/volume_off-fill.svg?react';
 import VolumeUpIcon from '@/material-icons/400-24px/volume_up-fill.svg?react';
+import { AltTextBadge } from 'mastodon/components/alt_text_badge';
 import { Blurhash } from 'mastodon/components/blurhash';
 import { Icon } from 'mastodon/components/icon';
 import { SpoilerButton } from 'mastodon/components/spoiler_button';
@@ -989,6 +990,11 @@ export const Video: React.FC<{
             </div>
 
             <div className='video-player__buttons right'>
+              {alt && (
+                <div className='video-player__alt'>
+                  <AltTextBadge description={alt} />
+                </div>
+              )}
               {!fullscreen && onOpenVideo && (
                 <button
                   type='button'