Mirrors/Overte-community-apps-AleziaKurdis
3
0
Fork 0
mirror of https://github.com/AleziaKurdis/Overte-community-apps.git synced 2025-04-10 17:02:08 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

Embed adjustments.

Browse source 
Changed how embeds work to further prevent XSS possibilities.
Window rename to simply "Chat".
Small adjustments.

Signed-off-by: Armored Dragon <publicmail@armoreddragon.com>
This commit is contained in:
Armored Dragon 2024-02-25 16:50:43 -06:00
parent 4394044646
commit 6bc445d12d
No known key found for this signature in database
GPG key ID: C7207ACC3382AD8B
4 changed files with 70 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
applications/armored-chat/armored_chat.js
View file

@ -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":

17
applications/armored-chat/index.css
View file

@ -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;
}

33
applications/armored-chat/index.html
View file

@ -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}
<br>
<iframe class="z-depth-2" width='420' height='236' src='https://www.youtube.com/embed/${yt_url.toString().split("/")[3]}' frameborder='0'></iframe>`
);
yt_url.forEach((url) => {
message_embeds += `<iframe class="z-depth-2" width='420' height='236' src='https://www.youtube.com/embed/${url.toString().split("/")[3]}' frameborder='0'></iframe><br>`;
// 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}<br><span class='image-container'><img src='${image_link}'></span>`);
image_link.forEach((image) => {
message_embeds += `<span class='image-container'><img src='${image}'></span><br>`;
// 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 `<a href='#' onclick='_emitEvent({type:"open_url", url: match.toString()})'>${match}</a>`;
let link_url = message.message.match(/(?:^|\s)(https?:\/\/)?[\w.-]+(?:\.[\w\.-]+)+(?:\/[\w\-\._~:/?#[\]@!\$&'\(\)\*\+,;=.]*)?(?=\s|$)/g);
if (link_url) {
link_url.forEach((link) => {
message_embeds += `<a href='#' onclick='_emitEvent({type:"open_url", url: "${link}" })'>${link}</a><br>`;
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 @@
<div class="pfp"><img src="./img/ui/user_white.png" /></div>
<div class="name">[NAME]</div>
<div class="timestamp" title="[DATE]">[TIMESTAMP]</div>
<div class="embeds">[EMBEDS]</div>
<div class="body">[CONTENT]</div>
</div>
</template>

29
applications/armored-chat/index.scss
View file

@ -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;
}
}
}