-
Notifications
You must be signed in to change notification settings - Fork 3
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Migrate fabric video to svelte #410
base: main
Are you sure you want to change the base?
Conversation
Visual regression testing results 🔍If any tests are failing, please check that any visual changes are intentional before merging your PR.
|
2463675
to
9df688e
Compare
a1adcba
to
60b0633
Compare
src/lib/messenger.ts
Outdated
@@ -49,7 +49,8 @@ type StringMessage = StandardMessage< | |||
| 'get-page-url' | |||
| 'passback-refresh' | |||
| 'viewport' | |||
| 'scroll', | |||
| 'scroll' | |||
| 'click', |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Is click actually being used anywhere?
src/lib/messenger.ts
Outdated
(result) => result as { top: number; bottom: number }, | ||
); | ||
|
||
const onViewport = () => |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I don't see any references to onScroll or onViewport? Could you clarify why these are being added here?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
👍 yes this part of the inital migration but seems latrer the IntersectionObserver
, which is responsible for detecting when the video element enters the viewport and playing or pausing the video accordingly.
style:--desktop-background-image={`url('${Layer3BackgroundImage}')`} | ||
style:--desktop-background-position={Layer3BackgroundPosition} | ||
style:--mobile-background-image={`url('${MobileLayer3BackgroundImage}')`} | ||
style:--mobile-background-position={MobileLayer3BackgroundPosition} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
There's lots of duplicate code from the Fabric component - could we use that here and add the video as an option inside the component? Feels like it would be easier to maintain if we used the shared component!
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@emma-imber 👍 Refactored to a more generic Fabric Component
e2c07b1
to
9f80b57
Compare
… child components
9f80b57
to
fa4fd96
Compare
What does this change?
Converts the Fabric Video template to Svelte.
Its important to note, we need to perform setup logic after the component renders.
subscribe
to subscribe to a store, so we can perform actions whenever the value of the store changes.legacy
fabric video to prevent it being detected by GAM.How to test
How can we measure success?
We can further check the functionality of the
pause
and theplay
methods by adding console.logs in the "observer" if and navigate the viewport in Preview so the fabric video is out of view.We have added the
IntersectionObserver
, which is responsible for detecting when the video element enters the viewport and playing or pausing the video accordingly. Updating the previous functions in the legacy code.Have we considered potential risks?
Images
Screen.Recording.2024-10-21.at.12.40.58.mov
Accessibility
co-authored: @Jakeii