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

remove background animation in favor of speed and efficiency

Browse source
This commit is contained in:
schlagmichdoch 2023-04-20 21:12:06 +02:00
parent 4c7bdd3a0f
commit b42c8a0b1a
2 changed files with 24 additions and 117 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

70
public/scripts/ui.js
View file

@ -181,7 +181,6 @@ class PeersUI {
if (!$peer) return; if (!$peer) return;
$peer.remove(); $peer.remove();
this.evaluateOverflowing(); this.evaluateOverflowing();
if ($$('x-peers:empty')) setTimeout(_ => window.animateBackground(true), 1750); // Start animation again
} }
_onSecretRoomDeleted(roomSecret) { _onSecretRoomDeleted(roomSecret) {
@ -321,7 +320,6 @@ class PeerUI {
$$('x-peers').appendChild(this.$el) $$('x-peers').appendChild(this.$el)
Events.fire('peer-added'); Events.fire('peer-added');
this.$xInstructions = $$('x-instructions'); this.$xInstructions = $$('x-instructions');
setTimeout(_ => window.animateBackground(false), 1750); // Stop animation
} }
html() { html() {
@ -1577,27 +1575,15 @@ class NetworkStatusUI {
constructor() { constructor() {
Events.on('offline', _ => this._showOfflineMessage()); Events.on('offline', _ => this._showOfflineMessage());
Events.on('online', _ => this._showOnlineMessage()); Events.on('online', _ => this._showOnlineMessage());
Events.on('ws-connected', _ => this._onWsConnected());
Events.on('ws-disconnected', _ => this._onWsDisconnected());
if (!navigator.onLine) this._showOfflineMessage(); if (!navigator.onLine) this._showOfflineMessage();
} }
_showOfflineMessage() { _showOfflineMessage() {
Events.fire('notify-user', 'You are offline'); Events.fire('notify-user', 'You are offline');
window.animateBackground(false);
} }
_showOnlineMessage() { _showOnlineMessage() {
Events.fire('notify-user', 'You are back online'); Events.fire('notify-user', 'You are back online');
window.animateBackground(true);
}
_onWsConnected() {
window.animateBackground(true);
}
_onWsDisconnected() {
window.animateBackground(false);
} }
} }
@ -1948,28 +1934,26 @@ window.addEventListener('beforeinstallprompt', e => {
return e.preventDefault(); return e.preventDefault();
}); });
// Background Animation // Background Circles
Events.on('load', () => { Events.on('load', () => {
let c = document.createElement('canvas'); let c = document.createElement('canvas');
document.body.appendChild(c);
let style = c.style; let style = c.style;
style.width = '100%'; style.width = '100%';
style.position = 'absolute'; style.position = 'absolute';
style.zIndex = -1; style.zIndex = -1;
style.top = 0; style.top = 0;
style.left = 0; style.left = 0;
style.animation = "fade-in 800ms";
let cCtx = c.getContext('2d'); let cCtx = c.getContext('2d');
let x0, y0, w, h, dw, offset; let x0, y0, w, h, dw, offset;
let offscreenCanvases = [];
function init() { function init() {
let oldW = w; let oldW = w;
let oldH = h; let oldH = h;
let oldOffset = offset let oldOffset = offset
w = document.documentElement.clientWidth; w = document.documentElement.clientWidth;
h = document.documentElement.clientHeight; h = document.documentElement.clientHeight;
offset = $$('footer').offsetHeight - 32; offset = $$('footer').offsetHeight - 33;
if (h > 800) offset += 16; if (h > 800) offset += 16;
if (oldW === w && oldH === h && oldOffset === offset) return; // nothing has changed if (oldW === w && oldH === h && oldOffset === offset) return; // nothing has changed
@ -1979,63 +1963,33 @@ Events.on('load', () => {
x0 = w / 2; x0 = w / 2;
y0 = h - offset; y0 = h - offset;
dw = Math.round(Math.max(w, h, 1000) / 13); dw = Math.round(Math.max(w, h, 1000) / 13);
drawCircles(cCtx, 0);
// enforce redrawing of frames if (document.body.contains(c)) {
offscreenCanvases = []; document.body.removeChild(c);
}
drawCircles(cCtx, dw);
document.body.appendChild(c);
} }
Events.on('bg-resize', _ => init()); Events.on('bg-resize', _ => init());
window.onresize = _ => Events.fire('bg-resize'); window.onresize = _ => Events.fire('bg-resize');
function drawCircle(ctx, radius) { function drawCircle(ctx, radius) {
ctx.beginPath(); ctx.beginPath();
ctx.lineWidth = 2; ctx.lineWidth = 2;
let opacity = 0.2 * (1 - 1.2 * radius / Math.max(w, h)); let opacity = 0.3 * (1 - 1.2 * radius / Math.max(w, h));
ctx.strokeStyle = `rgb(128, 128, 128, ${opacity})`; ctx.strokeStyle = `rgba(128, 128, 128, ${opacity})`;
ctx.arc(x0, y0, radius, 0, 2 * Math.PI); ctx.arc(x0, y0, radius, 0, 2 * Math.PI);
ctx.stroke(); ctx.stroke();
} }
function drawCircles(ctx, frame) { function drawCircles(ctx, frame) {
for (let i = 0; i < 13; i++) { for (let i = 0; i < 13; i++) {
drawCircle(ctx, dw * i + frame); drawCircle(ctx, dw * i + frame + 33);
} }
} }
function createOffscreenCanvas(frame) {
let canvas = document.createElement("canvas");
canvas.width = c.width;
canvas.height = c.height;
offscreenCanvases[frame] = canvas;
let ctx = canvas.getContext('2d');
drawCircles(ctx, frame);
}
function drawFrame(frame) {
cCtx.clearRect(0, 0, w, h);
if (!offscreenCanvases[frame]) {
createOffscreenCanvas(frame);
}
cCtx.drawImage(offscreenCanvases[frame], 0, 0);
}
let animate = true;
let currentFrame = 0;
function animateBg() {
if (currentFrame + 1 < dw || animate) {
currentFrame = (currentFrame + 1) % dw;
drawFrame(currentFrame);
}
setTimeout(_ => animateBg(), 3000 / dw);
}
window.animateBackground = function(l) {
animate = l;
};
init(); init();
animateBg();
}); });
document.changeFavicon = function (src) { document.changeFavicon = function (src) {

71
public_included_ws_fallback/scripts/ui.js
View file

@ -181,7 +181,6 @@ class PeersUI {
if (!$peer) return; if (!$peer) return;
$peer.remove(); $peer.remove();
this.evaluateOverflowing(); this.evaluateOverflowing();
if ($$('x-peers:empty')) setTimeout(_ => window.animateBackground(true), 1750); // Start animation again
} }
_onSecretRoomDeleted(roomSecret) { _onSecretRoomDeleted(roomSecret) {
@ -321,7 +320,6 @@ class PeerUI {
$$('x-peers').appendChild(this.$el) $$('x-peers').appendChild(this.$el)
Events.fire('peer-added'); Events.fire('peer-added');
this.$xInstructions = $$('x-instructions'); this.$xInstructions = $$('x-instructions');
setTimeout(_ => window.animateBackground(false), 1750); // Stop animation
} }
html() { html() {
@ -368,7 +366,6 @@ class PeerUI {
this.$el.ui = this; this.$el.ui = this;
this._peer.roomTypes.forEach(roomType => this.$el.classList.add(`type-${roomType}`)); this._peer.roomTypes.forEach(roomType => this.$el.classList.add(`type-${roomType}`));
this.$el.classList.add('center'); this.$el.classList.add('center');
if (!this._peer.rtcSupported || !window.isRtcSupported) this.$el.classList.add('ws-peer')
this.html(); this.html();
this._callbackInput = e => this._onFilesSelected(e) this._callbackInput = e => this._onFilesSelected(e)
@ -1578,27 +1575,15 @@ class NetworkStatusUI {
constructor() { constructor() {
Events.on('offline', _ => this._showOfflineMessage()); Events.on('offline', _ => this._showOfflineMessage());
Events.on('online', _ => this._showOnlineMessage()); Events.on('online', _ => this._showOnlineMessage());
Events.on('ws-connected', _ => this._onWsConnected());
Events.on('ws-disconnected', _ => this._onWsDisconnected());
if (!navigator.onLine) this._showOfflineMessage(); if (!navigator.onLine) this._showOfflineMessage();
} }
_showOfflineMessage() { _showOfflineMessage() {
Events.fire('notify-user', 'You are offline'); Events.fire('notify-user', 'You are offline');
window.animateBackground(false);
} }
_showOnlineMessage() { _showOnlineMessage() {
Events.fire('notify-user', 'You are back online'); Events.fire('notify-user', 'You are back online');
window.animateBackground(true);
}
_onWsConnected() {
window.animateBackground(true);
}
_onWsDisconnected() {
window.animateBackground(false);
} }
} }
@ -1949,28 +1934,26 @@ window.addEventListener('beforeinstallprompt', e => {
return e.preventDefault(); return e.preventDefault();
}); });
// Background Animation // Background Circles
Events.on('load', () => { Events.on('load', () => {
let c = document.createElement('canvas'); let c = document.createElement('canvas');
document.body.appendChild(c);
let style = c.style; let style = c.style;
style.width = '100%'; style.width = '100%';
style.position = 'absolute'; style.position = 'absolute';
style.zIndex = -1; style.zIndex = -1;
style.top = 0; style.top = 0;
style.left = 0; style.left = 0;
style.animation = "fade-in 800ms";
let cCtx = c.getContext('2d'); let cCtx = c.getContext('2d');
let x0, y0, w, h, dw, offset; let x0, y0, w, h, dw, offset;
let offscreenCanvases = [];
function init() { function init() {
let oldW = w; let oldW = w;
let oldH = h; let oldH = h;
let oldOffset = offset let oldOffset = offset
w = document.documentElement.clientWidth; w = document.documentElement.clientWidth;
h = document.documentElement.clientHeight; h = document.documentElement.clientHeight;
offset = $$('footer').offsetHeight - 32; offset = $$('footer').offsetHeight - 33;
if (h > 800) offset += 16; if (h > 800) offset += 16;
if (oldW === w && oldH === h && oldOffset === offset) return; // nothing has changed if (oldW === w && oldH === h && oldOffset === offset) return; // nothing has changed
@ -1980,63 +1963,33 @@ Events.on('load', () => {
x0 = w / 2; x0 = w / 2;
y0 = h - offset; y0 = h - offset;
dw = Math.round(Math.max(w, h, 1000) / 13); dw = Math.round(Math.max(w, h, 1000) / 13);
drawCircles(cCtx, 0);
// enforce redrawing of frames if (document.body.contains(c)) {
offscreenCanvases = []; document.body.removeChild(c);
}
drawCircles(cCtx, dw);
document.body.appendChild(c);
} }
Events.on('bg-resize', _ => init()); Events.on('bg-resize', _ => init());
window.onresize = _ => Events.fire('bg-resize'); window.onresize = _ => Events.fire('bg-resize');
function drawCircle(ctx, radius) { function drawCircle(ctx, radius) {
ctx.beginPath(); ctx.beginPath();
ctx.lineWidth = 2; ctx.lineWidth = 2;
let opacity = 0.2 * (1 - 1.2 * radius / Math.max(w, h)); let opacity = 0.3 * (1 - 1.2 * radius / Math.max(w, h));
ctx.strokeStyle = `rgb(128, 128, 128, ${opacity})`; ctx.strokeStyle = `rgba(128, 128, 128, ${opacity})`;
ctx.arc(x0, y0, radius, 0, 2 * Math.PI); ctx.arc(x0, y0, radius, 0, 2 * Math.PI);
ctx.stroke(); ctx.stroke();
} }
function drawCircles(ctx, frame) { function drawCircles(ctx, frame) {
for (let i = 0; i < 13; i++) { for (let i = 0; i < 13; i++) {
drawCircle(ctx, dw * i + frame); drawCircle(ctx, dw * i + frame + 33);
} }
} }
function createOffscreenCanvas(frame) {
let canvas = document.createElement("canvas");
canvas.width = c.width;
canvas.height = c.height;
offscreenCanvases[frame] = canvas;
let ctx = canvas.getContext('2d');
drawCircles(ctx, frame);
}
function drawFrame(frame) {
cCtx.clearRect(0, 0, w, h);
if (!offscreenCanvases[frame]) {
createOffscreenCanvas(frame);
}
cCtx.drawImage(offscreenCanvases[frame], 0, 0);
}
let animate = true;
let currentFrame = 0;
function animateBg() {
if (currentFrame + 1 < dw || animate) {
currentFrame = (currentFrame + 1) % dw;
drawFrame(currentFrame);
}
setTimeout(_ => animateBg(), 3000 / dw);
}
window.animateBackground = function(l) {
animate = l;
};
init(); init();
animateBg();
}); });
document.changeFavicon = function (src) { document.changeFavicon = function (src) {