From b42c8a0b1a1e0522af2b21a7d980183627735cd3 Mon Sep 17 00:00:00 2001 From: schlagmichdoch Date: Thu, 20 Apr 2023 21:12:06 +0200 Subject: [PATCH] remove background animation in favor of speed and efficiency --- public/scripts/ui.js | 70 ++++------------------ public_included_ws_fallback/scripts/ui.js | 71 ++++------------------- 2 files changed, 24 insertions(+), 117 deletions(-) diff --git a/public/scripts/ui.js b/public/scripts/ui.js index eb944b5..694a8af 100644 --- a/public/scripts/ui.js +++ b/public/scripts/ui.js @@ -181,7 +181,6 @@ class PeersUI { if (!$peer) return; $peer.remove(); this.evaluateOverflowing(); - if ($$('x-peers:empty')) setTimeout(_ => window.animateBackground(true), 1750); // Start animation again } _onSecretRoomDeleted(roomSecret) { @@ -321,7 +320,6 @@ class PeerUI { $$('x-peers').appendChild(this.$el) Events.fire('peer-added'); this.$xInstructions = $$('x-instructions'); - setTimeout(_ => window.animateBackground(false), 1750); // Stop animation } html() { @@ -1577,27 +1575,15 @@ class NetworkStatusUI { constructor() { Events.on('offline', _ => this._showOfflineMessage()); Events.on('online', _ => this._showOnlineMessage()); - Events.on('ws-connected', _ => this._onWsConnected()); - Events.on('ws-disconnected', _ => this._onWsDisconnected()); if (!navigator.onLine) this._showOfflineMessage(); } _showOfflineMessage() { Events.fire('notify-user', 'You are offline'); - window.animateBackground(false); } _showOnlineMessage() { 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(); }); -// Background Animation +// Background Circles Events.on('load', () => { let c = document.createElement('canvas'); - document.body.appendChild(c); let style = c.style; style.width = '100%'; style.position = 'absolute'; style.zIndex = -1; style.top = 0; style.left = 0; + style.animation = "fade-in 800ms"; let cCtx = c.getContext('2d'); let x0, y0, w, h, dw, offset; - let offscreenCanvases = []; - function init() { let oldW = w; let oldH = h; let oldOffset = offset w = document.documentElement.clientWidth; h = document.documentElement.clientHeight; - offset = $$('footer').offsetHeight - 32; + offset = $$('footer').offsetHeight - 33; if (h > 800) offset += 16; if (oldW === w && oldH === h && oldOffset === offset) return; // nothing has changed @@ -1979,63 +1963,33 @@ Events.on('load', () => { x0 = w / 2; y0 = h - offset; dw = Math.round(Math.max(w, h, 1000) / 13); - drawCircles(cCtx, 0); - // enforce redrawing of frames - offscreenCanvases = []; + if (document.body.contains(c)) { + document.body.removeChild(c); + } + drawCircles(cCtx, dw); + document.body.appendChild(c); } + Events.on('bg-resize', _ => init()); window.onresize = _ => Events.fire('bg-resize'); function drawCircle(ctx, radius) { ctx.beginPath(); ctx.lineWidth = 2; - let opacity = 0.2 * (1 - 1.2 * radius / Math.max(w, h)); - ctx.strokeStyle = `rgb(128, 128, 128, ${opacity})`; + let opacity = 0.3 * (1 - 1.2 * radius / Math.max(w, h)); + ctx.strokeStyle = `rgba(128, 128, 128, ${opacity})`; ctx.arc(x0, y0, radius, 0, 2 * Math.PI); ctx.stroke(); } function drawCircles(ctx, frame) { 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(); - animateBg(); }); document.changeFavicon = function (src) { diff --git a/public_included_ws_fallback/scripts/ui.js b/public_included_ws_fallback/scripts/ui.js index 71dc0a8..694a8af 100644 --- a/public_included_ws_fallback/scripts/ui.js +++ b/public_included_ws_fallback/scripts/ui.js @@ -181,7 +181,6 @@ class PeersUI { if (!$peer) return; $peer.remove(); this.evaluateOverflowing(); - if ($$('x-peers:empty')) setTimeout(_ => window.animateBackground(true), 1750); // Start animation again } _onSecretRoomDeleted(roomSecret) { @@ -321,7 +320,6 @@ class PeerUI { $$('x-peers').appendChild(this.$el) Events.fire('peer-added'); this.$xInstructions = $$('x-instructions'); - setTimeout(_ => window.animateBackground(false), 1750); // Stop animation } html() { @@ -368,7 +366,6 @@ class PeerUI { this.$el.ui = this; this._peer.roomTypes.forEach(roomType => this.$el.classList.add(`type-${roomType}`)); this.$el.classList.add('center'); - if (!this._peer.rtcSupported || !window.isRtcSupported) this.$el.classList.add('ws-peer') this.html(); this._callbackInput = e => this._onFilesSelected(e) @@ -1578,27 +1575,15 @@ class NetworkStatusUI { constructor() { Events.on('offline', _ => this._showOfflineMessage()); Events.on('online', _ => this._showOnlineMessage()); - Events.on('ws-connected', _ => this._onWsConnected()); - Events.on('ws-disconnected', _ => this._onWsDisconnected()); if (!navigator.onLine) this._showOfflineMessage(); } _showOfflineMessage() { Events.fire('notify-user', 'You are offline'); - window.animateBackground(false); } _showOnlineMessage() { 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(); }); -// Background Animation +// Background Circles Events.on('load', () => { let c = document.createElement('canvas'); - document.body.appendChild(c); let style = c.style; style.width = '100%'; style.position = 'absolute'; style.zIndex = -1; style.top = 0; style.left = 0; + style.animation = "fade-in 800ms"; let cCtx = c.getContext('2d'); let x0, y0, w, h, dw, offset; - let offscreenCanvases = []; - function init() { let oldW = w; let oldH = h; let oldOffset = offset w = document.documentElement.clientWidth; h = document.documentElement.clientHeight; - offset = $$('footer').offsetHeight - 32; + offset = $$('footer').offsetHeight - 33; if (h > 800) offset += 16; if (oldW === w && oldH === h && oldOffset === offset) return; // nothing has changed @@ -1980,63 +1963,33 @@ Events.on('load', () => { x0 = w / 2; y0 = h - offset; dw = Math.round(Math.max(w, h, 1000) / 13); - drawCircles(cCtx, 0); - // enforce redrawing of frames - offscreenCanvases = []; + if (document.body.contains(c)) { + document.body.removeChild(c); + } + drawCircles(cCtx, dw); + document.body.appendChild(c); } + Events.on('bg-resize', _ => init()); window.onresize = _ => Events.fire('bg-resize'); function drawCircle(ctx, radius) { ctx.beginPath(); ctx.lineWidth = 2; - let opacity = 0.2 * (1 - 1.2 * radius / Math.max(w, h)); - ctx.strokeStyle = `rgb(128, 128, 128, ${opacity})`; + let opacity = 0.3 * (1 - 1.2 * radius / Math.max(w, h)); + ctx.strokeStyle = `rgba(128, 128, 128, ${opacity})`; ctx.arc(x0, y0, radius, 0, 2 * Math.PI); ctx.stroke(); } function drawCircles(ctx, frame) { 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(); - animateBg(); }); document.changeFavicon = function (src) {