Basically, instead of updating the width of the image after clicking
`ok`, the width is adjusted live, which makes it easier to figure out
the right value for the manga being viewed.
While implementing this, I realized we can't update the backend every
time we re-render when `liveUpdate` is true, so I've updated the logic
for persisting settings to support skipping the API call to save the
settings in the backend, and only perform the API it when the user
clicks ok on the number setting.
Signed-off-by: Chance Zibolski <chance.zibolski@gmail.com>
* Use request manager to preload images in DoublePagedPager
Was forgotten to update along with f852ce70e7
The requests for the preload also never got aborted
* Revoke object urls after load
* Add option to stretch small pages
In case "fit page to window" is enabled, small pages can be scaled up to the available width and height, while maintaining the aspect ratio
* Cleanup "imageStyle" function
In case "fit to page" was enabled, the styling got incorrectly applied to horizontal pages. Causing the pages to be small
Regression introduced with 15825fbe53
The max-width, which is for a single page, was applied to each page of the double page reader, which resulted in both of them being able to take up 100% of the available width
* [Codegen] Update to server changes
* Set "dialogTitle" by default to "settingTitle" for "NumberSetting"
* Add FlareSolverr to settings
* [VersionMapping] Require server version "r1477" for preview
* Replace static strings with translation keys
* Fix reader width
The margin: auto on the Box container for the image was preventing 100% width
to actually mean 100%.
Now that 100% is actually possible, I think fitPageToWindow makes more
sense as a default. Additionally, since the image can fill 100% of the
page, it can cover the ReaderNavBar, so set the z-index of the
ReaderNavBar so it's rendered on top of the image and clickable.
Signed-off-by: Chance Zibolski <chance.zibolski@gmail.com>
* Support configuring reader width for DoublePage readers
Signed-off-by: Chance Zibolski <chance.zibolski@gmail.com>
* Fix single page of DoublePageReader not being able to take up full width
In case the parent container is flex row, the container does not automatically take up 100% of the available width, thus, the page also was not able to take up 100% of the width
* Fix applying reader width to double pages
The set reader width can't be applied to each page of the double pages because otherwise it will already take up 100% of the available width with the setting only being at 50%.
Instead, the set width has to be divided by 2, so that both pages take up the set reader width
* Prevent double page spinner from being larger than 100% of the available width
* Update width styling of the page spinner
* Always center pages in the middle of the screen
* Take up full height fitting page to window height
---------
Signed-off-by: Chance Zibolski <chance.zibolski@gmail.com>
Co-authored-by: schroda <50052685+schroda@users.noreply.github.com>
* page loading works and looks good now to make double page work with it
* Update double page spinner styling
* Render pages everytime the component gets rendered
- remove refs because they do not trigger a rerender
- remove initial render interval
- remove page rendering via portal
During the initial render nothing got rendered (pages or placeholder) because for that to happen, the images had to be loaded.
Thus, the loading placeholder never got shown.
* Enable skipping forward while pages are loading
---------
Co-authored-by: schroda <50052685+schroda@users.noreply.github.com>
* Scroll up when clicking shift + space
* Add keyboard bindings to arrow up and down
Align scroll amount with using other keys like space, arrow right/left
* Add scroll inversion with shift to other key bindings
* Scroll per mouse dragging
* added toggle for doublespreads
* changing pages works as intended
* undid package.json changes
* deleted packege lock json
* curPage changes when changing invertDoublePage
* changed yarn.lock
* it switches better now
* fixed formatting
* changed it to offset first page
* fixed flipping when switching
* offset first page hides when double page is not enabled
* removed uncreachable line
* going to next chapter and prev page works now
* cleaned comments
* updated mapping file
* changed version back
* Fixed chapters being read.
* fixed comments
* Use "create-vite"s tsconfig files setup
The previous tsconfig file caused issues with vite throwing "missing identifiers of modules" errors
* Remove unused React imports
Starting with React 17 the nex JSX transform is being used
* Use alias "@" for imports
* Use alias "@" for imports - Fix imports
* Use alias "@" for imports - Prevent faulty "import/extensions" linting issue
For some reason the rule throws an error for alias imports
* Use alias "@" for imports - Update "no-relative-imports" eslint rule
* Update dependency "react" to v18.x
Update to v18.2.0
* Update dependency "react" to v18.x - Fix some dependency version issue
Something caused weird tsc issues, most likely a version mismatch since it got fixed by doing a clean install (deleting node_modules folder, yarn.lock and clearing the cache) of the dependencies
* Update dependency "react" to v18.x - Fix "i18n" tsc issues
* Update dependency "react" to v18.x - Fix tsc issue
Typography can only have a single child
* Update dependency "react" to v18.x - Prevent build warning
TODO: migrate to Vite
Gets used without being declared as a dependency.
Since CRA is unmaintained this will not get fixed.
* Update dependency "react" to v18.x - Use "createRoot"
* Update dependency "react" to v18.x - Fix dnd in strict mode
* Introduce "RequestManager"
* Use "RequestManager" - Simple replacements
- Get rid of all "util/client" imports
- replace old requests with new "RequestManager"
- remove "fetcher" from global SWR config
instead of using the SWR hooks by themselves, the "requestManager" is supposed to be used
* Use "RequestManager" - Do requests via SWR hooks
Use SWR hooks at places where it's easily usable
* Prevent trailing slashes in the "baseUrl"
* Skip duplicate chapters in the Reader
* Debounce "end of page" handling in the reader
* Update keyboard event listener
In case the "go" function changed, the listeners have to be updated
* Fix i18n tsc issue
"t" can return null by default.
This was already disabled in the config, but it had no effect on tsc.
* Fix translation in "DefaultNavBar"
key was missing and since this is a constant the translation wouldn't update in case the language got changed after first load.
* Enable typing for i18n translation keys
* Add translation keys
* Move "dependencies" close to "devDependencies"
Makes it easier to have a quick overview
* Upgrade "react-scripts" to latest version
With new versions of node (> v16) the build scripts fails with the following error "error:0308010C:digital envelope routines::unsupported"
* Upgrade "react-scripts" to v5 - Fix import
* Upgrade "eslint" dependencies
The latest version of "react-scripts" uses eslint v8 causing the following error "... ERROR in Plugin "react" was conflicted between ".eslintrc.js" >> eslint-config-airbnb ..."
* Upgrade "eslint" dependencies - Allow nested components as props
* Upgrade "eslint" dependencies - Fix lint issues
* Rename file
".d.ts" files are files that are automatically generated during compilation (in case option is set) and shouldn't be created manually.
* Export types and interfaces
* Add missing imports
* Correctly scroll to page
Using "curPage" as the "initialPage" broke "scrolling up".
The page got reset to the first page in that case
* Support resume and scrolling to page for "DoublePagedPager"
* Support resume and scrolling to page for "PagedPager"
* Prevent "ReaderNavBar" from disappearing in "VerticalPager"
Due to handling the overflow on the "root" div and the "nav bar" being sticky and having a combined with of 100vw with the "vertical pager", once the first page was reached, that was behind the 100vw, the "nav bar" got moved out of the screen.
This made using the "nav bar" unusable for the "vertical pager".
* [Prettier] Increase max line length to 120
100 is quite low, especially on modern monitors.
The length is also reached quite quickly with 4 spaces per tab depending on the indentation depth
* [Prettier] Increase max line length to 120 - Fix formatting
* [Prettier] Add "prettier"
Makes the formatting of the code consistent.
By using the eslint-plugin-prettier formatting issues will be highlighted as a lint error.
These errors will be auto fixed by running "lint --fix" (which can be done automatically on file save)
* [Prettier] Add "prettier" - Fix formatting
* [#215] Handle metadata migration
Makes it possible to change "metadata keys" and the "app metadata key prefix" without losing data
* [#215] Fix checking and handling missing reader settings in metadata
With the new migration logic missing reader settings couldn't be detected anymore in case the metadata included outdated app metadata keys for the reader settings.
* [#215] Fix name of "IReaderSettings" property
* [#214] Move "reader settings" util functions into new file
* [#214] Extract "options" of "ReaderSettings" to new component
* [#214] Add component for changing the default reader settings
* [#214] Add default "ReaderSettings" to "Settings"
* [#214] Use default "ReaderSettings" stored on the server
Wait for both "manga" and "defaultSettings" to be loaded.
Otherwise, by the time the "manga" response was received, the "defaultSettings" might be still loading and thus, the local fallback "default" settings will get used as the "default settings"
* [#214] Save and update "ReaderSettings" options in case they are missing
- Manga gets read the first time => save settings in metadata
- Default settings get opened the first time => save settings in global metadata
* Update logic for determining if page should be single or double in double layout to cover issue #181
* Simplify code, add special handling for last page
