Skip to content

Commit

Permalink
Merge pull request #28 from zaanposni/release/1.4.0
Browse files Browse the repository at this point in the history
release/1.4.0
  • Loading branch information
zaanposni authored Jan 27, 2024
2 parents b5198df + ec366f8 commit c771663
Show file tree
Hide file tree
Showing 18 changed files with 528 additions and 121 deletions.
4 changes: 2 additions & 2 deletions src/psaggregator/package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion src/psaggregator/package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "psaggregator",
"version": "1.3.0",
"version": "1.4.0",
"scripts": {
"dev": "vite dev",
"build": "vite build",
Expand Down
3 changes: 3 additions & 0 deletions src/psaggregator/src/config/config.ts
Original file line number Diff line number Diff line change
@@ -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;
Expand All @@ -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);
74 changes: 49 additions & 25 deletions src/psaggregator/src/lib/components/BigHeader.svelte
Original file line number Diff line number Diff line change
@@ -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 />
Expand Down
52 changes: 52 additions & 0 deletions src/psaggregator/src/lib/components/Changelog.svelte
Original file line number Diff line number Diff line change
@@ -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>
28 changes: 19 additions & 9 deletions src/psaggregator/src/lib/components/Footer.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand All @@ -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
Expand All @@ -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">
Expand All @@ -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 />
Expand All @@ -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}
Expand Down
5 changes: 3 additions & 2 deletions src/psaggregator/src/lib/components/InstagramPost.svelte
Original file line number Diff line number Diff line change
@@ -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[] };
Expand All @@ -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>
Expand Down
33 changes: 20 additions & 13 deletions src/psaggregator/src/lib/components/PSVideo.svelte
Original file line number Diff line number Diff line change
@@ -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;
Expand All @@ -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>
62 changes: 62 additions & 0 deletions src/psaggregator/src/lib/components/TwitchEntry.svelte
Original file line number Diff line number Diff line change
@@ -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}
Loading

0 comments on commit c771663

Please sign in to comment.