* On the upload page, show the video when uploading a video or ugoira.
* On the upload page, show the filesize and resolution beneath the
image, instead of above it.
* On the media asset show page, show the full video or ugoira instead of
just the thumbnail.
Rework the upload process so that files are saved to Danbooru first
before the user starts tagging the upload.
The main user-visible change is that you have to select the file first
before you can start tagging it. Saving the file first lets us fix a
number of problems:
* We can check for dupes before the user tags the upload.
* We can perform dupe checks and show preview images for users not using the bookmarklet.
* We can show preview images without having to proxy images through Danbooru.
* We can show previews of videos and ugoira files.
* We can reliably show the filesize and resolution of the image.
* We can let the user save files to upload later.
* We can get rid of a lot of spaghetti code related to preprocessing
uploads. This was the cause of most weird "md5 confirmation doesn't
match md5" errors.
(Not all of these are implemented yet.)
Internally, uploading is now a two-step process: first we create an upload
object, then we create a post from the upload. This is how it works:
* The user goes to /uploads/new and chooses a file or pastes an URL into
the file upload component.
* The file upload component calls `POST /uploads` to create an upload.
* `POST /uploads` immediately returns a new upload object in the `pending` state.
* Danbooru starts processing the upload in a background job (downloading,
resizing, and transferring the image to the image servers).
* The file upload component polls `/uploads/$id.json`, checking the
upload `status` until it returns `completed` or `error`.
* When the upload status is `completed`, the user is redirected to /uploads/$id.
* On the /uploads/$id page, the user can tag the upload and submit it.
* The upload form calls `POST /posts` to create a new post from the upload.
* The user is redirected to the new post.
This is the data model:
* An upload represents a set of files uploaded to Danbooru by a user.
Uploaded files don't have to belong to a post. An upload has an
uploader, a status (pending, processing, completed, or error), a
source (unless uploading from a file), and a list of media assets
(image or video files).
* There is a has-and-belongs-to-many relationship between uploads and
media assets. An upload can have many media assets, and a media asset
can belong to multiple uploads. Uploads are joined to media assets
through a upload_media_assets table.
An upload could potentially have multiple media assets if it's a Pixiv
or Twitter gallery. This is not yet implemented (at the moment all
uploads have one media asset).
A media asset can belong to multiple uploads if multiple people try
to upload the same file, or if the same user tries to upload the same
file more than once.
New features:
* On the upload page, you can press Ctrl+V to paste an URL and immediately upload it.
* You can save files for upload later. Your saved files are at /uploads.
Fixes:
* Improved error messages when uploading invalid files, bad URLs, and
when forgetting the rating.
Restructure the Dockerfile and the CSS/JS files so that we only rebuild
the CSS and JS when they change, not on every commit.
Before it took several minutes to rebuild the Docker image after every
commit, even when the JS/CSS files didn't change. This also made pulling
images slower.
This requires refactoring the CSS and JS to not use embedded Ruby (ERB)
templates, since this made the CSS and JS dependent on the Ruby
codebase, which is why we had to rebuild the assets after every Ruby
change.
Flash is dead. It's no longer supported by browsers, it's not
well-supported by emulators, and only two Flash posts were uploaded in
the last year anyway. Old Flash files will continue to exist, but new
Flash uploads will no longer be allowed.
Adjust input boxes to fit the screen better on mobile, and to use
consistent sizes throughout the site (no ad-hoc overrides to make
certain input boxes a bit bigger in random places).
On desktop, this makes most input boxes a bit taller and narrower. On
mobile, it makes input boxes the full width of the screen.
This most notably affects the tag edit box, the comment and forum
post box, the wiki page edit box, and the commentary box.
Regression caused by the upgrade to Webpacker 6.0 in 90cd3293e. This
caused various Javascript errors in old versions of Chrome, which
somehow resulted in the keyboard shortcut for visiting the next page
being triggered when you pressed any key.
Specifically, the mobx library (used by the TagCounter component) called
`Object.entries`, which isn't available in Chrome 49, and for some
unknown reason this triggered the buggy shortcut behavior.
`Object.entries` is supposed to be automatically polyfilled by Babel to
support old browsers, but something changed in Webpacker 6 that broke
this and I couldn't get it working again. The probable cause is that
Webpacker 6 no longer transpiles code inside ./node_modules by default,
which means that any libraries we use that use new Javascript features
won't get transpiled down to support old browsers, but even after fixing
that it still didn't work. The workaround is to just drop mobx and
preact entirely to avoid the issue.
Factor out FontAwesome icons into a set of helpers. This is so that it's
easier to keep track of which icons we're using and easier to change
icons globally.
Disable the browser's native spellchecking ability on all form inputs,
except for DText inputs. We do this by setting `spellcheck="false"` on
the <body> tag, and `spellcheck="true"` on DText <input> tags.
This fixes browsers displaying a red wavy underline beneath tags in the
tag search box, among other places. We disable spellchecking globally
because most form inputs, except for DText inputs, aren't meant for
natural English language.
Rewrite the tag counter widget (the one above the tag edit box) to use
React. This is a trial run for using React elsewhere.
We actually use Preact instead of React because it's lighter weight.
We use Mobx for state management because it's cleaner than React's
setState or useState.
This incidentally fixes a couple bugs:
* The tag counter wasn't updated when deleting tags with backspace
* The tag counter wasn't updated when pasting in new tags.
* Fix preview images not being resized to fit the screen when using the
bookmarklet.
* Fit images to both screen width and height by default. Previously we
fit to screen width only, so tall images were hard to see.
* Allow clicking on the image or pressing Z to toggle image size.
* Move size information to above the image and add resize links:
** small: fit width and height
** large: fit width
** full: fit none
* Bind the image error handler in an onerror attribute on the image
itself so that it will always fire. Before it wouldn't fire if the image
failed immediately on pageload before we could bind the error handler.
Also remove options to configure names of wiki notice pages. These names
generally don't need to be changed and we already hardcode links to wiki
pages in other places anyway.
* Standardize the upload widget background colors (light green for success,
light red for error).
* Move the progress bar to the bottom of the upload widget.
* Change the progress bar color to blue.
* Hide the "drag and drop a file here" message after a file has
already been uploaded.
Ensure dtext is always wrapped in a `<div class="prose">` or
`<span class="prose">` (for inline dtext) container so that dtext css is
properly applied.
https://danbooru.donmai.us/forum_topics/9127?page=265#forum_post_153180:
> I'm not sure how to reproduce this, but sometimes on the upload page
> when I click the button to pop out the tag box, the screen scrolls up to
> the picture but the box doesn't pop out, and I have to scroll back down
> and click it again
https://danbooru.donmai.us/forum_topics/9127?page=266#forum_post_153183:
> Yes, this was brought up by Unbreakable on Discord a while back. It's
> due to the fact that the event handler that pops out the dialog box has
> not yet been bound by the time you click it. Since that clickable
> control has an empty anchor link of "#" which goes nowhere, it therefore
> redirects the user to the top of the page.
Refactor the /related_tags.js call so that when the "Related tags"
button is clicked, it only replaces the columns that actually changed,
not the entire related tags section.
This avoids rebuilding the Recent / Frequent / Translated Tags / Artist
columns every time the "Related tags" button is clicked.
* On posts, automatically trigger "Fetch source data" when clicking the
Edit tab, instead of triggering the artist finder button. This way we
find both the artist and the translated tags in one ajax call.
* Remove the "Artist" finder button next to the source field. This isn't
necessary given that "Fetch source data" finds the artist itself.
* Remove the /artists/finder.json API endpoint. This is no longer used
after removing the "Artist" finder button.
* On the /uploads/new page, instead of just showing a "This post has
probably already been uploaded" message, show the actual thumbnails of
posts having the same source as what the user is trying to upload.
* Move the iqdb results section up top, beside the related posts section.
Also makes it so that using the bookmarklet always triggers async upload
preprocessing. Before it was only triggered when the source passed a
dupe check, but that check was inaccurate (#3873).
to match the rest of the code base
For flash files I've used the file extension because the mime type is browser
specific and I've found at least 2 different variations for .swf:
1. `application/vnd.adobe.flash-movie`: wikipedia
2. `application/vnd.adobe.flash.movie`: mailcap, firefox
some other browser may not even know the .swf extension in the first place
