Attempt to fix projector view

Author: kurisu-dotto-komu

src/components/Event/EventImageBig.tsx

@@ -1,28 +1,22 @@
 import type { EventEnriched } from "@/content";
 
 import EventCardCountdown from "../EventCard/EventCardCountdown";
-import EventProjectorButton from "./EventProjectorButton";
 
 export default function EventImageBig({ event }: { event: EventEnriched }) {
   return (
-    <div className="group relative">
-      <div className="absolute top-3 right-3 z-10">
-        <EventProjectorButton event={event} />
+    <figure className="glass-card relative aspect-video w-full overflow-hidden">
+      <div className="absolute top-3 left-3">
+        <EventCardCountdown event={event} />
       </div>
-      <figure className="glass-card relative aspect-video w-full overflow-hidden">
-        <div className="absolute top-3 left-3">
-          <EventCardCountdown event={event} />
-        </div>
-        <img
-          src={event.data.cover.src}
-          srcSet={event.data.cover.srcSet}
-          sizes={event.data.cover.sizes}
-          alt={event.data.title}
-          loading="eager"
-          fetchPriority="high"
-          className="h-full w-full object-cover"
-        />
-      </figure>
-    </div>
+      <img
+        src={event.data.cover.src}
+        srcSet={event.data.cover.srcSet}
+        sizes={event.data.cover.sizes}
+        alt={event.data.title}
+        loading="eager"
+        fetchPriority="high"
+        className="h-full w-full object-cover"
+      />
+    </figure>
   );
 }

src/components/Event/EventProjectorButton.tsx

@@ -5,6 +5,7 @@ import { LuProjector } from "react-icons/lu";
 import TooltipButton from "@/components/Common/TooltipButton";
 import type { EventEnriched } from "@/content";
 
+import Button from "../Common/Button";
 import EventProjectorOverlay from "./EventProjectorOverlay";
 
 interface EventProjectorButtonProps {
@@ -18,11 +19,10 @@ export default function EventProjectorButton({ event }: EventProjectorButtonProp
     <>
       <TooltipButton
         onClick={() => setIsOpen(true)}
-        className="rounded-field cursor-pointer bg-black/30 p-2 text-white/80 opacity-0 transition-opacity group-hover:opacity-100 hover:bg-black/50 hover:text-white/100"
+        className="btn"
         aria-label="Open projector view"
         tooltip="Projector view"
         tooltipPosition="top"
-        data-testid="projector-view-button"
       >
         <LuProjector className="h-5 w-5" />
       </TooltipButton>

src/components/Event/EventProjectorOverlay.tsx

@@ -81,7 +81,7 @@ export default function EventProjectorOverlay({
           {/* Top: Title and Description */}
           <div className="flex flex-col" style={{ gap: "2vw" }}>
             <h1
-              className="text-base-content line-clamp-3 leading-tight font-bold"
+              className="text-base-content line-clamp-4 leading-tight font-bold"
               style={{ fontSize: "4.5vw" }}
               data-testid="projector-title"
             >

src/components/OG/OGVenue.tsx

@@ -19,8 +19,8 @@ interface OGVenueProps {
 }
 
 export default function OGVenue({ venue }: OGVenueProps) {
-  const locationParts = [venue.data.city, venue.data.country].filter(Boolean);
-  const location = locationParts.join(", ");
+  // const locationParts = [venue.data.city, venue.data.country].filter(Boolean);
+  // const location = locationParts.join(", ");
 
   return <OGLayout>TODO</OGLayout>;
 }

src/pages/events/[eventSlug].astro

@@ -7,6 +7,8 @@ import MarkdownContent from "@/components/Common/MarkdownContent.astro";
 import EventImageBig from "@/components/Event/EventImageBig";
 import LocationCardEvent from "@/components/LocationCard/LocationCardEvent";
 import EventTags from "@/components/Event/EventTags";
+import EventProjectorButton from "@/components/Event/EventProjectorButton";
+import Container from "@/components/Common/Container";
 
 export async function getStaticPaths() {
   const events = await getEvents();
@@ -33,9 +35,14 @@ const event = await getEvent(eventSlug);
     <div class="flex flex-col gap-6 lg:hidden">
       <LocationCardEvent event={event} horizontal client:load />
     </div>
-    <h1 class="mt-12 mb-6 text-4xl">
-      {event.data.title}
-    </h1>
+    <div class="group mt-12 mb-6 text-4xl">
+      <h1 class="inline">
+        {event.data.title}
+      </h1>
+      <div class="inline-block opacity-0 transition-opacity duration-300 group-hover:opacity-100">
+        <EventProjectorButton event={event} client:visible />
+      </div>
+    </div>
     <EventTags tags={event.data.topics} />
     <MarkdownContent markdown={`events/${eventSlug}/event.md`} />
   </Fragment>