diff --git a/applications/armored-chat/armored_chat.js b/applications/armored-chat/armored_chat.js index 7285781..61e5bef 100644 --- a/applications/armored-chat/armored_chat.js +++ b/applications/armored-chat/armored_chat.js @@ -10,6 +10,7 @@ (function () { "use strict"; // TODO: Encryption + PMs + // TODO: Open in external web browser var app_is_visible = false; var settings = { @@ -62,7 +63,7 @@ } function _openWindow() { chat_overlay_window = new Desktop.createWindow(Script.resourcesPath() + "qml/hifi/tablet/DynamicWebview.qml", { - title: "Overte Chat", + title: "Chat", size: { x: 550, y: 400 }, additionalFlags: Desktop.ALWAYS_ON_TOP, visible: app_is_visible, // FIXME Invalid? @@ -135,7 +136,8 @@ break; case "open_url": - Window.openUrl(parsed.message.toString()); + new OverlayWebWindow({ source: parsed.url.toString(), width: 500, height: 400 }); + // Window.openUrl(parsed.url.toString()); break; case "setting_update": diff --git a/applications/armored-chat/index.css b/applications/armored-chat/index.css index 2f73fe3..24d86e3 100644 --- a/applications/armored-chat/index.css +++ b/applications/armored-chat/index.css @@ -85,6 +85,9 @@ body .page .content.message-list .message .body { word-wrap: anywhere; overflow-x: hidden; } +body .page .content.message-list .message .body a { + color: white; +} body .page .content.message-list .message .body .image-container { width: 100%; max-width: 400px; @@ -93,6 +96,20 @@ body .page .content.message-list .message .body .image-container { body .page .content.message-list .message .body .image-container img { width: auto; height: 100%; +} +body .page .content.message-list .message .embeds { + width: 100%; + overflow-x: hidden; +} +body .page .content.message-list .message .embeds a { + color: white; +} +body .page .content.message-list .message .embeds .image-container { + width: 100%; + max-width: 400px; + max-height: 300px; +} +body .page .content.message-list .message .embeds .image-container img { max-width: 400px; max-height: 300px; } diff --git a/applications/armored-chat/index.html b/applications/armored-chat/index.html index a314d1f..690fa44 100644 --- a/applications/armored-chat/index.html +++ b/applications/armored-chat/index.html @@ -186,30 +186,34 @@ // Clone template message let message_template = qs("#message-listing"); let message_clone = message_template.content.cloneNode(true); + let message_embeds = ""; + message_clone.querySelector(".body").innerHTML = ""; + message_clone.querySelector(".embeds").innerHTML = ""; // Youtube embeds let yt_url = message.message.match(/(https?:\/\/)?(www\.)?(youtube\.com\/watch\?v=|youtu\.be\/)([^& \n<]+)(?:[^ \n<]+)?/g); if (yt_url) { - message.message = message.message.replace( - yt_url, - `${yt_url} -
- ` - ); + yt_url.forEach((url) => { + message_embeds += `
`; + // message.message = message.message.replace(url, ""); + }); } // Image embeds let image_link = message.message.match(/.+.(png|jpg|jpeg|webp)/g); if (image_link) { - message.message = message.message.replace(image_link, `${image_link}
`); + image_link.forEach((image) => { + message_embeds += `
`; + // message.message = message.message.replace(image, ""); + }); } // Linkify links - let link_regex = /^(?:http(s)?:\/\/)?[\w.-]+(?:\.[\w\.-]+)+[\w\-\._~:/?#[\]@!\$&'\(\)\*\+,;=.]+$/gm; - - if (message.message.match(link_regex)) { - message.message = message.message.replace(link_regex, (match) => { - return `${match}`; + let link_url = message.message.match(/(?:^|\s)(https?:\/\/)?[\w.-]+(?:\.[\w\.-]+)+(?:\/[\w\-\._~:/?#[\]@!\$&'\(\)\*\+,;=.]*)?(?=\s|$)/g); + if (link_url) { + link_url.forEach((link) => { + message_embeds += `${link}
`; + message.message = message.message.replace(link, ""); }); } @@ -220,7 +224,9 @@ month: "long", day: "numeric", }); - message_clone.querySelector(".body").innerHTML = message.message; + + message_clone.querySelector(".embeds").innerHTML = message_embeds; + message_clone.querySelector(".body").innerText = message.message; // Append to the message list qs("#" + target + " .message-list").appendChild(message_clone); // Scroll to the bottom of the page @@ -260,6 +266,7 @@
[NAME]
[TIMESTAMP]
+
[EMBEDS]
[CONTENT]
diff --git a/applications/armored-chat/index.scss b/applications/armored-chat/index.scss index 5b98ae4..f14d5e5 100644 --- a/applications/armored-chat/index.scss +++ b/applications/armored-chat/index.scss @@ -95,6 +95,10 @@ body { word-wrap: anywhere; overflow-x: hidden; + a { + color: white; + } + .image-container { width: 100%; max-width: 400px; @@ -104,8 +108,33 @@ body { width: auto; height: 100%; + // max-width: 400px; + // max-height: 300px; + } + } + } + + .embeds { + width: 100%; + + overflow-x: hidden; + a { + color: white; + } + + .image-container { + width: 100%; + max-width: 400px; + max-height: 300px; + + img { + // width: auto; + // height: 100%; max-width: 400px; max-height: 300px; + + // max-width: 400px; + // max-height: 300px; } } }