mirror of
https://github.com/monkeytypegame/monkeytype.git
synced 2025-10-20 20:46:15 +08:00
44a67db9fc
### Description
This Pull Request introduces the functionality to download the result
screenshot directly as a PNG file, in addition to the existing option to
copy it to the clipboard.
This is achieved by:
1. Refactoring the screenshot logic in `test-ui.ts`.
2. Adding a new `Download screenshot` command to the result screen
command list.
**Changes Made:**
* **`frontend/src/ts/test/test-ui.ts`**:
* Created an internal function `generateScreenshotCanvas` that
encapsulates UI preparation, canvas generation with `html2canvas`, and
UI restoration.
* Modified the exported `screenshot` function to use
`generateScreenshotCanvas` and **only** handle copying the resulting
Blob to the clipboard (with the fallback of opening in a new tab).
* Added a new exported function `getScreenshotBlob` that uses
`generateScreenshotCanvas` and returns the resulting image Blob.
* **`frontend/src/ts/commandline/lists/result-screen.ts`**:
* Renamed the `saveScreenshot` command to `copyScreenshot` (updating
`id`, `icon`, and `alias`) to more accurately reflect its action. It
still uses `TestUI.screenshot()`.
* Added a new `downloadScreenshot` command (`id`, `display`, `icon`,
`alias`) that:
* Calls `TestUI.getScreenshotBlob()` to get the image data.
* If a Blob is obtained, creates a temporary object URL.
* Creates a temporary `<a>` element, sets the `href` to the object URL,
and the `download` attribute with a filename (e.g.,
`monkeytype-result-TIMESTAMP.png`).
* Simulates a click on the link to initiate the file download.
* Revokes the object URL.
* Displays success or error notifications.
### Checks
- [ ] Adding quotes?
- [ ] Make sure to include translations for the quotes in the
description (or another comment) so we can verify their content.
- [ ] Adding a language or a theme?
- [ ] If is a language, did you edit `_list.json`, `_groups.json` and
add `languages.json`?
- [ ] If is a theme, did you add the theme.css?
- Also please add a screenshot of the theme, it would be extra awesome
if you do so!
- [ ] Check if any open issues are related to this PR; if so, be sure to
tag them below.
- [x] Make sure the PR title follows the Conventional Commits standard.
(https://www.conventionalcommits.org for more info)
- [ ] Make sure to include your GitHub username prefixed with @ inside
parentheses at the end of the PR title. <!-- Remember to add your
username here! -->
---------
Co-authored-by: fehmer <3728838+fehmer@users.noreply.github.com>
Co-authored-by: Miodec <jack@monkeytype.com>
|
||
|---|---|---|
| .. | ||
| __tests__ | ||
| docker | ||
| scripts | ||
| src | ||
| static | ||
| .eslintrc.cjs | ||
| .firebaserc_example | ||
| .oxlintrc.json | ||
| firebase.json | ||
| gulpfile.js | ||
| knip.json | ||
| package.json | ||
| tsconfig.json | ||
| vite.config.dev.js | ||
| vite.config.js | ||
| vite.config.prod.js | ||
| vitest.config.js | ||