Migrate fabric video to svelte

[dskamiotis]

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.

• Using the IntersectionObserver, video play logic, depends on the DOM being fully initialised, meant we needed to use the subscribe to subscribe to a store, so we can perform actions whenever the value of the store changes.
• ad.json removed from legacy fabric video to prevent it being detected by GAM.

How to test

• Follow the steps in the README to run locally
• Navigate to the Fabric Video template

How can we measure success?

We can further check the functionality of the pause and the play 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

• Tested with screen reader
• Navigable with keyboard
• Colour contrast passed
• The change doesn't use only colour to convey meaning

co-authored: @Jakeii

[github-actions]

Visual regression testing results 🔍

If any tests are failing, please check that any visual changes are intentional before merging your PR.

Template	Visual test status
CAPI Multiple Hosted	✅
CAPI Multiple Paidfor	✅
Fabric Custom	❌
Fabric	✅
Manual Multiple	✅
Manual Single	✅

[Jakeii]

Looks good!