Merge pull request #39 from audacity/additional-video-slot

Additional video slot

Author: DilsonsPickles

src/assets/img/mbc_polyspectral-placeholder.webp

@@ -0,0 +1,46 @@
+---
+import ReleaseVideoPlaceholder from "../../assets/img/audacity-placeholder.webp";
+import MbcpolyspectralPlaceholder from "../../assets/img/mbc_polyspectral-placeholder.webp";
+import FeaturedVideo from "../video/FeaturedVideo";
+
+const releaseVideo = {
+  title:"Our latest release",
+  label:"Master channel, new realtime effects & more!",
+  placeholderImage: ReleaseVideoPlaceholder,
+  videoURL:"https://www.youtube-nocookie.com/embed/f5TXPUOFH6A?autoplay=1"
+}
+
+const promoVideo = {
+  title:"Multiband Compressor",
+  label:"Low-latency, transparent multiband compressor for real-time tracking and live mixing.",
+  placeholderImage: MbcpolyspectralPlaceholder,
+  videoURL:"https://www.youtube-nocookie.com/embed/Lb7jx4wdXXE?autoplay=1",
+  CTA: true, 
+  ctaText: "Get 80% off",
+  ctaURL:"https://www.musehub.com/plugin/polyspectral-mbc?utm_source=au-web&utm_medium=mh-cta&utm_campaign=polyspectral"
+}
+---
+
+<section class="bg-gray-900">
+  <div
+    class="grid md:grid-cols-2 max-w-screen-2xl px-6 sm:px-12 mx-auto py-8 gap-8"
+  >
+    <FeaturedVideo
+      client:load
+      title={releaseVideo.title}
+      label={releaseVideo.label}
+      placeholderImage={releaseVideo.placeholderImage}
+      videoURL={releaseVideo.videoURL}
+    />
+    <FeaturedVideo
+      client:load
+      title={promoVideo.title}
+      label={promoVideo.label}
+      placeholderImage={promoVideo.placeholderImage}
+      videoURL={promoVideo.videoURL}
+      CTA={promoVideo.CTA}
+      ctaText={promoVideo.ctaText}
+      ctaURL={promoVideo.ctaURL}
+    />
+  </div>
+</section>

src/assets/img/waves-denoiz-plugin.webp

@@ -0,0 +1,55 @@
+import React, { useState } from "react";
+
+function FeaturedVideo(props) {
+  const [isClicked, setIsClicked] = useState(false);
+
+  const { placeholderImage, videoURL, label, title, CTA, ctaText, ctaURL = "" } = props;
+
+  function handleVideoClick() {
+    setIsClicked(true);
+    if (typeof _paq !== "undefined") {
+      _paq.push([
+        "trackEvent",
+        "Video embed",
+        "Watch release video",
+        "Audacity release video",
+      ]);
+    }
+  }
+
+  return (
+    <div className="flex flex-col gap-2 lg:gap-4 ">
+      <div className="flex flex-col xs:flex-row xs:justify-between md:h-10">
+        <h3 className="text-white content-center">{title}</h3>
+        {CTA && (
+          <a className="py-3 px-2 rounded-md justify-center bg-yellow-300 hover:bg-yellow-400 active:bg-yellow-500 w-fit" href={ctaURL}>
+            <p className="leading-none font-semibold">{ctaText}</p>
+          </a>
+        )}
+      </div>
+
+      {isClicked ? (
+        <iframe
+          className="w-full aspect-video rounded-md shadow-xl"
+          loading="lazy"
+          src={videoURL}
+          title="Audacity 3.2 - Real-Time Effects and Free Cloud Sharing"
+          allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+          allowFullScreen
+        ></iframe>
+      ) : (
+        <img
+          tabIndex="0"
+          src={placeholderImage.src}
+          alt="YouTube thumbnail"
+          className="w-full aspect-video rounded-md shadow-xl cursor-pointer"
+          onClick={() => handleVideoClick()}
+          onKeyDown={(e) => e.key === "Enter" && handleVideoClick()}
+        />
+      )}
+      <p className="text-white">{label}</p>
+    </div>
+  );
+}
+
+export default FeaturedVideo;

src/components/homepage/ReleaseVideo.astro

@@ -1,7 +1,7 @@
 ---
 import BlogPosts from "../components/homepage/BlogPosts.astro";
 import HeroBanner from "../components/homepage/HeroBanner.astro";
-import ReleaseVideo from "../components/homepage/ReleaseVideo";
+import ReleaseVideo from "../components/homepage/ReleaseVideo.astro";
 import BaseLayout from "../layouts/BaseLayout.astro";
 import ShareYourSounds from "../components/homepage/ShareYourSounds";
 import FeatureCards from "../components/homepage/FeatureCards.astro";
@@ -12,7 +12,7 @@ import RecordAnything from "../components/homepage/RecordAnything.astro";
 
 <BaseLayout title="Audacity ® | Free Audio editor, recorder, music making and more!">
   <HeroBanner />
-  <ReleaseVideo client:load/>
+  <ReleaseVideo />
   <RecordAnything />
   <ShareYourSounds client:load/>
   <FeatureCards />

src/components/homepage/ReleaseVideo.jsx

@@ -13,7 +13,7 @@
 
 
     h3 {
-        @apply text-lg md:text-2xl text-gray-700 font-semibold
+        @apply text-lg md:text-lg lg:text-2xl text-gray-700 font-semibold
     }
 
     h4 {

src/components/video/FeaturedVideo.jsx

@@ -4,7 +4,8 @@ module.exports = {
   theme: {
     extend: {},
     screens: {
-      xs: "320px",
+      xxs: "320px",
+      xs: "480px",
       sm: "640px",
       md: "768px",
       lg: "1024px",