Villain v2.0.0

[btzr-io]

Tracking progress for next version:

• [x] Reduce dependencies.
• [x] Use a better dev-server for testing #481
• [x] Extend archive support ( rar, tar, zip, 7z )
• [x] Uncompress component to hook
• [x] Load images from array: https://github.com/btzr-io/Villain/issues/25
• [x] Add simple way for debugging loading and extracting process: https://github.com/btzr-io/Villain/issues/234 ( https://github.com/btzr-io/Villain/issues/634#issuecomment-686180899 )
• [x] More navigation options ( loop, auto-play, go-to-specific-page )
• [x] Encrypted archives https://github.com/btzr-io/Villain/issues/26
• [ ] Redesign website.
• [x] Events ( readyState tracking )
• [x] Add Hooks system https://github.com/btzr-io/Villain/issues/446
• [ ] Refactor repository structure.
• [x] New toolbar / controls : https://github.com/btzr-io/Villain/issues/34, https://github.com/btzr-io/Villain/issues/64
• [x] UI bugs.
• [ ] Add missing languages to the build.
• [ ] Update docs and use a documentation site generator https://github.com/btzr-io/Villain/issues/675

If you have more ideas or features that you will like to see for the next version leave a comment below.

[btzr-io]

Quick draft for the new API (based on hooks and events )

const eventHandlers = {
  OnLoading: () => { /* do something */ }
}

<Villain src={'my_archive.cbz'} options={...} events={EventHandlers}>
  <MyCustomImageRender />
  // Or use default UI
 <VillainUI options={ theme: 'dark', ...more } />
</Villain>

[btzr-io]

Also added a better way for tracking the progress from loading the archive to extraction of images. based on the HtmlMediaElement.readystate property. It can be used instead of custom listener for events.

This should be added to the docs as well:

export const READY_STATE = {
  // There is no archive or source to load
  NOTHING: 0,
  // Fetching archive from the web
  LOADING_ARCHIVE: 1,
  // Find all data to unpack
  READING_ARCHIVE: 2,
  // Unpack images and create pages
  UNPACKING_ARCHIVE: 3,
  // All pages where created
  READY: 4,
  // An error ocurred, the `error` property on the global store will contain more info
  ERROR: 5,
}