escape key closes image, video, or document preview

css/base.css

@@ -1610,6 +1610,7 @@ img.channel {
   line-height: 1.5rem;
   background-color: #eceff1;
   box-shadow: 0px -2px 3px -1px rgba(0,0,0,0.1); /* Faint shadow above panel */
+  z-index: 1;
 }
 
 #image-preview-container .material-icons {

src/widgets/doc-preview.jsx

@@ -17,6 +17,22 @@ export default class DocPreview extends React.PureComponent {
     super(props);
 
     this.handleSendDoc = this.handleSendDoc.bind(this);
+    this.handleKeyDown = this.handleKeyDown.bind(this);
+  }
+
+  componentDidMount() {
+    document.addEventListener('keydown', this.handleKeyDown);
+  }
+
+  componentWillUnmount() {
+    document.removeEventListener('keydown', this.handleKeyDown);
+  }
+
+  handleKeyDown(e) {
+    e.preventDefault();
+    if (e.key === 'Escape') {
+      this.props.onClose();
+    }
   }
 
   handleSendDoc(caption) {

src/widgets/image-preview.jsx

@@ -16,6 +16,26 @@ export default class ImagePreview extends React.PureComponent {
     };
 
     this.handleSendImage = this.handleSendImage.bind(this);
+    this.handleKeyDown = this.handleKeyDown.bind(this);
+  }
+
+  componentDidMount() {
+    document.addEventListener('keydown', this.handleKeyDown);
+  }
+
+  componentWillUnmount() {
+    document.removeEventListener('keydown', this.handleKeyDown);
+  }
+
+  handleKeyDown(e) {
+    if (this.props.onSendMessage) {
+      return;
+    }
+
+    e.preventDefault();
+    if (e.key === 'Escape') {
+      this.props.onClose();
+    }
   }
 
   assignWidth(node) {
@@ -64,7 +84,7 @@ export default class ImagePreview extends React.PureComponent {
           }
           <a href="#" onClick={(e) => {e.preventDefault(); this.props.onClose();}}><i className="material-icons gray">close</i></a>
         </div>
-        <div id="image-preview-container" ref={(node) => this.assignWidth(node)}>
+        <div id="image-preview-container" ref={node => this.assignWidth(node)}>
           <img src={this.props.content.url} style={size} className="image-preview" alt={this.props.content.filename} />
         </div>
         {this.props.onSendMessage ?

src/widgets/video-preview.jsx

@@ -19,6 +19,26 @@ class VideoPreview extends React.PureComponent {
     this.videoRef = React.createRef();
 
     this.handleSendVideo = this.handleSendVideo.bind(this);
+    this.handleKeyDown = this.handleKeyDown.bind(this);
+  }
+
+  componentDidMount() {
+    document.addEventListener('keydown', this.handleKeyDown);
+  }
+
+  componentWillUnmount() {
+    document.removeEventListener('keydown', this.handleKeyDown);
+  }
+
+  handleKeyDown(e) {
+    if (this.props.onSendMessage) {
+      return;
+    }
+
+    e.preventDefault();
+    if (e.key === 'Escape') {
+      this.props.onClose();
+    }
   }
 
   handleSendVideo(caption) {

umd/index.dev.js

@@ -12653,6 +12653,19 @@ class DocPreview extends (react__WEBPACK_IMPORTED_MODULE_0___default().PureCompo
   constructor(props) {
     super(props);
     this.handleSendDoc = this.handleSendDoc.bind(this);
+    this.handleKeyDown = this.handleKeyDown.bind(this);
+  }
+  componentDidMount() {
+    document.addEventListener('keydown', this.handleKeyDown);
+  }
+  componentWillUnmount() {
+    document.removeEventListener('keydown', this.handleKeyDown);
+  }
+  handleKeyDown(e) {
+    e.preventDefault();
+    if (e.key === 'Escape') {
+      this.props.onClose();
+    }
   }
   handleSendDoc(caption) {
     this.props.onClose();
@@ -13363,6 +13376,22 @@ class ImagePreview extends (react__WEBPACK_IMPORTED_MODULE_0___default().PureCom
       height: 0
     };
     this.handleSendImage = this.handleSendImage.bind(this);
+    this.handleKeyDown = this.handleKeyDown.bind(this);
+  }
+  componentDidMount() {
+    document.addEventListener('keydown', this.handleKeyDown);
+  }
+  componentWillUnmount() {
+    document.removeEventListener('keydown', this.handleKeyDown);
+  }
+  handleKeyDown(e) {
+    if (this.props.onSendMessage) {
+      return;
+    }
+    e.preventDefault();
+    if (e.key === 'Escape') {
+      this.props.onClose();
+    }
   }
   assignWidth(node) {
     if (node && !this.state.width) {
@@ -16140,6 +16169,22 @@ class VideoPreview extends (react__WEBPACK_IMPORTED_MODULE_0___default().PureCom
     super(props);
     this.videoRef = react__WEBPACK_IMPORTED_MODULE_0___default().createRef();
     this.handleSendVideo = this.handleSendVideo.bind(this);
+    this.handleKeyDown = this.handleKeyDown.bind(this);
+  }
+  componentDidMount() {
+    document.addEventListener('keydown', this.handleKeyDown);
+  }
+  componentWillUnmount() {
+    document.removeEventListener('keydown', this.handleKeyDown);
+  }
+  handleKeyDown(e) {
+    if (this.props.onSendMessage) {
+      return;
+    }
+    e.preventDefault();
+    if (e.key === 'Escape') {
+      this.props.onClose();
+    }
   }
   handleSendVideo(caption) {
     this.props.onClose();