Commit Graph

35 Commits

Author SHA1 Message Date
Jake Archibald
66aac12db7 Caught a bit of repetition in our utils (#242)
Caught a bit of repetition in our utils
2018-11-06 14:19:48 +00:00
Jake Archibald
d93169cc5a Mobile ui (#227)
* Basic grid setup

* Fixing thumb on two-up

* Adding margin so you can still access the two-up

* Allow multi-panel to keep one open only

* Edge cases for one-open

* Abstracting results so it can be used as a heading.

* Ordering of items in mobile view. Changing scrolling element.

* Adding labels to collapsed view

* Adding height animation to multi-panel

* Fixing animation bugs

* Expand/collapse icon

* Allow two-up and pinch-zoom to work beneath controls

* Range bubble now behaves properly on mobile

* No longer need this.

* Prevent options overflow at larger widths
2018-11-06 13:37:52 +00:00
Jake Archibald
bdd3c11f1a Options ui (#222)
* wip

* Commenting stuff to keep the build happy

* Revealing sections

* Custom select elements & more form work

* Range input styles

* Text fields with inputs do the right thing

* Safari & Firefox fixes

* Large compress select

* oops

* MozJPEG options updated

* OptPNG options

* These asserts weren't true

* Generic options

* WebP options

* Hiding "edit" when "original image"

* Download icon

* Copy setting button - still not happy with this

* Progress indicator

* Loading icon enter/exit anim

* Preventing controls going under options

* Ahh so that's what was causing scrolling

* Ahh so that's what was causing outlines

* Simplifying range styles and fixing cross-browser

* Processing custom element styles

* Get precision from step by default

* I don't know how or when this happened.

* Don't need that many steps

* Avoid having an element that covers the pinch zoom

* Preventing overlap with zoom controls

* Prevent ts warning

* Fixing spinner position

* Simplifying FileSize
2018-11-06 13:36:23 +00:00
Jake Archibald
02b0c022ca Edge encode fix (#211)
* No canvas.toBlob in Edge.

* pffft
2018-10-20 14:50:37 +01:00
Jake Archibald
c82d0d1b88 Fix for loading SVG in Safari. (#212)
* Fix for loading SVG in Safari.

* Tidier code
2018-10-20 14:50:16 +01:00
Jake Archibald
e24d7865ce Lazy-loading the main part of the app (#197)
* Splitting main part of app out of the main bundle.

Also improving the transition from intro to compressor.

* Showing error if app fails to load.

* lol these aren't async

* Please don't tell anyone I did this

* Spinner if user selects a file before the app has loaded. (#208)
2018-10-20 12:53:36 +01:00
Jake Archibald
d2f60baef9 Handle vectors (#187)
* Allow loading SVG. Fixes #138.

I also made the resizer vector-aware, so you can resize the image larger & stay sharp.

* Handling SVG without width/height set.

* Simplifying maths

* Doh, case sensitive
2018-10-11 14:15:01 +01:00
Jake Archibald
248676aa31 Fixing webp sniffing. Fixes #178. (#179) 2018-10-02 11:30:38 +01:00
Jake Archibald
cfd42818b7 Edge file constructor fix (#180)
* Hacking around lack of `new File` in Edge.

* Less hacky solution - preserves types
2018-09-28 14:44:59 +01:00
Jake Archibald
c9fe5ffbcf Creating fallbacks for all ImageBitmap usage & refactoring. (#175)
Fixes #173
2018-09-27 14:44:54 +01:00
Jake Archibald
ea5d3c2d78 Adding resize preprocessor (#152)
* Adding resize preprocessor

* Using ! on form

* Haha oops

* Using createImageBitmapPolyfill

* Updating package.json

* Oops again

* Ooops again
2018-09-05 15:46:26 +01:00
Jason Miller
32f6f8b941 Options UI (#135)
* Move gzipped size calculations into a worker and wrap it up in a `<GzipSize />` component that will also handle showing % of original size once that info is plumbed

* A couple tweaks for the app welcome (drop files) screen. We don't have mocks for this one, but this is at least a minor improvement.

* Prettier "pop" effect and styling for the drop zone/indicator.

* Styling for the quantization toggle to make it look like a disclosure triangle/button.

* Add controls bar (zoom in/out/to, background toggle). @todo: extract into its own component.

* When clicking/tapping the image area, give it focus.

* Utilities used by this PR

* Add a `two-up-handle` attribute to the handle for easier styling (classname gets mangled so it doesn't make for a good public API)

* Add a dummy comment to test netlify deploy

* Remove commented-out code.

* Fix styling of vertical split (which as it turns out is slightly different in the mocks anyway)

* Use a composited overlay for the dark background instead of animating background-color

* Move grayscale styling into `<two-up>` by default, then set colors via custom properties

* Remove commented-out svg fill

* Remove dummy comment

* Change `<GzipSize>` to be `<FileSize>`, add `compress` option that lets us show gzipped sizes later if we need. Defaults to `false`, and the gzip worker is only lazily instantiated the first time a compressed size calculation is requested.

* Dependency updates

* Remove color animations from dnd overlay

* Don't use a cyclical import for EncodedImage, instead just specify the types of the properties we Options actually uses.

* Pass source image through to FileSize component so it can compute delta

* Stylize size display with colors based on delta amount/direction

* Remove box-shadow animation.

* Simplify font stack

* Remove commented out code

* Remove gzip compression from size component

* Remove memoization bits

* Use specific flattend props instead of passing large context objects around.

* Remove unused packages.

* Remove unreachable String case in FileSize, and omit redundant File type

* Simplify calculateSize()

* Fix types for FileSize!

* Remove FileSize title

* Make delta variable consistent.

* Skip passing compareTo value for original image

* Remove manual focus

* Fix whitespace

* remove unused keyframes

* remove pointless flex-wrap property

* Remove unused resetZoom() method

* Remove pointless flex properties

* Use `on` prefix for event handling

* Remove pointless justify-self property

* Use an inline SVG for TwoUp's handle icon so it can be colored from outside the component..

* Move orientation state up from `<Output>` into `<App>` and share it with `<Options>`.

* Make the options panels responsive :)

* Show a plus sign for size increases `(+8%)`

* Use inline SVG for the zoom +/- icons, collect SVG icons into one file now that I've verified they get tree-shaken properly.

* Fix top/bottom options panels being reversed

* remove commented out code

* lockfile

* Revert quanitzation toggle styles so it's just a checkbox.

* Remove minimum delta for compare size

* Rename data prop to file.

* scale int -> float

* remove tabIndex

* Remove old icon files

* Add width to options panels

* Add vertical scrolling when options are taller than 80% of the screen height.
2018-09-05 08:21:54 +01:00
Surma
54ad30a7ed Optipng (#156)
* omg it’s compiling

* example actually works

* Expose compression level options

* Disable crypto and path module emulation in webpack

* Update README

* Remove small image

* Use -O3 on optipng

* Free memory after copy

* Handle unexpected file reader return types

* Rename level label to effort
2018-09-04 16:49:45 +01:00
Jake Archibald
1ae65dd4a1 Mozjpeg opts (#140)
* Switching to embind

* Adding options to mozjpeg wasm

* Updating packages

* Ditching enum - causing more problems than it's worth

* Adding mozjpeg options UI

* Forgot about this enum

* Bools just work
2018-08-17 16:25:28 +01:00
Jake Archibald
602d5140f9 Konami code fix. lol. Thanks @remy. 2018-08-08 14:47:58 +01:00
Jake Archibald
ef4094885e Easter egg (#123)
* lol zx quant

* Adding ZX option

* Improving colour selection so we don't end up with the same colour twice. Also fixing a bug with the colour conflict resolution.

* Putting it behind a konami code

* Better comments

* Adding comment

* Removing unnecessary malloc.
2018-08-06 12:42:23 +01:00
Surma
c550fe9283 Refactor preprocessors module 2018-08-01 12:32:45 +01:00
Surma
4ee5572d2f Jake’s thoroughness is doing my head in :P 2018-07-20 11:12:42 +01:00
Surma
df7e112d22 Nits by Jake 2018-07-20 10:58:07 +01:00
Surma
13ac3ed5b2 Use createImageBitmap as hailmary 2018-07-20 10:56:40 +01:00
Surma
b7c223bc0d Remove baseline image decoders, refactor decodeFile 2018-07-20 10:56:40 +01:00
Surma
0f08121596 Implement mime type sniffing 2018-07-20 10:56:39 +01:00
Surma
b15545402a Adressing smaller review comments 2018-07-20 10:56:39 +01:00
Surma
790a5b580d Set up decoder infrastructure 2018-07-20 10:56:36 +01:00
Jason Miller
835a537c55 Fix lint issues resulting from switching to airbnb (#94)
* Fix lint issues resulting from switching to airbnb.

* Case sensitivity change

* Fix lint script to actually lint tsx files
2018-07-10 14:01:09 +01:00
Jake Archibald
a09ec269b8 Adding native encoders (#71)
* Adding browser png

* Adding native JPEG & file size output

* Removing log

* Fixing blob typing

* Fix timing issue
2018-07-02 15:14:09 +01:00
Jake Archibald
9add650b75 Refactorings (#65)
* Refactorings

* Responding to feedback
2018-07-01 16:01:42 +01:00
Paul Kinlan
3b9b1e9f2e Fixing issues raised by the linter. Fixes #68
+ just cleans up issues, and disables one test that can't be fixed.
+ biggest change is encoders not using multiple imports now.
2018-06-29 21:12:17 +00:00
Jason Miller
3035a68b90 Options UI (#39)
* Initial work to add Options config

* Use a single encoder instance and retry up to 10 times on failure.

* Switch both sides to allow encoding from the source image, add options configuration for each.

* Styling for options (and a few tweaks for the app)

* Dep updates.

* Remove commented out code.

* Fix Encoder typing

* Fix lint issues

* Apparently I didnt have tslint autofix enabled on the chromebook

* Attempt to fix layout/panning issues

* Fix missing custom element import!

* Fix variable naming, remove dynamic encoder names, remove retry, allow encoders to return ImageData.

* Refactor state management to use an Array of objects and immutable updates instead of relying on explicit update notifications.

* Add Identity encoder, which is a passthrough encoder that handles the "original" view.

* Drop comlink-loader into the project and add ".worker" to the jpeg encoder filename so it runs in a worker (🦄)

* lint fixes.

* cleanup

* smaller PR feedback fixes

* rename "jpeg" codec to "MozJpeg"

* Formatting fixes for Options

* Colocate codecs and their options UIs in src/codecs, and standardize the namings

* Handle canvas errors

* Throw if quality is undefined, add default quality

* add note about temp styles

* add note about temp styles [2]

* Renaming updateOption

* Clarify option input bindings

* Move updateCanvas() to util and rename to drawBitmapToCanvas

* use generics to pass through encoder options

* Remove unused dependencies

* fix options type

* const

* Use `Array.prototype.some()` for image loading check

* Display encoding errors in the UI.

* I fought typescript and I think I won

* This doesn't need to be optional

* Quality isn't optional

* Simplifying comlink casting

* Splitting counters into loading and displaying

* Still loading if the loading counter isn't equal.
2018-06-29 16:29:18 +01:00
Surma
5303afe9ad Fix code lint complaints 2018-06-26 15:11:07 +01:00
Surma
5245c5ca6e Put bitmapToImageData into utils module 2018-05-21 13:46:29 +01:00
Jake Archibald
b619427237 Removing everything that isn't skeletonyy (#22)
* Simplifying

* Ignoring CSS defs
2018-05-04 09:20:34 -07:00
Jason Miller
fc84c81a47 Make @bind the same as Surma's implementation 2018-03-30 13:32:16 -04:00
Jason Miller
8f452ddf6d Our simplified @bind decorator didn't work :( The getter is needed in order to defer binding until there is an instance to bind to, the simpler implementation actually bound methods to the prototype itself. 2018-03-29 23:13:03 -04:00
Jason Miller
5e6500d196 Use strict TypeScript, enable TSLint, update all types to work in strict mode. 2018-03-29 15:42:07 -04:00