Fix #31

.gitignore

@@ -4,6 +4,8 @@ playbook.yml
 inventory.yml
 ansible.cfg
 
+avatars/*
+thumbnails/*
 node_modules
 /build
 /.svelte-kit

README.md

@@ -96,7 +96,8 @@ and set your `User`, `Group`, `ExecStart` and `WorkingDirectory` accordingly.
 Copy `.env.EXAMPLE` to `.env` and add your `YOUTUBE_API_KEY` and `ODESLI_API_KEY`.
 To obtain one follow [YouTube's guide](https://developers.google.com/youtube/registering_an_application) to create an
 _API key_.
-If `YOUTUBE_API_KEY` is unset, no playlist will be updated.
+If `YOUTUBE_API_KEY` is unset, no playlist will be updated. Also, _all_ YouTube links will be treated as music videos,
+because the API is the only way to check if a YouTube link leads to music or something else.
 
 If `ODESLI_API_KEY` is unset, your rate limit to the song.link API will be lower.
 

package-lock.json

@@ -1,22 +1,24 @@
 {
   "name": "moshing-mammut",
-  "version": "1.3.0",
+  "version": "1.3.1",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "moshing-mammut",
-      "version": "1.3.0",
+      "version": "1.3.1",
       "license": "LGPL-3.0-or-later",
       "dependencies": {
         "dotenv": "^16.0.3",
         "feed": "^4.2.2",
+        "sharp": "^0.32.0",
         "sqlite3": "^5.1.6",
         "ws": "^8.13.0"
       },
       "devDependencies": {
         "@sveltejs/adapter-node": "^1.2.3",
         "@sveltejs/kit": "^1.5.0",
+        "@types/node": "^18.16.3",
         "@types/sqlite3": "^3.1.8",
         "@types/ws": "^8.5.4",
         "@typescript-eslint/eslint-plugin": "^5.45.0",
@@ -32,6 +34,9 @@
         "tslib": "^2.4.1",
         "typescript": "^4.9.3",
         "vite": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=18.0.0"
       }
     },
     "node_modules/@esbuild/android-arm": {
@@ -402,9 +407,9 @@
       }
     },
     "node_modules/@eslint-community/regexpp": {
-      "version": "4.5.0",
+      "version": "4.5.1",
-      "resolved": "https://registry.npmjs.org/@eslint-community/regexpp/-/regexpp-4.5.0.tgz",
+      "resolved": "https://registry.npmjs.org/@eslint-community/regexpp/-/regexpp-4.5.1.tgz",
-      "integrity": "sha512-vITaYzIcNmjn5tF5uxcZ/ft7/RXGrMUIS9HalWckEOF6ESiwXKoMzAQf2UW0aVd6rnOeExTJVd5hmWXucBKGXQ==",
+      "integrity": "sha512-Z5ba73P98O1KUYCCJTUeVpja9RcGoMdncZ6T49FCUl2lN38JtCJ+3WgIDBv0AuY4WChU5PmtJmOCTlN6FZTFKQ==",
       "dev": true,
       "engines": {
         "node": "^12.0.0 || ^14.0.0 || >=16.0.0"
@@ -689,9 +694,9 @@
       }
     },
     "node_modules/@sveltejs/adapter-node": {
-      "version": "1.2.3",
+      "version": "1.2.4",
-      "resolved": "https://registry.npmjs.org/@sveltejs/adapter-node/-/adapter-node-1.2.3.tgz",
+      "resolved": "https://registry.npmjs.org/@sveltejs/adapter-node/-/adapter-node-1.2.4.tgz",
-      "integrity": "sha512-Fv6NyVpVWYA63KRaV6dDjcU8ytcWFiUr0siJOoHl+oWy5WHNEuRiJOUdiZzYbZo8MmvFaCoxHkTgPrVQhpqaRA==",
+      "integrity": "sha512-TNnhS+OKRZ9RKnC+ho5mlE2FJquI61i0v7yOXxBUSU3LAoYH2kwVVL8P8ecjefmZ8BOfM1V54pBnDODBU5CEaA==",
       "dev": true,
       "dependencies": {
         "@rollup/plugin-commonjs": "^24.0.0",
@@ -704,13 +709,13 @@
       }
     },
     "node_modules/@sveltejs/kit": {
-      "version": "1.15.7",
+      "version": "1.15.10",
-      "resolved": "https://registry.npmjs.org/@sveltejs/kit/-/kit-1.15.7.tgz",
+      "resolved": "https://registry.npmjs.org/@sveltejs/kit/-/kit-1.15.10.tgz",
-      "integrity": "sha512-dgdKExsMJ16X3q8tEcuDlv+QIWAlJcf7IqCU2HWV13nmtTzwSA2n4VtEx9Gy5OGhH0SUAGNIupmlf0TdFSMXbw==",
+      "integrity": "sha512-qRZxODfsixjgY+7OOxhAQB8viVaxjyDUz2lM6cE22kObzF5mNke81FIxB2wdaOX42LyfVwIYULZQSr7duxLZ7w==",
       "dev": true,
       "hasInstallScript": true,
       "dependencies": {
-        "@sveltejs/vite-plugin-svelte": "^2.0.0",
+        "@sveltejs/vite-plugin-svelte": "^2.1.1",
         "@types/cookie": "^0.5.1",
         "cookie": "^0.5.0",
         "devalue": "^4.3.0",
@@ -719,10 +724,10 @@
         "magic-string": "^0.30.0",
         "mime": "^3.0.0",
         "sade": "^1.8.1",
-        "set-cookie-parser": "^2.5.1",
+        "set-cookie-parser": "^2.6.0",
         "sirv": "^2.0.2",
         "tiny-glob": "^0.2.9",
-        "undici": "5.20.0"
+        "undici": "~5.22.0"
       },
       "bin": {
         "svelte-kit": "svelte-kit.js"
@@ -748,9 +753,9 @@
       }
     },
     "node_modules/@sveltejs/vite-plugin-svelte": {
-      "version": "2.1.0",
+      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/@sveltejs/vite-plugin-svelte/-/vite-plugin-svelte-2.1.0.tgz",
+      "resolved": "https://registry.npmjs.org/@sveltejs/vite-plugin-svelte/-/vite-plugin-svelte-2.1.1.tgz",
-      "integrity": "sha512-Bc9A8mtTGlhTICdLL/aZ+jyHI3kwtkcXremOH5xwjbNNKOTOtY8nMyG8/oZ5KK8IuUfAn1WL58Bp2tofDJBW0w==",
+      "integrity": "sha512-7YeBDt4us0FiIMNsVXxyaP4Hwyn2/v9x3oqStkHU3ZdIc5O22pGwUwH33wUqYo+7Itdmo8zxJ45Qvfm3H7UUjQ==",
       "dev": true,
       "dependencies": {
         "debug": "^4.3.4",
@@ -808,9 +813,9 @@
       "dev": true
     },
     "node_modules/@types/node": {
-      "version": "18.16.0",
+      "version": "18.16.3",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-18.16.0.tgz",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-18.16.3.tgz",
-      "integrity": "sha512-BsAaKhB+7X+H4GnSjGhJG9Qi8Tw+inU9nJDwmD5CgOmBLEI6ArdhikpLX7DjbjDRDTbqZzU2LSQNZg8WGPiSZQ==",
+      "integrity": "sha512-OPs5WnnT1xkCBiuQrZA4+YAV4HEJejmHneyraIaxsbev5yCEr6KMwINNFP9wQeFIw8FWcoTqF3vQsa5CDaI+8Q==",
       "dev": true
     },
     "node_modules/@types/pug": {
@@ -850,15 +855,15 @@
       }
     },
     "node_modules/@typescript-eslint/eslint-plugin": {
-      "version": "5.59.0",
+      "version": "5.59.2",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.59.0.tgz",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.59.2.tgz",
-      "integrity": "sha512-p0QgrEyrxAWBecR56gyn3wkG15TJdI//eetInP3zYRewDh0XS+DhB3VUAd3QqvziFsfaQIoIuZMxZRB7vXYaYw==",
+      "integrity": "sha512-yVrXupeHjRxLDcPKL10sGQ/QlVrA8J5IYOEWVqk0lJaSZP7X5DfnP7Ns3cc74/blmbipQ1htFNVGsHX6wsYm0A==",
       "dev": true,
       "dependencies": {
         "@eslint-community/regexpp": "^4.4.0",
-        "@typescript-eslint/scope-manager": "5.59.0",
+        "@typescript-eslint/scope-manager": "5.59.2",
-        "@typescript-eslint/type-utils": "5.59.0",
+        "@typescript-eslint/type-utils": "5.59.2",
-        "@typescript-eslint/utils": "5.59.0",
+        "@typescript-eslint/utils": "5.59.2",
         "debug": "^4.3.4",
         "grapheme-splitter": "^1.0.4",
         "ignore": "^5.2.0",
@@ -884,14 +889,14 @@
       }
     },
     "node_modules/@typescript-eslint/parser": {
-      "version": "5.59.0",
+      "version": "5.59.2",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-5.59.0.tgz",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-5.59.2.tgz",
-      "integrity": "sha512-qK9TZ70eJtjojSUMrrEwA9ZDQ4N0e/AuoOIgXuNBorXYcBDk397D2r5MIe1B3cok/oCtdNC5j+lUUpVB+Dpb+w==",
+      "integrity": "sha512-uq0sKyw6ao1iFOZZGk9F8Nro/8+gfB5ezl1cA06SrqbgJAt0SRoFhb9pXaHvkrxUpZaoLxt8KlovHNk8Gp6/HQ==",
       "dev": true,
       "dependencies": {
-        "@typescript-eslint/scope-manager": "5.59.0",
+        "@typescript-eslint/scope-manager": "5.59.2",
-        "@typescript-eslint/types": "5.59.0",
+        "@typescript-eslint/types": "5.59.2",
-        "@typescript-eslint/typescript-estree": "5.59.0",
+        "@typescript-eslint/typescript-estree": "5.59.2",
         "debug": "^4.3.4"
       },
       "engines": {
@@ -911,13 +916,13 @@
       }
     },
     "node_modules/@typescript-eslint/scope-manager": {
-      "version": "5.59.0",
+      "version": "5.59.2",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-5.59.0.tgz",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-5.59.2.tgz",
-      "integrity": "sha512-tsoldKaMh7izN6BvkK6zRMINj4Z2d6gGhO2UsI8zGZY3XhLq1DndP3Ycjhi1JwdwPRwtLMW4EFPgpuKhbCGOvQ==",
+      "integrity": "sha512-dB1v7ROySwQWKqQ8rEWcdbTsFjh2G0vn8KUyvTXdPoyzSL6lLGkiXEV5CvpJsEe9xIdKV+8Zqb7wif2issoOFA==",
       "dev": true,
       "dependencies": {
-        "@typescript-eslint/types": "5.59.0",
+        "@typescript-eslint/types": "5.59.2",
-        "@typescript-eslint/visitor-keys": "5.59.0"
+        "@typescript-eslint/visitor-keys": "5.59.2"
       },
       "engines": {
         "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
@@ -928,13 +933,13 @@
       }
     },
     "node_modules/@typescript-eslint/type-utils": {
-      "version": "5.59.0",
+      "version": "5.59.2",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-5.59.0.tgz",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-5.59.2.tgz",
-      "integrity": "sha512-d/B6VSWnZwu70kcKQSCqjcXpVH+7ABKH8P1KNn4K7j5PXXuycZTPXF44Nui0TEm6rbWGi8kc78xRgOC4n7xFgA==",
+      "integrity": "sha512-b1LS2phBOsEy/T381bxkkywfQXkV1dWda/z0PhnIy3bC5+rQWQDS7fk9CSpcXBccPY27Z6vBEuaPBCKCgYezyQ==",
       "dev": true,
       "dependencies": {
-        "@typescript-eslint/typescript-estree": "5.59.0",
+        "@typescript-eslint/typescript-estree": "5.59.2",
-        "@typescript-eslint/utils": "5.59.0",
+        "@typescript-eslint/utils": "5.59.2",
         "debug": "^4.3.4",
         "tsutils": "^3.21.0"
       },
@@ -955,9 +960,9 @@
       }
     },
     "node_modules/@typescript-eslint/types": {
-      "version": "5.59.0",
+      "version": "5.59.2",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-5.59.0.tgz",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-5.59.2.tgz",
-      "integrity": "sha512-yR2h1NotF23xFFYKHZs17QJnB51J/s+ud4PYU4MqdZbzeNxpgUr05+dNeCN/bb6raslHvGdd6BFCkVhpPk/ZeA==",
+      "integrity": "sha512-LbJ/HqoVs2XTGq5shkiKaNTuVv5tTejdHgfdjqRUGdYhjW1crm/M7og2jhVskMt8/4wS3T1+PfFvL1K3wqYj4w==",
       "dev": true,
       "engines": {
         "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
@@ -968,13 +973,13 @@
       }
     },
     "node_modules/@typescript-eslint/typescript-estree": {
-      "version": "5.59.0",
+      "version": "5.59.2",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-5.59.0.tgz",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-5.59.2.tgz",
-      "integrity": "sha512-sUNnktjmI8DyGzPdZ8dRwW741zopGxltGs/SAPgGL/AAgDpiLsCFLcMNSpbfXfmnNeHmK9h3wGmCkGRGAoUZAg==",
+      "integrity": "sha512-+j4SmbwVmZsQ9jEyBMgpuBD0rKwi9RxRpjX71Brr73RsYnEr3Lt5QZ624Bxphp8HUkSKfqGnPJp1kA5nl0Sh7Q==",
       "dev": true,
       "dependencies": {
-        "@typescript-eslint/types": "5.59.0",
+        "@typescript-eslint/types": "5.59.2",
-        "@typescript-eslint/visitor-keys": "5.59.0",
+        "@typescript-eslint/visitor-keys": "5.59.2",
         "debug": "^4.3.4",
         "globby": "^11.1.0",
         "is-glob": "^4.0.3",
@@ -995,17 +1000,17 @@
       }
     },
     "node_modules/@typescript-eslint/utils": {
-      "version": "5.59.0",
+      "version": "5.59.2",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-5.59.0.tgz",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-5.59.2.tgz",
-      "integrity": "sha512-GGLFd+86drlHSvPgN/el6dRQNYYGOvRSDVydsUaQluwIW3HvbXuxyuD5JETvBt/9qGYe+lOrDk6gRrWOHb/FvA==",
+      "integrity": "sha512-kSuF6/77TZzyGPhGO4uVp+f0SBoYxCDf+lW3GKhtKru/L8k/Hd7NFQxyWUeY7Z/KGB2C6Fe3yf2vVi4V9TsCSQ==",
       "dev": true,
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.2.0",
         "@types/json-schema": "^7.0.9",
         "@types/semver": "^7.3.12",
-        "@typescript-eslint/scope-manager": "5.59.0",
+        "@typescript-eslint/scope-manager": "5.59.2",
-        "@typescript-eslint/types": "5.59.0",
+        "@typescript-eslint/types": "5.59.2",
-        "@typescript-eslint/typescript-estree": "5.59.0",
+        "@typescript-eslint/typescript-estree": "5.59.2",
         "eslint-scope": "^5.1.1",
         "semver": "^7.3.7"
       },
@@ -1021,12 +1026,12 @@
       }
     },
     "node_modules/@typescript-eslint/visitor-keys": {
-      "version": "5.59.0",
+      "version": "5.59.2",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-5.59.0.tgz",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-5.59.2.tgz",
-      "integrity": "sha512-qZ3iXxQhanchCeaExlKPV3gDQFxMUmU35xfd5eCXB6+kUw1TUAbIy2n7QIrwz9s98DQLzNWyHp61fY0da4ZcbA==",
+      "integrity": "sha512-EEpsO8m3RASrKAHI9jpavNv9NlEUebV4qmF1OWxSTtKSFBpC1NCmWazDQHFivRf0O1DV11BA645yrLEVQ0/Lig==",
       "dev": true,
       "dependencies": {
-        "@typescript-eslint/types": "5.59.0",
+        "@typescript-eslint/types": "5.59.2",
         "eslint-visitor-keys": "^3.3.0"
       },
       "engines": {
@@ -1199,6 +1204,25 @@
       "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
       "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw=="
     },
+    "node_modules/base64-js": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.5.1.tgz",
+      "integrity": "sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ]
+    },
     "node_modules/binary-extensions": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz",
@@ -1208,6 +1232,16 @@
         "node": ">=8"
       }
     },
+    "node_modules/bl": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/bl/-/bl-4.1.0.tgz",
+      "integrity": "sha512-1W07cM9gS6DcLperZfFSj+bWLtaPGSOHWhPiGzXmvVJbRLdG82sH/Kn8EtW1VqWVA54AKf2h5k5BbnIbwF3h6w==",
+      "dependencies": {
+        "buffer": "^5.5.0",
+        "inherits": "^2.0.4",
+        "readable-stream": "^3.4.0"
+      }
+    },
     "node_modules/brace-expansion": {
       "version": "1.1.11",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
@@ -1229,6 +1263,29 @@
         "node": ">=8"
       }
     },
+    "node_modules/buffer": {
+      "version": "5.7.1",
+      "resolved": "https://registry.npmjs.org/buffer/-/buffer-5.7.1.tgz",
+      "integrity": "sha512-EHcyIPBQ4BSGlvjB16k5KgAJ27CIsHY/2JBmCRReo48y9rQ3MaUzWX3KVlBa4U7MyX02HdVj0K7C3WaB3ju7FQ==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "dependencies": {
+        "base64-js": "^1.3.1",
+        "ieee754": "^1.1.13"
+      }
+    },
     "node_modules/buffer-crc32": {
       "version": "0.2.13",
       "resolved": "https://registry.npmjs.org/buffer-crc32/-/buffer-crc32-0.2.13.tgz",
@@ -1392,11 +1449,22 @@
         "node": ">=6"
       }
     },
+    "node_modules/color": {
+      "version": "4.2.3",
+      "resolved": "https://registry.npmjs.org/color/-/color-4.2.3.tgz",
+      "integrity": "sha512-1rXeuUUiGGrykh+CeBdu5Ie7OJwinCgQY0bc7GCRxy5xVHy+moaqkpL/jqQq0MtQOeYcrqEz4abc5f0KtU7W4A==",
+      "dependencies": {
+        "color-convert": "^2.0.1",
+        "color-string": "^1.9.0"
+      },
+      "engines": {
+        "node": ">=12.5.0"
+      }
+    },
     "node_modules/color-convert": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
       "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
-      "dev": true,
       "dependencies": {
         "color-name": "~1.1.4"
       },
@@ -1407,8 +1475,16 @@
     "node_modules/color-name": {
       "version": "1.1.4",
       "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
-      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
-      "dev": true
+    },
+    "node_modules/color-string": {
+      "version": "1.9.1",
+      "resolved": "https://registry.npmjs.org/color-string/-/color-string-1.9.1.tgz",
+      "integrity": "sha512-shrVawQFojnZv6xM40anx4CkoDP+fZsw/ZerEMsW/pyzsRbElpsL/DBVW7q3ExxwusdNXI3lXpuhEZkzs8p5Eg==",
+      "dependencies": {
+        "color-name": "^1.0.0",
+        "simple-swizzle": "^0.2.2"
+      }
     },
     "node_modules/color-support": {
       "version": "1.1.3",
@@ -1473,6 +1549,28 @@
         }
       }
     },
+    "node_modules/decompress-response": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/decompress-response/-/decompress-response-6.0.0.tgz",
+      "integrity": "sha512-aW35yZM6Bb/4oJlZncMH2LCoZtJXTRxES17vE3hoRiowU2kWHaJKFkSBDnDR+cm9J+9QhXmREyIfv0pji9ejCQ==",
+      "dependencies": {
+        "mimic-response": "^3.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/deep-extend": {
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/deep-extend/-/deep-extend-0.6.0.tgz",
+      "integrity": "sha512-LOHxIOaPYdHlJRtCQfDIVZtfw/ufM8+rVj649RIHzcm/vGwQRXFt6OPqIFWsm2XEMrNIEtWR64sY1LEKD2vAOA==",
+      "engines": {
+        "node": ">=4.0.0"
+      }
+    },
     "node_modules/deep-is": {
       "version": "0.1.4",
       "resolved": "https://registry.npmjs.org/deep-is/-/deep-is-0.1.4.tgz",
@@ -1571,6 +1669,14 @@
         "iconv-lite": "^0.6.2"
       }
     },
+    "node_modules/end-of-stream": {
+      "version": "1.4.4",
+      "resolved": "https://registry.npmjs.org/end-of-stream/-/end-of-stream-1.4.4.tgz",
+      "integrity": "sha512-+uw1inIHVPQoaVuHzRyXd21icM+cnt4CzD5rW+NC1wjOUSTOs+Te7FOv7AhN7vS9x/oIyhLP5PR1H+phQAHu5Q==",
+      "dependencies": {
+        "once": "^1.4.0"
+      }
+    },
     "node_modules/env-paths": {
       "version": "2.2.1",
       "resolved": "https://registry.npmjs.org/env-paths/-/env-paths-2.2.1.tgz",
@@ -1859,6 +1965,14 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/expand-template": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/expand-template/-/expand-template-2.0.3.tgz",
+      "integrity": "sha512-XYfuKMvj4O35f/pOXLObndIRvyQ+/+6AhODh+OKWj9S9498pHHn/IMszH+gt0fBCRWMNfk1ZSp5x3AifmnI2vg==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/fast-deep-equal": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
@@ -1984,6 +2098,11 @@
       "integrity": "sha512-5nqDSxl8nn5BSNxyR3n4I6eDmbolI6WT+QqR547RwxQapgjQBmtktdP+HTBb/a/zLsbzERTONyUB5pefh5TtjQ==",
       "dev": true
     },
+    "node_modules/fs-constants": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/fs-constants/-/fs-constants-1.0.0.tgz",
+      "integrity": "sha512-y6OAwoSIf7FyjMIv94u+b5rdheZEjzR63GTyZJm5qh4Bi+2YgwLCcI/fPFZkL5PSixOt6ZNKm+w+Hfp/Bciwow=="
+    },
     "node_modules/fs-minipass": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/fs-minipass/-/fs-minipass-2.1.0.tgz",
@@ -2039,6 +2158,11 @@
         "node": ">=10"
       }
     },
+    "node_modules/github-from-package": {
+      "version": "0.0.0",
+      "resolved": "https://registry.npmjs.org/github-from-package/-/github-from-package-0.0.0.tgz",
+      "integrity": "sha512-SyHy3T1v2NUXn29OsWdxmK6RwHD+vkj3v8en8AOBZ1wBQ/hCAQ5bAQTD02kW4W9tUp/3Qh6J8r9EvntiyCmOOw=="
+    },
     "node_modules/glob": {
       "version": "8.1.0",
       "resolved": "https://registry.npmjs.org/glob/-/glob-8.1.0.tgz",
@@ -2229,6 +2353,25 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/ieee754": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/ieee754/-/ieee754-1.2.1.tgz",
+      "integrity": "sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ]
+    },
     "node_modules/ignore": {
       "version": "5.2.4",
       "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.2.4.tgz",
@@ -2292,12 +2435,22 @@
       "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
       "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ=="
     },
+    "node_modules/ini": {
+      "version": "1.3.8",
+      "resolved": "https://registry.npmjs.org/ini/-/ini-1.3.8.tgz",
+      "integrity": "sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew=="
+    },
     "node_modules/ip": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/ip/-/ip-2.0.0.tgz",
       "integrity": "sha512-WKa+XuLG1A1R0UWhl2+1XQSi+fZWMsYKffMZTTYsiZaUD8k2yDAj5atimTUD2TZkyCkNEeYE5NhFZmupOGtjYQ==",
       "optional": true
     },
+    "node_modules/is-arrayish": {
+      "version": "0.3.2",
+      "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.3.2.tgz",
+      "integrity": "sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ=="
+    },
     "node_modules/is-binary-path": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
@@ -2594,6 +2747,17 @@
         "node": ">=10.0.0"
       }
     },
+    "node_modules/mimic-response": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/mimic-response/-/mimic-response-3.1.0.tgz",
+      "integrity": "sha512-z0yWI+4FDrrweS8Zmt4Ej5HdJmky15+L2e6Wgn3+iK5fWzb6T3fhNFq2+MeTRb064c6Wr4N/wv0DzQTjNzHNGQ==",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/min-indent": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/min-indent/-/min-indent-1.0.1.tgz",
@@ -2618,7 +2782,6 @@
       "version": "1.2.8",
       "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.8.tgz",
       "integrity": "sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==",
-      "dev": true,
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
       }
@@ -2722,6 +2885,11 @@
         "node": ">=10"
       }
     },
+    "node_modules/mkdirp-classic": {
+      "version": "0.5.3",
+      "resolved": "https://registry.npmjs.org/mkdirp-classic/-/mkdirp-classic-0.5.3.tgz",
+      "integrity": "sha512-gKLcREMhtuZRwRAfqP3RFW+TK4JqApVBtOIftVgjuABpAtpxhPGaDcfvbhNvD0B8iD1oUr/txX35NjcaY6Ns/A=="
+    },
     "node_modules/mri": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/mri/-/mri-1.2.0.tgz",
@@ -2763,6 +2931,11 @@
         "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
       }
     },
+    "node_modules/napi-build-utils": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/napi-build-utils/-/napi-build-utils-1.0.2.tgz",
+      "integrity": "sha512-ONmRUqK7zj7DWX0D9ADe03wbwOBZxNAfF20PlGfCWQcD3+/MakShIHrMqx9YwPTfxDdF1zLeL+RGZiR9kGMLdg=="
+    },
     "node_modules/natural-compare": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/natural-compare/-/natural-compare-1.4.0.tgz",
@@ -2784,10 +2957,21 @@
         "node": ">= 0.6"
       }
     },
+    "node_modules/node-abi": {
+      "version": "3.40.0",
+      "resolved": "https://registry.npmjs.org/node-abi/-/node-abi-3.40.0.tgz",
+      "integrity": "sha512-zNy02qivjjRosswoYmPi8hIKJRr8MpQyeKT6qlcq/OnOgA3Rhoae+IYOqsM9V5+JnHWmxKnWOT2GxvtqdtOCXA==",
+      "dependencies": {
+        "semver": "^7.3.5"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/node-addon-api": {
-      "version": "4.3.0",
+      "version": "6.1.0",
-      "resolved": "https://registry.npmjs.org/node-addon-api/-/node-addon-api-4.3.0.tgz",
+      "resolved": "https://registry.npmjs.org/node-addon-api/-/node-addon-api-6.1.0.tgz",
-      "integrity": "sha512-73sE9+3UaLYYFmDsFZnqCInzPyh3MqIwZO9cw58yIqAZhONrrabrYyYe3TuIqtIiOuTXVhsGau8hcrhhwSsDIQ=="
+      "integrity": "sha512-+eawOlIgy680F0kBzPUNFhMZGtJ1YmqM6l4+Crf4IkImjYrO/mqPwRMh352g23uIaQKFItcQ64I7KMaJxHgAVA=="
     },
     "node_modules/node-fetch": {
       "version": "2.6.9",
@@ -3110,6 +3294,31 @@
         "node": "^10 || ^12 || >=14"
       }
     },
+    "node_modules/prebuild-install": {
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/prebuild-install/-/prebuild-install-7.1.1.tgz",
+      "integrity": "sha512-jAXscXWMcCK8GgCoHOfIr0ODh5ai8mj63L2nWrjuAgXE6tDyYGnx4/8o/rCgU+B4JSyZBKbeZqzhtwtC3ovxjw==",
+      "dependencies": {
+        "detect-libc": "^2.0.0",
+        "expand-template": "^2.0.3",
+        "github-from-package": "0.0.0",
+        "minimist": "^1.2.3",
+        "mkdirp-classic": "^0.5.3",
+        "napi-build-utils": "^1.0.1",
+        "node-abi": "^3.3.0",
+        "pump": "^3.0.0",
+        "rc": "^1.2.7",
+        "simple-get": "^4.0.0",
+        "tar-fs": "^2.0.0",
+        "tunnel-agent": "^0.6.0"
+      },
+      "bin": {
+        "prebuild-install": "bin.js"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/prelude-ls": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz",
@@ -3163,6 +3372,15 @@
         "node": ">=10"
       }
     },
+    "node_modules/pump": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/pump/-/pump-3.0.0.tgz",
+      "integrity": "sha512-LwZy+p3SFs1Pytd/jYct4wpv49HiYCqd9Rlc5ZVdk0V+8Yzv6jR5Blk3TRmPL1ft69TxP0IMZGJ+WPFU2BFhww==",
+      "dependencies": {
+        "end-of-stream": "^1.1.0",
+        "once": "^1.3.1"
+      }
+    },
     "node_modules/punycode": {
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.0.tgz",
@@ -3192,6 +3410,28 @@
         }
       ]
     },
+    "node_modules/rc": {
+      "version": "1.2.8",
+      "resolved": "https://registry.npmjs.org/rc/-/rc-1.2.8.tgz",
+      "integrity": "sha512-y3bGgqKj3QBdxLbLkomlohkvsA8gdAiUQlSBJnBhfn+BPxg4bc62d8TcBW15wavDfgexCgccckhcZvywyQYPOw==",
+      "dependencies": {
+        "deep-extend": "^0.6.0",
+        "ini": "~1.3.0",
+        "minimist": "^1.2.0",
+        "strip-json-comments": "~2.0.1"
+      },
+      "bin": {
+        "rc": "cli.js"
+      }
+    },
+    "node_modules/rc/node_modules/strip-json-comments": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-2.0.1.tgz",
+      "integrity": "sha512-4gB8na07fecVVkOI6Rs4e7T6NOTki5EmL7TUduTs6bu3EdnSycntVJ4re8kgZA+wx9IueI2Y11bfbgwtzuE0KQ==",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/readable-stream": {
       "version": "3.6.2",
       "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.2.tgz",
@@ -3296,9 +3536,9 @@
       }
     },
     "node_modules/rollup": {
-      "version": "3.21.0",
+      "version": "3.21.3",
-      "resolved": "https://registry.npmjs.org/rollup/-/rollup-3.21.0.tgz",
+      "resolved": "https://registry.npmjs.org/rollup/-/rollup-3.21.3.tgz",
-      "integrity": "sha512-ANPhVcyeHvYdQMUyCbczy33nbLzI7RzrBje4uvNiTDJGIMtlKoOStmympwr9OtS1LZxiDmE2wvxHyVhoLtf1KQ==",
+      "integrity": "sha512-VnPfEG51nIv2xPLnZaekkuN06q9ZbnyDcLkaBdJa/W7UddyhOfMP2yOPziYQfeY7k++fZM8FdQIummFN5y14kA==",
       "dev": true,
       "bin": {
         "rollup": "dist/bin/rollup"
@@ -3457,6 +3697,28 @@
       "integrity": "sha512-RVnVQxTXuerk653XfuliOxBP81Sf0+qfQE73LIYKcyMYHG94AuH0kgrQpRDuTZnSmjpysHmzxJXKNfa6PjFhyQ==",
       "dev": true
     },
+    "node_modules/sharp": {
+      "version": "0.32.1",
+      "resolved": "https://registry.npmjs.org/sharp/-/sharp-0.32.1.tgz",
+      "integrity": "sha512-kQTFtj7ldpUqSe8kDxoGLZc1rnMFU0AO2pqbX6pLy3b7Oj8ivJIdoKNwxHVQG2HN6XpHPJqCSM2nsma2gOXvOg==",
+      "hasInstallScript": true,
+      "dependencies": {
+        "color": "^4.2.3",
+        "detect-libc": "^2.0.1",
+        "node-addon-api": "^6.1.0",
+        "prebuild-install": "^7.1.1",
+        "semver": "^7.5.0",
+        "simple-get": "^4.0.1",
+        "tar-fs": "^2.1.1",
+        "tunnel-agent": "^0.6.0"
+      },
+      "engines": {
+        "node": ">=14.15.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
     "node_modules/shebang-command": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
@@ -3483,10 +3745,61 @@
       "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.7.tgz",
       "integrity": "sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ=="
     },
+    "node_modules/simple-concat": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/simple-concat/-/simple-concat-1.0.1.tgz",
+      "integrity": "sha512-cSFtAPtRhljv69IK0hTVZQ+OfE9nePi/rtJmw5UjHeVyVroEqJXP1sFztKUy1qU+xvz3u/sfYJLa947b7nAN2Q==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ]
+    },
+    "node_modules/simple-get": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/simple-get/-/simple-get-4.0.1.tgz",
+      "integrity": "sha512-brv7p5WgH0jmQJr1ZDDfKDOSeWWg+OVypG99A/5vYGPqJ6pxiaHLy8nxtFjBA7oMa01ebA9gfh1uMCFqOuXxvA==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "dependencies": {
+        "decompress-response": "^6.0.0",
+        "once": "^1.3.1",
+        "simple-concat": "^1.0.0"
+      }
+    },
+    "node_modules/simple-swizzle": {
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/simple-swizzle/-/simple-swizzle-0.2.2.tgz",
+      "integrity": "sha512-JA//kQgZtbuY83m+xT+tXJkmJncGMTFT+C+g2h2R9uxkYIrE2yy9sgmcLhCnw57/WSD+Eh3J97FPEDFnbXnDUg==",
+      "dependencies": {
+        "is-arrayish": "^0.3.1"
+      }
+    },
     "node_modules/sirv": {
-      "version": "2.0.2",
+      "version": "2.0.3",
-      "resolved": "https://registry.npmjs.org/sirv/-/sirv-2.0.2.tgz",
+      "resolved": "https://registry.npmjs.org/sirv/-/sirv-2.0.3.tgz",
-      "integrity": "sha512-4Qog6aE29nIjAOKe/wowFTxOdmbEZKb+3tsLljaBRzJwtqto0BChD2zzH0LhgCSXiI+V7X+Y45v14wBZQ1TK3w==",
+      "integrity": "sha512-O9jm9BsID1P+0HOi81VpXPoDxYP374pkOLzACAoyUQ/3OUVndNpsz6wMnY2z+yOxzbllCKZrM+9QrWsv4THnyA==",
       "dev": true,
       "dependencies": {
         "@polka/url": "^1.0.0-next.20",
@@ -3590,6 +3903,11 @@
         }
       }
     },
+    "node_modules/sqlite3/node_modules/node-addon-api": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/node-addon-api/-/node-addon-api-4.3.0.tgz",
+      "integrity": "sha512-73sE9+3UaLYYFmDsFZnqCInzPyh3MqIwZO9cw58yIqAZhONrrabrYyYe3TuIqtIiOuTXVhsGau8hcrhhwSsDIQ=="
+    },
     "node_modules/ssri": {
       "version": "8.0.1",
       "resolved": "https://registry.npmjs.org/ssri/-/ssri-8.0.1.tgz",
@@ -3825,6 +4143,37 @@
         "node": ">=10"
       }
     },
+    "node_modules/tar-fs": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/tar-fs/-/tar-fs-2.1.1.tgz",
+      "integrity": "sha512-V0r2Y9scmbDRLCNex/+hYzvp/zyYjvFbHPNgVTKfQvVrb6guiE/fxP+XblDNR011utopbkex2nM4dHNV6GDsng==",
+      "dependencies": {
+        "chownr": "^1.1.1",
+        "mkdirp-classic": "^0.5.2",
+        "pump": "^3.0.0",
+        "tar-stream": "^2.1.4"
+      }
+    },
+    "node_modules/tar-fs/node_modules/chownr": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/chownr/-/chownr-1.1.4.tgz",
+      "integrity": "sha512-jJ0bqzaylmJtVnNgzTeSOs8DPavpbYgEr/b0YL8/2GO3xJEhInFmhKMUnEJQjZumK7KXGFhUy89PrsJWlakBVg=="
+    },
+    "node_modules/tar-stream": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/tar-stream/-/tar-stream-2.2.0.tgz",
+      "integrity": "sha512-ujeqbceABgwMZxEJnk2HDY2DlnUZ+9oEcb1KzTVfYHio0UE6dG71n60d8D2I4qNvleWrrXpmjpt7vZeF1LnMZQ==",
+      "dependencies": {
+        "bl": "^4.0.3",
+        "end-of-stream": "^1.4.1",
+        "fs-constants": "^1.0.0",
+        "inherits": "^2.0.3",
+        "readable-stream": "^3.1.1"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/tar/node_modules/minipass": {
       "version": "4.2.8",
       "resolved": "https://registry.npmjs.org/minipass/-/minipass-4.2.8.tgz",
@@ -3902,6 +4251,17 @@
       "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==",
       "dev": true
     },
+    "node_modules/tunnel-agent": {
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/tunnel-agent/-/tunnel-agent-0.6.0.tgz",
+      "integrity": "sha512-McnNiV1l8RYeY8tBgEpuodCC1mLUdbSN+CYBL7kJsJNInOP8UjDDEwdk6Mw60vdLLrr5NHKZhMAOSrR2NZuQ+w==",
+      "dependencies": {
+        "safe-buffer": "^5.0.1"
+      },
+      "engines": {
+        "node": "*"
+      }
+    },
     "node_modules/type-check": {
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz",
@@ -3940,15 +4300,15 @@
       }
     },
     "node_modules/undici": {
-      "version": "5.20.0",
+      "version": "5.22.0",
-      "resolved": "https://registry.npmjs.org/undici/-/undici-5.20.0.tgz",
+      "resolved": "https://registry.npmjs.org/undici/-/undici-5.22.0.tgz",
-      "integrity": "sha512-J3j60dYzuo6Eevbawwp1sdg16k5Tf768bxYK4TUJRH7cBM4kFCbf3mOnM/0E3vQYXvpxITbbWmBafaDbxLDz3g==",
+      "integrity": "sha512-fR9RXCc+6Dxav4P9VV/sp5w3eFiSdOjJYsbtWfd4s5L5C4ogyuVpdKIVHeW0vV1MloM65/f7W45nR9ZxwVdyiA==",
       "dev": true,
       "dependencies": {
         "busboy": "^1.6.0"
       },
       "engines": {
-        "node": ">=12.18"
+        "node": ">=14.0"
       }
     },
     "node_modules/unique-filename": {
@@ -3984,14 +4344,14 @@
       "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw=="
     },
     "node_modules/vite": {
-      "version": "4.3.1",
+      "version": "4.3.4",
-      "resolved": "https://registry.npmjs.org/vite/-/vite-4.3.1.tgz",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-4.3.4.tgz",
-      "integrity": "sha512-EPmfPLAI79Z/RofuMvkIS0Yr091T2ReUoXQqc5ppBX/sjFRhHKiPPF/R46cTdoci/XgeQpB23diiJxq5w30vdg==",
+      "integrity": "sha512-f90aqGBoxSFxWph2b39ae2uHAxm5jFBBdnfueNxZAT1FTpM13ccFQExCaKbR2xFW5atowjleRniQ7onjJ22QEg==",
       "dev": true,
       "dependencies": {
         "esbuild": "^0.17.5",
-        "postcss": "^8.4.21",
+        "postcss": "^8.4.23",
-        "rollup": "^3.20.2"
+        "rollup": "^3.21.0"
       },
       "bin": {
         "vite": "bin/vite.js"

package.json

@@ -16,6 +16,7 @@
   "devDependencies": {
     "@sveltejs/adapter-node": "^1.2.3",
     "@sveltejs/kit": "^1.5.0",
+    "@types/node": "^18.16.3",
     "@types/sqlite3": "^3.1.8",
     "@types/ws": "^8.5.4",
     "@typescript-eslint/eslint-plugin": "^5.45.0",
@@ -36,7 +37,11 @@
   "dependencies": {
     "dotenv": "^16.0.3",
     "feed": "^4.2.2",
+    "sharp": "^0.32.0",
     "sqlite3": "^5.1.6",
     "ws": "^8.13.0"
+  },
+  "engines": {
+    "node": ">=18.0.0"
   }
 }

src/app.html

@@ -10,7 +10,7 @@
     <meta name="apple-mobile-web-app-title" content="Moshing Mammut" />
     <meta name="application-name" content="Moshing Mammut" />
     <meta name="msapplication-TileColor" content="#2e0b78" />
-    <link rel="stylesheet" href="%sveltekit.assets%/style.css" />
+
     <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
     <meta name="theme-color" content="#17063b" media="(prefers-color-scheme: dark)" />
     <meta name="theme-color" content="#BCB9B2" media="(prefers-color-scheme: light)" />
@@ -19,14 +19,40 @@
     %sveltekit.head%
     <style>
       body {
-        --color-text: #2f0c7a;
+        --color-blue: hsl(259, 82%, 26%);
-        --color-bg: white;
+        --color-blue-dark: hsl(259, 82%, 13%);
-        --color-border: #17063b;
+        --color-lavender: hsl(253, 82%, 33%);
-        --color-link: #563acc;
+        --color-mauve: hsl(273, 82%, 38%);
-        --color-link-visited: #858afa;
+
+        --color-grey: hsl(44, 7%, 41%);
+        --color-grey-translucent: hsla(44, 7%, 41%, 0.2);
+        --color-grey-light: hsl(0, 0%, 98%);
+
+        --color-red: hsl(7, 100%, 56%);
+        --color-red-light: hsl(7, 100%, 61%);
+        --color-red-lighter: hsl(7, 100%, 68%);
+        --color-red-dark: hsl(7, 100%, 48%);
+        --color-red-desat: hsl(7, 20%, 56%);
+        --color-red-desat-dark: hsl(7, 20%, 30%);
+        --color-red-desat-desat: hsl(7, 8%, 56%);
+
+        --color-text: var(--color-blue-dark);
+        --color-border: var(--color-grey);
+        --color-link: var(--color-mauve);
+        --color-link-visited: var(--color-lavender);
+        --color-bg: var(--color-grey-light);
+        --color-bg-translucent: hsla(42, 7%, 72%, 0.5);
+        --color-button: var(--color-red-light);
+        --color-button-shadow: var(--color-red-desat-dark);
+        --color-button-hover: var(--color-red);
+        --color-button-deactivated: var(--color-red-desat-desat);
+        --color-button-text: var(--color-blue-dark);
 
         color: var(--color-text);
         background-color: var(--color-bg);
+        font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans,
+          Ubuntu, Cantarell, 'Helvetica Neue', Helvetica, Arial, sans-serif, 'Apple Color Emoji',
+          'Segoe UI Emoji', 'Segoe UI Symbol';
       }
 
       a {
@@ -38,11 +64,20 @@
 
       @media (prefers-color-scheme: dark) {
         body {
-          --color-text: white;
+          --color-lavender: hsl(273, 43%, 65%);
-          --color-bg: #17063b;
+          --color-mauve: hsl(286, 73%, 81%);
-          --color-border: white;
+
-          --color-link: #8a9bf0;
+          --color-text: var(--color-grey-light);
-          --color-link-visited: #c384fb;
+          --color-border: var(--color-grey-light);
+          --color-link: var(--color-lavender);
+          --color-link-visited: var(--color-mauve);
+          --color-bg: var(--color-blue-dark);
+          --color-bg-translucent: hsla(259, 82%, 26%, 0.5);
+          --color-button: var(--color-red-light);
+          --color-button-shadow: var(--color-red-desat);
+          --color-button-hover: var(--color-red);
+          --color-button-deactivated: var(--color-red-desat-desat);
+          --color-button-text: var(--color-blue-dark);
         }
       }
     </style>

src/hooks.server.ts

@@ -1,6 +1,7 @@
 import { log } from '$lib/log';
 import { TimelineReader } from '$lib/server/timeline';
 import type { HandleServerError } from '@sveltejs/kit';
+import { error } from '@sveltejs/kit';
 import fs from 'fs/promises';
 
 TimelineReader.init();
@@ -27,6 +28,35 @@ export const handle = (async ({ event, resolve }) => {
     return new Response(f, { headers: [['Content-Type', 'application/atom+xml']] });
   }
 
+  // Ideally, this would be served by apache
+  if (event.url.pathname.startsWith('/avatars/')) {
+    const fileName = event.url.pathname.split('/').pop() ?? 'unknown.jpeg';
+    const suffix = fileName.split('.').pop() ?? 'jpeg';
+    try {
+      //This should work, but doesn't yet. See: https://github.com/nodejs/node/issues/45853
+      /*
+      const stat = await fs.stat('avatars/' + fileName);
+      const fd = await fs.open('avatars/' + fileName);
+      const readStream = fd
+        .readableWebStream()
+        .getReader({ mode: 'byob' }) as ReadableStream<Uint8Array>;
+      log.info('sending. size: ', stat.size);
+      return new Response(readStream, {
+        headers: [
+          ['Content-Type', 'image/' + suffix],
+          ['Content-Length', stat.size.toString()]
+        ]
+      });
+      */
+
+      const f = await fs.readFile('avatars/' + fileName);
+      return new Response(f, { headers: [['Content-Type', 'image/' + suffix]] });
+    } catch (e) {
+      log.error('no stream', e);
+      throw error(404);
+    }
+  }
+
   const response = await resolve(event);
   return response;
 }) satisfies Handle;

src/lib/components/AvatarComponent.svelte

@@ -3,17 +3,51 @@
 
   export let account: Account;
   let avatarDescription: string;
+  let sourceSetHtml: string;
   $: avatarDescription = `Avatar for ${account.acct}`;
+  $: {
+    // Sort thumbnails by file type. This is important, because the order of the srcset entries matter.
+    // We need the best format to be first
+    const formatPriority = new Map<string, number>([
+      ['avif', 0],
+      ['webp', 1],
+      ['jpg', 99],
+      ['jpeg', 99]
+    ]);
+    const resizedAvatars = (account.resizedAvatars ?? []).sort((a, b) => {
+      const extensionA = a.file.split('.').pop() ?? '';
+      const extensionB = b.file.split('.').pop() ?? '';
+      const prioA = formatPriority.get(extensionA) ?? 3;
+      const prioB = formatPriority.get(extensionB) ?? 3;
+      return prioA - prioB;
+    });
+    const m = new Map<string, string[]>();
+    for (const resizedAvatar of resizedAvatars) {
+      const extension = resizedAvatar.file.split('.').pop();
+      const mime = extension ? `image/${extension}` : 'application/octet-stream';
+      const sourceSetEntry = `${resizedAvatar.file} ${resizedAvatar.sizeDescriptor}`;
+      m.set(mime, [...(m.get(mime) || []), sourceSetEntry]);
+    }
+    let html = '';
+    for (const entry of m.entries()) {
+      const srcset = entry[1].join(', ');
+      html += `<source srcset="${srcset}" type="${entry[0]}" />`;
+    }
+    sourceSetHtml = html;
+  }
 </script>
 
-<img src={account.avatar} alt={avatarDescription} />
+<picture>
+  {@html sourceSetHtml}
+  <img src={account.avatar} alt={avatarDescription} loading="lazy" />
+</picture>
 
 <style>
   img {
     max-width: 100%;
     max-height: 100%;
-    width: auto;
+    width: 50px;
-    height: auto;
+    height: 50px;
     object-fit: contain;
     border-radius: 3px;
   }

src/lib/components/FooterComponent.svelte

@@ -49,6 +49,7 @@
     top: 0.25em;
     color: white;
     height: 1em;
+    width: 1em;
   }
   @media (prefers-color-scheme: dark) {
     .icon {

src/lib/components/PostComponent.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
-  import type { Post } from '$lib/mastodon/response';
+  import { type Post, SongThumbnailImageKind } from '$lib/mastodon/response';
+  import type { SongInfo } from '$lib/odesliResponse';
   import AvatarComponent from '$lib/components/AvatarComponent.svelte';
   import AccountComponent from '$lib/components/AccountComponent.svelte';
   import { secondsSince, relativeTime } from '$lib/relativeTime';
@@ -14,6 +15,62 @@
     dateCreated = relativeTime($timePassed) ?? absoluteDate;
   }
 
+  // Blurred thumbs aren't generated (yet, unclear of they ever will)
+  // So blurred forces using the small one, by skipping the others and removing its media query.
+  // This is technically unnecessary - the blurred one will only show if it matches the small media query,
+  // but this makes it more explicit
+  function getSourceSetHtml(song: SongInfo, isBlurred: boolean = false): string {
+    const small = new Map<string, string[]>();
+    const large = new Map<string, string[]>();
+
+    // Sort thumbnails by file type. This is important, because the order of the srcset entries matter.
+    // We need the best format to be first
+    const formatPriority = new Map<string, number>([
+      ['avif', 0],
+      ['webp', 1],
+      ['jpg', 99],
+      ['jpeg', 99]
+    ]);
+    const thumbs = (song.resizedThumbnails ?? []).sort((a, b) => {
+      const extensionA = a.file.split('.').pop() ?? '';
+      const extensionB = b.file.split('.').pop() ?? '';
+      const prioA = formatPriority.get(extensionA) ?? 3;
+      const prioB = formatPriority.get(extensionB) ?? 3;
+      return prioA - prioB;
+    });
+
+    for (const resizedThumb of thumbs) {
+      if (isBlurred && resizedThumb.kind !== SongThumbnailImageKind.Small) {
+        continue;
+      }
+      const extension = resizedThumb.file.split('.').pop();
+      const mime = extension ? `image/${extension}` : 'application/octet-stream';
+      const sourceSetEntry = `${resizedThumb.file} ${resizedThumb.sizeDescriptor}`;
+      switch (resizedThumb.kind) {
+        case SongThumbnailImageKind.Big:
+          large.set(mime, [...(large.get(mime) || []), sourceSetEntry]);
+          break;
+        case SongThumbnailImageKind.Small:
+          small.set(mime, [...(small.get(mime) || []), sourceSetEntry]);
+          break;
+        case SongThumbnailImageKind.Blurred: // currently not generated
+          break;
+      }
+    }
+    let html = '';
+    const mediaAttribute = isBlurred ? '' : 'media="(max-width: 650px)"';
+    for (const entry of small.entries()) {
+      const srcset = entry[1].join(', ');
+      html += `<source srcset="${srcset}" type="${entry[0]}" ${mediaAttribute} />`;
+    }
+    html += '\n';
+    for (const entry of large.entries()) {
+      const srcset = entry[1].join(', ');
+      html += `<source srcset="${srcset}" type="${entry[0]}" />`;
+    }
+    return html;
+  }
+
   onMount(() => {
     // Display relative time only after mount:
     // When JS is disabled the server-side rendered absolute date will be shown,
@@ -33,14 +90,21 @@
     {#if post.songs}
       {#each post.songs as song (song.pageUrl)}
         <div class="info-wrapper">
-          <div class="bgimage" style="background-image: url({song.thumbnailUrl});" />
+          <picture>
+            {@html getSourceSetHtml(song)}
+            <img class="bgimage" src={song.thumbnailUrl} loading="lazy" alt="Blurred cover" />
+          </picture>
           <a href={song.pageUrl ?? song.postedUrl} target="_blank">
             <div class="info">
-              <img
+              <picture>
-                src={song.thumbnailUrl}
+                {@html getSourceSetHtml(song)}
-                class="cover"
+                <img
-                alt="Cover for {song.artistName} - {song.title}"
+                  src={song.thumbnailUrl}
-              />
+                  class="cover"
+                  alt="Cover for {song.artistName} - {song.title}"
+                  loading="lazy"
+                />
+              </picture>
               <span class="text">{song.artistName} - {song.title}</span>
             </div>
           </a>
@@ -128,7 +192,6 @@
     }
     .cover:not(.background) {
       z-index: 1;
-      width: 60px;
       backdrop-filter: blur(10px);
       -webkit-backdrop-filter: blur(10px);
     }

src/lib/mastodon/response.ts

@@ -37,4 +37,24 @@ export interface Account {
   display_name: string;
   url: string;
   avatar: string;
+  resizedAvatars?: AccountAvatar[];
 }
+
+export type AccountAvatar = {
+  accountUrl: string;
+  file: string;
+  sizeDescriptor: string;
+};
+
+export enum SongThumbnailImageKind {
+  Big = 1,
+  Small,
+  Blurred
+}
+
+export type SongThumbnailImage = {
+  songThumbnailUrl: string;
+  file: string;
+  sizeDescriptor: string;
+  kind: SongThumbnailImageKind;
+};

src/lib/odesliResponse.ts

@@ -1,3 +1,5 @@
+import type { SongThumbnailImage } from '$lib/mastodon/response';
+
 export type SongInfo = {
   pageUrl: string;
   youtubeUrl?: string;
@@ -6,6 +8,7 @@ export type SongInfo = {
   artistName?: string;
   thumbnailUrl?: string;
   postedUrl: string;
+  resizedThumbnails?: SongThumbnailImage[];
 };
 
 export type SongwhipReponse = {

src/lib/server/db.ts

@@ -1,14 +1,12 @@
 import { IGNORE_USERS, MASTODON_INSTANCE } from '$env/static/private';
 import { enableVerboseLog, log } from '$lib/log';
-import type { Account, Post, Tag } from '$lib/mastodon/response';
+import type { Account, AccountAvatar, Post, SongThumbnailImage, Tag } from '$lib/mastodon/response';
 import type { SongInfo } from '$lib/odesliResponse';
 import { TimelineReader } from '$lib/server/timeline';
 import sqlite3 from 'sqlite3';
 
-const { DEV } = import.meta.env;
-
 type FilterParameter = {
-  $limit: number | undefined | null;
+  $limit?: number | undefined | null;
   $since?: string | undefined | null;
   $before?: string | undefined | null;
   [x: string]: string | number | undefined | null;
@@ -44,6 +42,19 @@ type SongRow = {
   thumbnailUrl?: string;
 };
 
+type AccountAvatarRow = {
+  account_url: string;
+  file: string;
+  sizeDescriptor: string;
+};
+
+type SongThumbnailAvatarRow = {
+  song_thumbnailUrl: string;
+  file: string;
+  sizeDescriptor: string;
+  kind: number;
+};
+
 type Migration = {
   id: number;
   name: string;
@@ -270,6 +281,29 @@ function getMigrations(): Migration[] {
       id: 4,
       name: 'song info for existing posts',
       statement: ``
+    },
+    {
+      id: 5,
+      name: 'resized avatars',
+      statement: `
+      CREATE TABLE accountsavatars (
+        file TEXT NOT NULL PRIMARY KEY,
+        account_url TEXT NOT NULL,
+        sizeDescriptor TEXT NOT NULL,
+        FOREIGN KEY (account_url) REFERENCES accounts(url)
+      );`
+    },
+    {
+      id: 6,
+      name: 'resized song thumbnails',
+      statement: `
+      CREATE TABLE songsthumbnails (
+        file TEXT NOT NULL PRIMARY KEY,
+        song_thumbnailUrl TEXT NOT NULL,
+        sizeDescriptor TEXT NOT NULL,
+        kind INTEGER NOT NULL,
+        FOREIGN KEY (song_thumbnailUrl) REFERENCES songs(thumbnailUrl)
+      );`
     }
   ];
 }
@@ -278,13 +312,9 @@ async function waitReady(): Promise<void> {
   // Simpler than a semaphore and is really only needed on startup
   return new Promise((resolve) => {
     const interval = setInterval(() => {
-      if (DEV) {
+      log.verbose('Waiting for database to be ready');
-        log.debug('Waiting for database to be ready');
-      }
       if (databaseReady) {
-        if (DEV) {
+        log.verbose('DB is ready');
-          log.debug('DB is ready');
-        }
         clearInterval(interval);
         resolve();
       }
@@ -476,7 +506,7 @@ function getPostData(filterQuery: string, params: FilterParameter): Promise<Post
   });
 }
 
-function getTagData(postIdsParams: String, postIds: string[]): Promise<Map<string, Tag[]>> {
+function getTagData(postIdsParams: string, postIds: string[]): Promise<Map<string, Tag[]>> {
   return new Promise((resolve, reject) => {
     db.all(
       `SELECT post_id, tags.url, tags.tag
@@ -540,6 +570,78 @@ function getSongData(postIdsParams: String, postIds: string[]): Promise<Map<stri
   });
 }
 
+function getAvatarData(
+  accountUrlsParams: string,
+  accountUrls: string[]
+): Promise<Map<string, AccountAvatar[]>> {
+  return new Promise((resolve, reject) => {
+    db.all(
+      `SELECT account_url, file, sizeDescriptor
+      FROM accountsavatars
+      WHERE account_url IN (${accountUrlsParams});`,
+      accountUrls,
+      (err, rows: AccountAvatarRow[]) => {
+        if (err != null) {
+          log.error('Error loading avatars', err);
+          reject(err);
+          return;
+        }
+        const avatarMap: Map<string, AccountAvatar[]> = rows.reduce(
+          (result: Map<string, AccountAvatar[]>, item) => {
+            const info: AccountAvatar = {
+              accountUrl: item.account_url,
+              file: item.file,
+              sizeDescriptor: item.sizeDescriptor
+            };
+            result.set(item.account_url, [...(result.get(item.account_url) || []), info]);
+            return result;
+          },
+          new Map()
+        );
+        resolve(avatarMap);
+      }
+    );
+  });
+}
+
+function getSongThumbnailData(
+  thumbUrlsParams: string,
+  thumbUrls: string[]
+): Promise<Map<string, SongThumbnailImage[]>> {
+  return new Promise((resolve, reject) => {
+    db.all(
+      `SELECT song_thumbnailUrl, file, sizeDescriptor, kind
+      FROM songsthumbnails
+      WHERE song_thumbnailUrl IN (${thumbUrlsParams});`,
+      thumbUrls,
+      (err, rows: SongThumbnailAvatarRow[]) => {
+        if (err != null) {
+          log.error('Error loading avatars', err);
+          reject(err);
+          return;
+        }
+        const thumbnailMap: Map<string, SongThumbnailImage[]> = rows.reduce(
+          (result: Map<string, SongThumbnailImage[]>, item) => {
+            const info: SongThumbnailImage = {
+              songThumbnailUrl: item.song_thumbnailUrl,
+              file: item.file,
+              sizeDescriptor: item.sizeDescriptor,
+              kind: item.kind
+            };
+            result.set(item.song_thumbnailUrl, [
+              ...(result.get(item.song_thumbnailUrl) || []),
+              info
+            ]);
+            return result;
+          },
+          new Map()
+        );
+        resolve(thumbnailMap);
+      }
+    );
+  });
+}
+
 export async function getPosts(
   since: string | null,
   before: string | null,
@@ -589,6 +691,17 @@ async function getPostsInternal(
   const postIds = rows.map((r: PostRow) => r.url);
   const tagMap = await getTagData(postIdsParams, postIds);
   const songMap = await getSongData(postIdsParams, postIds);
+  for (const entry of songMap) {
+    for (const songInfo of entry[1]) {
+      const thumbs = await getSongThumbnails(songInfo);
+      songInfo.resizedThumbnails = thumbs;
+    }
+  }
+
+  const accountUrls = [...new Set(rows.map((r: PostRow) => r.account_url))];
+  const accountUrlsParams = accountUrls.map(() => '?').join(', ');
+
+  const avatars = await getAvatarData(accountUrlsParams, accountUrls);
   const posts = rows.map((row) => {
     return {
       id: row.id,
@@ -602,10 +715,134 @@ async function getPostsInternal(
         username: row.username,
         display_name: row.display_name,
         url: row.account_url,
-        avatar: row.avatar
+        avatar: row.avatar,
+        resizedAvatars: avatars.get(row.account_url) || []
       } as Account,
       songs: songMap.get(row.url) || []
     } as Post;
   });
   return posts;
 }
+
+export async function removeAvatars(accountUrl: string): Promise<void> {
+  const params: FilterParameter = { $account: accountUrl };
+  const sql = `
+  DELETE
+  FROM accountsavatars
+  WHERE account_url = $account`;
+  await waitReady();
+  return new Promise((resolve, reject) => {
+    db.run(sql, params, (err) => {
+      if (err) {
+        reject(err);
+        return;
+      }
+      resolve();
+    });
+  });
+}
+
+export async function saveSongThumbnail(thumb: SongThumbnailImage): Promise<void> {
+  // Will be null if file already existed
+  if (thumb.file === null) {
+    return;
+  }
+  const params: FilterParameter = {
+    $songId: thumb.songThumbnailUrl,
+    $file: thumb.file,
+    $sizeDescriptor: thumb.sizeDescriptor,
+    $kind: thumb.kind.valueOf()
+  };
+  const sql = `
+  INSERT INTO songsthumbnails
+  (song_thumbnailUrl, file, sizeDescriptor, kind) VALUES ($songId, $file, $sizeDescriptor, $kind)
+  ON CONFLICT(file) DO UPDATE SET
+  song_thumbnailUrl=excluded.song_thumbnailUrl,
+  sizeDescriptor=excluded.sizeDescriptor,
+  kind=excluded.kind;`;
+  await waitReady();
+  return new Promise((resolve, reject) => {
+    db.run(sql, params, (err) => {
+      if (err) {
+        reject(err);
+        return;
+      }
+      resolve();
+    });
+  });
+}
+
+export async function saveAvatar(avatar: AccountAvatar): Promise<void> {
+  // Will be null if file already existed
+  if (avatar.file === null) {
+    return;
+  }
+  const params: FilterParameter = {
+    $accountUrl: avatar.accountUrl,
+    $file: avatar.file,
+    $sizeDescriptor: avatar.sizeDescriptor
+  };
+  const sql = `
+  INSERT INTO accountsavatars
+  (account_url, file, sizeDescriptor) VALUES ($accountUrl, $file, $sizeDescriptor)
+  ON CONFLICT(file) DO UPDATE SET
+  account_url=excluded.account_url,
+  sizeDescriptor=excluded.sizeDescriptor;`;
+  await waitReady();
+  return new Promise((resolve, reject) => {
+    db.run(sql, params, (err) => {
+      if (err) {
+        reject(err);
+        return;
+      }
+      resolve();
+    });
+  });
+}
+
+export async function getAvatars(
+  accountUrl: string,
+  limit: number | undefined
+): Promise<AccountAvatar[]> {
+  // TODO: Refactor to use `getAvatarData`
+  await waitReady();
+  let limitFilter = '';
+  const params: FilterParameter = {
+    $account: accountUrl,
+    $limit: 100
+  };
+  if (limit !== undefined) {
+    limitFilter = 'LIMIT $limit';
+    params.$limit = limit;
+  }
+  const sql = `
+  SELECT account_url, file, sizeDescriptor
+  FROM accountsavatars
+  WHERE account_url = $account
+  ${limitFilter};`;
+  return new Promise((resolve, reject) => {
+    db.all(sql, params, (err, rows: AccountAvatarRow[]) => {
+      if (err) {
+        reject(err);
+        return;
+      }
+      resolve(
+        rows.map((r) => {
+          return {
+            accountUrl: r.account_url,
+            file: r.file,
+            sizeDescriptor: r.sizeDescriptor
+          } as AccountAvatar;
+        })
+      );
+    });
+  });
+}
+
+export async function getSongThumbnails(song: SongInfo): Promise<SongThumbnailImage[]> {
+  if (!song.thumbnailUrl) {
+    return [];
+  }
+  const rows = await getSongThumbnailData('?', [song.thumbnailUrl]);
+  return rows.get(song.thumbnailUrl) ?? [];
+}

src/lib/server/timeline.ts

@@ -1,17 +1,82 @@
-import { HASHTAG_FILTER, MASTODON_INSTANCE, ODESLI_API_KEY } from '$env/static/private';
+import {
+  HASHTAG_FILTER,
+  MASTODON_INSTANCE,
+  ODESLI_API_KEY,
+  YOUTUBE_API_KEY
+} from '$env/static/private';
 import { log } from '$lib/log';
-import type { Post, Tag, TimelineEvent } from '$lib/mastodon/response';
+import type {
+  Account,
+  AccountAvatar,
+  Post,
+  SongThumbnailImage,
+  Tag,
+  TimelineEvent
+} from '$lib/mastodon/response';
+import { SongThumbnailImageKind } from '$lib/mastodon/response';
 import type { OdesliResponse, Platform, SongInfo } from '$lib/odesliResponse';
-import { getPosts, savePost } from '$lib/server/db';
+import {
+  getAvatars,
+  getPosts,
+  getSongThumbnails,
+  removeAvatars,
+  saveAvatar,
+  savePost,
+  saveSongThumbnail
+} from '$lib/server/db';
 import { createFeed, saveAtomFeed } from '$lib/server/rss';
 import { sleep } from '$lib/sleep';
+import crypto from 'crypto';
+import fs from 'fs/promises';
+import sharp from 'sharp';
 import { WebSocket } from 'ws';
 
 const URL_REGEX = new RegExp(/href="(?<postUrl>[^>]+?)" target="_blank"/gm);
+const INVIDIOUS_REGEX = new RegExp(/invidious.*?watch.*?v=(?<videoId>[a-zA-Z_0-9-]+)/gm);
+const YOUTUBE_REGEX = new RegExp(
+  /https?:\/\/(www\.)?youtu((be.com\/.*?v=)|(\.be\/))(?<videoId>[a-zA-Z_0-9-]+)/gm
+);
 
 export class TimelineReader {
   private static _instance: TimelineReader;
 
+  private static async isMusicVideo(videoId: string) {
+    if (!YOUTUBE_API_KEY || YOUTUBE_API_KEY === 'CHANGE_ME') {
+      // Assume that it *is* a music link when no YT API key is provided
+      return true;
+    }
+    const searchParams = new URLSearchParams([
+      ['part', 'snippet'],
+      ['id', videoId],
+      ['key', YOUTUBE_API_KEY]
+    ]);
+    const youtubeVideoUrl = new URL(`https://www.googleapis.com/youtube/v3/videos?${searchParams}`);
+    const resp = await fetch(youtubeVideoUrl);
+    const respObj = await resp.json();
+    if (!respObj.items.length) {
+      console.warn('Could not find video with id', videoId);
+      return false;
+    }
+
+    const item = respObj.items[0];
+    if (item.tags?.includes('music')) {
+      return true;
+    }
+
+    const categorySearchParams = new URLSearchParams([
+      ['part', 'snippet'],
+      ['id', item.categoryId],
+      ['key', YOUTUBE_API_KEY]
+    ]);
+    const youtubeCategoryUrl = new URL(
+      `https://www.googleapis.com/youtube/v3/videoCategories?${categorySearchParams}`
+    );
+    const categoryTitle: string = await fetch(youtubeCategoryUrl)
+      .then((r) => r.json())
+      .then((r) => r.items[0]?.title);
+    return categoryTitle === 'Music';
+  }
+
   public static async getSongInfoInPost(post: Post): Promise<SongInfo[]> {
     const urlMatches = post.content.matchAll(URL_REGEX);
     const songs: SongInfo[] = [];
@@ -52,8 +117,12 @@ export class TimelineReader {
       return null;
     }
 
+    const videoId = INVIDIOUS_REGEX.exec(url.href)?.groups?.videoId;
+    const urlString =
+      videoId !== undefined ? `https://youtube.com/watch?v=${videoId}` : url.toString();
+
     const odesliParams = new URLSearchParams();
-    odesliParams.append('url', url.toString());
+    odesliParams.append('url', urlString);
     odesliParams.append('userCountry', 'DE');
     odesliParams.append('songIfSingle', 'true');
     if (ODESLI_API_KEY && ODESLI_API_KEY !== 'CHANGE_ME') {
@@ -61,23 +130,39 @@ export class TimelineReader {
     }
     const odesliApiUrl = `https://api.song.link/v1-alpha.1/links?${odesliParams}`;
     try {
-      return fetch(odesliApiUrl).then(async (response) => {
+      const response = await fetch(odesliApiUrl);
-        if (response.status === 429) {
+      log.debug('received odesli response', response.status);
-          throw new Error('Rate limit reached', { cause: 429 });
+      if (response.status === 429) {
-        }
+        throw new Error('Rate limit reached', { cause: 429 });
-        const odesliInfo: OdesliResponse = await response.json();
+      }
-        if (!odesliInfo || !odesliInfo.entitiesByUniqueId || !odesliInfo.entityUniqueId) {
+      const odesliInfo: OdesliResponse = await response.json();
+      if (!odesliInfo || !odesliInfo.entitiesByUniqueId || !odesliInfo.entityUniqueId) {
+        return null;
+      }
+      const info = odesliInfo.entitiesByUniqueId[odesliInfo.entityUniqueId];
+      const platform: Platform = 'youtube';
+      log.debug(url, 'odesli response', info, 'YT URL', odesliInfo.linksByPlatform[platform]?.url);
+      if (info.platforms.includes(platform)) {
+        let youtubeId =
+          videoId ??
+          YOUTUBE_REGEX.exec(url.href)?.groups?.videoId ??
+          new URL(odesliInfo.pageUrl).pathname.split('/y/').pop();
+        if (youtubeId === undefined) {
+          log.warn('Looks like a youtube video, but could not extract a video id', url, odesliInfo);
           return null;
         }
-        const info = odesliInfo.entitiesByUniqueId[odesliInfo.entityUniqueId];
+        const isMusic = await TimelineReader.isMusicVideo(youtubeId);
-        const platform: Platform = 'youtube';
+        if (!isMusic) {
-        return {
+          log.debug('Probably not a music video', url, odesliInfo);
-          ...info,
+          return null;
-          pageUrl: odesliInfo.pageUrl,
+        }
-          youtubeUrl: odesliInfo.linksByPlatform[platform]?.url,
+      }
-          postedUrl: url.toString()
+      return {
-        } as SongInfo;
+        ...info,
-      });
+        pageUrl: odesliInfo.pageUrl,
+        youtubeUrl: odesliInfo.linksByPlatform[platform]?.url,
+        postedUrl: url.toString()
+      } as SongInfo;
     } catch (e) {
       if (e instanceof Error && e.cause === 429) {
         log.warn('song.link rate limit reached. Trying again in 10 seconds');
@@ -89,6 +174,181 @@ export class TimelineReader {
     }
   }
 
+  private static async resizeAvatar(
+    baseName: string,
+    size: number,
+    suffix: string,
+    folder: string,
+    sharpAvatar: sharp.Sharp
+  ): Promise<string | null> {
+    const fileName = `${folder}/${baseName}_${suffix}`;
+    const exists = await fs
+      .access(fileName, fs.constants.F_OK)
+      .then(() => true)
+      .catch(() => false);
+    if (exists) {
+      log.debug('File already exists', fileName);
+      return null;
+    }
+    log.debug('Saving avatar', fileName);
+    await sharpAvatar.resize(size).toFile(fileName);
+    return fileName;
+  }
+
+  private static resizeAvatarPromiseMaker(
+    avatarFilenameBase: string,
+    baseSize: number,
+    maxPixelDensity: number,
+    accountUrl: string,
+    formats: string[],
+    avatar: ArrayBuffer
+  ): Promise<void>[] {
+    const sharpAvatar = sharp(avatar);
+    const promises: Promise<void>[] = [];
+    for (let i = 1; i <= maxPixelDensity; i++) {
+      promises.push(
+        ...formats.map((f) =>
+          TimelineReader.resizeAvatar(
+            avatarFilenameBase,
+            baseSize * i,
+            `${i}x.${f}`,
+            'avatars',
+            sharpAvatar
+          )
+            .then(
+              (fn) =>
+                ({
+                  accountUrl: accountUrl,
+                  file: fn,
+                  sizeDescriptor: `${i}x`
+                } as AccountAvatar)
+            )
+            .then(saveAvatar)
+        )
+      );
+    }
+    return promises;
+  }
+
+  private static resizeThumbnailPromiseMaker(
+    filenameBase: string,
+    baseSize: number,
+    maxPixelDensity: number,
+    songThumbnailUrl: string,
+    formats: string[],
+    image: ArrayBuffer,
+    kind: SongThumbnailImageKind
+  ): Promise<void>[] {
+    const sharpAvatar = sharp(image);
+    const promises: Promise<void>[] = [];
+    for (let i = 1; i <= maxPixelDensity; i++) {
+      promises.push(
+        ...formats.map((f) =>
+          TimelineReader.resizeAvatar(
+            filenameBase,
+            baseSize * i,
+            `${i}x.${f}`,
+            'thumbnails',
+            sharpAvatar
+          )
+            .then(
+              (fn) =>
+                ({
+                  songThumbnailUrl: songThumbnailUrl,
+                  file: fn,
+                  sizeDescriptor: `${i}x`,
+                  kind: kind
+                } as SongThumbnailImage)
+            )
+            .then(saveSongThumbnail)
+        )
+      );
+    }
+    return promises;
+  }
+
+  private static async saveAvatar(account: Account) {
+    try {
+      const existingAvatars = await getAvatars(account.url, 1);
+      const existingAvatarBase = existingAvatars.shift()?.file.split('/').pop()?.split('_').shift();
+      const avatarFilenameBase =
+        new URL(account.avatar).pathname.split('/').pop()?.split('.').shift() ?? account.acct;
+
+      // User's avatar changed. Remove the old one!
+      if (existingAvatarBase && existingAvatarBase !== avatarFilenameBase) {
+        await removeAvatars(account.url);
+        const avatarsToDelete = (await fs.readdir('avatars'))
+          .filter((x) => x.startsWith(existingAvatarBase + '_'))
+          .map((x) => {
+            log.debug('Removing existing avatar file', x);
+            return x;
+          })
+          .map((x) => fs.unlink('avatars/' + x));
+        await Promise.allSettled(avatarsToDelete);
+      }
+      const avatarResponse = await fetch(account.avatar);
+      const avatar = await avatarResponse.arrayBuffer();
+      await Promise.all(
+        TimelineReader.resizeAvatarPromiseMaker(
+          avatarFilenameBase,
+          50,
+          3,
+          account.url,
+          ['webp', 'avif', 'jpeg'],
+          avatar
+        )
+      );
+    } catch (e) {
+      console.error('Could not resize and save avatar for', account.acct, account.avatar, e);
+    }
+  }
+
+  private static async saveSongThumbnails(songs: SongInfo[]) {
+    for (const song of songs) {
+      if (!song.thumbnailUrl) {
+        continue;
+      }
+      try {
+        const existingThumbs = await getSongThumbnails(song);
+        if (existingThumbs.length) {
+          continue;
+        }
+        const fileBaseName = crypto.createHash('sha256').update(song.thumbnailUrl).digest('hex');
+        const imageResponse = await fetch(song.thumbnailUrl);
+        const avatar = await imageResponse.arrayBuffer();
+        await Promise.all(
+          TimelineReader.resizeThumbnailPromiseMaker(
+            fileBaseName + '_large',
+            200,
+            3,
+            song.thumbnailUrl,
+            ['webp', 'avif', 'jpeg'],
+            avatar,
+            SongThumbnailImageKind.Big
+          )
+        );
+        await Promise.all(
+          TimelineReader.resizeThumbnailPromiseMaker(
+            fileBaseName + '_small',
+            60,
+            3,
+            song.thumbnailUrl,
+            ['webp', 'avif', 'jpeg'],
+            avatar,
+            SongThumbnailImageKind.Small
+          )
+        );
+      } catch (e) {
+        console.error(
+          'Could not resize and save song thumbnail for',
+          song.pageUrl,
+          song.thumbnailUrl,
+          e
+        );
+      }
+    }
+  }
+
   private startWebsocket() {
     const socket = new WebSocket(`wss://${MASTODON_INSTANCE}/api/v1/streaming`);
     socket.onopen = () => {
@@ -102,6 +362,7 @@ export class TimelineReader {
           return;
         }
         const post: Post = JSON.parse(data.payload);
+
         const hashttags: string[] = HASHTAG_FILTER.split(',');
         const found_tags: Tag[] = post.tags.filter((t: Tag) => hashttags.includes(t.name));
 
@@ -115,6 +376,10 @@ export class TimelineReader {
         }
 
         await savePost(post, songs);
+
+        await TimelineReader.saveAvatar(post.account);
+        await TimelineReader.saveSongThumbnails(songs);
+
         log.debug('Saved post', post.url);
 
         const posts = await getPosts(null, null, 100);

static/style.css

@@ -1,59 +0,0 @@
-body {
-  --color-blue: hsl(259, 82%, 26%);
-  --color-blue-dark: hsl(259, 82%, 10%);
-  --color-lavender: hsl(273, 43%, 65%);
-  --color-mauve: hsl(286, 73%, 81%);
-
-  --color-grey: hsl(44, 7%, 41%);
-  --color-grey-translucent: hsla(44, 7%, 41%, 0.2);
-  --color-grey-light: hsl(42, 7%, 72%);
-
-  --color-red: hsl(7, 100%, 56%);
-  --color-red-light: hsl(7, 100%, 61%);
-  --color-red-lighter: hsl(7, 100%, 68%);
-  --color-red-dark: hsl(7, 100%, 48%);
-  --color-red-desat: hsl(7, 20%, 56%);
-  --color-red-desat-dark: hsl(7, 20%, 30%);
-  --color-red-desat-desat: hsl(7, 8%, 56%);
-
-  --color-text: var(--color-blue);
-  --color-border: var(--color-grey);
-  --color-link: var(--color-mauve);
-  --color-link-visited: var(--color-lavender);
-  --color-bg: var(--color-grey-light);
-  --color-bg-translucent: hsla(42, 7%, 72%, 0.5);
-  --color-button: var(--color-red-light);
-  --color-button-shadow: var(--color-red-desat-dark);
-  --color-button-hover: var(--color-red);
-  --color-button-deactivated: var(--color-red-desat-desat);
-  --color-button-text: var(--color-blue-dark);
-
-  color: var(--color-text);
-  background-color: var(--color-bg);
-  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu,
-    Cantarell, 'Helvetica Neue', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
-    'Segoe UI Symbol';
-}
-
-a {
-  color: var(--color-link);
-}
-a:visited {
-  color: var(--color-link-visited);
-}
-
-@media (prefers-color-scheme: dark) {
-  body {
-    --color-text: var(--color-grey-light);
-    --color-border: var(--color-grey-light);
-    --color-link: var(--color-mauve);
-    --color-link-visited: var(--color-lavender);
-    --color-bg: var(--color-blue);
-    --color-bg-translucent: hsla(259, 82%, 26%, 0.5);
-    --color-button: var(--color-red-light);
-    --color-button-shadow: var(--color-red-desat);
-    --color-button-hover: var(--color-red);
-    --color-button-deactivated: var(--color-red-desat-desat);
-    --color-button-text: var(--color-blue-dark);
-  }
-}

svelte.config.js

@@ -12,6 +12,15 @@ const config = {
     // If your environment is not supported or you settled on a specific environment, switch out the adapter.
     // See https://kit.svelte.dev/docs/adapters for more information about adapters.
     adapter: adapter()
+  },
+
+  csp: {
+    directives: {
+      'script-src': ['self']
+    },
+    reportOnly: {
+      'script-src': ['self']
+    }
   }
 };
 

vite.config.ts

@@ -1,6 +1,16 @@
 import { sveltekit } from '@sveltejs/kit/vite';
-import { defineConfig } from 'vite';
+import { defineConfig, searchForWorkspaceRoot } from 'vite';
 
 export default defineConfig({
-  plugins: [sveltekit()]
+  plugins: [sveltekit()],
+  server: {
+    fs: {
+      allow: [
+        // search up for workspace root
+        searchForWorkspaceRoot(process.cwd()),
+        // your custom rules
+        'avatars'
+      ]
+    }
+  }
 });