gnh1201/mastodon
1
0
Fork 0
mirror of https://github.com/mastodon/mastodon.git synced 2025-09-05 17:31:12 +00:00
Code Issues Actions 34 Packages Projects Releases Wiki Activity

Add ALT button to audio and video players

Browse Source 
- 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
This commit is contained in:
Roland Moriz 2025-08-15 07:20:27 +02:00
parent 4de21056ff
commit f351c30128
2 changed files with 13 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
app/javascript/mastodon/features/audio/index.tsx
View File

@ -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 Replay5Icon from '@/material-icons/400-24px/replay_5-fill.svg?react';
import VolumeOffIcon from '@/material-icons/400-24px/volume_off-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 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 { Blurhash } from 'mastodon/components/blurhash';
import { Icon } from 'mastodon/components/icon'; import { Icon } from 'mastodon/components/icon';
import { SpoilerButton } from 'mastodon/components/spoiler_button'; import { SpoilerButton } from 'mastodon/components/spoiler_button';
@ -810,6 +811,12 @@ export const Audio: React.FC<{
<div className='video-player__buttons right'> <div className='video-player__buttons right'>
{!editable && ( {!editable && (
<> <>
{alt && (
<div className='video-player__alt'>
<AltTextBadge description={alt} />
</div>
)}
<button <button
type='button' type='button'
className='player-button' className='player-button'

6
app/javascript/mastodon/features/video/index.tsx
View File

@ -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 VolumeDownIcon from '@/material-icons/400-24px/volume_down-fill.svg?react';
import VolumeOffIcon from '@/material-icons/400-24px/volume_off-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 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 { Blurhash } from 'mastodon/components/blurhash';
import { Icon } from 'mastodon/components/icon'; import { Icon } from 'mastodon/components/icon';
import { SpoilerButton } from 'mastodon/components/spoiler_button'; import { SpoilerButton } from 'mastodon/components/spoiler_button';
@ -989,6 +990,11 @@ export const Video: React.FC<{
</div> </div>
<div className='video-player__buttons right'> <div className='video-player__buttons right'>
{alt && (
<div className='video-player__alt'>
<AltTextBadge description={alt} />
</div>
)}
{!fullscreen && onOpenVideo && ( {!fullscreen && onOpenVideo && (
<button <button
type='button' type='button'