Change media modals look in web UI (#15217)

- Change overlay background to match color of viewed image
- Add interactive reply/boost/favourite buttons to footer of modal
- Change ugly "View context" link to button among the action bar

2 files changed, 24 insertions, 12 deletions

diff --git a/app/javascript/mastodon/components/modal_root.js b/app/javascript/mastodon/components/modal_root.js
index fe573ffda..9bfc0e49f 100644
--- a/app/javascript/mastodon/components/modal_root.js
+++ b/app/javascript/mastodon/components/modal_root.js
@@ -1,12 +1,18 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import 'wicg-inert';
+import { normal } from 'color-blend';
 
 export default class ModalRoot extends React.PureComponent {
 
   static propTypes = {
     children: PropTypes.node,
     onClose: PropTypes.func.isRequired,
+    backgroundColor: PropTypes.shape({
+      r: PropTypes.number,
+      g: PropTypes.number,
+      b: PropTypes.number,
+    }),
   };
 
   activeElement = this.props.children ? document.activeElement : null;
@@ -62,9 +68,7 @@ export default class ModalRoot extends React.PureComponent {
       Promise.resolve().then(() => {
         this.activeElement.focus({ preventScroll: true });
         this.activeElement = null;
-      }).catch((error) => {
-        console.error(error);
-      });
+      }).catch(console.error);
     }
   }
 
@@ -91,10 +95,16 @@ export default class ModalRoot extends React.PureComponent {
       );
     }
 
+    let backgroundColor = null;
+
+    if (this.props.backgroundColor) {
+      backgroundColor = normal({ ...this.props.backgroundColor, a: 1 }, { r: 0, g: 0, b: 0, a: 0.3 });
+    }
+
     return (
       <div className='modal-root' ref={this.setRef}>
         <div style={{ pointerEvents: visible ? 'auto' : 'none' }}>
-          <div role='presentation' className='modal-root__overlay' onClick={onClose} />
+          <div role='presentation' className='modal-root__overlay' onClick={onClose} style={{ backgroundColor: backgroundColor ? `rgba(${backgroundColor.r}, ${backgroundColor.g}, ${backgroundColor.b}, 0.7)` : null }} />
           <div role='dialog' className='modal-root__container'>{children}</div>
         </div>
       </div>
diff --git a/app/javascript/mastodon/components/status.js b/app/javascript/mastodon/components/status.js
index 8f288bdf9..27d96e588 100644
--- a/app/javascript/mastodon/components/status.js
+++ b/app/javascript/mastodon/components/status.js
@@ -193,22 +193,24 @@ class Status extends ImmutablePureComponent {
   }
 
   handleOpenVideo = (media, options) => {
-    this.props.onOpenVideo(media, options);
+    this.props.onOpenVideo(this._properStatus().get('id'), media, options);
+  }
+
+  handleOpenMedia = (media, index) => {
+    this.props.onOpenMedia(this._properStatus().get('id'), media, index);
   }
 
   handleHotkeyOpenMedia = e => {
     const { onOpenMedia, onOpenVideo } = this.props;
-    const status = this._properStatus();
+    const statusId = this._properStatus().get('id');
 
     e.preventDefault();
 
     if (status.get('media_attachments').size > 0) {
-      if (status.getIn(['media_attachments', 0, 'type']) === 'audio') {
-        // TODO: toggle play/paused?
-      } else if (status.getIn(['media_attachments', 0, 'type']) === 'video') {
-        onOpenVideo(status.getIn(['media_attachments', 0]), { startTime: 0 });
+      if (status.getIn(['media_attachments', 0, 'type']) === 'video') {
+        onOpenVideo(statusId, status.getIn(['media_attachments', 0]), { startTime: 0 });
       } else {
-        onOpenMedia(status.get('media_attachments'), 0);
+        onOpenMedia(statusId, status.get('media_attachments'), 0);
       }
     }
   }
@@ -416,7 +418,7 @@ class Status extends ImmutablePureComponent {
                 media={status.get('media_attachments')}
                 sensitive={status.get('sensitive')}
                 height={110}
-                onOpenMedia={this.props.onOpenMedia}
+                onOpenMedia={this.handleOpenMedia}
                 cacheWidth={this.props.cacheMediaWidth}
                 defaultWidth={this.props.cachedMediaWidth}
                 visible={this.state.showMedia}