From cae0826a84158bd247665b621c300aa793dee196 Mon Sep 17 00:00:00 2001
From: AnnikenYT <anniken@bergflix.de>
Date: Fri, 28 Jun 2024 16:55:35 +0200
Subject: [PATCH] =?UTF-8?q?feat:=20rotk=C3=A4ppchen?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

(very very ugly impl., gonna fix later probably)
---
 bun.lockb                           | Bin 299205 -> 299613 bytes
 src/stories/molecules/Info/Info.vue |   9 ++++++++-
 src/stories/organisms/Hero/Hero.vue |  22 +++++++++++++++++++---
 3 files changed, 27 insertions(+), 4 deletions(-)

diff --git a/bun.lockb b/bun.lockb
index 8a978c470f525f593fd4a15d389a73e4ba057846..268b649becca6f9f1f64f9b0ba6df33d4fb37fdd 100755
GIT binary patch
delta 5504
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
XNtY~f7aiAGJ7;R)%=D(I=%FV7+J6hS

delta 5397
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
Z(`(c1)8|ditlUmKe$)JgJEm{G>jCi<?>+zk

diff --git a/src/stories/molecules/Info/Info.vue b/src/stories/molecules/Info/Info.vue
index 677c144..30c54b5 100644
--- a/src/stories/molecules/Info/Info.vue
+++ b/src/stories/molecules/Info/Info.vue
@@ -9,7 +9,7 @@
       class='overflow-hidden text-clean-dark-200 text-ellipsis md:whitespace-normal'
       v-html="description" />
     <div class='flex space-x-2'>
-      <Button v-for='button in buttons' v-bind='button' :key='button.text' @click='()=> $router.push(button.to)'>{{ button.text }}</Button>
+      <Button v-for='button in buttons' v-bind='button' :key='button.text' @click='()=> isExternalLink(button.to) ? openExternalLink(button.to) :  $router.push(button.to) '>{{ button.text }}</Button>
     </div>
   </div>
 </template>
@@ -35,7 +35,14 @@ defineProps<{
   }[];
 }>();
 
+// write a function that checks if a given link is an external link
+const isExternalLink = (link: string) => {
+  return link.startsWith('http');
+};
 
+const openExternalLink = (link: string) => {
+  window.open(link, '_blank');
+};
 </script>
 
 <style>
diff --git a/src/stories/organisms/Hero/Hero.vue b/src/stories/organisms/Hero/Hero.vue
index 0802541..4d1d7da 100644
--- a/src/stories/organisms/Hero/Hero.vue
+++ b/src/stories/organisms/Hero/Hero.vue
@@ -3,10 +3,11 @@
     v-if="featured && !isInvisible"
     ref="hero"
     class="fixed flex w-full h-[90vh] min-h-[95vh] mb-20 bg-center bg-no-repeat bg-cover bg-clean-dark-500 top-0 left-0"
-:style="{ backgroundImage: `url('${api(featured?.background_image?.data?.attributes?.url)}')`, opacity: opacity / 100, filter: `blur(${5 - opacity / 20}px)` }">
+:style="{ backgroundImage: `url('https://epg-image.zdf.de/fotobase-webdelivery/images/58d19dab-d2e0-4309-8c50-359715709ac2?layout=1280x720')`, opacity: opacity / 100, filter: `blur(${5 - opacity / 20}px)` }">
+<!-- ${api(featured?.background_image?.data?.attributes?.url)} -->
         <div id="gradient" class="absolute top-0 left-0 w-full h-full gradient"></div>
         <div class="z-10 flex flex-col justify-center w-full h-full p-10 lg:w-1/2">
-            <Info
+            <!-- <Info
             :title="featured?.title!"
             :title_image="featured?.title_image?.data?.attributes?.url"
             :year="new Date(featured?.year).getFullYear()"
@@ -19,7 +20,22 @@
                 to: '/watch/' + item.data?.attributes?.video?.data?.id,
                 icon: PlayIcon
             }]"
+            class="max-w-md" /> -->
+            <!-- Quick and dirty, hardcode Rotkäppchen -->
+             <Info
+            title="Rotkäppchen"
+            year="2024"
+            age="12"
+            episodes="1"
+            genre="Fantasy"
+            description="Danny kann es nicht glauben, das Rotkäppchen wird vom Wolf gefressen? Mit einer selbstgebauten Zeitmaschine reist er in den Märchenwald, um Rotkäppchen zu beschützen."
+            :buttons="[{
+                text: 'Auf ZDF ansehen',
+                to: 'https://www.zdf.de/filme/spielfilme/herr-bergmanns-rotkaeppchen-100.html',
+                icon: Film
+            }]"
             class="max-w-md" />
+
         </div>
     </section>
 </template>
@@ -29,7 +45,7 @@ import { computed, onMounted, onUnmounted, ref } from 'vue';
 import { useStrapi } from '@/main';
 import { FeaturedEntity } from '@/models/types';
 import Info from '../../molecules/Info/Info.vue';
-import { PlayIcon } from '@heroicons/vue/outline';
+import { PlayIcon, FilmIcon } from '@heroicons/vue/outline';
 import { api } from '@/util/paths';