overleaf/services/web/frontend/js
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
..
directives Remove unused Angular code from "main" and "ide" endpoints (#15868) 2023-12-06 09:04:45 +00:00
features [website-redesign] Set autoplay video configuration according to specification (#16683) 2024-01-29 09:03:51 +00:00
ide Merge pull request #16493 from overleaf/ii-rp-mini-page-load 2024-01-17 09:03:17 +00:00
infrastructure Merge pull request #16608 from overleaf/jpa-writefull-double-loaded 2024-01-24 09:03:47 +00:00
main Remove unused Angular code from "main" and "ide" endpoints (#15868) 2023-12-06 09:04:45 +00:00
modules Merge pull request #15129 from overleaf/mj-jpa-angular-parameters 2023-10-16 08:04:25 +00:00
pages Merge pull request #14799 from overleaf/rd-report-tablist-plan 2024-01-26 09:03:36 +00:00
services Remove unused Angular code from "main" and "ide" endpoints (#15868) 2023-12-06 09:04:45 +00:00
shared Remove setSavedAt from detach compile context (#16742) 2024-01-29 09:03:31 +00:00
utils Merge pull request #15376 from overleaf/td-ide-page-working-editor 2023-10-27 08:03:07 +00:00
vendor/libs Merge pull request #16184 from overleaf/ae-sharejs-esm 2023-12-15 09:03:35 +00:00
base.js Merge pull request #15383 from overleaf/jpa-remove-unused-angular-deps 2023-10-25 08:04:08 +00:00
cdn-load-test.js
dev-toolbar.js Merge pull request #15808 from overleaf/ab-split-test-dev-toolbar 2023-11-24 09:04:40 +00:00
i18n.js Disable transSupportBasicHtmlNodes in react-i18next config (#15430) 2023-10-31 09:04:04 +00:00
ide-detached.js
ide.js [ide-react] Improve file tree and outline components in the editor sidebar (#16225) 2023-12-18 09:03:53 +00:00
libraries.js Merge pull request #15385 from overleaf/jpa-remove-fetch-polyfill 2023-10-25 08:04:12 +00:00
main.js Remove unused Angular code from "main" and "ide" endpoints (#15868) 2023-12-06 09:04:45 +00:00
marketing.js [website-redesign] Set autoplay video configuration according to specification (#16683) 2024-01-29 09:03:51 +00:00
tracing.js Merge pull request #10279 from overleaf/jpa-tracing-optimizations 2022-11-04 09:05:00 +00:00