[Glitch] Add display of out-of-band hashtags in the web interface

Port df6e719898 to glitch-soc

Co-authored-by: Eugen Rochko <eugen@zeonfederated.com>
Signed-off-by: Claire <claire.github-309c@sitedethib.com>
pull/2391/head
Claire 2023-08-14 23:42:30 +02:00
parent 9bbb0f13e0
commit a81ed84453
4 changed files with 81 additions and 0 deletions

View File

@ -0,0 +1,50 @@
import PropTypes from 'prop-types';
import { useMemo, useState, useCallback } from 'react';
import { FormattedMessage } from 'react-intl';
import { Link } from 'react-router-dom';
import ImmutablePropTypes from 'react-immutable-proptypes';
const domParser = new DOMParser();
// About two lines on desktop
const VISIBLE_HASHTAGS = 7;
export const HashtagBar = ({ hashtags, text }) => {
const renderedHashtags = useMemo(() => {
const body = domParser.parseFromString(text, 'text/html').documentElement;
return [].map.call(body.querySelectorAll('[rel=tag]'), node => node.textContent.toLowerCase());
}, [text]);
const invisibleHashtags = useMemo(() => (
hashtags.filter(hashtag => !renderedHashtags.some(textContent => textContent === `#${hashtag.get('name')}` || textContent === hashtag.get('name')))
), [hashtags, renderedHashtags]);
const [expanded, setExpanded] = useState(false);
const handleClick = useCallback(() => setExpanded(true), []);
if (invisibleHashtags.isEmpty()) {
return null;
}
const revealedHashtags = expanded ? invisibleHashtags : invisibleHashtags.take(VISIBLE_HASHTAGS);
return (
<div className='hashtag-bar'>
{revealedHashtags.map(hashtag => (
<Link key={hashtag.get('name')} to={`/tags/${hashtag.get('name')}`}>
#{hashtag.get('name')}
</Link>
))}
{!expanded && invisibleHashtags.size > VISIBLE_HASHTAGS && <button className='link-button' onClick={handleClick}><FormattedMessage id='hashtags.and_other' defaultMessage='…and {count, plural, other {# more}}' values={{ count: invisibleHashtags.size - VISIBLE_HASHTAGS }} /></button>}
</div>
);
};
HashtagBar.propTypes = {
hashtags: ImmutablePropTypes.list,
text: PropTypes.string,
};

View File

@ -20,6 +20,7 @@ import Bundle from '../features/ui/components/bundle';
import { MediaGallery, Video, Audio } from '../features/ui/util/async-components'; import { MediaGallery, Video, Audio } from '../features/ui/util/async-components';
import { displayMedia } from '../initial_state'; import { displayMedia } from '../initial_state';
import { HashtagBar } from './hashtag_bar';
import AttachmentList from './attachment_list'; import AttachmentList from './attachment_list';
import StatusActionBar from './status_action_bar'; import StatusActionBar from './status_action_bar';
import StatusContent from './status_content'; import StatusContent from './status_content';
@ -739,6 +740,10 @@ class Status extends ImmutablePureComponent {
contentMediaIcons.push('tasks'); contentMediaIcons.push('tasks');
} }
media.push(
<HashtagBar hashtags={status.get('tags')} text={status.get('content')} />
);
// Here we prepare extra data-* attributes for CSS selectors. // Here we prepare extra data-* attributes for CSS selectors.
// Users can use those for theming, hiding avatars etc via UserStyle // Users can use those for theming, hiding avatars etc via UserStyle
const selectorAttribs = { const selectorAttribs = {

View File

@ -11,6 +11,7 @@ import ImmutablePureComponent from 'react-immutable-pure-component';
import { AnimatedNumber } from 'flavours/glitch/components/animated_number'; import { AnimatedNumber } from 'flavours/glitch/components/animated_number';
import AttachmentList from 'flavours/glitch/components/attachment_list'; import AttachmentList from 'flavours/glitch/components/attachment_list';
import EditedTimestamp from 'flavours/glitch/components/edited_timestamp'; import EditedTimestamp from 'flavours/glitch/components/edited_timestamp';
import { HashtagBar } from 'flavours/glitch/components/hashtag_bar';
import { Icon } from 'flavours/glitch/components/icon'; import { Icon } from 'flavours/glitch/components/icon';
import PictureInPicturePlaceholder from 'flavours/glitch/components/picture_in_picture_placeholder'; import PictureInPicturePlaceholder from 'flavours/glitch/components/picture_in_picture_placeholder';
import VisibilityIcon from 'flavours/glitch/components/status_visibility_icon'; import VisibilityIcon from 'flavours/glitch/components/status_visibility_icon';
@ -327,6 +328,8 @@ class DetailedStatus extends ImmutablePureComponent {
disabled disabled
/> />
<HashtagBar hashtags={status.get('tags')} text={status.get('content')} />
<div className='detailed-status__meta'> <div className='detailed-status__meta'>
<a className='detailed-status__datetime' href={status.get('url')} target='_blank' rel='noopener noreferrer'> <a className='detailed-status__datetime' href={status.get('url')} target='_blank' rel='noopener noreferrer'>
<FormattedDate value={new Date(status.get('created_at'))} hour12={false} year='numeric' month='short' day='2-digit' hour='2-digit' minute='2-digit' /> <FormattedDate value={new Date(status.get('created_at'))} hour12={false} year='numeric' month='short' day='2-digit' hour='2-digit' minute='2-digit' />

View File

@ -1661,3 +1661,26 @@ noscript {
opacity: 1; opacity: 1;
} }
} }
.hashtag-bar {
margin-top: 16px;
display: flex;
flex-wrap: wrap;
font-size: 14px;
gap: 4px;
a {
display: inline-flex;
border-radius: 4px;
background: rgba($highlight-text-color, 0.2);
color: $highlight-text-color;
padding: 0.4em 0.6em;
text-decoration: none;
&:hover,
&:focus,
&:active {
background: rgba($highlight-text-color, 0.3);
}
}
}