4f901caa2d
* 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 |
||
---|---|---|
.. | ||
.github | ||
.storybook | ||
.vscode | ||
app | ||
bin | ||
config | ||
cypress | ||
data | ||
frontend | ||
locales | ||
migrations | ||
modules | ||
public | ||
scripts | ||
test | ||
transform/o-error | ||
types | ||
webpack-plugins | ||
.dockerignore | ||
.eastrc | ||
.eslintignore | ||
.eslintrc | ||
.gitignore | ||
.nvmrc | ||
.prettierignore | ||
.prettierrc | ||
app.js | ||
babel.config.json | ||
cloudbuild-storybook-index.html.m4 | ||
cloudbuild-storybook.yaml | ||
cypress.config.ts | ||
docker-compose.ci.yml | ||
docker-compose.common.env | ||
docker-compose.cypress.yml | ||
docker-compose.yml | ||
Dockerfile | ||
Dockerfile.frontend | ||
Dockerfile.frontend.ci | ||
Dockerfile.frontend_ct | ||
i18next-scanner.config.js | ||
install_deps.sh | ||
LICENSE | ||
local-dev.env | ||
local-test.env | ||
Makefile | ||
Makefile.module | ||
package.json | ||
README.md | ||
tsconfig.backend.json | ||
tsconfig.json | ||
webpack.config.dev.js | ||
webpack.config.js | ||
webpack.config.prod.js |
overleaf/web
overleaf/web is the front-end web service of the open-source web-based collaborative LaTeX editor, Overleaf. It serves all the HTML pages, CSS and javascript to the client. overleaf/web also contains a lot of logic around creating and editing projects, and account management.
The rest of the Overleaf stack, along with information about contributing can be found in the overleaf/overleaf repository.
Running the app
The app runs natively using npm and Node on the local system:
$ npm install
$ npm run start
Running Tests
To run all tests run:
make test
To run both unit and acceptance tests for a module run:
make test_module MODULE=overleaf-integration
Unit Tests
The test suites run in Docker.
Unit tests can be run in the test_unit
container defined in docker-compose.tests.yml
.
The makefile contains a short cut to run these:
make test_unit
During development it is often useful to only run a subset of tests, which can be configured with arguments to the mocha CLI:
make test_unit MOCHA_GREP='AuthorizationManager'
To run only the unit tests for a single module do:
make test_unit_module MODULE=overleaf-integration
Module tests can also use a MOCHA_GREP argument:
make test_unit_module MODULE=overleaf-integration MOCHA_GREP=SSO
Acceptance Tests
Acceptance tests are run against a live service, which runs in the acceptance_test
container defined in docker-compose.tests.yml
.
To run the tests out-of-the-box, the makefile defines:
make test_acceptance
However, during development it is often useful to leave the service running for rapid iteration on the acceptance tests. This can be done with:
make test_acceptance_app_start_service
make test_acceptance_app_run # Run as many times as needed during development
make test_acceptance_app_stop_service
make test_acceptance
just runs these three commands in sequence and then runs make test_acceptance_modules
which performs the tests for each module in the modules
directory. (Note that there is not currently an equivalent to the -start
/ -run
x n / -stop
series for modules.)
During development it is often useful to only run a subset of tests, which can be configured with arguments to the mocha CLI:
make test_acceptance_run MOCHA_GREP='AuthorizationManager'
To run only the acceptance tests for a single module do:
make test_acceptance_module MODULE=overleaf-integration
Module tests can also use a MOCHA_GREP argument:
make test_acceptance_module MODULE=overleaf-integration MOCHA_GREP=SSO
Routes
Run bin/routes
to print out all routes in the project.
License and Credits
This project is licensed under the AGPLv3 license
Stylesheets
Overleaf is based on Bootstrap, which is licensed under the
MIT license.
All modifications (*.less
files in public/stylesheets
) are also licensed
under the MIT license.
Artwork
Silk icon set 1.3
We gratefully acknowledge Mark James for
releasing his Silk icon set under the Creative Commons Attribution 2.5 license. Some
of these icons are used within Overleaf inside the public/img/silk
and
public/brand/icons
directories.
IconShock icons
We gratefully acknowledge IconShock for use of the icons
in the public/img/iconshock
directory found via
findicons.com