feat: play trailer video in WelcomeModal

src/components/WelcomeModal.tsx

@@ -8,6 +8,8 @@ import {
   JSX,
   useContext,
   splitProps,
+  createSignal,
+  Show,
 } from "solid-js";
 import LufraiLogo from "~icons/custom/lufrai-logo";
 import AppIcon from "~icons/custom/icon";
@@ -22,6 +24,8 @@ import PrivacyIcon from "~icons/noto/princess";
 import AgileIcon from "~icons/noto/person-bouncing-ball";
 import ResultIcon from "~icons/noto/chequered-flag";
 import HugIcon from "~icons/noto/hugging-face";
+import VideoIcon from "~icons/carbon/video-filled";
+import CloseIcon from "~icons/carbon/close-outline";
 import Modal, { ModalCloseButton } from "./Modal";
 import { LocalStoreContext } from "~/stores";
 import createAccordion from "./Accordion";
@@ -63,6 +67,7 @@ const WelcomeModal: Component = (props) => {
   const isOpen = createMemo(() => {
     return localStateMounted() && localState.showWelcome;
   });
+  const [showTrailer, setShowTrailer] = createSignal(false);
 
   onMount(function () {
     let adjectives = [
@@ -198,7 +203,37 @@ const WelcomeModal: Component = (props) => {
               </div>
             </div>
 
-            <div class="mt-24 text-base grid grid-cols-3 lg:grid-cols-4 text-center gap-y-3 md:gap-y-5 gap-x-2 lg:gap-x-8 items-center justify-center">
+            <Show when={showTrailer()}>
+              {() => (
+                <div class="absolute top-0 left-0 h-full w-full flex flex-col justify-center items-center gap-8 bg-black backdrop-blur bg-opacity-90 [@supports(backdrop-filter:blur(0))]:bg-opacity-70 z-10">
+                  <video
+                    controls
+                    autoplay
+                    onended={() => setShowTrailer(false)}
+                  >
+                    <source src="/RaeppliTrailer.mp4" type="video/mp4" />
+                  </video>
+                  <button
+                    class="btn btn-accent btn-xl gap-2"
+                    onClick={() => setShowTrailer(false)}
+                  >
+                    <CloseIcon />
+                    Schliessen
+                  </button>
+                </div>
+              )}
+            </Show>
+
+            <div class="mt-24 text-base grid grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 text-center gap-y-3 md:gap-y-5 gap-x-2 lg:gap-x-8 items-center justify-center">
+              <button
+                class="shadow-md btn btn-secondary hover:ring-2 ring-offset-2 ring-secondary bg-pink-600 hover gap-2 whitespace-normal flex-nowrap"
+                onClick={() => setShowTrailer(true)}
+              >
+                <VideoIcon />
+                <span>
+                  Trailer <span class="hidden xl:inline">anschauen</span>
+                </span>
+              </button>
               <a
                 class="link text-secondary-focus hover:text-secondary"
                 href="#welcome-quickstart"
@@ -955,8 +990,12 @@ const WelcomeModal: Component = (props) => {
           Loslegen
         </button>
         <div
-          style={{ animation: "bounce 1.5s infinite;" }}
-          class="animate-bounce w-full text-sm font-bold lg:hidden bg-red-300 ring-2 ring-offset-2 ring-error text-error-content rounded p-3 shadow-2xl flex items-center justify-center gap-3"
+          style={{ animation: !showTrailer() ? "bounce 1.5s infinite;" : "" }}
+          classList={{
+            "w-full text-sm font-bold lg:hidden bg-red-300 ring-2 ring-offset-2 ring-error text-error-content rounded p-3 shadow-2xl flex items-center justify-center gap-3":
+              true,
+            "animate-bounce": !showTrailer(),
+          }}
         >
           <WarningIcon /> Bitte verwende einen Laptop oder Computer mit einer
           Mindestbreite von 1024 Pixel!