.env.EXAMPLE

@@ -1,4 +1,4 @@
-HASHTAG_FILTER = ichlausche,music,musik,nowplaying,tunetuesday,nowlistening
+HASHTAG_FILTER = ichlausche,music,musik,nowplaying,tunetuesday
 URL_FILTER = song.link,album.link,spotify.com,music.apple.com,bandcamp.com
 YOUTUBE_API_KEY = CHANGE_ME
 VERBOSE = false

src/lib/components/FooterComponent.svelte

@@ -26,7 +26,7 @@
     gap: 10px;
     backdrop-filter: blur(10px);
     -webkit-backdrop-filter: blur(10px);
-    background-color: #bbbbcd73;
+    background-color: #54546788;
     padding: 0.3em 1em;
     margin: 0 -8px;
     border-radius: 3px;

src/lib/components/LoadMoreComponent.svelte

@@ -1,40 +0,0 @@
-<script lang="ts">
-  import { createEventDispatcher } from 'svelte';
-
-  export let moreAvailable: boolean = false;
-  export let isLoading: boolean = false;
-  let displayText = '';
-  let title = '';
-  let disabled: boolean;
-
-  $: displayText = isLoading ? 'Loading...' : 'Load More';
-  $: disabled = !moreAvailable || isLoading;
-  $: title = moreAvailable ? 'Load More' : 'No more posts available';
-
-  const dispatch = createEventDispatcher();
-
-  function loadOlderPosts() {
-    dispatch('loadOlderPosts');
-  }
-</script>
-
-<button on:click={loadOlderPosts} {disabled} {title}>{displayText}</button>
-
-<style>
-  button {
-    padding: 0.75em;
-    border-radius: 3px;
-    border: none;
-    background-color: var(--color-link);
-    color: white;
-    cursor: grab;
-    transition: all 0.2s ease-in-out;
-  }
-  button:hover:not(:disabled) {
-    background-color: var(--color-link-visited);
-  }
-  button:disabled {
-    cursor: not-allowed;
-    background-color: grey;
-  }
-</style>

src/lib/server/db.ts

@@ -172,19 +172,15 @@ export function savePost(post: Post): void {
     });
 }
 
-export async function getPosts(since: string | null, before: string | null, limit: number) {
+export async function getPosts(since: string | null, limit: number) {
   let promise = await new Promise<Post[]>((resolve, reject) => {
     let filter_query;
     let params: any = { $limit: limit };
-    if (since === null && before === null) {
+    if (since === null) {
       filter_query = '';
-    } else if (since !== null) {
+    } else {
       filter_query = 'WHERE posts.created_at > $since';
       params.$since = since;
-    } else if (before !== null) {
-      // Setting both, before and since doesn't make sense, so this case is not explicitly handled
-      filter_query = 'WHERE posts.created_at < $before';
-      params.$before = before;
     }
     const sql = `SELECT posts.id, posts.content, posts.created_at, posts.url,
     accounts.id AS account_id, accounts.acct, accounts.username, accounts.display_name,

src/lib/server/timeline.ts

@@ -3,7 +3,7 @@ import type { Post, Tag, TimelineEvent } from '$lib/mastodon/response';
 import { savePost } from '$lib/server/db';
 import { WebSocket } from "ws";
 
-const YOUTUBE_REGEX = new RegExp(/https?:\/\/(www\.)?youtu((be.com\/.*?v=)|(\.be\/))(?<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;

src/routes/+page.svelte

@@ -4,13 +4,10 @@ import type { PageData } from './$types';
 import type { Post } from '$lib/mastodon/response';
 import { PUBLIC_REFRESH_INTERVAL } from '$env/static/public';
 import PostComponent from '$lib/components/PostComponent.svelte';
-import LoadMoreComponent from '$lib/components/LoadMoreComponent.svelte';
 
 export let data: PageData;
 
 let interval: NodeJS.Timer | null = null;
-let moreOlderPostsAvailable = true;
-let loadingOlderPosts = false;
 
 onMount(async () => {
   interval = setInterval(async () => {
@@ -22,13 +19,8 @@ onMount(async () => {
     .then(r => r.json())
     .then((resp: Post[]) => {
       if (resp.length > 0) {
-        // Prepend new posts, filter dupes
+        data.posts = resp.concat(data.posts);
-        // There shouldn't be any duplicates, but better be safe than sorry
+        console.log('updated data', resp, data.posts);
-        const combined = resp.concat(data.posts);
-        const filteredPosts = combined.filter((obj, index, arr) => {
-          return arr.map(mapObj => mapObj.url).indexOf(obj.url) === index;
-        });
-        data.posts = filteredPosts;
       }
     })
     .catch(e => {
@@ -41,39 +33,7 @@ onMount(async () => {
       clearInterval(interval)
     }
   }
-});
+})
-
-async function loadOlderPosts() {
-  loadingOlderPosts = true;
-  const params = new URLSearchParams();
-  if (data.posts.length > 0) {
-    params.set('before', data.posts[data.posts.length - 1].created_at);
-  }
-  await fetch(`/api/posts?${params}`)
-  .then(r => r.json())
-  .then((resp: Post[]) => {
-    if (resp.length > 0) {
-      // Append old posts, filter dupes
-      // There shouldn't be any duplicates, but better be safe than sorry
-      const combined = data.posts.concat(resp);
-      const filteredPosts = combined.filter((obj, index, arr) => {
-        return arr.map(mapObj => mapObj.url).indexOf(obj.url) === index;
-      });
-      data.posts = filteredPosts;
-      moreOlderPostsAvailable = true;
-    } else {
-      moreOlderPostsAvailable = false;
-    }
-    loadingOlderPosts = false;
-  })
-  .catch(e => {
-    loadingOlderPosts = false;
-    // TODO: Show error in UI
-    console.error('Error loading older posts', e);
-  });
-
-}
-
 </script>
 <svelte:head>
     <title>Metalhead.club music list</title>
@@ -85,13 +45,9 @@ async function loadOlderPosts() {
   {#if data.posts.length === 0}
     Sorry, no posts recommending music aave been found yet
   {/if}
-  {#each data.posts as post (post.url)}
+  {#each data.posts as post (post.id)}
       <div class="post"><PostComponent {post} /></div>
   {/each}
-  <LoadMoreComponent
-    on:loadOlderPosts={loadOlderPosts}
-    moreAvailable={moreOlderPostsAvailable}
-    isLoading={loadingOlderPosts}/>
   </div>
   <div></div>
   </div>
@@ -99,7 +55,6 @@ async function loadOlderPosts() {
   .posts {
     display: flex;
     flex-direction: column;
-    align-items: center;
   }
   .post {
     width: 100%;

src/routes/api/posts/+server.ts

@@ -4,13 +4,12 @@ import { json } from '@sveltejs/kit';
 import type { RequestHandler } from './$types';
 
 export const GET = (async ({ url }) => {
-  const since = url.searchParams.get('since');
+    const since = url.searchParams.get('since');
-  const before = url.searchParams.get('before');
+    let count = Number.parseInt(url.searchParams.get('count') || '');
-  let count = Number.parseInt(url.searchParams.get('count') || '');
+    if (isNaN(count)) {
-  if (isNaN(count)) {
+        count = 20;
-    count = 20;
+    }
-  }
+    count = Math.min(count, 100);
-  count = Math.min(count, 100);
+    const posts = await getPosts(since, count);
-  const posts = await getPosts(since, before, count);
+    return json(posts);
-  return json(posts);
 }) satisfies RequestHandler;