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.

Sign up for GitHub

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

Jump to bottom

Automatic Brew thumbnail generation option #3219

Closed
wants to merge 18 commits into from
Closed

Automatic Brew thumbnail generation option #3219

Show file tree
Hide file tree
Changes from 8 commits
Commits
Show all changes
18 commits
Select commit Hold shift + click to select a range
27d53f2
Remove old, non-base themes.
dbolacksn Dec 25, 2023
699f64c
Revert "Remove old, non-base themes."
dbolacksn Dec 30, 2023
1192307
Baseline functionality for thumbnail.
dbolacksn Dec 30, 2023
180a8c8
Semi-working draft.
dbolacksn Dec 31, 2023
c6c0a46
Merge branch 'master' into MagicThumbnail
dbolacksn Jan 16, 2024
33021e1
Merge branch 'master' into MagicThumbnail
dbolacksn Jan 25, 2024
14a37c1
Merge branch 'master' into MagicThumbnail
dbolacksn Jan 25, 2024
cea05a3
Merge branch 'master' into MagicThumbnail
dbolack-ab Feb 8, 2024
83ae4f9
Merge branch 'master' into MagicThumbnail
dbolacksn Mar 4, 2024
81148b4
WIP
dbolacksn Mar 5, 2024
f0a8020
Merge branch 'master' of github.com:naturalcrit/homebrewery
dbolacksn Mar 20, 2024
9848e4b
Merge branch 'master' of github.com:naturalcrit/homebrewery
dbolacksn Mar 23, 2024
5d87508
Merge branch 'master' of github.com:naturalcrit/homebrewery
dbolacksn Mar 25, 2024
ec5f825
Merge branch 'master' of github.com:naturalcrit/homebrewery
dbolacksn Apr 21, 2024
b86502a
Merge branch 'master' of github.com:naturalcrit/homebrewery
dbolacksn May 1, 2024
9d6076f
Merge branch 'master' of github.com:naturalcrit/homebrewery
dbolacksn May 6, 2024
5494c02
Merge branch 'master' of github.com:naturalcrit/homebrewery
dbolacksn May 12, 2024
e458b9d
Merge branch 'master' into MagicThumbnail
dbolacksn May 12, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
24 changes: 22 additions & 2 deletions client/homebrew/editor/metadataEditor/metadataEditor.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ const request = require('../../utils/request-middleware.js');
const Nav = require('naturalcrit/nav/nav.jsx');
const Combobox = require('client/components/combobox.jsx');
const StringArrayEditor = require('../stringArrayEditor/stringArrayEditor.jsx');

const htmlimg = require('html-to-image');
const Themes = require('themes/themes.json');
const validations = require('./validations.js');

Expand All @@ -31,6 +31,8 @@ const MetadataEditor = createClass({
title : '',
description : '',
thumbnail : '',
thumbnailSm : null,
thumbnailLg : null,
tags : [],
published : false,
authors : [],
Expand All @@ -56,9 +58,24 @@ const MetadataEditor = createClass({
});
},


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

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

const topPage = brewRenderer.getElementsByClassName('page')[0];
const props = this.props;

htmlimg.toPng(topPage, { preferredFontFormat: 'woff2' }).then(function(dataURL){
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Remove the .page margin before doing the capture:

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

props.metadata.thumbnail = 'Page 1';
props.metadata.thumbnailSm = dataURL;
props.onChange(props.metadata);
});
},

renderThumbnail : function(){
if(!this.state.showThumbnail) return;
return <img className='thumbnail-preview' src={this.props.metadata.thumbnail || homebreweryThumbnail}></img>;
const imgURL = this.props.metadata.thumbnail.startsWith('Page 1') ? this.props.metadata.thumbnailSm : this.props.metadata.thumbnail;
return <img className='thumbnail-preview' src={imgURL || homebreweryThumbnail}></img>;
},

handleFieldChange : function(name, e){
Expand Down Expand Up @@ -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`} />
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

image 
<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?

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is an excellent idea. I will do that.

</button>
</div>
</div>
{this.renderThumbnail()}
Expand Down
2 changes: 1 addition & 1 deletion client/template.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ const template = async function(name, title='', props = {}){
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, height=device-height, interactive-widget=resizes-visual" />
<link href="//use.fontawesome.com/releases/v5.15.1/css/all.css" rel="stylesheet" />
<link href="//use.fontawesome.com/releases/v5.15.1/css/all.css" rel="stylesheet" type="text/css" />
<link href="//fonts.googleapis.com/css?family=Open+Sans:400,300,600,700" rel="stylesheet" type="text/css" />
<link href=${`/${name}/bundle.css`} rel='stylesheet' />
<link rel="icon" href="/assets/favicon.ico" type="image/x-icon" />
Expand Down
6 changes: 6 additions & 0 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -94,6 +94,7 @@
"express-async-handler": "^1.2.0",
"express-static-gzip": "2.1.7",
"fs-extra": "11.2.0",
"html-to-image": "^1.11.11",
"js-yaml": "^4.1.0",
"jwt-simple": "^0.5.6",
"less": "^3.13.1",
Expand Down