From 91e3ca88bb363ed5845cff6dcd14ab166c060d5c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?J=C3=A9r=C3=A9mie=20Astori?= <jeremie@astori.fr>
Date: Thu, 28 Dec 2017 16:31:19 -0500
Subject: [PATCH] UI for "Image too large" errors

---
 client/css/style.css                           |  4 ++++
 client/js/libs/handlebars/friendlysize.js      | 10 ++++++++++
 client/views/msg_preview.tpl                   | 12 ++++++++----
 src/plugins/irc-events/link.js                 |  4 ++--
 .../js/libs/handlebars/friendlysizeTest.js     | 18 ++++++++++++++++++
 5 files changed, 42 insertions(+), 6 deletions(-)
 create mode 100644 client/js/libs/handlebars/friendlysize.js
 create mode 100644 test/client/js/libs/handlebars/friendlysizeTest.js

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 @@
 		</a>
 	{{/equal}}
 	{{#equal type "error"}}
-		<a class="toggle-text" href="{{link}}" target="_blank" rel="noopener">
-			<div class="head" title="{{head}}">{{head}}</div>
-			<div class="body" title="{{body}}">{{body}}</div>
-		</a>
+		{{#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}}
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");
+	});
+});