I made a website that offers a minimalistic UI approach to automatically view e621 artwork like a slideshow!

Why?

I wanted to have a simple "slideshow" that fetches new images so that I could run it on a second monitor while doing other activities. I didn't want any UI elements obscuring the artwork, so I created the project "e621AutoViewer" with the aim of having as little UI as possible. (I also wanted a neat little project to learn javascript with)

Features

- Global Search Tags and Blacklist/Whitelist
- Presets that can be saved for different search queries
- Quick download button for images
- Quick source button for images
- Go back in History for the current session
- Pause/Unpause
- Mobile and Desktop support

Links

Project in Action: https://e621autoviewer.leithey.com/
Source Code: https://github.com/Leithey/e621AutoViewer/

Notes

Videos (.mp4) not yet supported.
Default Global Blacklist and Default Presets include tags of my own choice. Make sure to clear the Global Settings if you want a pure experience or one more to your own preference.
More features to come in the future.
Feel free to forward me tag combinations to include in the default presets of my website.

Awesome! Thanks! Doesn't seem to work in Firefox (no images display), but it works fine in Chrome.

kora_viridian said:
Also, I'm not *sure* about this, but you *might* need something like an & in the URL to append the parameters, rather than a space. Like, say, ?tags=wolf&order:random&score:>500&limit=10.

is correct, if you open the URL in your browser it works. An & would break the query parsing.

crocogator said:
Awesome! Thanks! Doesn't seem to work in Firefox (no images display), but it works fine in Chrome.

Thank you for telling me. I don't use Firefox so I didn't think of testing it there. I fixed it and it should work in Firefox now :)

kora_viridian said:
I see the same in Firefox (desktop, Linux 64-bit) - no images.

Looking at Firefox's web developer console, when hitting right-arrow (desktop) to load a new image, I get two errors.

Error is fixed, and thanks for the info!

definitelynotafurry4 said:
%20 is correct, if you open the URL in your browser it works. An & would break the query parsing.

I swapped the spaces in the URL with %20 now, thank you for the tip!

theleithey said:
I swapped the spaces in the URL with %20 now, thank you for the tip!

Technically speaking, you should probably use encodeURIComponent(tagString) which will properly encode other things that might break it as well, for example the tag m&m's will break your script as the & is inserted in plain text and breaks the parsing on the e6 side.

Or, since I see you're using Object.entries(params) to map the params, I'd use the built-in URLSearchParams which will do all of this for you

So I'd personally change

const queryParams = Object.entries(params)
    .map(([key, value]) => {
        if (key === "tags" && Array.isArray(value)) {
            return `${key}=${value.join('%20')}`; // Join tags with spaces
        } else {
            return `${key}=${encodeURIComponent(value)}`;
        }
    })
    .join('&');

to

const queryParams = new URLSearchParams(params).toString()

This little one-liner does everything you're doing there on the params, but easily. It would return tags=tag1%20tag2%20etc&limit=10, which based on your code is exactly what you need and should be a drop-in replacement, but I'd test it first. Mainly with tags that have + or & in them as those can break search params, but I think it should handle both.

definitelynotafurry4 said:
Technically speaking, you should probably use encodeURIComponent(tagString) which will properly encode other things that might break it as well, for example the tag m&m's will break your script as the & is inserted in plain text and breaks the parsing on the e6 side.

Or, since I see you're using Object.entries(params) to map the params, I'd use the built-in URLSearchParams which will do all of this for you

So I'd personally change

const queryParams = Object.entries(params)
    .map(([key, value]) => {
        if (key === "tags" && Array.isArray(value)) {
            return `${key}=${value.join('%20')}`; // Join tags with spaces
        } else {
            return `${key}=${encodeURIComponent(value)}`;
        }
    })
    .join('&');

to

const queryParams = new URLSearchParams(params).toString()

This little one-liner does everything you're doing there on the params, but easily. It would return tags=tag1%20tag2%20etc&limit=10, which based on your code is exactly what you need and should be a drop-in replacement, but I'd test it first. Mainly with tags that have + or & in them as those can break search params, but I think it should handle both.

That's a really neat function! I had to modify my params a little, but I successfully implemented it with URLSearchParams and I can confirm that m&m's works now. Here's hoping I won't need to use that tag ever again!

theleithey said:
Here's hoping I won't need to use that tag ever again!

I am sorry lmao

kora_viridian said:
I tried it again and it works now. :) Same desktop Firefox version as before.

I noticed a couple of other things. There is a "stray" bit of HTML after the </html> tag: <template id="presetsettingspanel"> </template>. To see this, view source on your site while it is displaying an image. It doesn't seem to affect anything, but I figured I'd note it.

The other thing I noticed, is that if you set up the tags on your site such that it gets zero results when it queries e621, it just keeps repeating the query to e621 about once a second. This doesn't present an error to the user - the user just doesn't see any images - but e621 might eventually object to the hits to their API.

Thank you! I've removed the stray bit of HTML and added Error handling when e621 returns 0 images. And thank you a lot for the advice, very valuable indeed :3

kora_viridian said:
I see the Git commit where that happened... but the HTML on your site still seems to have the stray template tag. I tried force-reloading the page and the stray tag is still there.

Did the latest HTML get copied from Git to the site? <_<

(If it's true that the latest HTML didn't get copied... that will happen again, too. :D )

I can confirm that this works for me now. :) If I enter a tag on your site that doesn't get any results, I don't see any repeated queries over the network to e621 - just the initial query that returns 0 results. Also, where the image should be, I see white text on a black background saying No images found! Try other search tags....

I forgot to upload it to the website, you are right. Fixed.

Glad to hear that the no results message works as intended. I know of one case where it will still repeat like previously, which is when the client sided blacklist or whitelist filters out all found images. I have it on my radar to fix at some point though x3