uploads: show videos and ugoiras on upload page.

* 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.

app/javascript/src/javascripts/uploads.js

@@ -6,7 +6,6 @@ Upload.IQDB_HIGH_SIMILARITY = 70;
 
 Upload.initialize_all = function() {
   if ($("#c-uploads #a-show").length) {
-    this.initialize_image();
     this.initialize_similar();
 
     $("#toggle-artist-commentary").on("click.danbooru", function(e) {
@@ -38,47 +37,6 @@ Upload.initialize_similar = function() {
   });
 }
 
-Upload.initialize_image = function() {
-  $(document).on("click.danbooru", "#image", Upload.toggle_size);
-  $(document).on("click.danbooru", "#upload-image-view-small", Upload.view_small);
-  $(document).on("click.danbooru", "#upload-image-view-large", Upload.view_large);
-  $(document).on("click.danbooru", "#upload-image-view-full", Upload.view_full);
-}
-
-Upload.view_small = function(e) {
-  $("#image").addClass("fit-width fit-height");
-  $("#a-show").attr("data-image-size", "small");
-  e.preventDefault();
-}
-
-Upload.view_large = function(e) {
-  $("#image").removeClass("fit-height").addClass("fit-width");
-  $("#a-show").attr("data-image-size", "large");
-  e.preventDefault();
-}
-
-Upload.view_full = function(e) {
-  $("#image").removeClass("fit-width fit-height");
-  $("#a-show").attr("data-image-size", "full");
-  e.preventDefault();
-}
-
-Upload.toggle_size = function(e) {
-  let window_aspect_ratio = $(window).width() / $(window).height();
-  let image_aspect_ratio = $("#image").width() / $("#image").height();
-  let image_size = $("#a-show").attr("data-image-size");
-
-  if (image_size === "small" && image_aspect_ratio >= window_aspect_ratio) {
-    Upload.view_full(e);
-  } else if (image_size === "small" && image_aspect_ratio < window_aspect_ratio) {
-    Upload.view_large(e);
-  } else if (image_size === "large") {
-    Upload.view_small(e);
-  } else if (image_size === "full") {
-    Upload.view_small(e);
-  }
-}
-
 Upload.toggle_commentary = function() {
   if ($(".artist-commentary").is(":visible")) {
     $("#toggle-artist-commentary").text("show »");

app/javascript/src/styles/common/utilities.scss

@@ -13,6 +13,8 @@ $spacer: 0.25rem; /* 4px */
 .font-bold { font-weight: bold; }
 
 .cursor-pointer { cursor: pointer; }
+.cursor-zoom-in { cursor: zoom-in; }
+.cursor-zoom-out { cursor: zoom-out; }
 
 .hidden { display: none !important; }
 .inline-block { display: inline-block; }
@@ -36,6 +38,8 @@ $spacer: 0.25rem; /* 4px */
 .break-all { word-break: break-all; }
 .whitespace-nowrap { white-space: nowrap; }
 
+.pointer-events-none { pointer-events: none; }
+.select-none { user-select: none; }
 .leading-none { line-height: 1; }
 
 .absolute { position: absolute; }
@@ -83,6 +87,7 @@ $spacer: 0.25rem; /* 4px */
 .p-0    { padding: 0; }
 .p-px   { padding: 1px; }
 .p-0\.5 { padding: 0.5 * $spacer; }
+.p-1  { padding: 1 * $spacer; }
 .p-4  { padding: 4 * $spacer; }
 
 .px-4 { padding-left: 4 * $spacer; padding-right: 4 * $spacer; }
@@ -116,6 +121,7 @@ $spacer: 0.25rem; /* 4px */
 .max-h-270px { max-height: 270px; }
 .max-h-360px { max-height: 360px; }
 .max-h-720px { max-height: 720px; }
+.max-h-screen { max-height: 100vh; }
 
 .space-x-1 > * + * { margin-left: 1 * $spacer; }
 .space-x-2 > * + * { margin-left: 2 * $spacer; }

app/javascript/src/styles/specific/uploads.scss

@@ -1,35 +1,5 @@
 div#c-uploads {
   div#a-show {
-    &[data-image-size="small"] {
-      #image {
-        cursor: zoom-in;
-      }
-
-      a#upload-image-view-small {
-        font-weight: bold;
-      }
-    }
-
-    &[data-image-size="large"] {
-      #image {
-        cursor: zoom-out;
-      }
-
-      a#upload-image-view-large {
-        font-weight: bold;
-      }
-    }
-
-    &[data-image-size="full"] {
-      #image {
-        cursor: zoom-out;
-      }
-
-      a#upload-image-view-full {
-        font-weight: bold;
-      }
-    }
-
     .artist-commentary {
       margin-top: 1em;
     }
@@ -42,7 +12,7 @@ div#c-uploads {
       margin-bottom: 2em;
     }
 
-    ul#upload-image-metadata, ul#links {
+    ul#links {
       margin-bottom: 1em;
     }