From 4a5a2cb5c1b42b62b98d23c66e04f5a4e9fd8d14 Mon Sep 17 00:00:00 2001
From: Daniel Gasienica <daniel@signal.org>
Date: Sat, 14 Apr 2018 23:27:03 -0400
Subject: [PATCH] Replace Backbone with React lightbox

---
 background.html             | 10 +-----
 js/views/attachment_view.js | 29 +++++++++++-----
 js/views/inbox_view.js      |  4 ---
 preload.js                  |  3 ++
 stylesheets/_lightbox.scss  | 66 +++++--------------------------------
 stylesheets/_variables.scss |  2 ++
 ts/components/Lightbox.tsx  | 40 ++++++++++++++++++++++
 7 files changed, 75 insertions(+), 79 deletions(-)
 create mode 100644 ts/components/Lightbox.tsx

diff --git a/background.html b/background.html
index 98b8b3c044e..a06ad0abc48 100644
--- a/background.html
+++ b/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>
diff --git a/js/views/attachment_view.js b/js/views/attachment_view.js
index b82614ef374..b1544ff2741 100644
--- a/js/views/attachment_view.js
+++ b/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) {
-        this.lightBoxView.remove();
+      if (this.lightboxView) {
+        this.lightboxView.remove();
       }
       if (this.fileView) {
         this.fileView.remove();
@@ -111,14 +112,26 @@
       }
     },
     onClick() {
-      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 {
+      if (!this.isImage()) {
         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
diff --git a/js/views/inbox_view.js b/js/views/inbox_view.js
index 2263577e1b1..cd759ee2987 100644
--- a/js/views/inbox_view.js
+++ b/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;
diff --git a/preload.js b/preload.js
index 8b6eaa2a3c8..aa19f884f7d 100644
--- a/preload.js
+++ b/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,
diff --git a/stylesheets/_lightbox.scss b/stylesheets/_lightbox.scss
index c8328364993..bc34689b7db 100644
--- a/stylesheets/_lightbox.scss
+++ b/stylesheets/_lightbox.scss
@@ -1,59 +1,9 @@
-.lightbox {
-  &.modal {
-    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;
-      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%;
-      }
-
-      &:hover {
-        background: $grey;
-      }
-    }
-
-    .save {
-      &:before {
-        @include color-svg('../images/save.svg', white);
-      }
-    }
-  }
+.lightboxContainer {
+  display: none;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: $z-index-modal;
 }
diff --git a/stylesheets/_variables.scss b/stylesheets/_variables.scss
index 0b44fef8c1f..9847f6de8e0 100644
--- a/stylesheets/_variables.scss
+++ b/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');
diff --git a/ts/components/Lightbox.tsx b/ts/components/Lightbox.tsx
new file mode 100644
index 00000000000..ef3760eddfc
--- /dev/null
+++ b/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>
+    );
+  }
+}