Blogger Flow: Video UI branch from starting-point screen

[autumnfjeld]

Blogger Flow: Video UI

The stretch squad, aka Serenity, has just shipped a version of the Video UI, accessible through a button on My Home. Umbrella Issue: Implement the video course. #56888
We will be reusing their VideoUi component in the Blogger flow.
See their umbrella issue: Onboarding: Implement the video course. #56888

Acceptance Criteria & User Facing Requirements

• The title is "Blogging Quick Start" NOT Masterclass
• Desktop and mobile built to match: EuqfSnWpfYx8fgiBlVmbuA-fi-2119%3A1111
• Video UI loads from pick a starting-point screen
• "Back" link goes back to the starting-point screen
• "Draft your first post" link goes to editor, where the modal will show
• Completion of playing last video reveals "Start writing" button, which goes to the editor, where the modal will show
• User behavior is tracked with tracks events
• Call for Testing on dtkmj-p2

Dev Checklist

• Hero Flow: Integrate video courses #58234
• Hero Flow: Turn on video course as starting point #59747

Related

Blogger/Hero Flow Project Thread
Hero Flow: Write & Build intent screen #55603
Onboarding: Implement the video course. #56888
Demo of Video UI: pdgK6S-mD-p2
Implement the video course. #56888

[autumnfjeld]

@arthur791004 & @roo2 You should coordinate with Serenity Team, e.g. @kwight when you start work on this. Check what changes are in the works in the VideoUi or any other concerns. :)

[arthur791004]

I propose a draft here. I think we should wait for something such as marking the video completed and showing the CTA on the footer once all of the videos are watched. One concern might be we should ensure the tracks events of the signup framework are fired correctly.

Maybe they should expose some props let us to control some behavior of CTA. Or we only need the content of the video UI without the header and footer. And the onComplete function props so that we can control the behavior after the user has watched all of the videos.

cc @kwight

[kwight]

Maybe they should expose some props let us to control some behavior of CTA.

We do have some props for this at the moment, but we're switching them to a simpler "context" prop that can be used to output any header/footer changes needed. I could see something like <VideosUi course="onboarding" context="<sign up flow slug>">.

Or we only need the content of the video UI without the header and footer.

I'd personally avoid this, to keep styling and layout as consistent as possible across the different eventual contexts for the component.

And the onComplete function props so that we can control the behavior after the user has watched all of the videos.

Is this something different from triggering the call to action?

[arthur791004]

Close it as #59747 is shipped 🎉