From a593ef1a6e4238e7949e7b44abbe54f6554cfedf Mon Sep 17 00:00:00 2001
From: dewanhimanshu <himanshudewan786@gmail.com>
Date: Wed, 2 Jun 2021 22:26:08 +0530
Subject: [PATCH] file preview feature added

---
 client/index.html    | 4 ++++
 client/scripts/ui.js | 7 +++++++
 client/styles.css    | 9 ++++++++-
 3 files changed, 19 insertions(+), 1 deletion(-)

diff --git a/client/index.html b/client/index.html
index 69eb342..f87741a 100644
--- a/client/index.html
+++ b/client/index.html
@@ -80,6 +80,10 @@
                 <h3>File Received</h3>
                 <div class="font-subheading" id="fileName">Filename</div>
                 <div class="font-body2" id="fileSize"></div>
+                <div class='preview' style="visibility: hidden;">
+                    <img id='img-preview' src="">
+                </div>
+                <div>
                 <div class="row">
                     <label for="autoDownload" class="grow">Ask to save each file before downloading</label>
                     <input type="checkbox" id="autoDownload" checked="">
diff --git a/client/scripts/ui.js b/client/scripts/ui.js
index 63672ba..0c15984 100644
--- a/client/scripts/ui.js
+++ b/client/scripts/ui.js
@@ -266,6 +266,11 @@ class ReceiveDialog extends Dialog {
             $a.click()
             return
         }
+        if(file.mime.split('/')[0] === 'image'){
+            console.log('the file is image');
+            this.$el.querySelector('.preview').style.visibility = 'inherit';
+            this.$el.querySelector("#img-preview").src = url;
+        }
 
         this.$el.querySelector('#fileName').textContent = file.name;
         this.$el.querySelector('#fileSize').textContent = this._formatFileSize(file.size);
@@ -292,6 +297,8 @@ class ReceiveDialog extends Dialog {
     }
 
     hide() {
+        this.$el.querySelector('.preview').style.visibility = 'hidden';
+        this.$el.querySelector("#img-preview").src = "";
         super.hide();
         this._dequeueFile();
     }
diff --git a/client/styles.css b/client/styles.css
index 7c5559d..9d62b7d 100644
--- a/client/styles.css
+++ b/client/styles.css
@@ -716,6 +716,12 @@ x-dialog x-paper {
     color: var(--text-color);
     background-color: var(--bg-color-secondary);
 }
+/* Image Preview */
+#img-preview{
+    max-width:100%;
+    max-height:100%;
+   
+}
 
 
 /* Styles for users who prefer dark mode at the OS level */
@@ -746,4 +752,5 @@ x-dialog x-paper {
     body {
         overflow: hidden;
     }
-}
\ No newline at end of file
+}
+