jakob/PairDrop
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Video and Audio preview

Browse source
This commit is contained in:
schlagmichdoch 2023-01-10 16:03:52 +01:00
commit 8d2bbc795d
3 changed files with 23 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
public/index.html
View file

@ -134,9 +134,7 @@
<h3>File Received</h3> <h3>File Received</h3>
<div class="font-subheading" id="fileName">Filename</div> <div class="font-subheading" id="fileName">Filename</div>
<div class="font-body2" id="fileSize"></div> <div class="font-body2" id="fileSize"></div>
<div class='preview' style="visibility: hidden;"> <div class='preview' style="visibility: hidden;"></div>
<img id='img-preview' src="">
</div>
<div class="row"> <div class="row">
<label for="autoDownload" class="grow">Ask to save each file before downloading</label> <label for="autoDownload" class="grow">Ask to save each file before downloading</label>
<input type="checkbox" id="autoDownload" checked=""> <input type="checkbox" id="autoDownload" checked="">

26
public/scripts/ui.js
View file

@ -421,6 +421,7 @@ class ReceiveDialog extends Dialog {
window.blop.play(); window.blop.play();
}); });
this._filesQueue = []; this._filesQueue = [];
this.$previewBox = this.$el.querySelector('.preview')
} }
_nextFile(nextFile) { _nextFile(nextFile) {
@ -453,10 +454,23 @@ class ReceiveDialog extends Dialog {
$a.click() $a.click()
return return
} }
if(file.mime.split('/')[0] === 'image'){
console.log('the file is image'); let mime = file.mime.split('/')[0]
this.$el.querySelector('.preview').style.visibility = 'inherit'; let previewElement = {
this.$el.querySelector("#img-preview").src = url; 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; this.$el.querySelector('#fileName').textContent = file.name;
@ -484,8 +498,8 @@ class ReceiveDialog extends Dialog {
} }
hide() { hide() {
this.$el.querySelector('.preview').style.visibility = 'hidden'; this.$previewBox.style.visibility = 'hidden';
this.$el.querySelector("#img-preview").src = ""; this.$previewBox.innerHTML = '';
super.hide(); super.hide();
this._dequeueFile(); this._dequeueFile();
} }

4
public/styles.css
View file

@ -807,8 +807,8 @@ x-dialog x-paper {
color: var(--text-color); color: var(--text-color);
background-color: var(--bg-color-secondary); background-color: var(--bg-color-secondary);
} }
/* Image Preview */ /* Image/Video/Audio Preview */
#img-preview{ .element-preview {
max-width: 100%; max-width: 100%;
max-height: 50vh; max-height: 50vh;
margin: auto; margin: auto;