Commit graph

2 commits

Author SHA1 Message Date
M Fahru
93976a2748 Merge pull request #16805 from overleaf/tm-website-redesign-ios-video-tweaks
Website redesign - video autoplay tweaks primarily to fix playback on iOS

GitOrigin-RevId: ba2844b8af64627512470d0f27ec450ee2d86b09
2024-01-30 16:49:37 +00:00
M Fahru
4f901caa2d [website-redesign] Set autoplay video configuration according to specification (#16683)
* Set autoplay video configuration according to specification:

- Do not autoplay video initially
- If the video is visible on the viewport (with a threshold of 80% of the video is visible), autoplay video, and everytime it autoplays, set the video starting point to 0
- If the video is not visible on the viewport (with a threshold of 80% of the video is not visible), pause the video
- If user screen stops at video that's currently in autoplay, the autoplay will stop after it endedand replay every 15 seconds.
- For user with reduced motion preference, show video controls.

* Add a comment explaining error in firefox if user is pressing the seek bar relatively fast.

It seems to be a bug specific to firefox.

* Reduce the threshold to 70% of the visible video on the screen.

0.7 value will make the video autoplays instantly for the `new-design-registration` variant since the video on that variant will not be shown fully on the screen at initial homepage load (in desktop screen).

* Set attribute without empty string, fix video that lacked data attribute

* Remove duplicated autoplay video setup on homepage

* Remove autoplay pause/reset on scroll away, don't play if not visible

Refactors the autoplay-video code and removes the pause/reset on scroll
away while also keeping track of the video elements visibility so that
the video doesn't immediately start playing after 15s if not visible.

We also prevent trying to call .play() before the video is in a
"canplay" state. If the video is not ready, then add an event listener
for the "canplay" event and only play() once this is fired. We only do
this once to avoid adding duplicate listeners.

We also check that the video is not playing before calling play(),
because it could still be in playback if we scroll out of view and then
back into view.

* Refactor autoplay-video to match style of similar JS enhancement implementations

* Move autoplay-video from shared/utils to features/

---------

Co-authored-by: Thomas Mees <thomas.mees@overleaf.com>
Co-authored-by: Thomas <thomas-@users.noreply.github.com>
GitOrigin-RevId: 13011af04baaeba4b8053478a09e3e4d7c960d5c
2024-01-29 09:03:51 +00:00