support adding to spotify playlist

This reverts commit 5b6dbd327d.

.env.EXAMPLE

@@ -1,7 +1,11 @@
 HASHTAG_FILTER = ichlausche,music,musik,nowplaying,tunetuesday,nowlistening
 YOUTUBE_API_KEY = CHANGE_ME
+YOUTUBE_PLAYLIST_ID = CHANGE_ME
+YOUTUBE_CLIENT_ID = CHANGE_ME
+YOUTUBE_CLIENT_SECRET = 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
@@ -9,3 +13,4 @@ WEBSUB_HUB = 'http://pubsubhubbub.superfeedr.com'
 
 PUBLIC_REFRESH_INTERVAL = 10000
 PUBLIC_MASTODON_INSTANCE_DISPLAY_NAME = 'Metalhead.club'
+PORT = 3001

.eslintrc.cjs

@@ -1,16 +1,25 @@
 module.exports = {
   root: true,
   parser: '@typescript-eslint/parser',
-  extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended', 'prettier'],
+  extends: ['plugin:svelte/recommended', 'plugin:@typescript-eslint/recommended', 'prettier'],
-  plugins: ['svelte3', '@typescript-eslint'],
+  plugins: ['@typescript-eslint'],
   ignorePatterns: ['*.cjs'],
-  overrides: [{ files: ['*.svelte'], processor: 'svelte3/svelte3' }],
+  overrides: [
+    {
+      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

@@ -1,9 +1,13 @@
+yt_auth_token
+spotify_auth_token
 *.db
 feed.xml
 playbook.yml
 inventory.yml
 ansible.cfg
 
+avatars/*
+thumbnails/*
 node_modules
 /build
 /.svelte-kit

.nvmrc

@@ -0,0 +1 @@
+lts/*

README.md

@@ -65,7 +65,7 @@ Set up NVM:
 
 ```
 $ cd
-$ curl https://raw.github.com/creationix/nvm/master/install.sh | sh
+$ curl https://raw.githubusercontent.com/nvm-sh/nvm/refs/heads/master/install.sh | bash
 $ source ~/.nvm/nvm.sh
 $ nvm install --lts
 ```
@@ -88,6 +88,8 @@ 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.
 
@@ -96,10 +98,23 @@ 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 _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.
 
+Add `MASTODON_ACCESS_TOKEN` as well, see [Creating our application
+
+](https://docs.joinmastodon.org/client/token/#app) in the Mastodon documentation.
+`read:statuses` and `read:search` 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.
+
+If you want the app to save the songs it encounters into a playlist, YouTube requires OAuth 2.0 credentials.
+Once again, follow [YouTube's guide](https://developers.google.com/youtube/registering_an_application) and the OAuth 2.0 described there
+to obtain a clientId and clientSecret. Add the values as `YOUTUBE_CLIENT_ID` and `YOUTUBE_CLIENT_SECRET`.
+Create a playlist and configure its ID as `YOUTUBE_PLAYLIST_ID`.
+
 Run `npm run build` and copy the output folder, usually `build` to `$APP_DIR` on your server.
 
 #### On your server again
@@ -115,6 +130,9 @@ Verify that everything is okay with `service moshing-mammut status`.
 
 The app should now be reachable on http://localhost:3000 or whatever you configured your domain to be!
 
+If you want to add the songs available on YouTube to a playlist and have configured the environment variables to do so,
+you now need to visit `/ytauth`, e.g. `http://localhost:3000/ytauth`. This will obtain the necessary access tokens from Google.
+
 # Icons
 
 Favicon is a combination of [speaker-line by remix icon](https://remixicon.com/icon/speaker-line)

apache2.conf.EXAMPLE

@@ -15,6 +15,23 @@
 
     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.1",
+  "version": "1.4.0",
   "private": true,
   "license": "LGPL-3.0-or-later",
   "scripts": {
@@ -14,29 +14,35 @@
     "format": "prettier --plugin-search-dir . --write ."
   },
   "devDependencies": {
-    "@sveltejs/adapter-node": "^1.2.3",
+    "@sveltejs/adapter-node": "^5.2.12",
-    "@sveltejs/kit": "^1.5.0",
+    "@sveltejs/kit": "^2.22.2",
-    "@types/sqlite3": "^3.1.8",
+    "@sveltejs/vite-plugin-svelte": "^5.1.0",
-    "@types/ws": "^8.5.4",
+    "@types/node": "^22.9.0",
-    "@typescript-eslint/eslint-plugin": "^5.45.0",
+    "@types/sqlite3": "^3.0.0",
-    "@typescript-eslint/parser": "^5.45.0",
+    "@types/ws": "^8.5.0",
+    "@typescript-eslint/eslint-plugin": "^8.0.0",
+    "@typescript-eslint/parser": "^8.0.0",
     "@zerodevx/svelte-toast": "^0.9.3",
-    "eslint": "^8.28.0",
+    "eslint": "^9.11.1",
-    "eslint-config-prettier": "^8.5.0",
+    "eslint-config-prettier": "^10.0.0",
-    "eslint-plugin-svelte3": "^4.0.0",
+    "eslint-plugin-svelte": "^3.0.0",
-    "prettier": "^2.8.0",
+    "prettier": "^3.1.0",
-    "prettier-plugin-svelte": "^2.8.1",
+    "prettier-plugin-svelte": "^3.2.6",
-    "svelte": "^3.54.0",
+    "svelte": "^5",
-    "svelte-check": "^3.0.1",
+    "svelte-check": "^4.0.0",
-    "tslib": "^2.4.1",
+    "tslib": "^2.0.0",
-    "typescript": "^4.9.3",
+    "typescript": "^5.0.0",
-    "vite": "^4.0.0"
+    "vite": "^6.0.0"
   },
   "type": "module",
   "dependencies": {
-    "dotenv": "^16.0.3",
+    "dotenv": "^17.0.0",
-    "feed": "^4.2.2",
+    "feed": "^5.1.0",
-    "sqlite3": "^5.1.6",
+    "sharp": "^0.34.2",
-    "ws": "^8.13.0"
+    "sqlite3": "^5.0.0",
+    "ws": "^8.18.0"
+  },
+  "engines": {
+    "node": ">=20.0.0"
   }
 }

src/app.html

@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="utf-8" />
@@ -10,7 +10,11 @@
     <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="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)" />
@@ -19,14 +23,53 @@
     %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 +81,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,8 +1,10 @@
 import { log } from '$lib/log';
 import { TimelineReader } from '$lib/server/timeline';
-import type { HandleServerError } from '@sveltejs/kit';
+import type { Handle, HandleServerError } from '@sveltejs/kit';
+import { error } from '@sveltejs/kit';
 import fs from 'fs/promises';
 
+log.log('App startup');
 TimelineReader.init();
 
 export const handleError = (({ error }) => {
@@ -15,9 +17,13 @@ export const handleError = (({ error }) => {
   };
 }) satisfies HandleServerError;
 
-import type { Handle } from '@sveltejs/kit';
-
 export const handle = (async ({ event, resolve }) => {
+  const searchParams = event.url.searchParams;
+  const authCode = searchParams.get('code');
+  if (authCode) {
+    log.debug('received GET hook', event.url.searchParams);
+  }
+
   // Reeder *insists* on checking /feed instead of /feed.xml
   if (event.url.pathname === '/feed') {
     return new Response('', { status: 301, headers: { Location: '/feed.xml' } });
@@ -27,6 +33,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);
+      error(404);
+    }
+  }
+
   const response = await resolve(event);
   return response;
 }) satisfies Handle;

src/lib/components/AccountComponent.svelte

@@ -1,7 +1,11 @@
 <script lang="ts">
   import type { Account } from '$lib/mastodon/response';
 
-  export let account: Account;
+  interface Props {
+    account: Account;
+  }
+
+  let { account }: Props = $props();
 </script>
 
 <a href={account.url} target="_blank">{account.display_name} @{account.acct}</a>

src/lib/components/AvatarComponent.svelte

@@ -1,19 +1,55 @@
 <script lang="ts">
   import type { Account } from '$lib/mastodon/response';
 
-  export let account: Account;
+  interface Props {
-  let avatarDescription: string;
+    account: Account;
-  $: avatarDescription = `Avatar for ${account.acct}`;
+  }
+
+  let { account }: Props = $props();
+  let avatarDescription: string = $derived(`Avatar for ${account.acct}`);
+  let sourceSetHtml: string = $derived.by(() => {
+    // 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 ?? []).toSorted((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]}" />`;
+    }
+    return html;
+  });
 </script>
 
-<img src={account.avatar} alt={avatarDescription} />
+<picture>
+  {@html sourceSetHtml}
+  <img src={account.avatar} alt={avatarDescription} loading="lazy" width="50" height="50" />
+</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/LoadMoreComponent.svelte

@@ -1,31 +1,34 @@
 <script lang="ts">
-  import { createEventDispatcher } from 'svelte';
   import LoadingSpinnerComponent from '$lib/components/LoadingSpinnerComponent.svelte';
 
-  export let moreAvailable = false;
+  interface Props {
-  export let isLoading = false;
+    moreAvailable?: boolean;
-  let displayText = '';
+    isLoading?: boolean;
-  let title = '';
+    loadOlderPosts: any;
-  let disabled: boolean;
-
-  $: if (isLoading) {
-    displayText = 'Loading...';
-  } else if (!moreAvailable) {
-    displayText = 'You reached the end';
-  } else {
-    displayText = 'Load More';
   }
-  $: disabled = !moreAvailable || isLoading;
-  $: title = moreAvailable ? 'Load More' : 'There be dragons!';
 
-  const dispatch = createEventDispatcher();
+  let { moreAvailable = false, isLoading = false, loadOlderPosts }: Props = $props();
+  let displayText = $derived.by(() => {
+    if (isLoading) {
+      return 'Loading...';
+    } else if (!moreAvailable) {
+      return 'You reached the end';
+    }
+    return 'Load More';
+  });
+  let title = $derived(moreAvailable ? 'Load More' : 'There be dragons!');
+  let disabled: boolean = $derived(!moreAvailable || isLoading);
+
+  /*const dispatch = createEventDispatcher<{
+  loadOlderPosts: string;
+}>();
 
 function loadOlderPosts() {
   dispatch('loadOlderPosts');
-  }
+}*/
 </script>
 
-<button on:click={loadOlderPosts} {disabled} {title}>
+<button onclick={() => loadOlderPosts()} {disabled} {title}>
   <div class="loading" class:collapsed={!isLoading}>
     <LoadingSpinnerComponent size="0.5em" thickness="6px" />
   </div>

src/lib/components/LoadingSpinnerComponent.svelte

@@ -1,9 +1,13 @@
 <script lang="ts">
-  export let size = '64px';
+  interface Props {
-  export let thickness = '6px';
+    size?: string;
+    thickness?: string;
+  }
+
+  let { size = '64px', thickness = '6px' }: Props = $props();
 </script>
 
-<div class="lds-dual-ring" style="--size: {size}; --thickness: {thickness}" />
+<div class="lds-dual-ring" style="--size: {size}; --thickness: {thickness}"></div>
 
 <style>
   .lds-dual-ring {

src/lib/components/PostComponent.svelte

@@ -1,17 +1,109 @@
 <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';
   import { onMount } from 'svelte';
 
-  export let post: Post;
+  interface Props {
-  let displayRelativeTime = false;
+    post: Post;
+  }
+
+  let { post }: Props = $props();
+  let displayRelativeTime = $state(false);
   const absoluteDate = new Date(post.created_at).toLocaleString();
-  let dateCreated = absoluteDate;
   const timePassed = secondsSince(new Date(post.created_at));
-  $: if (displayRelativeTime) {
+  let dateCreated = $derived.by(() => {
-    dateCreated = relativeTime($timePassed) ?? absoluteDate;
+    if (displayRelativeTime) {
+      return relativeTime($timePassed) ?? absoluteDate;
+    }
+    return 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 ?? []).toSorted((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(() => {
@@ -31,16 +123,25 @@
   <div class="content">{@html post.content}</div>
   <div class="song">
     {#if post.songs}
-      {#each post.songs as song (song.pageUrl)}
+      {#each 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">
+              <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>
@@ -128,7 +229,6 @@
     }
     .cover:not(.background) {
       z-index: 1;
-      width: 60px;
       backdrop-filter: blur(10px);
       -webkit-backdrop-filter: blur(10px);
     }

src/lib/log.ts

@@ -12,7 +12,7 @@ export const log = {
     console.debug(new Date().toISOString(), ...params);
   },
   debug: (...params: any[]) => {
-    if (!DEV) {
+    if (!log.isDebugEnabled()) {
       return;
     }
     console.debug(new Date().toISOString(), ...params);
@@ -28,5 +28,59 @@ export const log = {
   },
   error: (...params: any[]) => {
     console.error(new Date().toISOString(), ...params);
+  },
+  isDebugEnabled: (): boolean => {
+    return DEV;
   }
 };
+
+export class Logger {
+  public constructor(private name: string) {}
+
+  public static isDebugEnabled(): boolean {
+    return DEV;
+  }
+  public verbose(...params: any[]) {
+    if (!enableVerboseLog) {
+      return;
+    }
+    console.debug(new Date().toISOString(), `- ${this.name} -`, ...params);
+  }
+  public debug(...params: any[]) {
+    if (!Logger.isDebugEnabled()) {
+      return;
+    }
+    console.debug(new Date().toISOString(), `- ${this.name} -`, ...params);
+  }
+  public log(...params: any[]) {
+    console.log(new Date().toISOString(), `- ${this.name} -`, ...params);
+  }
+  public info(...params: any[]) {
+    console.info(new Date().toISOString(), `- ${this.name} -`, ...params);
+  }
+  public warn(...params: any[]) {
+    console.warn(new Date().toISOString(), `- ${this.name} -`, ...params);
+  }
+  public error(...params: any[]) {
+    console.error(new Date().toISOString(), `- ${this.name} -`, ...params);
+  }
+
+  public static error(...params: any[]) {
+    console.error(new Date().toISOString(), ...params);
+  }
+  public static debug(...params: any[]) {
+    if (!Logger.isDebugEnabled()) {
+      return;
+    }
+    console.debug(new Date().toISOString(), ...params);
+  }
+  public static log(...params: any[]) {
+    console.log(new Date().toISOString(), ...params);
+  }
+  public static info(...params: any[]) {
+    console.info(new Date().toISOString(), ...params);
+  }
+  public static warn(...params: any[]) {
+    console.warn(new Date().toISOString(), ...params);
+  }
+}

src/lib/mastodon/response.ts

@@ -16,6 +16,17 @@ export interface Post {
   songs?: SongInfo[];
 }
 
+export interface OauthResponse {
+  access_token: string;
+  expires_in: number;
+  expires?: Date;
+  refresh_token?: string;
+  refresh_token_expires_in?: number;
+  scope: string;
+  token_type: string;
+  error?: any;
+}
+
 export interface PreviewCard {
   url: string;
   title: string;
@@ -37,4 +48,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,11 +1,18 @@
+import type { SongThumbnailImage } from '$lib/mastodon/response';
+
 export type SongInfo = {
   pageUrl: string;
   youtubeUrl?: string;
+  spotifyUrl?: string;
+  spotifyUri?: string;
   type: 'song' | 'album';
   title?: string;
   artistName?: string;
   thumbnailUrl?: string;
   postedUrl: string;
+  resizedThumbnails?: SongThumbnailImage[];
+  thumbnailWidth?: number;
+  thumbnailHeight?: number;
 };
 
 export type SongwhipReponse = {

src/lib/server/db.ts

@@ -1,14 +1,14 @@
 import { IGNORE_USERS, MASTODON_INSTANCE } from '$env/static/private';
-import { enableVerboseLog, log } from '$lib/log';
+import { enableVerboseLog, Logger } 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;
+const logger = new Logger('Database');
 
 type FilterParameter = {
-  $limit: number | undefined | null;
+  $limit?: number | undefined | null;
   $since?: string | undefined | null;
   $before?: string | undefined | null;
   [x: string]: string | number | undefined | null;
@@ -39,9 +39,26 @@ type SongRow = {
   overviewUrl?: string;
   type: 'album' | 'song';
   youtubeUrl?: string;
+  spotifyUrl?: string;
+  spotifyUri?: string;
   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 = {
@@ -68,23 +85,23 @@ let databaseReady = false;
 if (enableVerboseLog) {
   sqlite3.verbose();
   db.on('change', (t, d, table, rowid) => {
-    log.verbose('DB change event', t, d, table, rowid);
+    logger.verbose('DB change event', t, d, table, rowid);
   });
 
   db.on('trace', (sql) => {
-    log.verbose('Running', sql);
+    logger.verbose('Running', sql);
   });
 
   db.on('profile', (sql) => {
-    log.verbose('Finished', sql);
+    logger.verbose('Finished', sql);
   });
 }
 
-async function applyDbMigration(migration: Migration): Promise<void> {
+function applyDbMigration(migration: Migration): Promise<void> {
-  return new Promise(async (resolve, reject) => {
+  return new Promise((resolve, reject) => {
     db.exec(migration.statement, (err) => {
       if (err !== null) {
-        log.error(`Failed to apply migration ${migration.name}`, err);
+        logger.error(`Failed to apply migration ${migration.name}`, err);
         reject(err);
         return;
       }
@@ -99,37 +116,37 @@ async function applyMigration(migration: Migration) {
     // so filtering won't help
     const posts = await getPostsInternal(null, null, 10000);
     let current = 0;
-    let total = posts.length.toString().padStart(4, '0');
+    const total = posts.length.toString().padStart(4, '0');
     for (const post of posts) {
       current++;
       if (post.songs && post.songs.length) {
         continue;
       }
-      log.info(
+      logger.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);
+      logger.debug(`Fetched ${songs.length} songs for existing post`, post.url);
     }
-    log.debug(`Finished fetching songs`);
+    logger.debug(`Finished fetching songs`);
   } else {
     await applyDbMigration(migration);
   }
 }
 
 db.on('open', () => {
-  log.info('Opened database');
+  logger.info('Opened database');
   db.serialize();
   db.run('CREATE TABLE IF NOT EXISTS "migrations" ("id" integer,"name" TEXT, PRIMARY KEY (id))');
   db.all('SELECT id FROM migrations', (err, rows: Migration[]) => {
     if (err !== null) {
-      log.error('Could not fetch existing migrations', err);
+      logger.error('Could not fetch existing migrations', err);
       databaseReady = true;
       return;
     }
-    log.debug('Already applied migrations', rows);
+    logger.debug('Already applied migrations', rows);
     const appliedMigrations: Set<number> = new Set(rows.map((row) => row['id']));
     const toApply = getMigrations().filter((m) => !appliedMigrations.has(m.id));
     let remaining = toApply.length;
@@ -146,7 +163,7 @@ db.on('open', () => {
           databaseReady = true;
         }
         if (err !== null) {
-          log.error(`Failed to apply migration ${migration.name}`, err);
+          logger.error(`Failed to apply migration ${migration.name}`, err);
           return;
         }
         db.run(
@@ -154,10 +171,10 @@ db.on('open', () => {
           [migration.id, migration.name],
           (e: Error) => {
             if (e !== null) {
-              log.error(`Failed to mark migration ${migration.name} as applied`, e);
+              logger.error(`Failed to mark migration ${migration.name} as applied`, e);
               return;
             }
-            log.info(`Applied migration ${migration.name}`);
+            logger.info(`Applied migration ${migration.name}`);
           }
         );
       });
@@ -165,7 +182,7 @@ db.on('open', () => {
   });
 });
 db.on('error', (err) => {
-  log.error('Error opening database', err);
+  logger.error('Error opening database', err);
 });
 
 function getMigrations(): Migration[] {
@@ -270,6 +287,43 @@ 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)
+      );`
+    },
+    {
+      id: 7,
+      name: 'song thumbnail size',
+      statement: `
+      ALTER TABLE songs ADD COLUMN thumbnailWidth INTEGER NULL;
+      ALTER TABLE songs ADD COLUMN thumbnailHeight INTEGER NULL;`
+    },
+    {
+      id: 8,
+      name: 'song spotify url/uri',
+      statement: `
+      ALTER TABLE songs ADD COLUMN spotifyUrl TEXT NULL;
+      ALTER TABLE songs ADD COLUMN spotifyUri TEXT NULL;`
     }
   ];
 }
@@ -278,13 +332,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) {
+      logger.verbose('Waiting for database to be ready');
-        log.debug('Waiting for database to be ready');
-      }
       if (databaseReady) {
-        if (DEV) {
+        logger.verbose('DB is ready');
-          log.debug('DB is ready');
-        }
         clearInterval(interval);
         resolve();
       }
@@ -315,7 +365,7 @@ function saveAccountData(account: Account): Promise<void> {
       ],
       (err) => {
         if (err !== null) {
-          log.error(`Could not insert/update account ${account.id}`, err);
+          logger.error(`Could not insert/update account ${account.id}`, err);
           reject(err);
           return;
         }
@@ -338,7 +388,7 @@ function savePostData(post: Post): Promise<void> {
       [post.id, post.content, post.created_at, post.url, post.account.url],
       (postErr) => {
         if (postErr !== null) {
-          log.error(`Could not insert post ${post.url}`, postErr);
+          logger.error(`Could not insert post ${post.url}`, postErr);
           reject(postErr);
           return;
         }
@@ -366,7 +416,7 @@ function savePostTagData(post: Post): Promise<void> {
           [tag.url, tag.name],
           (tagErr) => {
             if (tagErr !== null) {
-              log.error(`Could not insert/update tag ${tag.url}`, tagErr);
+              logger.error(`Could not insert/update tag ${tag.url}`, tagErr);
               reject(tagErr);
               return;
             }
@@ -375,7 +425,7 @@ function savePostTagData(post: Post): Promise<void> {
               [post.url, tag.url],
               (posttagserr) => {
                 if (posttagserr !== null) {
-                  log.error(`Could not insert poststags ${tag.url}, ${post.url}`, posttagserr);
+                  logger.error(`Could not insert poststags ${tag.url}, ${post.url}`, posttagserr);
                   reject(posttagserr);
                   return;
                 }
@@ -405,22 +455,26 @@ 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)
+          INSERT INTO songs (postedUrl, overviewUrl, type, youtubeUrl, spotifyUrl, spotifyUri, title, artistName, thumbnailUrl, post_url, thumbnailWidth, thumbnailHeight)
-          VALUES (?, ?, ?, ?, ?, ?, ?, ?)
+          VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)
           `,
           [
             song.postedUrl,
             song.pageUrl,
             song.type,
             song.youtubeUrl,
+            song.spotifyUrl,
+            song.spotifyUri,
             song.title,
             song.artistName,
             song.thumbnailUrl,
-            postUrl
+            postUrl,
+            song.thumbnailWidth,
+            song.thumbnailHeight
           ],
           (songErr) => {
             if (songErr !== null) {
-              log.error(`Could not insert song ${song.postedUrl}`, songErr);
+              logger.error(`Could not insert song ${song.postedUrl}`, songErr);
               reject(songErr);
               return;
             }
@@ -438,20 +492,23 @@ function saveSongInfoData(postUrl: string, songs: SongInfo[]): Promise<void> {
 }
 
 export async function savePost(post: Post, songs: SongInfo[]) {
+  logger.debug(`Saving post ${post.url}`);
   if (!databaseReady) {
     await waitReady();
   }
 
-  log.debug(`Saving post ${post.url}`);
   const account = post.account;
   await saveAccountData(account);
-  log.debug(`Saved account data ${post.url}`);
+  logger.debug(`Saved account data ${post.url}`);
   await savePostData(post);
-  log.debug(`Saved post data ${post.url}`);
+  logger.debug(`Saved post data ${post.url}`);
   await savePostTagData(post);
-  log.debug(`Saved ${post.tags.length} tag data ${post.url}`);
+  logger.debug(`Saved ${post.tags.length} tag data ${post.url}`);
   await saveSongInfoData(post.url, songs);
-  log.debug(`Saved ${songs.length} song info data ${post.url}`);
+  logger.debug(
+    `Saved ${songs.length} song info data ${post.url}`,
+    songs.map((s) => s.thumbnailHeight)
+  );
 }
 
 function getPostData(filterQuery: string, params: FilterParameter): Promise<PostRow[]> {
@@ -467,7 +524,7 @@ function getPostData(filterQuery: string, params: FilterParameter): Promise<Post
   return new Promise((resolve, reject) => {
     db.all(sql, params, (err, rows: PostRow[]) => {
       if (err != null) {
-        log.error('Error loading posts', err);
+        logger.error('Error loading posts', err);
         reject(err);
         return;
       }
@@ -476,7 +533,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
@@ -486,7 +543,7 @@ function getTagData(postIdsParams: String, postIds: string[]): Promise<Map<strin
       postIds,
       (tagErr, tagRows: PostTagRow[]) => {
         if (tagErr != null) {
-          log.error('Error loading post tags', tagErr);
+          logger.error('Error loading post tags', tagErr);
           reject(tagErr);
           return;
         }
@@ -504,17 +561,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,
+      `SELECT post_url, songs.postedUrl, songs.overviewUrl, songs.type, songs.youtubeUrl, songs.spotifyUri, songs.spotifyUri,
-      songs.title, songs.artistName, songs.thumbnailUrl, songs.post_url
+      songs.title, songs.artistName, songs.thumbnailUrl, songs.post_url, songs.thumbnailWidth, songs.thumbnailHeight
       FROM songs
       WHERE post_url IN (${postIdsParams});`,
       postIds,
       (tagErr, tagRows: SongRow[]) => {
         if (tagErr != null) {
-          log.error('Error loading post tags', tagErr);
+          logger.error('Error loading post songs', tagErr);
           reject(tagErr);
           return;
         }
@@ -523,23 +580,100 @@ function getSongData(postIdsParams: String, postIds: string[]): Promise<Map<stri
             const info = {
               pageUrl: item.overviewUrl,
               youtubeUrl: item.youtubeUrl,
+              spotifyUrl: item.spotifyUrl,
+              spotifyUri: item.spotifyUri,
               type: item.type,
               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()
         );
+        logger.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) {
+          logger.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) {
+          logger.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 +723,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 +747,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/oauthPlaylistAdder.ts

@@ -0,0 +1,159 @@
+import { Logger } from '$lib/log';
+import type { OauthResponse } from '$lib/mastodon/response';
+import fs from 'fs/promises';
+
+export abstract class OauthPlaylistAdder {
+  /// How many minutes before expiry the token will be refreshed
+  protected refresh_time: number = 15;
+  protected logger: Logger = new Logger('OauthPlaylistAdder');
+
+  protected constructor(
+    protected apiBase: string,
+    protected token_file_name: string
+  ) {}
+
+  public async authCodeExists(): Promise<boolean> {
+    try {
+      const fileHandle = await fs.open(this.token_file_name);
+      await fileHandle.close();
+      return true;
+    } catch {
+      this.logger.info('No auth token yet, authorizing...');
+      return false;
+    }
+  }
+
+  protected constructAuthUrlInternal(
+    endpointUrl: string,
+    clientId: string,
+    scope: string,
+    redirectUri: URL,
+    additionalParameters: Map<string, string> = new Map()
+  ): URL {
+    const authUrl = new URL(endpointUrl);
+    authUrl.searchParams.append('client_id', clientId);
+    authUrl.searchParams.append('redirect_uri', redirectUri.toString());
+    authUrl.searchParams.append('response_type', 'code');
+    authUrl.searchParams.append('scope', scope);
+    for (let p of additionalParameters.entries()) {
+      authUrl.searchParams.append(p[0], p[1]);
+    }
+    return authUrl;
+  }
+
+  public async receivedAuthCodeInternal(
+    tokenUrl: URL,
+    clientId: string,
+    code: string,
+    url: URL,
+    client_secret?: string,
+    customHeader?: HeadersInit
+  ) {
+    this.logger.debug('received code');
+    const params = new URLSearchParams();
+    params.append('client_id', clientId);
+    params.append('code', code);
+    params.append('grant_type', 'authorization_code');
+    params.append('redirect_uri', `${url.origin}${url.pathname}`);
+    if (client_secret) {
+      params.append('client_secret', client_secret);
+    }
+    this.logger.debug('sending token req', params);
+    const resp: OauthResponse = await fetch(tokenUrl, {
+      method: 'POST',
+      body: params,
+      headers: customHeader
+    }).then((r) => r.json());
+    this.logger.debug('received access token', resp);
+    let expiration = new Date();
+    expiration.setTime(expiration.getTime() + resp.expires_in * 1000);
+    expiration.setSeconds(expiration.getSeconds() + resp.expires_in);
+    resp.expires = expiration;
+    await fs.writeFile(this.token_file_name, JSON.stringify(resp));
+  }
+
+  protected async auth(): Promise<OauthResponse | null> {
+    try {
+      const token_file = await fs.readFile(this.token_file_name, { encoding: 'utf8' });
+      let token = JSON.parse(token_file);
+      if (token.expires) {
+        if (typeof token.expires === typeof '') {
+          token.expires = new Date(token.expires);
+        }
+      }
+      return token;
+    } catch (e) {
+      this.logger.error('Could not read access token', e);
+      return null;
+    }
+  }
+
+  protected async shouldRefreshToken(): Promise<{ token: OauthResponse; refresh: boolean } | null> {
+    const token = await this.auth();
+    if (token == null || !token?.expires) {
+      return null;
+    }
+    let refreshAt = new Date();
+    refreshAt.setTime(refreshAt.getTime() - this.refresh_time * 60 * 1000);
+    this.logger.info('token expiry', token.expires, 'vs refresh @', refreshAt);
+    if (token.expires.getTime() > refreshAt.getTime()) {
+      return {
+        token: token,
+        refresh: false
+      };
+    }
+
+    this.logger.info(
+      'Token expires',
+      token.expires,
+      token.expires.getTime(),
+      `which is after the refresh time`,
+      refreshAt,
+      refreshAt.getTime()
+    );
+    return {
+      token: token,
+      refresh: true
+    };
+  }
+
+  protected async requestRefreshToken(
+    tokenUrl: URL,
+    clientId: string,
+    refresh_token: string,
+    redirect_uri?: string,
+    client_secret?: string,
+    customHeader?: HeadersInit
+  ) {
+    const params = new URLSearchParams();
+    params.append('client_id', clientId);
+    params.append('grant_type', 'refresh_token');
+    params.append('refresh_token', refresh_token);
+    if (client_secret) {
+      params.append('client_secret', client_secret);
+    }
+    if (redirect_uri) {
+      params.append('redirect_uri', redirect_uri);
+    }
+    this.logger.debug('sending token req', params);
+    const resp: OauthResponse = await fetch(tokenUrl, {
+      method: 'POST',
+      body: params,
+      headers: customHeader
+    }).then((r) => r.json());
+    this.logger.verbose('received access token', resp);
+    if (resp.error) {
+      this.logger.error('token resp error', resp);
+      return null;
+    }
+    if (!resp.refresh_token) {
+      resp.refresh_token = refresh_token;
+    }
+    let expiration = new Date();
+    expiration.setTime(expiration.getTime() + resp.expires_in * 1000);
+    expiration.setSeconds(expiration.getSeconds() + resp.expires_in);
+    resp.expires = expiration;
+    await fs.writeFile(this.token_file_name, JSON.stringify(resp));
+    return resp;
+  }
+}

src/lib/server/spotifyPlaylistAdder.ts

@@ -0,0 +1,122 @@
+import { SPOTIFY_CLIENT_ID, SPOTIFY_CLIENT_SECRET, SPOTIFY_PLAYLIST_ID } from '$env/static/private';
+import { Logger } from '$lib/log';
+import type { OauthResponse } from '$lib/mastodon/response';
+import type { SongInfo } from '$lib/odesliResponse';
+import { OauthPlaylistAdder } from './oauthPlaylistAdder';
+
+export class SpotifyPlaylistAdder extends OauthPlaylistAdder {
+  public constructor() {
+    super('https://api.spotify.com/v1', 'spotify_auth_token');
+    this.logger = new Logger('SpotifyPlaylistAdder');
+  }
+
+  public constructAuthUrl(redirectUri: URL): URL {
+    const endpoint = 'https://accounts.spotify.com/authorize';
+    return this.constructAuthUrlInternal(
+      endpoint,
+      SPOTIFY_CLIENT_ID,
+      'playlist-modify-private playlist-modify-public',
+      redirectUri
+    );
+  }
+
+  public async receivedAuthCode(code: string, url: URL) {
+    this.logger.debug('received code');
+    const authHeader =
+      'Basic ' + Buffer.from(SPOTIFY_CLIENT_ID + ':' + SPOTIFY_CLIENT_SECRET).toString('base64');
+
+    const tokenUrl = new URL('https://accounts.spotify.com/api/token');
+    await this.receivedAuthCodeInternal(tokenUrl, SPOTIFY_CLIENT_ID, code, url, undefined, {
+      Authorization: authHeader
+    });
+  }
+
+  private async refreshToken(force: boolean = false): Promise<OauthResponse | null> {
+    const tokenInfo = await this.shouldRefreshToken();
+    if (tokenInfo == null) {
+      return null;
+    }
+    let token = tokenInfo.token;
+    if (!tokenInfo.refresh && !force) {
+      return token;
+    }
+
+    if (!token.refresh_token) {
+      this.logger.error('Need to refresh access token, but no refresh token provided');
+      return null;
+    }
+
+    const authHeader =
+      'Basic ' + Buffer.from(SPOTIFY_CLIENT_ID + ':' + SPOTIFY_CLIENT_SECRET).toString('base64');
+    const tokenUrl = new URL('https://accounts.spotify.com/api/token');
+    return await this.requestRefreshToken(
+      tokenUrl,
+      SPOTIFY_CLIENT_ID,
+      token.refresh_token,
+      undefined,
+      undefined,
+      { Authorization: authHeader }
+    );
+  }
+
+  private async addToPlaylistRetry(song: SongInfo, remaning: number = 3) {
+    if (remaning < 0) {
+      this.logger.error('max retries reached, song will not be added to spotify playlist');
+    }
+    this.logger.debug('addToSpotifyPlaylist', remaning);
+    const token = await this.refreshToken();
+    if (token == null) {
+      return;
+    }
+
+    if (!SPOTIFY_PLAYLIST_ID || SPOTIFY_PLAYLIST_ID === 'CHANGE_ME') {
+      this.logger.debug('no spotify playlist ID configured');
+      return;
+    }
+    if (!song.spotifyUri) {
+      this.logger.info('Skip adding song to spotify playlist, no Uri', song);
+      return;
+    }
+
+    /*
+    const playlistItemsUrl = new URL(`${this.apiBase}/playlists/${SPOTIFY_PLAYLIST_ID}/tracks`);
+    playlistItemsUrl.searchParams.append('videoId', youtubeId);
+    playlistItemsUrl.searchParams.append('playlistId', SPOTIFY_PLAYLIST_ID);
+    playlistItemsUrl.searchParams.append('part', 'id');*/
+    /*const existingPlaylistItem = await fetch(this.apiBase + '/playlistItems', {
+      headers: { Authorization: `${token.token_type} ${token.access_token}` }
+    }).then((r) => r.json());
+    log.debug('existingPlaylistItem', existingPlaylistItem);
+    if (existingPlaylistItem.pageInfo && existingPlaylistItem.pageInfo.totalResults > 0) {
+      log.info('Item already in playlist');
+      return;
+    }*/
+
+    //const searchParams = new URLSearchParams([['part', 'snippet']]);
+    const options: RequestInit = {
+      method: 'POST',
+      headers: { Authorization: `${token.token_type} ${token.access_token}` },
+      body: JSON.stringify({
+        uris: [song.spotifyUri]
+      })
+    };
+    const apiUrl = new URL(`${this.apiBase}/playlists/${SPOTIFY_PLAYLIST_ID}/tracks`);
+    const resp = await fetch(apiUrl, options);
+    const respObj = await resp.json();
+    if (respObj.error) {
+      this.logger.debug('Add to playlist failed', respObj.error);
+      if (respObj.error.status === 401) {
+        const token = await this.refreshToken(true);
+        if (token == null) {
+          return;
+        }
+        this.addToPlaylistRetry(song, remaning--);
+      }
+    } else {
+      this.logger.info('Added to playlist', song.spotifyUri, song.title);
+    }
+  }
+  public async addToPlaylist(song: SongInfo) {
+    await this.addToPlaylistRetry(song);
+  }
+}

src/lib/server/timeline.ts

@@ -1,16 +1,95 @@
-import { HASHTAG_FILTER, MASTODON_INSTANCE, ODESLI_API_KEY } from '$env/static/private';
+import {
-import { log } from '$lib/log';
+  HASHTAG_FILTER,
-import type { Post, Tag, TimelineEvent } from '$lib/mastodon/response';
+  MASTODON_ACCESS_TOKEN,
+  MASTODON_INSTANCE,
+  ODESLI_API_KEY,
+  YOUTUBE_API_KEY
+} from '$env/static/private';
+import { log, Logger } from '$lib/log';
+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 { YoutubePlaylistAdder } from '$lib/server/ytPlaylistAdder';
 import { sleep } from '$lib/sleep';
+import crypto from 'crypto';
+import fs from 'fs/promises';
+import { console } from 'inspector/promises';
+import sharp from 'sharp';
+import { URL, URLSearchParams } from 'url';
 import { WebSocket } from 'ws';
+import { SpotifyPlaylistAdder } from './spotifyPlaylistAdder';
 
 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 lastPosts: string[] = [];
+  private youtubePlaylistAdder: YoutubePlaylistAdder;
+  private spotifyPlaylistAdder: SpotifyPlaylistAdder;
+
+  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
+      log.debug('YT API not configured');
+      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) {
+      log.warn('Could not find video with id', videoId);
+      return false;
+    }
+
+    const item = respObj.items[0];
+    if (!item.snippet) {
+      log.warn('Could not load snippet for video', videoId, item);
+      return false;
+    }
+    if (item.snippet.tags?.includes('music')) {
+      return true;
+    }
+
+    const categorySearchParams = new URLSearchParams([
+      ['part', 'snippet'],
+      ['id', item.snippet.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]?.snippet?.title);
+    log.debug('YT category', categoryTitle);
+    return categoryTitle === 'Music';
+  }
 
   public static async getSongInfoInPost(post: Post): Promise<SongInfo[]> {
     const urlMatches = post.content.matchAll(URL_REGEX);
@@ -32,7 +111,7 @@ export class TimelineReader {
       // Check *all* found url and let odesli determine if it is music or not
       log.debug(`Checking ${url} if it contains song data`);
       const info = await TimelineReader.getSongInfo(url);
-      log.debug(`Found song info for ${url}?`, info);
+      //log.debug(`Found song info for ${url}?`, info);
       if (info) {
         songs.push(info);
       }
@@ -52,8 +131,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,7 +144,7 @@ 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) {
         throw new Error('Rate limit reached', { cause: 429 });
       }
@@ -70,14 +153,32 @@ export class TimelineReader {
         return null;
       }
       const info = odesliInfo.entitiesByUniqueId[odesliInfo.entityUniqueId];
+      //log.debug('odesli response', info);
       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', youtubeId, url);
+          return null;
+        }
+      }
+      const spotify: Platform = 'spotify';
       return {
         ...info,
         pageUrl: odesliInfo.pageUrl,
         youtubeUrl: odesliInfo.linksByPlatform[platform]?.url,
+        spotifyUrl: odesliInfo.linksByPlatform[spotify]?.url,
+        spotifyUri: odesliInfo.linksByPlatform[spotify]?.nativeAppUriDesktop,
         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,19 +190,264 @@ export class TimelineReader {
     }
   }
 
-  private startWebsocket() {
+  /*
-    const socket = new WebSocket(`wss://${MASTODON_INSTANCE}/api/v1/streaming`);
+  private async addToYoutubePlaylist(song: SongInfo) {
-    socket.onopen = () => {
+    log.debug('addToYoutubePlaylist');
-      log.log('Connected to WS');
+    let token: OauthResponse;
-      socket.send('{ "type": "subscribe", "stream": "public:local"}');
-    };
-    socket.onmessage = async (event) => {
     try {
-        const data: TimelineEvent = JSON.parse(event.data.toString());
+      const youtube_token_file = await fs.readFile('yt_auth_token', { encoding: 'utf8' });
-        if (data.event !== 'update') {
+      token = JSON.parse(youtube_token_file);
+      log.debug('read youtube access token', token);
+    } catch (e) {
+      log.error('Could not read youtube access token', e);
       return;
     }
-        const post: Post = JSON.parse(data.payload);
+
+    if (!YOUTUBE_PLAYLIST_ID || YOUTUBE_PLAYLIST_ID === 'CHANGE_ME') {
+      log.debug('no playlist ID configured');
+      return;
+    }
+    if (!song.youtubeUrl) {
+      log.debug('Skip adding song to YT playlist, no youtube Url', song);
+      return;
+    }
+
+    const songUrl = new URL(song.youtubeUrl);
+    const youtubeId = songUrl.searchParams.get('v');
+    if (!youtubeId) {
+      log.debug(
+        'Skip adding song to YT playlist, could not extract YT id from URL',
+        song.youtubeUrl
+      );
+      return;
+    }
+    log.debug('Found YT id from URL', song.youtubeUrl, youtubeId);
+
+    const playlistItemsUrl = new URL('https://www.googleapis.com/youtube/v3/playlistItems');
+    playlistItemsUrl.searchParams.append('videoId', youtubeId);
+    playlistItemsUrl.searchParams.append('playlistId', YOUTUBE_PLAYLIST_ID);
+    playlistItemsUrl.searchParams.append('part', 'id');
+    const existingPlaylistItem = await fetch(
+      'https://www.googleapis.com/youtube/v3/playlistItems',
+      {
+        headers: { Authorization: `${token.token_type} ${token.access_token}` }
+      }
+    ).then((r) => r.json());
+    log.debug('existingPlaylistItem', existingPlaylistItem);
+    if (existingPlaylistItem.pageInfo && existingPlaylistItem.pageInfo.totalResults > 0) {
+      log.info('Item already in playlist');
+      return;
+    }
+
+    const searchParams = new URLSearchParams([
+      ['part', 'snippet']
+      //['key', token.access_token]
+    ]);
+    const options: RequestInit = {
+      method: 'POST',
+      headers: { Authorization: `${token.token_type} ${token.access_token}` },
+      body: JSON.stringify({
+        snippet: {
+          playlistId: YOUTUBE_PLAYLIST_ID,
+          resourceId: {
+            videoId: youtubeId,
+            kind: 'youtube#video'
+          }
+        }
+      })
+    };
+    const youtubeApiUrl = new URL(
+      `https://www.googleapis.com/youtube/v3/playlistItems?${searchParams}`
+    );
+    const resp = await fetch(youtubeApiUrl, options);
+    const respObj = await resp.json();
+    log.debug('Added to playlist', options, respObj);
+    if (respObj.error) {
+      log.debug('Add to playlist failed', respObj.error.errors);
+    }
+  }
+  */
+  private async addToPlaylist(song: SongInfo) {
+    await this.youtubePlaylistAdder.addToPlaylist(song);
+    await this.spotifyPlaylistAdder.addToPlaylist(song);
+  }
+
+  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 async checkAndSavePost(post: Post) {
     const hashttags: string[] = HASHTAG_FILTER.split(',');
     const found_tags: Tag[] = post.tags.filter((t: Tag) => hashttags.includes(t.name));
 
@@ -115,35 +461,114 @@ export class TimelineReader {
     }
 
     await savePost(post, songs);
-        log.debug('Saved post', post.url);
+
+    await TimelineReader.saveAvatar(post.account);
+    await TimelineReader.saveSongThumbnails(songs);
+
+    log.debug('Saved post', post.url, 'songs', songs);
 
     const posts = await getPosts(null, null, 100);
     await saveAtomFeed(createFeed(posts));
+
+    for (let song of songs) {
+      log.debug('Adding to playlist', song);
+      await this.addToPlaylist(song);
+    }
+  }
+
+  private startWebsocket() {
+    const socketLogger = new Logger('Websocket');
+    const socket = new WebSocket(
+      `wss://${MASTODON_INSTANCE}/api/v1/streaming?type=subscribe&stream=public:local&access_token=${MASTODON_ACCESS_TOKEN}`
+    );
+    socket.onopen = () => {
+      socketLogger.log('Connected to WS');
+    };
+    socket.onmessage = async (event) => {
+      try {
+        const data: TimelineEvent = JSON.parse(event.data.toString());
+        socketLogger.debug('ES event', data.event);
+        if (data.event !== 'update') {
+          socketLogger.log('Ignoring ES event', data.event);
+          return;
+        }
+        const post: Post = JSON.parse(data.payload);
+
+        // Sometimes onmessage is called twice for the same post.
+        // This looks to be an issue with automatic reloading in the dev environment,
+        // but hard to tell
+        if (this.lastPosts.includes(post.id)) {
+          socketLogger.log('Skipping post, already handled', post.id);
+          return;
+        }
+        this.lastPosts.push(post.id);
+        while (this.lastPosts.length > 10) {
+          this.lastPosts.shift();
+        }
+        await this.checkAndSavePost(post);
       } catch (e) {
-        log.error('error message', event, event.data, e);
+        socketLogger.error('error message', event, event.data, e);
       }
     };
     socket.onclose = (event) => {
-      log.warn(
+      socketLogger.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`);
+        socketLogger.info(`Attempting to reconenct to WS`);
         this.startWebsocket();
       }, 10000);
     };
     socket.onerror = (event) => {
-      log.error(
+      socketLogger.error(
         `Websocket connection to ${MASTODON_INSTANCE} failed. ${event.type}: ${event.error}, message: '${event.message}'`
       );
     };
   }
 
+  private async loadPostsSinceLastRun() {
+    const now = new Date().toISOString();
+    let latestPost = await getPosts(null, now, 1);
+    if (latestPost.length > 0) {
+      log.log('Last post in DB since', now, latestPost[0].created_at);
+    } else {
+      log.log('No posts in DB since');
+    }
+    let u = new URL(`https://${MASTODON_INSTANCE}/api/v1/timelines/public?local=true&limit=40`);
+    if (latestPost.length > 0) {
+      u.searchParams.append('since_id', latestPost[0].id);
+    }
+    for (let tag of HASHTAG_FILTER.split(',')) {
+      u.searchParams.append('q', '#' + tag);
+    }
+    const headers = {
+      Authorization: `Bearer ${MASTODON_ACCESS_TOKEN}`
+    };
+    const latestPosts: Post[] = await fetch(u, { headers }).then((r) => r.json());
+    log.info('searched posts', latestPosts.length);
+    for (const post of latestPosts) {
+      await this.checkAndSavePost(post);
+    }
+  }
+
   private constructor() {
+    log.log('Constructing timeline object');
+    this.youtubePlaylistAdder = new YoutubePlaylistAdder();
+    this.spotifyPlaylistAdder = new SpotifyPlaylistAdder();
     this.startWebsocket();
+
+    this.loadPostsSinceLastRun()
+      .then((_) => {
+        log.info('loaded posts since last run');
+      })
+      .catch((e) => {
+        log.error('cannot fetch latest posts', e);
+      });
   }
 
   public static init() {
+    log.log('Timeline object init');
     if (this._instance === undefined) {
       this._instance = new TimelineReader();
     }

src/lib/server/ytPlaylistAdder.ts

@@ -0,0 +1,129 @@
+import {
+  BASE_URL,
+  YOUTUBE_CLIENT_ID,
+  YOUTUBE_CLIENT_SECRET,
+  YOUTUBE_PLAYLIST_ID
+} from '$env/static/private';
+import { log } from '$lib/log';
+import type { OauthResponse } from '$lib/mastodon/response';
+import type { SongInfo } from '$lib/odesliResponse';
+import { OauthPlaylistAdder } from './oauthPlaylistAdder';
+
+export class YoutubePlaylistAdder extends OauthPlaylistAdder {
+  public constructor() {
+    super('https://www.googleapis.com/youtube/v3', 'yt_auth_token');
+  }
+
+  public constructAuthUrl(redirectUri: URL): URL {
+    let additionalParameters = new Map([
+      ['access_type', 'offline'],
+      ['include_granted_scopes', 'false']
+    ]);
+    const endpoint = 'https://accounts.google.com/o/oauth2/v2/auth';
+    return this.constructAuthUrlInternal(
+      endpoint,
+      YOUTUBE_CLIENT_ID,
+      'https://www.googleapis.com/auth/youtube',
+      redirectUri,
+      additionalParameters
+    );
+  }
+
+  public async receivedAuthCode(code: string, url: URL) {
+    log.debug('received code');
+    const tokenUrl = new URL('https://oauth2.googleapis.com/token');
+    await this.receivedAuthCodeInternal(
+      tokenUrl,
+      YOUTUBE_CLIENT_ID,
+      code,
+      url,
+      YOUTUBE_CLIENT_SECRET
+    );
+  }
+
+  private async refreshToken(): Promise<OauthResponse | null> {
+    const tokenInfo = await this.shouldRefreshToken();
+    if (tokenInfo == null) {
+      return null;
+    }
+    let token = tokenInfo.token;
+    if (!tokenInfo.refresh) {
+      return token;
+    }
+    if (!token.refresh_token) {
+      log.error('Need to refresh access token, but no refresh token provided');
+      return null;
+    }
+
+    const tokenUrl = new URL('https://oauth2.googleapis.com/token');
+    return await this.requestRefreshToken(
+      tokenUrl,
+      YOUTUBE_CLIENT_ID,
+      token.refresh_token,
+      `${BASE_URL}/ytauth`,
+      YOUTUBE_CLIENT_SECRET
+    );
+  }
+
+  public async addToPlaylist(song: SongInfo) {
+    log.debug('addToYoutubePlaylist');
+    const token = await this.refreshToken();
+    if (token == null) {
+      return;
+    }
+
+    if (!YOUTUBE_PLAYLIST_ID || YOUTUBE_PLAYLIST_ID === 'CHANGE_ME') {
+      log.debug('no playlist ID configured');
+      return;
+    }
+    if (!song.youtubeUrl) {
+      log.info('Skip adding song to YT playlist, no youtube Url', song);
+      return;
+    }
+
+    const songUrl = new URL(song.youtubeUrl);
+    const youtubeId = songUrl.searchParams.get('v');
+    if (!youtubeId) {
+      log.debug(
+        'Skip adding song to YT playlist, could not extract YT id from URL',
+        song.youtubeUrl
+      );
+      return;
+    }
+    log.debug('Found YT id from URL', song.youtubeUrl, youtubeId);
+
+    const playlistItemsUrl = new URL(this.apiBase + '/playlistItems');
+    playlistItemsUrl.searchParams.append('videoId', youtubeId);
+    playlistItemsUrl.searchParams.append('playlistId', YOUTUBE_PLAYLIST_ID);
+    playlistItemsUrl.searchParams.append('part', 'id');
+    const existingPlaylistItem = await fetch(playlistItemsUrl, {
+      headers: { Authorization: `${token.token_type} ${token.access_token}` }
+    }).then((r) => r.json());
+    if (existingPlaylistItem.pageInfo && existingPlaylistItem.pageInfo.totalResults > 0) {
+      log.info('Item already in playlist', existingPlaylistItem);
+      return;
+    }
+
+    const addItemUrl = new URL(this.apiBase + '/playlistItems');
+    addItemUrl.searchParams.append('part', 'snippet');
+    const options: RequestInit = {
+      method: 'POST',
+      headers: { Authorization: `${token.token_type} ${token.access_token}` },
+      body: JSON.stringify({
+        snippet: {
+          playlistId: YOUTUBE_PLAYLIST_ID,
+          resourceId: {
+            videoId: youtubeId,
+            kind: 'youtube#video'
+          }
+        }
+      })
+    };
+    const resp = await fetch(addItemUrl, options);
+    const respObj = await resp.json();
+    log.info('Added to playlist', youtubeId, song.title);
+    if (respObj.error) {
+      log.debug('Add to playlist failed', respObj.error.errors);
+    }
+  }
+}

src/routes/+layout.svelte

@@ -1,6 +1,11 @@
 <script lang="ts">
   import FooterComponent from '$lib/components/FooterComponent.svelte';
   import { SvelteToast } from '@zerodevx/svelte-toast';
+  interface Props {
+    children?: import('svelte').Snippet;
+  }
+
+  let { children }: Props = $props();
 
   const options = {
     pausable: true,
@@ -8,7 +13,7 @@
   };
 </script>
 
-<slot />
+{@render children?.()}
 <SvelteToast {options} />
 <div class="footer">
   <FooterComponent />

src/routes/+page.svelte

@@ -12,7 +12,12 @@
   import { cubicInOut } from 'svelte/easing';
   import { errorToast } from '$lib/errorToast';
 
-  export let data: PageData;
+  interface Props {
+    data: PageData;
+  }
+
+  let { data = $bindable() }: Props = $props();
+  let posts: Post[] = $state(data.posts);
 
   interface FetchOptions {
     since?: string;
@@ -26,8 +31,8 @@
 
   const refreshInterval = parseInt(PUBLIC_REFRESH_INTERVAL);
   let interval: ReturnType<typeof setTimeout> | null = null;
-  let moreOlderPostsAvailable = true;
+  let moreOlderPostsAvailable = $state(true);
-  let loadingOlderPosts = false;
+  let loadingOlderPosts = $state(false);
 
   // Needed, so that edgeFly() can do its thing:
   // To determine whether a newly loaded post is older than the existing ones, is required to know what the oldest
@@ -40,11 +45,11 @@
    */
   function edgeFly(node: Element, opts: EdgeFlyParams) {
     const createdAt = new Date(opts.created_at).getTime();
-    const diffNewest = Math.abs(new Date(data.posts[0].created_at).getTime() - createdAt);
+    const diffNewest = Math.abs(new Date(posts[0].created_at).getTime() - createdAt);
     const oldest =
       oldestBeforeLastFetch !== null
         ? oldestBeforeLastFetch
-        : new Date(data.posts[data.posts.length - 1].created_at).getTime();
+        : new Date(posts[posts.length - 1].created_at).getTime();
     const diffOldest = Math.abs(oldest - createdAt);
     const fromTop = diffNewest <= diffOldest;
 
@@ -79,15 +84,15 @@
 
   function refresh() {
     let filter: FetchOptions = {};
-    if (data.posts.length > 0) {
+    if (posts.length > 0) {
-      filter = { since: data.posts[0].created_at };
+      filter = { since: posts[0].created_at };
     }
     fetchPosts(filter)
       .then((resp) => {
         if (resp.length > 0) {
           // Prepend new posts, filter dupes
           // There shouldn't be any duplicates, but better be safe than sorry
-          data.posts = filterDuplicates(resp.concat(data.posts));
+          posts = filterDuplicates(resp.concat(posts));
         }
       })
       .catch((e: Error) => {
@@ -96,8 +101,9 @@
   }
 
   onMount(async () => {
-    if (data.posts.length > 0) {
+    posts = data.posts;
-      oldestBeforeLastFetch = new Date(data.posts[data.posts.length - 1].created_at).getTime();
+    if (posts.length > 0) {
+      oldestBeforeLastFetch = new Date(posts[posts.length - 1].created_at).getTime();
     }
     interval = setInterval(refresh, refreshInterval);
 
@@ -121,8 +127,8 @@
   function loadOlderPosts() {
     loadingOlderPosts = true;
     const filter: FetchOptions = { count: 20 };
-    if (data.posts.length > 0) {
+    if (posts.length > 0) {
-      const before = data.posts[data.posts.length - 1].created_at;
+      const before = posts[posts.length - 1].created_at;
       filter.before = before;
       oldestBeforeLastFetch = new Date(before).getTime();
     }
@@ -132,7 +138,7 @@
         if (resp.length > 0) {
           // Append old posts, filter dupes
           // There shouldn't be any duplicates, but better be safe than sorry
-          data.posts = filterDuplicates(data.posts.concat(resp));
+          posts = filterDuplicates(posts.concat(resp));
           // If we got less than we expected, there are no older posts available
           moreOlderPostsAvailable = resp.length >= (filter.count ?? 20);
         } else {
@@ -152,15 +158,15 @@
 </svelte:head>
 <h2>{PUBLIC_MASTODON_INSTANCE_DISPLAY_NAME} music list</h2>
 <div class="wrapper">
-  <div />
+  <div></div>
   <div class="posts">
-    {#if data.posts.length === 0}
+    {#if posts.length === 0}
       Sorry, no posts recommending music have been found yet
     {/if}
-    {#each data.posts as post (post.url)}
+    {#each posts as post (post.url)}
       <div
         class="post"
-        transition:edgeFly={{
+        transition:edgeFly|global={{
           y: 10,
           created_at: post.created_at,
           duration: 300,
@@ -171,12 +177,12 @@
       </div>
     {/each}
     <LoadMoreComponent
-      on:loadOlderPosts={loadOlderPosts}
+      {loadOlderPosts}
       moreAvailable={moreOlderPostsAvailable}
       isLoading={loadingOlderPosts}
     />
   </div>
-  <div />
+  <div></div>
 </div>
 
 <style>

src/routes/spotifyAuth/+page.server.ts

@@ -0,0 +1,28 @@
+import { log } from '$lib/log';
+import { SpotifyPlaylistAdder } from '$lib/server/spotifyPlaylistAdder';
+import { redirect } from '@sveltejs/kit';
+import type { PageServerLoad } from './$types';
+
+export const load: PageServerLoad = async ({ url }) => {
+  const adder = new SpotifyPlaylistAdder();
+  let redirectUri = url;
+  if (url.hostname === 'localhost') {
+    redirectUri.hostname = '127.0.0.1';
+  }
+  log.debug(url.searchParams, url.hostname);
+  if (url.searchParams.has('code')) {
+    await adder.receivedAuthCode(url.searchParams.get('code') || '', url);
+    redirect(307, '/');
+  } else if (url.searchParams.has('error')) {
+    log.error('received error', url.searchParams.get('error'));
+    return;
+  }
+
+  if (await adder.authCodeExists()) {
+    redirect(307, '/');
+  }
+
+  const authUrl = adder.constructAuthUrl(url);
+  log.debug('+page.server.ts', authUrl.toString());
+  redirect(307, authUrl);
+};

src/routes/spotifyAuth/+page.svelte

@@ -0,0 +1 @@
+<h1>Something went wrong</h1>

src/routes/ytauth/+page.server.ts

@@ -0,0 +1,24 @@
+import { log } from '$lib/log';
+import { YoutubePlaylistAdder } from '$lib/server/ytPlaylistAdder';
+import { redirect } from '@sveltejs/kit';
+import type { PageServerLoad } from './$types';
+
+export const load: PageServerLoad = async ({ url }) => {
+  const adder = new YoutubePlaylistAdder();
+  if (url.searchParams.has('code')) {
+    log.debug(url.searchParams);
+    await adder.receivedAuthCode(url.searchParams.get('code') || '', url);
+    redirect(307, '/');
+  } else if (url.searchParams.has('error')) {
+    log.error('received error', url.searchParams.get('error'));
+    return;
+  }
+
+  if (await adder.authCodeExists()) {
+    redirect(307, '/');
+  }
+
+  const authUrl = adder.constructAuthUrl(url);
+  log.debug('+page.server.ts', authUrl.toString());
+  redirect(307, authUrl);
+};

src/routes/ytauth/+page.svelte

@@ -0,0 +1 @@
+<h1>Something went wrong</h1>

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

@@ -1,5 +1,5 @@
 import adapter from '@sveltejs/adapter-node';
-import { vitePreprocess } from '@sveltejs/kit/vite';
+import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
 
 /** @type {import('@sveltejs/kit').Config} */
 const config = {
@@ -11,7 +11,15 @@ 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']
+      }
+    }
   }
 };
 

tsconfig.json

@@ -9,6 +9,7 @@
     "skipLibCheck": true,
     "sourceMap": true,
     "strict": true
+    //"lib": ["ESNext.Array"]
   }
   // Path aliases are handled by https://kit.svelte.dev/docs/configuration#alias
   //

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'
+      ]
+    }
+  }
 });