[Release] Stage to Main 01/08

[nkthakur48]

• MWPW-183578 PrM x YT Integration #851
• MWPW-183578 PrM x YT gallery  #849

Creative Cloud:

• Before: https://main--cc--adobecom.aem.live/?martech=off
• After: https://stage--cc--adobecom.aem.live/?martech=off

[aem-code-sync]

Hello, I'm the AEM Code Sync Bot and I will run some actions to deploy your branch and validate page speed.
In case there are problems, just click a checkbox below to rerun the respective action.

• Re-run PSI checks
• Re-sync branch

Commits

• 0b3b9de ✅ (latest)

[nkthakur48]

@suhjainadobe, Please do have a look at a few review comments as mentioned below and prioritise relevant ones as a fast follow-up.

Strengths

Architecture & Structure

• Well-organized CSS: Clear sectioning with meaningful comments, mobile-first responsive design, and proper use of CSS custom properties
• Modular JavaScript: Good separation of concerns with clear constants, utility functions, and logical flow
• Franklin Pattern Compliance: Follows established Franklin block patterns with proper initialization and configuration
• Comprehensive Responsive Design: Thoughtful breakpoints (mobile/tablet/desktop) with different layouts and behaviors for each viewport

Accessibility & UX

• Strong Accessibility Support: Proper ARIA labels, roles, keyboard navigation, and focus management
• Progressive Enhancement: Graceful fallbacks and shimmer loading states provide good UX during data fetching
• Cross-platform Considerations: iOS-specific handling for deep links and touch interactions

Error Handling & Robustness

• Comprehensive Error Logging: Uses Lana for analytics logging with proper error context
• Graceful API Failure: Handles network failures and continues to show shimmer cards
• Edge Case Handling: Proper checks for missing elements and API responses

Issues & Suggestions

High-Priority Fixes

1. CSS Variables Not Reusing System Colors 🔴

/* Current - hardcoded colors */
--color-white: #fff;
color: #2C2C2C;

/* Should use system colors from Milo */
/* Check if these exist in the codebase: */
/* var(--color-white, #fff) or var(--color-gray-900, #2C2C2C) */

2. Inappropriate Alt Text Fallback 🔴

// Line 531 - This is inappropriate for alt text
altText: apiItem.title || 'Lorem Ipsum is simply dummy text of the printing and typesetting industry...'

// Should be:
altText: apiItem.title || 'Premiere Pro template preview'

3. Browser Compatibility Issues 🔴

// Line 899 - crypto.randomUUID() not supported in older browsers
overlayTextId = `overlayText-${crypto.randomUUID()}`;

// Should use a polyfill or fallback:
const generateId = () => `overlayText-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;

Medium-Priority Issues

5. Performance - Unnecessary API Over-fetch 🟡

// Line 1052 - Fetches 96 items but only displays 10-15
limit: 96,

// Should fetch only what's needed:
limit: cardLimit + 5, // Small buffer for potential future pagination

6. Memory Leaks - Event Listeners 🟡

// Multiple event listeners without cleanup
// Add cleanup in a disconnect method:
const cleanupCard = (card) => {
  const video = card.querySelector('video');
  if (video) {
    video.pause();
    video.src = '';
    video.load();
  }
};

7. Magic Numbers Need Constants 🟡

// Line 657, 733, 909 - Magic number 500
if (window.screen.width > 500) {

// Should be:
const MOBILE_BREAKPOINT = 500;
if (window.screen.width > MOBILE_BREAKPOINT) {

Nice-to-Haves

8. Improve Error Messages 🟢

// More descriptive error context
logError(`Failed to fetch Adobe Stock data for collection ${collectionId}: ${error.message}`);

9. Consolidate Keyboard Navigation 🟢

The keyboard navigation logic is spread across multiple functions. Consider creating a centralized keyboard navigation manager.

10. CSS Fallbacks for Modern Features 🟢

/* Add fallback for aspect-ratio */
.pre-yt-card {
  width: 100%;
  aspect-ratio: 1 / 1.76;
  /* Fallback for older browsers */
  height: 251px; /* 143px * 1.76 */
}

@supports (aspect-ratio: 1 / 1.76) {
  .pre-yt-card {
    height: auto;
  }
}

Testing Recommendations

Unit Tests Needed

• API response parsing and error handling
• Card state management (expand/collapse)
• Keyboard navigation flows
• Responsive behavior changes

Integration Tests

• Full user interaction flows
• Cross-browser compatibility (especially iOS Safari)
• Performance testing with large datasets

Performance Optimizations

1. Lazy load videos only when cards are expanded
2. Intersection Observer for image loading instead of immediate lazy loading
3. Debounce resize events if window resize handling is added later
4. Virtual scrolling if planning to support pagination

[sigadamvenkata]

CMR : CHG003003036

[spadmasa]

Validation done in stage on the below url
https://www.stage.adobe.com/products/premiere/app/youtube.html

[spadmasa]

cmr raised CHG003003036