auto reload frontpage every 5minutes

zaanposni · Nov 30, 2024 · 84378e7 · 84378e7
1 parent 45926d6
commit 84378e7
Show file tree

Hide file tree

Showing 2 changed files with 111 additions and 12 deletions.
diff --git a/src/psaggregator/src/routes/+page.svelte b/src/psaggregator/src/routes/+page.svelte
@@ -9,11 +9,105 @@
     import MediaQuery from "$lib/utils/MediaQuery.svelte";
     import InstagramPost from "$lib/components/InstagramPost.svelte";
     import TwitchEntry from "$lib/components/TwitchEntry.svelte";
-    import { version } from "$app/environment";
+    import { browser, version } from "$app/environment";
     import TwitterPost from "$lib/components/TwitterPost.svelte";
-    import { GITHUB_URL, MAIL_TO_URL } from "../config/config";
+    import { GITHUB_URL, LOW_DATA_MODE, MAIL_TO_URL } from "../config/config";
+    import { invalidateAll } from "$app/navigation";
+    import { onDestroy, onMount } from "svelte";
+    import FaviconNotification from "favicon-notification";
+    import type { ContentPiece, Information, ScheduledContentPiece } from "@prisma/client";
+    import moment from "moment";
 
     export let data: PageServerData;
+
+    let reloadInterval: number | NodeJS.Timeout | undefined = undefined;
+    let isNotificationVisible = false;
+
+    function findNewestDate() {
+        const dates = [
+            ...(data.today?.map((entry: ScheduledContentPiece) => moment(entry.startDate)) ?? []),
+            ...(data.youtubeCommunityPosts?.map((entry: Information) => moment(entry.date)) ?? []),
+            ...(data.instagramPosts?.map((entry: Information) => moment(entry.date)) ?? []),
+            ...(data.twitterPosts?.map((entry: Information) => moment(entry.date)) ?? []),
+            ...(data.redditPosts?.map((entry: RedditPost) => moment(entry.date)) ?? []),
+            ...(data.videos?.map((entry: ContentPiece) => moment(entry.startDate)) ?? []),
+            ...(data.upcomingStreams?.map((entry: ScheduledContentPiece) => moment(entry.startDate)) ?? []),
+            moment((data.twitchStatus as TwitchStatus)?.startedAt ?? 0)
+        ];
+
+        return Math.max(...dates);
+    }
+
+    async function reload() {
+        if ($LOW_DATA_MODE) return;
+
+        const currentLastDate = findNewestDate();
+        const currentLastUploadPlanEntriesWithLink = data.today.filter((entry: ScheduledContentPiece) => entry.href).length;
+
+        await invalidateAll();
+
+        const newLastDate = findNewestDate();
+        const newUploadPlanEntriesWithLink = data.today.filter((entry: ScheduledContentPiece) => entry.href).length;
+
+        if (
+            (currentLastDate !== newLastDate && currentLastDate && newLastDate) ||
+            currentLastUploadPlanEntriesWithLink !== newUploadPlanEntriesWithLink
+        ) {
+            isNotificationVisible = true;
+            try {
+                FaviconNotification.add();
+            } catch (e) {
+                console.error(e);
+            }
+        }
+    }
+
+    function onUserActive() {
+        if (!isNotificationVisible) return;
+
+        isNotificationVisible = false;
+        try {
+            FaviconNotification.remove();
+        } catch (e) {
+            console.error(e);
+        }
+    }
+
+    function handleVisibilityChange() {
+        if (document.visibilityState === "visible") {
+            onUserActive();
+        }
+    }
+
+    function handleUserInteraction() {
+        onUserActive();
+    }
+
+    onMount(() => {
+        if (browser) {
+            reloadInterval = setInterval(reload, 1000 * 60 * 5);
+
+            FaviconNotification.init({
+                color: "#ff0000",
+                lineColor: "#000000",
+                url: "/favicon.png"
+            });
+
+            document.addEventListener("visibilitychange", handleVisibilityChange);
+            window.addEventListener("mousemove", handleUserInteraction);
+            window.addEventListener("focus", handleUserInteraction);
+        }
+    });
+
+    onDestroy(() => {
+        if (browser) {
+            if (reloadInterval) clearInterval(reloadInterval);
+
+            document.removeEventListener("visibilitychange", handleVisibilityChange);
+            window.removeEventListener("mousemove", handleUserInteraction);
+            window.removeEventListener("focus", handleUserInteraction);
+        }
+    });
 </script>
 
 <style lang="postcss">
@@ -110,7 +204,7 @@
             <div class="order-1 md:order-6">
                 <div class="mb-2 ml-2 flex items-center text-2xl">
                     <img alt="twitch" src="/twitch-logo.svg" class="mr-2 inline-block h-8 w-8" />
-                    Anstehende Streams
+                    Streams
                 </div>
                 <div class="flex flex-col gap-2">
                     {#each data.upcomingStreams as stream}

diff --git a/src/psaggregator/src/routes/changelog/+page.svelte b/src/psaggregator/src/routes/changelog/+page.svelte
@@ -18,6 +18,11 @@
 <div class="flex-col p-4">
     <h2 class="mb-2 text-2xl font-bold">Version 1.19.0</h2>
     <div class="changelog-contents w-full grow overflow-y-auto lg:w-1/2">
+        <h3 class="mb-2 text-xl font-bold">Neue Features</h3>
+        <div>
+            <span>Automatisches Neuladen</span>
+            <span>Die Startseite lädt nun alle fünf Minuten automatisch neu, um neue Inhalte anzuzeigen.</span>
+        </div>
         <h3 class="mb-2 text-xl font-bold">Überarbeitungen</h3>
         <div>
             <span>Verbesserte Ladezeiten</span>
@@ -67,15 +72,15 @@
             <span>Nach oben scrollen</span>
             <span>Wenn auf mobilen Endgeräten nun auf den oberen Bildschirmrand getippt wird, wird die Seite nach oben gescrollt.</span>
         </div>
-    </div>
-    <h3 class="mb-2 text-xl font-bold">Überarbeitungen</h3>
-    <div>
-        <span>Einheitlichere Überschriften</span>
-        <span>Die Überschriften wurden einheitlicher gestaltet.</span>
-    </div>
-    <div>
-        <span>Mehr Footer-Informationen</span>
-        <span>Auf mobilen Endgeräten wird nun mehr Information im Footer angezeigt.</span>
+        <h3 class="mb-2 text-xl font-bold">Überarbeitungen</h3>
+        <div>
+            <span>Einheitlichere Überschriften</span>
+            <span>Die Überschriften wurden einheitlicher gestaltet.</span>
+        </div>
+        <div>
+            <span>Mehr Footer-Informationen</span>
+            <span>Auf mobilen Endgeräten wird nun mehr Information im Footer angezeigt.</span>
+        </div>
     </div>
 
     <h2 class="mb-2 text-2xl font-bold">Version 1.15.0</h2>