Automatic Brew thumbnail generation option #3219

dbolack-ab · 2023-12-31T03:14:35Z

This is a feature addition that adds the option of creating a thumbnail directly from the first page of the brew.

Remove 5ePHB assets and fonts.

This reverts commit 27d53f2.

There are two bugs that may be resolved by being on HTTPS

dbolack-ab · 2024-01-25T20:02:29Z

Evaluators, please test with an assortment of complicated brews? I don't have a good library built up yet.

Gazook89

It seems like the generated image's "frame" is set by the brewRenderer.

For example, here is a good result:

Note that I have the brewRenderer sized to just fit the page.

But I open the preview panel up a bit with more space, this is the result:

This is true even with a default page, without custom styling. It seems likely that the capture is including the node's margin ? So with a wide brewRenderer, the margin is larger, and the captured image is very wide (and thus not fitting in the thumbnail box).

Edit: You can change the css of the captured node before the capture. I left a comment on that line.

There are a lot of cross-origin errors in the console when using this tool, all related to issues getting external stylesheets from fontawesome, googlefonts, etc.

Gazook89 · 2024-02-08T04:44:11Z

client/homebrew/editor/metadataEditor/metadataEditor.jsx

+
+	ThumbnailCapture : async function() {
+		const bR = parent.document.getElementById('BrewRenderer');
+		const brewRenderer = bR.contentDocument || bR.contentWindow.document;


Curious why this is an OR between contentDocument and contentWindow.document? From what I can tell, it is the same thing?

My memory of the reference code is that it should be the same but for some browser situations, it may not be.

Gazook89 · 2024-02-08T04:51:04Z

client/homebrew/editor/metadataEditor/metadataEditor.jsx

@@ -333,6 +350,9 @@ const MetadataEditor = createClass({
 						<button className='display' onClick={this.toggleThumbnailDisplay}>
 							<i className={`fas fa-caret-${this.state.showThumbnail ? 'right' : 'left'}`} />
 						</button>
+						<button className='display' onClick={this.ThumbnailCapture}>
+							<i className={`fas fa-image`} />


Do you think that switching to a camera icon is something to consider?

<i class="fas fa-camera"></i>

Maybe the fa-image icon is more indicative of "open from image library" rather than "generate new picture". Further, even though none of the other fields/controls currently have one, maybe this should have a tooltip?

This is an excellent idea. I will do that.

Gazook89

Added a comment about removing the page margin before capture.

(sorry for the "second" review, still getting the hang of them and didn't realize you couldn't append to an existing review)

Gazook89 · 2024-02-08T05:48:17Z

client/homebrew/editor/metadataEditor/metadataEditor.jsx

+		const topPage = brewRenderer.getElementsByClassName('page')[0];
+		const props = this.props;
+
+		htmlimg.toPng(topPage, { preferredFontFormat: 'woff2' }).then(function(dataURL){


Remove the .page margin before doing the capture:

htmlimg.toPng(topPage, { preferredFontFormat: 'woff2', style: { margin: 'unset' } }).then(function(dataURL){

dbolack-ab · 2024-03-04T20:07:29Z

There are a lot of cross-origin errors in the console when using this tool, all related to issues getting external stylesheets from fontawesome, googlefonts, etc.

Yeah, that's been a problem for me here and I believe is at least one factor on the PDF generation. My thinking was that while imperfect it should handle the majority of coverpages.

dbolack-ab · 2024-03-04T20:52:26Z

I'm going to push this back to draft until I can sort out a way to deal with the Cross-site issues.

Add suggested changes

5e-Cleric · 2024-05-09T06:59:51Z

It seems like the generated image's "frame" is set by the brewRenderer.

For example, here is a good result:

Am i the only one to notice the Drop cap missing?

Also, we could use this with #3321 to auto generate previews?

5e-Cleric · 2024-05-09T07:04:07Z

I'm assuming you have read https://developers.google.com/privacy-sandbox/3pcd

5e-Cleric · 2024-05-09T07:06:15Z

Wow, tried the tool, so far:

bundle.js:92207 Error inlining remote css file DOMException: Failed to read the 'cssRules' property from 'CSSStyleSheet': Cannot access rules
    at https://homebrewery-pr-3219.herokuapp.com/homebrew/bundle.js:92169:39
    at Array.forEach (<anonymous>)
    at https://homebrewery-pr-3219.herokuapp.com/homebrew/bundle.js:92166:19
    at step (https://homebrewery-pr-3219.herokuapp.com/homebrew/bundle.js:92040:17)
    at Object.next (https://homebrewery-pr-3219.herokuapp.com/homebrew/bundle.js:91989:14)
    at https://homebrewery-pr-3219.herokuapp.com/homebrew/bundle.js:91963:67
    at new Promise (<anonymous>)
    at __awaiter (https://homebrewery-pr-3219.herokuapp.com/homebrew/bundle.js:91945:10)
    at getCSSRules (https://homebrewery-pr-3219.herokuapp.com/homebrew/bundle.js:92160:10)
    at https://homebrewery-pr-3219.herokuapp.com/homebrew/bundle.js:92246:32
xaZALQf_WN5H:1 Access to fetch at 'https://use.fontawesome.com/releases/v5.15.1/css/all.css' from origin 'https://homebrewery-pr-3219.herokuapp.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
bundle.js:92072 
 GET https://use.fontawesome.com/releases/v5.15.1/css/all.css net::ERR_FAILED
bundle.js:92204 Error loading remote stylesheet TypeError: Failed to fetch
    at bundle.js:92072:32
    at step (bundle.js:92040:17)
    at Object.next (bundle.js:91989:14)
    at bundle.js:91963:67
    at new Promise (<anonymous>)
    at __awaiter (bundle.js:91945:10)
    at fetchCSS (bundle.js:92063:10)
    at bundle.js:92197:30
    at Array.forEach (<anonymous>)
    at bundle.js:92166:19
bundle.js:92204 Error loading remote stylesheet DOMException: Failed to read the 'cssRules' property from 'CSSStyleSheet': Cannot access rules
    at https://homebrewery-pr-3219.herokuapp.com/homebrew/bundle.js:92201:51
    at Array.forEach (<anonymous>)
    at https://homebrewery-pr-3219.herokuapp.com/homebrew/bundle.js:92200:42
    at async Promise.all (index 1)
bundle.js:92220 Error while reading CSS rules from https://use.fontawesome.com/releases/v5.15.1/css/all.css DOMException: Failed to read the 'cssRules' property from 'CSSStyleSheet': Cannot access rules
    at https://homebrewery-pr-3219.herokuapp.com/homebrew/bundle.js:92216:41
    at Array.forEach (<anonymous>)
    at https://homebrewery-pr-3219.herokuapp.com/homebrew/bundle.js:92213:21
bundle.js:92220 Error while reading CSS rules from https://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700 DOMException: Failed to read the 'cssRules' property from 'CSSStyleSheet': Cannot access rules
    at https://homebrewery-pr-3219.herokuapp.com/homebrew/bundle.js:92216:41
    at Array.forEach (<anonymous>)
    at https://homebrewery-pr-3219.herokuapp.com/homebrew/bundle.js:92213:21

dbolack-ab · 2024-05-12T16:34:52Z

Wow, tried the tool, so far:

bundle.js:92207 Error inlining remote css file DOMException: Failed to read the 'cssRules' property from 'CSSStyleSheet': Cannot access rules
    at https://homebrewery-pr-3219.herokuapp.com/homebrew/bundle.js:92169:39
    at Array.forEach (<anonymous>)
    at https://homebrewery-pr-3219.herokuapp.com/homebrew/bundle.js:92166:19
    at step (https://homebrewery-pr-3219.herokuapp.com/homebrew/bundle.js:92040:17)
    at Object.next (https://homebrewery-pr-3219.herokuapp.com/homebrew/bundle.js:91989:14)
    at https://homebrewery-pr-3219.herokuapp.com/homebrew/bundle.js:91963:67
    at new Promise (<anonymous>)
    at __awaiter (https://homebrewery-pr-3219.herokuapp.com/homebrew/bundle.js:91945:10)
    at getCSSRules (https://homebrewery-pr-3219.herokuapp.com/homebrew/bundle.js:92160:10)
    at https://homebrewery-pr-3219.herokuapp.com/homebrew/bundle.js:92246:32
xaZALQf_WN5H:1 Access to fetch at 'https://use.fontawesome.com/releases/v5.15.1/css/all.css' from origin 'https://homebrewery-pr-3219.herokuapp.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
bundle.js:92072 
 GET https://use.fontawesome.com/releases/v5.15.1/css/all.css net::ERR_FAILED
bundle.js:92204 Error loading remote stylesheet TypeError: Failed to fetch
    at bundle.js:92072:32
    at step (bundle.js:92040:17)
    at Object.next (bundle.js:91989:14)
    at bundle.js:91963:67
    at new Promise (<anonymous>)
    at __awaiter (bundle.js:91945:10)
    at fetchCSS (bundle.js:92063:10)
    at bundle.js:92197:30
    at Array.forEach (<anonymous>)
    at bundle.js:92166:19
bundle.js:92204 Error loading remote stylesheet DOMException: Failed to read the 'cssRules' property from 'CSSStyleSheet': Cannot access rules
    at https://homebrewery-pr-3219.herokuapp.com/homebrew/bundle.js:92201:51
    at Array.forEach (<anonymous>)
    at https://homebrewery-pr-3219.herokuapp.com/homebrew/bundle.js:92200:42
    at async Promise.all (index 1)
bundle.js:92220 Error while reading CSS rules from https://use.fontawesome.com/releases/v5.15.1/css/all.css DOMException: Failed to read the 'cssRules' property from 'CSSStyleSheet': Cannot access rules
    at https://homebrewery-pr-3219.herokuapp.com/homebrew/bundle.js:92216:41
    at Array.forEach (<anonymous>)
    at https://homebrewery-pr-3219.herokuapp.com/homebrew/bundle.js:92213:21
bundle.js:92220 Error while reading CSS rules from https://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700 DOMException: Failed to read the 'cssRules' property from 'CSSStyleSheet': Cannot access rules
    at https://homebrewery-pr-3219.herokuapp.com/homebrew/bundle.js:92216:41
    at Array.forEach (<anonymous>)
    at https://homebrewery-pr-3219.herokuapp.com/homebrew/bundle.js:92213:21

Hmm. Looks like the CORS related issues have gotten worse.

The only idea I've had around solving this is is to put proxy endpoint on the app and translate URLs when this function is called.

dbolack-ab · 2024-05-29T03:50:25Z

Closing in favor of #3501.

dbolacksn added 4 commits December 24, 2023 18:13

Remove old, non-base themes.

27d53f2

Remove 5ePHB assets and fonts.

Revert "Remove old, non-base themes."

699f64c

This reverts commit 27d53f2.

Baseline functionality for thumbnail.

1192307

Semi-working draft.

180a8c8

There are two bugs that may be resolved by being on HTTPS

dbolack-ab marked this pull request as draft January 6, 2024 17:23

Merge branch 'master' into MagicThumbnail

c6c0a46

dbolack-ab mentioned this pull request Jan 17, 2024

[FEATURE]: Save Brew to Image #2278

Open

calculuschild temporarily deployed to homebrewery-pr-3219 January 17, 2024 17:22 Inactive

calculuschild temporarily deployed to homebrewery-pr-3219 January 18, 2024 20:04 Inactive

calculuschild temporarily deployed to homebrewery-pr-3219 January 18, 2024 20:07 Inactive

dbolack-ab self-assigned this Jan 21, 2024

dbolack-ab changed the title ~~Magic thumbnail~~ Automatic Brew thumbnail generation option Jan 25, 2024

Merge branch 'master' into MagicThumbnail

33021e1

calculuschild temporarily deployed to homebrewery-pr-3219 January 25, 2024 19:28 Inactive

dbolack-ab marked this pull request as ready for review January 25, 2024 19:51

Merge branch 'master' into MagicThumbnail

14a37c1

calculuschild temporarily deployed to homebrewery-pr-3219 January 25, 2024 20:01 Inactive

dbolack-ab requested a review from calculuschild January 28, 2024 02:06

Merge branch 'master' into MagicThumbnail

cea05a3

calculuschild temporarily deployed to homebrewery-pr-3219 February 8, 2024 02:31 Inactive

Gazook89 reviewed Feb 8, 2024

View reviewed changes

Gazook89 requested changes Feb 8, 2024

View reviewed changes

5e-Cleric added the feature label Feb 9, 2024

dbolack-ab marked this pull request as draft March 4, 2024 20:52

Merge branch 'master' into MagicThumbnail

83ae4f9

Add suggested changes

calculuschild temporarily deployed to homebrewery-pr-3219 March 4, 2024 20:54 Inactive

dbolacksn added 2 commits March 5, 2024 16:57

WIP

81148b4

Merge branch 'master' of github.com:naturalcrit/homebrewery

f0a8020

calculuschild temporarily deployed to homebrewery-pr-3219 March 23, 2024 10:57 Inactive

dbolacksn added 2 commits March 23, 2024 05:59

Merge branch 'master' of github.com:naturalcrit/homebrewery

9848e4b

Merge branch 'master' of github.com:naturalcrit/homebrewery

5d87508

calculuschild added 🔍 R2 - Reviewed - Needs Help 🫱 PR is okayed but is stuck on an obstacle and removed 🔍 R3 - Reviewed - Awaiting Fixes 🔧 PR is okayed but needs fixes before merging labels Apr 4, 2024

dbolacksn added 3 commits April 20, 2024 19:12

Merge branch 'master' of github.com:naturalcrit/homebrewery

ec5f825

Merge branch 'master' of github.com:naturalcrit/homebrewery

b86502a

Merge branch 'master' of github.com:naturalcrit/homebrewery

9d6076f

Merge branch 'master' of github.com:naturalcrit/homebrewery

5494c02

Merge branch 'master' into MagicThumbnail

e458b9d

calculuschild temporarily deployed to homebrewery-pr-3219 May 12, 2024 16:36 Inactive

dbolack-ab added the blocked Waiting on a dependency, other feature, etc., first label May 20, 2024

dbolack-ab mentioned this pull request May 29, 2024

Improved Automatic Brew thumbnail generation option #3501

Open

dbolack-ab closed this May 29, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Automatic Brew thumbnail generation option #3219

Automatic Brew thumbnail generation option #3219

dbolack-ab commented Dec 31, 2023 •

edited

dbolack-ab commented Jan 25, 2024

Gazook89 left a comment •

edited

Gazook89 Feb 8, 2024

dbolack-ab Mar 4, 2024

Gazook89 Feb 8, 2024

dbolack-ab Mar 4, 2024

Gazook89 left a comment

Gazook89 Feb 8, 2024

dbolack-ab commented Mar 4, 2024

dbolack-ab commented Mar 4, 2024

5e-Cleric commented May 9, 2024

5e-Cleric commented May 9, 2024

5e-Cleric commented May 9, 2024

dbolack-ab commented May 12, 2024

dbolack-ab commented May 29, 2024

Automatic Brew thumbnail generation option #3219

Automatic Brew thumbnail generation option #3219

Conversation

dbolack-ab commented Dec 31, 2023 • edited

dbolack-ab commented Jan 25, 2024

Gazook89 left a comment • edited

Choose a reason for hiding this comment

Gazook89 Feb 8, 2024

Choose a reason for hiding this comment

dbolack-ab Mar 4, 2024

Choose a reason for hiding this comment

Gazook89 Feb 8, 2024

Choose a reason for hiding this comment

dbolack-ab Mar 4, 2024

Choose a reason for hiding this comment

Gazook89 left a comment

Choose a reason for hiding this comment

Gazook89 Feb 8, 2024

Choose a reason for hiding this comment

dbolack-ab commented Mar 4, 2024

dbolack-ab commented Mar 4, 2024

5e-Cleric commented May 9, 2024

5e-Cleric commented May 9, 2024

5e-Cleric commented May 9, 2024

dbolack-ab commented May 12, 2024

dbolack-ab commented May 29, 2024

dbolack-ab commented Dec 31, 2023 •

edited

Gazook89 left a comment •

edited