Hydrus-react is a web app written in React/TypeScript using hydrus API. The goal is to give a viewing experience similiar to booru/pixiv where using tags and similiar/related files takes you on a journey through your library. Inspired by hydrus-web by floogulinc
- Browsing your files in booru style
- Simple comics support (currently just a list of first pages of all your comics)
- Support for OR searching
- Image Grouping in searches
- Related files functionality (quick look at other files inside same image group)
- Configurable namespaces for comics and grouping
- Desktop and mobile support
There is an online version available through the link https://hydrus-react.vercel.app It should be always up to date with current git version.
- Clone repository
- run npm install
- run npm start
- connect to http://localhost:3000
- Clone repository
- run npm install
- run npm install -g serve (might require admin rights depending on system)
- run npm run build
- run serve -s build
- connect to http://localhost:3000
While slightly harder to get running production mode might get better performance.
In the settings page you have to point to your client API address (by default http://127.0.0.1:45869 ) add your access key (you can copy it from under services/review services/client api).
Hydrus-react supports usage of smaller file transcodes. It's done using separate local file service and a namespace. It allows users to have smaller "web friendly" versions of large videos and images, which helps with page load speed and responsivness. Whenever a large zoom happens transcoded version will be replaced by original.
Automated script is available under http://github.com/zaykok/hydrus-transcode. Check for more details.
Below is older explanation of what transcoding does and how to set it up manually. I recommend trying out the script above.
Information below is more of a recommendation on how to use this feature, based on my own usage. The way it actually works allows for more specific/creative ways of replacing what file gets loaded and how. This is just a basic use case I came up with.
- Inside hydrus client you have to create a separate 'local file domain' under "services/manage services/add/local file domain".
- Default name for that file domain is "web-transcodes" although you can use whatever and change the name in hydrus-react.
- Export files you want to have transcoded versions making sure they keep their hydrus hash as a filename. This happens by default when drag and dropping them from hydrus window.
- Use image converter of your choice to create a smaller version of a file. Personally I use ImageMagick converting image files to WebP and gifs (especially large ones >100MB) using Google's gif2webp
- Make sure that gifs are encoded into webp not webm format as then the file type mismatch will prevent displaying of them in hydrus-react
- This should give you output that keeps the file name (hash) with changed file extension.
- Import transcoded files making sure that file domain is set as "web-transcodes" (file import option/default options > custom file import option/import destination > 'web-transcodes')
- Add tags before import
- add filename? [namespace] > set wanted namespace, default "original" After import file should have 1 tag which is it's original file hash
Hydrus react can be configured to use user defined local file domain inside settings page. You can configure file domain name, namespace of original filename hash, and whether or not even use this function altogether.
If everything was done correctly next time you load given image in hydrus-react you should get transcoded image instead of original one.