Refactor: Unify video promos with banner promo system

- Add 'type' field to PromoData (banner | video)
- Add video-specific properties (placeholderImage, imageAltText, videoURL)
- Add getFilteredPromos() and getTopPromos() helper functions
- Migrate hardcoded videos to promo entries in promotions.ts
- Update ReleaseVideo.astro to consume video promos dynamically

Author: teetow

src/assets/data/promotions.ts

@@ -1,4 +1,7 @@
+export type PromoType = "banner" | "video";
+
 export type PromoData = {
+  type?: PromoType;
   isActive?: boolean;
   priority?: number;
   osTargets?: string[];
@@ -18,10 +21,61 @@ export type PromoData = {
     text: string;
     link: string;
   };
+  // Video-specific properties
+  video?: {
+    placeholderImage: string;
+    imageAltText: string;
+    videoURL: string;
+  };
+};
+
+export type FilterOptions = {
+  type?: PromoType;
+  os?: string | null;
+  path?: string | null;
+};
+
+/** Get all promos matching the filter criteria, sorted by priority (highest first) */
+export const getFilteredPromos = (
+  promos: PromoData[],
+  options: FilterOptions = {}
+): PromoData[] => {
+  const { type, os, path } = options;
+
+  return promos
+    .filter((promo) => {
+      // Check if active
+      if (promo.isActive === false) return false;
+
+      // Check type match
+      if (type && promo.type !== type) return false;
+
+      // Check path suppression
+      if (path && promo.suppressOnPaths?.includes(path)) return false;
+
+      // Check OS targeting
+      if (promo.osTargets && promo.osTargets.length > 0) {
+        if (!os || !promo.osTargets.includes(os)) return false;
+      }
+
+      return true;
+    })
+    .sort((a, b) => (b.priority ?? 0) - (a.priority ?? 0));
+};
+
+/** Get the top N promos matching the filter criteria */
+export const getTopPromos = (
+  promos: PromoData[],
+  count: number,
+  options: FilterOptions = {}
+): PromoData[] => {
+  return getFilteredPromos(promos, options).slice(0, count);
 };
 
 const promoData: Record<string, PromoData> = {
+  // === BANNER PROMOS ===
   audacity4Alpha: {
+    type: "banner",
     isActive: false,
     priority: 50,
     suppressOnPaths: ["/next", "/download"],
@@ -42,6 +96,7 @@ const promoData: Record<string, PromoData> = {
     },
   },
   voiceByAuribus: {
+    type: "banner",
     isActive: false,
     priority: 50,
     osTargets: ["Windows", "OS X"],
@@ -63,6 +118,7 @@ const promoData: Record<string, PromoData> = {
     },
   },
   soapVoiceCleaner: {
+    type: "banner",
     isActive: true,
     priority: 50,
     osTargets: ["Windows", "OS X"],
@@ -85,6 +141,7 @@ const promoData: Record<string, PromoData> = {
     },
   },
   ampknob: {
+    type: "banner",
     isActive: false,
     osTargets: ["Windows", "OS X"],
     message: "Heavy guitar tone in seconds. One knob, no distractions.",
@@ -105,6 +162,7 @@ const promoData: Record<string, PromoData> = {
     },
   },
   survey: {
+    type: "banner",
     isActive: false,
     message: "3 minute survey:\nHelp us understand what features you want next",
     styles: {
@@ -123,6 +181,44 @@ const promoData: Record<string, PromoData> = {
       link: "https://docs.google.com/forms/d/e/1FAIpQLScxH_f64JPCWt5nwqa8MTPXfmi453mqYwy1xZFPF_mx9mYkNw/viewform",
     },
   },
+
+  // === VIDEO PROMOS ===
+  audacity4Video: {
+    type: "video",
+    isActive: true,
+    priority: 100,
+    message: "How we're building Audacity 4",
+    tracking: {
+      category: "Video embed",
+      action: "Watch release video",
+      name: "How we're building Audacity 4",
+    },
+    video: {
+      placeholderImage: "https://i.ytimg.com/vi/QYM3TWf_G38/maxresdefault.jpg",
+      imageAltText: "Video thumbnail: How we're building Audacity 4",
+      videoURL: "https://www.youtube-nocookie.com/embed/QYM3TWf_G38?autoplay=1",
+    },
+  },
+  playgrndFxVideo: {
+    type: "video",
+    isActive: true,
+    priority: 90,
+    message: "Install once. Access tons of powerful plugins. Blend for infinite creativity.",
+    cta: {
+      text: "Get it on MuseHub",
+      link: "https://www.musehub.com/plugin/playgrnd-fx?utm_source=au-web&utm_medium=mh-web-cta&utm_campaign=au-web-mh-web-playgrnd-fx",
+    },
+    tracking: {
+      category: "Video embed",
+      action: "Watch release video",
+      name: "PLAYGRND FX",
+    },
+    video: {
+      placeholderImage: "https://i.ytimg.com/vi/UGiJCTu67Ak/maxresdefault.jpg",
+      imageAltText: "Video thumbnail: PLAYGRND FX",
+      videoURL: "https://www.youtube-nocookie.com/embed/UGiJCTu67Ak?autoplay=1",
+    },
+  },
 };
 
 export default promoData;

src/components/homepage/ReleaseVideo.astro

@@ -1,57 +1,29 @@
 ---
-import { getImage } from "astro:assets";
 import FeaturedVideo from "../video/FeaturedVideo";
+import promoData, { getTopPromos } from "../../assets/data/promotions";
 
-const releaseVideo = {
-  title:"How we're building Audacity 4",
-  label:"A sneak peek at our development process and new features.",
-  placeholderImage: "https://i.ytimg.com/vi/QYM3TWf_G38/maxresdefault.jpg",
-  imageAltText: "Video thumbnail: How we're building Audacity 4",
-  videoURL:"https://www.youtube-nocookie.com/embed/QYM3TWf_G38?autoplay=1",
-}
-
-const promoVideo = {
-  CTA: true, 
-  ctaText: "Get it on MuseHub",
-  ctaURL:"https://www.musehub.com/plugin/playgrnd-fx?utm_source=au-web&utm_medium=mh-web-cta&utm_campaign=au-web-mh-web-playgrnd-fx",
-  imageAltText: "Video thumbnail",
-  label:"Install once. Access tons of powerful plugins. Blend for infinite creativity.",
-  placeholderImage: "https://i.ytimg.com/vi/UGiJCTu67Ak/maxresdefault.jpg",
-  title:"PLAYGRND FX",
-  videoURL:"https://www.youtube-nocookie.com/embed/UGiJCTu67Ak?autoplay=1",
-}
+// Get top 2 active video promos, sorted by priority
+const videoPromos = getTopPromos(Object.values(promoData), 2, { type: "video" });
 ---
 <section class="bg-slate-100">
   <div class="mx-auto px-6 xs:px-12 md:px-8 py-6 md:py-8 lg:py-12 max-w-screen-lg">
     <div class="flex flex-col md:flex-row gap-12 md:gap-16">
-      <!-- First Video Column -->
-      <div class="w-full md:w-1/2">
-        <FeaturedVideo
-          client:load
-          title={releaseVideo.title}
-          label={releaseVideo.label}
-          placeholderImage={releaseVideo.placeholderImage}
-          imageAltText={releaseVideo.imageAltText}
-          videoURL={releaseVideo.videoURL}
-          matomoEventName={releaseVideo.title}
-        />
-      </div>
-      
-      <!-- Second Video Column -->
-      <div class="w-full md:w-1/2">
-        <FeaturedVideo
-          client:load
-          title={promoVideo.title}
-          label={promoVideo.label}
-          placeholderImage={promoVideo.placeholderImage}
-          imageAltText={promoVideo.imageAltText}
-          videoURL={promoVideo.videoURL}
-          CTA={promoVideo.CTA}
-          ctaText={promoVideo.ctaText}
-          ctaURL={promoVideo.ctaURL}
-          matomoEventName={promoVideo.title}
-        />
-      </div>
+      {videoPromos.map((promo) => (
+        <div class="w-full md:w-1/2">
+          <FeaturedVideo
+            client:load
+            title={promo.tracking?.name ?? promo.message}
+            label={promo.message}
+            placeholderImage={promo.video?.placeholderImage ?? ""}
+            imageAltText={promo.video?.imageAltText ?? ""}
+            videoURL={promo.video?.videoURL ?? ""}
+            CTA={Boolean(promo.cta)}
+            ctaText={promo.cta?.text}
+            ctaURL={promo.cta?.link}
+            matomoEventName={promo.tracking?.name ?? promo.message}
+          />
+        </div>
+      ))}
     </div>
   </div>
 </section>