/ UI

A Vue-based frontend for hydrusrv

A Vue-based frontend for hydrusrv

hydrusrvue

hydrusrvue is a Vue-based frontend for hydrusrv that makes use of its entire feature set, allowing you to access your media managed with hydrus server on the web. It is largely built with Bulma and optimized for all common desktop and mobile screen sizes.

The most prominent features are:

  • Comprehensive options to search and sort your files and tags
  • A gallery mode in the files search page that allows you to comfortably view your files in a lightbox without navigating to the detail page
  • Direct support for common image and video formats on the web; non-supported files can be downloaded and viewed locally
  • Built-in user registration and actions like changing username or password or deleting the user altogether
  • The ability to define options like tag colors and default sorting methods on a per-client basis, allowing you to have different settings in each browser
  • Fast delivery due to lazy loading routes
  • Enhanced performance on modern browsers thanks to Vue CLI's modern mode
  • Basic web app features that allow you to add hydrusrvue to the home screen of your smart device and use it just like a native app
  • Experimental Electron support that allows you to built a hydrusrvue desktop app for any major platform

Install

The easiest way to install is via cloning this repository:

[email protected]:~$ git clone https://github.com/mserajnik/hydrusrvue.git
[email protected]:~$ cd hydrusrvue
[email protected]:hydrusrvue$ yarn

Updating

If you have installed via cloning the repository, you can update via Git:

[email protected]:hydrusrvue$ git pull
[email protected]:hydrusrvue$ yarn

Always make sure to run yarn after updating to install any packages you might
be missing.

hydrusrvue follows Semantic Versioning and any breaking
changes that require additional attention will be released under a new major
version (e.g., 2.0.0). Minor version updates (e.g., 1.1.0 or 1.2.0) are
therefore always safe to simply install via the routine mentioned before.

When necessary, this section will be expanded with upgrade guides to new major
versions.

Usage

Configuration

Duplicate .env.example as .env. Make use of the following options to
configure your installation:

  • VUE_APP_TITLE=hydrusrvue: sets the title of your installation. It is used
    throughout the whole application, making it possible to add some personal
    flavor/branding.
  • VUE_APP_DESCRIPTION=A Vue-based frontend for hydrusrv: sets the content
    of <meta name="description">. Be advised that hydrusrvue is not opmitized
    for search engines and that they might decide to ignore the description even
    if provided.
  • VUE_APP_ROBOTS=noindex, nofollow: sets the content of
    <meta name="robots">.
  • VUE_APP_API_URL=https://example.com/api: the URL to your hydrusrv
    API. No trailing slashes.
  • VUE_APP_REGISTRATION_ENABLED=true: setting this to false disables the
    registration page. This does not disable the registration in your hydrusrv
    installation; to achieve this, use the appropriate hydrusrv setting.
  • VUE_APP_AUTHENTICATION_REQUIRED=true: setting this to false allows the
    access of all views aside the user view without logging in. This only affects
    the frontend and must mirror the setting in hydrusrv for it to work correctly
    and without creating user experience issues.
  • VUE_APP_MIN_PASSWORD_LENGTH=16: sets the minimum password length when
    registering or updating the password. Providing a higher value than 1024
    will discard the value and use 1024 as the minimum length instead. This
    is only used for frontend validation and should mirror the setting in
    hydrusrv for the best user experience.
  • VUE_APP_FALLBACK_FILES_SORTING_NAMESPACE=namespace: sets the fallback
    sorting namespace that is needed to not break namespace sorting. Should be
    set to something sensible like creator or series, depending on your
    preferences.
  • VUE_APP_DEFAULT_NAMESPACE_COLORS='character#00b401|creator#bb1800|meta#000000|person#008f00|series#bb2cb9|studio#941100':
    sets default colors for the given namespaces. The user will not be able to
    change those colors in his settings until tags under the configured
    namespaces exist. Once such tags are added to hydrusrv, the user will see the
    default colors and be able to override them.
  • VUE_APP_FALLBACK_TAG_COLOR='#0088fb': sets the fallback color for
    non-namespaced tags (if not overriden by the user).

Develop

[email protected]:hydrusrvue$ yarn serve

Build

[email protected]:hydrusrvue$ yarn build

Deploy

After running yarn build, copy the content from dist to any webspace.

Electron

Disclaimer: Electron support is experimental, untested on most platforms
and might contain application-breaking bugs.

Develop

[email protected]:hydrusrvue$ yarn serve:electron

Build

[email protected]:hydrusrvue$ yarn build:electron

This creates a build for your current platform. You can find the built
application in dist_electron. Take a look at the
electron-builder CLI parameters (the Building
section) to learn how to built for other platforms. You can just attach the
parameter to the yarn build:electron command. E.g., to build for Windows x64:

[email protected]:hydrusrvue$ yarn build:electron --win --x64

Screenshots

screenshot-frontpage

screenshot-search

screenshot-sorting

screenshot-detail

screenshot-tags

screenshot-settings

screenshot-user

GitHub