Replace Backbone with React lightbox

background.html

@@ -100,6 +100,7 @@
         </div>
       </div>
     </div>
+    <div class='lightboxContainer'></div>
   </script>
   <script type='text/x-tmpl-mustache' id='scroll-down-button-view'>
     <button class='text {{ cssClass }}' alt='{{ moreBelow }}'>
@@ -223,15 +224,6 @@
       <span class='time'>0:00</span>
       <button class='close'><span class='icon'></span></button>
   </script>
-  <script type='text/x-tmpl-mustache' id='lightbox'>
-    <div class='content'>
-      <div class='controls'>
-        <a class='x close' alt='Close image.' href='#'></a>
-        <a class='save' alt='Save as...' href='#'></a>
-      </div>
-      <img class='image' src='{{ url }}' />
-    </div>
-  </script>
   <script type='text/x-tmpl-mustache' id='confirmation-dialog'>
     <div class="content">
       <div class='message'>{{ message }}</div>

js/views/attachment_view.js

@@ -4,6 +4,7 @@
 /* global moment: false */
 
 /* global i18n: false */
+/* global Signal: false */
 /* global textsecure: false */
 /* global Whisper: false */
 
@@ -92,8 +93,8 @@
     unload() {
       this.blob = null;
 
-      if (this.lightBoxView) {
+      if (this.lightboxView) {
-        this.lightBoxView.remove();
+        this.lightboxView.remove();
       }
       if (this.fileView) {
         this.fileView.remove();
@@ -111,14 +112,26 @@
       }
     },
     onClick() {
-      if (this.isImage()) {
+      if (!this.isImage()) {
-        this.lightBoxView = new Whisper.LightboxView({ model: this });
-        this.lightBoxView.render();
-        this.lightBoxView.$el.appendTo(this.el);
-        this.lightBoxView.$el.trigger('show');
-      } else {
         this.saveFile();
+        return;
       }
+
+      const lightboxContainer = document.querySelector('.lightboxContainer');
+      lightboxContainer.innerHTML = '';
+      lightboxContainer.style.display = 'block';
+
+      const props = {
+        imageURL: this.objectUrl,
+      };
+      this.lightboxView = new Whisper.ReactWrapperView({
+        Component: Signal.Components.Lightbox,
+        props,
+        onClose: () => {
+          lightboxContainer.style.display = 'none';
+        },
+      });
+      lightboxContainer.appendChild(this.lightboxView.el);
     },
     isVoiceMessage() {
       // eslint-disable-next-line no-bitwise

js/views/inbox_view.js

@@ -172,7 +172,6 @@
       'click .conversation': 'focusConversation',
       'select .gutter .conversation-list-item': 'openConversation',
       'input input.search': 'filterContacts',
-      'show .lightbox': 'showLightbox',
     },
     startConnectionListener() {
       this.interval = setInterval(() => {
@@ -259,9 +258,6 @@
         this.focusConversation();
       }
     },
-    showLightbox(e) {
-      this.$el.append(e.target);
-    },
     closeRecording(e) {
       if (e && this.$(e.target).closest('.capture-audio').length > 0) {
         return;

preload.js

@@ -162,6 +162,8 @@ window.Signal.Debug = require('./js/modules/debug');
 window.Signal.HTML = require('./ts/html');
 window.Signal.Logs = require('./js/modules/logs');
 
+// React components
+const { Lightbox } = require('./ts/components/Lightbox');
 const { MediaGallery } =
   require('./ts/components/conversation/media-gallery/MediaGallery');
 const { Quote } = require('./ts/components/conversation/Quote');
@@ -170,6 +172,7 @@ const PropTypesMessage =
   require('./ts/components/conversation/media-gallery/propTypes/Message');
 
 window.Signal.Components = {
+  Lightbox,
   MediaGallery,
   PropTypes: {
     Message: PropTypesMessage,

stylesheets/_lightbox.scss

@@ -1,59 +1,9 @@
-.lightbox {
+.lightboxContainer {
-  &.modal {
+  display: none;
-    padding: 30px;
-    text-align: center;
-    background-color: rgba(0,0,0,0.8);
-
-    .content {
-      margin: 0;
-      padding: 0 60px;
-      max-width: 100%;
-      height: 100%;
-      box-shadow: none;
-      background: transparent;
-
-      img {
-        display: block;
-        margin: auto;
-        max-width: 100%;
-        max-height: 100%;
-      }
-    }
-
-    .controls {
   position: absolute;
   top: 0;
-      right: 0;
+  left: 0;
-      width: 50px;
-    }
-
-    a {
-      background: transparent;
-      width: 50px;
-      height: 50px;
-      margin-bottom: 10px;
-
-      display: inline-block;
-      cursor: pointer;
-      border-radius: 50%;
-      padding: 3px;
-
-      &:before {
-        content: '';
-        display: block;
   width: 100%;
   height: 100%;
-      }
+  z-index: $z-index-modal;
-
-      &:hover {
-        background: $grey;
-      }
-    }
-
-    .save {
-      &:before {
-        @include color-svg('../images/save.svg', white);
-      }
-    }
-  }
 }

stylesheets/_variables.scss

@@ -12,6 +12,8 @@ $grey_d: #454545;
 $green: #47D647;
 $red: #EF8989;
 
+$z-index-modal: 100;
+
 @font-face {
   font-family: 'Roboto-Light';
   src: url('../fonts/Roboto-Light.ttf') format('truetype');

ts/components/Lightbox.tsx

@@ -0,0 +1,40 @@
+/**
+ * @prettier
+ */
+import React from 'react';
+
+
+interface Props {
+  imageURL?: string;
+  onClose: () => void;
+  close: () => void;
+}
+
+const styles = {
+  container: {
+    backgroundColor: 'rgba(0, 0, 0, 0.8)',
+    padding: 20,
+    width: '100%',
+    height: '100%',
+  },
+  image: {
+    maxWidth: '100%',
+    maxHeight: '100%',
+    objectFit: 'cover',
+  }
+};
+
+export class Lightbox extends React.Component<Props, {}> {
+  public render() {
+    const { imageURL } = this.props;
+    return (
+      <div style={styles.container}>
+        <img
+          style={styles.image}
+          src={imageURL}
+         />
+        <button onClick={this.props.close}>Close</button>
+      </div>
+    );
+  }
+}