Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Take full page screenshots #143

Closed
kamtschatka opened this issue May 9, 2024 · 6 comments
Closed

Take full page screenshots #143

kamtschatka opened this issue May 9, 2024 · 6 comments
Labels
feature request New feature or request

Comments

@kamtschatka
Copy link
Contributor

Taking a screenshot of the page would be much better if it would take a full page screenshot.
If I am not mistaken it should only require a change in this line to add "fullpage: true"

@kamtschatka
Copy link
Contributor Author

Yeah I tried it out and it works fine, but I can't figure out how to make the screenshot show up correctly.
Tried all kinds of things with ScreenshotSection.tsx, but the screenshot stays like this:
image

If I remove the "height: 100%" style from the create image tag it looks fine, but I don't understand how that works with the "Image" tag from next:
image

@scubanarc
Copy link

I didn't look at the source, but it seems like some sort of height-limited div with "overflow:hidden" might to do the trick.

@MohamedBassem
Copy link
Collaborator

Yeah, dealing with the Image tag of next can be very annoying :) I'll check it over the weekend.

I think also I'll also make this behavior configurable. Screenshots can take a ton of disk space specially with that size and not everyone finds them useful.

@MohamedBassem MohamedBassem added the feature request New feature or request label May 10, 2024
kamtschatka pushed a commit to kamtschatka/hoarder-app that referenced this issue May 10, 2024
Added the fullPage flag to take full screen screenshots
updated the UI accordingly to properly show the screenshots instead of scaling it down
@kamtschatka
Copy link
Contributor Author

I found the solution here and opened a PR.
You mentioned making that configurable. You mean with an environment variable or in the UI?

@MohamedBassem
Copy link
Collaborator

Nice! will check it out!

By configurable, I mean with an env variable. All config knobs are here: https://github.com/MohamedBassem/hoarder-app/blob/main/packages/shared/config.ts and you'll find this serverConfig option used a lot in the crawlerWorker.ts already. And if it's not too much, I'd be grateful if you add the new env variable to the docs here as well https://github.com/MohamedBassem/hoarder-app/blob/main/docs/docs/03-configuration.md :) I think we can name it CRAWLER_FULL_PAGE_SCREENSHOT.

kamtschatka pushed a commit to kamtschatka/hoarder-app that referenced this issue May 10, 2024
Added the fullPage flag to take full screen screenshots
updated the UI accordingly to properly show the screenshots instead of scaling it down
kamtschatka pushed a commit to kamtschatka/hoarder-app that referenced this issue May 10, 2024
Added the fullPage flag to take full screen screenshots
updated the UI accordingly to properly show the screenshots instead of scaling it down
MohamedBassem pushed a commit that referenced this issue May 12, 2024
Added the fullPage flag to take full screen screenshots
updated the UI accordingly to properly show the screenshots instead of scaling it down

Co-authored-by: kamtschatka <simon.schatka@gmx.at>
@MohamedBassem
Copy link
Collaborator

@kamtschatka implemented in #148!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
feature request New feature or request
Projects
None yet
Development

No branches or pull requests

3 participants