dark-firepit
/
mastodon
Archived
5
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

[WIP] Initial status work

This commit is contained in:
kibigo! 2017-08-14 15:07:22 -07:00
parent 4dc0ddc601
commit 866e441df3
64 changed files with 4237 additions and 2260 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

113
app/javascript/glitch/components/common/avatar/index.js Normal file
View File

@ -0,0 +1,113 @@
// <CommonAvatar>
// ========
// For code documentation, please see:
// https://glitch-soc.github.io/docs/javascript/glitch/common/avatar
// For more information, please contact:
// @kibi@glitch.social
// * * * * * * * //
// Imports
// -------
// Package imports.
import classNames from 'classnames';
import React from 'react';
import PropTypes from 'prop-types';
import ImmutablePropTypes from 'react-immutable-proptypes';
// Stylesheet imports.
import './style';
// * * * * * * * //
// The component
// -------------
export default class CommonAvatar extends React.PureComponent {
// Props and state.
static propTypes = {
account: ImmutablePropTypes.map.isRequired,
animate: PropTypes.bool,
circular: PropTypes.bool,
className: PropTypes.string,
comrade: ImmutablePropTypes.map,
}
state = {
hovering: false,
}
// Starts or stops animation on hover.
handleMouseEnter = () => {
if (this.props.animate) return;
this.setState({ hovering: true });
}
handleMouseLeave = () => {
if (this.props.animate) return;
this.setState({ hovering: false });
}
// Renders the component.
render () {
const {
handleMouseEnter,
handleMouseLeave,
} = this;
const {
account,
animate,
circular,
className,
comrade,
...others
} = this.props;
const { hovering } = this.state;
const computedClass = classNames('glitch', 'glitch__common__avatar', {
_circular: circular,
}, className);
// We store the image srcs here for later.
const src = account.get('avatar');
const staticSrc = account.get('avatar_static');
const comradeSrc = comrade ? comrade.get('avatar') : null;
const comradeStaticSrc = comrade ? comrade.get('avatar_static') : null;
// Avatars are a straightforward div with image(s) inside.
return comrade ? (
<div
className={computedClass}
onMouseEnter={handleMouseEnter}
onMouseLeave={handleMouseLeave}
{...others}
>
<img
className='avatar\main'
src={hovering || animate ? src : staticSrc}
alt=''
/>
<img
className='avatar\comrade'
src={hovering || animate ? comradeSrc : comradeStaticSrc}
alt=''
/>
</div>
) : (
<div
className={computedClass}
onMouseEnter={handleMouseEnter}
onMouseLeave={handleMouseLeave}
{...others}
>
<img
className='avatar\solo'
src={hovering || animate ? src : staticSrc}
alt=''
/>
</div>
);
}
}

41
app/javascript/glitch/components/common/avatar/style.scss Normal file
View File

@ -0,0 +1,41 @@
@import 'variables';
.glitch.glitch__common__avatar {
display: inline-block;
position: relative;
& > img {
display: block;
position: static;
margin: 0;
border-radius: $ui-avatar-border-size;
width: 100%;
height: 100%;
&.avatar\\comrade {
position: absolute;
right: 0;
bottom: 0;
width: 50%;
height: 50%;
}
&.avatar\\main {
margin: 0 30% 30% 0;
width: 70%;
height: 70%;
}
}
&._circular {
& > img {
transition: border-radius ($glitch-animation-speed * .3s);
}
&:not(:hover) {
& > img {
border-radius: 50%;
}
}
}
}

146
app/javascript/glitch/components/common/button/index.js Normal file
View File

@ -0,0 +1,146 @@
// <CommonButton>
// ========
// For code documentation, please see:
// https://glitch-soc.github.io/docs/javascript/glitch/common/button
// For more information, please contact:
// @kibi@glitch.social
// * * * * * * * //
// Imports
// -------
// Package imports.
import classNames from 'classnames';
import React from 'react';
import PropTypes from 'prop-types';
// Our imports.
import CommonLink from 'glitch/components/common/link';
import CommonIcon from 'glitch/components/common/icon';
// Stylesheet imports.
import './style';
// * * * * * * * //
// The component
// -------------
export default class CommonButton extends React.PureComponent {
static propTypes = {
active: PropTypes.bool,
animate: PropTypes.bool,
children: PropTypes.node,
className: PropTypes.string,
disabled: PropTypes.bool,
href: PropTypes.string,
icon: PropTypes.string,
onClick: PropTypes.func,
showTitle: PropTypes.bool,
title: PropTypes.string,
}
state = {
loaded: false,
}
// The `loaded` state property activates our animations. We wait
// until an activation change in order to prevent unsightly
// animations when the component first mounts.
componentWillReceiveProps (nextProps) {
const { active } = this.props;
// The double "not"s here cast both arguments to booleans.
if (!nextProps.active !== !active) this.setState({ loaded: true });
}
handleClick = (e) => {
const { onClick } = this.props;
if (!onClick) return;
onClick(e);
e.preventDefault();
}
// Rendering the component.
render () {
const { handleClick } = this;
const {
active,
animate,
children,
className,
disabled,
href,
icon,
onClick,
showTitle,
title,
...others
} = this.props;
const { loaded } = this.state;
const computedClass = classNames('glitch', 'glitch__common__button', className, {
_active: active && !href, // Links can't be active
_animated: animate && loaded,
_disabled: disabled,
_link: href,
_star: icon === 'star',
'_with-text': children || title && showTitle,
});
let conditionalProps = {};
// If href is provided, we render a link.
if (href) {
if (!disabled && href) conditionalProps.href = href;
if (title && !showTitle) {
if (!children) conditionalProps.title = title;
else conditionalProps['aria-label'] = title;
}
if (onClick) {
if (!disabled) conditionalProps.onClick = handleClick;
else conditionalProps['aria-disabled'] = true;
conditionalProps.role = 'button';
conditionalProps.tabIndex = 0;
}
return (
<CommonLink
className={computedClass}
{...conditionalProps}
{...others}
>
{children}
{title && showTitle ? <span className='button\title'>{title}</span> : null}
<CommonIcon name={icon} className='button\icon' />
</CommonLink>
);
// Otherwise, we render a button.
} else {
if (active !== void 0) conditionalProps['aria-pressed'] = active;
if (title && !showTitle) {
if (!children) conditionalProps.title = title;
else conditionalProps['aria-label'] = title;
}
if (onClick && !disabled) {
conditionalProps.onClick = handleClick;
}
return (
<button
className={computedClass}
{...conditionalProps}
disabled={disabled}
{...others}
tabIndex='0'
type='button'
>
{children}
{title && showTitle ? <span className='button\title'>{title}</span> : null}
<CommonIcon name={icon} className='button\icon' />
</button>
);
}
};
}

134
app/javascript/glitch/components/common/button/style.scss Normal file
View File

@ -0,0 +1,134 @@
@import 'variables';
.glitch.glitch__common__button {
display: inline-block;
border: none;
padding: 0;
color: $ui-base-lighter-color;
background: transparent;
outline: thin transparent dotted;
font-size: inherit;
text-decoration: none;
cursor: pointer;
transition: color ($glitch-animation-speed * .15s) ease-in, outline-color ($glitch-animation-speed * .3s) ease-in-out;
&._animated .button\\icon {
animation-name: glitch__common__button__deactivate;
animation-duration: .9s;
animation-timing-function: ease-in-out;
@keyframes glitch__common__button__deactivate {
from {
transform: rotate(360deg);
}
57% {
transform: rotate(-60deg);
}
86% {
transform: rotate(30deg);
}
to {
transform: rotate(0deg);
}
}
}
&._active {
.button\\icon {
color: $ui-highlight-color;
}
&._animated .button\\icon {
animation-name: glitch__common__button__activate;
@keyframes glitch__common__button__activate {
from {
transform: rotate(0deg);
}
57% {
transform: rotate(420deg); // Blazin' 😎
}
86% {
transform: rotate(330deg);
}
to {
transform: rotate(360deg);
}
}
}
/*
The special `._star` class is given to buttons which have a star
icon (see JS). When they are active, we give them a gold star ⭐️.
*/
&._star .button\\icon {
color: $gold-star;
}
}
/*
For links, we consider them disabled if they don't have an `href`
attribute (see JS).
*/
&._disabled {
opacity: $glitch-disabled-opacity;
cursor: default;
}
/*
This is confusing becuase of the names, but the `color .3 ease-out`
transition is actually used when easing *in* to a hovering/active/
focusing state, and the default transition is used when leaving. Our
buttons are a little slower to glow than they are to fade.
*/
&:active,
&:focus,
&:hover {
color: $glitch-lighter-color;
transition: color ($glitch-animation-speed * .3s) ease-out, outline-color ($glitch-animation-speed * .15s) ease-in-out;
}
&:focus {
outline-color: currentColor;
}
/*
Buttons with text have a number of different styling rules and an
overall different appearance.
*/
&._with-text {
display: inline-block;
border: none;
border-radius: .35em;
padding: 0 .5em;
color: $glitch-texture-color;
background: $ui-base-lighter-color;
font-size: .75em;
font-weight: inherit;
text-transform: uppercase;
line-height: 1.6;
cursor: pointer;
vertical-align: baseline;
transition: background-color ($glitch-animation-speed * .15s) ease-in, outline-color ($glitch-animation-speed * .3s) ease-in-out;
.button\\icon {
display: inline-block;
font-size: 1.25em;
vertical-align: -.1em;
}
& > *:not(:first-child) {
margin: 0 0 0 .4em;
border-left: 1px solid currentColor;
padding: 0 0 0 .3em;
}
&:active,
&:hover,
&:focus {
color: $glitch-texture-color;
background: $glitch-lighter-color;
transition: background-color ($glitch-animation-speed * .3s) ease-out, outline-color ($glitch-animation-speed * .15s) ease-in-out;
}
}
}

59
app/javascript/glitch/components/common/icon/index.js Normal file
View File

@ -0,0 +1,59 @@
// <CommonIcon>
// ========
// For code documentation, please see:
// https://glitch-soc.github.io/docs/javascript/glitch/common/icon
// For more information, please contact:
// @kibi@glitch.social
// * * * * * * * //
// Imports
// -------
// Package imports.
import classNames from 'classnames';
import React from 'react';
import PropTypes from 'prop-types';
// Stylesheet imports.
import './style';
// * * * * * * * //
// The component
// -------------
const CommonIcon = ({
className,
name,
proportional,
title,
...others
}) => name ? (
<span
className={classNames('glitch', 'glitch__common__icon', className)}
{...others}
>
<span
aria-hidden
className={`fa ${proportional ? '' : 'fa-fw'} fa-${name} icon\fa`}
{...(title ? { title } : {})}
/>
{title ? (
<span className='_for-screenreader'>{title}</span>
) : null}
</span>
) : null;
// Props.
CommonIcon.propTypes = {
className: PropTypes.string,
name: PropTypes.string,
proportional: PropTypes.bool,
title: PropTypes.string,
};
// Export.
export default CommonIcon;

14
app/javascript/glitch/components/common/icon/style.scss Normal file
View File

@ -0,0 +1,14 @@
@import 'variables';
.glitch.glitch__common__icon {
display: inline-block;
._for-screenreader {
position: absolute;
margin: -1px -1px;
width: 1px;
height: 1px;
clip: rect(0, 0, 0, 0);
overflow: hidden;
}
}

74
app/javascript/glitch/components/common/link/index.js Normal file
View File

@ -0,0 +1,74 @@
// <CommonLink>
// ========
// For code documentation, please see:
// https://glitch-soc.github.io/docs/javascript/glitch/common/link
// For more information, please contact:
// @kibi@glitch.social
// * * * * * * * //
// Imports
// -------
// Package imports.
import classNames from 'classnames';
import PropTypes from 'prop-types';
import React from 'react';
// Stylesheet imports.
import './style';
// * * * * * * * //
// The component
// -------------
export default class CommonLink extends React.PureComponent {
// Props.
static propTypes = {
children: PropTypes.node,
className: PropTypes.string,
destination: PropTypes.string,
history: PropTypes.object,
href: PropTypes.string,
};
// We only reroute the link if it is an unadorned click, we have
// access to the router, and there is somewhere to reroute it *to*.
handleClick = (e) => {
const { destination, history } = this.props;
if (!history || !destination || e.button || e.ctrlKey || e.shiftKey || e.altKey || e.metaKey) return;
history.push(destination);
e.preventDefault();
}
// Rendering.
render () {
const { handleClick } = this;
const { children, className, destination, history, href, ...others } = this.props;
const computedClass = classNames('glitch', 'glitch__common__link', className);
const conditionalProps = {};
if (href) {
conditionalProps.href = href;
conditionalProps.onClick = handleClick;
} else if (destination) {
conditionalProps.onClick = handleClick;
conditionalProps.role = 'link';
conditionalProps.tabIndex = 0;
} else conditionalProps.role = 'presentation';
return (
<a
className={computedClass}
{...conditionalProps}
{...others}
rel='noopener'
target='_blank'
>{children}</a>
);
}
}

11
app/javascript/glitch/components/common/link/style.scss Normal file
View File

@ -0,0 +1,11 @@
@import 'variables';
/*
Most link styling happens elsewhere but we disable text-decoration
here.
*/
.glitch.glitch__common__link {
display: inline;
color: $ui-secondary-color;
text-decoration: none;
}

49
app/javascript/glitch/components/common/separator/index.js Normal file
View File

@ -0,0 +1,49 @@
// <CommonSeparator>
// ========
// For code documentation, please see:
// https://glitch-soc.github.io/docs/javascript/glitch/common/separator
// For more information, please contact:
// @kibi@glitch.social
// * * * * * * * //
// Imports
// -------
// Package imports.
import classNames from 'classnames';
import PropTypes from 'prop-types';
import React from 'react';
// Stylesheet imports.
import './style';
// * * * * * * * //
// The component
// -------------
const CommonSeparator = ({
className,
visible,
...others
}) => visible ? (
<span
className={
classNames('glitch', 'glitch__common__separator', className)
}
{...others}
role='separator'
/> // Contents provided via CSS.
) : null;
// Props.
CommonSeparator.propTypes = {
className: PropTypes.string,
visible: PropTypes.bool,
};
// Export.
export default CommonSeparator;

15
app/javascript/glitch/components/common/separator/style.scss Normal file
View File

@ -0,0 +1,15 @@
@import 'variables';
/*
The default contents for a separator is an interpunct, surrounded by
spaces. However, this can be changed using CSS selectors.
*/
.glitch.glitch__common__separator {
display: inline-block;
&::after {
display: inline-block;
padding: 0 .3em;
content: "·";
}
}

52
app/javascript/glitch/components/list/conversation/container.js Normal file
View File

@ -0,0 +1,52 @@
// <ListConversationContainer>
// =================
// For code documentation, please see:
// https://glitch-soc.github.io/docs/javascript/glitch/list/conversation/container
// For more information, please contact:
// @kibi@glitch.social
// * * * * * * * //
// Imports
// -------
// Package imports.
import { connect } from 'react-redux';
// Mastodon imports.
import { fetchContext } from 'mastodon/actions/statuses';
// Our imports.
import ListConversation from '.';
// * * * * * * * //
// State mapping
// -------------
const mapStateToProps = (state, { id }) => {
return {
ancestors : state.getIn(['contexts', 'ancestors', id]),
descendants : state.getIn(['contexts', 'descendants', id]),
};
};
// * * * * * * * //
// Dispatch mapping
// ----------------
const mapDispatchToProps = (dispatch) => ({
fetch (id) {
dispatch(fetchContext(id));
},
});
// * * * * * * * //
// Connecting
// ----------
export default connect(mapStateToProps, mapDispatchToProps)(ListConversation);

80
app/javascript/glitch/components/list/conversation/index.js Normal file
View File

@ -0,0 +1,80 @@
// <ListConversation>
// ====================
// For code documentation, please see:
// https://glitch-soc.github.io/docs/javascript/glitch/list/conversation
// For more information, please contact:
// @kibi@glitch.social
// * * * * * * * //
// Imports
// -------
// Package imports.
import React from 'react';
import PropTypes from 'prop-types';
import ScrollContainer from 'react-router-scroll';
import ImmutablePropTypes from 'react-immutable-proptypes';
import ImmutablePureComponent from 'react-immutable-pure-component';
// Our imports.
import StatusContainer from 'glitch/components/status/container';
// Stylesheet imports.
import './style';
// * * * * * * * //
// The component
// -------------
export default class ListConversation extends ImmutablePureComponent {
// Props.
static propTypes = {
id: PropTypes.number.isRequired,
ancestors: ImmutablePropTypes.list,
descendants: ImmutablePropTypes.list,
fetch: PropTypes.func.isRequired,
}
// If this is a detailed status, we should fetch its contents and
// context upon mounting.
componentWillMount () {
const { id, fetch } = this.props;
fetch(id);
}
// Similarly, if the component receives new props, we need to fetch
// the new status.
componentWillReceiveProps (nextProps) {
const { id, fetch } = this.props;
if (nextProps.id !== id) fetch(nextProps.id);
}
// We just render our status inside a column with its
// ancestors and decendants.
render () {
const { id, ancestors, descendants } = this.props;
return (
<ScrollContainer scrollKey='thread'>
<div className='glitch glitch__list__conversation scrollable'>
{ancestors && ancestors.size > 0 ? (
ancestors.map(
ancestor => <StatusContainer key={ancestor} id={ancestor} route />
)
) : null}
<StatusContainer key={id} id={id} detailed route />
{descendants && descendants.size > 0 ? (
descendants.map(
descendant => <StatusContainer key={descendant} id={descendant} route />
)
) : null}
</div>
</ScrollContainer>
);
}
};

0
app/javascript/glitch/components/list/conversation/style.scss Normal file
View File

0
app/javascript/glitch/components/column/notif_cleaning_widget/container.js → app/javascript/glitch/components/list/notif_cleaning_widget/container.js
View File

0
app/javascript/glitch/components/column/notif_cleaning_widget/notification_purge_buttons.js → app/javascript/glitch/components/list/notif_cleaning_widget/notification_purge_buttons.js
View File

209
app/javascript/glitch/components/list/statuses/index.js Normal file
View File

@ -0,0 +1,209 @@
import React from 'react';
import ImmutablePropTypes from 'react-immutable-proptypes';
import ImmutablePureComponent from 'react-immutable-pure-component';
import { ScrollContainer } from 'react-router-scroll';
import PropTypes from 'prop-types';
import IntersectionObserverWrapper from 'mastodon/features/ui/util/intersection_observer_wrapper';
import { throttle } from 'lodash';
import { defineMessages, injectIntl } from 'react-intl';
import StatusContainer from 'glitch/components/status/container';
import CommonButton from 'glitch/components/common/button';
const messages = defineMessages({
load_more: { id: 'status.load_more', defaultMessage: 'Load more' },
});
@injectIntl
export default class ListStatuses extends ImmutablePureComponent {
static propTypes = {
scrollKey: PropTypes.string.isRequired,
statusIds: ImmutablePropTypes.list.isRequired,
onScrollToBottom: PropTypes.func,
onScrollToTop: PropTypes.func,
onScroll: PropTypes.func,
trackScroll: PropTypes.bool,
shouldUpdateScroll: PropTypes.func,
isLoading: PropTypes.bool,
hasMore: PropTypes.bool,
prepend: PropTypes.node,
emptyMessage: PropTypes.node,
};
static defaultProps = {
trackScroll: true,
};
state = {
currentDetail: null,
};
intersectionObserverWrapper = new IntersectionObserverWrapper();
handleScroll = throttle(() => {
if (this.node) {
const { scrollTop, scrollHeight, clientHeight } = this.node;
const offset = scrollHeight - scrollTop - clientHeight;
this._oldScrollPosition = scrollHeight - scrollTop;
if (400 > offset && this.props.onScrollToBottom && !this.props.isLoading) {
this.props.onScrollToBottom();
} else if (scrollTop < 100 && this.props.onScrollToTop) {
this.props.onScrollToTop();
} else if (this.props.onScroll) {
this.props.onScroll();
}
}
}, 150, {
trailing: true,
});
componentDidMount () {
this.attachScrollListener();
this.attachIntersectionObserver();
// Handle initial scroll posiiton
this.handleScroll();
}
componentDidUpdate (prevProps) {
// Reset the scroll position when a new toot comes in in order not to
// jerk the scrollbar around if you're already scrolled down the page.
if (prevProps.statusIds.size < this.props.statusIds.size && this._oldScrollPosition && this.node.scrollTop > 0) {
if (prevProps.statusIds.first() !== this.props.statusIds.first()) {
let newScrollTop = this.node.scrollHeight - this._oldScrollPosition;
if (this.node.scrollTop !== newScrollTop) {
this.node.scrollTop = newScrollTop;
}
} else {
this._oldScrollPosition = this.node.scrollHeight - this.node.scrollTop;
}
}
}
componentWillUnmount () {
this.detachScrollListener();
this.detachIntersectionObserver();
}
attachIntersectionObserver () {
this.intersectionObserverWrapper.connect({
root: this.node,
rootMargin: '300% 0px',
});
}
detachIntersectionObserver () {
this.intersectionObserverWrapper.disconnect();
}
attachScrollListener () {
this.node.addEventListener('scroll', this.handleScroll);
}
detachScrollListener () {
this.node.removeEventListener('scroll', this.handleScroll);
}
setRef = (c) => {
this.node = c;
}
handleLoadMore = (e) => {
e.preventDefault();
this.props.onScrollToBottom();
}
handleKeyDown = (e) => {
if (['PageDown', 'PageUp'].includes(e.key) || (e.ctrlKey && ['End', 'Home'].includes(e.key))) {
const article = (() => {
switch (e.key) {
case 'PageDown':
return e.target.nodeName === 'ARTICLE' && e.target.nextElementSibling;
case 'PageUp':
return e.target.nodeName === 'ARTICLE' && e.target.previousElementSibling;
case 'End':
return this.node.querySelector('[role="feed"] > article:last-of-type');
case 'Home':
return this.node.querySelector('[role="feed"] > article:first-of-type');
default:
return null;
}
})();
if (article) {
e.preventDefault();
article.focus();
article.scrollIntoView();
}
}
}
handleSetDetail = (id) => {
this.setState({ currentDetail : id });
}
render () {
const {
handleKeyDown,
handleLoadMore,
handleSetDetail,
intersectionObserverWrapper,
setRef,
} = this;
const { statusIds, scrollKey, trackScroll, shouldUpdateScroll, isLoading, hasMore, prepend, emptyMessage, intl } = this.props;
const { currentDetail } = this.state;
const loadMore = (
<CommonButton
className='load-more'
disabled={isLoading || statusIds.size > 0 && hasMore}
onClick={handleLoadMore}
showTitle
title={intl.formatMessage(messages.load_more)}
/>
);
let scrollableArea = null;
if (isLoading || statusIds.size > 0 || !emptyMessage) {
scrollableArea = (
<div className='scrollable' ref={setRef}>
<div role='feed' className='status-list' onKeyDown={handleKeyDown}>
{prepend}
{statusIds.map((statusId, index) => (
<StatusContainer
key={statusId}
id={statusId}
index={index}
listLength={statusIds.size}
detailed={currentDetail === statusId}
setDetail={handleSetDetail}
intersectionObserverWrapper={intersectionObserverWrapper}
/>
))}
{loadMore}
</div>
</div>
);
} else {
scrollableArea = (
<div className='empty-column-indicator' ref={setRef}>
{emptyMessage}
</div>
);
}
if (trackScroll) {
return (
<ScrollContainer scrollKey={scrollKey} shouldUpdateScroll={shouldUpdateScroll}>
{scrollableArea}
</ScrollContainer>
);
} else {
return scrollableArea;
}
}
}

12
app/javascript/glitch/components/notification/index.js
View File

@ -8,6 +8,7 @@ import ImmutablePureComponent from 'react-immutable-pure-component';
// Our imports //
import StatusContainer from '../status/container';
import NotificationFollow from './follow';
import NotificationOverlayContainer from './overlay/container';
export default class Notification extends ImmutablePureComponent {
@ -65,6 +66,9 @@ export default class Notification extends ImmutablePureComponent {
render () {
const { notification } = this.props;
return (
<div class='status'>
{(() => {
switch (notification.get('type')) {
case 'follow':
return this.renderFollow(notification);
@ -74,9 +78,13 @@ export default class Notification extends ImmutablePureComponent {
return this.renderFavourite(notification);
case 'reblog':
return this.renderReblog(notification);
}
default:
return null;
}
})()}
<NotificationOverlayContainer notification={notification} />
</div>
);
}
}

48
app/javascript/glitch/components/notification/overlay/container.js
View File

@ -1,40 +1,34 @@
/*
// <NotificationOverlayContainer>
// ==============================
`<NotificationOverlayContainer>`
=========================
This container connects `<NotificationOverlay>`s to the Redux store.
// For code documentation, please see:
// https://glitch-soc.github.io/docs/javascript/glitch/notification/overlay/container
*/
// * * * * * * * //
// * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
/*
// Imports
// -------
Imports:
--------
*/
// Package imports //
// Package imports.
import { connect } from 'react-redux';
// Our imports //
// Mastodon imports.
import { markNotificationForDelete } from 'mastodon/actions/notifications';
// Our imports.
import NotificationOverlay from './notification_overlay';
import { markNotificationForDelete } from '../../../../mastodon/actions/notifications';
// * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
// State mapping
// -------------
/*
const mapStateToProps = state => ({
show: state.getIn(['notifications', 'cleaningMode']),
});
Dispatch mapping:
-----------------
The `mapDispatchToProps()` function maps dispatches to our store to the
various props of our component. We only need to provide a dispatch for
deleting notifications.
*/
// Dispatch mapping
// ----------------
const mapDispatchToProps = dispatch => ({
onMarkForDelete(id, yes) {
@ -42,8 +36,4 @@ const mapDispatchToProps = dispatch => ({
},
});
const mapStateToProps = state => ({
show: state.getIn(['notifications', 'cleaningMode']),
});
export default connect(mapStateToProps, mapDispatchToProps)(NotificationOverlay);

4
app/javascript/glitch/components/notification/overlay/notification_overlay.js
View File

@ -10,10 +10,6 @@ import PropTypes from 'prop-types';
import ImmutablePureComponent from 'react-immutable-pure-component';
import { defineMessages, injectIntl } from 'react-intl';
// Mastodon imports //
// * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
const messages = defineMessages({
markForDeletion: { id: 'notification.markForDeletion', defaultMessage: 'Mark for deletion' },
});

160
app/javascript/glitch/components/status/action_bar.js
View File

@ -1,160 +0,0 @@
// Package imports //
import React from 'react';
import ImmutablePropTypes from 'react-immutable-proptypes';
import PropTypes from 'prop-types';
import { defineMessages, injectIntl } from 'react-intl';
import ImmutablePureComponent from 'react-immutable-pure-component';
// Mastodon imports //
import RelativeTimestamp from '../../../mastodon/components/relative_timestamp';
import IconButton from '../../../mastodon/components/icon_button';
import DropdownMenu from '../../../mastodon/components/dropdown_menu';
const messages = defineMessages({
delete: { id: 'status.delete', defaultMessage: 'Delete' },
mention: { id: 'status.mention', defaultMessage: 'Mention @{name}' },
mute: { id: 'account.mute', defaultMessage: 'Mute @{name}' },
block: { id: 'account.block', defaultMessage: 'Block @{name}' },
reply: { id: 'status.reply', defaultMessage: 'Reply' },
replyAll: { id: 'status.replyAll', defaultMessage: 'Reply to thread' },
reblog: { id: 'status.reblog', defaultMessage: 'Boost' },
cannot_reblog: { id: 'status.cannot_reblog', defaultMessage: 'This post cannot be boosted' },
favourite: { id: 'status.favourite', defaultMessage: 'Favourite' },
open: { id: 'status.open', defaultMessage: 'Expand this status' },
report: { id: 'status.report', defaultMessage: 'Report @{name}' },
muteConversation: { id: 'status.mute_conversation', defaultMessage: 'Mute conversation' },
unmuteConversation: { id: 'status.unmute_conversation', defaultMessage: 'Unmute conversation' },
});
@injectIntl
export default class StatusActionBar extends ImmutablePureComponent {
static contextTypes = {
router: PropTypes.object,
};
static propTypes = {
status: ImmutablePropTypes.map.isRequired,
onReply: PropTypes.func,
onFavourite: PropTypes.func,
onReblog: PropTypes.func,
onDelete: PropTypes.func,
onMention: PropTypes.func,
onMute: PropTypes.func,
onBlock: PropTypes.func,
onReport: PropTypes.func,
onMuteConversation: PropTypes.func,
me: PropTypes.number,
withDismiss: PropTypes.bool,
intl: PropTypes.object.isRequired,
};
// Avoid checking props that are functions (and whose equality will always
// evaluate to false. See react-immutable-pure-component for usage.
updateOnProps = [
'status',
'me',
'withDismiss',
]
handleReplyClick = () => {
this.props.onReply(this.props.status, this.context.router.history);
}
handleFavouriteClick = () => {
this.props.onFavourite(this.props.status);
}
handleReblogClick = (e) => {
this.props.onReblog(this.props.status, e);
}
handleDeleteClick = () => {
this.props.onDelete(this.props.status);
}
handleMentionClick = () => {
this.props.onMention(this.props.status.get('account'), this.context.router.history);
}
handleMuteClick = () => {
this.props.onMute(this.props.status.get('account'));
}
handleBlockClick = () => {
this.props.onBlock(this.props.status.get('account'));
}
handleOpen = () => {
this.context.router.history.push(`/statuses/${this.props.status.get('id')}`);
}
handleReport = () => {
this.props.onReport(this.props.status);
}
handleConversationMuteClick = () => {
this.props.onMuteConversation(this.props.status);
}
render () {
const { status, me, intl, withDismiss } = this.props;
const reblogDisabled = status.get('visibility') === 'private' || status.get('visibility') === 'direct';
const mutingConversation = status.get('muted');
const anonymousAccess = !me;
let menu = [];
let reblogIcon = 'retweet';
let replyIcon;
let replyTitle;
menu.push({ text: intl.formatMessage(messages.open), action: this.handleOpen });
menu.push(null);
if (withDismiss) {
menu.push({ text: intl.formatMessage(mutingConversation ? messages.unmuteConversation : messages.muteConversation), action: this.handleConversationMuteClick });
menu.push(null);
}
if (status.getIn(['account', 'id']) === me) {
menu.push({ text: intl.formatMessage(messages.delete), action: this.handleDeleteClick });
} else {
menu.push({ text: intl.formatMessage(messages.mention, { name: status.getIn(['account', 'username']) }), action: this.handleMentionClick });
menu.push(null);
menu.push({ text: intl.formatMessage(messages.mute, { name: status.getIn(['account', 'username']) }), action: this.handleMuteClick });
menu.push({ text: intl.formatMessage(messages.block, { name: status.getIn(['account', 'username']) }), action: this.handleBlockClick });
menu.push({ text: intl.formatMessage(messages.report, { name: status.getIn(['account', 'username']) }), action: this.handleReport });
}
/*
if (status.get('visibility') === 'direct') {
reblogIcon = 'envelope';
} else if (status.get('visibility') === 'private') {
reblogIcon = 'lock';
}
*/
if (status.get('in_reply_to_id', null) === null) {
replyIcon = 'reply';
replyTitle = intl.formatMessage(messages.reply);
} else {
replyIcon = 'reply-all';
replyTitle = intl.formatMessage(messages.replyAll);
}
return (
<div className='status__action-bar'>
<IconButton className='status__action-bar-button' disabled={anonymousAccess} title={replyTitle} icon={replyIcon} onClick={this.handleReplyClick} />
<IconButton className='status__action-bar-button' disabled={anonymousAccess || reblogDisabled} active={status.get('reblogged')} title={reblogDisabled ? intl.formatMessage(messages.cannot_reblog) : intl.formatMessage(messages.reblog)} icon={reblogIcon} onClick={this.handleReblogClick} />
<IconButton className='status__action-bar-button star-icon' disabled={anonymousAccess} animate active={status.get('favourited')} title={intl.formatMessage(messages.favourite)} icon='star' onClick={this.handleFavouriteClick} />
<div className='status__action-bar-dropdown'>
<DropdownMenu items={menu} disabled={anonymousAccess} icon='ellipsis-h' size={18} direction='right' ariaLabel='More' />
</div>
<a href={status.get('url')} className='status__relative-time' target='_blank' rel='noopener'><RelativeTimestamp timestamp={status.get('created_at')} /></a>
</div>
);
}
}

268
app/javascript/glitch/components/status/action_bar/index.js Normal file
View File

@ -0,0 +1,268 @@
// <StatusActionBar>
// ========
// For code documentation, please see:
// https://glitch-soc.github.io/docs/javascript/glitch/status/action_bar
// For more information, please contact:
// @kibi@glitch.social
// * * * * * * * //
// Imports
// -------
// Package imports.
import PropTypes from 'prop-types';
import React from 'react';
import ImmutablePropTypes from 'react-immutable-proptypes';
import ImmutablePureComponent from 'react-immutable-pure-component';
import { defineMessages } from 'react-intl';
// Mastodon imports.
import DropdownMenuContainer from 'mastodon/containers/dropdown_menu_container';
// Our imports.
import CommonButton from 'glitch/components/common/button';
// Stylesheet imports.
import './style';
// * * * * * * * //
// Initial setup
// -------------
// Holds our localization messages.
const messages = defineMessages({
delete:
{ id: 'status.delete', defaultMessage: 'Delete' },
mention:
{ id: 'status.mention', defaultMessage: 'Mention @{name}' },
mute:
{ id: 'account.mute', defaultMessage: 'Mute @{name}' },
block:
{ id: 'account.block', defaultMessage: 'Block @{name}' },
reply:
{ id: 'status.reply', defaultMessage: 'Reply' },
replyAll:
{ id: 'status.replyAll', defaultMessage: 'Reply to thread' },
reblog:
{ id: 'status.reblog', defaultMessage: 'Boost' },
cannot_reblog:
{ id: 'status.cannot_reblog', defaultMessage: 'This post cannot be boosted' },
favourite:
{ id: 'status.favourite', defaultMessage: 'Favourite' },
open:
{ id: 'status.open', defaultMessage: 'Expand this status' },
report:
{ id: 'status.report', defaultMessage: 'Report @{name}' },
muteConversation:
{ id: 'status.mute_conversation', defaultMessage: 'Mute conversation' },
unmuteConversation:
{ id: 'status.unmute_conversation', defaultMessage: 'Unmute conversation' },
share:
{ id: 'status.share', defaultMessage: 'Share' },
more:
{ id: 'status.more', defaultMessage: 'More' },
});
// * * * * * * * //
// The component
// -------------
export default class StatusActionBar extends ImmutablePureComponent {
// Props.
static propTypes = {
detailed: PropTypes.bool,
handler: PropTypes.objectOf(PropTypes.func).isRequired,
history: PropTypes.object,
intl: PropTypes.object.isRequired,
me: PropTypes.number,
status: ImmutablePropTypes.map.isRequired,
};
// These handle all of our actions.
handleReplyClick = () => {
const { handler, history, status } = this.props;
handler.reply(status, { history }); // hack
}
handleFavouriteClick = () => {
const { handler, status } = this.props;
handler.favourite(status);
}
handleReblogClick = (e) => {
const { handler, status } = this.props;
handler.reblog(status, e.shiftKey);
}
handleDeleteClick = () => {
const { handler, status } = this.props;
handler.delete(status);
}
handleMentionClick = () => {
const { handler, history, status } = this.props;
handler.mention(status.get('account'), { history }); // hack
}
handleMuteClick = () => {
const { handler, status } = this.props;
handler.mute(status.get('account'));
}
handleBlockClick = () => {
const { handler, status } = this.props;
handler.block(status.get('account'));
}
handleOpen = () => {
const { history, status } = this.props;
history.push(`/statuses/${status.get('id')}`);
}
handleReport = () => {
const { handler, status } = this.props;
handler.report(status);
}
handleShare = () => {
const { status } = this.props;
navigator.share({
text: status.get('search_index'),
url: status.get('url'),
});
}
handleConversationMuteClick = () => {
const { handler, status } = this.props;
handler.muteConversation(status);
}
// Renders our component.
render () {
const {
handleBlockClick,
handleConversationMuteClick,
handleDeleteClick,
handleFavouriteClick,
handleMentionClick,
handleMuteClick,
handleOpen,
handleReblogClick,
handleReplyClick,
handleReport,
handleShare,
} = this;
const { detailed, intl, me, status } = this.props;
const account = status.get('account');
const reblogDisabled = status.get('visibility') === 'private' || status.get('visibility') === 'direct';
const reblogTitle = reblogDisabled ? intl.formatMessage(messages.cannot_reblog) : intl.formatMessage(messages.reblog);
const mutingConversation = status.get('muted');
const anonymousAccess = !me;
let menu = [];
let replyIcon;
let replyTitle;
// This builds our menu.
if (!detailed) {
menu.push({
text: intl.formatMessage(messages.open),
action: handleOpen,
});
menu.push(null);
}
menu.push({
text: intl.formatMessage(mutingConversation ? messages.unmuteConversation : messages.muteConversation),
action: handleConversationMuteClick,
});
menu.push(null);
if (account.get('id') === me) {
menu.push({
text: intl.formatMessage(messages.delete),
action: handleDeleteClick,
});
} else {
menu.push({
text: intl.formatMessage(messages.mention, {
name: account.get('username'),
}),
action: handleMentionClick,
});
menu.push(null);
menu.push({
text: intl.formatMessage(messages.mute, {
name: account.get('username'),
}),
action: handleMuteClick,
});
menu.push({
text: intl.formatMessage(messages.block, {
name: account.get('username'),
}),
action: handleBlockClick,
});
menu.push({
text: intl.formatMessage(messages.report, {
name: account.get('username'),
}),
action: handleReport,
});
}
// This selects our reply icon.
if (status.get('in_reply_to_id', null) === null) {
replyIcon = 'reply';
replyTitle = intl.formatMessage(messages.reply);
} else {
replyIcon = 'reply-all';
replyTitle = intl.formatMessage(messages.replyAll);
}
// Now we can render the component.
return (
<div className='glitch glitch__status__action-bar'>
<CommonButton
className='action-bar\button'
disabled={anonymousAccess}
title={replyTitle}
icon={replyIcon}
onClick={handleReplyClick}
/>
<CommonButton
className='action-bar\button'
disabled={anonymousAccess || reblogDisabled}
active={status.get('reblogged')}
title={reblogTitle}
icon='retweet'
onClick={handleReblogClick}
/>
<CommonButton
className='action-bar\button'
disabled={anonymousAccess}
animate
active={status.get('favourited')}
title={intl.formatMessage(messages.favourite)}
icon='star'
onClick={handleFavouriteClick}
/>
{
'share' in navigator ? (
<CommonButton
className='action-bar\button'
disabled={status.get('visibility') !== 'public'}
title={intl.formatMessage(messages.share)}
icon='share-alt'
onClick={handleShare}
/>
) : null
}
<div className='action-bar\button'>
<DropdownMenuContainer
items={menu}
disabled={anonymousAccess}
icon='ellipsis-h'
size={18}
direction='right'
aria-label={intl.formatMessage(messages.more)}
/>
</div>
</div>
);
}
}

28
app/javascript/glitch/components/status/action_bar/style.scss Normal file
View File

@ -0,0 +1,28 @@
@import 'variables';
.glitch.glitch__status__action-bar {
display: block;
height: 1.25em;
font-size: 1.25em;
line-height: 1;
overflow-x: auto;
overflow-y: hidden;
white-space: nowrap;
// Dropdown style override for centering on the icon
.dropdown--active {
position: relative;
.dropdown__content.dropdown__right {
left: calc(50% + 3px);
right: initial;
transform: translate(-50%, 0);
top: 22px;
}
&::after {
right: 1px;
bottom: -2px;
}
}
}

277
app/javascript/glitch/components/status/container.js
View File

@ -1,73 +1,64 @@
/*
// <StatusContainer>
// =================
`<StatusContainer>`
===================
// For code documentation, please see:
// https://glitch-soc.github.io/docs/javascript/glitch/status/container
Original file by @gargron@mastodon.social et al as part of
tootsuite/mastodon. Documentation by @kibi@glitch.social. The code
detecting reblogs has been moved here from <Status>.
// For more information, please contact:
// @kibi@glitch.social
*/
// * * * * * * * //
/* * * * */
// Imports
// -------
/*
Imports:
--------
*/
// Package imports //
// Package imports.
import React from 'react';
import { connect } from 'react-redux';
import {
defineMessages,
injectIntl,
FormattedMessage,
} from 'react-intl';
import { connect } from 'react-redux';
import { withRouter } from 'react-router';
import { createStructuredSelector } from 'reselect';
// Mastodon imports //
import { makeGetStatus } from '../../../mastodon/selectors';
// Mastodon imports.
import { blockAccount, muteAccount } from 'mastodon/actions/accounts';
import {
replyCompose,
mentionCompose,
} from '../../../mastodon/actions/compose';
} from 'mastodon/actions/compose';
import {
reblog,
favourite,
unreblog,
unfavourite,
} from '../../../mastodon/actions/interactions';
import {
blockAccount,
muteAccount,
} from '../../../mastodon/actions/accounts';
} from 'mastodon/actions/interactions';
import { openModal } from 'mastodon/actions/modal';
import { initReport } from 'mastodon/actions/reports';
import {
muteStatus,
unmuteStatus,
deleteStatus,
} from '../../../mastodon/actions/statuses';
import { initReport } from '../../../mastodon/actions/reports';
import { openModal } from '../../../mastodon/actions/modal';
} from 'mastodon/actions/statuses';
import { fetchStatusCard } from 'mastodon/actions/cards';
// Our imports //
// Our imports.
import Status from '.';
import makeStatusSelector from 'glitch/selectors/status';
/* * * * */
// * * * * * * * //
/*
Inital setup:
-------------
The `messages` constant is used to define any messages that we will
need in our component. In our case, these are the various confirmation
messages used with statuses.
*/
// Initial setup
// -------------
// Localization messages.
const messages = defineMessages({
blockConfirm : {
id : 'confirmations.block.confirm',
defaultMessage : 'Block',
},
deleteConfirm : {
id : 'confirmations.delete.confirm',
defaultMessage : 'Delete',
@ -76,125 +67,68 @@ const messages = defineMessages({
id : 'confirmations.delete.message',
defaultMessage : 'Are you sure you want to delete this status?',
},
blockConfirm : {
id : 'confirmations.block.confirm',
defaultMessage : 'Block',
},
muteConfirm : {
id : 'confirmations.mute.confirm',
defaultMessage : 'Mute',
},
});
/* * * * */
// * * * * * * * //
/*
State mapping:
--------------
The `mapStateToProps()` function maps various state properties to the
props of our component. We wrap this in a `makeMapStateToProps()`
function to give us closure and preserve `getStatus()` across function
calls.
*/
// State mapping
// -------------
// We wrap our `mapStateToProps()` function in a
// `makeMapStateToProps()` to give us a closure and preserve
// `makeGetStatus()`'s value.
const makeMapStateToProps = () => {
const getStatus = makeGetStatus();
const statusSelector = makeStatusSelector();
const mapStateToProps = (state, ownProps) => {
let status = getStatus(state, ownProps.id);
// State mapping.
return (state, ownProps) => {
let status = statusSelector(state, ownProps.id);
let reblogStatus = status.get('reblog', null);
let account = undefined;
let comrade = undefined;
let prepend = undefined;
/*
Here we process reblogs. If our status is a reblog, then we create a
`prependMessage` to pass along to our `<Status>` along with the
reblogger's `account`, and set `coreStatus` (the one we will actually
render) to the status which has been reblogged.
*/
// Processes reblogs and generates their prepend.
if (reblogStatus !== null && typeof reblogStatus === 'object') {
account = status.get('account');
comrade = status.get('account');
status = reblogStatus;
prepend = 'reblogged_by';
prepend = 'reblogged';
}
/*
Here are the props we pass to `<Status>`.
*/
// This is what we pass to <Status>.
return {
status : status,
account : account || ownProps.account,
autoPlayGif: state.getIn(['meta', 'auto_play_gif']),
comrade: comrade || ownProps.comrade,
deleteModal: state.getIn(['meta', 'delete_modal']),
me: state.getIn(['meta', 'me']),
settings : state.get('local_settings'),
prepend: prepend || ownProps.prepend,
reblogModal: state.getIn(['meta', 'boost_modal']),
deleteModal : state.getIn(['meta', 'delete_modal']),
autoPlayGif : state.getIn(['meta', 'auto_play_gif']),
settings: state.get('local_settings'),
status: status,
};
};
};
return mapStateToProps;
};
// * * * * * * * //
/* * * * */
// Dispatch mapping
// ----------------
/*
Dispatch mapping:
-----------------
The `mapDispatchToProps()` function maps dispatches to our store to the
various props of our component. We need to provide dispatches for all
of the things you can do with a status: reply, reblog, favourite, et
cetera.
For a few of these dispatches, we open up confirmation modals; the rest
just immediately execute their corresponding actions.
*/
const mapDispatchToProps = (dispatch, { intl }) => ({
onReply (status, router) {
dispatch(replyCompose(status, router));
const makeMapDispatchToProps = (dispatch) => {
const dispatchSelector = createStructuredSelector({
handler: ({ intl }) => ({
block (account) {
dispatch(openModal('CONFIRM', {
message: <FormattedMessage id='confirmations.block.message' defaultMessage='Are you sure you want to block {name}?' values={{ name: <strong>@{account.get('acct')}</strong> }} />,
confirm: intl.formatMessage(messages.blockConfirm),
onConfirm: () => dispatch(blockAccount(account.get('id'))),
}));
},
onModalReblog (status) {
dispatch(reblog(status));
},
onReblog (status, e) {
if (status.get('reblogged')) {
dispatch(unreblog(status));
} else {
if (e.shiftKey || !this.reblogModal) {
this.onModalReblog(status);
} else {
dispatch(openModal('BOOST', { status, onReblog: this.onModalReblog }));
}
}
},
onFavourite (status) {
if (status.get('favourited')) {
dispatch(unfavourite(status));
} else {
dispatch(favourite(status));
}
},
onDelete (status) {
if (!this.deleteModal) {
delete (status) {
if (!this.deleteModal) { // TODO: THIS IS BORKN (this refers to handler)
dispatch(deleteStatus(status.get('id')));
} else {
dispatch(openModal('CONFIRM', {
@ -204,48 +138,75 @@ const mapDispatchToProps = (dispatch, { intl }) => ({
}));
}
},
onMention (account, router) {
favourite (status) {
if (status.get('favourited')) {
dispatch(unfavourite(status));
} else {
dispatch(favourite(status));
}
},
fetchCard (status) {
dispatch(fetchStatusCard(status.get('id')));
},
mention (account, router) {
dispatch(mentionCompose(account, router));
},
onOpenMedia (media, index) {
dispatch(openModal('MEDIA', { media, index }));
modalReblog (status) {
dispatch(reblog(status));
},
onOpenVideo (media, time) {
dispatch(openModal('VIDEO', { media, time }));
},
onBlock (account) {
dispatch(openModal('CONFIRM', {
message: <FormattedMessage id='confirmations.block.message' defaultMessage='Are you sure you want to block {name}?' values={{ name: <strong>@{account.get('acct')}</strong> }} />,
confirm: intl.formatMessage(messages.blockConfirm),
onConfirm: () => dispatch(blockAccount(account.get('id'))),
}));
},
onReport (status) {
dispatch(initReport(status.get('account'), status));
},
onMute (account) {
mute (account) {
dispatch(openModal('CONFIRM', {
message: <FormattedMessage id='confirmations.mute.message' defaultMessage='Are you sure you want to mute {name}?' values={{ name: <strong>@{account.get('acct')}</strong> }} />,
confirm: intl.formatMessage(messages.muteConfirm),
onConfirm: () => dispatch(muteAccount(account.get('id'))),
}));
},
onMuteConversation (status) {
muteConversation (status) {
if (status.get('muted')) {
dispatch(unmuteStatus(status.get('id')));
} else {
dispatch(muteStatus(status.get('id')));
}
},
openMedia (media, index) {
dispatch(openModal('MEDIA', { media, index }));
},
openVideo (media, time) {
dispatch(openModal('VIDEO', { media, time }));
},
reblog (status, withShift) {
if (status.get('reblogged')) {
dispatch(unreblog(status));
} else {
if (withShift || !this.reblogModal) { // TODO: THIS IS BORKN (this refers to handler)
this.modalReblog(status);
} else {
dispatch(openModal('BOOST', { status, onReblog: this.modalReblog }));
}
}
},
reply (status, router) {
dispatch(replyCompose(status, router));
},
report (status) {
dispatch(initReport(status.get('account'), status));
},
}),
});
return (_, ownProps) => dispatchSelector(ownProps);
};
// * * * * * * * //
// Connecting
// ----------
// `connect` will only update when its resultant props change. So
// `withRouter` won't get called unless an update is already planned.
// This is intended behaviour because we only care about the (mutable)
// `history` object.
export default injectIntl(
connect(makeMapStateToProps, mapDispatchToProps)(Status)
connect(makeMapStateToProps, makeMapDispatchToProps)(
withRouter(Status)
)
);

247
app/javascript/glitch/components/status/content.js
View File

@ -1,247 +0,0 @@
// Package imports //
import React from 'react';
import ImmutablePropTypes from 'react-immutable-proptypes';
import escapeTextContentForBrowser from 'escape-html';
import PropTypes from 'prop-types';
import { FormattedMessage } from 'react-intl';
import classnames from 'classnames';
// Mastodon imports //
import emojify from '../../../mastodon/emoji';
import { isRtl } from '../../../mastodon/rtl';
import Permalink from '../../../mastodon/components/permalink';
export default class StatusContent extends React.PureComponent {
static propTypes = {
status: ImmutablePropTypes.map.isRequired,
expanded: PropTypes.oneOf([true, false, null]),
setExpansion: PropTypes.func,
onHeightUpdate: PropTypes.func,
media: PropTypes.element,
mediaIcon: PropTypes.string,
parseClick: PropTypes.func,
disabled: PropTypes.bool,
};
state = {
hidden: true,
};
componentDidMount () {
const node = this.node;
const links = node.querySelectorAll('a');
for (var i = 0; i < links.length; ++i) {
let link = links[i];
let mention = this.props.status.get('mentions').find(item => link.href === item.get('url'));
if (mention) {
link.addEventListener('click', this.onMentionClick.bind(this, mention), false);
link.setAttribute('title', mention.get('acct'));
} else if (link.textContent[0] === '#' || (link.previousSibling && link.previousSibling.textContent && link.previousSibling.textContent[link.previousSibling.textContent.length - 1] === '#')) {
link.addEventListener('click', this.onHashtagClick.bind(this, link.text), false);
} else {
link.addEventListener('click', this.onLinkClick.bind(this), false);
link.setAttribute('title', link.href);
}
link.setAttribute('target', '_blank');
link.setAttribute('rel', 'noopener');
}
}
componentDidUpdate () {
if (this.props.onHeightUpdate) {
this.props.onHeightUpdate();
}
}
onLinkClick = (e) => {
if (this.props.expanded === false) {
if (this.props.parseClick) this.props.parseClick(e);
}
}
onMentionClick = (mention, e) => {
if (this.props.parseClick) {
this.props.parseClick(e, `/accounts/${mention.get('id')}`);
}
}
onHashtagClick = (hashtag, e) => {
hashtag = hashtag.replace(/^#/, '').toLowerCase();
if (this.props.parseClick) {
this.props.parseClick(e, `/timelines/tag/${hashtag}`);
}
}
handleMouseDown = (e) => {
this.startXY = [e.clientX, e.clientY];
}
handleMouseUp = (e) => {
const { parseClick } = this.props;
if (!this.startXY) {
return;
}
const [ startX, startY ] = this.startXY;
const [ deltaX, deltaY ] = [Math.abs(e.clientX - startX), Math.abs(e.clientY - startY)];
if (e.target.localName === 'button' || e.target.localName === 'a' || (e.target.parentNode && (e.target.parentNode.localName === 'button' || e.target.parentNode.localName === 'a'))) {
return;
}
if (deltaX + deltaY < 5 && e.button === 0 && parseClick) {
parseClick(e);
}
this.startXY = null;
}
handleSpoilerClick = (e) => {
e.preventDefault();
if (this.props.setExpansion) {
this.props.setExpansion(this.props.expanded ? null : true);
} else {
this.setState({ hidden: !this.state.hidden });
}
}
setRef = (c) => {
this.node = c;
}
render () {
const {
status,
media,
mediaIcon,
parseClick,
disabled,
} = this.props;
const hidden = (
this.props.setExpansion ?
!this.props.expanded :
this.state.hidden
);
const content = { __html: emojify(status.get('content')) };
const spoilerContent = {
__html: emojify(escapeTextContentForBrowser(
status.get('spoiler_text', '')
)),
};
const directionStyle = { direction: 'ltr' };
const classNames = classnames('status__content', {
'status__content--with-action': parseClick && !disabled,
});
if (isRtl(status.get('search_index'))) {
directionStyle.direction = 'rtl';
}
if (status.get('spoiler_text').length > 0) {
let mentionsPlaceholder = '';
const mentionLinks = status.get('mentions').map(item => (
<Permalink
to={`/accounts/${item.get('id')}`}
href={item.get('url')}
key={item.get('id')}
className='mention'
>
@<span>{item.get('username')}</span>
</Permalink>
)).reduce((aggregate, item) => [...aggregate, item, ' '], []);
const toggleText = hidden ? [
<FormattedMessage
id='status.show_more'
defaultMessage='Show more'
key='0'
/>,
mediaIcon ? (
<i
className={
`fa fa-fw fa-${mediaIcon} status__content__spoiler-icon`
}
aria-hidden='true'
key='1'
/>
) : null,
] : [
<FormattedMessage
id='status.show_less'
defaultMessage='Show less'
key='0'
/>,
];
if (hidden) {
mentionsPlaceholder = <div>{mentionLinks}</div>;
}
return (
<div className={classNames} ref={this.setRef}>
<p
style={{ marginBottom: hidden && status.get('mentions').isEmpty() ? '0px' : null }}
onMouseDown={this.handleMouseDown}
onMouseUp={this.handleMouseUp}
>
<span dangerouslySetInnerHTML={spoilerContent} />
{' '}
<button tabIndex='0' className='status__content__spoiler-link' onClick={this.handleSpoilerClick}>
{toggleText}
</button>
</p>
{mentionsPlaceholder}
<div className={`status__content__spoiler ${!hidden ? 'status__content__spoiler--visible' : ''}`}>
<div
style={directionStyle}
onMouseDown={this.handleMouseDown}
onMouseUp={this.handleMouseUp}
dangerouslySetInnerHTML={content}
/>
{media}
</div>
</div>
);
} else if (parseClick) {
return (
<div
ref={this.setRef}
className={classNames}
style={directionStyle}
>
<div
onMouseDown={this.handleMouseDown}
onMouseUp={this.handleMouseUp}
dangerouslySetInnerHTML={content}
/>
{media}
</div>
);
} else {
return (
<div
ref={this.setRef}
className='status__content'
style={directionStyle}
>
<div dangerouslySetInnerHTML={content} />
{media}
</div>
);
}
}
}

190
app/javascript/glitch/components/status/content/card/index.js Normal file
View File

@ -0,0 +1,190 @@
// <StatusContentCard>
// ========
// For code documentation, please see:
// https://glitch-soc.github.io/docs/javascript/glitch/status/content/card
// For more information, please contact:
// @kibi@glitch.social
// * * * * * * * //
// Imports
// -------
// Package imports.
import classNames from 'classnames';
import PropTypes from 'prop-types';
import punycode from 'punycode';
import React from 'react';
import ImmutablePropTypes from 'react-immutable-proptypes';
import ImmutablePureComponent from 'react-immutable-pure-component';
// Mastodon imports.
import emojify from 'mastodon/emoji';
// Our imports.
import CommonLink from 'glitch/components/common/link';
import CommonSeparator from 'glitch/components/common/separator';
// Stylesheet imports.
import './style';
// * * * * * * * //
// Initial setup
// -------------
// Reliably gets the hostname from a URL.
const getHostname = url => {
const parser = document.createElement('a');
parser.href = url;
return parser.hostname;
};
// * * * * * * * //
// The component
// -------------
export default class Card extends ImmutablePureComponent {
// Props.
static propTypes = {
card: ImmutablePropTypes.map.isRequired,
fullwidth: PropTypes.bool,
letterbox: PropTypes.bool,
}
// Rendering.
render () {
const { card, fullwidth, letterbox } = this.props;
let media = null;
let text = null;
let author = null;
let provider = null;
let caption = null;
// This gets all of our card properties.
const authorName = card.get('author_name');
const authorUrl = card.get('author_url');
const description = card.get('description');
const html = card.get('html');
const image = card.get('image');
const providerName = card.get('provider_name');
const providerUrl = card.get('provider_url');
const title = card.get('title');
const type = card.get('type');
const url = card.get('url');
// Sets our class.
const computedClass = classNames('glitch', 'glitch__status__content__card', type, {
_fullwidth: fullwidth,
_letterbox: letterbox,
});
// A card is required to render.
if (!card) return null;
// This generates our card media (image or video).
switch(type) {
case 'photo':
media = (
<CommonLink
className='card\media card\photo'
href={url}
>
<img
alt={title}
src={image}
/>
</CommonLink>
);
break;
case 'video':
media = (
<div
className='card\media card\video'
dangerouslySetInnerHTML={{ __html: html }}
/>
);
break;
}
// If we have at least a title or a description, then we can
// render some textual contents.
if (title || description) {
text = (
<CommonLink
className='card\description'
href={url}
>
{type === 'link' && image ? (
<div className='card\thumbnail'>
<img
alt=''
className='card\image'
src={image}
/>
</div>
) : null}
{title ? (
<h1 className='card\title'>{title}</h1>
) : null}
{emojify(description)}
</CommonLink>
);
}
// This creates links or spans (depending on whether a URL was
// provided) for the card author and provider.
if (authorUrl) {
author = (
<CommonLink
className='card\author card\link'
href={authorUrl}
>
{authorName ? authorName : punycode.toUnicode(getHostname(authorUrl))}
</CommonLink>
);
} else if (authorName) {
author = <span className='card\author'>{authorName}</span>;
}
if (providerUrl) {
provider = (
<CommonLink
className='card\provider card\link'
href={providerUrl}
>
{providerName ? providerName : punycode.toUnicode(getHostname(providerUrl))}
</CommonLink>
);
} else if (providerName) {
provider = <span className='card\provider'>{providerName}</span>;
}
// If we have either the author or the provider, then we can
// render an attachment.
if (author || provider) {
caption = (
<figcaption className='card\caption'>
{author}
<CommonSeparator
className='card\separator'
visible={author && provider}
/>
{provider}
</figcaption>
);
}
// Putting the pieces together and returning.
return (
<figure className={computedClass}>
{media}
{text}
{caption}
</figure>
);
}
}

123
app/javascript/glitch/components/status/content/card/style.scss Normal file
View File

@ -0,0 +1,123 @@
@import 'variables';
.glitch.glitch__content__card {
display: block;
border: thin $glitch-texture-color solid;
border-radius: .35em;
background: $glitch-darker-color;
.card\\caption {
color: $ui-primary-color;
background: $glitch-texture-color;
font-size: (1.25em / 1.35); // approx. .925em
.card\\link { // caption links
color: inherit;
&:hover {
text-decoration: underline;
}
}
}
.card\\media {
display: block;
position: relative;
width: 100%;
height: 13.5em;
/*
Our fallback styles letterbox the media, but we'll expand it to
fill the container if supported. This won't do anything for
`<iframe>`s, but we'll just have to trust them to manage their
own content.
*/
& > * {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
width: auto;
max-width: 100%;
height: auto;
max-height: 100%;
@supports (object-fit: cover) {
width: 100%;
height: 100%;
object-fit: cover;
}
}
}
.card\\description {
color: $ui-secondary-color;
background: $ui-base-color;
.card\\thumbnail {
position: relative;
float: left;
width: 6.75em;
height: 100%;
background: $glitch-darker-color;
& > img {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
width: auto;
max-width: 100%;
height: auto;
max-height: 100%;
@supports (object-fit: cover) {
width: 100%;
height: 100%;
object-fit: cover;
}
}
}
/*
We have to divide the bottom margin of titles by their font-size to
get them to match what we use elsewhere.
*/
.card\\title {
margin-bottom: (.75em * 1.35 / 1.5);
font-size: 1.5em;
line-height: 1.125; // = 1.35 * (1.25 / 1.5)
}
}
&._fullwidth {
margin-left: -.75em;
width: calc(100% + 1.5em);
}
/*
If `letterbox` is specified, then we don't need object-fit (since
we essentially just do a scale-down).
*/
&._letterbox {
.card\\description .card\\thumbnail {
& > img {
width: auto;
height: auto;
object-fit: fill;
}
}
.card\\media {
& > * {
width: auto;
height: auto;
object-fit: fill;
}
}
}
}

191
app/javascript/glitch/components/status/content/gallery/index.js Normal file
View File

@ -0,0 +1,191 @@
// <StatusContentGallery>
// ======================
// For code documentation, please see:
// https://glitch-soc.github.io/docs/javascript/glitch/status/content/gallery
// For more information, please contact:
// @kibi@glitch.social
// * * * * * * * //
// Imports:
// --------
// Package imports.
import classNames from 'classnames';
import PropTypes from 'prop-types';
import React from 'react';
import ImmutablePropTypes from 'react-immutable-proptypes';
import ImmutablePureComponent from 'react-immutable-pure-component';
import { defineMessages, FormattedMessage } from 'react-intl';
// Our imports.
import StatusContentGalleryItem from './item';
import StatusContentGalleryPlayer from './player';
import CommonButton from 'glitch/components/common/button';
// Stylesheet imports.
import './style';
// * * * * * * * //
// Initial setup
// -------------
// Holds our localization messages.
const messages = defineMessages({
hide: { id: 'media_gallery.hide_media', defaultMessage: 'Hide media' },
});
// * * * * * * * //
// The component
// -------------
export default class StatusContentGallery extends ImmutablePureComponent {
// Props and state.
static propTypes = {
attachments: ImmutablePropTypes.list.isRequired,
autoPlayGif: PropTypes.bool,
fullwidth: PropTypes.bool,
height: PropTypes.number.isRequired,
intl: PropTypes.object.isRequired,
letterbox: PropTypes.bool,
onOpenMedia: PropTypes.func.isRequired,
onOpenVideo: PropTypes.func.isRequired,
sensitive: PropTypes.bool,
standalone: PropTypes.bool,
};
state = {
visible: !this.props.sensitive,
};
// Handles media clicks.
handleMediaClick = index => {
const { attachments, onOpenMedia, standalone } = this.props;
if (standalone) return;
onOpenMedia(attachments, index);
}
// Handles showing and hiding.
handleToggle = () => {
this.setState({ visible: !this.state.visible });
}
// Handles video clicks.
handleVideoClick = time => {
const { attachments, onOpenVideo, standalone } = this.props;
if (standalone) return;
onOpenVideo(attachments.get(0), time);
}
// Renders.
render () {
const { handleMediaClick, handleToggle, handleVideoClick } = this;
const {
attachments,
autoPlayGif,
fullwidth,
intl,
letterbox,
sensitive,
} = this.props;
const { visible } = this.state;
const computedClass = classNames('glitch', 'glitch__status__content__gallery', {
_fullwidth: fullwidth,
});
const useableAttachments = attachments.take(4);
let button;
let children;
let size;
// This handles hidden media
if (!this.state.visible) {
button = (
<CommonButton
active
className='gallery\sensitive gallery\curtain'
title={intl.formatMessage(messages.hide)}
onClick={handleToggle}
>
<span className='gallery\message'>
<strong className='gallery\warning'>
{sensitive ? (
<FormattedMessage
id='status.sensitive_warning'
defaultMessage='Sensitive content'
/>
) : (
<FormattedMessage
id='status.media_hidden'
defaultMessage='Media hidden'
/>
)}
</strong>
<FormattedMessage
defaultMessage='Click to view'
id='status.sensitive_toggle'
/>
</span>
</CommonButton>
); // No children with hidden media
// If our media is visible, then we render it alongside the
// "eyeball" button.
} else {
button = (
<CommonButton
className='gallery\sensitive gallery\button'
icon={visible ? 'eye' : 'eye-slash'}
title={intl.formatMessage(messages.hide)}
onClick={handleToggle}
/>
);
// If our first item is a video, we render a player. Otherwise,
// we render our images.
if (attachments.getIn([0, 'type']) === 'video') {
size = 1;
children = (
<StatusContentGalleryPlayer
attachment={attachments.get(0)}
autoPlayGif={autoPlayGif}
intl={intl}
letterbox={letterbox}
onClick={handleVideoClick}
/>
);
} else {
size = useableAttachments.size;
children = useableAttachments.map(
(attachment, index) => (
<StatusContentGalleryItem
attachment={attachment}
autoPlayGif={autoPlayGif}
gallerySize={size}
index={index}
intl={intl}
key={attachment.get('id')}
letterbox={letterbox}
onClick={handleMediaClick}
/>
)
);
}
}
// Renders the gallery.
return (
<div
className={computedClass}
style={{ height: `${this.props.height}px` }}
>
{button}
{children}
</div>
);
}
}

141
app/javascript/glitch/components/status/content/gallery/item/index.js Normal file
View File

@ -0,0 +1,141 @@
// <StatusContentGalleryItem>
// ==============
// For code documentation, please see:
// https://glitch-soc.github.io/docs/javascript/glitch/status/content/gallery/item
// For more information, please contact:
// @kibi@glitch.social
// * * * * * * * //
// Imports:
// --------
// Package imports.
import classNames from 'classnames';
import PropTypes from 'prop-types';
import React from 'react';
import ImmutablePropTypes from 'react-immutable-proptypes';
import ImmutablePureComponent from 'react-immutable-pure-component';
import { defineMessages } from 'react-intl';
// Mastodon imports.
import { isIOS } from 'mastodon/is_mobile';
// Our imports.
import CommonButton from 'glitch/components/common/button';
// Stylesheet imports.
import './style';
// * * * * * * * //
// Initial setup
// -------------
// Holds our localization messages.
const messages = defineMessages({
expand: { id: 'media_gallery.expand', defaultMessage: 'Expand image' },
});
// * * * * * * * //
// The component
// -------------
export default class StatusContentGalleryItem extends ImmutablePureComponent {
// Props.
static propTypes = {
attachment: ImmutablePropTypes.map.isRequired,
autoPlayGif: PropTypes.bool,
gallerySize: PropTypes.number.isRequired,
index: PropTypes.number.isRequired,
intl: PropTypes.object.isRequired,
letterbox: PropTypes.bool,
onClick: PropTypes.func.isRequired,
};
// Click handling.
handleClick = this.props.onClick.bind(this, this.props.index);
// Item rendering.
render () {
const { handleClick } = this;
const {
attachment,
autoPlayGif,
gallerySize,
intl,
letterbox,
} = this.props;
const originalUrl = attachment.get('url');
const previewUrl = attachment.get('preview_url');
const remoteUrl = attachment.get('remote_url');
let thumbnail = '';
const computedClass = classNames('glitch', 'glitch__status__content__gallery__item', {
_letterbox: letterbox,
});
// If our gallery has more than one item, our images only take up
// half the width. We need this for image `sizes` calculations.
let multiplier = gallerySize === 1 ? 1 : .5;
// Image attachments
if (attachment.get('type') === 'image') {
const previewWidth = attachment.getIn(['meta', 'small', 'width']);
const originalWidth = attachment.getIn(['meta', 'original', 'width']);
// This lets the browser conditionally select the preview or
// original image depending on what the rendered size ends up
// being. We, of course, have no way of knowing what the width
// of the gallery will be post–CSS, but we conservatively roll
// with 400px. (Note: Upstream Mastodon used media queries here,
// but because our page layout is user-configurable, we don't
// bother.)
const srcSet = `${originalUrl} ${originalWidth}w, ${previewUrl} ${previewWidth}w`;
const sizes = `${(400 * multiplier) >> 0}px`;
// The image.
thumbnail = (
<img
alt=''
className='item\image'
sizes={sizes}
src={previewUrl}
srcSet={srcSet}
/>
);
// Gifv attachments.
} else if (attachment.get('type') === 'gifv') {
const autoPlay = !isIOS() && autoPlayGif;
thumbnail = (
<video
autoPlay={autoPlay}
className='item\gifv'
loop
muted
poster={previewUrl}
src={originalUrl}
/>
);
}
// Rendering. We render the item inside of a button+link, which
// provides the original. (We can do this for gifvs because we
// don't show the controls.)
return (
<CommonButton
className={computedClass}
data-gallery-size={gallerySize}
href={remoteUrl || originalUrl}
key={attachment.get('id')}
onClick={handleClick}
title={intl.formatMessage(messages.expand)}
>{thumbnail}</CommonButton>
);
}
}

88
app/javascript/glitch/components/status/content/gallery/item/style.scss Normal file
View File

@ -0,0 +1,88 @@
@import 'variables';
.glitch.glitch__status__content__gallery__item {
display: inline-block;
position: relative;
width: 100%;
height: 100%;
cursor: zoom-in;
.item\\image,
.item\\gifv {
display: block;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
width: auto;
max-width: 100%;
height: auto;
max-height: 100%;
@supports (object-fit: cover) {
width: 100%;
height: 100%;
object-fit: cover;
}
}
&.letterbox {
.item\\image,
.item\\gifv {
width: auto;
height: auto;
object-fit: fill;
}
}
&[data-gallery-size="2"] {
width: calc(50% - .5625em);
height: calc(100% - .75em);
margin: .375em .1875em .375em .375em;
&:last-child {
margin: .375em .375em .375em .1875em;
}
}
&[data-gallery-size="3"] {
width: calc(50% - .5625em);
height: calc(100% - .75em);
margin: .375em .1875em .375em .375em;
&:nth-last-child(2) {
float: right;
height: calc(50% - .5625em);
margin: .375em .375em .1875em .1875em;
}
&:last-child {
float: right;
height: calc(50% - .5625em);
margin: .1875em .375em .1875em .375em;
}
}
&[data-gallery-size="4"] {
width: calc(50% - .5625em);
height: calc(50% - .5625em);
margin: .375em .1875em .1875em .375em;
&:nth-last-child(3) {
margin: .375em .375em .1875em .1875em;
}
&:nth-last-child(2) {
margin: .1875em .1875em .375em .375em;
}
&:last-child {
margin: .1875em .375em .375em .1875em;
}
}
}
// add GIF label in CSS

233
app/javascript/glitch/components/status/content/gallery/player/index.js Normal file
View File

@ -0,0 +1,233 @@
// <StatusContentGalleryPlayer>
// ==============
// For code documentation, please see:
// https://glitch-soc.github.io/docs/javascript/glitch/status/content/gallery/player
// For more information, please contact:
// @kibi@glitch.social
// * * * * * * * //
// Imports:
// --------
// Package imports.
import classNames from 'classnames';
import PropTypes from 'prop-types';
import React from 'react';
import ImmutablePropTypes from 'react-immutable-proptypes';
import ImmutablePureComponent from 'react-immutable-pure-component';
import { defineMessages, FormattedMessage } from 'react-intl';
// Mastodon imports.
import { isIOS } from 'mastodon/is_mobile';
// Our imports.
import CommonButton from 'glitch/components/common/button';
// Stylesheet imports.
import './style';
// * * * * * * * //
// Initial setup
// -------------
// Holds our localization messages.
const messages = defineMessages({
mute: { id: 'video_player.toggle_sound', defaultMessage: 'Toggle sound' },
open: { id: 'video_player.open', defaultMessage: 'Open video' },
play: { id: 'video_player.play', defaultMessage: 'Play video' },
pause: { id: 'video_player.pause', defaultMessage: 'Pause video' },
expand: { id: 'video_player.expand', defaultMessage: 'Expand video' },
});
// * * * * * * * //
// The component
// -------------
export default class StatusContentGalleryPlayer extends ImmutablePureComponent {
// Props and state.
static propTypes = {
attachment: ImmutablePropTypes.map.isRequired,
autoPlayGif: PropTypes.bool,
intl: PropTypes.object.isRequired,
letterbox: PropTypes.bool,
onClick: PropTypes.func.isRequired,
}
state = {
hasAudio: true,
muted: true,
preview: !isIOS() && this.props.autoPlayGif,
videoError: false,
}
// Basic video controls.
handleMute = () => {
this.setState({ muted: !this.state.muted });
}
handlePlayPause = () => {
const { video } = this;
if (video.paused) {
video.play();
} else {
video.pause();
}
}
// When clicking we either open (de-preview) the video or we
// expand it, depending. Note that when we de-preview the video will
// also begin playing (except on iOS) due to its `autoplay`
// attribute.
handleClick = () => {
const { setState, video } = this;
const { onClick } = this.props;
const { preview } = this.state;
if (preview) setState({ preview: false });
else {
video.pause();
onClick(video.currentTime);
}
}
// Loading and errors. We have to do some hacks in order to check if
// the video has audio imo. There's probably a better way to do this
// but that's how upstream has it.
handleLoadedData = () => {
const { video } = this;
if (('WebkitAppearance' in document.documentElement.style && video.audioTracks.length === 0) || video.mozHasAudio === false) {
this.setState({ hasAudio: false });
}
}
handleVideoError = () => {
this.setState({ videoError: true });
}
// On mounting or update, we ensure our video has the needed event
// listeners. We can't necessarily do this right away because there
// might be a preview up.
componentDidMount () {
this.componentDidUpdate();
}
componentDidUpdate () {
const { handleLoadedData, handleVideoError, video } = this;
if (!video) return;
video.addEventListener('loadeddata', handleLoadedData);
video.addEventListener('error', handleVideoError);
}
// On unmounting, we remove the listeners from the video element.
componentWillUnmount () {
const { handleLoadedData, handleVideoError, video } = this;
if (!video) return;
video.removeEventListener('loadeddata', handleLoadedData);
video.removeEventListener('error', handleVideoError);
}
// Getting a reference to our video.
setRef = (c) => {
this.video = c;
}
// Rendering.
render () {
const {
handleClick,
handleMute,
handlePlayPause,
setRef,
video,
} = this;
const {
attachment,
letterbox,
intl,
} = this.props;
const {
hasAudio,
muted,
preview,
videoError,
} = this.state;
const originalUrl = attachment.get('url');
const previewUrl = attachment.get('preview_url');
const remoteUrl = attachment.get('remote_url');
let content = null;
const computedClass = classNames('glitch', 'glitch__status__content__gallery__player', {
_letterbox: letterbox,
});
// This gets our content: either a preview image, an error
// message, or the video.
switch (true) {
case preview:
content = (
<img
alt=''
className='player\preview'
src={previewUrl}
/>
);
break;
case videoError:
content = (
<span className='player\error'>
<FormattedMessage id='video_player.video_error' defaultMessage='Video could not be played' />
</span>
);
break;
default:
content = (
<video
autoPlay={!isIOS()}
className='player\video'
loop
muted={muted}
poster={previewUrl}
ref={setRef}
src={originalUrl}
/>
);
break;
}
// Everything goes inside of a button because everything is a
// button. This is okay wrt the video element because it doesn't
// have controls.
return (
<div className={computedClass}>
<CommonButton
className='player\box'
href={remoteUrl || originalUrl}
key='box'
onClick={handleClick}
title={intl.formatMessage(preview ? messages.open : messages.expand)}
>{content}</CommonButton>
{!preview ? (
<CommonButton
active={!video.paused}
className='player\play-pause player\button'
icon={video.paused ? 'play' : 'pause'}
key='play'
onClick={handlePlayPause}
title={intl.formatMessage(messages.play)}
/>
) : null}
{!preview && hasAudio ? (
<CommonButton
active={!muted}
className='player\mute player\button'
icon={muted ? 'volume-off' : 'volume-up'}
key='mute'
onClick={handleMute}
title={intl.formatMessage(messages.mute)}
/>
) : null}
</div>
);
}
}

71
app/javascript/glitch/components/status/content/gallery/player/style.scss Normal file
View File

@ -0,0 +1,71 @@
@import 'variables';
.glitch.glitch__status__content__gallery__player {
display: block;
padding: (1.5em * 1.35) 0; // Creates black bars at the bottom/top
width: 100%;
height: calc(100% - (1.5em * 1.35 * 2));
cursor: zoom-in;
.player\\box {
display: block;
position: relative;
width: 100%;
height: 100%;
& > img,
& > video {
display: block;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
width: auto;
max-width: 100%;
height: auto;
max-height: 100%;
@supports (object-fit: cover) {
width: 100%;
height: 100%;
object-fit: cover;
}
}
}
.player\\button {
position: absolute;
margin: .35em;
border-radius: .35em;
padding: .1625em;
height: 1em; // 1 + 2*.35 + 2*.1625 = 1.5*1.35
color: $primary-text-color;
background: $base-overlay-background;
font-size: 1em;
line-height: 1;
opacity: .7;
&.player\\play-pause {
bottom: 0;
left: 0;
}
&.player\\mute {
bottom: 0;
right: 0;
}
}
&._letterbox {
.player\\box {
& > img,
& > video {
width: auto;
height: auto;
object-fit: fill;
}
}
}
}

74
app/javascript/glitch/components/status/content/gallery/style.scss Normal file
View File

@ -0,0 +1,74 @@
@import 'variables';
.glitch.glitch__status__content__gallery {
display: block;
position: relative;
color: $ui-primary-color;
background: $base-shadow-color;
.gallery\\button {
position: absolute;
margin: .35em;
border-radius: .35em;
padding: .1625em;
height: 1em; // 1 + 2*.35 + 2*.1625 = 1.5*1.35
color: $primary-text-color;
background: $base-overlay-background;
font-size: 1em;
line-height: 1;
opacity: .7;
&:hover {
opacity: 1;
}
&.gallery\\sensitive {
top: 0;
left: 0;
}
}
.gallery\\curtain.gallery\\sensitive {
display: block;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
border-radius: 0;
padding: 0;
color: $ui-secondary-color;
background: $base-overlay-background;
font-size: (1.25em / 1.35); // approx. .925em
line-height: 1.35;
text-align: center;
white-space: nowrap;
cursor: pointer;
transition: color ($glitch-animation-speed * .15s) ease-in;
.gallery\\message {
display: block;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 2.6em;
margin: auto;
.gallery\\warning {
display: block;
font-size: (1.35em / 1.25);
line-height: 1.35;
}
}
&:active,
&:focus,
&:hover {
color: $primary-text-color;
background: $base-overlay-background; // No change
transition: color ($glitch-animation-speed * .3s) ease-out;
}
}
}

520
app/javascript/glitch/components/status/content/index.js Normal file
View File

@ -0,0 +1,520 @@
// <StatusContent>
// ===============
// For code documentation, please see:
// https://glitch-soc.github.io/docs/javascript/glitch/status/content
// For more information, please contact:
// @kibi@glitch.social
// * * * * * * * //
// Imports
// -------
// Package imports.
import classNames from 'classnames';
import PropTypes from 'prop-types';
import React from 'react';
import ImmutablePropTypes from 'react-immutable-proptypes';
import ImmutablePureComponent from 'react-immutable-pure-component';
import { defineMessages, FormattedMessage } from 'react-intl';
// Mastodon imports.
import { isRtl } from 'mastodon/rtl';
// Our imports.
import StatusContentCard from './card';
import StatusContentGallery from './gallery';
import StatusContentUnknown from './unknown';
import CommonButton from 'glitch/components/common/button';
import CommonLink from 'glitch/components/common/link';
// Stylesheet imports.
import './style';
// * * * * * * * //
// Initial setup
// -------------
// Holds our localization messages.
const messages = defineMessages({
card_link :
{ id: 'status.card', defaultMessage: 'Card' },
video_link :
{ id: 'status.video', defaultMessage: 'Video' },
image_link :
{ id: 'status.image', defaultMessage: 'Image' },
unknown_link :
{ id: 'status.unknown_attachment', defaultMessage: 'Unknown attachment' },
hashtag :
{ id: 'status.hashtag', defaultMessage: 'Hashtag @{name}' },
show_more :
{ id: 'status.show_more', defaultMessage: 'Show more' },
show_less :
{ id: 'status.show_less', defaultMessage: 'Show less' },
});
// * * * * * * * //
// The component
// -------------
export default class StatusContent extends ImmutablePureComponent {
// Props and state.
static propTypes = {
autoPlayGif: PropTypes.bool,
detailed: PropTypes.bool,
expanded: PropTypes.oneOf([true, false, null]),
handler: PropTypes.object.isRequired,
hideMedia: PropTypes.bool,
history: PropTypes.object,
intl: PropTypes.object.isRequired,
letterbox: PropTypes.bool,
onClick: PropTypes.func,
onHeightUpdate: PropTypes.func,
setExpansion: PropTypes.func,
status: ImmutablePropTypes.map.isRequired,
}
state = {
hidden: true,
}
// Variables.
text = null
// Our constructor preprocesses our status content and turns it into
// an array of React elements, stored in `this.text`.
constructor (props) {
super(props);
const { intl, history, status } = props;
// This creates a document fragment with the DOM contents of our
// status's text and a TreeWalker to walk them.
const range = document.createRange();
range.selectNode(document.body);
const walker = document.createTreeWalker(
range.createContextualFragment(status.get('contentHtml')),
NodeFilter.SHOW_ELEMENT | NodeFilter.SHOW_TEXT,
{ acceptNode (node) {
const name = node.nodeName;
switch (true) {
case node.parentElement && node.parentElement.nodeName.toUpperCase() === 'A':
return NodeFilter.FILTER_REJECT; // No link children
case node.nodeType === Node.TEXT_NODE:
case name.toUpperCase() === 'A':
case name.toUpperCase() === 'P':
case name.toUpperCase() === 'BR':
case name.toUpperCase() === 'IMG': // Emoji
return NodeFilter.FILTER_ACCEPT;
default:
return NodeFilter.FILTER_SKIP;
}
} },
);
const attachments = status.get('attachments');
const card = (!attachments || !attachments.size) && status.get('card');
this.text = [];
let currentP = [];
// This walks the contents of our status.
while (walker.nextNode()) {
const node = walker.currentNode;
const nodeName = node.nodeName.toUpperCase();
switch (nodeName) {
// If our element is a link, then we process it here.
case 'A':
currentP.push((() => {
// Here we detect what kind of link we're dealing with.
let mention = status.get('mentions') ? status.get('mentions').find(
item => node.href === item.get('url')
) : null;
let tag = status.get('tags') ? status.get('tags').find(
item => node.href === item.get('url')
) : null;
let attachment = attachments ? attachments.find(
item => node.href === item.get('url') || node.href === item.get('text_url') || node.href === item.get('remote_url')
) : null;
let text = node.textContent;
let icon = '';
let type = '';
// We use a switch to select our link type.
switch (true) {
// This handles cards.
case card && node.href === card.get('url'):
text = card.get('title') || intl.formatMessage(messages.card);
icon = 'id-card-o';
return (
<CommonButton
className={'content\card content\button'}
href={node.href}
icon={icon}
key={currentP.length}
showTitle
title={text}
/>
);
// This handles mentions.
case mention && (text.replace(/^@/, '') === mention.get('username') || text.replace(/^@/, '') === mention.get('acct')):
icon = text[0] === '@' ? '@' : '';
text = mention.get('acct').split('@');
if (text[1]) text[1].replace(/[@.][^.]*/g, (m) => m.substr(0, 2));
return (
<CommonLink
className='content\mention content\link'
destination={`/accounts/${mention.get('id')}`}
history={history}
href={node.href}
key={currentP.length}
title={'@' + mention.get('acct')}
>
{icon ? <span className='content\at'>{icon}</span> : null}
<span className='content\username'>{text[0]}</span>
{text[1] ? <span className='content\at'>@</span> : null}
{text[1] ? <span className='content\instance'>{text[1]}</span> : null}
</CommonLink>
);
// This handles attachment links.
case !!attachment:
type = attachment.get('type');
switch (type) {
case 'unknown':
text = intl.formatMessage(messages.unknown_attachment);
icon = 'question';
break;
case 'video':
text = intl.formatMessage(messages.video);
icon = 'video-camera';
break;
default:
text = intl.formatMessage(messages.image);
icon = 'picture-o';
break;
}
return (
<CommonButton
className={`content\\${type} content\\button`}
href={node.href}
icon={icon}
key={currentP.length}
showTitle
title={text}
/>
);
// This handles hashtag links.
case !!tag && (text.replace(/^#/, '') === tag.get('name')):
icon = text[0] === '#' ? '#' : '';
text = tag.get('name');
return (
<CommonLink
className='content\tag content\link'
destination={`/timelines/tag/${tag.get('name')}`}
history={history}
href={node.href}
key={currentP.length}
title={intl.formatMessage(messages.hashtag, { name: tag.get('name') })}
>
{icon ? <span className='content\hash'>{icon}</span> : null}
<span className='content\tagname'>{text}</span>
</CommonLink>
);
// This handles all other links.
default:
if (text === node.href && text.length > 23) {
text = text.substr(0, 22) + '…';
}
return (
<CommonLink
className='content\link'
href={node.href}
key={currentP.length}
title={node.href}
>{text}</CommonLink>
);
}
})());
break;
// If our element is an IMG, we only render it if it's an emoji.
case 'IMG':
if (!node.classList.contains('emojione')) break;
currentP.push(
<img
alt={node.alt}
className={'content\emojione'}
draggable={false}
key={currentP.length}
src={node.src}
{...(node.title ? { title: node.title } : {})}
/>
);
break;
// If our element is a BR, we pass it along.
case 'BR':
currentP.push(<br key={currentP.length} />);
break;
// If our element is a P, then we need to start a new paragraph.
// If our paragraph has content, we need to push it first.
case 'P':
if (currentP.length) this.text.push(
<p key={this.text.length}>
{currentP}
</p>
);
currentP = [];
break;
// Otherwise we just push the text.
default:
currentP.push(node.textContent);
}
}
// If there is unpushed paragraph content after walking the entire
// status contents, we push it here.
if (currentP.length) this.text.push(
<p key={this.text.length}>
{currentP}
</p>
);
}
// When our content changes, we need to update the height of the
// status.
componentDidUpdate () {
if (this.props.onHeightUpdate) {
this.props.onHeightUpdate();
}
}
// When the mouse is pressed down, we grab its position.
handleMouseDown = (e) => {
this.startXY = [e.clientX, e.clientY];
}
// When the mouse is raised, we handle the click if it wasn't a part
// of a drag.
handleMouseUp = (e) => {
const { startXY } = this;
const { onClick } = this.props;
const { button, clientX, clientY, target } = e;
// This gets the change in mouse position. If `startXY` isn't set,
// it means that the click originated elsewhere.
if (!startXY) return;
const [ deltaX, deltaY ] = [clientX - startXY[0], clientY - startXY[1]];
// This switch prevents an overly lengthy if.
switch (true) {
// If the button being released isn't the main mouse button, or if
// we don't have a click parsing function, or if the mouse has
// moved more than 5px, OR if the target of the mouse event is a
// button or a link, we do nothing.
case button !== 0:
case !onClick:
case Math.sqrt(deltaX ** 2 + deltaY ** 2) >= 5:
case (
target.matches || target.msMatchesSelector || target.webkitMatchesSelector || (() => void 0)
).call(target, 'button, button *, a, a *'):
break;
// Otherwise, we parse the click.
default:
onClick(e);
break;
}
// This resets our mouse location.
this.startXY = null;
}
// This expands and collapses our spoiler.
handleSpoilerClick = (e) => {
e.preventDefault();
if (this.props.setExpansion) {
this.props.setExpansion(this.props.expanded ? null : true);
} else {
this.setState({ hidden: !this.state.hidden });
}
}
// Renders our component.
render () {
const {
handleMouseDown,
handleMouseUp,
handleSpoilerClick,
text,
} = this;
const {
autoPlayGif,
detailed,
expanded,
handler,
hideMedia,
intl,
letterbox,
onClick,
setExpansion,
status,
} = this.props;
const attachments = status.get('attachments');
const card = status.get('card');
const hidden = setExpansion ? !expanded : this.state.hidden;
const computedClass = classNames('glitch', 'glitch__status__content', {
_actionable: !detailed && onClick,
_rtl: isRtl(status.get('search_index')),
});
let media = null;
let mediaIcon = '';
// This defines our media.
if (!hideMedia) {
// If there aren't any attachments, we try showing a card.
if ((!attachments || !attachments.size) && card) {
media = (
<StatusContentCard
card={card}
className='content\attachments content\card'
fullwidth={detailed}
letterbox={letterbox}
/>
);
mediaIcon = 'id-card-o';
// If any of the attachments are of unknown type, we render an
// unknown attachments list.
} else if (attachments && attachments.some(
(item) => item.get('type') === 'unknown'
)) {
media = (
<StatusContentUnknown
attachments={attachments}
className='content\attachments content\unknown'
fullwidth={detailed}
/>
);
mediaIcon = 'question';
// Otherwise, we display the gallery.
} else if (attachments) {
media = (
<StatusContentGallery
attachments={attachments}
autoPlayGif={autoPlayGif}
className='content\attachments content\gallery'
fullwidth={detailed}
intl={intl}
letterbox={letterbox}
onOpenMedia={handler.openMedia}
onOpenVideo={handler.openVideo}
sensitive={status.get('sensitive')}
standalone={!history}
/>
);
mediaIcon = attachments.getIn([0, 'type']) === 'video' ? 'film' : 'picture-o';
}
}
// Spoiler stuff.
if (status.get('spoiler_text').length > 0) {
// This gets our list of mentions.
const mentionLinks = status.get('mentions').map(mention => {
const text = mention.get('acct').split('@');
if (text[1]) text[1].replace(/[@.][^.]*/g, (m) => m.substr(0, 2));
return (
<CommonLink
className='content\mention content\link'
destination={`/accounts/${mention.get('id')}`}
history={history}
href={mention.get('url')}
key={mention.get('id')}
title={'@' + mention.get('acct')}
>
<span className='content\at'>@</span>
<span className='content\username'>{text[0]}</span>
{text[1] ? <span className='content\at'>@</span> : null}
{text[1] ? <span className='content\instance'>{text[1]}</span> : null}
</CommonLink>
);
}).reduce((aggregate, item) => [...aggregate, ' ', item], []);
// Component rendering.
return (
<div className={computedClass}>
<div
className='content\spoiler'
{...(onClick ? {
onMouseDown: handleMouseDown,
onMouseUp: handleMouseUp,
} : {})}
>
<p>
<span
className='content\warning'
dangerouslySetInnerHTML={status.get('spoilerHtml')}
/>
{' '}
<CommonButton
active={!hidden}
className='content\showmore'
icon={hidden && mediaIcon}
onClick={handleSpoilerClick}
showTitle={hidden}
title={intl.formatMessage(messages.show_more)}
>
{hidden ? null : (
<FormattedMessage {...messages.show_less} />
)}
</CommonButton>
</p>
</div>
{hidden ? mentionLinks : null}
<div className='content\contents' hidden={hidden}>
<div
className='content\text'
{...(onClick ? {
onMouseDown: handleMouseDown,
onMouseUp: handleMouseUp,
} : {})}
>{text}</div>
{media}
</div>
</div>
);
// Non-spoiler statuses.
} else {
return (
<div className={computedClass}>
<div className='content\contents'>
<div
className='content\text'
{...(onClick ? {
onMouseDown: handleMouseDown,
onMouseUp: handleMouseUp,
} : {})}
>{text}</div>
{media}
</div>
</div>
);
}
}
}

101
app/javascript/glitch/components/status/content/style.scss Normal file
View File

@ -0,0 +1,101 @@
@import 'variables';
.glitch.glitch__status__content {
position: relative;
padding: (.75em * 1.35) .75em;
color: $primary-text-color;
direction: ltr; // but see `&.rtl` below
word-wrap: break-word;
overflow: visible;
white-space: pre-wrap;
.content\\contents {
.content\\attachments {
.content\\text + & {
margin-top: (.75em * 1.35);
}
}
&[hidden] {
display: none;
}
.content\\spoiler + & {
margin-top: (.75em * 1.35);
}
}
.content\\emojione {
width: 1.2em;
height: 1.2em;
}
.content\\spoiler,
.content\\text { // text-containing elements
p {
margin-bottom: (.75em * 1.35);
&:last-child {
margin-bottom: 0;
}
}
.content\\link {
color: $ui-secondary-color;
text-decoration: none;
&:hover {
text-decoration: underline;
}
/*
For mentions, we only underline the username and instance (not
the @'s).
*/
&.content\\mention {
.content\\at {
color: $glitch-lighter-color;
}
&:hover {
text-decoration: none;
.content\\instance,
.content\\username {
text-decoration: underline;
}
}
}
/*
Similarly, for tags, we only underline the tag name (not the
hash).
*/
&.content\\tag {
.content\\hash {
color: $glitch-lighter-color;
}
&:hover {
text-decoration: none;
.content\\tagname {
text-decoration: underline;
}
}
}
}
}
&._actionable {
.content\\text,
.content\\spoiler {
cursor: pointer;
}
}
&._rtl {
direction: rtl;
}
}

70
app/javascript/glitch/components/status/content/unknown/index.js Normal file
View File

@ -0,0 +1,70 @@
// <StatusContentUnknown>
// ========
// For code documentation, please see:
// https://glitch-soc.github.io/docs/javascript/glitch/status/content/unknown
// For more information, please contact:
// @kibi@glitch.social
// * * * * * * * //
// Imports
// -------
// Package imports.
import classNames from 'classnames';
import PropTypes from 'prop-types';
import React from 'react';
import ImmutablePropTypes from 'react-immutable-proptypes';
import ImmutablePureComponent from 'react-immutable-pure-component';
// Our imports.
import CommonIcon from 'glitch/components/common/icon';
import CommonLink from 'glitch/components/common/link';
// Stylesheet imports.
import './style';
// * * * * * * * //
// The component
// -------------
export default class StatusContentUnknown extends ImmutablePureComponent {
// Props.
static propTypes = {
attachments: ImmutablePropTypes.list.isRequired,
fullwidth: PropTypes.bool,
}
render () {
const { attachments, fullwidth } = this.props;
const computedClass = classNames('glitch', 'glitch__status__content__unknown', {
_fullwidth: fullwidth,
});
return (
<ul className={computedClass}>
{attachments.map(attachment => (
<li
className='unknown\attachment'
key={attachment.get('id')}
>
<CommonLink
className='unknown\link'
href={attachment.get('remote_url')}
>
<CommonIcon
className='unknown\icon'
name='link'
/>
{attachment.get('title') || attachment.get('remote_url')}
</CommonLink>
</li>
))}
</ul>
);
}
}

0
app/javascript/glitch/components/status/content/unknown/style.scss Normal file
View File

141
app/javascript/glitch/components/status/footer/index.js Normal file
View File

@ -0,0 +1,141 @@
// <StatusFooter>
// ========
// For code documentation, please see:
// https://glitch-soc.github.io/docs/javascript/glitch/status/footer
// For more information, please contact:
// @kibi@glitch.social
// * * * * * * * //
// Imports
// -------
// Package imports.
import classNames from 'classnames';
import PropTypes from 'prop-types';
import React from 'react';
import ImmutablePropTypes from 'react-immutable-proptypes';
import ImmutablePureComponent from 'react-immutable-pure-component';
import { defineMessages, FormattedDate } from 'react-intl';
// Mastodon imports.
import RelativeTimestamp from 'mastodon/components/relative_timestamp';
// Our imports.
import CommonIcon from 'glitch/components/common/icon';
import CommonLink from 'glitch/components/common/link';
import CommonSeparator from 'glitch/components/common/separator';
// Stylesheet imports.
import './style';
// * * * * * * * //
// Initial setup
// -------------
// Localization messages.
const messages = defineMessages({
public :
{ id: 'privacy.public.short', defaultMessage: 'Public' },
unlisted :
{ id: 'privacy.unlisted.short', defaultMessage: 'Unlisted' },
private :
{ id: 'privacy.private.short', defaultMessage: 'Followers-only' },
direct :
{ id: 'privacy.direct.short', defaultMessage: 'Direct' },
permalink:
{ id: 'status.permalink', defaultMessage: 'Permalink' },
});
// * * * * * * * //
// The component
// -------------
export default class StatusFooter extends ImmutablePureComponent {
// Props.
static propTypes = {
application: ImmutablePropTypes.map.isRequired,
datetime: PropTypes.string,
detailed: PropTypes.bool,
href: PropTypes.string,
intl: PropTypes.object.isRequired,
visibility: PropTypes.string,
}
// Rendering.
render () {
const { application, datetime, detailed, href, intl, visibility } = this.props;
const visibilityIcon = {
public: 'globe',
unlisted: 'unlock-alt',
private: 'lock',
direct: 'envelope',
}[visibility];
const computedClass = classNames('glitch', 'glitch__status__footer', {
_detailed: detailed,
});
// If our status isn't detailed, our footer only contains the
// relative timestamp and visibility information.
if (!detailed) return (
<footer className={computedClass}>
<CommonLink
className='footer\timestamp footer\link'
href={href}
title={intl.formatMessage(messages.permalink)}
><RelativeTimestamp timestamp={datetime} /></CommonLink>
<CommonSeparator className='footer\separator' visible />
<CommonIcon
className='footer\icon'
name={visibilityIcon}
proportional
title={intl.formatMessage(messages[visibility])}
/>
</footer>
);
// Otherwise, we give the full timestamp and include a link to the
// application which posted the status if applicable.
return (
<footer className={computedClass}>
<CommonLink
className='footer\timestamp'
href={href}
title={intl.formatMessage(messages.permalink)}
>
<FormattedDate
value={new Date(datetime)}
hour12={false}
year='numeric'
month='short'
day='2-digit'
hour='2-digit'
minute='2-digit'
/>
</CommonLink>
<CommonSeparator className='footer\separator' visible={!!application} />
{
application ? (
<CommonLink
className='footer\application footer\link'
href={application.get('website')}
>{application.get('name')}</CommonLink>
) : null
}
<CommonSeparator className='footer\separator' visible />
<CommonIcon
name={visibilityIcon}
className='footer\icon'
proportional
title={intl.formatMessage(messages[visibility])}
/>
</footer>
);
}
}

18
app/javascript/glitch/components/status/footer/style.scss Normal file
View File

@ -0,0 +1,18 @@
@import 'variables';
.glitch.glitch__status__footer {
display: block;
height: 1.25em;
font-size: (1.25em / 1.35);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
.footer\\link {
color: inherit;
&:hover {
text-decoration: underline;
}
}
}

79
app/javascript/glitch/components/status/gallery/index.js
View File

@ -1,79 +0,0 @@
// Package imports //
import React from 'react';
import ImmutablePropTypes from 'react-immutable-proptypes';
import PropTypes from 'prop-types';
import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
// Mastodon imports //
import IconButton from '../../../../mastodon/components/icon_button';
// Our imports //
import StatusGalleryItem from './item';
const messages = defineMessages({
toggle_visible: { id: 'media_gallery.toggle_visible', defaultMessage: 'Toggle visibility' },
});
@injectIntl
export default class StatusGallery extends React.PureComponent {
static propTypes = {
sensitive: PropTypes.bool,
media: ImmutablePropTypes.list.isRequired,
letterbox: PropTypes.bool,
fullwidth: PropTypes.bool,
height: PropTypes.number.isRequired,
onOpenMedia: PropTypes.func.isRequired,
intl: PropTypes.object.isRequired,
autoPlayGif: PropTypes.bool.isRequired,
};
state = {
visible: !this.props.sensitive,
};
handleOpen = () => {
this.setState({ visible: !this.state.visible });
}
handleClick = (index) => {
this.props.onOpenMedia(this.props.media, index);
}
render () {
const { media, intl, sensitive, letterbox, fullwidth } = this.props;
let children;
if (!this.state.visible) {
let warning;
if (sensitive) {
warning = <FormattedMessage id='status.sensitive_warning' defaultMessage='Sensitive content' />;
} else {
warning = <FormattedMessage id='status.media_hidden' defaultMessage='Media hidden' />;
}
children = (
<div role='button' tabIndex='0' className='media-spoiler' onClick={this.handleOpen}>
<span className='media-spoiler__warning'>{warning}</span>
<span className='media-spoiler__trigger'><FormattedMessage id='status.sensitive_toggle' defaultMessage='Click to view' /></span>
</div>
);
} else {
const size = media.take(4).size;
children = media.take(4).map((attachment, i) => <StatusGalleryItem key={attachment.get('id')} onClick={this.handleClick} attachment={attachment} autoPlayGif={this.props.autoPlayGif} index={i} size={size} letterbox={letterbox} />);
}
return (
<div className={`media-gallery ${fullwidth ? 'full-width' : ''}`} style={{ height: `${this.props.height}px` }}>
<div className={`spoiler-button ${this.state.visible ? 'spoiler-button--visible' : ''}`}>
<IconButton title={intl.formatMessage(messages.toggle_visible)} icon={this.state.visible ? 'eye' : 'eye-slash'} overlay onClick={this.handleOpen} />
</div>
{children}
</div>
);
}
}

132
app/javascript/glitch/components/status/gallery/item.js
View File

@ -1,132 +0,0 @@
// Package imports //
import React from 'react';
import ImmutablePropTypes from 'react-immutable-proptypes';
import PropTypes from 'prop-types';
// Mastodon imports //
import { isIOS } from '../../../../mastodon/is_mobile';
export default class StatusGalleryItem extends React.PureComponent {
static propTypes = {
attachment: ImmutablePropTypes.map.isRequired,
index: PropTypes.number.isRequired,
size: PropTypes.number.isRequired,
letterbox: PropTypes.bool,
onClick: PropTypes.func.isRequired,
autoPlayGif: PropTypes.bool.isRequired,
};
handleClick = (e) => {
const { index, onClick } = this.props;
if (e.button === 0) {
e.preventDefault();
onClick(index);
}
e.stopPropagation();
}
render () {
const { attachment, index, size, letterbox } = this.props;
let width = 50;
let height = 100;
let top = 'auto';
let left = 'auto';
let bottom = 'auto';
let right = 'auto';
if (size === 1) {
width = 100;
}
if (size === 4 || (size === 3 && index > 0)) {
height = 50;
}
if (size === 2) {
if (index === 0) {
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') === 'image') {
const previewUrl = attachment.get('preview_url');
const previewWidth = attachment.getIn(['meta', 'small', 'width']);
const originalUrl = attachment.get('url');
const originalWidth = attachment.getIn(['meta', 'original', 'width']);
const srcSet = `${originalUrl} ${originalWidth}w, ${previewUrl} ${previewWidth}w`;
const sizes = `(min-width: 1025px) ${320 * (width / 100)}px, ${width}vw`;
thumbnail = (
<a
className='media-gallery__item-thumbnail'
href={attachment.get('remote_url') || originalUrl}
onClick={this.handleClick}
target='_blank'
>
<img className={letterbox ? 'letterbox' : ''} src={previewUrl} srcSet={srcSet} sizes={sizes} alt='' />
</a>
);
} else if (attachment.get('type') === 'gifv') {
const autoPlay = !isIOS() && this.props.autoPlayGif;
thumbnail = (
<div className={`media-gallery__gifv ${autoPlay ? 'autoplay' : ''}`}>
<video
className={`media-gallery__item-gifv-thumbnail${letterbox ? ' letterbox' : ''}`}
role='application'
src={attachment.get('url')}
onClick={this.handleClick}
autoPlay={autoPlay}
loop
muted
/>
<span className='media-gallery__gifv__label'>GIF</span>
</div>
);
}
return (
<div className='media-gallery__item' key={attachment.get('id')} style={{ left: left, top: top, right: right, bottom: bottom, width: `${width}%`, height: `${height}%` }}>
{thumbnail}
</div>
);
}
}

231
app/javascript/glitch/components/status/header.js
View File

@ -1,231 +0,0 @@
/*
`<StatusHeader>`
================
Originally a part of `<Status>`, but extracted into a separate
component for better documentation and maintainance by
@kibi@glitch.social as a part of glitch-soc/mastodon.
*/
/* * * * */
/*
Imports:
--------
*/
// Package imports //
import React from 'react';
import PropTypes from 'prop-types';
import ImmutablePropTypes from 'react-immutable-proptypes';
import { defineMessages, injectIntl } from 'react-intl';
// Mastodon imports //
import Avatar from '../../../mastodon/components/avatar';
import AvatarOverlay from '../../../mastodon/components/avatar_overlay';
import DisplayName from '../../../mastodon/components/display_name';
import IconButton from '../../../mastodon/components/icon_button';
import VisibilityIcon from './visibility_icon';
/* * * * */
/*
Inital setup:
-------------
The `messages` constant is used to define any messages that we need
from inside props. In our case, these are the `collapse` and
`uncollapse` messages used with our collapse/uncollapse buttons.
*/
const messages = defineMessages({
collapse: { id: 'status.collapse', defaultMessage: 'Collapse' },
uncollapse: { id: 'status.uncollapse', defaultMessage: 'Uncollapse' },
public: { id: 'privacy.public.short', defaultMessage: 'Public' },
unlisted: { id: 'privacy.unlisted.short', defaultMessage: 'Unlisted' },
private: { id: 'privacy.private.short', defaultMessage: 'Followers-only' },
direct: { id: 'privacy.direct.short', defaultMessage: 'Direct' },
});
/* * * * */
/*
The `<StatusHeader>` component:
-------------------------------
The `<StatusHeader>` component wraps together the header information
(avatar, display name) and upper buttons and icons (collapsing, media
icons) into a single `<header>` element.
### Props
- __`account`, `friend` (`ImmutablePropTypes.map`) :__
These give the accounts associated with the status. `account` is
the author of the post; `friend` will have their avatar appear
in the overlay if provided.
- __`mediaIcon` (`PropTypes.string`) :__
If a mediaIcon should be placed in the header, this string
specifies it.
- __`collapsible`, `collapsed` (`PropTypes.bool`) :__
These props tell whether a post can be, and is, collapsed.
- __`parseClick` (`PropTypes.func`) :__
This function will be called when the user clicks inside the header
information.
- __`setExpansion` (`PropTypes.func`) :__
This function is used to set the expansion state of the post.
- __`intl` (`PropTypes.object`) :__
This is our internationalization object, provided by
`injectIntl()`.
*/
@injectIntl
export default class StatusHeader extends React.PureComponent {
static propTypes = {
status: ImmutablePropTypes.map.isRequired,
friend: ImmutablePropTypes.map,
mediaIcon: PropTypes.string,
collapsible: PropTypes.bool,
collapsed: PropTypes.bool,
parseClick: PropTypes.func.isRequired,
setExpansion: PropTypes.func.isRequired,
intl: PropTypes.object.isRequired,
};
/*
### Implementation
#### `handleCollapsedClick()`.
`handleCollapsedClick()` is just a simple callback for our collapsing
button. It calls `setExpansion` to set the collapsed state of the
status.
*/
handleCollapsedClick = (e) => {
const { collapsed, setExpansion } = this.props;
if (e.button === 0) {
setExpansion(collapsed ? null : false);
e.preventDefault();
}
}
/*
#### `handleAccountClick()`.
`handleAccountClick()` handles any clicks on the header info. It calls
`parseClick()` with our `account` as the anticipatory `destination`.
*/
handleAccountClick = (e) => {
const { status, parseClick } = this.props;
parseClick(e, `/accounts/${+status.getIn(['account', 'id'])}`);
}
/*
#### `render()`.
`render()` actually puts our element on the screen. `<StatusHeader>`
has a very straightforward rendering process.
*/
render () {
const {
status,
friend,
mediaIcon,
collapsible,
collapsed,
intl,
} = this.props;
const account = status.get('account');
return (
<header className='status__info'>
{
/*
We have to include the status icons before the header content because
it is rendered as a float.
*/
}
<div className='status__info__icons'>
{mediaIcon ? (
<i
className={`fa fa-fw fa-${mediaIcon}`}
aria-hidden='true'
/>
) : null}
{(
<VisibilityIcon visibility={status.get('visibility')} />
)}
{collapsible ? (
<IconButton
className='status__collapse-button'
animate flip
active={collapsed}
title={
collapsed ?
intl.formatMessage(messages.uncollapse) :
intl.formatMessage(messages.collapse)
}
icon='angle-double-up'
onClick={this.handleCollapsedClick}
/>
) : null}
</div>
{
/*
This begins our header content. It is all wrapped inside of a link
which gets handled by `handleAccountClick`. We use an `<AvatarOverlay>`
if we have a `friend` and a normal `<Avatar>` if we don't.
*/
}
<a
href={account.get('url')}
target='_blank'
className='status__display-name'
onClick={this.handleAccountClick}
>
<div className='status__avatar'>{
friend ? (
<AvatarOverlay account={account} friend={friend} />
) : (
<Avatar account={account} size={48} />
)
}</div>
<DisplayName account={account} />
</a>
</header>
);
}
}

76
app/javascript/glitch/components/status/header/index.js Normal file
View File

@ -0,0 +1,76 @@
// <StatusHeader>
// ==============
// For code documentation, please see:
// https://glitch-soc.github.io/docs/javascript/glitch/status/header
// For more information, please contact:
// @kibi@glitch.social
// * * * * * * * //
// Imports:
// --------
// Package imports.
import React from 'react';
import PropTypes from 'prop-types';
import ImmutablePropTypes from 'react-immutable-proptypes';
import ImmutablePureComponent from 'react-immutable-pure-component';
// Our imports.
import CommonAvatar from 'glitch/components/common/avatar';
import CommonLink from 'glitch/components/common/link';
// Stylesheet imports.
import './style';
// * * * * * * * //
// The component:
// --------------
export default class StatusHeader extends ImmutablePureComponent {
// Props.
static propTypes = {
account: ImmutablePropTypes.map.isRequired,
comrade: ImmutablePropTypes.map,
history: PropTypes.object,
};
// Renders our component.
render () {
const {
account,
comrade,
history,
} = this.props;
// This displays our header.
return (
<header className='glitch glitch__status__header'>
<CommonLink
className='header\link'
destination={`/accounts/${account.get('id')}`}
history={history}
href={account.get('url')}
>
<CommonAvatar
account={account}
className='header\avatar'
comrade={comrade}
/>
</CommonLink>
<b
className='header\display-name'
dangerouslySetInnerHTML={{
__html: account.get('display_name_html'),
}}
/>
<code className='header\account'>@{account.get('acct')}</code>
</header>
);
}
}

45
app/javascript/glitch/components/status/header/style.scss Normal file
View File

@ -0,0 +1,45 @@
@import 'variables';
.glitch.glitch__status__header {
display: block;
height: 3.35em;
/*
Note that the computed value of `em` changes for `.account`, since it
has a different font-size.
*/
.header\\account,
.header\\display-name {
display: block;
border: none; // masto compat.
padding: 0; // masto compat.
max-width: none; // masto compat.
height: 1.35em;
overflow: hidden;
font-size: inherit;
font-family: inherit;
font-weight: inherit;
line-height: inherit;
text-overflow: ellipsis;
white-space: nowrap;
}
/*
This means that the heights of the account and display name together
are 2.6em.
*/
.header\\account {
font-size: (1.25em / 1.35); // approx. .925em
}
.header\\avatar {
float: left;
margin-right: .75em;
width: 3.35em;
height: 3.35em;
}
.header\\display-name {
padding-top: .75em;
}
}

839
app/javascript/glitch/components/status/index.js
View File

@ -1,339 +1,128 @@
/*
// <Status>
// ========
`<Status>`
==========
// For code documentation, please see:
// https://glitch-soc.github.io/docs/javascript/glitch/status
Original file by @gargron@mastodon.social et al as part of
tootsuite/mastodon. *Heavily* rewritten (and documented!) by
@kibi@glitch.social as a part of glitch-soc/mastodon. The following
features have been added:
// For more information, please contact:
// @kibi@glitch.social
- Better separating the "guts" of statuses from their wrapper(s)
- Collapsing statuses
- Moving images inside of CWs
// * * * * * * * //
A number of aspects of this original file have been split off into
their own components for better maintainance; for these, see:
// Imports
// -------
- <StatusHeader>
- <StatusPrepend>
…And, of course, the other <Status>-related components as well.
*/
/* * * * */
/*
Imports:
--------
*/
// Package imports //
import React from 'react';
// Package imports.
import classNames from 'classnames';
import PropTypes from 'prop-types';
import React from 'react';
import { defineMessages } from 'react-intl';
import ImmutablePropTypes from 'react-immutable-proptypes';
import ImmutablePureComponent from 'react-immutable-pure-component';
// Mastodon imports //
import scheduleIdleTask from '../../../mastodon/features/ui/util/schedule_idle_task';
// Mastodon imports.
import scheduleIdleTask from 'mastodon/features/ui/util/schedule_idle_task';
// Our imports //
import StatusPrepend from './prepend';
import StatusHeader from './header';
import StatusContent from './content';
// Our imports.
import StatusActionBar from './action_bar';
import StatusGallery from './gallery';
import StatusPlayer from './player';
import NotificationOverlayContainer from '../notification/overlay/container';
import StatusContent from './content';
import StatusFooter from './footer';
import StatusHeader from './header';
import StatusMissing from './missing';
import StatusNav from './nav';
import StatusPrepend from './prepend';
import CommonButton from 'glitch/components/common/button';
/* * * * */
// Stylesheet imports.
import './style';
/*
// * * * * * * * //
The `<Status>` component:
-------------------------
// Initial setup
// -------------
The `<Status>` component is a container for statuses. It consists of a
few parts:
// Holds our localization messages.
const messages = defineMessages({
detailed:
{ id: 'status.detailed', defaultMessage: 'Detailed view' },
});
- The `<StatusPrepend>`, which contains tangential information about
the status, such as who reblogged it.
- The `<StatusHeader>`, which contains the avatar and username of the
status author, as well as a media icon and the "collapse" toggle.
- The `<StatusContent>`, which contains the content of the status.
- The `<StatusActionBar>`, which provides actions to be performed
on statuses, like reblogging or sending a reply.
// * * * * * * * //
### Context
- __`router` (`PropTypes.object`) :__
We need to get our router from the surrounding React context.
### Props
- __`id` (`PropTypes.number`) :__
The id of the status.
- __`status` (`ImmutablePropTypes.map`) :__
The status object, straight from the store.
- __`account` (`ImmutablePropTypes.map`) :__
Don't be confused by this one! This is **not** the account which
posted the status, but the associated account with any further
action (eg, a reblog or a favourite).
- __`settings` (`ImmutablePropTypes.map`) :__
These are our local settings, fetched from our store. We need this
to determine how best to collapse our statuses, among other things.
- __`me` (`PropTypes.number`) :__
This is the id of the currently-signed-in user.
- __`onFavourite`, `onReblog`, `onModalReblog`, `onDelete`,
`onMention`, `onMute`, `onMuteConversation`, onBlock`, `onReport`,
`onOpenMedia`, `onOpenVideo` (`PropTypes.func`) :__
These are all functions passed through from the
`<StatusContainer>`. We don't deal with them directly here.
- __`reblogModal`, `deleteModal` (`PropTypes.bool`) :__
These tell whether or not the user has modals activated for
reblogging and deleting statuses. They are used by the `onReblog`
and `onDelete` functions, but we don't deal with them here.
- __`autoPlayGif` (`PropTypes.bool`) :__
This tells the frontend whether or not to autoplay gifs!
- __`muted` (`PropTypes.bool`) :__
This has nothing to do with a user or conversation mute! "Muted" is
what Mastodon internally calls the subdued look of statuses in the
notifications column. This should be `true` for notifications, and
`false` otherwise.
- __`collapse` (`PropTypes.bool`) :__
This prop signals a directive from a higher power to (un)collapse
a status. Most of the time it should be `undefined`, in which case
we do nothing.
- __`prepend` (`PropTypes.string`) :__
The type of prepend: `'reblogged_by'`, `'reblog'`, or
`'favourite'`.
- __`withDismiss` (`PropTypes.bool`) :__
Whether or not the status can be dismissed. Used for notifications.
- __`intersectionObserverWrapper` (`PropTypes.object`) :__
This holds our intersection observer. In Mastodon parlance,
an "intersection" is just when the status is viewable onscreen.
### State
- __`isExpanded` :__
Should be either `true`, `false`, or `null`. The meanings of
these values are as follows:
- __`true` :__ The status contains a CW and the CW is expanded.
- __`false` :__ The status is collapsed.
- __`null` :__ The status is not collapsed or expanded.
- __`isIntersecting` :__
This boolean tells us whether or not the status is currently
onscreen.
- __`isHidden` :__
This boolean tells us if the status has been unrendered to save
CPUs.
*/
// The component
// -------------
export default class Status extends ImmutablePureComponent {
static contextTypes = {
router : PropTypes.object,
};
// Props, and state.
static propTypes = {
id : PropTypes.number,
status : ImmutablePropTypes.map,
account : ImmutablePropTypes.map,
settings : ImmutablePropTypes.map,
notification : ImmutablePropTypes.map,
me : PropTypes.number,
onFavourite : PropTypes.func,
onReblog : PropTypes.func,
onModalReblog : PropTypes.func,
onDelete : PropTypes.func,
onMention : PropTypes.func,
onMute : PropTypes.func,
onMuteConversation : PropTypes.func,
onBlock : PropTypes.func,
onReport : PropTypes.func,
onOpenMedia : PropTypes.func,
onOpenVideo : PropTypes.func,
reblogModal : PropTypes.bool,
deleteModal : PropTypes.bool,
autoPlayGif: PropTypes.bool,
comrade: ImmutablePropTypes.map,
deleteModal: PropTypes.bool,
detailed: PropTypes.bool,
handler: PropTypes.objectOf(PropTypes.func).isRequired,
history: PropTypes.object,
index: PropTypes.number,
id: PropTypes.number,
listLength: PropTypes.number,
me: PropTypes.number,
muted: PropTypes.bool,
collapse : PropTypes.bool,
prepend: PropTypes.string,
withDismiss : PropTypes.bool,
reblogModal: PropTypes.bool,
setDetail: PropTypes.func,
settings: ImmutablePropTypes.map,
status: ImmutablePropTypes.map,
intersectionObserverWrapper: PropTypes.object,
};
intl : PropTypes.object,
}
state = {
isExpanded: null,
isIntersecting: true,
isHidden: false,
markedForDelete : false,
}
/*
// Instance variables.
componentMounted = false;
### Implementation
#### `updateOnProps` and `updateOnStates`.
`updateOnProps` and `updateOnStates` tell the component when to update.
We specify them explicitly because some of our props are dynamically=
generated functions, which would otherwise always trigger an update.
Of course, this means that if we add an important prop, we will need
to remember to specify it here.
*/
updateOnProps = [
'status',
'account',
'settings',
'prepend',
'me',
'boostModal',
'autoPlayGif',
'muted',
'collapse',
'notification',
]
updateOnStates = [
'isExpanded',
'markedForDelete',
]
/*
#### `componentWillReceiveProps()`.
If our settings have changed to disable collapsed statuses, then we
need to make sure that we uncollapse every one. We do that by watching
for changes to `settings.collapsed.enabled` in
`componentWillReceiveProps()`.
We also need to watch for changes on the `collapse` prop---if this
changes to anything other than `undefined`, then we need to collapse or
uncollapse our status accordingly.
*/
componentWillReceiveProps (nextProps) {
if (!nextProps.settings.getIn(['collapsed', 'enabled'])) {
if (this.state.isExpanded === false) {
this.setExpansion(null);
}
} else if (
nextProps.collapse !== this.props.collapse &&
nextProps.collapse !== undefined
) this.setExpansion(nextProps.collapse ? false : null);
// Prior to mounting, we fetch the status's card if this is a
// detailed status and we don't already have it.
componentWillMount () {
const { detailed, handler, status } = this.props;
if (!status.get('card') && detailed) handler.fetchCard(status);
}
/*
#### `componentDidMount()`.
When mounting, we just check to see if our status should be collapsed,
and collapse it if so. We don't need to worry about whether collapsing
is enabled here, because `setExpansion()` already takes that into
account.
The cases where a status should be collapsed are:
- The `collapse` prop has been set to `true`
- The user has decided in local settings to collapse all statuses.
- The user has decided to collapse all notifications ('muted'
statuses).
- The user has decided to collapse long statuses and the status is
over 400px (without media, or 650px with).
- The status is a reply and the user has decided to collapse all
replies.
- The status contains media and the user has decided to collapse all
statuses with media.
We also start up our intersection observer to monitor our statuses.
`componentMounted` lets us know that everything has been set up
properly and our intersection observer is good to go.
*/
// On mounting, we start up our intersection observer.
// `componentMounted` tells us everything worked out OK.
componentDidMount () {
const { node, handleIntersection } = this;
const {
status,
settings,
collapse,
muted,
id,
intersectionObserverWrapper,
} = this.props;
const autoCollapseSettings = settings.getIn(['collapsed', 'auto']);
if (
collapse ||
autoCollapseSettings.get('all') || (
autoCollapseSettings.get('notifications') && muted
) || (
autoCollapseSettings.get('lengthy') &&
node.clientHeight > (
status.get('media_attachments').size && !muted ? 650 : 400
)
) || (
autoCollapseSettings.get('replies') &&
status.get('in_reply_to_id', null) !== null
) || (
autoCollapseSettings.get('media') &&
!(status.get('spoiler_text').length) &&
status.get('media_attachments').size
)
) this.setExpansion(false);
const { handleIntersection, node } = this;
const { id, intersectionObserverWrapper } = this.props;
if (!intersectionObserverWrapper) return;
else intersectionObserverWrapper.observe(
id,
node,
handleIntersection
);
this.componentMounted = true;
}
/*
#### `shouldComponentUpdate()`.
If the status is about to be both offscreen (not intersecting) and
hidden, then we only need to update it if it's not that way currently.
If the status is moving from offscreen to onscreen, then we *have* to
re-render, so that we can unhide the element if necessary.
If neither of these cases are true, we can leave it up to our
`updateOnProps` and `updateOnStates` arrays.
*/
// If the status is about to be both offscreen (not intersecting)
// and hidden, then we don't bother updating unless it's not already
// that way currently. Alternatively, if we're moving from offscreen
// to onscreen, we *have* to re-render. As a default case we just
// rely on `updateOnProps` and `updateOnStates` via the
// built-in `shouldComponentUpdate()` function.
shouldComponentUpdate (nextProps, nextState) {
switch (true) {
case !nextState.isIntersecting && nextState.isHidden:
return this.state.isIntersecting || !this.state.isHidden;
switch (true) {
case this.state.isIntersecting:
case !this.state.isHidden:
case nextProps.listLength !== this.props.listLength:
case nextProps.index !== this.props.index:
return true;
default:
return false;
}
case nextState.isIntersecting && !this.state.isIntersecting:
return true;
default:
@ -341,419 +130,259 @@ If neither of these cases are true, we can leave it up to our
}
}
/*
#### `componentDidUpdate()`.
If our component is being rendered for any reason and an update has
triggered, this will save its height.
This is, frankly, a bit overkill, as the only instance when we
actually *need* to update the height right now should be when the
value of `isExpanded` has changed. But it makes for more readable
code and prevents bugs in the future where the height isn't set
properly after some change.
*/
componentDidUpdate () {
if (
this.state.isIntersecting || !this.state.isHidden
) this.saveHeight();
// If our component is about to update and is detailed, we request
// its card if we don't have it.
componentWillUpdate (nextProps) {
const { detailed, handler, status } = this.props;
if (!status.get('card') && nextProps.detailed && !detailed) {
handler.fetchCard(status);
}
}
/*
#### `componentWillUnmount()`.
If our component is about to unmount, then we'd better unset
`this.componentMounted`.
*/
// If the component is updated for any reason we save the height.
componentDidUpdate () {
const { isHidden, isIntersecting } = this.state;
if (isIntersecting || !isHidden) this.saveHeight();
}
// If our component is about to unmount, we'd better unset
// `componentMounted` lol.
componentWillUnmount () {
const { node } = this;
const { id, intersectionObserverWrapper } = this.props;
intersectionObserverWrapper.unobserve(id, node);
this.componentMounted = false;
}
/*
#### `handleIntersection()`.
`handleIntersection()` either hides the status (if it is offscreen) or
unhides it (if it is onscreen). It's called by
`intersectionObserverWrapper.observe()`.
If our status isn't intersecting, we schedule an idle task (using the
aptly-named `scheduleIdleTask()`) to hide the status at the next
available opportunity.
tootsuite/mastodon left us with the following enlightening comment
regarding this function:
> Edge 15 doesn't support isIntersecting, but we can infer it
It then implements a polyfill (intersectionRect.height > 0) which isn't
actually sufficient. The short answer is, this behaviour isn't really
supported on Edge but we can get kinda close.
*/
// Doesn't quite work on Edge 15 but it gets close. This tells us if
// our status is onscreen, and if not we hide it at the next
// available opportunity. This isn't a huge deal (but it saves some
// rendering cycles if we don't have as much DOM) so we schedule
// it using `scheduleIdleTask`.
handleIntersection = (entry) => {
const isIntersecting = (
typeof entry.isIntersecting === 'boolean' ?
entry.isIntersecting :
entry.intersectionRect.height > 0
);
this.setState(
(prevState) => {
this.setState((prevState) => {
if (prevState.isIntersecting && !isIntersecting) {
scheduleIdleTask(this.hideIfNotIntersecting);
}
return {
isIntersecting : isIntersecting,
isIntersecting,
isHidden: false,
};
}
);
});
}
/*
#### `hideIfNotIntersecting()`.
This function will hide the status if we're still not intersecting.
Hiding the status means that it will just render an empty div instead
of actual content, which saves RAMS and CPUs or some such.
*/
// Because we scheduled toot-hiding as an idle task (see above), we
// *do* need to ensure that it's still not intersecting before we
// hide it lol.
hideIfNotIntersecting = () => {
if (!this.componentMounted) return;
this.setState(
(prevState) => ({ isHidden: !prevState.isIntersecting })
);
this.setState((prevState) => ({
isHidden: !prevState.isIntersecting,
}));
}
/*
#### `saveHeight()`.
`saveHeight()` saves the height of our status so that when whe hide it
we preserve its dimensions. We only want to store our height, though,
if our status has content (otherwise, it would imply that it is
already hidden).
*/
// `saveHeight()` saves the status height so that we preserve its
// dimensions when it's being hidden.
saveHeight = () => {
if (this.node && this.node.children.length) {
this.height = this.node.getBoundingClientRect().height;
}
}
/*
#### `setExpansion()`.
`setExpansion()` sets the value of `isExpanded` in our state. It takes
one argument, `value`, which gives the desired value for `isExpanded`.
The default for this argument is `null`.
`setExpansion()` automatically checks for us whether toot collapsing
is enabled, so we don't have to.
We use a `switch` statement to simplify our code.
*/
// `setExpansion` handles expanding and collapsing statuses. Note
// that `isExpanded` is a *trinary* value:
setExpansion = (value) => {
const { detailed } = this.props;
switch (true) {
// A value of `null` or `undefined` means the status should be
// neither expanded or collapsed.
case value === undefined || value === null:
this.setState({ isExpanded: null });
break;
case !value && this.props.settings.getIn(['collapsed', 'enabled']):
this.setState({ isExpanded: false });
// A value of `false` means that the status should be collapsed.
case !value:
if (!detailed) this.setState({ isExpanded: false });
else this.setState({ isExpanded: null }); // fallback
break;
// A value of `true` means that the status should be expanded.
case !!value:
this.setState({ isExpanded: true });
break;
}
}
/*
#### `handleRef()`.
`handleRef()` just saves a reference to our status node to `this.node`.
It also saves our height, in case the height of our node has changed.
*/
// Stores our node and saves its height.
handleRef = (node) => {
this.node = node;
this.saveHeight();
}
/*
#### `parseClick()`.
`parseClick()` takes a click event and responds appropriately.
If our status is collapsed, then clicking on it should uncollapse it.
If `Shift` is held, then clicking on it should collapse it.
Otherwise, we open the url handed to us in `destination`, if
applicable.
*/
parseClick = (e, destination) => {
const { router } = this.context;
const { status } = this.props;
const { isExpanded } = this.state;
if (!router) return;
if (destination === undefined) {
destination = `/statuses/${
status.getIn(['reblog', 'id'], status.get('id'))
}`;
}
if (e.button === 0) {
if (isExpanded === false) this.setExpansion(null);
else if (e.shiftKey) {
this.setExpansion(false);
document.getSelection().removeAllRanges();
} else router.history.push(destination);
// `handleClick()` handles all clicking stuff. We route links and
// make our status detailed if it isn't already.
handleClick = (e) => {
const { detailed, history, id, setDetail, status } = this.props;
if (!history || e.button || e.ctrlKey || e.shiftKey || e.altKey || e.metaKey) return;
if (setDetail) setDetail(detailed ? null : id);
else history.push(`/statuses/${status.get('id')}`);
e.preventDefault();
}
}
/*
#### `render()`.
`render()` actually puts our element on the screen. The particulars of
this operation are further explained in the code below.
*/
// Puts our element on the screen.
render () {
const {
parseClick,
setExpansion,
saveHeight,
handleRef,
handleClick,
saveHeight,
setExpansion,
} = this;
const { router } = this.context;
const {
status,
account,
settings,
collapsed,
autoPlayGif,
comrade,
detailed,
handler,
history,
index,
intl,
listLength,
me,
muted,
prepend,
intersectionObserverWrapper,
onOpenVideo,
onOpenMedia,
autoPlayGif,
notification,
...other
setDetail,
settings,
status,
} = this.props;
const { isExpanded, isIntersecting, isHidden } = this.state;
let background = null;
let attachments = null;
let media = null;
let mediaIcon = null;
/*
If we don't have a status, then we don't render anything.
*/
const {
isExpanded,
isHidden,
isIntersecting,
} = this.state;
let account = status.get('account');
let computedClass = 'glitch glitch__status';
let conditionalProps = {};
let selectorAttribs = {};
// If there's no status, we can't render lol.
if (status === null) {
return null;
return <StatusMissing />;
}
/*
// Here are extra data-* attributes for use with CSS selectors.
// We don't use these but users can via UserStyles.
selectorAttribs = {
'data-status-by': `@${account.get('acct')}`,
};
if (prepend && comrade) {
selectorAttribs[`data-${prepend === 'favourite' ? 'favourited' : 'boosted'}-by`] = `@${comrade.get('acct')}`;
}
If our status is offscreen and hidden, then we render an empty <div> in
its place. We fill it with "content" but note that opacity is set to 0.
// If our index and list length have been set, we can set the
// corresponding ARIA attributes.
if (isFinite(index) && isFinite(listLength)) conditionalProps = {
'aria-posinset': index,
'aria-setsize': listLength,
};
*/
// This sets our class names.
computedClass = classNames('glitch', 'glitch__status', {
_detailed: detailed,
_muted: muted,
}, `_${status.get('visibility')}`);
// If our status is offscreen and hidden, we render an empty div.
if (!isIntersecting && isHidden) {
return (
<div
ref={this.handleRef}
<article
{...conditionalProps}
data-id={status.get('id')}
ref={handleRef}
style={{
height: `${this.height}px`,
opacity: 0,
overflow: 'hidden',
visibility: 'hidden',
}}
tabIndex='0'
>
{
status.getIn(['account', 'display_name']) ||
status.getIn(['account', 'username'])
}
<div hidden>
{account.get('display_name') || account.get('username')}
{' '}
{status.get('content')}
</div>
</article>
);
}
/*
If user backgrounds for collapsed statuses are enabled, then we
initialize our background accordingly. This will only be rendered if
the status is collapsed.
*/
if (
settings.getIn(['collapsed', 'backgrounds', 'user_backgrounds'])
) background = status.getIn(['account', 'header']);
/*
This handles our media attachments. Note that we don't show media on
muted (notification) statuses. If the media type is unknown, then we
simply ignore it.
After we have generated our appropriate media element and stored it in
`media`, we snatch the thumbnail to use as our `background` if media
backgrounds for collapsed statuses are enabled.
*/
attachments = status.get('media_attachments');
if (attachments.size && !muted) {
if (attachments.some((item) => item.get('type') === 'unknown')) {
} else if (
attachments.getIn([0, 'type']) === 'video'
) {
media = ( // Media type is 'video'
<StatusPlayer
media={attachments.get(0)}
sensitive={status.get('sensitive')}
letterbox={settings.getIn(['media', 'letterbox'])}
fullwidth={settings.getIn(['media', 'fullwidth'])}
height={250}
onOpenVideo={onOpenVideo}
/>
);
mediaIcon = 'video-camera';
} else { // Media type is 'image' or 'gifv'
media = (
<StatusGallery
media={attachments}
sensitive={status.get('sensitive')}
letterbox={settings.getIn(['media', 'letterbox'])}
fullwidth={settings.getIn(['media', 'fullwidth'])}
height={250}
onOpenMedia={onOpenMedia}
autoPlayGif={autoPlayGif}
/>
);
mediaIcon = 'picture-o';
}
if (
!status.get('sensitive') &&
!(status.get('spoiler_text').length > 0) &&
settings.getIn(['collapsed', 'backgrounds', 'preview_images'])
) background = attachments.getIn([0, 'preview_url']);
}
/*
Here we prepare extra data-* attributes for CSS selectors.
Users can use those for theming, hiding avatars etc via UserStyle
*/
const selectorAttribs = {
'data-status-by': `@${status.getIn(['account', 'acct'])}`,
};
if (prepend && account) {
const notifKind = {
favourite: 'favourited',
reblog: 'boosted',
reblogged_by: 'boosted',
}[prepend];
selectorAttribs[`data-${notifKind}-by`] = `@${account.get('acct')}`;
}
/*
Finally, we can render our status. We just put the pieces together
from above. We only render the action bar if the status isn't
collapsed.
*/
// Otherwise, we can render our status!
return (
<article
className={
`status${
muted ? ' muted' : ''
} status-${status.get('visibility')}${
isExpanded === false ? ' collapsed' : ''
}${
isExpanded === false && background ? ' has-background' : ''
}${
this.state.markedForDelete ? ' marked-for-delete' : ''
}`
}
style={{
backgroundImage: (
isExpanded === false && background ?
`url(${background})` :
'none'
),
}}
className={computedClass}
{...conditionalProps}
data-id={status.get('id')}
ref={handleRef}
{...selectorAttribs}
tabIndex='0'
>
{prepend && account ? (
{prepend && comrade ? (
<StatusPrepend
comrade={comrade}
history={history}
type={prepend}
account={account}
parseClick={parseClick}
notificationId={this.props.notificationId}
/>
) : null}
{setDetail ? (
<CommonButton
active={detailed}
className='status\detail status\button'
icon={detailed ? 'minus' : 'plus'}
onClick={handleClick}
title={intl.formatMessage(messages.detailed)}
/>
) : null}
<StatusHeader
status={status}
friend={account}
mediaIcon={mediaIcon}
collapsible={settings.getIn(['collapsed', 'enabled'])}
collapsed={isExpanded === false}
parseClick={parseClick}
setExpansion={setExpansion}
account={account}
comrade={comrade}
history={history}
/>
<StatusContent
status={status}
media={media}
mediaIcon={mediaIcon}
autoPlayGif={autoPlayGif}
detailed={detailed}
expanded={isExpanded}
setExpansion={setExpansion}
handler={handler}
hideMedia={muted}
history={history}
intl={intl}
letterbox={settings.getIn(['media', 'letterbox'])}
onClick={handleClick}
onHeightUpdate={saveHeight}
parseClick={parseClick}
disabled={!router}
/>
{isExpanded !== false ? (
<StatusActionBar
{...other}
setExpansion={setExpansion}
status={status}
account={status.get('account')}
/>
) : null}
{notification ? (
<NotificationOverlayContainer
notification={notification}
<StatusFooter
application={status.get('application')}
datetime={status.get('created_at')}
detailed={detailed}
href={status.get('url')}
intl={intl}
visibility={status.get('visibility')}
/>
<StatusActionBar
detailed={detailed}
handler={handler}
history={history}
intl={intl}
me={me}
status={status}
/>
{detailed ? (
<StatusNav id={status.get('id')} intl={intl} />
) : null}
</article>
);

33
app/javascript/glitch/components/status/missing/index.js Normal file
View File

@ -0,0 +1,33 @@
// <StatusMissing>
// ========
// For code documentation, please see:
// https://glitch-soc.github.io/docs/javascript/glitch/status/missing
// For more information, please contact:
// @kibi@glitch.social
// * * * * * * * //
// Imports
// -------
// Package imports.
import React from 'react';
import { FormattedMessage } from 'react-intl';
// Stylesheet imports.
import './style';
// * * * * * * * //
// The component
// -------------
const StatusMissing = () => (
<div className='glitch glitch__status__missing'>
<FormattedMessage id='missing_indicator.label' defaultMessage='Not found' />
</div>
);
export default StatusMissing;

0
app/javascript/glitch/components/status/missing/style.scss Normal file
View File

95
app/javascript/glitch/components/status/nav/index.js Normal file
View File

@ -0,0 +1,95 @@
// <StatusNav>
// ========
// For code documentation, please see:
// https://glitch-soc.github.io/docs/javascript/glitch/status/nav
// For more information, please contact:
// @kibi@glitch.social
// * * * * * * * //
// Imports
// -------
// Package imports.
import PropTypes from 'prop-types';
import React from 'react';
import ImmutablePureComponent from 'react-immutable-pure-component';
import { defineMessages } from 'react-intl';
// Our imports.
import CommonIcon from 'glitch/components/common/icon';
import CommonLink from 'glitch/components/common/link';
// Stylesheet imports.
import './style';
// * * * * * * * //
// Initial setup
// -------------
// Localization messages.
const messages = defineMessages({
conversation:
{ id : 'status.view_conversation', defaultMessage : 'View conversation' },
reblogs:
{ id : 'status.view_reblogs', defaultMessage : 'View reblogs' },
favourites:
{ id : 'status.view_favourites', defaultMessage : 'View favourites' },
});
// * * * * * * * //
// The component
// -------------
export default class StatusNav extends ImmutablePureComponent {
// Props.
static propTypes = {
id: PropTypes.number.isRequired,
intl: PropTypes.object.isRequired,
}
// Rendering.
render () {
const { id, intl } = this.props;
return (
<nav className='glitch glitch__status__nav'>
<CommonLink
className='nav\conversation'
destination={`/statuses/${id}`}
title={intl.formatMessage(messages.conversation)}
>
<CommonIcon
className='nav\icon'
name='comments-o'
/>
</CommonLink>
<CommonLink
className='nav\reblogs'
destination={`/statuses/${id}/reblogs`}
title={intl.formatMessage(messages.reblogs)}
>
<CommonIcon
className='nav\icon'
name='retweet'
/>
</CommonLink>
<CommonLink
className='nav\favourites'
destination={`/statuses/${id}/favourites`}
title={intl.formatMessage(messages.favourites)}
>
<CommonIcon
className='nav\icon'
name='star'
/>
</CommonLink>
</nav>
);
}
}

0
app/javascript/glitch/components/status/nav/style.scss Normal file
View File

203
app/javascript/glitch/components/status/player.js
View File

@ -1,203 +0,0 @@
// Package imports //
import React from 'react';
import ImmutablePropTypes from 'react-immutable-proptypes';
import PropTypes from 'prop-types';
import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
// Mastodon imports //
import IconButton from '../../../mastodon/components/icon_button';
import { isIOS } from '../../../mastodon/is_mobile';
const messages = defineMessages({
toggle_sound: { id: 'video_player.toggle_sound', defaultMessage: 'Toggle sound' },
toggle_visible: { id: 'video_player.toggle_visible', defaultMessage: 'Toggle visibility' },
expand_video: { id: 'video_player.expand', defaultMessage: 'Expand video' },
});
@injectIntl
export default class StatusPlayer extends React.PureComponent {
static contextTypes = {
router: PropTypes.object,
};
static propTypes = {
media: ImmutablePropTypes.map.isRequired,
letterbox: PropTypes.bool,
fullwidth: PropTypes.bool,
height: PropTypes.number,
sensitive: PropTypes.bool,
intl: PropTypes.object.isRequired,
autoplay: PropTypes.bool,
onOpenVideo: PropTypes.func.isRequired,
};
static defaultProps = {
height: 110,
};
state = {
visible: !this.props.sensitive,
preview: true,
muted: true,
hasAudio: true,
videoError: false,
};
handleClick = () => {
this.setState({ muted: !this.state.muted });
}
handleVideoClick = (e) => {
e.stopPropagation();
const node = this.video;
if (node.paused) {
node.play();
} else {
node.pause();
}
}
handleOpen = () => {
this.setState({ preview: !this.state.preview });
}
handleVisibility = () => {
this.setState({
visible: !this.state.visible,
preview: true,
});
}
handleExpand = () => {
this.video.pause();
this.props.onOpenVideo(this.props.media, this.video.currentTime);
}
setRef = (c) => {
this.video = c;
}
handleLoadedData = () => {
if (('WebkitAppearance' in document.documentElement.style && this.video.audioTracks.length === 0) || this.video.mozHasAudio === false) {
this.setState({ hasAudio: false });
}
}
handleVideoError = () => {
this.setState({ videoError: true });
}
componentDidMount () {
if (!this.video) {
return;
}
this.video.addEventListener('loadeddata', this.handleLoadedData);
this.video.addEventListener('error', this.handleVideoError);
}
componentDidUpdate () {
if (!this.video) {
return;
}
this.video.addEventListener('loadeddata', this.handleLoadedData);
this.video.addEventListener('error', this.handleVideoError);
}
componentWillUnmount () {
if (!this.video) {
return;
}
this.video.removeEventListener('loadeddata', this.handleLoadedData);
this.video.removeEventListener('error', this.handleVideoError);
}
render () {
const { media, intl, letterbox, fullwidth, height, sensitive, autoplay } = this.props;
let spoilerButton = (
<div className={`status__video-player-spoiler ${this.state.visible ? 'status__video-player-spoiler--visible' : ''}`}>
<IconButton overlay title={intl.formatMessage(messages.toggle_visible)} icon={this.state.visible ? 'eye' : 'eye-slash'} onClick={this.handleVisibility} />
</div>
);
let expandButton = !this.context.router ? '' : (
<div className='status__video-player-expand'>
<IconButton overlay title={intl.formatMessage(messages.expand_video)} icon='expand' onClick={this.handleExpand} />
</div>
);
let muteButton = '';
if (this.state.hasAudio) {
muteButton = (
<div className='status__video-player-mute'>
<IconButton overlay title={intl.formatMessage(messages.toggle_sound)} icon={this.state.muted ? 'volume-off' : 'volume-up'} onClick={this.handleClick} />
</div>
);
}
if (!this.state.visible) {
if (sensitive) {
return (
<div role='button' tabIndex='0' style={{ height: `${height}px` }} className={`media-spoiler ${fullwidth ? 'full-width' : ''}`} onClick={this.handleVisibility}>
{spoilerButton}
<span className='media-spoiler__warning'><FormattedMessage id='status.sensitive_warning' defaultMessage='Sensitive content' /></span>
<span className='media-spoiler__trigger'><FormattedMessage id='status.sensitive_toggle' defaultMessage='Click to view' /></span>
</div>
);
} else {
return (
<div role='button' tabIndex='0' style={{ height: `${height}px` }} className={`media-spoiler ${fullwidth ? 'full-width' : ''}`} onClick={this.handleVisibility}>
{spoilerButton}
<span className='media-spoiler__warning'><FormattedMessage id='status.media_hidden' defaultMessage='Media hidden' /></span>
<span className='media-spoiler__trigger'><FormattedMessage id='status.sensitive_toggle' defaultMessage='Click to view' /></span>
</div>
);
}
}
if (this.state.preview && !autoplay) {
return (
<div role='button' tabIndex='0' className={`media-spoiler-video ${fullwidth ? 'full-width' : ''}`} style={{ height: `${height}px`, backgroundImage: `url(${media.get('preview_url')})` }} onClick={this.handleOpen}>
{spoilerButton}
<div className='media-spoiler-video-play-icon'><i className='fa fa-play' /></div>
</div>
);
}
if (this.state.videoError) {
return (
<div style={{ height: `${height}px` }} className='video-error-cover' >
<span className='media-spoiler__warning'><FormattedMessage id='video_player.video_error' defaultMessage='Video could not be played' /></span>
</div>
);
}
return (
<div className={`status__video-player ${fullwidth ? 'full-width' : ''}`} style={{ height: `${height}px` }}>
{spoilerButton}
{muteButton}
{expandButton}
<video
className={`status__video-player-video${letterbox ? ' letterbox' : ''}`}
role='button'
tabIndex='0'
ref={this.setRef}
src={media.get('url')}
autoPlay={!isIOS()}
loop
muted={this.state.muted}
onClick={this.handleVideoClick}
/>
</div>
);
}
}

165
app/javascript/glitch/components/status/prepend.js
View File

@ -1,165 +0,0 @@
/*
`<StatusPrepend>`
=================
Originally a part of `<Status>`, but extracted into a separate
component for better documentation and maintainance by
@kibi@glitch.social as a part of glitch-soc/mastodon.
*/
/* * * * */
/*
Imports:
--------
*/
// Package imports //
import React from 'react';
import PropTypes from 'prop-types';
import ImmutablePropTypes from 'react-immutable-proptypes';
import escapeTextContentForBrowser from 'escape-html';
import { FormattedMessage } from 'react-intl';
// Mastodon imports //
import emojify from '../../../mastodon/emoji';
/* * * * */
/*
The `<StatusPrepend>` component:
--------------------------------
The `<StatusPrepend>` component holds a status's prepend, ie the text
that says “X reblogged this,” etc. It is represented by an `<aside>`
element.
### Props
- __`type` (`PropTypes.string`) :__
The type of prepend. One of `'reblogged_by'`, `'reblog'`,
`'favourite'`.
- __`account` (`ImmutablePropTypes.map`) :__
The account associated with the prepend.
- __`parseClick` (`PropTypes.func.isRequired`) :__
Our click parsing function.
*/
export default class StatusPrepend extends React.PureComponent {
static propTypes = {
type: PropTypes.string.isRequired,
account: ImmutablePropTypes.map.isRequired,
parseClick: PropTypes.func.isRequired,
notificationId: PropTypes.number,
};
/*
### Implementation
#### `handleClick()`.
This is just a small wrapper for `parseClick()` that gets fired when
an account link is clicked.
*/
handleClick = (e) => {
const { account, parseClick } = this.props;
parseClick(e, `/accounts/${+account.get('id')}`);
}
/*
#### `<Message>`.
`<Message>` is a quick functional React component which renders the
actual prepend message based on our provided `type`. First we create a
`link` for the account's name, and then use `<FormattedMessage>` to
generate the message.
*/
Message = () => {
const { type, account } = this.props;
let link = (
<a
onClick={this.handleClick}
href={account.get('url')}
className='status__display-name'
>
<b
dangerouslySetInnerHTML={{
__html : emojify(escapeTextContentForBrowser(
account.get('display_name') || account.get('username')
)),
}}
/>
</a>
);
switch (type) {
case 'reblogged_by':
return (
<FormattedMessage
id='status.reblogged_by'
defaultMessage='{name} boosted'
values={{ name : link }}
/>
);
case 'favourite':
return (
<FormattedMessage
id='notification.favourite'
defaultMessage='{name} favourited your status'
values={{ name : link }}
/>
);
case 'reblog':
return (
<FormattedMessage
id='notification.reblog'
defaultMessage='{name} boosted your status'
values={{ name : link }}
/>
);
}
return null;
}
/*
#### `render()`.
Our `render()` is incredibly simple; we just render the icon and then
the `<Message>` inside of an <aside>.
*/
render () {
const { Message } = this;
const { type } = this.props;
return !type ? null : (
<aside className={type === 'reblogged_by' ? 'status__prepend' : 'notification__message'}>
<div className={type === 'reblogged_by' ? 'status__prepend-icon-wrapper' : 'notification__favourite-icon-wrapper'}>
<i
className={`fa fa-fw fa-${
type === 'favourite' ? 'star star-icon' : 'retweet'
} status__prepend-icon`}
/>
</div>
<Message />
</aside>
);
}
}

99
app/javascript/glitch/components/status/prepend/index.js Normal file
View File

@ -0,0 +1,99 @@
// <StatusPrepend>
// ==============
// For code documentation, please see:
// https://glitch-soc.github.io/docs/javascript/glitch/status/header
// For more information, please contact:
// @kibi@glitch.social
// * * * * * * * //
// Imports:
// --------
// Package imports.
import PropTypes from 'prop-types';
import React from 'react';
import ImmutablePropTypes from 'react-immutable-proptypes';
import { FormattedMessage } from 'react-intl';
// Our imports.
import CommonIcon from 'glitch/components/common/icon';
import CommonLink from 'glitch/components/common/link';
// Stylesheet imports.
import './style';
// * * * * * * * //
// The component
// -------------
export default class StatusPrepend extends React.PureComponent {
// Props.
static propTypes = {
comrade: ImmutablePropTypes.map.isRequired,
history: PropTypes.object,
type: PropTypes.string.isRequired,
};
// This is a quick functional React component to get the prepend
// message.
Message = () => {
const { comrade, history, type } = this.props;
let link = (
<CommonLink
className='prepend\comrade'
destination={`/accounts/${comrade.get('id')}`}
history={history}
href={comrade.get('url')}
>
{comrade.get('display_name_html') || comrade.get('username')}
</CommonLink>
);
switch (type) {
case 'favourite':
return (
<FormattedMessage
defaultMessage='{name} favourited your status'
id='notification.favourite'
values={{ name : link }}
/>
);
case 'reblog':
return (
<FormattedMessage
defaultMessage='{name} boosted your status'
id='notification.reblog'
values={{ name : link }}
/>
);
case 'reblogged':
return (
<FormattedMessage
defaultMessage='{name} boosted'
id='status.reblogged_by'
values={{ name : link }}
/>
);
}
return null;
}
// This renders the prepend icon and the prepend message in sequence.
render () {
const { Message } = this;
const { type } = this.props;
return type ? (
<aside className='glitch glitch__status__prepend'>
<CommonIcon
className={`prepend\\icon prepend\\${type}`}
name={type === 'favourite' ? 'star' : 'retweet'}
/>
<Message />
</aside>
) : null;
}
}

33
app/javascript/glitch/components/status/prepend/style.scss Normal file
View File

@ -0,0 +1,33 @@
@import 'variables';
.glitch.glitch__status__prepend {
display: block;
position: relative;
margin: 0 0 1em;
color: $ui-base-lighter-color;
padding: 0 0 0 (3.35em * .7);
.prepend\\icon {
display: block;
position: absolute;
margin: auto;
top: 0;
left: 0;
width: (3.35em * .7);
height: 1.35em;
text-align: center;
&.prepend\\reblog,
&.prepend\\reblogged {
color: $ui-highlight-color;
}
&.prepend\\favourite {
color: $gold-star;
}
}
.prepend\\comrade {
color: $glitch-lighter-color;
}
}

34
app/javascript/glitch/components/status/style.scss Normal file
View File

@ -0,0 +1,34 @@
@import 'variables';
.glitch.glitch__status {
display: block;
border-bottom: 1px solid $glitch-texture-color;
padding: (.75em * 1.35) .75em;
color: $ui-secondary-color;
font-size: medium;
line-height: 1.35;
cursor: default;
animation: fade 150ms linear;
@keyframes fade {
0% { opacity: 0; }
100% { opacity: 1; }
}
/*
The detail button is styled to line up with the textual content of
status headers. See the `<StatusHeader>` CSS for more details on
their specific layout.
*/
.status\\detail.status\\button {
float: right;
width: 1.35em; // 2.6em of parent
height: 1.35em; // 2.6em of parent
font-size: (2.6em / 1.35); // approx. 1.925em
text-align: center;
}
&._direct:not(._muted) {
background: $glitch-texture-color;
}
}

48
app/javascript/glitch/components/status/visibility_icon.js
View File

@ -1,48 +0,0 @@
// Package imports //
import React from 'react';
import PropTypes from 'prop-types';
import { defineMessages, injectIntl } from 'react-intl';
import ImmutablePureComponent from 'react-immutable-pure-component';
const messages = defineMessages({
public: { id: 'privacy.public.short', defaultMessage: 'Public' },
unlisted: { id: 'privacy.unlisted.short', defaultMessage: 'Unlisted' },
private: { id: 'privacy.private.short', defaultMessage: 'Followers-only' },
direct: { id: 'privacy.direct.short', defaultMessage: 'Direct' },
});
@injectIntl
export default class VisibilityIcon extends ImmutablePureComponent {
static propTypes = {
visibility: PropTypes.string,
intl: PropTypes.object.isRequired,
withLabel: PropTypes.bool,
};
render() {
const { withLabel, visibility, intl } = this.props;
const visibilityClass = {
public: 'globe',
unlisted: 'unlock-alt',
private: 'lock',
direct: 'envelope',
}[visibility];
const label = intl.formatMessage(messages[visibility]);
const icon = (<i
className={`status__visibility-icon fa fa-fw fa-${visibilityClass}`}
title={label}
aria-hidden='true'
/>);
if (withLabel) {
return (<span style={{ whiteSpace: 'nowrap' }}>{icon} {label}</span>);
} else {
return icon;
}
}
}

7
app/javascript/glitch/selectors/intl.js Normal file
View File

@ -0,0 +1,7 @@
import { createStructuredSelector } from 'reselect';
const makeIntlSelector = () => createStructuredSelector({
intl: ({ intl }) => intl,
});
export default makeIntlSelector;

33
app/javascript/glitch/selectors/status.js Normal file
View File

@ -0,0 +1,33 @@
import { createSelector } from 'reselect';
const makeStatusSelector = () => {
return createSelector(
[
(state, id) => state.getIn(['statuses', id]),
(state, id) => state.getIn(['statuses', state.getIn(['statuses', id, 'reblog'])]),
(state, id) => state.getIn(['accounts', state.getIn(['statuses', id, 'account'])]),
(state, id) => state.getIn(['accounts', state.getIn(['statuses', state.getIn(['statuses', id, 'reblog']), 'account'])]),
(state, id) => state.getIn(['cards', id], null),
],
(statusBase, statusReblog, accountBase, accountReblog, card) => {
if (!statusBase) {
return null;
}
if (statusReblog) {
statusReblog = statusReblog.set('account', accountReblog);
} else {
statusReblog = null;
}
return statusBase.withMutations(map => {
map.set('reblog', statusReblog);
map.set('account', accountBase);
map.set('card', card);
});
}
);
};
export default makeStatusSelector;

2
app/javascript/mastodon/components/column_header.js
View File

@ -5,7 +5,7 @@ import { defineMessages, FormattedMessage, injectIntl } from 'react-intl';
import ImmutablePropTypes from 'react-immutable-proptypes';
// Glitch imports
import NotificationPurgeButtonsContainer from '../../glitch/components/column/notif_cleaning_widget/container';
import NotificationPurgeButtonsContainer from 'glitch/components/list/notif_cleaning_widget/container';
const messages = defineMessages({
show: { id: 'column_header.show_settings', defaultMessage: 'Show settings' },

4
app/javascript/mastodon/features/account_timeline/index.js
View File

@ -4,7 +4,7 @@ import ImmutablePropTypes from 'react-immutable-proptypes';
import PropTypes from 'prop-types';
import { fetchAccount } from '../../actions/accounts';
import { refreshAccountTimeline, expandAccountTimeline } from '../../actions/timelines';
import StatusList from '../../components/status_list';
import ListStatuses from 'glitch/components/list/statuses';
import LoadingIndicator from '../../components/loading_indicator';
import Column from '../ui/components/column';
import HeaderContainer from './containers/header_container';
@ -64,7 +64,7 @@ export default class AccountTimeline extends ImmutablePureComponent {
<Column>
<ColumnBackButton />
<StatusList
<ListStatuses
prepend={<HeaderContainer accountId={this.props.params.accountId} />}
scrollKey='account_timeline'
statusIds={statusIds}

4
app/javascript/mastodon/features/favourited_statuses/index.js
View File

@ -6,7 +6,7 @@ import { fetchFavouritedStatuses, expandFavouritedStatuses } from '../../actions
import Column from '../ui/components/column';
import ColumnHeader from '../../components/column_header';
import { addColumn, removeColumn, moveColumn } from '../../actions/columns';
import StatusList from '../../components/status_list';
import ListStatuses from 'glitch/components/list/statuses';
import { defineMessages, injectIntl } from 'react-intl';
import ImmutablePureComponent from 'react-immutable-pure-component';
@ -77,7 +77,7 @@ export default class Favourites extends ImmutablePureComponent {
multiColumn={multiColumn}
/>
<StatusList
<ListStatuses
trackScroll={!pinned}
statusIds={statusIds}
scrollKey={`favourited_statuses-${columnId}`}

25
app/javascript/mastodon/features/status/index.js
View File

@ -1,12 +1,17 @@
import React from 'react';
/*
import { connect } from 'react-redux';
*/
import PropTypes from 'prop-types';
/*
import ImmutablePropTypes from 'react-immutable-proptypes';
import { fetchStatus } from '../../actions/statuses';
import MissingIndicator from '../../components/missing_indicator';
import DetailedStatus from './components/detailed_status';
import ActionBar from './components/action_bar';
*/
import Column from '../ui/components/column';
/*
import {
favourite,
unfavourite,
@ -21,12 +26,16 @@ import { deleteStatus } from '../../actions/statuses';
import { initReport } from '../../actions/reports';
import { makeGetStatus } from '../../selectors';
import { ScrollContainer } from 'react-router-scroll';
*/
import ColumnBackButton from '../../components/column_back_button';
import StatusContainer from '../../../glitch/components/status/container';
import ListConversationContainer from 'glitch/components/list/conversation/container';
/*
import { openModal } from '../../actions/modal';
import { defineMessages, injectIntl } from 'react-intl';
import ImmutablePureComponent from 'react-immutable-pure-component';
*/
/*
const messages = defineMessages({
deleteConfirm: { id: 'confirmations.delete.confirm', defaultMessage: 'Delete' },
deleteMessage: { id: 'confirmations.delete.message', defaultMessage: 'Are you sure you want to delete this status?' },
@ -51,14 +60,18 @@ const makeMapStateToProps = () => {
@injectIntl
@connect(makeMapStateToProps)
export default class Status extends ImmutablePureComponent {
*/
export default class Status extends React.PureComponent {
/*
static contextTypes = {
router: PropTypes.object,
};
*/
static propTypes = {
params: PropTypes.object.isRequired,
/*
dispatch: PropTypes.func.isRequired,
status: ImmutablePropTypes.map,
settings: ImmutablePropTypes.map.isRequired,
@ -69,8 +82,10 @@ export default class Status extends ImmutablePureComponent {
deleteModal: PropTypes.bool,
autoPlayGif: PropTypes.bool,
intl: PropTypes.object.isRequired,
*/
};
/*
componentWillMount () {
this.props.dispatch(fetchStatus(Number(this.props.params.statusId)));
}
@ -142,8 +157,10 @@ export default class Status extends ImmutablePureComponent {
renderChildren (list) {
return list.map(id => <StatusContainer key={id} id={id} />);
}
*/
render () {
/*
let ancestors, descendants;
const { status, settings, ancestorsIds, descendantsIds, me, autoPlayGif } = this.props;
@ -163,11 +180,14 @@ export default class Status extends ImmutablePureComponent {
if (descendantsIds && descendantsIds.size > 0) {
descendants = <div>{this.renderChildren(descendantsIds)}</div>;
}
*/
return (
<Column>
<ColumnBackButton />
<ListConversationContainer id={this.props.params.id} />
{/*}
<ScrollContainer scrollKey='thread'>
<div className='scrollable detailed-status__wrapper'>
{ancestors}
@ -195,6 +215,7 @@ export default class Status extends ImmutablePureComponent {
{descendants}
</div>
</ScrollContainer>
{*/}
</Column>
);
}

4
app/javascript/mastodon/features/ui/containers/status_list_container.js
View File

@ -1,5 +1,5 @@
import { connect } from 'react-redux';
import StatusList from '../../../components/status_list';
import ListStatuses from 'glitch/components/list/statuses';
import { scrollTopTimeline } from '../../../actions/timelines';
import { Map as ImmutableMap, List as ImmutableList } from 'immutable';
import { createSelector } from 'reselect';
@ -70,4 +70,4 @@ const mapDispatchToProps = (dispatch, { timelineId, loadMore }) => ({
});
export default connect(makeMapStateToProps, mapDispatchToProps)(StatusList);
export default connect(makeMapStateToProps, mapDispatchToProps)(ListStatuses);

2
app/javascript/mastodon/features/ui/index.js
View File

@ -40,7 +40,7 @@ import {
// Dummy import, to make sure that <Status /> ends up in the application bundle.
// Without this it ends up in ~8 very commonly used bundles.
import '../../../glitch/components/status';
import 'glitch/components/status';
const mapStateToProps = state => ({
systemFontUi: state.getIn(['meta', 'system_font_ui']),

145
app/javascript/styles/components.scss
View File

@ -458,78 +458,6 @@
cursor: pointer;
}
// --- Extra clickable area in the status gutter ---
.ui.wide {
@mixin xtraspaces-full {
height: calc(100% + 10px);
bottom: -40px;
}
@mixin xtraspaces-short {
height: calc(100% - 35px);
bottom: 0;
}
// Avi must go on top if the toot is too short
.status__avatar {
z-index: 10;
}
// Base styles
.status__content--with-action > div::after {
content: '';
display: block;
width: 64px;
position: absolute;
left: -68px;
// more than 4 never fit on FullHD, short
@include xtraspaces-short;
}
@media screen and (min-width: 1800px) {
// 4, very wide screen
.column:nth-child(2):nth-last-child(4) {
&, & ~ .column {
.status__content--with-action > div::after {
@include xtraspaces-full;
}
}
}
}
// 1 or 2, always fit
.column:nth-child(2):nth-last-child(1),
.column:nth-child(2):nth-last-child(2),
.column:nth-child(2):nth-last-child(3) {
&, & ~ .column {
.status__content--with-action > div::after {
@include xtraspaces-full;
}
}
}
@media screen and (max-width: 1440px) {
// 3, small screen
.column:nth-child(2):nth-last-child(3) {
&, & ~ .column {
.status__content--with-action > div::after {
@include xtraspaces-short;
}
}
}
}
// Phone or iPad
@media screen and (max-width: 1060px) {
.status__content--with-action > div::after {
display: none;
}
}
// I am very sorry
}
// --- end extra clickable spaces ---
.status-check-box {
.status__content,
.reply-indicator__content {
@ -542,13 +470,11 @@
.status__content,
.reply-indicator__content {
position: relative;
font-size: 15px;
line-height: 20px;
color: $primary-text-color;
word-wrap: break-word;
font-weight: 400;
overflow: visible;
overflow: hidden;
white-space: pre-wrap;
.emojione {
@ -591,10 +517,19 @@
}
}
.status__content__spoiler {
.status__content__spoiler-link {
background: lighten($ui-base-color, 30%);
&:hover {
background: lighten($ui-base-color, 33%);
text-decoration: none;
}
}
.status__content__text {
display: none;
&.status__content__spoiler--visible {
&.status__content__text--visible {
display: block;
}
}
@ -603,30 +538,15 @@
.status__content__spoiler-link {
display: inline-block;
border-radius: 2px;
background: lighten($ui-base-color, 30%);
border: none;
background: transparent;
border: 0;
color: lighten($ui-base-color, 8%);
font-weight: 500;
font-size: 11px;
padding: 0 5px;
padding: 0 6px;
text-transform: uppercase;
line-height: inherit;
cursor: pointer;
vertical-align: bottom;
&:hover {
background: lighten($ui-base-color, 33%);
text-decoration: none;
}
.status__content__spoiler-icon {
display: inline-block;
margin: 0 0 0 5px;
border-left: 1px solid currentColor;
padding: 0 0 0 4px;
font-size: 16px;
vertical-align: -2px;
}
}
.status__prepend-icon-wrapper {
@ -712,41 +632,6 @@
}
}
}
&.collapsed {
background-position: center;
background-size: cover;
user-select: none;
&.has-background::before {
display: block;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
background-image: linear-gradient(to bottom, rgba($base-shadow-color, .75), rgba($base-shadow-color, .65) 24px, rgba($base-shadow-color, .8));
content: "";
}
.status__display-name:hover strong {
text-decoration: none;
}
.status__content {
height: 20px;
overflow: hidden;
text-overflow: ellipsis;
a:hover {
text-decoration: none;
}
}
}
.notification__message {
margin: -10px 0 10px;
}
}
.notification-favourite {

45
app/javascript/styles/variables.scss
View File

@ -28,5 +28,48 @@ $ui-primary-color: $classic-primary-color !default; // Lighter
$ui-secondary-color: $classic-secondary-color !default; // Lightest
$ui-highlight-color: $classic-highlight-color !default; // Vibrant
// Avatar border size (8% default, 100% for rounded avatars)
// Avatar border radius
// If you use this to mandate circular avatars for everybody, your
// users will probably hate you. It's gonna be a user setting.
$ui-avatar-border-size: 8%;
// * * * * * * * //
// Glitch shit
// -----------
$glitch-animation-speed: 1; // Multiplier for glitch CSS
// animations and transitions. A
// value of 0 disables animations;
// the default value provides slow
// animations that last .9s and
// fast ones that last .3s.
$glitch-aside-color: // This is used for the background
darken($white, 8%); // of aside content in eg preview
// cards. Counterpoint to
// $glitch-texture-color for use
// with white backgrounds.
$glitch-darker-color: // This is used for things which
darken($ui-base-color, 7%); // need a darker color than the
// "darkest" base color and matches
// the default UI color.
// Counterpoint to
// $glitch-lighter-color for use
// with dark elements.
$glitch-disabled-opacity: .35; // For disabled buttons
$glitch-texture-color: // This is used for shit that is
lighten($ui-base-color, 8%); // purely presentational and
// conveys no real information,
// like the borders at the bottom
// of statuses. It's also used as
// the background for direct toots.
$glitch-lighter-color: // This is used for hovered
lighten($ui-primary-color, 7%); // buttons and the like where we
// need something lighter than
// $ui-primary-color but darker
// than $ui-secondary-color.