Skip to content

Commit 2c2e2fc

Browse files
DilsonsPicklesDilsonsPickles
committed
Undo optimisation
1 parent 0f1e72e commit 2c2e2fc

File tree

2 files changed

+47
-194
lines changed

2 files changed

+47
-194
lines changed

‎src/components/homepage/ReleaseVideo.astro‎

Lines changed: 17 additions & 101 deletions
Original file line numberDiff line numberDiff line change
@@ -4,119 +4,37 @@ import ReleaseVideoPlaceholder from "../../assets/img/audacity-placeholder.webp"
44
import PromoVideoPlaceholder from "../../assets/img/promo/ace-placeholder.webp";
55
import FeaturedVideo from "../video/FeaturedVideo";
66
7-
// Generate WebP format thumbnails
87
const releaseVideoPlaceholderImage = await getImage({
98
src: ReleaseVideoPlaceholder,
109
format: 'webp',
11-
width: 732,
12-
height: 412, // 16:9 aspect ratio
13-
quality: 75,
14-
});
15-
16-
const releaseVideoPlaceholderImageMobile = await getImage({
17-
src: ReleaseVideoPlaceholder,
18-
format: 'webp',
19-
width: 400,
20-
height: 225, // Maintaining the same aspect ratio
21-
quality: 75,
10+
width: 624,
11+
quality: 80,
2212
});
2313
2414
const featuredVideoPlaceholderImage = await getImage({
2515
src: PromoVideoPlaceholder,
2616
format: 'webp',
27-
width: 732,
28-
height: 412,
29-
quality: 75,
30-
});
31-
32-
const featuredVideoPlaceholderImageMobile = await getImage({
33-
src: PromoVideoPlaceholder,
34-
format: 'webp',
35-
width: 400,
36-
height: 225,
37-
quality: 75,
38-
});
39-
40-
// Generate AVIF format thumbnails (superior compression)
41-
const releaseVideoPlaceholderImageAvif = await getImage({
42-
src: ReleaseVideoPlaceholder,
43-
format: 'avif',
44-
width: 732,
45-
height: 412,
46-
quality: 70,
47-
});
48-
49-
const releaseVideoPlaceholderImageMobileAvif = await getImage({
50-
src: ReleaseVideoPlaceholder,
51-
format: 'avif',
52-
width: 400,
53-
height: 225,
54-
quality: 70,
55-
});
56-
57-
const featuredVideoPlaceholderImageAvif = await getImage({
58-
src: PromoVideoPlaceholder,
59-
format: 'avif',
60-
width: 732,
61-
height: 412,
62-
quality: 70,
63-
});
64-
65-
const featuredVideoPlaceholderImageMobileAvif = await getImage({
66-
src: PromoVideoPlaceholder,
67-
format: 'avif',
68-
width: 400,
69-
height: 225,
70-
quality: 70,
17+
width: 624,
18+
quality: 80,
7119
});
7220
7321
const releaseVideo = {
74-
title: "Our latest release",
75-
label: "Master channel, new realtime effects & more!",
76-
placeholderImages: {
77-
webp: {
78-
default: releaseVideoPlaceholderImage.src,
79-
mobile: releaseVideoPlaceholderImageMobile.src,
80-
},
81-
avif: {
82-
default: releaseVideoPlaceholderImageAvif.src,
83-
mobile: releaseVideoPlaceholderImageMobileAvif.src,
84-
}
85-
},
86-
imageAltText: "Video thumbnail: Audacity 3.6 - New effects",
87-
videoURL: "https://www.youtube-nocookie.com/embed/f5TXPUOFH6A?autoplay=1",
88-
dimensions: {
89-
width: 732,
90-
height: 412,
91-
mobileWidth: 400,
92-
mobileHeight: 225
93-
}
22+
title:"Our latest release",
23+
label:"Master channel, new realtime effects & more!",
24+
placeholderImage: releaseVideoPlaceholderImage.src,
25+
imageAltText: "Video thumbnial: Audacity 3.6 - New effects",
26+
videoURL:"https://www.youtube-nocookie.com/embed/f5TXPUOFH6A?autoplay=1",
9427
}
9528
9629
const promoVideo = {
97-
title: "ACE Studio showcase",
98-
label: "Ad: Turn your lyrics into song with ACE Studio, the AI singing voice generator.",
99-
placeholderImages: {
100-
webp: {
101-
default: featuredVideoPlaceholderImage.src,
102-
mobile: featuredVideoPlaceholderImageMobile.src,
103-
},
104-
avif: {
105-
default: featuredVideoPlaceholderImageAvif.src,
106-
mobile: featuredVideoPlaceholderImageMobileAvif.src,
107-
}
108-
},
30+
title:"ACE Studio showcase",
31+
label:"Ad: Turn your lyrics into song with ACE Studio, the AI singing voice generator.",
32+
placeholderImage: featuredVideoPlaceholderImage.src,
10933
imageAltText: "Video thumbnail: What is ACE studio?",
110-
videoURL: "https://www.youtube-nocookie.com/embed/QTlB5UR-IEE?autoplay=1",
111-
dimensions: {
112-
width: 732,
113-
height: 412,
114-
mobileWidth: 400,
115-
mobileHeight: 225
116-
},
117-
CTA: true,
34+
videoURL:"https://www.youtube-nocookie.com/embed/QTlB5UR-IEE?autoplay=1",
35+
CTA: true,
11836
ctaText: "Try for free",
119-
ctaURL: "https://www.musehub.com/app/ace-studio?utm_source=au-web&utm_medium=mh-app-cta&utm_campaign=au-web-mh-app-ace-studio"
37+
ctaURL:"https://www.musehub.com/app/ace-studio?utm_source=au-web&utm_medium=mh-app-cta&utm_campaign=au-web-mh-app-ace-studio"
12038
}
12139
---
12240

@@ -128,20 +46,18 @@ const promoVideo = {
12846
client:load
12947
title={releaseVideo.title}
13048
label={releaseVideo.label}
131-
placeholderImages={releaseVideo.placeholderImages}
49+
placeholderImage={releaseVideo.placeholderImage}
13250
imageAltText={releaseVideo.imageAltText}
13351
videoURL={releaseVideo.videoURL}
134-
dimensions={releaseVideo.dimensions}
13552
matomoEventName={releaseVideo.title}
13653
/>
13754
<FeaturedVideo
13855
client:load
13956
title={promoVideo.title}
14057
label={promoVideo.label}
141-
placeholderImages={promoVideo.placeholderImages}
58+
placeholderImage={promoVideo.placeholderImage}
14259
imageAltText={promoVideo.imageAltText}
14360
videoURL={promoVideo.videoURL}
144-
dimensions={promoVideo.dimensions}
14561
CTA={promoVideo.CTA}
14662
ctaText={promoVideo.ctaText}
14763
ctaURL={promoVideo.ctaURL}

‎src/components/video/FeaturedVideo.jsx‎

Lines changed: 30 additions & 93 deletions
Original file line numberDiff line numberDiff line change
@@ -5,13 +5,11 @@ function FeaturedVideo(props) {
55
const [isClicked, setIsClicked] = useState(false);
66

77
const {
8-
placeholderImages,
9-
placeholderImage, // For backward compatibility
8+
placeholderImage,
9+
imageAltText,
1010
videoURL,
1111
label,
1212
title,
13-
imageAltText,
14-
dimensions,
1513
CTA,
1614
ctaText,
1715
ctaURL = "",
@@ -21,114 +19,53 @@ function FeaturedVideo(props) {
2119

2220
function handleVideoClick() {
2321
setIsClicked(true);
24-
trackEvent("Video embed", "Watch video", matomoEventName || title);
22+
trackEvent("Video embed", "Watch release video", matomoEventName);
2523
}
26-
2724
function handleCTAClick() {
2825
trackEvent("Promo CTA", "Promo CTA video button", ctaText);
2926
}
3027

31-
// Render the optimized responsive image with picture element
32-
function renderThumbnail() {
33-
// Check if we're using the new optimized structure or the legacy format
34-
const isOptimizedFormat = placeholderImages &&
35-
placeholderImages.avif &&
36-
placeholderImages.webp;
37-
38-
// If using the legacy format, render a simple image
39-
if (!isOptimizedFormat) {
40-
return (
41-
<img
42-
tabIndex="0"
43-
src={placeholderImage}
44-
alt={imageAltText || "Video thumbnail"}
45-
className="w-full aspect-video rounded-md shadow-xl cursor-pointer"
46-
width={dimensions?.width || 732}
47-
height={dimensions?.height || 412}
48-
loading="lazy"
49-
decoding="async"
50-
onClick={() => handleVideoClick()}
51-
onKeyDown={(e) => e.key === "Enter" && handleVideoClick()}
52-
/>
53-
);
54-
}
55-
56-
// Otherwise use the optimized picture element with multiple formats
57-
return (
58-
<picture>
59-
{/* AVIF format - best compression, newer browsers */}
60-
<source
61-
media="(min-width: 768px)"
62-
srcSet={placeholderImages.avif.default}
63-
type="image/avif"
64-
/>
65-
<source
66-
media="(max-width: 767px)"
67-
srcSet={placeholderImages.avif.mobile}
68-
type="image/avif"
69-
/>
70-
71-
{/* WebP format - good compression, wider support */}
72-
<source
73-
media="(min-width: 768px)"
74-
srcSet={placeholderImages.webp.default}
75-
type="image/webp"
76-
/>
77-
<source
78-
media="(max-width: 767px)"
79-
srcSet={placeholderImages.webp.mobile}
80-
type="image/webp"
81-
/>
82-
83-
{/* Fallback image */}
84-
<img
85-
tabIndex="0"
86-
src={placeholderImages.webp.default}
87-
alt={imageAltText || "Video thumbnail"}
88-
className="w-full aspect-video rounded-md shadow-xl cursor-pointer"
89-
width={dimensions?.width || 732}
90-
height={dimensions?.height || 412}
91-
loading="lazy"
92-
decoding="async"
93-
onClick={() => handleVideoClick()}
94-
onKeyDown={(e) => e.key === "Enter" && handleVideoClick()}
95-
/>
96-
</picture>
97-
);
98-
}
99-
10028
return (
101-
<div className="flex flex-col gap-2 lg:gap-4">
102-
<div className="flex flex-col xs:flex-row xs:justify-between md:h-10">
103-
<h3 className={`${textColor} content-center`}>{title}</h3>
104-
{CTA && (
105-
<a
106-
className="py-3 px-4 rounded-md justify-center bg-yellow-300 hover:bg-yellow-400 active:bg-yellow-500 w-fit"
107-
href={ctaURL}
108-
onClick={() => handleCTAClick()}
109-
>
110-
<p className="text-slate-900 leading-none font-semibold">{ctaText}</p>
111-
</a>
112-
)}
113-
</div>
29+
<div className="flex flex-col gap-2 lg:gap-4 w-full">
30+
{title && (
31+
<div className="flex flex-col xs:flex-row xs:justify-between md:h-10">
32+
<h3 className={`content-center ${textColor}`}>{title}</h3>
33+
{CTA && (
34+
<a
35+
className="py-3 px-4 rounded-md justify-center bg-yellow-300 hover:bg-yellow-400 active:bg-yellow-500 w-fit"
36+
href={ctaURL}
37+
onClick={() => handleCTAClick()}
38+
>
39+
<p className={`text-slate-900 leading-none font-semibold`}>
40+
{ctaText}
41+
</p>
42+
</a>
43+
)}
44+
</div>
45+
)}
11446

11547
{isClicked ? (
11648
<iframe
11749
className="w-full aspect-video rounded-md shadow-xl"
11850
loading="lazy"
11951
src={videoURL}
12052
title={title}
121-
width={dimensions?.width || 732}
122-
height={dimensions?.height || 412}
12353
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
12454
allowFullScreen
12555
></iframe>
12656
) : (
127-
renderThumbnail()
57+
<img
58+
tabIndex="0"
59+
src={placeholderImage}
60+
alt={imageAltText}
61+
className="w-full aspect-video rounded-md shadow-xl cursor-pointer"
62+
onClick={() => handleVideoClick()}
63+
onKeyDown={(e) => e.key === "Enter" && handleVideoClick()}
64+
/>
12865
)}
129-
<p className={textColor}>{label}</p>
66+
{label && <p className={`${textColor}`}>{label}</p>}
13067
</div>
13168
);
13269
}
13370

134-
export default FeaturedVideo;
71+
export default FeaturedVideo;

0 commit comments

Comments
 (0)