Commit Graph

107 Commits

Author SHA1 Message Date
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
Sendil Kumar
a8db2b30f2 fix broken file renaming for file names with dot
remove grouping in regex
2018-08-29 13:12:33 +02:00
Jake Archibald
65c3ea826f Avoid preprocessing images that have already been preprocessed. (#125)
* Avoid preprocessing images that have already been preprocessed.

* Using cleanMerge an cleanSet, and fixing bugs in our compression.
2018-08-10 12:59:29 +01:00
Jake Archibald
44f0700332 Adding clean-set (#124)
* Adding clean-set

* Moving to our own cleanSet and cleanMerge.

* Oops, this can be simpler

* Allow the path to be a number

* Better typing
2018-08-07 12:19:06 +01:00
Jason Miller
c90db020b0 Snackbar (#99)
* Initial swing

* Finish up <snack-bar> implementation and integrate it

* Add missing types

* Use shift() since we dont care about referential equality

* Use `_` for private fields

* Remove rogue handler

* Remove impossible fallback value

* Make `<snack-bar>` actually contain its children

* will-change for the button ripple

* Guard against mutliple button action clicks

* `onhide()` -> `onremove()`

* remove transitionend

* Replace inline ref callback with linkRef

* showError only accepts strings

* Remove undefined initialization

* Throw on error

* Add missing error type.

* `SnackBar` ▶️ `Snack`

* Avoid child retaining a reference to parent, make show() return a Promise.

* async/await and avoid processing the stack if it is already being processed

* Add a meaningful return value to showSnackbar()
2018-08-06 14:32:48 +01:00
Jake Archibald
d3f2836f48 Hide quantize options if original image. Fixes #120. 2018-08-02 16:59:13 +01:00
Jake Archibald
27722f77f9 Simplifying new object creation 2018-08-02 16:56:15 +01:00
Jake Archibald
3a0db14c40 Minor tweaks 2018-08-02 16:52:57 +01:00
Jake Archibald
e0dc1b48ec Creating new objects rather than mutating existing objects. Fixes #121. 2018-08-02 16:52:11 +01:00
Surma
c550fe9283 Refactor preprocessors module 2018-08-01 12:32:45 +01:00
Surma
e8c0ddfc7f Remove lambda from JSX 2018-07-31 12:41:02 +01:00
Surma
a002b376af Hook up options UI to quantizer 2018-07-31 12:32:37 +01:00
Surma
2165383da4 Start integrating quantizer in the main data flow 2018-07-30 16:54:30 +01:00
Surma
5fbf6b297f Hardcode quantization pass 2018-07-30 16:28:37 +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
b15545402a Adressing smaller review comments 2018-07-20 10:56:39 +01:00
Surma
307c6b05ae Write out logging command 2018-07-20 10:56:38 +01:00
Jason Miller
77a6d21924 show decode errors reliably. 2018-07-20 10:56:37 +01:00
Surma
790a5b580d Set up decoder infrastructure 2018-07-20 10:56:36 +01:00
Jake Archibald
6e8f8bbe41 Vertical two-up (#100)
* Fixing bad property name.

* Allowing two-up to work vertically at smaller widths.

* Switching to orientation attr

* Fixing type and getter/setter behaviour
2018-07-20 09:32:18 +01:00
Jake Archibald
cc9d01a9ab Basic webp integration (#103) 2018-07-17 10:37:42 +01:00
Paul Kinlan
526520c399 Adds support for onpaste #97 (#98)
* Adds support for onpaste #97

+ file-drop listens for onpaste, if there is data and it matches the
   type it will use that and raise a custom event
+ Adds a new event on file drop 'onfiledrop'
+ App listens for this event and will map to onFileDrop

* Hoisting getFileData

* The linter seems to think Array.from is of type File, when it's not.

* Remove an entire type of event handler.
+ Removes onfilepaste, joins into 'onfiledrop'
+ Adds 'action' to let you distinguish between the paste or drop
+ Updates app so it just uses the one event.

* Fixing PR issues

+ null return types >>> undefiend.
+ FileDropAction type.
+ remove coercsion on the array types.
2018-07-16 14:00:47 +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
3867448aad All the encoders that Chrome/Safari/Firefox support out of the box. (#74)
* All the encoders that Chrome/Safari/Firefox support out of the box.

* Typo
2018-07-02 19:10:10 +01:00
Jake Archibald
807a76d443 Adding download support. Fixes #47. 2018-07-02 19:04:09 +01:00
Jake Archibald
3e26a0a3cc Fixing file drop for Safari & Edge (#73) 2018-07-02 18:55:46 +01:00
Jake Archibald
68729979e3 Adding browser's webp encoder (#72)
* Adding WebP (without feature detect in place)

* Adding WebP check

* Remove unused import
2018-07-02 15:49:52 +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
3f18c927f1 Allow mouse wheel on two-up handle. Fixes #49 (#54) 2018-07-02 09:17:57 +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
Paul Kinlan
7c220b1a92 Adding in Drag and Drop support to fix #45 (#56)
* Merging file drop

* Fixing double drop
2018-06-29 16:37:48 +01: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
7ff18e6ae1 Merge pull request #35 from GoogleChromeLabs/load-codec
Load mozjpeg codec and encode image
2018-05-22 14:23:10 +02:00
Surma
5245c5ca6e Put bitmapToImageData into utils module 2018-05-21 13:46:29 +01:00
Surma
a9e1c38971 Style nitz 2018-05-21 13:36:05 +01:00
Jake Archibald
a7598b6602 Integrating two-up (#34) 2018-05-18 14:52:00 +01:00
Surma
49db0de05f Actually piping the data through the compressor 2018-05-17 22:27:24 +01:00
Surma
7edb7f0de8 Wrangling TypeScript and webpack to work with Emscripten wasm stuff 2018-05-17 11:24:40 +01:00
Jake Archibald
444e59c69c Merging pinch-zoom (#27)
* Merging pinch-zoom

* Pixelated output
2018-05-04 20:03:57 +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
11bebfc836 A11y: add aria attribute to give the upload field a name 2018-04-17 14:08:49 -04:00
Jason Miller
5936c57a82 Clean up app to remove old prerendering bits 2018-04-17 14:05:50 -04:00
Jason Miller
fbcd16063d Load images as both binary strings and blobs. 2018-03-30 16:26:00 -04:00
Jason Miller
d023263f57 In development, persist application state across hot reloads. 2018-03-30 16:25:41 -04:00
Jason Miller
5cfeefa86c Fix missing header 2018-03-29 23:12:18 -04:00
Jason Miller
048524ce91 toggleDrawer() -> onToggleDrawer() 2018-03-29 15:49:56 -04:00