From fb306b6c94e41efa76262bc0d8c74a755c5a4afb Mon Sep 17 00:00:00 2001
From: schlagmichdoch <schlagmichdoch@users.noreply.github.com>
Date: Sat, 21 Jan 2023 18:20:42 +0100
Subject: [PATCH] fix video + audio preview

---
 public/scripts/ui.js | 10 ++++------
 public/styles.css    |  4 ++++
 2 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/public/scripts/ui.js b/public/scripts/ui.js
index a8d592b..f82727a 100644
--- a/public/scripts/ui.js
+++ b/public/scripts/ui.js
@@ -502,11 +502,11 @@ class ReceiveFileDialog extends ReceiveDialog {
                 let element = document.createElement(previewElement[mime]);
                 element.src = URL.createObjectURL(file);
                 element.controls = true;
-                element.classList = 'element-preview'
-
-                this.$previewBox.style.display = 'block';
+                element.classList.add('element-preview');
                 this.$previewBox.appendChild(element)
                 element.onload = _ => resolve(true);
+                element.addEventListener('loadeddata', _ => resolve(true));
+                element.onerror = _ => reject(`${mime} preview could not be loaded`);
             }
         });
     }
@@ -572,7 +572,7 @@ class ReceiveFileDialog extends ReceiveDialog {
             this.$shareOrDownloadBtn.href = url;
         }
 
-        this.createPreviewElement(files[0]).then(_ => {
+        this.createPreviewElement(files[0]).finally(_ => {
             document.title = `PairDrop - ${files.length} Files received`;
             document.changeFavicon("images/favicon-96x96-notification.png");
             this.show();
@@ -643,7 +643,6 @@ class ReceiveRequestDialog extends ReceiveDialog {
             element.src = request.thumbnailDataUrl;
             element.classList.add('element-preview');
 
-            this.$previewBox.style.display = 'block';
             this.$previewBox.appendChild(element)
         }
 
@@ -666,7 +665,6 @@ class ReceiveRequestDialog extends ReceiveDialog {
     }
 
     hide() {
-        this.$previewBox.style.display = 'none';
         this.$previewBox.innerHTML = '';
         super.hide();
     }
diff --git a/public/styles.css b/public/styles.css
index beead77..bad6080 100644
--- a/public/styles.css
+++ b/public/styles.css
@@ -899,6 +899,10 @@ x-dialog x-paper {
     margin: 10px -24px 40px -24px;
 }
 
+.file-preview:empty {
+    display: none;
+}
+
 .element-preview {
     max-width: 100%;
     max-height: 40vh;