increase version to v1.6.2

remove background animation in favor of speed and efficiency
move robots.txt into correct folder
2026-04-22 07:04:53 +08:00 · 2023-04-20 22:04:57 +02:00 · 2023-04-20 22:02:00 +02:00 · 2023-04-20 21:57:31 +02:00 · 2023-04-20 21:57:24 +02:00 · 2023-04-20 21:57:01 +02:00
11 changed files with 57 additions and 138 deletions
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
  "name": "pairdrop",
-  "version": "1.6.1",
+  "version": "1.6.2",
  "lockfileVersion": 2,
  "requires": true,
  "packages": {
    "": {
      "name": "pairdrop",
-      "version": "1.6.1",
+      "version": "1.6.2",
      "license": "ISC",
      "dependencies": {
        "express": "^4.18.2",
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "pairdrop",
-  "version": "1.6.1",
+  "version": "1.6.2",
  "description": "",
  "main": "index.js",
  "scripts": {
--- a/public/index.html
+++ b/public/index.html
@@ -6,7 +6,7 @@
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <!-- Web App Config -->
    <title>PairDrop</title>
-    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="theme-color" content="#3367d6">
    <meta name="color-scheme" content="dark light">
    <meta name="apple-mobile-web-app-capable" content="no">
@@ -39,24 +39,24 @@

 <body translate="no">
    <header class="row-reverse">
-        <a href="#about" class="icon-button" title="About PairDrop">
+        <a href="#about" class="icon-button" title="About PairDrop" aria-label="Open About PairDrop">
            <svg class="icon">
                <use xlink:href="#info-outline" />
            </svg>
        </a>
        <div id="theme-wrapper">
-            <div id="theme-auto" class="icon-button selected" title="Adapt to System" >
+            <div id="theme-auto" class="icon-button selected" title="Adapt Theme to System" >
                <svg class="icon">
                    <use xlink:href="#icon-theme-auto" />
                </svg>
            </div>
            <div>
-                <div id="theme-light" class="icon-button" title="Always Light" >
+                <div id="theme-light" class="icon-button" title="Always Use Light-Theme" >
                    <svg class="icon">
                        <use xlink:href="#icon-theme-light" />
                    </svg>
                </div>
-                <div id="theme-dark" class="icon-button" title="Always Dark" >
+                <div id="theme-dark" class="icon-button" title="Always Use Dark-Theme" >
                    <svg class="icon">
                        <use xlink:href="#icon-theme-dark" />
                    </svg>
@@ -264,7 +264,7 @@
    <!-- About Page -->
    <x-about id="about" class="full center column">
        <header class="row-reverse fade-in">
-            <a href="#" class="close icon-button">
+            <a href="#" class="close icon-button" aria-label="Close About PairDrop">
                <svg class="icon">
                    <use xlink:href="#close-icon" />
                </svg>
--- a/public/scripts/ui.js
+++ b/public/scripts/ui.js
@@ -57,6 +57,12 @@ class PeersUI {
            console.log("Retrieved edited display name:", displayName)
            if (displayName) Events.fire('self-display-name-changed', displayName);
        });
+
+
+        /* prevent animation on load */
+        setTimeout(_ => {
+            this.$xNoPeers.style.animationIterationCount = "1";
+        }, 300);
    }

    _insertDisplayName(displayName) {
@@ -175,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) {
@@ -315,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() {
@@ -1571,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);
    }
 }

@@ -1942,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
@@ -1973,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) {
--- a/public/service-worker.js
+++ b/public/service-worker.js
@@ -1,4 +1,4 @@
-const cacheVersion = 'v1.6.1';
+const cacheVersion = 'v1.6.2';
 const cacheTitle = `pairdrop-cache-${cacheVersion}`;
 const urlsToCache = [
    'index.html',
--- a/public/styles.css
+++ b/public/styles.css
@@ -405,10 +405,10 @@ x-no-peers {
    flex-direction: column;
    padding: 8px;
    text-align: center;
-    /* prevent flickering on load */
    animation: fade-in 300ms;
-    animation-delay: 500ms;
    animation-fill-mode: backwards;
+    /* prevent flickering on load */
+    animation-iteration-count: 0;
 }

 x-no-peers h2,
--- a/public_included_ws_fallback/index.html
+++ b/public_included_ws_fallback/index.html
@@ -6,7 +6,7 @@
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <!-- Web App Config -->
    <title>PairDrop</title>
-    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="theme-color" content="#3367d6">
    <meta name="color-scheme" content="dark light">
    <meta name="apple-mobile-web-app-capable" content="no">
@@ -39,24 +39,24 @@

 <body translate="no">
    <header class="row-reverse">
-        <a href="#about" class="icon-button" title="About PairDrop">
+        <a href="#about" class="icon-button" title="About PairDrop" aria-label="Open About PairDrop">
            <svg class="icon">
                <use xlink:href="#info-outline" />
            </svg>
        </a>
        <div id="theme-wrapper">
-            <div id="theme-auto" class="icon-button selected" title="Adapt to System" >
+            <div id="theme-auto" class="icon-button selected" title="Adapt Theme to System" >
                <svg class="icon">
                    <use xlink:href="#icon-theme-auto" />
                </svg>
            </div>
            <div>
-                <div id="theme-light" class="icon-button" title="Always Light" >
+                <div id="theme-light" class="icon-button" title="Always Use Light-Theme" >
                    <svg class="icon">
                        <use xlink:href="#icon-theme-light" />
                    </svg>
                </div>
-                <div id="theme-dark" class="icon-button" title="Always Dark" >
+                <div id="theme-dark" class="icon-button" title="Always Use Dark-Theme" >
                    <svg class="icon">
                        <use xlink:href="#icon-theme-dark" />
                    </svg>
@@ -267,7 +267,7 @@
    <!-- About Page -->
    <x-about id="about" class="full center column">
        <header class="row-reverse fade-in">
-            <a href="#" class="close icon-button">
+            <a href="#" class="close icon-button" aria-label="Close About PairDrop">
                <svg class="icon">
                    <use xlink:href="#close-icon" />
                </svg>
--- a/public_included_ws_fallback/scripts/robots.txt
+++ b/public_included_ws_fallback/scripts/robots.txt
--- a/public_included_ws_fallback/scripts/ui.js
+++ b/public_included_ws_fallback/scripts/ui.js
@@ -57,6 +57,12 @@ class PeersUI {
            console.log("Retrieved edited display name:", displayName)
            if (displayName) Events.fire('self-display-name-changed', displayName);
        });
+
+
+        /* prevent animation on load */
+        setTimeout(_ => {
+            this.$xNoPeers.style.animationIterationCount = "1";
+        }, 300);
    }

    _insertDisplayName(displayName) {
@@ -175,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) {
@@ -315,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() {
@@ -362,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)
@@ -1572,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);
    }
 }

@@ -1943,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
@@ -1974,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) {
--- a/public_included_ws_fallback/service-worker.js
+++ b/public_included_ws_fallback/service-worker.js
@@ -1,4 +1,4 @@
-const cacheVersion = 'v1.6.1';
+const cacheVersion = 'v1.6.2';
 const cacheTitle = `pairdrop-included-ws-fallback-cache-${cacheVersion}`;
 const urlsToCache = [
    'index.html',
--- a/public_included_ws_fallback/styles.css
+++ b/public_included_ws_fallback/styles.css
@@ -415,10 +415,10 @@ x-no-peers {
    flex-direction: column;
    padding: 8px;
    text-align: center;
-    /* prevent flickering on load */
    animation: fade-in 300ms;
-    animation-delay: 500ms;
    animation-fill-mode: backwards;
+    /* prevent flickering on load */
+    animation-iteration-count: 0;
 }

 x-no-peers h2,
Author	SHA1	Message	Date
schlagmichdoch	8f4ce63a0c	increase version to v1.6.2	2023-04-20 22:04:57 +02:00
schlagmichdoch	b42c8a0b1a	remove background animation in favor of speed and efficiency	2023-04-20 22:02:00 +02:00
schlagmichdoch	4c7bdd3a0f	move robots.txt into correct folder	2023-04-20 21:57:31 +02:00
schlagmichdoch	3f72fa1160	remove fade-in from description (LCP) on page load	2023-04-20 21:57:24 +02:00
schlagmichdoch	5c3f5ece7d	increase seo by adding an aria-label and removing 'user-scalable=no'	2023-04-20 21:57:01 +02:00