diff --git a/client/css/style.css b/client/css/style.css index 9a76d48d..83a7df8a 100644 --- a/client/css/style.css +++ b/client/css/style.css @@ -1328,6 +1328,10 @@ kbd { overflow: hidden; } +#chat .toggle-type-error { + background: transparent; +} + #chat .toggle-content img { max-width: 100%; max-height: 128px; diff --git a/client/js/libs/handlebars/friendlysize.js b/client/js/libs/handlebars/friendlysize.js new file mode 100644 index 00000000..bd485f82 --- /dev/null +++ b/client/js/libs/handlebars/friendlysize.js @@ -0,0 +1,10 @@ +"use strict"; + +const sizes = ["Bytes", "KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"]; + +module.exports = function(size) { + // Loosely inspired from https://stackoverflow.com/a/18650828/1935861 + const i = size > 0 ? Math.floor(Math.log(size) / Math.log(1024)) : 0; + const fixedSize = parseFloat((size / Math.pow(1024, i)).toFixed(1)); + return `${fixedSize} ${sizes[i]}`; +}; diff --git a/client/views/msg_preview.tpl b/client/views/msg_preview.tpl index 9592307b..51e199de 100644 --- a/client/views/msg_preview.tpl +++ b/client/views/msg_preview.tpl @@ -29,10 +29,14 @@ {{/equal}} {{#equal type "error"}} - -
{{head}}
-
{{body}}
-
+ {{#equal error "image-too-big"}} + + This image is larger than {{friendlysize maxSize}} and cannot be + previewed. + Click here + to open it in a new window. + + {{/equal}} {{/equal}} {{/preview}} diff --git a/src/plugins/irc-events/link.js b/src/plugins/irc-events/link.js index ba43d834..b082bcea 100644 --- a/src/plugins/irc-events/link.js +++ b/src/plugins/irc-events/link.js @@ -100,8 +100,8 @@ function parse(msg, preview, res, client) { case "image/webp": if (res.size > (Helper.config.prefetchMaxImageSize * 1024)) { preview.type = "error"; - preview.head = "Large image"; - preview.body = "Image is greater than your max image size. Click to view."; + preview.error = "image-too-big"; + preview.maxSize = Helper.config.prefetchMaxImageSize * 1024; } else { preview.type = "image"; preview.thumb = preview.link; diff --git a/test/client/js/libs/handlebars/friendlysizeTest.js b/test/client/js/libs/handlebars/friendlysizeTest.js new file mode 100644 index 00000000..274495d0 --- /dev/null +++ b/test/client/js/libs/handlebars/friendlysizeTest.js @@ -0,0 +1,18 @@ +"use strict"; + +const expect = require("chai").expect; +const friendlysize = require("../../../../../client/js/libs/handlebars/friendlysize"); + +describe("friendlysize Handlebars helper", function() { + it("should render big values in human-readable version", function() { + expect(friendlysize(51200)).to.equal("50 KB"); + }); + + it("should round with 1 digit", function() { + expect(friendlysize(1234567)).to.equal("1.2 MB"); + }); + + it("should render special case 0 as 0 Bytes", function() { + expect(friendlysize(0)).to.equal("0 Bytes"); + }); +});