snapdrop

commit 0aa27250a4c37a56d3999636244311f4b63df803
parent 0ba427c37ccecfe517a3f1ecd1fb3f067832249e
Author: RobinLinus <RobinLinus@users.noreply.github.com>
Date:   Fri,  4 Jun 2021 19:11:50 +0200

Merge pull request #312 from dewanhimanshu/feature-image-preview

file preview feature added
Diffstat:
M
client/index.html
 | 
4
++++
M
client/scripts/ui.js
 | 
7
+++++++
M
client/styles.css
 | 
10
++++++++--

3 files changed, 19 insertions(+), 2 deletions(-)
diff --git 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
@@ -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
@@ -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
+}
+