Update dependencies & version

.env.EXAMPLE

@@ -2,6 +2,7 @@ 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,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,

README.md

@@ -103,6 +103,13 @@ because the API is the only way to check if a YouTube link leads to music or som
 
 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

package.json

@@ -1,6 +1,6 @@
 {
   "name": "moshing-mammut",
-  "version": "1.3.1",
+  "version": "1.3.2",
   "private": true,
   "license": "LGPL-3.0-or-later",
   "scripts": {
@@ -14,8 +14,9 @@
     "format": "prettier --plugin-search-dir . --write ."
   },
   "devDependencies": {
-    "@sveltejs/adapter-node": "^1.2.3",
+    "@sveltejs/adapter-node": "^2.0.0",
-    "@sveltejs/kit": "^1.5.0",
+    "@sveltejs/kit": "^2.0.0",
+    "@sveltejs/vite-plugin-svelte": "^3.0.0",
     "@types/node": "^18.16.3",
     "@types/sqlite3": "^3.1.8",
     "@types/ws": "^8.5.4",
@@ -24,14 +25,14 @@
     "@zerodevx/svelte-toast": "^0.9.3",
     "eslint": "^8.28.0",
     "eslint-config-prettier": "^8.5.0",
-    "eslint-plugin-svelte3": "^4.0.0",
+    "eslint-plugin-svelte": "^2.35.1",
     "prettier": "^2.8.0",
-    "prettier-plugin-svelte": "^2.8.1",
+    "prettier-plugin-svelte": "^2.10.1",
-    "svelte": "^3.54.0",
+    "svelte": "^4.0.0",
-    "svelte-check": "^3.0.1",
+    "svelte-check": "^3.4.3",
     "tslib": "^2.4.1",
-    "typescript": "^4.9.3",
+    "typescript": "^5.0.0",
-    "vite": "^4.0.0"
+    "vite": "^5.0.0"
   },
   "type": "module",
   "dependencies": {

src/hooks.server.ts

@@ -53,7 +53,7 @@ export const handle = (async ({ event, resolve }) => {
       return new Response(f, { headers: [['Content-Type', 'image/' + suffix]] });
     } catch (e) {
       log.error('no stream', e);
-      throw error(404);
+      error(404);
     }
   }
 

src/lib/components/LoadMoreComponent.svelte

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

src/lib/server/timeline.ts

@@ -1,5 +1,6 @@
 import {
   HASHTAG_FILTER,
+  MASTODON_ACCESS_TOKEN,
   MASTODON_INSTANCE,
   ODESLI_API_KEY,
   YOUTUBE_API_KEY
@@ -352,10 +353,11 @@ export class TimelineReader {
   }
 
   private startWebsocket() {
-    const socket = new WebSocket(`wss://${MASTODON_INSTANCE}/api/v1/streaming`);
+    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.send('{ "type": "subscribe", "stream": "public:local"}');
     };
     socket.onmessage = async (event) => {
       try {
@@ -392,7 +394,8 @@ 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/routes/+page.svelte

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

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 = {