Compare commits
1 Commits
main
...
status-sty
Author | SHA1 | Date |
---|---|---|
kibigo! | 866e441df3 |
|
@ -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>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
|
@ -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%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
|
@ -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>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
}
|
|
@ -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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
|
@ -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;
|
|
@ -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;
|
||||||
|
}
|
||||||
|
}
|
|
@ -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>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
|
@ -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;
|
||||||
|
}
|
|
@ -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;
|
|
@ -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: "·";
|
||||||
|
}
|
||||||
|
}
|
|
@ -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);
|
|
@ -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,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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
|
@ -8,6 +8,7 @@ import ImmutablePureComponent from 'react-immutable-pure-component';
|
||||||
// Our imports //
|
// Our imports //
|
||||||
import StatusContainer from '../status/container';
|
import StatusContainer from '../status/container';
|
||||||
import NotificationFollow from './follow';
|
import NotificationFollow from './follow';
|
||||||
|
import NotificationOverlayContainer from './overlay/container';
|
||||||
|
|
||||||
export default class Notification extends ImmutablePureComponent {
|
export default class Notification extends ImmutablePureComponent {
|
||||||
|
|
||||||
|
@ -65,18 +66,25 @@ export default class Notification extends ImmutablePureComponent {
|
||||||
render () {
|
render () {
|
||||||
const { notification } = this.props;
|
const { notification } = this.props;
|
||||||
|
|
||||||
switch(notification.get('type')) {
|
return (
|
||||||
case 'follow':
|
<div class='status'>
|
||||||
return this.renderFollow(notification);
|
{(() => {
|
||||||
case 'mention':
|
switch (notification.get('type')) {
|
||||||
return this.renderMention(notification);
|
case 'follow':
|
||||||
case 'favourite':
|
return this.renderFollow(notification);
|
||||||
return this.renderFavourite(notification);
|
case 'mention':
|
||||||
case 'reblog':
|
return this.renderMention(notification);
|
||||||
return this.renderReblog(notification);
|
case 'favourite':
|
||||||
}
|
return this.renderFavourite(notification);
|
||||||
|
case 'reblog':
|
||||||
return null;
|
return this.renderReblog(notification);
|
||||||
|
default:
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
})()}
|
||||||
|
<NotificationOverlayContainer notification={notification} />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
|
@ -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';
|
import { connect } from 'react-redux';
|
||||||
|
|
||||||
// Our imports //
|
// Mastodon imports.
|
||||||
|
import { markNotificationForDelete } from 'mastodon/actions/notifications';
|
||||||
|
|
||||||
|
// Our imports.
|
||||||
import NotificationOverlay from './notification_overlay';
|
import NotificationOverlay from './notification_overlay';
|
||||||
import { markNotificationForDelete } from '../../../../mastodon/actions/notifications';
|
|
||||||
|
|
||||||
// * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
|
// State mapping
|
||||||
|
// -------------
|
||||||
|
|
||||||
/*
|
const mapStateToProps = state => ({
|
||||||
|
show: state.getIn(['notifications', 'cleaningMode']),
|
||||||
|
});
|
||||||
|
|
||||||
Dispatch mapping:
|
// 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.
|
|
||||||
|
|
||||||
*/
|
|
||||||
|
|
||||||
const mapDispatchToProps = dispatch => ({
|
const mapDispatchToProps = dispatch => ({
|
||||||
onMarkForDelete(id, yes) {
|
onMarkForDelete(id, yes) {
|
||||||
|
@ -42,8 +36,4 @@ const mapDispatchToProps = dispatch => ({
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
const mapStateToProps = state => ({
|
|
||||||
show: state.getIn(['notifications', 'cleaningMode']),
|
|
||||||
});
|
|
||||||
|
|
||||||
export default connect(mapStateToProps, mapDispatchToProps)(NotificationOverlay);
|
export default connect(mapStateToProps, mapDispatchToProps)(NotificationOverlay);
|
||||||
|
|
|
@ -10,10 +10,6 @@ import PropTypes from 'prop-types';
|
||||||
import ImmutablePureComponent from 'react-immutable-pure-component';
|
import ImmutablePureComponent from 'react-immutable-pure-component';
|
||||||
import { defineMessages, injectIntl } from 'react-intl';
|
import { defineMessages, injectIntl } from 'react-intl';
|
||||||
|
|
||||||
// Mastodon imports //
|
|
||||||
|
|
||||||
// * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
|
|
||||||
|
|
||||||
const messages = defineMessages({
|
const messages = defineMessages({
|
||||||
markForDeletion: { id: 'notification.markForDeletion', defaultMessage: 'Mark for deletion' },
|
markForDeletion: { id: 'notification.markForDeletion', defaultMessage: 'Mark for deletion' },
|
||||||
});
|
});
|
||||||
|
|
|
@ -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>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
|
@ -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>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
|
@ -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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
|
@ -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
|
// For more information, please contact:
|
||||||
tootsuite/mastodon. Documentation by @kibi@glitch.social. The code
|
// @kibi@glitch.social
|
||||||
detecting reblogs has been moved here from <Status>.
|
|
||||||
|
|
||||||
*/
|
// * * * * * * * //
|
||||||
|
|
||||||
/* * * * */
|
// Imports
|
||||||
|
// -------
|
||||||
|
|
||||||
/*
|
// Package imports.
|
||||||
|
|
||||||
Imports:
|
|
||||||
--------
|
|
||||||
|
|
||||||
*/
|
|
||||||
|
|
||||||
// Package imports //
|
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import { connect } from 'react-redux';
|
|
||||||
import {
|
import {
|
||||||
defineMessages,
|
defineMessages,
|
||||||
injectIntl,
|
injectIntl,
|
||||||
FormattedMessage,
|
FormattedMessage,
|
||||||
} from 'react-intl';
|
} from 'react-intl';
|
||||||
|
import { connect } from 'react-redux';
|
||||||
|
import { withRouter } from 'react-router';
|
||||||
|
import { createStructuredSelector } from 'reselect';
|
||||||
|
|
||||||
// Mastodon imports //
|
// Mastodon imports.
|
||||||
import { makeGetStatus } from '../../../mastodon/selectors';
|
import { blockAccount, muteAccount } from 'mastodon/actions/accounts';
|
||||||
import {
|
import {
|
||||||
replyCompose,
|
replyCompose,
|
||||||
mentionCompose,
|
mentionCompose,
|
||||||
} from '../../../mastodon/actions/compose';
|
} from 'mastodon/actions/compose';
|
||||||
import {
|
import {
|
||||||
reblog,
|
reblog,
|
||||||
favourite,
|
favourite,
|
||||||
unreblog,
|
unreblog,
|
||||||
unfavourite,
|
unfavourite,
|
||||||
} from '../../../mastodon/actions/interactions';
|
} from 'mastodon/actions/interactions';
|
||||||
import {
|
import { openModal } from 'mastodon/actions/modal';
|
||||||
blockAccount,
|
import { initReport } from 'mastodon/actions/reports';
|
||||||
muteAccount,
|
|
||||||
} from '../../../mastodon/actions/accounts';
|
|
||||||
import {
|
import {
|
||||||
muteStatus,
|
muteStatus,
|
||||||
unmuteStatus,
|
unmuteStatus,
|
||||||
deleteStatus,
|
deleteStatus,
|
||||||
} from '../../../mastodon/actions/statuses';
|
} from 'mastodon/actions/statuses';
|
||||||
import { initReport } from '../../../mastodon/actions/reports';
|
import { fetchStatusCard } from 'mastodon/actions/cards';
|
||||||
import { openModal } from '../../../mastodon/actions/modal';
|
|
||||||
|
|
||||||
// Our imports //
|
// Our imports.
|
||||||
import Status from '.';
|
import Status from '.';
|
||||||
|
import makeStatusSelector from 'glitch/selectors/status';
|
||||||
|
|
||||||
/* * * * */
|
// * * * * * * * //
|
||||||
|
|
||||||
/*
|
// Initial setup
|
||||||
|
// -------------
|
||||||
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.
|
|
||||||
|
|
||||||
*/
|
|
||||||
|
|
||||||
|
// Localization messages.
|
||||||
const messages = defineMessages({
|
const messages = defineMessages({
|
||||||
|
blockConfirm : {
|
||||||
|
id : 'confirmations.block.confirm',
|
||||||
|
defaultMessage : 'Block',
|
||||||
|
},
|
||||||
deleteConfirm : {
|
deleteConfirm : {
|
||||||
id : 'confirmations.delete.confirm',
|
id : 'confirmations.delete.confirm',
|
||||||
defaultMessage : 'Delete',
|
defaultMessage : 'Delete',
|
||||||
|
@ -76,176 +67,146 @@ const messages = defineMessages({
|
||||||
id : 'confirmations.delete.message',
|
id : 'confirmations.delete.message',
|
||||||
defaultMessage : 'Are you sure you want to delete this status?',
|
defaultMessage : 'Are you sure you want to delete this status?',
|
||||||
},
|
},
|
||||||
blockConfirm : {
|
|
||||||
id : 'confirmations.block.confirm',
|
|
||||||
defaultMessage : 'Block',
|
|
||||||
},
|
|
||||||
muteConfirm : {
|
muteConfirm : {
|
||||||
id : 'confirmations.mute.confirm',
|
id : 'confirmations.mute.confirm',
|
||||||
defaultMessage : 'Mute',
|
defaultMessage : 'Mute',
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
/* * * * */
|
// * * * * * * * //
|
||||||
|
|
||||||
/*
|
// State mapping
|
||||||
|
// -------------
|
||||||
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.
|
|
||||||
|
|
||||||
*/
|
|
||||||
|
|
||||||
|
// We wrap our `mapStateToProps()` function in a
|
||||||
|
// `makeMapStateToProps()` to give us a closure and preserve
|
||||||
|
// `makeGetStatus()`'s value.
|
||||||
const makeMapStateToProps = () => {
|
const makeMapStateToProps = () => {
|
||||||
const getStatus = makeGetStatus();
|
const statusSelector = makeStatusSelector();
|
||||||
|
|
||||||
const mapStateToProps = (state, ownProps) => {
|
// State mapping.
|
||||||
|
return (state, ownProps) => {
|
||||||
let status = getStatus(state, ownProps.id);
|
let status = statusSelector(state, ownProps.id);
|
||||||
let reblogStatus = status.get('reblog', null);
|
let reblogStatus = status.get('reblog', null);
|
||||||
let account = undefined;
|
let comrade = undefined;
|
||||||
let prepend = undefined;
|
let prepend = undefined;
|
||||||
|
|
||||||
/*
|
// Processes reblogs and generates their prepend.
|
||||||
|
|
||||||
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.
|
|
||||||
|
|
||||||
*/
|
|
||||||
|
|
||||||
if (reblogStatus !== null && typeof reblogStatus === 'object') {
|
if (reblogStatus !== null && typeof reblogStatus === 'object') {
|
||||||
account = status.get('account');
|
comrade = status.get('account');
|
||||||
status = reblogStatus;
|
status = reblogStatus;
|
||||||
prepend = 'reblogged_by';
|
prepend = 'reblogged';
|
||||||
}
|
}
|
||||||
|
|
||||||
/*
|
// This is what we pass to <Status>.
|
||||||
|
|
||||||
Here are the props we pass to `<Status>`.
|
|
||||||
|
|
||||||
*/
|
|
||||||
|
|
||||||
return {
|
return {
|
||||||
status : status,
|
autoPlayGif: state.getIn(['meta', 'auto_play_gif']),
|
||||||
account : account || ownProps.account,
|
comrade: comrade || ownProps.comrade,
|
||||||
me : state.getIn(['meta', 'me']),
|
deleteModal: state.getIn(['meta', 'delete_modal']),
|
||||||
settings : state.get('local_settings'),
|
me: state.getIn(['meta', 'me']),
|
||||||
prepend : prepend || ownProps.prepend,
|
prepend: prepend || ownProps.prepend,
|
||||||
reblogModal : state.getIn(['meta', 'boost_modal']),
|
reblogModal: state.getIn(['meta', 'boost_modal']),
|
||||||
deleteModal : state.getIn(['meta', 'delete_modal']),
|
settings: state.get('local_settings'),
|
||||||
autoPlayGif : state.getIn(['meta', 'auto_play_gif']),
|
status: status,
|
||||||
};
|
};
|
||||||
};
|
};
|
||||||
|
|
||||||
return mapStateToProps;
|
|
||||||
};
|
};
|
||||||
|
|
||||||
/* * * * */
|
// * * * * * * * //
|
||||||
|
|
||||||
/*
|
// Dispatch mapping
|
||||||
|
// ----------------
|
||||||
|
|
||||||
Dispatch mapping:
|
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'))),
|
||||||
|
}));
|
||||||
|
},
|
||||||
|
delete (status) {
|
||||||
|
if (!this.deleteModal) { // TODO: THIS IS BORKN (this refers to handler)
|
||||||
|
dispatch(deleteStatus(status.get('id')));
|
||||||
|
} else {
|
||||||
|
dispatch(openModal('CONFIRM', {
|
||||||
|
message: intl.formatMessage(messages.deleteMessage),
|
||||||
|
confirm: intl.formatMessage(messages.deleteConfirm),
|
||||||
|
onConfirm: () => dispatch(deleteStatus(status.get('id'))),
|
||||||
|
}));
|
||||||
|
}
|
||||||
|
},
|
||||||
|
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));
|
||||||
|
},
|
||||||
|
modalReblog (status) {
|
||||||
|
dispatch(reblog(status));
|
||||||
|
},
|
||||||
|
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'))),
|
||||||
|
}));
|
||||||
|
},
|
||||||
|
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);
|
||||||
|
};
|
||||||
|
|
||||||
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
|
// Connecting
|
||||||
just immediately execute their corresponding actions.
|
// ----------
|
||||||
|
|
||||||
*/
|
|
||||||
|
|
||||||
const mapDispatchToProps = (dispatch, { intl }) => ({
|
|
||||||
|
|
||||||
onReply (status, router) {
|
|
||||||
dispatch(replyCompose(status, router));
|
|
||||||
},
|
|
||||||
|
|
||||||
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) {
|
|
||||||
dispatch(deleteStatus(status.get('id')));
|
|
||||||
} else {
|
|
||||||
dispatch(openModal('CONFIRM', {
|
|
||||||
message: intl.formatMessage(messages.deleteMessage),
|
|
||||||
confirm: intl.formatMessage(messages.deleteConfirm),
|
|
||||||
onConfirm: () => dispatch(deleteStatus(status.get('id'))),
|
|
||||||
}));
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
onMention (account, router) {
|
|
||||||
dispatch(mentionCompose(account, router));
|
|
||||||
},
|
|
||||||
|
|
||||||
onOpenMedia (media, index) {
|
|
||||||
dispatch(openModal('MEDIA', { media, index }));
|
|
||||||
},
|
|
||||||
|
|
||||||
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) {
|
|
||||||
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) {
|
|
||||||
if (status.get('muted')) {
|
|
||||||
dispatch(unmuteStatus(status.get('id')));
|
|
||||||
} else {
|
|
||||||
dispatch(muteStatus(status.get('id')));
|
|
||||||
}
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
|
// `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(
|
export default injectIntl(
|
||||||
connect(makeMapStateToProps, mapDispatchToProps)(Status)
|
connect(makeMapStateToProps, makeMapDispatchToProps)(
|
||||||
|
withRouter(Status)
|
||||||
|
)
|
||||||
);
|
);
|
||||||
|
|
|
@ -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>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
|
@ -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>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
|
@ -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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
|
@ -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>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
|
@ -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>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
|
@ -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
|
|
@ -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>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
|
@ -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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
|
@ -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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
|
@ -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>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
|
@ -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;
|
||||||
|
}
|
||||||
|
}
|
|
@ -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,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>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
|
@ -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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
|
@ -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>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
|
@ -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>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
|
@ -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>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
|
@ -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>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
|
@ -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;
|
||||||
|
}
|
||||||
|
}
|
File diff suppressed because it is too large
Load Diff
|
@ -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,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>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
|
@ -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>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
|
@ -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>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
|
@ -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;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
|
@ -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;
|
||||||
|
}
|
||||||
|
}
|
|
@ -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;
|
||||||
|
}
|
||||||
|
}
|
|
@ -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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
|
@ -0,0 +1,7 @@
|
||||||
|
import { createStructuredSelector } from 'reselect';
|
||||||
|
|
||||||
|
const makeIntlSelector = () => createStructuredSelector({
|
||||||
|
intl: ({ intl }) => intl,
|
||||||
|
});
|
||||||
|
|
||||||
|
export default makeIntlSelector;
|
|
@ -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;
|
|
@ -5,7 +5,7 @@ import { defineMessages, FormattedMessage, injectIntl } from 'react-intl';
|
||||||
import ImmutablePropTypes from 'react-immutable-proptypes';
|
import ImmutablePropTypes from 'react-immutable-proptypes';
|
||||||
|
|
||||||
// Glitch imports
|
// 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({
|
const messages = defineMessages({
|
||||||
show: { id: 'column_header.show_settings', defaultMessage: 'Show settings' },
|
show: { id: 'column_header.show_settings', defaultMessage: 'Show settings' },
|
||||||
|
|
|
@ -4,7 +4,7 @@ import ImmutablePropTypes from 'react-immutable-proptypes';
|
||||||
import PropTypes from 'prop-types';
|
import PropTypes from 'prop-types';
|
||||||
import { fetchAccount } from '../../actions/accounts';
|
import { fetchAccount } from '../../actions/accounts';
|
||||||
import { refreshAccountTimeline, expandAccountTimeline } from '../../actions/timelines';
|
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 LoadingIndicator from '../../components/loading_indicator';
|
||||||
import Column from '../ui/components/column';
|
import Column from '../ui/components/column';
|
||||||
import HeaderContainer from './containers/header_container';
|
import HeaderContainer from './containers/header_container';
|
||||||
|
@ -64,7 +64,7 @@ export default class AccountTimeline extends ImmutablePureComponent {
|
||||||
<Column>
|
<Column>
|
||||||
<ColumnBackButton />
|
<ColumnBackButton />
|
||||||
|
|
||||||
<StatusList
|
<ListStatuses
|
||||||
prepend={<HeaderContainer accountId={this.props.params.accountId} />}
|
prepend={<HeaderContainer accountId={this.props.params.accountId} />}
|
||||||
scrollKey='account_timeline'
|
scrollKey='account_timeline'
|
||||||
statusIds={statusIds}
|
statusIds={statusIds}
|
||||||
|
|
|
@ -6,7 +6,7 @@ import { fetchFavouritedStatuses, expandFavouritedStatuses } from '../../actions
|
||||||
import Column from '../ui/components/column';
|
import Column from '../ui/components/column';
|
||||||
import ColumnHeader from '../../components/column_header';
|
import ColumnHeader from '../../components/column_header';
|
||||||
import { addColumn, removeColumn, moveColumn } from '../../actions/columns';
|
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 { defineMessages, injectIntl } from 'react-intl';
|
||||||
import ImmutablePureComponent from 'react-immutable-pure-component';
|
import ImmutablePureComponent from 'react-immutable-pure-component';
|
||||||
|
|
||||||
|
@ -77,7 +77,7 @@ export default class Favourites extends ImmutablePureComponent {
|
||||||
multiColumn={multiColumn}
|
multiColumn={multiColumn}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<StatusList
|
<ListStatuses
|
||||||
trackScroll={!pinned}
|
trackScroll={!pinned}
|
||||||
statusIds={statusIds}
|
statusIds={statusIds}
|
||||||
scrollKey={`favourited_statuses-${columnId}`}
|
scrollKey={`favourited_statuses-${columnId}`}
|
||||||
|
|
|
@ -1,12 +1,17 @@
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
|
/*
|
||||||
import { connect } from 'react-redux';
|
import { connect } from 'react-redux';
|
||||||
|
*/
|
||||||
import PropTypes from 'prop-types';
|
import PropTypes from 'prop-types';
|
||||||
|
/*
|
||||||
import ImmutablePropTypes from 'react-immutable-proptypes';
|
import ImmutablePropTypes from 'react-immutable-proptypes';
|
||||||
import { fetchStatus } from '../../actions/statuses';
|
import { fetchStatus } from '../../actions/statuses';
|
||||||
import MissingIndicator from '../../components/missing_indicator';
|
import MissingIndicator from '../../components/missing_indicator';
|
||||||
import DetailedStatus from './components/detailed_status';
|
import DetailedStatus from './components/detailed_status';
|
||||||
import ActionBar from './components/action_bar';
|
import ActionBar from './components/action_bar';
|
||||||
|
*/
|
||||||
import Column from '../ui/components/column';
|
import Column from '../ui/components/column';
|
||||||
|
/*
|
||||||
import {
|
import {
|
||||||
favourite,
|
favourite,
|
||||||
unfavourite,
|
unfavourite,
|
||||||
|
@ -21,12 +26,16 @@ import { deleteStatus } from '../../actions/statuses';
|
||||||
import { initReport } from '../../actions/reports';
|
import { initReport } from '../../actions/reports';
|
||||||
import { makeGetStatus } from '../../selectors';
|
import { makeGetStatus } from '../../selectors';
|
||||||
import { ScrollContainer } from 'react-router-scroll';
|
import { ScrollContainer } from 'react-router-scroll';
|
||||||
|
*/
|
||||||
import ColumnBackButton from '../../components/column_back_button';
|
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 { openModal } from '../../actions/modal';
|
||||||
import { defineMessages, injectIntl } from 'react-intl';
|
import { defineMessages, injectIntl } from 'react-intl';
|
||||||
import ImmutablePureComponent from 'react-immutable-pure-component';
|
import ImmutablePureComponent from 'react-immutable-pure-component';
|
||||||
|
*/
|
||||||
|
|
||||||
|
/*
|
||||||
const messages = defineMessages({
|
const messages = defineMessages({
|
||||||
deleteConfirm: { id: 'confirmations.delete.confirm', defaultMessage: 'Delete' },
|
deleteConfirm: { id: 'confirmations.delete.confirm', defaultMessage: 'Delete' },
|
||||||
deleteMessage: { id: 'confirmations.delete.message', defaultMessage: 'Are you sure you want to delete this status?' },
|
deleteMessage: { id: 'confirmations.delete.message', defaultMessage: 'Are you sure you want to delete this status?' },
|
||||||
|
@ -51,14 +60,18 @@ const makeMapStateToProps = () => {
|
||||||
|
|
||||||
@injectIntl
|
@injectIntl
|
||||||
@connect(makeMapStateToProps)
|
@connect(makeMapStateToProps)
|
||||||
export default class Status extends ImmutablePureComponent {
|
*/
|
||||||
|
export default class Status extends React.PureComponent {
|
||||||
|
|
||||||
|
/*
|
||||||
static contextTypes = {
|
static contextTypes = {
|
||||||
router: PropTypes.object,
|
router: PropTypes.object,
|
||||||
};
|
};
|
||||||
|
*/
|
||||||
|
|
||||||
static propTypes = {
|
static propTypes = {
|
||||||
params: PropTypes.object.isRequired,
|
params: PropTypes.object.isRequired,
|
||||||
|
/*
|
||||||
dispatch: PropTypes.func.isRequired,
|
dispatch: PropTypes.func.isRequired,
|
||||||
status: ImmutablePropTypes.map,
|
status: ImmutablePropTypes.map,
|
||||||
settings: ImmutablePropTypes.map.isRequired,
|
settings: ImmutablePropTypes.map.isRequired,
|
||||||
|
@ -69,8 +82,10 @@ export default class Status extends ImmutablePureComponent {
|
||||||
deleteModal: PropTypes.bool,
|
deleteModal: PropTypes.bool,
|
||||||
autoPlayGif: PropTypes.bool,
|
autoPlayGif: PropTypes.bool,
|
||||||
intl: PropTypes.object.isRequired,
|
intl: PropTypes.object.isRequired,
|
||||||
|
*/
|
||||||
};
|
};
|
||||||
|
|
||||||
|
/*
|
||||||
componentWillMount () {
|
componentWillMount () {
|
||||||
this.props.dispatch(fetchStatus(Number(this.props.params.statusId)));
|
this.props.dispatch(fetchStatus(Number(this.props.params.statusId)));
|
||||||
}
|
}
|
||||||
|
@ -142,8 +157,10 @@ export default class Status extends ImmutablePureComponent {
|
||||||
renderChildren (list) {
|
renderChildren (list) {
|
||||||
return list.map(id => <StatusContainer key={id} id={id} />);
|
return list.map(id => <StatusContainer key={id} id={id} />);
|
||||||
}
|
}
|
||||||
|
*/
|
||||||
|
|
||||||
render () {
|
render () {
|
||||||
|
/*
|
||||||
let ancestors, descendants;
|
let ancestors, descendants;
|
||||||
const { status, settings, ancestorsIds, descendantsIds, me, autoPlayGif } = this.props;
|
const { status, settings, ancestorsIds, descendantsIds, me, autoPlayGif } = this.props;
|
||||||
|
|
||||||
|
@ -163,11 +180,14 @@ export default class Status extends ImmutablePureComponent {
|
||||||
if (descendantsIds && descendantsIds.size > 0) {
|
if (descendantsIds && descendantsIds.size > 0) {
|
||||||
descendants = <div>{this.renderChildren(descendantsIds)}</div>;
|
descendants = <div>{this.renderChildren(descendantsIds)}</div>;
|
||||||
}
|
}
|
||||||
|
*/
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Column>
|
<Column>
|
||||||
<ColumnBackButton />
|
<ColumnBackButton />
|
||||||
|
|
||||||
|
<ListConversationContainer id={this.props.params.id} />
|
||||||
|
{/*}
|
||||||
<ScrollContainer scrollKey='thread'>
|
<ScrollContainer scrollKey='thread'>
|
||||||
<div className='scrollable detailed-status__wrapper'>
|
<div className='scrollable detailed-status__wrapper'>
|
||||||
{ancestors}
|
{ancestors}
|
||||||
|
@ -195,6 +215,7 @@ export default class Status extends ImmutablePureComponent {
|
||||||
{descendants}
|
{descendants}
|
||||||
</div>
|
</div>
|
||||||
</ScrollContainer>
|
</ScrollContainer>
|
||||||
|
{*/}
|
||||||
</Column>
|
</Column>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
import { connect } from 'react-redux';
|
import { connect } from 'react-redux';
|
||||||
import StatusList from '../../../components/status_list';
|
import ListStatuses from 'glitch/components/list/statuses';
|
||||||
import { scrollTopTimeline } from '../../../actions/timelines';
|
import { scrollTopTimeline } from '../../../actions/timelines';
|
||||||
import { Map as ImmutableMap, List as ImmutableList } from 'immutable';
|
import { Map as ImmutableMap, List as ImmutableList } from 'immutable';
|
||||||
import { createSelector } from 'reselect';
|
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);
|
||||||
|
|
|
@ -40,7 +40,7 @@ import {
|
||||||
|
|
||||||
// Dummy import, to make sure that <Status /> ends up in the application bundle.
|
// Dummy import, to make sure that <Status /> ends up in the application bundle.
|
||||||
// Without this it ends up in ~8 very commonly used bundles.
|
// Without this it ends up in ~8 very commonly used bundles.
|
||||||
import '../../../glitch/components/status';
|
import 'glitch/components/status';
|
||||||
|
|
||||||
const mapStateToProps = state => ({
|
const mapStateToProps = state => ({
|
||||||
systemFontUi: state.getIn(['meta', 'system_font_ui']),
|
systemFontUi: state.getIn(['meta', 'system_font_ui']),
|
||||||
|
|
|
@ -458,78 +458,6 @@
|
||||||
cursor: pointer;
|
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-check-box {
|
||||||
.status__content,
|
.status__content,
|
||||||
.reply-indicator__content {
|
.reply-indicator__content {
|
||||||
|
@ -542,13 +470,11 @@
|
||||||
|
|
||||||
.status__content,
|
.status__content,
|
||||||
.reply-indicator__content {
|
.reply-indicator__content {
|
||||||
position: relative;
|
|
||||||
font-size: 15px;
|
font-size: 15px;
|
||||||
line-height: 20px;
|
line-height: 20px;
|
||||||
color: $primary-text-color;
|
|
||||||
word-wrap: break-word;
|
word-wrap: break-word;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
overflow: visible;
|
overflow: hidden;
|
||||||
white-space: pre-wrap;
|
white-space: pre-wrap;
|
||||||
|
|
||||||
.emojione {
|
.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;
|
display: none;
|
||||||
|
|
||||||
&.status__content__spoiler--visible {
|
&.status__content__text--visible {
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -603,30 +538,15 @@
|
||||||
.status__content__spoiler-link {
|
.status__content__spoiler-link {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
border-radius: 2px;
|
border-radius: 2px;
|
||||||
background: lighten($ui-base-color, 30%);
|
background: transparent;
|
||||||
border: none;
|
border: 0;
|
||||||
color: lighten($ui-base-color, 8%);
|
color: lighten($ui-base-color, 8%);
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
font-size: 11px;
|
font-size: 11px;
|
||||||
padding: 0 5px;
|
padding: 0 6px;
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
line-height: inherit;
|
line-height: inherit;
|
||||||
cursor: pointer;
|
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 {
|
.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 {
|
.notification-favourite {
|
||||||
|
|
|
@ -28,5 +28,48 @@ $ui-primary-color: $classic-primary-color !default; // Lighter
|
||||||
$ui-secondary-color: $classic-secondary-color !default; // Lightest
|
$ui-secondary-color: $classic-secondary-color !default; // Lightest
|
||||||
$ui-highlight-color: $classic-highlight-color !default; // Vibrant
|
$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%;
|
$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.
|
||||||
|
|
Reference in New Issue