Refactor "paste mode" to "share mode"; Introduce a small clipboard panel instead of changing the xNoPeer instructions. This also enables the use of the header btns while sharing; Add possibility to change shared text before sending via a dialog; Add a setting that specifies whether that dialog should always be opened when sharing text

This commit is contained in:
schlagmichdoch 2023-11-24 16:25:30 +01:00
parent 5a2ec9c670
commit 0c2da78ed2
22 changed files with 908 additions and 506 deletions

View file

@ -167,6 +167,7 @@ class PairDrop {
const clearDevicesDialog = new EditPairedDevicesDialog();
const publicRoomDialog = new PublicRoomDialog();
const base64ZipDialog = new Base64ZipDialog();
const shareTextDialog = new ShareTextDialog();
const toast = new Toast();
const notifications = new Notifications();
const networkStatusUI = new NetworkStatusUI();

View file

@ -433,47 +433,6 @@ class Peer {
: false;
}
getResizedImageDataUrl(file, width = undefined, height = undefined, quality = 0.7) {
return new Promise((resolve, reject) => {
let image = new Image();
image.src = URL.createObjectURL(file);
image.onload = _ => {
let imageWidth = image.width;
let imageHeight = image.height;
let canvas = document.createElement('canvas');
// resize the canvas and draw the image data into it
if (width && height) {
canvas.width = width;
canvas.height = height;
}
else if (width) {
canvas.width = width;
canvas.height = Math.floor(imageHeight * width / imageWidth)
}
else if (height) {
canvas.width = Math.floor(imageWidth * height / imageHeight);
canvas.height = height;
}
else {
canvas.width = imageWidth;
canvas.height = imageHeight
}
var ctx = canvas.getContext("2d");
ctx.drawImage(image, 0, 0, canvas.width, canvas.height);
let dataUrl = canvas.toDataURL("image/jpeg", quality);
resolve(dataUrl);
}
image.onerror = _ => reject(`Could not create an image thumbnail from type ${file.type}`);
})
.then(dataUrl => {
return dataUrl;
})
.catch(e => console.error(e));
}
async requestFileTransfer(files) {
let header = [];
let totalSize = 0;
@ -491,9 +450,14 @@ class Peer {
Events.fire('set-progress', {peerId: this._peerId, progress: 0.8, status: 'prepare'})
let dataUrl = '';
let dataUrl;
if (files[0].type.split('/')[0] === 'image') {
dataUrl = await this.getResizedImageDataUrl(files[0], 400, null, 0.9);
try {
dataUrl = await getResizedImageDataUrl(files[0], 400, null, 0.9);
} catch (e) {
dataUrl = '';
}
}
Events.fire('set-progress', {peerId: this._peerId, progress: 1, status: 'prepare'})

View file

@ -241,6 +241,9 @@ class BackgroundCanvas {
Events.on('resize', _ => this.init());
Events.on('redraw-canvas', _ => this.init());
Events.on('translation-loaded', _ => this.init());
// ShareMode
Events.on('share-mode-changed', e => this.onShareModeChanged(e.detail.active));
}
_fadeIn() {
@ -263,16 +266,24 @@ class BackgroundCanvas {
this.x0 = this.w / 2;
this.y0 = this.h - this.offset;
this.dw = Math.round(Math.max(this.w, this.h, 1000) / 13);
this.baseColor = '165, 165, 165';
this.baseOpacity = 0.3;
this.drawCircles(this.cCtx);
}
onShareModeChanged(active) {
this.baseColor = active ? '165, 165, 255' : '165, 165, 165';
this.baseOpacity = active ? 0.5 : 0.3;
this.drawCircles(this.cCtx);
}
drawCircle(ctx, radius) {
ctx.beginPath();
ctx.lineWidth = 2;
let opacity = Math.max(0, 0.3 * (1 - 1.2 * radius / Math.max(this.w, this.h)));
ctx.strokeStyle = `rgba(165, 165, 165, ${opacity})`;
let opacity = Math.max(0, this.baseOpacity * (1 - 1.2 * radius / Math.max(this.w, this.h)));
ctx.strokeStyle = `rgba(${this.baseColor}, ${opacity})`;
ctx.arc(this.x0, this.y0, radius, 0, 2 * Math.PI);
ctx.stroke();
}

File diff suppressed because it is too large Load diff

View file

@ -457,4 +457,41 @@ function base64ToArrayBuffer(base64) {
bytes[i] = binary_string.charCodeAt(i);
}
return bytes.buffer;
}
function getResizedImageDataUrl(file, width = undefined, height = undefined, quality = 0.7) {
return new Promise((resolve, reject) => {
let image = new Image();
image.src = URL.createObjectURL(file);
image.onload = _ => {
let imageWidth = image.width;
let imageHeight = image.height;
let canvas = document.createElement('canvas');
// resize the canvas and draw the image data into it
if (width && height) {
canvas.width = width;
canvas.height = height;
}
else if (width) {
canvas.width = width;
canvas.height = Math.floor(imageHeight * width / imageWidth)
}
else if (height) {
canvas.width = Math.floor(imageWidth * height / imageHeight);
canvas.height = height;
}
else {
canvas.width = imageWidth;
canvas.height = imageHeight
}
let ctx = canvas.getContext("2d");
ctx.drawImage(image, 0, 0, canvas.width, canvas.height);
let dataUrl = canvas.toDataURL("image/jpeg", quality);
resolve(dataUrl);
}
image.onerror = _ => reject(`Could not create an image thumbnail from type ${file.type}`);
})
}