[Glitch] Add ALT badges to media that has alternative text in web UI

Port 8131a5b330 to glitch-soc

Signed-off-by: Claire <claire.github-309c@sitedethib.com>
pull/59/head^2^2
Eugen Rochko 2023-05-02 14:47:04 +02:00 committed by Claire
parent a8939e9098
commit bbd0e9caa6
2 changed files with 43 additions and 64 deletions

View File

@ -101,12 +101,10 @@ class Item extends React.PureComponent {
render () { render () {
const { attachment, lang, index, size, standalone, letterbox, displayWidth, visible } = this.props; const { attachment, lang, index, size, standalone, letterbox, displayWidth, visible } = this.props;
let badges = [], thumbnail;
let width = 50; let width = 50;
let height = 100; let height = 100;
let top = 'auto';
let left = 'auto';
let bottom = 'auto';
let right = 'auto';
if (size === 1) { if (size === 1) {
width = 100; width = 100;
@ -116,45 +114,13 @@ class Item extends React.PureComponent {
height = 50; height = 50;
} }
if (size === 2) { if (attachment.get('description')?.length > 0) {
if (index === 0) { badges.push(<span key='alt' className='media-gallery__gifv__label'>ALT</span>);
right = '2px';
} else {
left = '2px';
} }
} else if (size === 3) {
if (index === 0) {
right = '2px';
} else if (index > 0) {
left = '2px';
}
if (index === 1) {
bottom = '2px';
} else if (index > 1) {
top = '2px';
}
} else if (size === 4) {
if (index === 0 || index === 2) {
right = '2px';
}
if (index === 1 || index === 3) {
left = '2px';
}
if (index < 2) {
bottom = '2px';
} else {
top = '2px';
}
}
let thumbnail = '';
if (attachment.get('type') === 'unknown') { if (attachment.get('type') === 'unknown') {
return ( return (
<div className={classNames('media-gallery__item', { standalone })} key={attachment.get('id')} style={{ left: left, top: top, right: right, bottom: bottom, width: `${width}%`, height: `${height}%` }}> <div className={classNames('media-gallery__item', { standalone, 'media-gallery__item--tall': height === 100, 'media-gallery__item--wide': width === 100 })} key={attachment.get('id')}>
<a className='media-gallery__item-thumbnail' href={attachment.get('remote_url') || attachment.get('url')} style={{ cursor: 'pointer' }} title={attachment.get('description')} lang={lang} target='_blank' rel='noopener noreferrer'> <a className='media-gallery__item-thumbnail' href={attachment.get('remote_url') || attachment.get('url')} style={{ cursor: 'pointer' }} title={attachment.get('description')} lang={lang} target='_blank' rel='noopener noreferrer'>
<Blurhash <Blurhash
hash={attachment.get('blurhash')} hash={attachment.get('blurhash')}
@ -205,6 +171,8 @@ class Item extends React.PureComponent {
} else if (attachment.get('type') === 'gifv') { } else if (attachment.get('type') === 'gifv') {
const autoPlay = this.getAutoPlay(); const autoPlay = this.getAutoPlay();
badges.push(<span key='gif' className='media-gallery__gifv__label'>GIF</span>);
thumbnail = ( thumbnail = (
<div className={classNames('media-gallery__gifv', { autoplay: autoPlay })}> <div className={classNames('media-gallery__gifv', { autoplay: autoPlay })}>
<video <video
@ -222,14 +190,12 @@ class Item extends React.PureComponent {
loop loop
muted muted
/> />
<span className='media-gallery__gifv__label'>GIF</span>
</div> </div>
); );
} }
return ( return (
<div className={classNames('media-gallery__item', { standalone, letterbox })} key={attachment.get('id')} style={{ left: left, top: top, right: right, bottom: bottom, width: `${width}%`, height: `${height}%` }}> <div className={classNames('media-gallery__item', { standalone, letterbox, 'media-gallery__item--tall': height === 100, 'media-gallery__item--wide': width === 100 })} key={attachment.get('id')}>
<Blurhash <Blurhash
hash={attachment.get('blurhash')} hash={attachment.get('blurhash')}
dummy={!useBlurhash} dummy={!useBlurhash}
@ -237,7 +203,14 @@ class Item extends React.PureComponent {
'media-gallery__preview--hidden': visible && this.state.loaded, 'media-gallery__preview--hidden': visible && this.state.loaded,
})} })}
/> />
{visible && thumbnail} {visible && thumbnail}
{badges && (
<div className='media-gallery__item__badges'>
{badges}
</div>
)}
</div> </div>
); );
} }

View File

@ -43,30 +43,25 @@
font-weight: 500; font-weight: 500;
} }
.media-gallery__gifv__label { .media-gallery__item__badges {
display: block;
position: absolute; position: absolute;
color: $primary-text-color;
background: rgba($base-overlay-background, 0.5);
bottom: 6px; bottom: 6px;
inset-inline-start: 6px; inset-inline-start: 6px;
padding: 2px 6px; display: flex;
border-radius: 2px; gap: 2px;
font-size: 11px;
font-weight: 600;
z-index: 1;
pointer-events: none;
opacity: 0.9;
transition: opacity 0.1s ease;
line-height: 18px;
} }
.media-gallery__gifv {
&:hover {
.media-gallery__gifv__label { .media-gallery__gifv__label {
opacity: 1; display: block;
} color: $white;
} background: rgba($black, 0.65);
padding: 2px 6px;
border-radius: 4px;
font-size: 11px;
font-weight: 700;
z-index: 1;
pointer-events: none;
line-height: 18px;
} }
.media-gallery { .media-gallery {
@ -77,6 +72,10 @@
position: relative; position: relative;
width: 100%; width: 100%;
min-height: 64px; min-height: 64px;
display: grid;
grid-template-columns: 50% 50%;
grid-template-rows: 50% 50%;
gap: 2px;
@include fullwidth-gallery; @include fullwidth-gallery;
} }
@ -85,13 +84,16 @@
border: 0; border: 0;
box-sizing: border-box; box-sizing: border-box;
display: block; display: block;
float: left;
position: relative; position: relative;
border-radius: 4px; border-radius: 4px;
overflow: hidden; overflow: hidden;
.full-width & { &--tall {
border-radius: 0; grid-row: span 2;
}
&--wide {
grid-column: span 2;
} }
&.standalone { &.standalone {
@ -101,6 +103,10 @@
} }
} }
.full-width & {
border-radius: 0;
}
&.letterbox { &.letterbox {
background: $base-shadow-color; background: $base-shadow-color;
} }