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
Options UI #39
Merged
Merged
Options UI #39
Changes from all commits
Commits
Show all changes
40 commits
Select commit
Hold shift + click to select a range
a2bec39
Initial work to add Options config
developit 837e38a
Use a single encoder instance and retry up to 10 times on failure.
developit 64eb3f9
Switch both sides to allow encoding from the source image, add option…
developit 22ef181
Styling for options (and a few tweaks for the app)
developit 8b73be0
Dep updates.
developit 25c0805
Remove commented out code.
developit 59a3517
Fix Encoder typing
developit 06e4483
Fix lint issues
developit bb4ac4c
Apparently I didnt have tslint autofix enabled on the chromebook
developit 4d4d9b1
Attempt to fix layout/panning issues
developit 70d2927
Fix missing custom element import!
developit e3ca13c
Fix variable naming, remove dynamic encoder names, remove retry, allo…
developit b069c7f
Refactor state management to use an Array of objects and immutable up…
developit d4c4ae4
Add Identity encoder, which is a passthrough encoder that handles the…
developit 7d136db
Drop comlink-loader into the project and add ".worker" to the jpeg en…
developit 11e6197
lint fixes.
developit 13cac89
cleanup
developit 9776670
smaller PR feedback fixes
developit 820d6f5
rename "jpeg" codec to "MozJpeg"
developit 8e7d468
Formatting fixes for Options
developit 148faa8
Colocate codecs and their options UIs in src/codecs, and standardize …
developit c21413a
Handle canvas errors
developit 8e27c5e
Throw if quality is undefined, add default quality
developit e83628a
add note about temp styles
developit e7fce7d
add note about temp styles [2]
developit b4ea56f
Renaming updateOption
jakearchibald d85218a
Clarify option input bindings
developit 984b5fe
Move updateCanvas() to util and rename to drawBitmapToCanvas
developit 62fa05d
use generics to pass through encoder options
developit 9fffc2a
Remove unused dependencies
developit f1cbd26
fix options type
developit 453e315
const
developit da6d1c4
Use `Array.prototype.some()` for image loading check
developit a7f53ed
Display encoding errors in the UI.
developit d618310
I fought typescript and I think I won
jakearchibald 3ee32c9
This doesn't need to be optional
jakearchibald 3d3034f
Quality isn't optional
jakearchibald d0ad2b2
Simplifying comlink casting
jakearchibald c94e6dc
Splitting counters into loading and displaying
jakearchibald cbd84d3
Still loading if the loading counter isn't equal.
jakearchibald File filter
Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
There are no files selected for viewing
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,15 @@ | ||
import * as mozJPEG from './mozjpeg/encoder'; | ||
import { EncoderState as MozJPEGEncodeData, EncodeOptions as MozJPEGEncodeOptions } from './mozjpeg/encoder'; | ||
import * as identity from './identity/encoder'; | ||
import { EncoderState as IdentityEncodeData, EncodeOptions as IdentityEncodeOptions } from './identity/encoder'; | ||
|
||
export type EncoderState = IdentityEncodeData | MozJPEGEncodeData; | ||
export type EncoderOptions = IdentityEncodeOptions | MozJPEGEncodeOptions; | ||
export type EncoderType = keyof typeof encoderMap; | ||
|
||
export const encoderMap = { | ||
[identity.type]: identity, | ||
[mozJPEG.type]: mozJPEG | ||
}; | ||
|
||
export const encoders = Array.from(Object.values(encoderMap)); | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,6 @@ | ||
export interface EncodeOptions {} | ||
export interface EncoderState { type: typeof type; options: EncodeOptions; } | ||
|
||
export const type = 'identity'; | ||
export const label = 'Original image'; | ||
export const defaultOptions: EncodeOptions = {}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,16 @@ | ||
import EncoderWorker from './EncoderWorker'; | ||
|
||
export interface EncodeOptions { quality: number; } | ||
export interface EncoderState { type: typeof type; options: EncodeOptions; } | ||
|
||
export const type = 'mozjpeg'; | ||
export const label = 'MozJPEG'; | ||
export const mimeType = 'image/jpeg'; | ||
export const extension = 'jpg'; | ||
export const defaultOptions: EncodeOptions = { quality: 7 }; | ||
|
||
export async function encode(data: ImageData, options: EncodeOptions) { | ||
// We need to await this because it's been comlinked. | ||
const encoder = await new EncoderWorker(); | ||
return encoder.encode(data, options); | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,35 @@ | ||
import { h, Component } from 'preact'; | ||
import { EncodeOptions } from './encoder'; | ||
import { bind } from '../../lib/util'; | ||
|
||
type Props = { | ||
options: EncodeOptions, | ||
onChange(newOptions: EncodeOptions): void | ||
}; | ||
|
||
export default class MozJpegCodecOptions extends Component<Props, {}> { | ||
@bind | ||
onChange(event: Event) { | ||
const el = event.currentTarget as HTMLInputElement; | ||
this.props.onChange({ quality: Number(el.value) }); | ||
} | ||
|
||
render({ options }: Props) { | ||
return ( | ||
<div> | ||
<label> | ||
Quality: | ||
<input | ||
name="quality" | ||
type="range" | ||
min="1" | ||
max="100" | ||
step="1" | ||
value={'' + options.quality} | ||
onChange={this.onChange} | ||
/> | ||
</label> | ||
</div> | ||
); | ||
} | ||
} | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I removed state from this component. The form elements are still controlled, but by the app. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
We'll need to edit this file as we add new encoders. It isn't as DRY as I'd like, but I couldn't get TypeScript to do better.