Video and Audio preview

public/index.html

@@ -134,9 +134,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="">

public/scripts/ui.js

@@ -421,6 +421,7 @@ class ReceiveDialog extends Dialog {
             window.blop.play();
         });
         this._filesQueue = [];
+        this.$previewBox = this.$el.querySelector('.preview')
     }
 
     _nextFile(nextFile) {
@@ -453,10 +454,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 mime = file.mime.split('/')[0]
+        let previewElement = {
+            image: 'img',
+            audio: 'audio',
+            video: 'video'
+        }
+
+        if(Object.keys(previewElement).indexOf(mime) !== -1){
+            console.log('the file is able to preview');
+            let element = document.createElement(previewElement[mime]);
+            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;
@@ -484,8 +498,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();
     }

public/styles.css

@@ -807,8 +807,8 @@ 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;