diff --git a/app/javascript/themes/glitch/features/status/components/detailed_status.js b/app/javascript/themes/glitch/features/status/components/detailed_status.js
index 7606bfbf3..df78ce4b6 100644
--- a/app/javascript/themes/glitch/features/status/components/detailed_status.js
+++ b/app/javascript/themes/glitch/features/status/components/detailed_status.js
@@ -41,7 +41,7 @@ export default class DetailedStatus extends ImmutablePureComponent {
render () {
const status = this.props.status.get('reblog') ? this.props.status.get('reblog') : this.props.status;
- const { settings } = this.props;
+ const { expanded, setExpansion, settings } = this.props;
let media = '';
let mediaIcon = null;
@@ -109,6 +109,8 @@ export default class DetailedStatus extends ImmutablePureComponent {
status={status}
media={media}
mediaIcon={mediaIcon}
+ expanded={expanded}
+ setExpansion={setExpansion}
/>
diff --git a/app/javascript/themes/glitch/features/status/index.js b/app/javascript/themes/glitch/features/status/index.js
index 57af94a9a..8561bd4de 100644
--- a/app/javascript/themes/glitch/features/status/index.js
+++ b/app/javascript/themes/glitch/features/status/index.js
@@ -71,6 +71,7 @@ export default class Status extends ImmutablePureComponent {
state = {
fullscreen: false,
+ isExpanded: null,
};
componentWillMount () {
@@ -88,6 +89,12 @@ export default class Status extends ImmutablePureComponent {
}
}
+ handleExpandedToggle = () => {
+ if (this.props.status.get('spoiler_text')) {
+ this.setExpansion(this.state.isExpanded ? null : true);
+ }
+ };
+
handleFavouriteClick = (status) => {
if (status.get('favourited')) {
this.props.dispatch(unfavourite(status));
@@ -241,6 +248,10 @@ export default class Status extends ImmutablePureComponent {
));
}
+ setExpansion = value => {
+ this.setState({ isExpanded: value ? true : null });
+ }
+
setRef = c => {
this.node = c;
}
@@ -272,8 +283,9 @@ export default class Status extends ImmutablePureComponent {
render () {
let ancestors, descendants;
+ const { setExpansion } = this;
const { status, settings, ancestorsIds, descendantsIds } = this.props;
- const { fullscreen } = this.state;
+ const { fullscreen, isExpanded } = this.state;
if (status === null) {
return (
@@ -300,6 +312,7 @@ export default class Status extends ImmutablePureComponent {
boost: this.handleHotkeyBoost,
mention: this.handleHotkeyMention,
openProfile: this.handleHotkeyOpenProfile,
+ toggleSpoiler: this.handleExpandedToggle,
};
return (
@@ -317,6 +330,8 @@ export default class Status extends ImmutablePureComponent {
settings={settings}
onOpenVideo={this.handleOpenVideo}
onOpenMedia={this.handleOpenMedia}
+ expanded={isExpanded}
+ setExpansion={setExpansion}
/>