btzr-io / villain Goto Github PK
View Code? Open in Web Editor NEWA free and open source web-based comic book reader.
Home Page: https://villain.js.org
License: MIT License
A free and open source web-based comic book reader.
Home Page: https://villain.js.org
License: MIT License
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.
allowFeature..
props for each tool / featureactions: ['fullscreen' , ...]
blockActions: ['fullscreen',...]
buttons: [ { name: 'flip', action: (e) => something... } ]
Open for suggestions.
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 ✌️
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
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.
Create a change log file to register future changes / updates for each version.
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/
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:
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 ✌️
We need some test to ensure everything is working fine 👍
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
Add all features, and configurable options, also dev guide needs some changes.
Create a light theme, see the dark theme for inspiration.
A panel or overlay container ( maybe even a pop up modal ) to display some info about the viwer:
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:
Expected behavior
Smooth zoom animations
Villain/src/components/render.js
Lines 165 to 174 in 448b559
See: Optimize getTargetZoom function #67
Add an option to quickly switch between dark and light theme.
( Note: the light theme don't exist yet #15 )
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 ✌️
Describe the bug
The allowFullScreen
has no effect on the viewer.
It should be removed if not used anymore or try to fix it.
When entering and leaving fullscreen the icon of the button should also change.
Update and maybe add command or automatic way to update this files.
See: https://github.com/nika-begiashvili/libarchivejs
Debounce the resize handler function on the render
component,
Villain/src/components/render.js
Lines 161 to 163 in 448b559
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
Here is the validation function used on the uncompress component:
Line 14 in 2f596a4
Add an option to display a preview version of the archive, this should be faster and more optimized than loading the full archive:
Optimize viewer for mobile devices.
See related issue: #34
I'm not familiar with rollup
so I don't know if there is something we should improve on the config:
Also see related issue: Remove webpack usage #47
Add support for encrypted archives:
See https://github.com/nika-begiashvili/libarchivejs#check-for-encrypted-data
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.
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)
Describe the bug
The autohideControls
has no effect on the viewer.
It should be removed if not used anymore or try to fix it.
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
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?
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.
This function is used a lot inside the render
component and should be optimized.
Related issue: #66
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
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:
This will be probably required by: s://github.com//issues/39
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
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.
Add shortcut keys to control the viewer like f
to toggle fullscreen.
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
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
Implementing accessibility in any component of the viewer.
This are probably not the only ones so feel free to report it here:
Create a new mode to read manga ("Right to left")
Move the npm
package ( villain-react component ) to its own folder.
Extend support to load an array of images instead of just compressed archives.
Subfile in certain RAR cannot be read
libarchive/libarchive#373
Rename workerPath
to workerUrl
to be consistent with libarchive.js
api.
Line 15 in b00ba24
Look for other definitions so index dont break after changes, also update readme
and changelog
.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.