remove background animation in favor of speed and efficiency
This commit is contained in:
parent
4c7bdd3a0f
commit
b42c8a0b1a
2 changed files with 24 additions and 117 deletions
|
@ -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) {
|
||||||
|
|
|
@ -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) {
|
||||||
|
|
Loading…
Reference in a new issue