Adds spoiler hotkey support to detailed statuses

2 files changed, 19 insertions, 2 deletions

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}
         />
 
         <div className='detailed-status__meta'>
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}
                 />
 
                 <ActionBar