diff --git a/assets/js/image_expansion.js b/assets/js/image_expansion.js index 5b639976..e60e500a 100644 --- a/assets/js/image_expansion.js +++ b/assets/js/image_expansion.js @@ -12,7 +12,7 @@ const imageVersions = { * Picks the appropriate image version for a given width and height * of the viewport and the image dimensions. */ -function selectVersion(imageWidth, imageHeight) { +function selectVersion(imageWidth, imageHeight, imageSize, imageMime) { let viewWidth = document.documentElement.clientWidth, viewHeight = document.documentElement.clientHeight; @@ -39,8 +39,17 @@ function selectVersion(imageWidth, imageHeight) { } } - // If the view is larger than any available version, display the original image - return 'full'; + // If the view is larger than any available version, display the original image. + // + // Sanity check to make sure we're not serving unintentionally huge assets + // all at once (where "huge" > 25 MiB). Videos are loaded in chunks so it + // doesn't matter too much there. + if (imageMime === 'video/webm' || imageSize <= 26214400) { + return 'full'; + } + else { + return 'large'; + } } /** @@ -48,14 +57,17 @@ function selectVersion(imageWidth, imageHeight) { * to an appropriate dimension. */ function pickAndResize(elem) { - const imageWidth = parseInt(elem.getAttribute('data-width'), 10), - imageHeight = parseInt(elem.getAttribute('data-height'), 10), - scaled = elem.getAttribute('data-scaled'), - uris = JSON.parse(elem.getAttribute('data-uris')); + const imageWidth = parseInt(elem.dataset.width, 10), + imageHeight = parseInt(elem.dataset.height, 10), + imageSize = parseInt(elem.dataset.imageSize, 10), + imageMime = elem.dataset.mimeType, + scaled = elem.dataset.scaled, + uris = JSON.parse(elem.dataset.uris); + let version = 'full'; if (scaled === 'true') { - version = selectVersion(imageWidth, imageHeight); + version = selectVersion(imageWidth, imageHeight, imageSize, imageMime); } const uri = uris[version]; diff --git a/docker/web/nginx.conf b/docker/web/nginx.conf index 9b3321ff..c7ff122d 100644 --- a/docker/web/nginx.conf +++ b/docker/web/nginx.conf @@ -8,7 +8,7 @@ server { root $APP_DIR/priv/static; - client_max_body_size 30M; + client_max_body_size 100M; client_body_buffer_size 128k; location ~ ^/img/view/(.+)/([0-9]+).*\.([A-Za-z0-9]+)$ { diff --git a/lib/philomena/images/image.ex b/lib/philomena/images/image.ex index 2a37b2d2..3868ae24 100644 --- a/lib/philomena/images/image.ex +++ b/lib/philomena/images/image.ex @@ -150,7 +150,7 @@ defmodule Philomena.Images.Image do :uploaded_image, :image_is_animated ]) - |> validate_number(:image_size, greater_than: 0, less_than_or_equal_to: 26_214_400) + |> validate_number(:image_size, greater_than: 0, less_than_or_equal_to: 100_000_000) |> validate_number(:image_width, greater_than: 0, less_than_or_equal_to: 32767) |> validate_number(:image_height, greater_than: 0, less_than_or_equal_to: 32767) |> validate_length(:image_name, max: 255, count: :bytes) diff --git a/lib/philomena_web/endpoint.ex b/lib/philomena_web/endpoint.ex index 06efb392..c645480f 100644 --- a/lib/philomena_web/endpoint.ex +++ b/lib/philomena_web/endpoint.ex @@ -28,7 +28,7 @@ defmodule PhilomenaWeb.Endpoint do plug Plug.Telemetry, event_prefix: [:phoenix, :endpoint] plug Plug.Parsers, - parsers: [:urlencoded, {:multipart, length: 30_000_000}, :json], + parsers: [:urlencoded, {:multipart, length: 100_000_000}, :json], pass: ["*/*"], json_decoder: Phoenix.json_library() diff --git a/lib/philomena_web/templates/image/_image_meta.html.slime b/lib/philomena_web/templates/image/_image_meta.html.slime index 04555ddf..503f1e03 100644 --- a/lib/philomena_web/templates/image/_image_meta.html.slime +++ b/lib/philomena_web/templates/image/_image_meta.html.slime @@ -62,10 +62,10 @@ | x = @image.image_height =<> String.upcase(to_string(@image.image_format)) - - size_kb = div(@image.image_size, 1024) - - size_mb = Float.round(size_kb / 1024.0, 2) + - size_kb = div(@image.image_size, 1000) + - size_mb = Float.round(size_kb / 1000.0, 2) span title="#{size_kb} kB" - = if size_kb <= 1024 do + = if size_kb <= 1000 do => size_kb | kB - else diff --git a/lib/philomena_web/views/image_view.ex b/lib/philomena_web/views/image_view.ex index 0295dbd4..e82fd216 100644 --- a/lib/philomena_web/views/image_view.ex +++ b/lib/philomena_web/views/image_view.ex @@ -128,6 +128,8 @@ defmodule PhilomenaWeb.ImageView do image_id: image.id, image_tags: Jason.encode!(Enum.map(image.tags, & &1.id)), image_tag_aliases: image.tag_list_plus_alias_cache, + image_size: image.image_size, + mime_type: image.image_mime_type, score: image.score, faves: image.faves_count, upvotes: image.upvotes_count,