btzr-io / villain Goto Github PK

We need some test to ensure everything is working fine 👍

Rename workerPath to workerUrl to be consistent with libarchive.js api.

Look for other definitions so index dont break after changes, also update readme and changelog.

Describe the bug
The zoom handler function makes the zoom animations choppy and slow.
I suspect is caused by the new implentation on the getTargetZoom function.

To Reproduce
Steps to reproduce the behavior:

1. Use the wheel mouse button to zoom in / out.
2. See animations.

Expected behavior
Smooth zoom animations

See: Optimize getTargetZoom function #67

Currently only detects files as images when the name ends on a valid image type extension,
we should at least validate if the name contains invalid charactes such as a filename starting with . see example:

Valid name: image.png
Invalid name: .__image.name.png

A more efficient validation system to ensure that the file is a real image will be reading the magi numbers or something similar but this will probably affect performance.

See related issue: Broken example archive #49

Some hints

Here is the validation function used on the uncompress component:

Add shortcut keys to control the viewer like f to toggle fullscreen.

We need a pull request template to include some basic info...

See this example:
https://github.com/lbryio/lbry-desktop/blob/master/.github/PULL_REQUEST_TEMPLATE.md

Move the npm package ( villain-react component ) to its own folder.

Current set of options for toolbar is really limited, see https://github.com/btzr-io/Villain#options
We should provide and option to customize the toolbar elements.

Possible solutions and ideas

• Create an allowFeature.. props for each tool / feature
• Create a prop to choose what toolbar actions will be shown: actions: ['fullscreen' , ...]
• Maybe another one to block actions: blockActions: ['fullscreen',...]
• Add custom buttons ? buttons: [ { name: 'flip', action: (e) => something... } ]

Open for suggestions.

Create a web application + embed api 🚀

• Home page.
• Move docs to website ?
• Initial UI for reader.
• Get Domain #224
• Embed api
• Open archive from local storage #239
• Document api
• Drag and drop support: c184f3a

A panel or overlay container ( maybe even a pop up modal ) to display some info about the viwer:

• Logo / Project name
• Current version
• Description
• Maybe add the github links ?

The full screen button is being removed in lbry-desktop in place of individual full screen buttons in the different viewers. f for fullscreen will still work, but there will no longer be a button below the viewer components.

• Focus styles
• Accessibility tags

Add an option to display a preview version of the archive, this should be faster and more optimized than loading the full archive:

• Extract a defined number of images (eg. 3 first pages ) and display it.
• Maybe add a label or indication that is a preview version.

Describe the bug
The handler of the slider element don't auto focus when using key tab navigation.

To Reproduce
Steps to reproduce the behavior:

1. Press tab to navigate until you reach the toolbar controls (buttons)
2. See error ( slider don't get focus )

This will be probably required by: s://github.com//issues/39

The example archive included breaks the viewer when navigating from pages.

I suspect it contains corrupted images or unsupported format?

message: "Error loading image at blob:http://localhost:8080/2df85bc3-6f11-406e-9345-399c101a6bc0"

Also we should handle better this error: #37

Update

Well the issue appears to be related to this folder inside the archive: __MACOSX/

All files contained in there had a valid extension name (png, jpg...) but invalid names (._Name), also from what I understand they are not real images so they will be handled as corrupted:

Exampe.zip
--- ._Clouds.jpg
--- ._Sunset.jpg
--- ... 

So not sure if there is a way to ignore it?

This function is used a lot inside the render component and should be optimized.
Related issue: #66

Is your feature request related to a problem? Please describe.
Documentation should provide the basic steps for contributors to get started with the project

Describe the solution you'd like
Contributors should be able to get started with ease

Related issue: Improve documentation #16

Is your feature request related to a problem? Please describe.
It should flip the images like a "mirror".

Describe the solution you'd like
Openseadragon provides this feature we just need a control to toggle it, see the docs for more info.

Note always keep in mind usability and accessibility ✌️

When the viewer size is too small toolbar will break ( fail to display and interact with elements)
Also we should be able to handle almost any screen size for mobiles.

Probably will require to remove certain components from the toolbar:
See: #13

Note always keep in mind usability and accessibility ✌️

The current fullscreen mode only expands the size of the viewer, it should actually trigger the fullscreen enter / exit event of the window.

Use the lib/full-screen.js polyfill.

This repo host the web-app and also the react component version, it should be a good idea to organize the code in modules:

@Villain
--- @Villain/web-reader
--- @Villain/react-reader

Debounce the resize handler function on the render component,

Is your feature request related to a problem?

The current slider lags of a keyboard navigation, should probably be handled with arrow keys and mouse wheel if possible.

Related issue: #23

See for possible implementation: https://github.com/sghall/react-compound-slider/blob/master/docs/src/pages/slider-demos/horizontal/components.js#L106

Add support for encrypted archives:

• It will require an UI to request the password.

See https://github.com/nika-begiashvili/libarchivejs#check-for-encrypted-data

Update and maybe add command or automatic way to update this files.
See: https://github.com/nika-begiashvili/libarchivejs

Optimize viewer for mobile devices.

• Debounce zoom updates. See full conversation: #73 (comment)

See related issue: #34

The space of the toolbar is limited, we will eventually need panel or drop menu to display all the configurable options of the player.

Note always keep in mind usability and accessibility ✌️

• Buttons and other interactive elements are missing tooltips.
• Better tooltip messages

We should also look for a react component instead of using the native tooltips.
I think we should stick for the native ones for know but open for suggestions.

Add all features, and configurable options, also dev guide needs some changes.

We need to isolate the css styles of at least the toolbar component otherwise is easy to break when having conflicts with the website styles.

Probably use a component for this or create a new one:
https://github.com/apearce/react-shadow-root
https://github.com/Wildhoney/ReactShadow#readme

I'm not familiar with rollup so I don't know if there is something we should improve on the config:

• Remove unnecessary plugins.
• Add better / necessary plugins.
• something else ?

Also see related issue: Remove webpack usage #47

Create a new mode to read manga ("Right to left")

Extend support to load an array of images instead of just compressed archives.

• The min and max zoom levels are affected by the resize event.
• Inconsistent zoom levels on different image sizes

Create a change log file to register future changes / updates for each version.

A panel or overlay container ( maybe even a pop up modal ) to display some info about all shortcut keys.

(See the openseadragon docs for more info)

Is your feature request related to a problem? Please describe.
Create keyboard-only foucs style for buttons and inputs.

Describe the solution you'd like
See for more info and examples: https://css-tricks.com/keyboard-only-focus-styles/

Subfile in certain RAR cannot be read
libarchive/libarchive#373

Create a light theme, see the dark theme for inspiration.

Implementing accessibility in any component of the viewer.

Reported issues

This are probably not the only ones so feel free to report it here:

• Responsive toolbar #34
• Keyboard navigation for slider component #39
• Mobile compatibility #38
• Improve tooltips for controls #12
• Handler on slider components skipped key tab #40
• Keyboard-Only Focus Styles #41
• Missing aria labels and roles #84
• Opeseadragon issues: openseadragon/openseadragon#1478

Add an option to quickly switch between dark and light theme.

( Note: the light theme don't exist yet #15 )

When entering and leaving fullscreen the icon of the button should also change.

Is your feature request related to a problem?
The message error view needs some improvement.
Also we should improve the error message handler to detect different types of error.

Describe the bug
Auto hide controls not working when the viewer cant find or open and image from the archive (probably corrupted file or invalid format).

To Reproduce
Steps to reproduce the behavior:

1. Load an archive containing invalid images
2. Toggle auto hide
3. Se error: the controls will hide but not appear anymore.

Currently we use webpack to run the dev server and rollup to build the production module.
So we have two different config files and both are required to be on sync and be compatible with each other.

Is there anyway to just use rollup and discard web-pack ?

Well there is this, but, web-pack has react-hot-loader implemented, so not sure if this is possible:
https://github.com/thgh/rollup-plugin-serve

• Optimize getTargetZoom function #67
• Zoom handler event affects animations #66
• Optimize react component

Describe the bug
The allowFullScreen has no effect on the viewer.
It should be removed if not used anymore or try to fix it.

See: https://github.com/btzr-io/Villain#options

Describe the bug
The autohideControls has no effect on the viewer.
It should be removed if not used anymore or try to fix it.

See: https://github.com/btzr-io/Villain#options