mirrors/PairDrop
1
0
Fork 0
mirror of https://github.com/schlagmichdoch/PairDrop.git synced 2025-04-20 15:06:15 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

add localStorage fallback to fix renaming on private tabs and fix Firefox inserting linebreaks into edited divs

Browse source
This commit is contained in:
schlagmichdoch 2023-03-02 15:06:22 +01:00
parent d56ee87437
commit 1eb53498b1
2 changed files with 53 additions and 13 deletions
Download patch file Download diff file Expand all files Collapse all files

32
public/scripts/ui.js
View file

@ -54,8 +54,8 @@ class PeersUI {
Events.on('self-display-name-changed', e => this._insertDisplayName(e.detail)); Events.on('self-display-name-changed', e => this._insertDisplayName(e.detail));
Events.on('peer-display-name-changed', e => this._changePeerDisplayName(e.detail.peerId, e.detail.displayName)); Events.on('peer-display-name-changed', e => this._changePeerDisplayName(e.detail.peerId, e.detail.displayName));
// Load saved display name // Load saved display name on page load
PersistentStorage.get('editedDisplayName').then(displayName => { this._getSavedDisplayName().then(displayName => {
console.log("Retrieved edited display name:", displayName) console.log("Retrieved edited display name:", displayName)
if (displayName) Events.fire('self-display-name-changed', displayName); if (displayName) Events.fire('self-display-name-changed', displayName);
}); });
@ -73,21 +73,33 @@ class PeersUI {
} }
_onKeyUpDisplayName(e) { _onKeyUpDisplayName(e) {
if (/(\n|\r|\r\n)/.test(e.target.innerText)) e.target.innerText = e.target.innerText.replace(/(\n|\r|\r\n)/, ''); // fix for Firefox inserting a linebreak into div on edit which prevents the placeholder from showing automatically when it is empty
if (/^(\n|\r|\r\n)$/.test(e.target.innerText)) e.target.innerText = '';
} }
async _saveDisplayName(newDisplayName) { async _saveDisplayName(newDisplayName) {
const savedDisplayName = await PersistentStorage.get('editedDisplayName') ?? ""; newDisplayName = newDisplayName.replace(/(\n|\r|\r\n)/, '')
console.debug(newDisplayName)
const savedDisplayName = await this._getSavedDisplayName();
if (newDisplayName === savedDisplayName) return; if (newDisplayName === savedDisplayName) return;
if (newDisplayName) { if (newDisplayName) {
PersistentStorage.set('editedDisplayName', newDisplayName).then(_ => { PersistentStorage.set('editedDisplayName', newDisplayName).then(_ => {
Events.fire('notify-user', `Display name is set permanently.`); Events.fire('notify-user', 'Display name is changed permanently.');
}).catch(_ => {
console.log("This browser does not support IndexedDB. Use localStorage instead.");
localStorage.setItem('editedDisplayName', newDisplayName);
Events.fire('notify-user', 'Display name is changed only for this session.');
}).finally(_ => {
Events.fire('self-display-name-changed', newDisplayName); Events.fire('self-display-name-changed', newDisplayName);
Events.fire('broadcast-send', {type: 'self-display-name-changed', detail: newDisplayName}); Events.fire('broadcast-send', {type: 'self-display-name-changed', detail: newDisplayName});
}); });
} else { } else {
PersistentStorage.delete('editedDisplayName').then(_ => { PersistentStorage.delete('editedDisplayName').catch(_ => {
console.log("This browser does not support IndexedDB. Use localStorage instead.")
localStorage.removeItem('editedDisplayName');
Events.fire('notify-user', 'Random Display name is used again.');
}).finally(_ => {
Events.fire('notify-user', 'Display name is randomly generated again.'); Events.fire('notify-user', 'Display name is randomly generated again.');
Events.fire('self-display-name-changed', ''); Events.fire('self-display-name-changed', '');
Events.fire('broadcast-send', {type: 'self-display-name-changed', detail: ''}); Events.fire('broadcast-send', {type: 'self-display-name-changed', detail: ''});
@ -95,6 +107,14 @@ class PeersUI {
} }
} }
_getSavedDisplayName() {
return new Promise((resolve) => {
PersistentStorage.get('editedDisplayName')
.then(displayName => resolve(displayName ?? ""))
.catch(_ => resolve(localStorage.getItem('editedDisplayName') ?? ""))
});
}
_changePeerDisplayName(peerId, displayName) { _changePeerDisplayName(peerId, displayName) {
this.peers[peerId].name.displayName = displayName; this.peers[peerId].name.displayName = displayName;
const peerIdNode = $(peerId); const peerIdNode = $(peerId);

34
public_included_ws_fallback/scripts/ui.js
View file

@ -54,8 +54,8 @@ class PeersUI {
Events.on('self-display-name-changed', e => this._insertDisplayName(e.detail)); Events.on('self-display-name-changed', e => this._insertDisplayName(e.detail));
Events.on('peer-display-name-changed', e => this._changePeerDisplayName(e.detail.peerId, e.detail.displayName)); Events.on('peer-display-name-changed', e => this._changePeerDisplayName(e.detail.peerId, e.detail.displayName));
// Load saved display name // Load saved display name on page load
PersistentStorage.get('editedDisplayName').then(displayName => { this._getSavedDisplayName().then(displayName => {
console.log("Retrieved edited display name:", displayName) console.log("Retrieved edited display name:", displayName)
if (displayName) Events.fire('self-display-name-changed', displayName); if (displayName) Events.fire('self-display-name-changed', displayName);
}); });
@ -73,21 +73,33 @@ class PeersUI {
} }
_onKeyUpDisplayName(e) { _onKeyUpDisplayName(e) {
if (/(\n|\r|\r\n)/.test(e.target.innerText)) e.target.innerText = e.target.innerText.replace(/(\n|\r|\r\n)/, ''); // fix for Firefox inserting a linebreak into div on edit which prevents the placeholder from showing automatically when it is empty
if (/^(\n|\r|\r\n)$/.test(e.target.innerText)) e.target.innerText = '';
} }
async _saveDisplayName(newDisplayName) { async _saveDisplayName(newDisplayName) {
const savedDisplayName = await PersistentStorage.get('editedDisplayName') ?? ""; newDisplayName = newDisplayName.replace(/(\n|\r|\r\n)/, '')
console.debug(newDisplayName)
const savedDisplayName = await this._getSavedDisplayName();
if (newDisplayName === savedDisplayName) return; if (newDisplayName === savedDisplayName) return;
if (newDisplayName) { if (newDisplayName) {
PersistentStorage.set('editedDisplayName', newDisplayName).then(_ => { PersistentStorage.set('editedDisplayName', newDisplayName).then(_ => {
Events.fire('notify-user', `Display name is set permanently.`); Events.fire('notify-user', 'Display name is changed permanently.');
}).catch(_ => {
console.log("This browser does not support IndexedDB. Use localStorage instead.");
localStorage.setItem('editedDisplayName', newDisplayName);
Events.fire('notify-user', 'Display name is changed only for this session.');
}).finally(_ => {
Events.fire('self-display-name-changed', newDisplayName); Events.fire('self-display-name-changed', newDisplayName);
Events.fire('broadcast-send', {type: 'self-display-name-changed', detail: newDisplayName}); Events.fire('broadcast-send', {type: 'self-display-name-changed', detail: newDisplayName});
}); });
} else { } else {
PersistentStorage.delete('editedDisplayName').then(_ => { PersistentStorage.delete('editedDisplayName').catch(_ => {
console.log("This browser does not support IndexedDB. Use localStorage instead.")
localStorage.removeItem('editedDisplayName');
Events.fire('notify-user', 'Random Display name is used again.');
}).finally(_ => {
Events.fire('notify-user', 'Display name is randomly generated again.'); Events.fire('notify-user', 'Display name is randomly generated again.');
Events.fire('self-display-name-changed', ''); Events.fire('self-display-name-changed', '');
Events.fire('broadcast-send', {type: 'self-display-name-changed', detail: ''}); Events.fire('broadcast-send', {type: 'self-display-name-changed', detail: ''});
@ -95,6 +107,14 @@ class PeersUI {
} }
} }
_getSavedDisplayName() {
return new Promise((resolve) => {
PersistentStorage.get('editedDisplayName')
.then(displayName => resolve(displayName ?? ""))
.catch(_ => resolve(localStorage.getItem('editedDisplayName') ?? ""))
});
}
_changePeerDisplayName(peerId, displayName) { _changePeerDisplayName(peerId, displayName) {
this.peers[peerId].name.displayName = displayName; this.peers[peerId].name.displayName = displayName;
const peerIdNode = $(peerId); const peerIdNode = $(peerId);
@ -576,7 +596,7 @@ class ReceiveFileDialog extends ReceiveDialog {
} }
_dequeueFile() { _dequeueFile() {
// Todo: change change count in document.title and move '- PairDrop' to back // Todo: change count in document.title and move '- PairDrop' to back
if (!this._filesQueue.length) { // nothing to do if (!this._filesQueue.length) { // nothing to do
this._busy = false; this._busy = false;
return; return;