Merge pull request #1919 from thelounge/yamanickill/image-size-error

Show error if image is greater than max prefetch size

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;

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]}`;
+};

client/views/msg_preview.tpl

@@ -28,5 +28,15 @@
 			<div class="body" title="{{body}}">{{body}}</div>
 		</a>
 	{{/equal}}
+	{{#equal type "error"}}
+		{{#equal error "image-too-big"}}
+			<em>
+				This image is larger than {{friendlysize maxSize}} and cannot be
+				previewed.
+				<a href="{{link}}" target="_blank" rel="noopener">Click here</a>
+				to open it in a new window.
+			</em>
+		{{/equal}}
+	{{/equal}}
 </div>
 {{/preview}}

src/plugins/irc-events/link.js

@@ -99,12 +99,14 @@ function parse(msg, preview, res, client) {
 	case "image/jpeg":
 	case "image/webp":
 		if (res.size > (Helper.config.prefetchMaxImageSize * 1024)) {
-			return;
+			preview.type = "error";
+			preview.error = "image-too-big";
+			preview.maxSize = Helper.config.prefetchMaxImageSize * 1024;
+		} else {
+			preview.type = "image";
+			preview.thumb = preview.link;
 		}
 
-		preview.type = "image";
-		preview.thumb = preview.link;
-
 		break;
 
 	case "audio/midi":

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");
+	});
+});