.env.EXAMPLE

@@ -2,7 +2,6 @@ HASHTAG_FILTER = ichlausche,music,musik,nowplaying,tunetuesday,nowlistening
 YOUTUBE_API_KEY = CHANGE_ME
 ODESLI_API_KEY = CHANGE_ME
 MASTODON_INSTANCE = 'metalhead.club'
-MASTODON_ACCESS_TOKEN = 'YOUR_ACCESS_TOKEN_HERE'
 BASE_URL = 'https://moshingmammut.phlaym.net'
 VERBOSE = false
 IGNORE_USERS = @moshhead@metalhead.club

.eslintrc.cjs

@@ -1,25 +1,16 @@
 module.exports = {
   root: true,
   parser: '@typescript-eslint/parser',
-  extends: ['plugin:svelte/recommended', 'plugin:@typescript-eslint/recommended', 'prettier'],
+  extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended', 'prettier'],
-  plugins: ['@typescript-eslint'],
+  plugins: ['svelte3', '@typescript-eslint'],
   ignorePatterns: ['*.cjs'],
-  overrides: [
+  overrides: [{ files: ['*.svelte'], processor: 'svelte3/svelte3' }],
-    {
-      files: ['*.svelte'],
-      parser: 'svelte-eslint-parser',
-      parserOptions: {
-        parser: '@typescript-eslint/parser'
-      }
-    }
-  ],
   settings: {
     'svelte3/typescript': () => require('typescript')
   },
   parserOptions: {
     sourceType: 'module',
-    ecmaVersion: 2020,
+    ecmaVersion: 2020
-    extraFileExtensions: ['.svelte']
   },
   env: {
     browser: true,

.gitignore

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

README.md

@@ -88,8 +88,6 @@ Copy `apache2.conf.EXAMPLE` to `/etc/apache2/sites-available/moshingmammut.conf`
 Domain. If you do not need or want SSL support, remove the whole `<IfModule mod_ssl.c>` block.
 If you do, add the path to your SSLCertificateFile and SSLCertificateKeyFile.
 
-Modify DocumentRoot and the two Alias and Directory statements, so that thumbnails and avatars are served directly by apache.
-
 Copy `moshing-mammut.service.EXAMPLE` to `/etc/systemd/system/moshing-mammut.service`
 and set your `User`, `Group`, `ExecStart` and `WorkingDirectory` accordingly.
 
@@ -98,18 +96,10 @@ 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. Also, _all_ YouTube links will be treated as music videos,
+If `YOUTUBE_API_KEY` is unset, no playlist will be updated.
-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.
 
-Add `MASTODON_ACCESS_TOKEN` as well, see [Creating our application
-
-](https://docs.joinmastodon.org/client/token/#app) in the Mastodon documentation.
-`read:statuses` is the only required scope. An access token will be displayed in your settings. Use that!
-
-There are currently no plans to implement an actual authentication flow.
-
 Run `npm run build` and copy the output folder, usually `build` to `$APP_DIR` on your server.
 
 #### On your server again

apache2.conf.EXAMPLE

@@ -15,23 +15,6 @@
 
     Include /etc/letsencrypt/options-ssl-apache.conf
 
-    DocumentRoot /home/moshing-mammut/app/
-
-    ProxyPass /avatars/ !
-    ProxyPass /thumbnails/ !
-    Alias /avatars/ /home/moshing-mammut/app/avatars/
-    Alias /thumbnails/ /home/moshing-mammut/app/thumbnails/
-
-    <Directory "/home/moshing-mammut/app/avatars/">
-      Require all granted
-      Header set Cache-Control "public,max-age=31536000,immutable"
-    </Directory>
-
-    <Directory "/home/moshing-mammut/app/thumbnails/">
-      Require all granted
-      Header set Cache-Control "public,max-age=31536000,immutable"
-    </Directory>
-
     ProxyPass / http://localhost:3000/
     ProxyPassReverse / http://localhost:3000/
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "moshing-mammut",
-  "version": "1.3.2",
+  "version": "1.3.0",
   "private": true,
   "license": "LGPL-3.0-or-later",
   "scripts": {
@@ -14,10 +14,8 @@
     "format": "prettier --plugin-search-dir . --write ."
   },
   "devDependencies": {
-    "@sveltejs/adapter-node": "^2.0.0",
+    "@sveltejs/adapter-node": "^1.2.3",
-    "@sveltejs/kit": "^2.0.0",
+    "@sveltejs/kit": "^1.5.0",
-    "@sveltejs/vite-plugin-svelte": "^3.0.0",
-    "@types/node": "^18.16.3",
     "@types/sqlite3": "^3.1.8",
     "@types/ws": "^8.5.4",
     "@typescript-eslint/eslint-plugin": "^5.45.0",
@@ -25,24 +23,20 @@
     "@zerodevx/svelte-toast": "^0.9.3",
     "eslint": "^8.28.0",
     "eslint-config-prettier": "^8.5.0",
-    "eslint-plugin-svelte": "^2.35.1",
+    "eslint-plugin-svelte3": "^4.0.0",
     "prettier": "^2.8.0",
-    "prettier-plugin-svelte": "^2.10.1",
+    "prettier-plugin-svelte": "^2.8.1",
-    "svelte": "^4.0.0",
+    "svelte": "^3.54.0",
-    "svelte-check": "^3.4.3",
+    "svelte-check": "^3.0.1",
     "tslib": "^2.4.1",
-    "typescript": "^5.0.0",
+    "typescript": "^4.9.3",
-    "vite": "^5.0.0"
+    "vite": "^4.0.0"
   },
   "type": "module",
   "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,11 +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" />
-    <meta
+    <link rel="stylesheet" href="%sveltekit.assets%/style.css" />
-      name="description"
-      content="A collection of music recommendations and now-listenings by the users of metalhead.club"
-    />
-
     <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)" />
@@ -23,40 +19,14 @@
     %sveltekit.head%
     <style>
       body {
-        --color-blue: hsl(259, 82%, 26%);
+        --color-text: #2f0c7a;
-        --color-blue-dark: hsl(259, 82%, 13%);
+        --color-bg: white;
-        --color-lavender: hsl(253, 82%, 33%);
+        --color-border: #17063b;
-        --color-mauve: hsl(273, 82%, 38%);
+        --color-link: #563acc;
-
+        --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 {
@@ -68,20 +38,11 @@
 
       @media (prefers-color-scheme: dark) {
         body {
-          --color-lavender: hsl(273, 43%, 65%);
+          --color-text: white;
-          --color-mauve: hsl(286, 73%, 81%);
+          --color-bg: #17063b;
-
+          --color-border: white;
-          --color-text: var(--color-grey-light);
+          --color-link: #8a9bf0;
-          --color-border: var(--color-grey-light);
+          --color-link-visited: #c384fb;
-          --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,7 +1,6 @@
 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();
@@ -28,35 +27,6 @@ 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);
-      error(404);
-    }
-  }
-
   const response = await resolve(event);
   return response;
 }) satisfies Handle;

src/lib/components/AvatarComponent.svelte

@@ -3,51 +3,17 @@
 
   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>
 
-<picture>
+<img src={account.avatar} alt={avatarDescription} />
-  {@html sourceSetHtml}
-  <img src={account.avatar} alt={avatarDescription} loading="lazy" width="50" height="50" />
-</picture>
 
 <style>
   img {
     max-width: 100%;
     max-height: 100%;
-    width: 50px;
+    width: auto;
-    height: 50px;
+    height: auto;
     object-fit: contain;
     border-radius: 3px;
   }

src/lib/components/FooterComponent.svelte

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

src/lib/components/LoadMoreComponent.svelte

@@ -18,9 +18,7 @@
   $: disabled = !moreAvailable || isLoading;
   $: title = moreAvailable ? 'Load More' : 'There be dragons!';
 
-  const dispatch = createEventDispatcher<{
+  const dispatch = createEventDispatcher();
-    loadOlderPosts: string;
-  }>();
 
   function loadOlderPosts() {
     dispatch('loadOlderPosts');

src/lib/components/PostComponent.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
-  import { type Post, SongThumbnailImageKind } from '$lib/mastodon/response';
+  import type { Post } 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';
@@ -15,91 +14,6 @@
     dateCreated = relativeTime($timePassed) ?? absoluteDate;
   }
 
-  const songs = filterDuplicates(post.songs ?? []);
-
-  function filterDuplicates(songs: SongInfo[]): SongInfo[] {
-    return songs.filter((obj, index, arr) => {
-      return arr.map((mapObj) => mapObj.pageUrl).indexOf(obj.pageUrl) === index;
-    });
-  }
-
-  function getThumbnailSize(song: SongInfo): {
-    width?: number;
-    height?: number;
-    widthSmall?: number;
-    heightSmall?: number;
-  } {
-    if (song.thumbnailWidth === undefined || song.thumbnailHeight === undefined) {
-      return { width: undefined, height: undefined, widthSmall: undefined, heightSmall: undefined };
-    }
-    const factor = 200 / song.thumbnailWidth;
-    const smallFactor = 60 / song.thumbnailHeight;
-    const height = song.thumbnailHeight * factor;
-    return {
-      width: 200,
-      height: height,
-      widthSmall: smallFactor * song.thumbnailWidth,
-      heightSmall: 60
-    };
-  }
-
-  // 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 = 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 { width, height, widthSmall, heightSmall } = getThumbnailSize(song);
-    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} width="${widthSmall}" height="${heightSmall}" />`;
-    }
-    html += '\n';
-    for (const entry of large.entries()) {
-      const srcset = entry[1].join(', ');
-      html += `<source srcset="${srcset}" type="${entry[0]}" width="${width}" height="${height}"/>`;
-    }
-    return html;
-  }
-
   onMount(() => {
     // Display relative time only after mount:
     // When JS is disabled the server-side rendered absolute date will be shown,
@@ -117,25 +31,16 @@
   <div class="content">{@html post.content}</div>
   <div class="song">
     {#if post.songs}
-      {#each songs as song (song.pageUrl)}
+      {#each post.songs as song (song.pageUrl)}
         <div class="info-wrapper">
-          <picture>
+          <div class="bgimage" style="background-image: url({song.thumbnailUrl});" />
-            {@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">
-              <picture>
-                {@html getSourceSetHtml(song)}
               <img
                 src={song.thumbnailUrl}
                 class="cover"
                 alt="Cover for {song.artistName} - {song.title}"
-                  loading="lazy"
-                  width={song.thumbnailWidth}
-                  height={song.thumbnailHeight}
               />
-              </picture>
               <span class="text">{song.artistName} - {song.title}</span>
             </div>
           </a>
@@ -223,6 +128,7 @@
     }
     .cover:not(.background) {
       z-index: 1;
+      width: 60px;
       backdrop-filter: blur(10px);
       -webkit-backdrop-filter: blur(10px);
     }

src/lib/mastodon/response.ts

@@ -37,24 +37,4 @@ 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,5 +1,3 @@
-import type { SongThumbnailImage } from '$lib/mastodon/response';
-
 export type SongInfo = {
   pageUrl: string;
   youtubeUrl?: string;
@@ -8,9 +6,6 @@ export type SongInfo = {
   artistName?: string;
   thumbnailUrl?: string;
   postedUrl: string;
-  resizedThumbnails?: SongThumbnailImage[];
-  thumbnailWidth?: number;
-  thumbnailHeight?: number;
 };
 
 export type SongwhipReponse = {

src/lib/server/db.ts

@@ -1,12 +1,13 @@
 import { IGNORE_USERS, MASTODON_INSTANCE } from '$env/static/private';
 import { enableVerboseLog, log } from '$lib/log';
-import type { Account, AccountAvatar, Post, SongThumbnailImage, Tag } from '$lib/mastodon/response';
+import type { Account, Post, 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;
@@ -40,21 +41,6 @@ type SongRow = {
   title?: string;
   artistName?: string;
   thumbnailUrl?: string;
-  thumbnailWidth?: number;
-  thumbnailHeight?: number;
-};
-
-type AccountAvatarRow = {
-  account_url: string;
-  file: string;
-  sizeDescriptor: string;
-};
-
-type SongThumbnailAvatarRow = {
-  song_thumbnailUrl: string;
-  file: string;
-  sizeDescriptor: string;
-  kind: number;
 };
 
 type Migration = {
@@ -93,45 +79,6 @@ if (enableVerboseLog) {
   });
 }
 
-function applyDbMigration(migration: Migration): Promise<void> {
-  return new Promise((resolve, reject) => {
-    db.exec(migration.statement, (err) => {
-      if (err !== null) {
-        log.error(`Failed to apply migration ${migration.name}`, err);
-        reject(err);
-        return;
-      }
-      resolve();
-    });
-  });
-}
-
-async function applyMigration(migration: Migration) {
-  if (migration.id === 4) {
-    // When this is run, no posts will have added song data,
-    // so filtering won't help
-    const posts = await getPostsInternal(null, null, 10000);
-    let current = 0;
-    const total = posts.length.toString().padStart(4, '0');
-    for (const post of posts) {
-      current++;
-      if (post.songs && post.songs.length) {
-        continue;
-      }
-      log.info(
-        `Fetching songs for existing post ${current.toString().padStart(4, '0')} of ${total}`,
-        post.url
-      );
-      const songs = await TimelineReader.getSongInfoInPost(post);
-      await saveSongInfoData(post.url, songs);
-      log.debug(`Fetched ${songs.length} songs for existing post`, post.url);
-    }
-    log.debug(`Finished fetching songs`);
-  } else {
-    await applyDbMigration(migration);
-  }
-}
-
 db.on('open', () => {
   log.info('Opened database');
   db.serialize();
@@ -151,7 +98,7 @@ db.on('open', () => {
       return;
     }
     for (const migration of toApply) {
-      applyMigration(migration).then(() => {
+      db.exec(migration.statement, (err) => {
         remaining--;
         // This will set databaseReady to true before the migration has been inserted as applies,
         // but that doesn't matter. It's only important that is has been applied
@@ -278,61 +225,30 @@ function getMigrations(): Migration[] {
         post_url TEXT,
         FOREIGN KEY (post_url) REFERENCES posts(url)
       );`
-    },
-    {
-      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)
-      );`
-    },
-    {
-      id: 7,
-      name: 'song thumbnail size',
-      statement: `
-      ALTER TABLE songs ADD COLUMN thumbnailWidth INTEGER NULL;
-      ALTER TABLE songs ADD COLUMN thumbnailHeight INTEGER NULL;`
     }
   ];
 }
 
-async function waitReady(): Promise<void> {
+async function waitReady(): Promise<undefined> {
   // Simpler than a semaphore and is really only needed on startup
   return new Promise((resolve) => {
     const interval = setInterval(() => {
-      log.verbose('Waiting for database to be ready');
+      if (DEV) {
+        log.debug('Waiting for database to be ready');
+      }
       if (databaseReady) {
-        log.verbose('DB is ready');
+        if (DEV) {
+          log.debug('DB is ready');
+        }
         clearInterval(interval);
-        resolve();
+        resolve(undefined);
       }
     }, 100);
   });
 }
 
-function saveAccountData(account: Account): Promise<void> {
+function saveAccountData(account: Account): Promise<undefined> {
-  return new Promise<void>((resolve, reject) => {
+  return new Promise<undefined>((resolve, reject) => {
     db.run(
       `
       INSERT INTO accounts (id, acct, username, display_name, url, avatar)
@@ -358,14 +274,14 @@ function saveAccountData(account: Account): Promise<void> {
           reject(err);
           return;
         }
-        resolve();
+        resolve(undefined);
       }
     );
   });
 }
 
-function savePostData(post: Post): Promise<void> {
+function savePostData(post: Post): Promise<undefined> {
-  return new Promise<void>((resolve, reject) => {
+  return new Promise<undefined>((resolve, reject) => {
     db.run(
       `
     INSERT INTO posts (id, content, created_at, url, account_id)
@@ -381,16 +297,16 @@ function savePostData(post: Post): Promise<void> {
           reject(postErr);
           return;
         }
-        resolve();
+        resolve(undefined);
       }
     );
   });
 }
 
-function savePostTagData(post: Post): Promise<void> {
+function savePostTagData(post: Post): Promise<undefined> {
-  return new Promise<void>((resolve, reject) => {
+  return new Promise<undefined>((resolve, reject) => {
     if (!post.tags.length) {
-      resolve();
+      resolve(undefined);
       return;
     }
 
@@ -422,7 +338,7 @@ function savePostTagData(post: Post): Promise<void> {
                 remaining--;
                 // Only resolve after all have been inserted
                 if (remaining === 0) {
-                  resolve();
+                  resolve(undefined);
                 }
               }
             );
@@ -433,10 +349,10 @@ function savePostTagData(post: Post): Promise<void> {
   });
 }
 
-function saveSongInfoData(postUrl: string, songs: SongInfo[]): Promise<void> {
+function saveSongInfoData(postUrl: string, songs: SongInfo[]): Promise<undefined> {
-  return new Promise<void>((resolve, reject) => {
+  return new Promise<undefined>((resolve, reject) => {
     if (songs.length === 0) {
-      resolve();
+      resolve(undefined);
       return;
     }
     db.parallelize(() => {
@@ -444,8 +360,8 @@ function saveSongInfoData(postUrl: string, songs: SongInfo[]): Promise<void> {
       for (const song of songs) {
         db.run(
           `
-          INSERT INTO songs (postedUrl, overviewUrl, type, youtubeUrl, title, artistName, thumbnailUrl, post_url, thumbnailWidth, thumbnailHeight)
+          INSERT INTO songs (postedUrl, overviewUrl, type, youtubeUrl, title, artistName, thumbnailUrl, post_url)
-          VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?)
+          VALUES (?, ?, ?, ?, ?, ?, ?, ?)
           `,
           [
             song.postedUrl,
@@ -455,9 +371,7 @@ function saveSongInfoData(postUrl: string, songs: SongInfo[]): Promise<void> {
             song.title,
             song.artistName,
             song.thumbnailUrl,
-            postUrl,
+            postUrl
-            song.thumbnailWidth,
-            song.thumbnailHeight
           ],
           (songErr) => {
             if (songErr !== null) {
@@ -469,7 +383,7 @@ function saveSongInfoData(postUrl: string, songs: SongInfo[]): Promise<void> {
             remaining--;
             // Only resolve after all have been inserted
             if (remaining === 0) {
-              resolve();
+              resolve(undefined);
             }
           }
         );
@@ -492,10 +406,7 @@ export async function savePost(post: Post, songs: SongInfo[]) {
   await savePostTagData(post);
   log.debug(`Saved ${post.tags.length} tag data ${post.url}`);
   await saveSongInfoData(post.url, songs);
-  log.debug(
+  log.debug(`Saved ${songs.length} song info data ${post.url}`);
-    `Saved ${songs.length} song info data ${post.url}`,
-    songs.map((s) => s.thumbnailHeight)
-  );
 }
 
 function getPostData(filterQuery: string, params: FilterParameter): Promise<PostRow[]> {
@@ -520,7 +431,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
@@ -548,17 +459,17 @@ function getTagData(postIdsParams: string, postIds: string[]): Promise<Map<strin
   });
 }
 
-function getSongData(postIdsParams: string, postIds: string[]): Promise<Map<string, SongInfo[]>> {
+function getSongData(postIdsParams: String, postIds: string[]): Promise<Map<string, SongInfo[]>> {
   return new Promise((resolve, reject) => {
     db.all(
       `SELECT post_url, songs.postedUrl, songs.overviewUrl, songs.type, songs.youtubeUrl,
-      songs.title, songs.artistName, songs.thumbnailUrl, songs.post_url, songs.thumbnailWidth, songs.thumbnailHeight
+      songs.title, songs.artistName, songs.thumbnailUrl, songs.post_url
       FROM songs
       WHERE post_url IN (${postIdsParams});`,
       postIds,
       (tagErr, tagRows: SongRow[]) => {
         if (tagErr != null) {
-          log.error('Error loading post songs', tagErr);
+          log.error('Error loading post tags', tagErr);
           reject(tagErr);
           return;
         }
@@ -571,94 +482,19 @@ function getSongData(postIdsParams: string, postIds: string[]): Promise<Map<stri
               title: item.title,
               artistName: item.artistName,
               thumbnailUrl: item.thumbnailUrl,
-              postedUrl: item.postedUrl,
+              postedUrl: item.postedUrl
-              thumbnailHeight: item.thumbnailHeight,
-              thumbnailWidth: item.thumbnailWidth
             } as SongInfo;
             result.set(item.post_url, [...(result.get(item.post_url) || []), info]);
             return result;
           },
           new Map()
         );
-        log.verbose('songMap', songMap);
         resolve(songMap);
       }
     );
   });
 }
 
-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,
@@ -667,14 +503,7 @@ export async function getPosts(
   if (!databaseReady) {
     await waitReady();
   }
-  return await getPostsInternal(since, before, limit);
-}
 
-async function getPostsInternal(
-  since: string | null,
-  before: string | null,
-  limit: number
-): Promise<Post[]> {
   let filterQuery = '';
   const params: FilterParameter = { $limit: limit };
   if (since === null && before === null) {
@@ -708,17 +537,6 @@ 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,
@@ -732,134 +550,10 @@ 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,93 +1,90 @@
-import {
+import { HASHTAG_FILTER, MASTODON_INSTANCE, ODESLI_API_KEY } from '$env/static/private';
-  HASHTAG_FILTER,
-  MASTODON_ACCESS_TOKEN,
-  MASTODON_INSTANCE,
-  ODESLI_API_KEY,
-  YOUTUBE_API_KEY
-} from '$env/static/private';
 import { log } from '$lib/log';
-import type {
+import type { Post, Tag, TimelineEvent } from '$lib/mastodon/response';
-  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 {
+import { getPosts, savePost } from '$lib/server/db';
-  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) {
+  private static async getSongInfo(url: URL, remainingTries = 6): Promise<SongInfo | null> {
-    if (!YOUTUBE_API_KEY || YOUTUBE_API_KEY === 'CHANGE_ME') {
+    if (remainingTries === 0) {
-      // Assume that it *is* a music link when no YT API key is provided
+      log.error('No tries remaining. Lookup failed!');
-      return true;
+      return null;
     }
-    const searchParams = new URLSearchParams([
+    if (url.hostname === 'songwhip.com') {
-      ['part', 'snippet'],
+      // song.link doesn't support songwhip links and songwhip themselves will provide metadata if you pass in a
-      ['id', videoId],
+      // Apple Music/Spotify/etc link, but won't when provided with their own link, so no way to extract song info
-      ['key', YOUTUBE_API_KEY]
+      // except maybe scraping their HTML
-    ]);
+      return null;
-    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];
+    const odesliParams = new URLSearchParams();
-    if (!item.snippet) {
+    odesliParams.append('url', url.toString());
-      console.warn('Could not load snippet for video', videoId, item);
+    odesliParams.append('userCountry', 'DE');
-      return false;
+    odesliParams.append('songIfSingle', 'true');
+    if (ODESLI_API_KEY && ODESLI_API_KEY !== 'CHANGE_ME') {
+      odesliParams.append('key', ODESLI_API_KEY);
+    }
+    const odesliApiUrl = `https://api.song.link/v1-alpha.1/links?${odesliParams}`;
+    try {
+      return fetch(odesliApiUrl).then(async (response) => {
+        if (response.status === 429) {
+          throw new Error('Rate limit reached', { cause: 429 });
+        }
+        const odesliInfo: OdesliResponse = await response.json();
+        if (!odesliInfo || !odesliInfo.entitiesByUniqueId || !odesliInfo.entityUniqueId) {
+          return null;
+        }
+        const info = odesliInfo.entitiesByUniqueId[odesliInfo.entityUniqueId];
+        const platform: Platform = 'youtube';
+        return {
+          ...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');
+        await sleep(10_000);
+        return await this.getSongInfo(url, remainingTries - 1);
+      }
+      log.error(`Failed to load ${url} info from song.link`, e);
+      return null;
     }
-    if (item.snippet.tags?.includes('music')) {
-      return true;
   }
 
-    const categorySearchParams = new URLSearchParams([
+  private startWebsocket() {
-      ['part', 'snippet'],
+    const socket = new WebSocket(`wss://${MASTODON_INSTANCE}/api/v1/streaming`);
-      ['id', item.snippet.categoryId],
+    socket.onopen = () => {
-      ['key', YOUTUBE_API_KEY]
+      log.log('Connected to WS');
-    ]);
+      socket.send('{ "type": "subscribe", "stream": "public:local"}');
-    const youtubeCategoryUrl = new URL(
+    };
-      `https://www.googleapis.com/youtube/v3/videoCategories?${categorySearchParams}`
+    socket.onmessage = async (event) => {
-    );
+      try {
-    const categoryTitle: string = await fetch(youtubeCategoryUrl)
+        const data: TimelineEvent = JSON.parse(event.data.toString());
-      .then((r) => r.json())
+        if (data.event !== 'update') {
-      .then((r) => r.items[0]?.snippet?.title);
+          return;
-    return categoryTitle === 'Music';
         }
+        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));
 
-  public static async getSongInfoInPost(post: Post): Promise<SongInfo[]> {
         const urlMatches = post.content.matchAll(URL_REGEX);
         const songs: SongInfo[] = [];
         for (const match of urlMatches) {
           if (match === undefined || match.groups === undefined) {
-        log.warn('Match listed in allMatches, but either it or its groups are undefined', match);
+            log.warn(
+              'Match listed in allMatches, but either it or its groups are undefined',
+              match
+            );
             continue;
           }
           const urlMatch = match.groups.postUrl.toString();
@@ -107,270 +104,6 @@ export class TimelineReader {
             songs.push(info);
           }
         }
-    return songs;
-  }
-
-  private static async getSongInfo(url: URL, remainingTries = 6): Promise<SongInfo | null> {
-    if (remainingTries === 0) {
-      log.error('No tries remaining. Lookup failed!');
-      return null;
-    }
-    if (url.hostname === 'songwhip.com') {
-      // song.link doesn't support songwhip links and songwhip themselves will provide metadata if you pass in a
-      // Apple Music/Spotify/etc link, but won't when provided with their own link, so no way to extract song info
-      // except maybe scraping their HTML
-      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', urlString);
-    odesliParams.append('userCountry', 'DE');
-    odesliParams.append('songIfSingle', 'true');
-    if (ODESLI_API_KEY && ODESLI_API_KEY !== 'CHANGE_ME') {
-      odesliParams.append('key', ODESLI_API_KEY);
-    }
-    const odesliApiUrl = `https://api.song.link/v1-alpha.1/links?${odesliParams}`;
-    try {
-      const response = await fetch(odesliApiUrl);
-      if (response.status === 429) {
-        throw new Error('Rate limit reached', { cause: 429 });
-      }
-      const odesliInfo: OdesliResponse = await response.json();
-      if (!odesliInfo || !odesliInfo.entitiesByUniqueId || !odesliInfo.entityUniqueId) {
-        return null;
-      }
-      const info = odesliInfo.entitiesByUniqueId[odesliInfo.entityUniqueId];
-      const platform: Platform = 'youtube';
-      if (info.platforms.includes(platform)) {
-        const 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 isMusic = await TimelineReader.isMusicVideo(youtubeId);
-        if (!isMusic) {
-          log.debug('Probably not a music video', url);
-          return null;
-        }
-      }
-      return {
-        ...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');
-        await sleep(10_000);
-        return await this.getSongInfo(url, remainingTries - 1);
-      }
-      log.error(`Failed to load ${url} info from song.link`, e);
-      return null;
-    }
-  }
-
-  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?type=subscribe&stream=public:local&access_token=${MASTODON_ACCESS_TOKEN}`
-    );
-    socket.onopen = () => {
-      log.log('Connected to WS');
-    };
-    socket.onmessage = async (event) => {
-      try {
-        const data: TimelineEvent = JSON.parse(event.data.toString());
-        if (data.event !== 'update') {
-          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));
-
-        const songs = await TimelineReader.getSongInfoInPost(post);
 
         // If we don't have any tags or non-youtube urls, check youtube
         // YT is handled separately, because it requires an API call and therefore is slower
@@ -380,10 +113,6 @@ 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);
@@ -394,8 +123,7 @@ export class TimelineReader {
     };
     socket.onclose = (event) => {
       log.warn(
-        `Websocket connection to ${MASTODON_INSTANCE} closed. Code: ${event.code}, reason: '${event.reason}'`,
+        `Websocket connection to ${MASTODON_INSTANCE} closed. Code: ${event.code}, reason: '${event.reason}'`
-        event
       );
       setTimeout(() => {
         log.info(`Attempting to reconenct to WS`);

src/lib/sleep.ts

@@ -1,4 +1,4 @@
-export function sleep(timeInMs: number): Promise<void> {
+export function sleep(timeInMs: number): Promise<undefined> {
   return new Promise((resolve) => {
     setTimeout(resolve, timeInMs);
   });

src/routes/+page.svelte

@@ -160,7 +160,7 @@
     {#each data.posts as post (post.url)}
       <div
         class="post"
-        transition:edgeFly|global={{
+        transition:edgeFly={{
           y: 10,
           created_at: post.created_at,
           duration: 300,

static/style.css

@@ -0,0 +1,59 @@
+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

@@ -1,5 +1,5 @@
 import adapter from '@sveltejs/adapter-node';
-import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
+import { vitePreprocess } from '@sveltejs/kit/vite';
 
 /** @type {import('@sveltejs/kit').Config} */
 const config = {
@@ -11,15 +11,7 @@ const config = {
     // adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list.
     // 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(),
+    adapter: adapter()
-
-    csp: {
-      directives: {
-        'script-src': ['self', 'unsafe-inline'],
-        'base-uri': ['self'],
-        'object-src': ['none']
-      }
-    }
   }
 };
 

vite.config.ts

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