added youtube link to videos page

zaanposni · Aug 28, 2024 · 45367aa · 45367aa
1 parent 7e25a2a
commit 45367aa
Show file tree

Hide file tree

Showing 6 changed files with 69 additions and 16 deletions.
diff --git a/src/psaggregator/src/config/config.ts b/src/psaggregator/src/config/config.ts
@@ -11,6 +11,8 @@ export const GITHUB_AUTHOR_URL = "https://github.com/zaanposni";
 
 export const SHOW_ABSOLUTE_DATES = writable(false);
 export const VIDEO_COMPLEXE_VIEW = writable(false);
+export const LINK_YOUTUBE = writable(false);
 
 export const SHOW_ABSOLUTE_DATES_KEY = "showAbsoluteDates";
 export const VIDEO_COMPLEXE_VIEW_KEY = "videoComplexeView";
+export const LINK_YOUTUBE_KEY = "linkYoutube";
diff --git a/src/psaggregator/src/lib/components/PSVideo.svelte b/src/psaggregator/src/lib/components/PSVideo.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
     import { dateFormat } from "$lib/utils/dateFormat";
     import type { ContentPiece } from "@prisma/client";
-    import { SHOW_ABSOLUTE_DATES } from "../../config/config";
+    import { LINK_YOUTUBE, SHOW_ABSOLUTE_DATES } from "../../config/config";
 
     export let video: ContentPiece;
     export let isSquare = false;
@@ -32,7 +32,12 @@
     }
 </style>
 
-<a class="card flex h-full w-64 flex-col {classes}" href={video.href} target="_blank" title={video.title} class:aspect-square={isSquare}>
+<a
+    class="card flex h-full w-64 flex-col {classes}"
+    href={$LINK_YOUTUBE && video.secondaryHref ? video.secondaryHref : video.href}
+    target="_blank"
+    title={video.title}
+    class:aspect-square={isSquare}>
     <div class="block">
         <div class="relative aspect-video">
             <img class="h-full w-full object-cover" src={video.imageUri} alt={video.title} />

diff --git a/src/psaggregator/src/routes/+layout.svelte b/src/psaggregator/src/routes/+layout.svelte
@@ -5,6 +5,8 @@
     import Footer from "$lib/components/Footer.svelte";
     import MediaQuery from "$lib/utils/MediaQuery.svelte";
     import {
+        LINK_YOUTUBE,
+        LINK_YOUTUBE_KEY,
         MICROANALYTICS_ID,
         SHOW_ABSOLUTE_DATES,
         SHOW_ABSOLUTE_DATES_KEY,
@@ -44,6 +46,7 @@
         if (browser) {
             SHOW_ABSOLUTE_DATES.set(localStorage.getItem(SHOW_ABSOLUTE_DATES_KEY) === "true");
             VIDEO_COMPLEXE_VIEW.set(localStorage.getItem(VIDEO_COMPLEXE_VIEW_KEY) === "true");
+            LINK_YOUTUBE.set(localStorage.getItem(LINK_YOUTUBE_KEY) === "true");
         }
     });
 </script>

diff --git a/src/psaggregator/src/routes/settings/+page.svelte b/src/psaggregator/src/routes/settings/+page.svelte
@@ -1,6 +1,13 @@
 <script lang="ts">
     import { browser } from "$app/environment";
-    import { SHOW_ABSOLUTE_DATES, SHOW_ABSOLUTE_DATES_KEY, VIDEO_COMPLEXE_VIEW, VIDEO_COMPLEXE_VIEW_KEY } from "../../config/config";
+    import {
+        SHOW_ABSOLUTE_DATES,
+        SHOW_ABSOLUTE_DATES_KEY,
+        VIDEO_COMPLEXE_VIEW,
+        VIDEO_COMPLEXE_VIEW_KEY,
+        LINK_YOUTUBE,
+        LINK_YOUTUBE_KEY
+    } from "../../config/config";
 </script>
 
 <style lang="postcss">
@@ -47,5 +54,24 @@
             </label>
             <div>Zeige Videos in einer komplexen Ansicht an, die mehr Informationen enthält (betrifft Videos-Unterseite)</div>
         </div>
+        <div>
+            <label class="flex items-center space-x-2">
+                <input
+                    class="checkbox"
+                    type="checkbox"
+                    checked={$LINK_YOUTUBE}
+                    on:change={() => {
+                        LINK_YOUTUBE.set(!$LINK_YOUTUBE);
+                        if (browser) {
+                            localStorage.setItem(LINK_YOUTUBE_KEY, $LINK_YOUTUBE.toString());
+                        }
+                    }} />
+                <p>Verlinkung zu YouTube</p>
+            </label>
+            <div>
+                Soweit verfügbar, sind Videos mit einem Link zu YouTube versehen. Wenn diese Option deaktiviert ist, wird stattdessen auf
+                pietsmiet.de verlinkt.
+            </div>
+        </div>
     </div>
 </div>
diff --git a/src/psaggregator/src/routes/videos/+page.server.ts b/src/psaggregator/src/routes/videos/+page.server.ts
@@ -6,9 +6,10 @@ export async function load() {
             id: true,
             title: true,
             href: true,
+            secondaryHref: true,
             imageUri: true,
             startDate: true,
-            duration: true,
+            duration: true
         },
         where: {
             type: {

diff --git a/src/psaggregator/src/routes/videos/+page.svelte b/src/psaggregator/src/routes/videos/+page.svelte
@@ -6,7 +6,7 @@
     import { ProgressRadial, SlideToggle } from "@skeletonlabs/skeleton";
     import PsVideo from "$lib/components/PSVideo.svelte";
     import MediaQuery from "$lib/utils/MediaQuery.svelte";
-    import { VIDEO_COMPLEXE_VIEW, VIDEO_COMPLEXE_VIEW_KEY } from "../../config/config";
+    import { LINK_YOUTUBE, LINK_YOUTUBE_KEY, VIDEO_COMPLEXE_VIEW, VIDEO_COMPLEXE_VIEW_KEY } from "../../config/config";
 
     export let data: PageData;
 
@@ -79,16 +79,29 @@
     <div class="p-4 md:p-8">
         <div class="mb-4 flex w-full flex-col justify-between gap-y-4 md:mb-8 md:flex-row md:items-center">
             <h1 class="text-3xl font-bold">Alle Videos</h1>
-            <div class="mr-4 flex items-center gap-x-1 md:gap-x-4">
-                <span>Komplexe Ansicht</span>
-                <SlideToggle
-                    name="slide"
-                    bind:checked={$VIDEO_COMPLEXE_VIEW}
-                    on:click={(e) => {
-                        if (browser) {
-                            localStorage.setItem(VIDEO_COMPLEXE_VIEW_KEY, e.target.checked.toString());
-                        }
-                    }} />
+            <div class="flex flex-col gap-1 md:flex-row md:gap-x-4">
+                <div class="mr-4 flex items-center gap-x-1 md:gap-x-2">
+                    <SlideToggle
+                        name="slide"
+                        bind:checked={$VIDEO_COMPLEXE_VIEW}
+                        on:click={(e) => {
+                            if (browser) {
+                                localStorage.setItem(VIDEO_COMPLEXE_VIEW_KEY, e.target.checked.toString());
+                            }
+                        }} />
+                    <span>Komplexe Ansicht</span>
+                </div>
+                <div class="mr-4 flex items-center gap-x-1 md:gap-x-2">
+                    <SlideToggle
+                        name="slide"
+                        bind:checked={$LINK_YOUTUBE}
+                        on:click={(e) => {
+                            if (browser) {
+                                localStorage.setItem(LINK_YOUTUBE_KEY, e.target.checked.toString());
+                            }
+                        }} />
+                    <span>YouTube-Verlinkung</span>
+                </div>
             </div>
         </div>
         <section class="grid grid-cols-2 gap-4 md:grid-cols-3 xl:grid-cols-5 {!matches && $VIDEO_COMPLEXE_VIEW ? '!grid-cols-1' : ''}">
@@ -104,7 +117,10 @@
                 {#if $VIDEO_COMPLEXE_VIEW}
                     <PsVideo {video} class="w-full {matches || $VIDEO_COMPLEXE_VIEW ? '' : '!text-sm'}" />
                 {:else}
-                    <a href={video.href} target="_blank" class="overflow-hidden">
+                    <a
+                        href={$LINK_YOUTUBE && video.secondaryHref ? video.secondaryHref : video.href}
+                        target="_blank"
+                        class="overflow-hidden">
                         <img
                             class="h-auto max-w-full transform rounded-lg transition-transform duration-500 hover:scale-110"
                             src={video.imageUri}