release/1.4.0

src/psaggregator/package.json

@@ -1,6 +1,6 @@
 {
     "name": "psaggregator",
-    "version": "1.3.0",
+    "version": "1.4.0",
     "scripts": {
         "dev": "vite dev",
         "build": "vite build",

src/psaggregator/src/config/config.ts

@@ -1,4 +1,5 @@
 import { env } from "$env/dynamic/public";
+import { writable } from "svelte/store";
 
 export const MAIL_TO_URL = "mailto:psaggregator@zaanposni.com";
 export const LEGAL_URL = env.PUBLIC_LEGAL_URL;
@@ -7,3 +8,5 @@ export const KOFI_USERNAME = env.PUBLIC_KOFI_USERNAME;
 
 export const GITHUB_URL = "https://github.com/zaanposni/psaggregator";
 export const GITHUB_AUTHOR_URL = "https://github.com/zaanposni";
+
+export const SHOW_ABSOLUTE_DATES = writable(false);

src/psaggregator/src/lib/components/BigHeader.svelte

@@ -1,38 +1,62 @@
 <script lang="ts">
-    import { AppBar, LightSwitch } from "@skeletonlabs/skeleton";
+    import { AppBar, LightSwitch, type ModalSettings } from "@skeletonlabs/skeleton";
     import MediaQuery from "$lib/utils/MediaQuery.svelte";
     import { GITHUB_URL, KOFI_USERNAME, LEGAL_URL } from "../../config/config";
+    import { getModalStore } from "@skeletonlabs/skeleton";
+
+    const modalStore = getModalStore();
+
+    function openChangelog() {
+        const modal: ModalSettings = {
+            type: "component",
+            component: "changelog"
+        };
+        modalStore.trigger(modal);
+    }
 </script>
 
-<MediaQuery query="(min-width: 768px)" let:matches>
+<MediaQuery query="(min-width: 1280px)" let:matches>
     <AppBar>
-        <div slot="lead" class="flex flex-row items-center gap-x-4">
+        <div slot="lead">
             <a href="/">
                 <img src="/ps.png" alt="PS Aggregator Logo" class="h-8 w-8" />
             </a>
-            {#if matches}
-                <a href="/">Home</a>
-                <a href="/videos">Videos</a>
-                <a href="/news">News</a>
-                <a href="/api">API</a>
-                <a href="/motivation">Motivation</a>
-                <a href={GITHUB_URL} target="_blank">
-                    <span>GitHub</span>
-                </a>
-            {/if}
-            {#if KOFI_USERNAME}
-                <a href="https://ko-fi.com/{KOFI_USERNAME}" target="_blank">
-                    <span>Ko-fi</span>
-                </a>
-            {/if}
-            <a href="https://pietsmiet.de" target="_blank">
-                <span>PietSmiet.de</span>
-            </a>
-            {#if !matches && LEGAL_URL}
-                <a href={LEGAL_URL} target="_blank">
-                    <span>Legal</span>
+        </div>
+        <div slot="default" class="flex flex-nowrap items-center justify-between">
+            <div class="flex items-center gap-x-4">
+                {#if matches}
+                    <a href="/">Home</a>
+                    <a href="/plan">Uploadplan</a>
+                    <a href="/videos">Videos</a>
+                    <a href="/news">News</a>
+                    <a href="/api">API</a>
+                    <a href="/motivation">Motivation</a>
+                    <a href="/settings">Einstellungen</a>
+                    <div>
+                        <button on:click={openChangelog}>Was ist neu?</button>
+                    </div>
+                {/if}
+            </div>
+            <div class="flex items-center gap-x-4">
+                {#if matches}
+                    <a href={GITHUB_URL} target="_blank">
+                        <span>GitHub</span>
+                    </a>
+                {/if}
+                {#if KOFI_USERNAME}
+                    <a href="https://ko-fi.com/{KOFI_USERNAME}" target="_blank">
+                        <span>Ko-fi</span>
+                    </a>
+                {/if}
+                <a href="https://pietsmiet.de" target="_blank">
+                    <span>PietSmiet.de</span>
                 </a>
-            {/if}
+                {#if !matches && LEGAL_URL}
+                    <a href={LEGAL_URL} target="_blank">
+                        <span>Legal</span>
+                    </a>
+                {/if}
+            </div>
         </div>
         <svelte:fragment slot="trail">
             <LightSwitch />

src/psaggregator/src/lib/components/Changelog.svelte

@@ -0,0 +1,52 @@
+<script lang="ts">
+    import { version } from "$app/environment";
+    import { getModalStore } from "@skeletonlabs/skeleton";
+    import { CloseLarge } from "carbon-icons-svelte";
+
+    const modalStore = getModalStore();
+</script>
+
+<style lang="postcss">
+    #changelog-contents > div {
+        @apply mb-2 flex flex-col;
+    }
+    #changelog-contents > div > span:first-child {
+        @apply font-bold;
+    }
+</style>
+
+<div class="modal-example-form card w-modal relative flex h-[80vh] flex-col p-4 md:space-y-4 md:shadow-xl">
+    <button class="btn btn-icon absolute right-4 top-4" on:click={() => modalStore.close()}>
+        <CloseLarge size={32} />
+    </button>
+
+    <h1 class="mb-8 text-4xl font-bold">Version {version}</h1>
+
+    <div class="mb-4">
+        Vielen Dank für euer gutes Feedback und die vielen Vorschläge. Ich habe versucht, so viele wie möglich umzusetzen.
+    </div>
+
+    <h2 class="mb-4 text-2xl font-bold">Neue Features</h2>
+    <div class="grow overflow-y-auto" id="changelog-contents">
+        <div>
+            <span>Mehr Details in /videos</span>
+            <span>Du kannst nun auf der Videos-Seite mehr Details ansehen. </span>
+        </div>
+        <div>
+            <span>Alte Uploadpläne</span>
+            <span>Du kannst nun alte Uploadpläne ansehen. Beachte, dass historische Daten noch nicht importiert wurden.</span>
+        </div>
+        <div>
+            <span>Uploadplan hochgeladene Videos</span>
+            <span>Im Uploadplan ist die Unterscheidung zwischen hochgeladenen und nicht hochgeladenen Videos nun deutlicher.</span>
+        </div>
+        <div>
+            <span>Datumswerte einstellbar</span>
+            <span>Auf der neuen "Einstellungen" Seite kannst du wählen, ob du absolute oder relative Datumswerte sehen willst.</span>
+        </div>
+        <div>
+            <span>Footer und Header überarbeitet</span>
+            <span>Der Footer und der Header wurden überarbeitet. Externe Links sind nun getrennt von internen Links.</span>
+        </div>
+    </div>
+</div>

src/psaggregator/src/lib/components/Footer.svelte

@@ -4,7 +4,7 @@
     import { version } from "$app/environment";
     import { TabAnchor, TabGroup } from "@skeletonlabs/skeleton";
     import { page } from "$app/stores";
-    import { Api, FavoriteFilled, Home, Document, Thumbnail_2 } from "carbon-icons-svelte";
+    import { Api, FavoriteFilled, Home, Document, Thumbnail_2, Settings, EventSchedule } from "carbon-icons-svelte";
 </script>
 
 <style lang="postcss">
@@ -13,10 +13,10 @@
     }
 </style>
 
-<MediaQuery query="(min-width: 768px)" let:matches>
+<MediaQuery query="(min-width: 1280px)" let:matches>
     {#if matches}
-        <div class="flex w-full flex-row flex-wrap items-center gap-x-4 p-2 lg:flex-nowrap">
-            <span class="mr-12 text-sm md:text-base">
+        <div class="flex w-full flex-row flex-nowrap items-center gap-x-4 p-2">
+            <span class="mr-12">
                 <a href={GITHUB_URL} target="_blank">
                     <span>PS Aggregator</span>
                 </a>by
@@ -31,21 +31,19 @@
                 <span>GitHub</span>
             </a>
             {#if LEGAL_URL}
-                <a href={LEGAL_URL} class="text-sm md:text-base" target="_blank">
+                <a href={LEGAL_URL} target="_blank">
                     <span>Legal</span>
                 </a>
             {/if}
             <span class="ml-auto">v{version}</span>
-            <span class="text-xs md:text-base">
-                Dies ist ein privates Projekt und steht in keiner Verbindung zur PietSmiet UG & Co. KG.
-            </span>
+            <span> Dies ist ein privates Projekt und steht in keiner Verbindung zur PietSmiet UG & Co. KG. </span>
         </div>
     {:else}
         <TabGroup
             justify="justify-center"
             active="variant-filled-primary"
             hover="hover:variant-soft-primary"
-            flex="flex-1 lg:flex-none"
+            flex="flex-1"
             rounded=""
             border=""
             class="bg-surface-100-800-token w-full">
@@ -55,6 +53,12 @@
                 </div>
                 <span>Home</span>
             </TabAnchor>
+            <TabAnchor href="/plan" selected={$page.url.pathname === "/plan"} class="shrink-0">
+                <div class="flex justify-center" slot="lead">
+                    <EventSchedule />
+                </div>
+                <span>Uploadplan</span>
+            </TabAnchor>
             <TabAnchor href="/videos" selected={$page.url.pathname === "/videos"} class="shrink-0">
                 <div class="flex justify-center" slot="lead">
                     <Thumbnail_2 />
@@ -79,6 +83,12 @@
                 </div>
                 <span>Motivation</span>
             </TabAnchor>
+            <TabAnchor href="/settings" selected={$page.url.pathname === "/settings"} class="shrink-0">
+                <div class="flex justify-center" slot="lead">
+                    <Settings />
+                </div>
+                <span>Einstellungen</span>
+            </TabAnchor>
             <!-- ... -->
         </TabGroup>
     {/if}

src/psaggregator/src/lib/components/InstagramPost.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
     import type { Information, InformationResource } from "@prisma/client";
-    import moment from "moment";
+    import { SHOW_ABSOLUTE_DATES } from "../../config/config";
+    import { dateFormat } from "$lib/utils/dateFormat";
 
     export let post: Information & { InformationResource: InformationResource[] };
 
@@ -14,7 +15,7 @@
     <div class="mb-2 flex justify-between">
         <span>{titleCase(post.additionalInfo)}</span>
         {#if post.date}
-            <span class="text-sm">{moment(post.date).fromNow()}</span>
+            <span class="text-sm">{dateFormat(post.date, $SHOW_ABSOLUTE_DATES)}</span>
         {/if}
     </div>
     <div class="mb-4">{post.text}</div>

src/psaggregator/src/lib/components/PSVideo.svelte

@@ -1,8 +1,13 @@
 <script lang="ts">
+    import { dateFormat } from "$lib/utils/dateFormat";
     import type { ContentPiece } from "@prisma/client";
-    import moment from "moment";
+    import { SHOW_ABSOLUTE_DATES } from "../../config/config";
 
     export let video: ContentPiece;
+    export let lineClamp: 2 | 3 | 4 | 5 | 6 = 2;
+
+    let classes = "";
+    export { classes as class };
 
     $: humanReadableMinutes = video.duration ? Math.floor(video.duration / 60) : null;
     $: humanReadableSeconds = video.duration ? video.duration % 60 : null;
@@ -18,31 +23,33 @@
         background: linear-gradient(0deg, rgba(0, 0, 0, 0.6) 0, transparent 40%);
         transition: background 0.2s;
     }
+
+    .line-clamp {
+        display: -webkit-box;
+        -webkit-box-orient: vertical;
+        overflow: hidden;
+    }
 </style>
 
-<a
-    class="card relative aspect-square h-full w-64"
-    href={video.href}
-    target="_blank"
-    title={video.title}>
+<a class="card relative aspect-square h-full w-64 {classes}" href={video.href} target="_blank" title={video.title}>
     <div class="block">
         <div class="relative aspect-video">
             <img class="h-full w-full object-cover" src={video.imageUri} alt={video.title} />
             <div class="overlap"></div>
             {#if humanReadableMinutes !== null && humanReadableSeconds !== null}
                 <span class="absolute bottom-0 right-0 m-2 text-xs font-bold text-white"
-                    >{("00" + humanReadableMinutes).slice(-2)}:{("00" + humanReadableSeconds).slice(
-                        -2
-                    )}</span>
+                    >{("00" + humanReadableMinutes).slice(-2)}:{("00" + humanReadableSeconds).slice(-2)}</span>
             {/if}
         </div>
     </div>
     <div>
-        <div class="m-4 line-clamp-2 font-bold">
+        <div class="line-clamp m-4 font-bold" style="-webkit-line-clamp: {lineClamp}">
             {video.title}
         </div>
     </div>
-    <div class="absolute bottom-0 right-0 m-2 text-sm font-bold">
-        <span>{moment(video.startDate).fromNow()}</span>
-    </div>
+    {#if video.startDate}
+        <div class="absolute bottom-0 right-0 m-2 text-sm font-bold">
+            <span>{dateFormat(video.startDate, $SHOW_ABSOLUTE_DATES)}</span>
+        </div>
+    {/if}
 </a>

src/psaggregator/src/lib/components/TwitchEntry.svelte

@@ -0,0 +1,62 @@
+<script lang="ts">
+    import type { ScheduledContentPiece } from "@prisma/client";
+    import { Video, VideoPlayer } from "carbon-icons-svelte";
+    import moment from "moment";
+    import Sparkle from "./Sparkle.svelte";
+
+    export let entry: ScheduledContentPiece;
+</script>
+
+{#if entry.href}
+    <a class="card card-hover flex items-center p-4" href={entry.href} target="_blank">
+        <div class="mr-4 shrink-0">
+            {#if entry.type === "TwitchStream"}
+                <Video size={32} />
+            {:else}
+                <VideoPlayer size={32} />
+            {/if}
+        </div>
+        {#if entry.startDate}
+            {@const date = moment(entry.startDate)}
+            <div class="mr-4 shrink-0">
+                {#if !moment().isSame(date, "day")}
+                    <span class="font-bold">{date.format("DD. MMM,")}</span>
+                {/if}
+                <span class="font-bold">{date.format("HH:mm")}</span>
+            </div>
+        {/if}
+        <span class="overflow-x-hidden text-ellipsis whitespace-nowrap" title={entry.title}>{entry.title}</span>
+        {#if entry.importedFrom === "OpenAI"}
+            <div class="grow" />
+            <div class="shrink-0" title="Diese Ressource wurde von der OpenAI Vision AI importiert">
+                <Sparkle />
+            </div>
+        {/if}
+    </a>
+{:else}
+    <div class="card flex items-center p-4" title="Noch nicht veröffentlicht">
+        <div class="mr-4 shrink-0">
+            {#if entry.type === "TwitchStream"}
+                <Video size={32} />
+            {:else}
+                <VideoPlayer size={32} />
+            {/if}
+        </div>
+        {#if entry.startDate}
+            {@const date = moment(entry.startDate)}
+            <div class="mr-4 shrink-0">
+                {#if !moment().isSame(date, "day")}
+                    <span class="font-bold">{date.format("DD. MMM,")}</span>
+                {/if}
+                <span class="font-bold">{date.format("HH:mm")}</span>
+            </div>
+        {/if}
+        <span class="overflow-x-hidden text-ellipsis whitespace-nowrap" title={entry.title}>{entry.title}</span>
+        {#if entry.importedFrom === "OpenAI"}
+            <div class="grow" />
+            <div class="shrink-0" title="Diese Ressource wurde von der OpenAI Vision AI importiert">
+                <Sparkle />
+            </div>
+        {/if}
+    </div>
+{/if}