Migrate fabric video to svelte #410
Conversation
Visual regression testing results 🔍If any tests are failing, please check that any visual changes are intentional before merging your PR.
|
dskamiotis
force-pushed
the
migrate-fabric-video-to-svelte
branch
from
2463675
to
9df688e
Compare
dskamiotis
force-pushed
the
migrate-fabric-video-to-svelte
branch
2 times, most recently
from
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.
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.
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.
👍 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.
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.
@emma-imber 👍 Refactored to a more generic Fabric Component
dskamiotis
force-pushed
the
migrate-fabric-video-to-svelte
branch
from
e2c07b1
to
9f80b57
Compare
… child components
dskamiotis
force-pushed
the
migrate-fabric-video-to-svelte
branch
from
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.
subscribeto subscribe to a store, so we can perform actions whenever the value of the store changes.legacyfabric video to prevent it being detected by GAM.How to test
How can we measure success?
We can further check the functionality of the
pauseand theplaymethods 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