From 028752a8096deade614d85d99f07f09f5c3d5306 Mon Sep 17 00:00:00 2001 From: schlagmichdoch Date: Mon, 13 Mar 2023 00:04:48 +0100 Subject: [PATCH] fixes #76. 'File received' dialog not showing on iOS when big videos are sent. --- public/scripts/ui.js | 72 ++++++++++++++--------- public_included_ws_fallback/scripts/ui.js | 72 ++++++++++++++--------- 2 files changed, 90 insertions(+), 54 deletions(-) diff --git a/public/scripts/ui.js b/public/scripts/ui.js index 04eef4f..7610834 100644 --- a/public/scripts/ui.js +++ b/public/scripts/ui.js @@ -632,26 +632,34 @@ class ReceiveFileDialog extends ReceiveDialog { createPreviewElement(file) { return new Promise((resolve, reject) => { - let mime = file.type.split('/')[0] - let previewElement = { - image: 'img', - audio: 'audio', - video: 'video' - } + try { + let mime = file.type.split('/')[0] + let previewElement = { + image: 'img', + audio: 'audio', + video: 'video' + } - if (Object.keys(previewElement).indexOf(mime) === -1) { - resolve(false); - } else { - console.log('the file is able to preview'); - let element = document.createElement(previewElement[mime]); - element.src = URL.createObjectURL(file); - element.controls = true; - element.onload = _ => { - this.$previewBox.appendChild(element); - resolve(true) - }; - element.addEventListener('loadeddata', _ => resolve(true)); - element.onerror = _ => reject(`${mime} preview could not be loaded from type ${file.type}`); + if (Object.keys(previewElement).indexOf(mime) === -1) { + resolve(false); + } else { + let element = document.createElement(previewElement[mime]); + element.controls = true; + element.onload = _ => { + this.$previewBox.appendChild(element); + resolve(true); + }; + element.onloadeddata = _ => { + this.$previewBox.appendChild(element); + resolve(true); + }; + element.onerror = _ => { + reject(`${mime} preview could not be loaded from type ${file.type}`); + }; + element.src = URL.createObjectURL(file); + } + } catch (e) { + reject(`preview could not be loaded from type ${file.type}`); } }); } @@ -734,20 +742,30 @@ class ReceiveFileDialog extends ReceiveDialog { setTimeout(_ => this.$downloadBtn.style.pointerEvents = "unset", 2000); }; - this.createPreviewElement(files[0]).finally(_ => { - document.title = files.length === 1 - ? 'File received - PairDrop' - : `${files.length} Files received - PairDrop`; - document.changeFavicon("images/favicon-96x96-notification.png"); - Events.fire('set-progress', {peerId: peerId, progress: 1, status: 'process'}) - this.show(); + document.title = files.length === 1 + ? 'File received - PairDrop' + : `${files.length} Files received - PairDrop`; + document.changeFavicon("images/favicon-96x96-notification.png"); + Events.fire('set-progress', {peerId: peerId, progress: 1, status: 'process'}) + this.show(); + setTimeout(_ => { if (canShare) { this.$shareBtn.click(); } else { this.$downloadBtn.click(); } - }).catch(r => console.error(r)); + }, 500); + + this.createPreviewElement(files[0]) + .then(canPreview => { + if (canPreview) { + console.log('the file is able to preview'); + } else { + console.log('the file is not able to preview'); + } + }) + .catch(r => console.error(r)); } _downloadFilesIndividually(files) { diff --git a/public_included_ws_fallback/scripts/ui.js b/public_included_ws_fallback/scripts/ui.js index b0cb60a..91d2f32 100644 --- a/public_included_ws_fallback/scripts/ui.js +++ b/public_included_ws_fallback/scripts/ui.js @@ -633,26 +633,34 @@ class ReceiveFileDialog extends ReceiveDialog { createPreviewElement(file) { return new Promise((resolve, reject) => { - let mime = file.type.split('/')[0] - let previewElement = { - image: 'img', - audio: 'audio', - video: 'video' - } + try { + let mime = file.type.split('/')[0] + let previewElement = { + image: 'img', + audio: 'audio', + video: 'video' + } - if (Object.keys(previewElement).indexOf(mime) === -1) { - resolve(false); - } else { - console.log('the file is able to preview'); - let element = document.createElement(previewElement[mime]); - element.src = URL.createObjectURL(file); - element.controls = true; - element.onload = _ => { - this.$previewBox.appendChild(element); - resolve(true) - }; - element.addEventListener('loadeddata', _ => resolve(true)); - element.onerror = _ => reject(`${mime} preview could not be loaded from type ${file.type}`); + if (Object.keys(previewElement).indexOf(mime) === -1) { + resolve(false); + } else { + let element = document.createElement(previewElement[mime]); + element.controls = true; + element.onload = _ => { + this.$previewBox.appendChild(element); + resolve(true); + }; + element.onloadeddata = _ => { + this.$previewBox.appendChild(element); + resolve(true); + }; + element.onerror = _ => { + reject(`${mime} preview could not be loaded from type ${file.type}`); + }; + element.src = URL.createObjectURL(file); + } + } catch (e) { + reject(`preview could not be loaded from type ${file.type}`); } }); } @@ -735,20 +743,30 @@ class ReceiveFileDialog extends ReceiveDialog { setTimeout(_ => this.$downloadBtn.style.pointerEvents = "unset", 2000); }; - this.createPreviewElement(files[0]).finally(_ => { - document.title = files.length === 1 - ? 'File received - PairDrop' - : `${files.length} Files received - PairDrop`; - document.changeFavicon("images/favicon-96x96-notification.png"); - Events.fire('set-progress', {peerId: peerId, progress: 1, status: 'process'}) - this.show(); + document.title = files.length === 1 + ? 'File received - PairDrop' + : `${files.length} Files received - PairDrop`; + document.changeFavicon("images/favicon-96x96-notification.png"); + Events.fire('set-progress', {peerId: peerId, progress: 1, status: 'process'}) + this.show(); + setTimeout(_ => { if (canShare) { this.$shareBtn.click(); } else { this.$downloadBtn.click(); } - }).catch(r => console.error(r)); + }, 500); + + this.createPreviewElement(files[0]) + .then(canPreview => { + if (canPreview) { + console.log('the file is able to preview'); + } else { + console.log('the file is not able to preview'); + } + }) + .catch(r => console.error(r)); } _downloadFilesIndividually(files) {