djsundog/tootlab-mastodon
1
0
Fork 0
mirror of https://github.com/glitch-soc/mastodon.git synced 2024-11-30 03:50:13 -05:00
Code Issues Packages Projects Releases Wiki Activity

[WIP] Initial status work

Browse Source
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;
}
}
}

14
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,7 +66,10 @@ export default class Notification extends ImmutablePureComponent {
render () {
const { notification } = this.props;
switch(notification.get('type')) {
return (
<div class='status'>
{(() => {
switch (notification.get('type')) {
case 'follow':
return this.renderFollow(notification);
case 'mention':
@ -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;
}
}
}

283
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,
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']),
autoPlayGif: state.getIn(['meta', 'auto_play_gif']),
comrade: comrade || ownProps.comrade,
deleteModal: state.getIn(['meta', 'delete_modal']),
me: state.getIn(['meta', 'me']),
prepend: prepend || ownProps.prepend,
reblogModal: state.getIn(['meta', 'boost_modal']),
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;
}
}

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

File diff suppressed because it is too large Load Diff

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.