overleaf/services/web/frontend/js/features
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
..
algolia-search Merge pull request #5071 from overleaf/jpa-web-learn-de-ng 2021-09-16 08:03:43 +00:00
autoplay-video [website-redesign] Set autoplay video configuration according to specification (#16683) 2024-01-29 09:03:51 +00:00
bookmarkable-tab Merge pull request #5133 from overleaf/as-bookmarkable-tab 2021-09-22 08:03:35 +00:00
chat Merge pull request #14709 from overleaf/ae-context-typescript 2024-01-29 09:03:04 +00:00
clone-project-modal/components Merge pull request #15016 from overleaf/mf-remove-editor-left-menu-angular 2023-10-05 08:05:00 +00:00
contact-form Merge pull request #5137 from overleaf/jpa-contact-form-selector 2021-09-24 08:03:30 +00:00
cookie-banner Add cookie banner (#6627) 2022-04-05 12:17:25 +00:00
dictionary Merge pull request #16143 from overleaf/revert-15982-jel-dictionary-unlearn 2023-12-07 09:04:35 +00:00
editor-left-menu Merge pull request #14709 from overleaf/ae-context-typescript 2024-01-29 09:03:04 +00:00
editor-navigation-toolbar Merge pull request #14709 from overleaf/ae-context-typescript 2024-01-29 09:03:04 +00:00
event-tracking Merge pull request #16608 from overleaf/jpa-writefull-double-loaded 2024-01-24 09:03:47 +00:00
fallback-image Merge pull request #5217 from overleaf/jpa-web-templates-de-ng 2021-09-30 08:03:41 +00:00
faq-search Merge pull request #10675 from overleaf/mj-wiki-search-submit 2022-12-12 09:03:38 +00:00
file-tree Improve handling of upload to deleted folder (#16738) 2024-01-29 09:03:23 +00:00
file-view Merge pull request #14709 from overleaf/ae-context-typescript 2024-01-29 09:03:04 +00:00
form-helpers Merge pull request #16575 from overleaf/mf-fix-captcha-homepage-website-registration 2024-01-23 09:03:24 +00:00
group-management Merge pull request #15922 from overleaf/ab-hide-resend-managed-users-invite-pending-user 2023-11-27 09:04:13 +00:00
history Merge pull request #14709 from overleaf/ae-context-typescript 2024-01-29 09:03:04 +00:00
hotkeys-modal/components Remove Ace (#14299) 2023-11-29 09:04:08 +00:00
ide-react [ide-react] Preserve scope value update watchers on watcher add (#16729) 2024-01-29 09:03:20 +00:00
link-helpers Merge pull request #5190 from overleaf/jpa-sso-oauth-de-ng 2021-09-28 08:03:31 +00:00
mathjax Merge pull request #15497 from overleaf/mj-mathjax-bm 2023-11-24 09:04:09 +00:00
multi-submit Merge pull request #6424 from overleaf/jpa-multi-submit-async-form 2022-01-26 09:02:55 +00:00
outline Merge pull request #14709 from overleaf/ae-context-typescript 2024-01-29 09:03:04 +00:00
pdf-preview Remove setSavedAt from detach compile context (#16742) 2024-01-29 09:03:31 +00:00
plans Merge pull request #16409 from overleaf/dp-fix-group-pricing-after-back-button-pressed 2024-01-09 09:03:33 +00:00
preview Merge pull request #15040 from overleaf/jpa-js-to-jsx 2023-09-29 08:04:29 +00:00
project-list Store selected project ids separately (#15598) 2024-01-29 09:03:07 +00:00
settings Merge pull request #14709 from overleaf/ae-context-typescript 2024-01-29 09:03:04 +00:00
share-project-modal Merge pull request #14709 from overleaf/ae-context-typescript 2024-01-29 09:03:04 +00:00
source-editor Merge pull request #14709 from overleaf/ae-context-typescript 2024-01-29 09:03:04 +00:00
subscription Merge pull request #16320 from overleaf/msm-remove-ic-country 2024-01-04 09:03:34 +00:00
utils Tweeks to the Labels view in the project history (#16046) 2023-12-05 09:04:10 +00:00
word-count-modal Merge pull request #15016 from overleaf/mf-remove-editor-left-menu-angular 2023-10-05 08:05:00 +00:00