From 7645becb416fd50726ce9986b8708e359eb1816d Mon Sep 17 00:00:00 2001
From: Victor Wads <victor.laureano@gmail.com>
Date: Sun, 5 Jun 2022 14:32:43 -0300
Subject: [PATCH] Adds Video and Audio preview

---
 client/index.html    |  4 +---
 client/scripts/ui.js | 26 ++++++++++++++++++++------
 client/styles.css    |  5 +++--
 3 files changed, 24 insertions(+), 11 deletions(-)

diff --git a/client/index.html b/client/index.html
index e4752db..bac1156 100644
--- a/client/index.html
+++ b/client/index.html
@@ -80,9 +80,7 @@
                 <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 class='preview' style="visibility: hidden;"></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 0c15984..96ba911 100644
--- a/client/scripts/ui.js
+++ b/client/scripts/ui.js
@@ -234,6 +234,7 @@ class ReceiveDialog extends Dialog {
             window.blop.play();
         });
         this._filesQueue = [];
+        this.$previewBox = this.$el.querySelector('.preview')
     }
 
     _nextFile(nextFile) {
@@ -266,10 +267,23 @@ 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;
+        
+        let mine = file.mime.split('/')[0]
+        let previewElement = {
+            image: 'img',
+            audio: 'audio',
+            video: 'video'
+        }
+
+        if(Object.keys(previewElement).indexOf(mine) !== -1){
+            console.log('the file is able to preview');
+            let element = document.createElement(previewElement[mine]);
+            element.src = url;
+            element.controls = true;
+            element.classList = 'element-preview'
+
+            this.$previewBox.style.visibility = 'inherit';
+            this.$previewBox.appendChild(element)
         }
 
         this.$el.querySelector('#fileName').textContent = file.name;
@@ -297,8 +311,8 @@ class ReceiveDialog extends Dialog {
     }
 
     hide() {
-        this.$el.querySelector('.preview').style.visibility = 'hidden';
-        this.$el.querySelector("#img-preview").src = "";
+        this.$previewBox.style.visibility = 'hidden';
+        this.$previewBox.innerHTML = '';
         super.hide();
         this._dequeueFile();
     }
diff --git a/client/styles.css b/client/styles.css
index 0a9aca9..c3e573d 100644
--- a/client/styles.css
+++ b/client/styles.css
@@ -717,8 +717,9 @@ x-dialog x-paper {
     color: var(--text-color);
     background-color: var(--bg-color-secondary);
 }
-/* Image Preview */
-#img-preview{
+/* Image/Video/Audio Preview */
+.element-preview {
+    max-width: 100%;
     max-height: 50vh;
     margin: auto;
     display: block;