supernets/hardlounge
supernets/hardlounge
4
Fork 0
Code Issues 1 Pull Requests Packages Projects Releases Wiki Activity

Merge pull request #1353 from thelounge/astorije/better-preview-ordering

Browse Source 
Enforce correct order for previews on server-side prefectch rather than at client parsing
This commit is contained in:
Pavel Djundik 2017-07-21 11:12:37 +03:00 committed by GitHub
commit f642a3c776
12 changed files with 100 additions and 97 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
client/css/style.css
View File

@ -943,7 +943,7 @@ kbd {
#chat .time,
#chat .from,
#chat .text {
#chat .content {
display: block;
padding: 2px 0;
flex: 0 0 auto;
@ -965,7 +965,7 @@ kbd {
position: relative;
}
#chat .text {
#chat .content {
flex: 1 1 auto;
overflow: hidden;
}
@ -1024,7 +1024,7 @@ kbd {
#chat.colored-nicks .user.color-31 { color: #ff4846; }
#chat.colored-nicks .user.color-32 { color: #ff199b; }
#chat .text {
#chat .content {
padding-left: 10px;
padding-right: 6px;
}
@ -1093,14 +1093,14 @@ kbd {
display: none !important;
}
#chat .join .text,
#chat .kick .text,
#chat .mode .text,
#chat .nick .text,
#chat .part .text,
#chat .quit .text,
#chat .topic .text,
#chat .topic_set_by .text {
#chat .join .content,
#chat .kick .content,
#chat .mode .content,
#chat .nick .content,
#chat .part .content,
#chat .quit .content,
#chat .topic .content,
#chat .topic_set_by .content {
color: #999;
}
@ -1978,7 +1978,7 @@ part/quit messages where we don't load previews (adds a blank line otherwise) */
#chat .time,
#chat .from,
#chat .text {
#chat .content {
border: 0;
display: inline;
padding: 0;
@ -2097,7 +2097,7 @@ part/quit messages where we don't load previews (adds a blank line otherwise) */
#chat .part-reason,
#chat .quit-reason,
#chat .new-topic,
#chat .action-text,
#chat .action .text,
#chat table.channel-list .topic {
white-space: pre-wrap;
}

3
client/js/libs/handlebars/parse.js
View File

@ -81,8 +81,5 @@ module.exports = function parse(text) {
}
return fragments;
}).join("") + linkParts.map((part) => {
const escapedLink = Handlebars.Utils.escapeExpression(part.link);
return `<div class="preview" data-url="${escapedLink}"></div>`;
}).join("");
};

4
client/js/render.js
View File

@ -71,10 +71,10 @@ function buildChatMessage(data) {
}
const msg = $(templates[template](data.msg));
const text = msg.find(".text");
const content = msg.find(".content");
if (template === "msg_action") {
text.html(templates.actions[type](data.msg));
content.html(templates.actions[type](data.msg));
}
data.msg.previews.forEach((preview) => {

6
client/js/renderPreview.js
View File

@ -8,6 +8,10 @@ const templates = require("../views");
module.exports = renderPreview;
function renderPreview(preview, msg) {
if (preview.type === "loading") {
return;
}
preview.shown = options.shouldOpenMessagePreview(preview.type);
const container = msg.closest(".chat");
@ -34,7 +38,7 @@ function renderPreview(preview, msg) {
$("#chat").on("click", ".toggle-button", function() {
const self = $(this);
const container = self.closest(".chat");
const content = self.closest(".text")
const content = self.closest(".content")
.find(`.preview[data-url="${self.data("url")}"] .toggle-content`);
const bottom = container.isScrollBottom();

6
client/views/actions/action.tpl
View File

@ -1,2 +1,6 @@
{{> ../user_name nick=from}}
<span class="action-text">{{{parse text}}}</span>
<span class="text">{{{parse text}}}</span>
{{#each previews}}
<div class="preview" data-url="{{link}}"></div>
{{/each}}

6
client/views/msg.tpl
View File

@ -7,5 +7,11 @@
{{> user_name nick=from}}
{{/if}}
</span>
<span class="content">
<span class="text">{{{parse text}}}</span>
{{#each previews}}
<div class="preview" data-url="{{link}}"></div>
{{/each}}
</span>
</div>

2
client/views/msg_action.tpl
View File

@ -3,5 +3,5 @@
{{tz time}}
</span>
<span class="from"></span>
<span class="text"></span>
<span class="content"></span>
</div>

2
client/views/msg_unhandled.tpl
View File

@ -3,7 +3,7 @@
{{tz time}}
</span>
<span class="from">[{{command}}]</span>
<span class="text">
<span class="content">
{{#each params}}
<span>{{this}}</span>
{{/each}}

30
src/plugins/irc-events/link.js
View File

@ -24,30 +24,28 @@ module.exports = function(client, chan, msg) {
return;
}
Array.from(new Set( // Remove duplicate links
msg.previews = Array.from(new Set( // Remove duplicate links
links.map((link) => escapeHeader(link.link))
))
.slice(0, 5) // Only preview the first 5 URLs in message to avoid abuse
.forEach((link) => {
fetch(link, function(res) {
)).map((link) => ({
type: "loading",
head: "",
body: "",
thumb: "",
link: link,
})).slice(0, 5); // Only preview the first 5 URLs in message to avoid abuse
msg.previews.forEach((preview) => {
fetch(preview.link, function(res) {
if (res === null) {
return;
}
parse(msg, link, res, client);
parse(msg, preview, res, client);
});
});
};
function parse(msg, url, res, client) {
const preview = {
type: "",
head: "",
body: "",
thumb: "",
link: url,
};
function parse(msg, preview, res, client) {
switch (res.type) {
case "text/html":
var $ = cheerio.load(res.data);
@ -130,8 +128,6 @@ function emitPreview(client, msg, preview) {
}
}
msg.previews.push(preview);
client.emit("msg:preview", {
id: msg.id,
preview: preview

3
src/plugins/irc-events/message.js
View File

@ -89,11 +89,12 @@ module.exports = function(irc, network) {
self: self,
highlight: highlight
});
chan.pushMessage(client, msg, !self);
// No prefetch URLs unless are simple MESSAGE or ACTION types
if ([Msg.Type.MESSAGE, Msg.Type.ACTION].indexOf(data.type) !== -1) {
LinkPrefetch(client, chan, msg);
}
chan.pushMessage(client, msg, !self);
}
};

56
test/client/js/libs/handlebars/parse.js
View File

@ -37,15 +37,13 @@ describe("parse Handlebars helper", () => {
expected:
"<a href=\"irc://freenode.net/thelounge\" target=\"_blank\" rel=\"noopener\">" +
"irc://freenode.net/thelounge" +
"</a>" +
"<div class=\"preview\" data-url=\"irc://freenode.net/thelounge\"></div>"
"</a>"
}, {
input: "www.nooooooooooooooo.com",
expected:
"<a href=\"http://www.nooooooooooooooo.com\" target=\"_blank\" rel=\"noopener\">" +
"www.nooooooooooooooo.com" +
"</a>" +
"<div class=\"preview\" data-url=\"http://www.nooooooooooooooo.com\"></div>"
"</a>"
}, {
input: "look at https://thelounge.github.io/ for more information",
expected:
@ -53,8 +51,7 @@ describe("parse Handlebars helper", () => {
"<a href=\"https://thelounge.github.io/\" target=\"_blank\" rel=\"noopener\">" +
"https://thelounge.github.io/" +
"</a>" +
" for more information" +
"<div class=\"preview\" data-url=\"https://thelounge.github.io/\"></div>"
" for more information"
}, {
input: "use www.duckduckgo.com for privacy reasons",
expected:
@ -62,26 +59,13 @@ describe("parse Handlebars helper", () => {
"<a href=\"http://www.duckduckgo.com\" target=\"_blank\" rel=\"noopener\">" +
"www.duckduckgo.com" +
"</a>" +
" for privacy reasons" +
"<div class=\"preview\" data-url=\"http://www.duckduckgo.com\"></div>"
" for privacy reasons"
}, {
input: "svn+ssh://example.org",
expected:
"<a href=\"svn+ssh://example.org\" target=\"_blank\" rel=\"noopener\">" +
"svn+ssh://example.org" +
"</a>" +
"<div class=\"preview\" data-url=\"svn+ssh://example.org\"></div>"
}, {
input: "https://example.com https://example.org",
expected:
"<a href=\"https://example.com\" target=\"_blank\" rel=\"noopener\">" +
"https://example.com" +
"</a> " +
"<a href=\"https://example.org\" target=\"_blank\" rel=\"noopener\">" +
"https://example.org" +
"</a>" +
"<div class=\"preview\" data-url=\"https://example.com\"></div>" +
"<div class=\"preview\" data-url=\"https://example.org\"></div>"
"</a>"
}];
const actual = testCases.map((testCase) => parse(testCase.input));
@ -97,8 +81,7 @@ describe("parse Handlebars helper", () => {
"bonuspunkt: your URL parser misparses this URL: " +
"<a href=\"https://msdn.microsoft.com/en-us/library/windows/desktop/ms644989(v&#x3D;vs.85).aspx\" target=\"_blank\" rel=\"noopener\">" +
"https://msdn.microsoft.com/en-us/library/windows/desktop/ms644989(v&#x3D;vs.85).aspx" +
"</a>" +
"<div class=\"preview\" data-url=\"https://msdn.microsoft.com/en-us/library/windows/desktop/ms644989(v&#x3D;vs.85).aspx\"></div>";
"</a>";
const actual = parse(input);
@ -113,8 +96,7 @@ describe("parse Handlebars helper", () => {
"<a href=\"https://theos.kyriasis.com/~kyrias/stats/archlinux.html\" target=\"_blank\" rel=\"noopener\">" +
"https://theos.kyriasis.com/~kyrias/stats/archlinux.html" +
"</a>" +
"&gt;" +
"<div class=\"preview\" data-url=\"https://theos.kyriasis.com/~kyrias/stats/archlinux.html\"></div>"
"&gt;"
}, {
input: "abc (www.example.com)",
expected:
@ -122,22 +104,19 @@ describe("parse Handlebars helper", () => {
"<a href=\"http://www.example.com\" target=\"_blank\" rel=\"noopener\">" +
"www.example.com" +
"</a>" +
")" +
"<div class=\"preview\" data-url=\"http://www.example.com\"></div>"
")"
}, {
input: "http://example.com/Test_(Page)",
expected:
"<a href=\"http://example.com/Test_(Page)\" target=\"_blank\" rel=\"noopener\">" +
"http://example.com/Test_(Page)" +
"</a>" +
"<div class=\"preview\" data-url=\"http://example.com/Test_(Page)\"></div>"
"</a>"
}, {
input: "www.example.com/Test_(Page)",
expected:
"<a href=\"http://www.example.com/Test_(Page)\" target=\"_blank\" rel=\"noopener\">" +
"www.example.com/Test_(Page)" +
"</a>" +
"<div class=\"preview\" data-url=\"http://www.example.com/Test_(Page)\"></div>"
"</a>"
}];
const actual = testCases.map((testCase) => parse(testCase.input));
@ -274,8 +253,7 @@ describe("parse Handlebars helper", () => {
"<span class=\"irc-italic\">freenode.net</span>" +
"/" +
"<span class=\"irc-fg4 irc-bg8\">thelounge</span>" +
"</a>" +
"<div class=\"preview\" data-url=\"irc://freenode.net/thelounge\"></div>"
"</a>"
}, {
input: "\x02#\x038,9thelounge",
expected:
@ -314,16 +292,14 @@ describe("parse Handlebars helper", () => {
"like.." +
"<a href=\"http://example.com\" target=\"_blank\" rel=\"noopener\">" +
"http://example.com" +
"</a>" +
"<div class=\"preview\" data-url=\"http://example.com\"></div>"
"</a>"
}, {
input: "like..HTTP://example.com",
expected:
"like.." +
"<a href=\"HTTP://example.com\" target=\"_blank\" rel=\"noopener\">" +
"HTTP://example.com" +
"</a>" +
"<div class=\"preview\" data-url=\"HTTP://example.com\"></div>"
"</a>"
}];
const actual = testCases.map((testCase) => parse(testCase.input));
@ -339,8 +315,7 @@ describe("parse Handlebars helper", () => {
"" +
"<a href=\"http://example.com/#hash\" target=\"_blank\" rel=\"noopener\">" +
"http://example.com/#hash" +
"</a>" +
"<div class=\"preview\" data-url=\"http://example.com/#hash\"></div>"
"</a>"
}];
const actual = testCases.map((testCase) => parse(testCase.input));
@ -355,8 +330,7 @@ describe("parse Handlebars helper", () => {
expect(actual).to.equal(
"Url: <a href=\"http://example.com/path\" target=\"_blank\" rel=\"noopener\">http://example.com/path</a> " +
"Channel: <span class=\"inline-channel\" role=\"button\" tabindex=\"0\" data-chan=\"##channel\">##channel</span>" +
"<div class=\"preview\" data-url=\"http://example.com/path\"></div>"
"Channel: <span class=\"inline-channel\" role=\"button\" tabindex=\"0\" data-chan=\"##channel\">##channel</span>"
);
});
});

43
test/plugins/link.js
View File

@ -27,12 +27,21 @@ describe("Link plugin", function() {
});
it("should be able to fetch basic information about URLs", function(done) {
const url = "http://localhost:9002/basic";
const message = this.irc.createMessage({
text: "http://localhost:9002/basic"
text: url
});
link(this.irc, this.network.channels[0], message);
expect(message.previews).to.deep.equal([{
body: "",
head: "",
link: url,
thumb: "",
type: "loading"
}]);
this.app.get("/basic", function(req, res) {
res.send("<title>test title</title><meta name='description' content='simple description'>");
});
@ -41,8 +50,9 @@ describe("Link plugin", function() {
expect(data.preview.type).to.equal("link");
expect(data.preview.head).to.equal("test title");
expect(data.preview.body).to.equal("simple description");
expect(data.preview.link).to.equal("http://localhost:9002/basic");
expect(message.previews.length).to.equal(1);
expect(data.preview.link).to.equal(url);
expect(message.previews).to.deep.equal([data.preview]);
done();
});
});
@ -178,6 +188,20 @@ describe("Link plugin", function() {
link(this.irc, this.network.channels[0], message);
expect(message.previews).to.eql([{
body: "",
head: "",
link: "http://localhost:9002/one",
thumb: "",
type: "loading"
}, {
body: "",
head: "",
link: "http://localhost:9002/two",
thumb: "",
type: "loading"
}]);
this.app.get("/one", function(req, res) {
res.send("<title>first title</title>");
});
@ -186,22 +210,19 @@ describe("Link plugin", function() {
res.send("<title>second title</title>");
});
const loaded = {
one: false,
two: false
};
const previews = [];
this.irc.on("msg:preview", function(data) {
if (data.preview.link === "http://localhost:9002/one") {
expect(data.preview.head).to.equal("first title");
loaded.one = true;
previews[0] = data.preview;
} else if (data.preview.link === "http://localhost:9002/two") {
expect(data.preview.head).to.equal("second title");
loaded.two = true;
previews[1] = data.preview;
}
if (loaded.one && loaded.two) {
expect(message.previews.length).to.equal(2);
if (previews[0] && previews[1]) {
expect(message.previews).to.eql(previews);
done();
}
});