feat: rotkäppchen

(very very ugly impl., gonna fix later probably)
Bergflix-Remake · Jun 28, 2024 · cae0826 · cae0826
1 parent 4068f51
commit cae0826
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 4 deletions.
diff --git a/bun.lockb b/bun.lockb
diff --git 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
@@ -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';