Open saurori opened 3 months ago
Hi. You're completely right that the UI and its code is a mess. I clearly don't know what I'm doing ;-) I could provide a docker image with instructions on how to update the UI. The stack is very old, uses an older gulp and npm version and I've had troubles getting it to run when moving it to another machine. I try do don't touch it...
The attempt to revamp the UI did, as expected, not go anywhere. I worked on it for some weeks with high motivation but redoing so much of the logic and custom components was just too much work, even though working with an up-to-date stack was a bliss. The problem is that I use AngularJS (the old version without TypeScript) and the bootstrap components only work with Bootstrap 3. So updating to a newer stack and especially Bootstrap version would require a lot of work that's code related, not "just" UI.
I would love if somebody could improve this but also know that at least two people started with that and I never heard from them again :-D
So to be realistic doing some fixes on the current stack would be the only viable approach. So, as I said, if you're interested I could try getting some UI dev environment going.
I agree, the best approach would be to make the current stack more maintainable. It seems the bootstrap components tied with Angular 1.x and the JS build are tightly coupled and should be left as-is.
My suggestion would be to move only the CSS build to a modern stack, using the official 3.x branch with SASS. The CSS building doesn't have to be part of any build process, at least to start, and instead an un-minified (for review) and minified (for deployment) .css files could be generated and committed.
If you could put together a UI dev environment and any helpful notes, that would be really helpful to get things started. Minimally, I would need to set up a separate build process for CSS and write to static CSS files, but also be able to modify the html templates (and build them if it's part of the Angualr JS build).
Alright, that was a bit of a pain in the ass, mainly because the bower components are broken somehow and installing them using bower.json will result in JS errors. Something related to the order in which components are added to the JS file.
But I got it working.
You can run https://github.com/theotherp/nzbhydra2/blob/master/docker/uiDev/docker-compose.yaml in any folder you like. The folder will have two subfolders, data/static
and ui-src
. The first one contains the built UI resources. The latter contains all UI data (apart from the main index.html).
Any changes you make to files in ui-src
are automatically built using gulp. There's also a livereload server. I use https://chromewebstore.google.com/detail/livereload++/ciehpookapcdlakedibajeccomagbfab?pli=1
I've also included the files static/css/additional.css
and static/js/additional.js
to be loaded. You can change these (in the data/static
folder) and they will never be overwritten or changed by gulp (hopefully). If you clear the .less
files you can completely replace the CSS with your own code (in additional.css) and build it however you like.
I'm not sure what your workflow is. Let me know if this works for you. I'm happy to help in any way I can.
There are some select cases where the JS code changes the styles, e.g. for the history to make sure table columns have the correct size. I'm not saying it's a good idea, just be aware ;-)
Wow that was both quick and way more work than I imagined. I will check it out and see if I can get things running.
Looks like I'm getting an unauthorized error:
[+] Running 1/1
✘ nzbhydra-ui-dev Error Head "https://ghcr.io/v2/theotherp/nzbhydra-ui-dev/manifests/latest": unauthorized
Ah the image is probably private. Let me see... Should be public now i.e. please try again.
Some additional errors (No such file or directory: '/app/data/control.id'
):
nzbhydra-ui-dev | /app/ui-src/ does not exist or is empty - coping files from source to /app/ui-src/
nzbhydra-ui-dev | mkdir: cannot create directory '/app/ui-src/': File exists
nzbhydra-ui-dev | Building UI resources
nzbhydra-ui-dev | Running gulp watch task in background
nzbhydra-ui-dev | Running NZBHydra2
nzbhydra-ui-dev | Logging wrapper output to /app/data/logs/wrapper.log
nzbhydra-ui-dev | 2024-05-18 16:05:09,536 INFO - Determined release type: native
nzbhydra-ui-dev | 2024-05-18 16:05:09,539 INFO - Starting NZBHydra main process with command line: ./core -Xmx256M -DfromWrapper=true -DinternalApiKey=lupqebyqeqqwtzqcjkqh -Dsun.security.pkcs11.enable-solaris=false -Dfile.encoding=UTF8 -Dspring.output.ansi.enabled=ALWAYS --datafolder /app/data in folder /app
nzbhydra-ui-dev | 2024-05-18 16:05:10,574 WARNING - Unable to read control ID from /app/data/control.id: [Errno 2] No such file or directory: '/app/data/control.id'. Falling back to process return code -11
nzbhydra-ui-dev | 2024-05-18 16:05:10,575 INFO - NZBHydra main process has terminated for shutdown
nzbhydra-ui-dev exited with code 0
You can ignore those (mkdir: ...
and Unable to read control ID
).
But it does start up and you can reach the UI?
No I can't reach the UI. It looks like it goes into a crash restart loop:
nzbhydra-ui-dev | /app/ui-src/ already exists
nzbhydra-ui-dev | Building UI resources
nzbhydra-ui-dev | Running gulp watch task in background
nzbhydra-ui-dev | Running NZBHydra2
nzbhydra-ui-dev | Logging wrapper output to /app/data/logs/wrapper.log
nzbhydra-ui-dev | 2024-05-18 16:20:14,019 INFO - Determined release type: native
nzbhydra-ui-dev | 2024-05-18 16:20:14,023 INFO - Starting NZBHydra main process with command line: ./core -Xmx256M -DfromWrapper=true -DinternalApiKey=kskvmdtmovhtghrguwit -Dsun.security.pkcs11.enable-solaris=false -Dfile.encoding=UTF8 -Dspring.output.ansi.enabled=ALWAYS --datafolder /app/data in folder /app
nzbhydra-ui-dev | 2024-05-18 16:20:15,123 WARNING - Unable to read control ID from /app/data/control.id: [Errno 2] No such file or directory: '/app/data/control.id'. Falling back to process return code -11
nzbhydra-ui-dev | 2024-05-18 16:20:15,124 INFO - NZBHydra main process has terminated for shutdown
nzbhydra-ui-dev exited with code 0
nzbhydra-ui-dev | /app/ui-src/ already exists
nzbhydra-ui-dev | Building UI resources
nzbhydra-ui-dev | Running gulp watch task in background
nzbhydra-ui-dev | Running NZBHydra2
nzbhydra-ui-dev | Logging wrapper output to /app/data/logs/wrapper.log
nzbhydra-ui-dev | 2024-05-18 16:20:36,086 INFO - Determined release type: native
nzbhydra-ui-dev | 2024-05-18 16:20:36,089 INFO - Starting NZBHydra main process with command line: ./core -Xmx256M -DfromWrapper=true -DinternalApiKey=fycbqdmrnhhtomkyqfgo -Dsun.security.pkcs11.enable-solaris=false -Dfile.encoding=UTF8 -Dspring.output.ansi.enabled=ALWAYS --datafolder /app/data in folder /app
nzbhydra-ui-dev | 2024-05-18 16:20:37,133 WARNING - Unable to read control ID from /app/data/control.id: [Errno 2] No such file or directory: '/app/data/control.id'. Falling back to process return code -11
nzbhydra-ui-dev | 2024-05-18 16:20:37,134 INFO - NZBHydra main process has terminated for shutdown
nzbhydra-ui-dev | /app/ui-src/ already exists
nzbhydra-ui-dev | Building UI resources
nzbhydra-ui-dev | Running gulp watch task in background
nzbhydra-ui-dev | Running NZBHydra2
nzbhydra-ui-dev | Logging wrapper output to /app/data/logs/wrapper.log
nzbhydra-ui-dev | 2024-05-18 16:20:58,458 INFO - Determined release type: native
nzbhydra-ui-dev | 2024-05-18 16:20:58,461 INFO - Starting NZBHydra main process with command line: ./core -Xmx256M -DfromWrapper=true -DinternalApiKey=zgkqswxzbquyomoglyfj -Dsun.security.pkcs11.enable-solaris=false -Dfile.encoding=UTF8 -Dspring.output.ansi.enabled=ALWAYS --datafolder /app/data in folder /app
nzbhydra-ui-dev | 2024-05-18 16:20:59,503 WARNING - Unable to read control ID from /app/data/control.id: [Errno 2] No such file or directory: '/app/data/control.id'. Falling back to process return code -11
nzbhydra-ui-dev | 2024-05-18 16:20:59,503 INFO - NZBHydra main process has terminated for shutdown
What the fuck I could start it fine. I mean that's the point of docker that it should run fine for you if it ran for me. What a shitty start.
What OS and architecture do you have? I mean, what do you usually do to run hydra?
Haha no worries. I'm on mac (M1, ARM) for development. I usually run NZBHydra on Unraid or plain Debian
Ahhh I added an amd64 binary. I'll have to build one for you. Give me some time.
amd64 should still work, it runs through Rosetta (now), used to be qemu with Docker Desktop
Ok, try again. This time with java. Takes a bit longer but should work on all systems.
Looks like it's working!
That looks good. Give it a whirl.
First impressions are this might not be as bad as I thought. I mistakenly thought it was using a 12 based grid but it's using 20 so some of the layout classes make more sense. I will probably just need to modify some html and css classes, and possibly introduce some flexbox functionality to help clean up the UI. I'll keep this thread posted with updates.
Well that's nice to hear. Looking forward to it.
I have the changes mostly complete. It wasn't so bad, mainly misplaced css row
and lack of responsive col-*
classes along with not using responsive table
. Bootstrap 3 has it's issues, v5 would have been nicer but 🤷 . I'll make a PR soon.
Also, if I try and run the container again (after initial run), I get this error:
Ouch, that message looks gnarly. I may have found a solution but it requires some work as I would need to update to a newer java version. Unfortunately I can't reproduce it so we will have to just try it but I think the chances are good.
But anyway, that was quick! And it does look a lot better, thank you. I always assumed it wouldn't be too much work if I knew what I was doing which you certainly do.
Should I release this straight away or do you want to work on it some more?
It's no rush, but if you looked over all the changed screens and don't see any major issues, then sure release it. I can always make additional PRs if any issues pop up.
I've updated the docker image. Let me know if it works better now.
I pulled the new version. First time running it gave me the same error. Second time running it looked like it booted fine. Visiting the UI, An error modal popped up with:
{"data":null,"status":-1,"config":{"method":"POST","transformRequest":[null],"transformResponse":[null],"jsonpCallbackParam":"callback","headers":{"NzbHydra2-Handle-Errors-Generically":true,"Accept":"application/json, text/plain, */*"},"url":"internalapi/history/searches/forsearching","cached":false},"statusText":"","xhrStatus":"error"}
And the container logs had same error:
I did notice it is running Java 21 where previously I think it was 17?
nzbhydra-ui-dev | 2024-05-19 17:06:53,162 INFO - Determined release type: generic
nzbhydra-ui-dev | 2024-05-19 17:06:53,394 INFO - Determined java version as '21' from version string 'openjdk version "21.0.2" 2024-01-16'
Yes that bug was supposed to be fixed with Java 18+.
I will create an image with the arm binary, perhaps that will help.
Yeah the container issue seems like a bug with docker+arm amd64 translation and java. I found that if I set Docker to use 1 CPU, it works fine. Very slow startup but otherwise not terrible.
I was playing around with mobile search view and found a solution using only CSS (see image). Let me know what you think and I can PR some changes this week.
Wow, that looks so much better. And may make the search actually usably on phones and tablets. Would be happy to use that.
Created a PR, and fixed some minor issues in Config: https://github.com/theotherp/nzbhydra2/pull/949
@saurori
Would you be able to implement automatic light and dark mode based on either operating system or browser state information?
The new theme could be called "system" or "auto". Firefox has a theme called system which follows the operating systems dark/light mode.
The theme is set in the config but I could add some JS that selects the theme depending on the browser settings.
Im using the following JS code for a userscript i set up for something else. Tested and working with Firefox for my purpose. Maybe there is a better way though.
(window.matchMedia) ? (window.matchMedia('(prefers-color-scheme: dark)').matches ? dark_mode : lite_mode) : lite_mode;
----Edit Just wanted to say thank you for making, updating, and maintaining nzbhydra2.
Yeah, that seems to be the way to go. Should be easy to implement.
I want to say thanks for the great updates that @saurori and @theotherp have made on NZBHydra. Thank you for your work on modernizing it. You're doing a great job.
@moya2162 @theotherp Regarding an automatic light/dark theme:
It's definitely possible but a bit cumbersome with how things are set up right now. Currently, the full CSS is built for each theme. So to switch themes, the config code is read and that particular CSS file is loaded (which happens on the backend). prefers-color-scheme
is a CSS media feature so if the theme was "Auto", we would need to either set some property after page load (which would cause a color flash) or include all themes at load and do something like:
[data-theme="grey"] {
...wrap all css for theme
}
The proper way to do this, which requires a bit more work, is to use CSS variables for each theme, for example:
Grey:
:root {
--body-bg: rgb(38, 44, 46);
...
}
Auto:
@media (prefers-color-scheme: light) {
--body-bg: rgb(255, 255, 255);
}
@media (prefers-color-scheme: dark) {
--body-bg: rgb(0, 0, 0);
}
And use the variables like:
html,
body {
height: 100%;
background: var(--body-bg);
}
And we'd have to decide if the "Auto Dark" is theme grey
or dark
. I vote grey
.
I can look into it when I find some time. It would also be a good opportunity to clean up some CSS (file separation, deduplicate Bootstrap css include).
@theotherp in the meantime, can you add an auto
theme and an auto.less
file? I would do it myself but it's part of the Gulp pipeline which I don't think is set up to be modified and developed on via the ui Docker dev container.
@saurori I've pushed a new docker image that allows you to set an "auto" theme. Please update the ui-src folder accordingly: https://github.com/theotherp/nzbhydra2/tree/master/core/ui-src
By the way, if you link the ui-src folder from your checked out repository to the data/ui-src folder of the docker volume you can more easily work with the files and git.
@theotherp Looks like there's some MIME type issues with new files. Console errors:
Refused to apply style from 'http://localhost:5076/static/css/additional.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
Refused to apply style from 'http://localhost:5076/static/css/auto.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
GET http://localhost:5076/static/js/additional.js net::ERR_ABORTED 404 (Not Found)
Refused to execute script from 'http://localhost:5076/static/js/additional.js' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled.
For "Auto Dark" i think grey
looks good as the "dark" option. However i could see people wanting to use dark
as the "dark" option for purpose of battery life on OLEDs. Maybe if "Auto Dark" is selected as theme, a check box can appear to use dark
and it can be called "true black" or "pure black" or something like that.
@moya2162 That's a good point regarding OLED. I don't have a strong opinion either way as I probably won't use it. I have it all completed, just waiting for @theotherp to check on a fix for the above mentioned issue so I can test it before making a PR.
@saurori additional.js
and additional.css
don't exist by default. As the files in the static
folder are usually generated from the ui-src folder and this would result in the files to be overwritten they don't exist in your static folder. You can create them and they will be loaded.
As for the auto theme, I don't know what's wrong there. I can select it in the config and any changes to the .less files are made effective in the css files.
Regarding the grey vs dark I wouldn't put too much effort into this, to be honest. I'm not even sure I would want to make auto
the default. I, for example, prefer dark themes for some websites but not for others. I have a bright theme on my browser but use the grey hydra theme.
@theotherp got it working. I had to remove and pull the ui dev dockier image and started fresh by removing the data dir, seems to be working now.
I'll use dark
for the auto theme. I mainly implemented the auto theme feature since the css needed cleanup anyway.
@theotherp I take that back, it's still having issues (prior it wasn't creating auto.css
). I still have the MIME issues:
Chrome:
Refused to apply style from 'http://localhost:5076/static/css/auto.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
Safari for some reason is giving a 404 on auto.css
.
I'm not sure what's going on.
Loading up http://localhost:5076/static/css/auto.css
there is a 404 Java error:
Some details:
Path | /static/css/auto.css
-- | --
Query parameters |
Status | 404
Timestamp | 2024-05-27T19:54:19.904650792Z
Error |
Exception | java.lang.Exception at java.base/jdk.internal.reflect.DirectConstructorHandleAccessor.newInstance(DirectConstructorHandleAccessor.java:62) at java.base/java.lang.reflect.Constructor.newInstanceWithCaller(Constructor.java:502) at java.base/java.lang.reflect.Constructor.newInstance(Constructor.java:486) at org.springframework.beans.BeanUtils.instantiateClass(BeanUtils.java:198) at org.springframework.security.web.access.ExceptionTranslationFilter.doFilter(ExceptionTranslationFilter.java:126) at org.springframework.security.web.access.ExceptionTranslationFilter.doFilter(ExceptionTranslationFilter.java:120) at org.springframework.security.web.authentication.AnonymousAuthenticationFilter.doFilter(AnonymousAuthenticationFilter.java:100) at org.springframework.security.web.savedrequest.RequestCacheAwareFilter.doFilter(RequestCacheAwareFilter.java:63) at org.springframework.security.web.context.SecurityContextHolderFilter.doFilter(SecurityContextHolderFilter.java:82) at org.springframework.security.web.context.SecurityContextHolderFilter.doFilter(SecurityContextHolderFilter.java:69) at java.base/java.lang.Thread.run(Thread.java:1583)
I noticed the nzbhydra version inside the container is reporting 6.2.2
if that matters:
[main] INFO org.nzbhydra.NzbHydra -- Version: 6.2.2-SNAPSHOT
Please try again. Sorry, for some reason the new image wasn't pushed correctly.
PR opened for Auto theme: https://github.com/theotherp/nzbhydra2/pull/952
How do I see if I've fixed the duplicate bootstrap?
If you look in alllibs.css
you'll see a comment for Bootstrap like:
* Bootstrap v3.3.7 (http://getbootstrap.com)
* Copyright 2011-2016 Twitter, Inc.
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
Argh unfortunately the moved images don't work anymore and I have no idea how to fix it :-(
@saurori Moving the images one folder up (relativ to the less files referencing them) resulted in the full URL used being http://127.0.0.1:5076/static/css/static/img/sab.png instead of http://127.0.0.1:5076/static/img/sab.png It's possible that I had an ugly hack to fix that before. Will need to find out why that worked before.
Hey - I wanted to first say thanks for maintaining NZBHydra for so long. I've used it for years. However, as a developer, the UI has always been a frustration - mainly the horizontal scrollbars and lack of responsive layout. When I dig into the html/css it becomes obvious that fixing simple things are not so simple. I'd love to help, but want to get some feedback before I proceed.
Status & Contributing
UI Questions
bright.css
,dark.css
,grey.css
. Take for example.col-sm-10{width:50%}
which more or less makes it acol-sm-6
.bright.css
,dark.css
,grey.css
? I can't find any.Paths Forward