DS-1146 DS-1193 | Looping video page heroes and inline Story Video component; reusable Caption, MediaWrapper and various Video components #389

yvonnetangsu · 2025-02-06T01:33:59Z

READY FOR REVIEW

Summary

Add background and foreground video looping to story page heroes
Add SbVideo - inline looping video component with caption and other options
Add Video, MutedVideoLoop, StoryVideo and VideoButton components
Create MediaWrapper and Caption components which replace part of the common code in StoryImage, StoryVideo and EmbedMedia components

Review By (Date)

Sooner the better

Criticality

6

Review Tasks

Setup tasks and/or behavior to test

Review pages in Slack conversation:
https://stanfordwebservices.slack.com/archives/C03R765SAJC/p1739990416255369
https://stanfordwebservices.slack.com/archives/C03R765SAJC/p1740163729849879
Look at the deploy preview and make sure that the story image and embed media components still work the same as before:
https://deploy-preview-389--giving-campaign.netlify.app/initiatives/stanford-public-humanities
https://deploy-preview-389--giving-campaign.netlify.app/stories/team-behind-the-teams (The Annotated Image component uses StoryImage)
https://deploy-preview-389--giving-campaign.netlify.app/stories/stretching-the-canvas
Look at code and things called out

Associated Issues and/or People

JIRA ticket(s) - DS-1146, DS-1193

netlify · 2025-02-06T01:34:16Z

✅ Deploy Preview for giving-campaign ready!

Name	Link
🔨 Latest commit	`7d7bdfb`
🔍 Latest deploy log	https://app.netlify.com/sites/giving-campaign/deploys/67c20c2f56629b0008ac0e94
😎 Deploy Preview	https://deploy-preview-389--giving-campaign.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

…unused StoryHero component

… button

…sition

* dev: NOJIRA | Remove currently unused and POC components (#390)

…Props

…loop

…e hero

…e the first frame of the video and should have the same default focus as the video itself; update getProcessedImage to resize image to 2000px wide by default if image is larger than 2000px and if crop dimension is not provided

…oryImage

…o due to browser glitch

* dev: DS-1176 | Add Tabs/Agenda to Momentum (#391)

…wrapper

…ent for EmbedMedia

yvonnetangsu · 2025-02-27T21:50:49Z

utilities/getProcessedImage.ts

@@ -16,7 +19,7 @@ import { getMaskedAsset } from './getMaskedAsset';

 export const getProcessedImage = (
  imageSrc: string = '',
-  crop: string = '',
+  crop: string = getSbImageSize(imageSrc)?.width > 2000 ? '2000x0' : '',


Made a small change to getProcessedImage utility, so that If a crop dimension is not provided and if the image width is greater than 2000px, the crop dimension will be set to "2000x0" to keep the original aspect ratio and downsize the image to 2000px wide. I don't think there is a reason to have any images on the site that is larger than 2000px wide at the moment.

yvonnetangsu · 2025-02-27T21:52:03Z

components/Video/Video.tsx

+import { VideoHTMLAttributes, forwardRef } from 'react';
+import { getMaskedAsset } from '@/utilities/getMaskedAsset';
+import { getProcessedImage } from '@/utilities/getProcessedImage';
+
+/**
+ * Simple Video component that allows for webm and mp4 sources and a poster image.
+ */
+
+export type VideoProps = VideoHTMLAttributes<HTMLVideoElement> & {
+  mp4Src?: string;
+  webmSrc?: string;
+  posterSrc?: string;
+}
+
+export const Video = forwardRef<HTMLVideoElement, VideoProps>(({
+  mp4Src,
+  webmSrc,
+  posterSrc,
+  children,
+  className,
+  ...props
+}, ref) => (
+  <video
+    ref={ref}
+    poster={getProcessedImage(posterSrc)}
+    className={className}
+    {...props}
+  >
+    {webmSrc && <source src={getMaskedAsset(webmSrc)} type="video/webm" />}
+    {mp4Src && <source src={getMaskedAsset(mp4Src)} type="video/mp4" />}
+    {children}
+  </video>
+));


Generic html video component that supports a mp4 and webm sources (plus any additional via children prop), and a preview image poster attribute

yvonnetangsu · 2025-02-27T21:52:37Z

components/Video/MutedVideoLoop.tsx

+export const MutedVideoLoop = forwardRef<HTMLVideoElement, VideoProps>((props, ref) => (
+  <Video ref={ref} role="presentation" muted autoPlay loop playsInline {...props} />
+));


A convenience component for muted loops so I don't have to write out those same attributes all the time.

yvonnetangsu · 2025-02-27T21:53:54Z

components/Video/StoryVideo.tsx

+  aspectRatioClass?: string;
+};
+
+export const StoryVideo = ({


This is a counterpart of the StoryImage component - comes with a wrapper that provides aspect ratio, width and spacing options, plus caption and other options.

yvonnetangsu · 2025-02-27T21:54:56Z

components/Media/Caption.tsx

+export const Caption = ({
+  caption,
+  isCaptionInset,
+  captionBgColor = 'transparent',
+  className,


Extract the Caption component since it's used in a few places

yvonnetangsu · 2025-02-27T21:55:34Z

components/Media/MediaWrapper.tsx

+  aspectRatioClass?: string; // Additional eg, responsive aspect ratio classes
+};
+
+export const MediaWrapper = ({


This is the wrapper component that's used for StoryImage and StoryVideo that provides it with a common set of options

yvonnetangsu · 2025-02-27T21:56:48Z

components/Video/StoryVideo.tsx

+  /**
+   * Pause video when it goes out of view,
+   * resume when it comes back into view if it was not manually paused by the user.
+   */
+  useEffect(() => {
+    const video = videoRef.current;
+    if (!video) return;
+
+    if (isVideoInView && !isUserPaused) {
+      video.play().catch(() => {});
+    } else {
+      video.pause();
+    }
+  }, [isVideoInView, isUserPaused]);


Pause the video when 90% or more is out of the viewport. Resumes playing when it comes back into view, unless user had previously manually paused the video.

…ve behavior but if used in newer version of Framer Motion this matters) and update wrong doc

yvonnetangsu · 2025-02-27T23:22:03Z

components/Animate/AnimateInView.tsx

@@ -45,7 +45,7 @@ export const AnimateInView = ({
        duration,
        ease: 'easeOut',
      }}
-      initial="hidden"
+      initial={beforeAnimationState}


Updated AnimateInView wrapper. This still works as intended on live, but when this component is used with a newer version of Framer Motion, it doesn't work correctly. This get rid of the conflict and should be this way from the beginning - I thought this looked sus at one point and always meant to come back to do it properly even though it was still working.

The reason I found the bug was that Rebecca is using my AnimateInView component on Centennial which is on React 19/Next 15 and the latest version of Framer Motion (now called just Motion). She was wondering why the reduced motion setting didn't work for her site, but still works for Momentum. I came back to look at this and found that it's fixed if I make this change. @sherakama

Cool. Good future gotcha prevention.

sherakama · 2025-02-28T17:45:18Z

components/BlurryPoster/BlurryPoster.tsx

+
+    setIsBgPlaying((prev) => {
+      if (prev) {
+        bgVideoRef.current?.pause();


do you need the ? here as you've already checked if the .current value is truthy?

Good catch! I'll update 😄

sherakama · 2025-02-28T17:45:29Z

components/BlurryPoster/BlurryPoster.tsx

+      } else {
+        bgVideoRef.current
+          ?.play()
+          .catch(() => {});


Tell me more about this catch.

I added this because sometimes video playback might be blocked or it can't be played for some reason, which can cause issues with DOM errors. This catches the error silently and prevents that from causing issue - I could have it display a console error or warning as well.

What is the user experience if the video playback fails and you've squashed the error? Can the user self-recover? Is there a graceful failover?

Honestly I can certainly do more with error handling, but error should be rare. So in the interest of time, I'll come back to this later @sherakama 😂

I'll let you judge the time/effort to spend here but overall I am not a fan of squashing errors quietly as they tend to be very difficult to troubleshoot. I'd rather see the error logged.

I can update for it to show a console warning 👍🏼

sherakama · 2025-02-28T18:47:57Z

Happy path testing works (and looks) great.
You've done some good work on abstracting and consolidating. Looks like there is potential for some more as there is a little code duplication going on here between the image and video components but nothing that should be a blocker IMHO.

I added @ericbakenhus for visibility and his keen eye too.

yvonnetangsu · 2025-02-28T18:51:37Z

Happy path testing works (and looks) great. You've done some good work on abstracting and consolidating. Looks like there is potential for some more as there is a little code duplication going on here between the image and video components but nothing that should be a blocker IMHO.

I added @ericbakenhus for visibility and his keen eye too.

Yes, I remember what you suggested before about a responsive image component 😄 I still plan on doing that at some point, but going to get this out the door first. It's a busy sprint 🤠 Some final clean up of redundant props coming (get rid of those that are already in MediaWrapperProps)

yvonnetangsu · 2025-02-28T18:52:42Z

I'll have to find out more about this "happy path testing" @sherakama 👀

sherakama · 2025-02-28T18:54:39Z

I'll have to find out more about this "happy path testing" @sherakama 👀

Well, not a long path on this one, but the testing was:

Load page
See video play
Resize page
Pause
Reize page
Play

yvonnetangsu · 2025-02-28T18:56:26Z

I'll have to find out more about this "happy path testing" @sherakama 👀

Well, not a long path on this one, but the testing was:

Load page

See video play

Resize page

Pause

Reize page

Play

Cool 😎 Yeah I've never heard that term before so I just looked that up.

…in the shared MediaWrapperProps; better doc for aspectRatioClass; add console warning if video playback is causing error

yvonnetangsu · 2025-02-28T19:28:08Z

Thank you for the review 😄 I have tested again after the final changes. Going to cut a release for this.

Add video looping option to basic page hero

ca4f6ff

yvonnetangsu marked this pull request as draft February 6, 2025 01:34

yvonnetangsu added 25 commits February 6, 2025 16:34

Adding video option to StoryHeroMVP; extract Video component; remove …

9c18c52

…unused StoryHero component

Remove old unused components

37e811c

Video control and styles WIP

7561a45

Delete old components

2949f0a

Update packages

7c28a69

Story Hero adding background video; adding wide optiont to Container

e07e3f1

Add control to story hero foreground video

8ccb109

Create and use MutedVideoLoop component for convenience

cb6b954

Different padding for basic hero depending on whether there's a video…

63d0b4f

… button

Stacked hero video button position; adjust basic hero video button po…

559e918

…sition

video button styles

aebdfe3

Merge branch 'dev' into feature/DS-1146/video-heroes

009c302

* dev: NOJIRA | Remove currently unused and POC components (#390)

Add animation to Basic Hero to match stacked story hero; export Video…

875e196

…Props

Button positioning for story hero variant with only background video …

d5779f8

…loop

Style tweak for video button container so the overlay covers the whol…

af15b75

…e hero

z index for basic hero content

78c4e73

Checks whether video is playable and handle tab changes

bc230ee

Pause video when not in view

fde6f9e

Extract reusable Caption and MediaWrapper component and use it for St…

79af62a

…oryImage

Add the rest of the MediaWrapper props to StoryImage

efe5680

Inline StoryVideo and SbVideo component

43e33a8

clean up

c655a64

Documentation for video components

0dbd5be

Fix potential small gap between caption background and bottom of vide…

fe2a9d0

…o due to browser glitch

yvonnetangsu changed the title ~~DS-1146 | Looping video heroes~~ DS-1146 DS-1193 | Looping video page heroes and inline Story Video component Feb 21, 2025

Merge branch 'dev' into feature/DS-1146/video-heroes

42d44aa

* dev: DS-1176 | Add Tabs/Agenda to Momentum (#391)

yvonnetangsu added 4 commits February 26, 2025 20:26

Clean up Blurry Poster to use same play/pause mechanism

1b64573

Clean up more classes and types; add black background to story video …

83cf380

…wrapper

No parallax for videos

0efc63c

Take PreviewImage out of the return of EmbedMedia; use Caption compon…

676386b

…ent for EmbedMedia

yvonnetangsu marked this pull request as ready for review February 27, 2025 21:33

yvonnetangsu requested a review from sherakama February 27, 2025 21:44

yvonnetangsu commented Feb 27, 2025

View reviewed changes

yvonnetangsu changed the title ~~DS-1146 DS-1193 | Looping video page heroes and inline Story Video component~~ DS-1146 DS-1193 | Looping video page heroes and inline Story Video component; reusable Caption, MediaWrapper and various Video components Feb 27, 2025

Clean up AnimateInView to avoid conflicting states (doesn't change li…

daf5c73

…ve behavior but if used in newer version of Framer Motion this matters) and update wrong doc

yvonnetangsu commented Feb 27, 2025

View reviewed changes

sherakama requested a review from ericbakenhus February 28, 2025 17:38

sherakama reviewed Feb 28, 2025

View reviewed changes

yvonnetangsu added 2 commits February 28, 2025 11:10

Remove redundant props in StoryVideo and StoryImage that are already …

5dfd1c4

…in the shared MediaWrapperProps; better doc for aspectRatioClass; add console warning if video playback is causing error

More doc

7d7bdfb

yvonnetangsu merged commit a3ae013 into dev Feb 28, 2025
5 checks passed

yvonnetangsu deleted the feature/DS-1146/video-heroes branch February 28, 2025 19:29

yvonnetangsu mentioned this pull request Feb 28, 2025

Release/v3.7.0 #392

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

DS-1146 DS-1193 | Looping video page heroes and inline Story Video component; reusable Caption, MediaWrapper and various Video components #389

DS-1146 DS-1193 | Looping video page heroes and inline Story Video component; reusable Caption, MediaWrapper and various Video components #389

yvonnetangsu commented Feb 6, 2025 •

edited

Loading

netlify bot commented Feb 6, 2025 •

edited

Loading

yvonnetangsu Feb 27, 2025

sherakama Feb 28, 2025

yvonnetangsu Feb 27, 2025

yvonnetangsu Feb 27, 2025

yvonnetangsu Feb 27, 2025

yvonnetangsu Feb 27, 2025

yvonnetangsu Feb 27, 2025

yvonnetangsu Feb 27, 2025

yvonnetangsu Feb 27, 2025

yvonnetangsu Feb 28, 2025

sherakama Feb 28, 2025

sherakama Feb 28, 2025

yvonnetangsu Feb 28, 2025

sherakama Feb 28, 2025

yvonnetangsu Feb 28, 2025

sherakama Feb 28, 2025

yvonnetangsu Feb 28, 2025

sherakama Feb 28, 2025

yvonnetangsu Feb 28, 2025

sherakama commented Feb 28, 2025

yvonnetangsu commented Feb 28, 2025 •

edited

Loading

yvonnetangsu commented Feb 28, 2025

sherakama commented Feb 28, 2025

yvonnetangsu commented Feb 28, 2025

yvonnetangsu commented Feb 28, 2025

DS-1146 DS-1193 | Looping video page heroes and inline Story Video component; reusable Caption, MediaWrapper and various Video components #389

DS-1146 DS-1193 | Looping video page heroes and inline Story Video component; reusable Caption, MediaWrapper and various Video components #389

Conversation

yvonnetangsu commented Feb 6, 2025 • edited Loading

READY FOR REVIEW

Summary

Review By (Date)

Criticality

Review Tasks

Setup tasks and/or behavior to test

Associated Issues and/or People

netlify bot commented Feb 6, 2025 • edited Loading

✅ Deploy Preview for giving-campaign ready!

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

sherakama commented Feb 28, 2025

yvonnetangsu commented Feb 28, 2025 • edited Loading

yvonnetangsu commented Feb 28, 2025

sherakama commented Feb 28, 2025

yvonnetangsu commented Feb 28, 2025

yvonnetangsu commented Feb 28, 2025

yvonnetangsu commented Feb 6, 2025 •

edited

Loading

netlify bot commented Feb 6, 2025 •

edited

Loading

yvonnetangsu commented Feb 28, 2025 •

edited

Loading