Merge pull request #1353 from thelounge/astorije/better-preview-ordering
Enforce correct order for previews on server-side prefectch rather than at client parsing
This commit is contained in:
commit
f642a3c776
@ -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;
|
||||
}
|
||||
|
@ -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("");
|
||||
};
|
||||
|
@ -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) => {
|
||||
|
@ -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();
|
||||
|
||||
|
@ -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}}
|
||||
|
@ -7,5 +7,11 @@
|
||||
{{> user_name nick=from}}
|
||||
{{/if}}
|
||||
</span>
|
||||
<span class="text">{{{parse text}}}</span>
|
||||
<span class="content">
|
||||
<span class="text">{{{parse text}}}</span>
|
||||
|
||||
{{#each previews}}
|
||||
<div class="preview" data-url="{{link}}"></div>
|
||||
{{/each}}
|
||||
</span>
|
||||
</div>
|
||||
|
@ -3,5 +3,5 @@
|
||||
{{tz time}}
|
||||
</span>
|
||||
<span class="from"></span>
|
||||
<span class="text"></span>
|
||||
<span class="content"></span>
|
||||
</div>
|
||||
|
@ -3,7 +3,7 @@
|
||||
{{tz time}}
|
||||
</span>
|
||||
<span class="from">[{{command}}]</span>
|
||||
<span class="text">
|
||||
<span class="content">
|
||||
{{#each params}}
|
||||
<span>{{this}}</span>
|
||||
{{/each}}
|
||||
|
@ -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) {
|
||||
if (res === null) {
|
||||
return;
|
||||
}
|
||||
|
||||
parse(msg, link, res, client);
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
function parse(msg, url, res, client) {
|
||||
const preview = {
|
||||
type: "",
|
||||
)).map((link) => ({
|
||||
type: "loading",
|
||||
head: "",
|
||||
body: "",
|
||||
thumb: "",
|
||||
link: url,
|
||||
};
|
||||
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, preview, res, client);
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
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
|
||||
|
@ -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);
|
||||
}
|
||||
};
|
||||
|
@ -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=vs.85).aspx\" target=\"_blank\" rel=\"noopener\">" +
|
||||
"https://msdn.microsoft.com/en-us/library/windows/desktop/ms644989(v=vs.85).aspx" +
|
||||
"</a>" +
|
||||
"<div class=\"preview\" data-url=\"https://msdn.microsoft.com/en-us/library/windows/desktop/ms644989(v=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>" +
|
||||
">" +
|
||||
"<div class=\"preview\" data-url=\"https://theos.kyriasis.com/~kyrias/stats/archlinux.html\"></div>"
|
||||
">"
|
||||
}, {
|
||||
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>"
|
||||
);
|
||||
});
|
||||
});
|
||||
|
@ -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();
|
||||
}
|
||||
});
|
||||
|
Loading…
Reference in New Issue
Block a user