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

External Window Setting + Settings persistance

Browse source 
Adds the ability to have the chat window open in a different window. Also allows settings to be saved and loaded.

Signed-off-by: Armored Dragon <publicmail@armoreddragon.com>
This commit is contained in:
Armored Dragon 2024-02-21 14:00:51 -06:00
parent 551117950e
commit d99ce00b5b
No known key found for this signature in database
GPG key ID: C7207ACC3382AD8B
2 changed files with 151 additions and 81 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -12,29 +12,31 @@
// TODO: Theme consistency
// TODO: Dark Theme/Light theme
// TODO: Encryption
// TODO: Minimal theme
// TODO: Image embedding
// TODO: Find window init event method
var app_is_visible = true;
var settings = {
max_history: 250,
// show_typing_indicator: true,
// show_speech_bubble: true,
// compact_chat: false
compact_chat: false,
external_window: false,
};
var app_data = { app_uuid: Uuid.generate(), current_page: "domain" };
// var encryption = { public: null, private: null };
// var encryption = { };
// Global vars
var ac_tablet;
var chat_overlay_window;
var app_button;
startup();
function startup() {
ac_tablet = Tablet.getTablet("com.highfidelity.interface.tablet.system");
var app_button = ac_tablet.addButton({
app_button = ac_tablet.addButton({
icon: Script.resolvePath("./img/icon.png"),
text: "A-CHAT",
});
@ -42,75 +44,72 @@
// When script ends, remove itself from tablet
Script.scriptEnding.connect(function () {
ac_tablet.removeButton(app_button);
console.log("Closing");
chat_overlay_window.close();
});
chat_overlay_window = new OverlayWebWindow({
title: "Armored-Chat",
width: 350,
height: 400,
visible: app_is_visible,
source: Script.resolvePath("./index.html"),
});
// TODO Crashing
// chat_overlay_window = new AppUi({
// buttonName: "Armored-Chat",
// home: Script.resolvePath("./index.html"),
// graphicsDirectory: Script.resolvePath("./") // The path to your button icons
// });
// Main overlay
_openWindow();
// Overlay button toggle
app_button.clicked.connect(toggleMainChatWindow);
chat_overlay_window.closed.connect(toggleMainChatWindow);
}
function toggleMainChatWindow() {
app_is_visible = !app_is_visible;
app_button.editProperties({ isActive: app_is_visible });
chat_overlay_window.visible = app_is_visible;
function toggleMainChatWindow() {
app_is_visible = !app_is_visible;
app_button.editProperties({ isActive: app_is_visible });
chat_overlay_window.visible = app_is_visible;
// External window was closed; the window does not exist anymore
if (chat_overlay_window.title == "" && app_is_visible) {
_openWindow();
}
}
function _openWindow() {
chat_overlay_window = new Desktop.createWindow(Script.resourcesPath() + "qml/hifi/tablet/DynamicWebview.qml", {
title: "Armored-Chat",
size: { x: 550, y: 400 },
additionalFlags: Desktop.ALWAYS_ON_TOP,
visible: app_is_visible,
presentationMode: Desktop.PresentationMode.VIRTUAL,
});
chat_overlay_window.closed.connect(toggleMainChatWindow);
chat_overlay_window.sendToQml({ url: Script.resolvePath("./index.html") });
// FIXME: Loadsettings need to happen after the window is initialized?
Script.setTimeout(_loadSettings, 1000);
chat_overlay_window.webEventReceived.connect(onWebEventReceived);
}
// Initialize default message subscriptions
Messages.subscribe("chat");
Messages.subscribe("system");
// Messages.subscribe() // TODO: Get unique avatar identifier
// Add event listeners
// FIXME: below needs to be changed to work with appui
chat_overlay_window.webEventReceived.connect(onWebEventReceived);
Messages.messageReceived.connect(receivedMessage);
function receivedMessage(channel, message) {
// Check to see if the message is relating to Chat
var message = JSON.parse(message);
if (message.action == "change_setting") return;
channel = channel.toLowerCase();
if (channel !== "chat") return;
// Parse the chat channel for the message
var message = JSON.parse(message);
message.channel = message.channel.toLowerCase();
console.log(channel);
console.log(JSON.stringify(message));
// For now, while we are working on superseding Floof, we will allow compatibility with it.
// If for_app exists, it came from us and we are just sending the message so Floof can read it.
// We don't need to listen to this message.
if (message.for_app) return;
// Check the channel is valid
if (
message.channel !== "domain" &&
message.channel !== "local" &&
message.channel !== "system"
)
return;
if (message.channel !== "domain" && message.channel !== "local" && message.channel !== "system") return;
// If message is local, and if player is too far away from location, don't do anything
if (
channel.toLowerCase() === "local" &&
!Vec3.withinEpsilon(MyAvatar.position, message.position, 20)
)
return;
if (channel === "local" && !Vec3.withinEpsilon(MyAvatar.position, message.position, 20)) return;
if (message.type === "TransmitChatMessage") message.action = "send_chat_message";
// Update web view of to new message
// FIXME: this needs to be changed to work with appui
@ -120,6 +119,11 @@
_overlayMessage({ sender: message.displayName, message: message });
}
function onWebEventReceived(event) {
console.log(event);
// FIXME: Lazy!
// Checks to see if the event is a JSON object
if (!event.includes("{")) return;
var parsed = JSON.parse(event);
// Not our app? Not our problem!
@ -131,10 +135,16 @@
}
if (parsed.action === "change_setting") {
console.log(parsed);
settings[parsed.message.setting] = parsed.message.value;
console.log(settings[parsed.message.setting]);
console.log(JSON.stringify(parsed.message));
_saveSettings();
switch (parsed.message.setting) {
case "external_window":
chat_overlay_window.presentationMode = parsed.message.value ? Desktop.PresentationMode.NATIVE : Desktop.PresentationMode.VIRTUAL;
break;
}
if (parsed.message.setting === "vr_safe_mode") {
chat_overlay_window.close();
@ -142,13 +152,11 @@
// change settings
}
}
if (parsed.action === "send_chat_message")
return _sendMessage(parsed.message);
if (parsed.action === "send_chat_message") return _sendMessage(parsed.message);
if (parsed.action === "open_url") Window.openUrl(parsed.message.toString());
// Send to specific user (DM)
}
function _sendMessage(message) {
Messages.sendMessage(
"chat",
@ -168,9 +176,7 @@
position: MyAvatar.position,
message: message,
displayName: MyAvatar.sessionDisplayName,
channel:
app_data.current_page.charAt(0).toUpperCase() +
app_data.current_page.slice(1),
channel: app_data.current_page.charAt(0).toUpperCase() + app_data.current_page.slice(1),
type: "TransmitChatMessage",
for_app: "Floof",
})
@ -179,7 +185,6 @@
// Show overlay of the message you sent
_overlayMessage({ sender: MyAvatar.sessionDisplayName, message: message });
}
// TODO: Create new overlay system
function _overlayMessage(message) {
// Foofchat compatibility
@ -196,4 +201,40 @@
})
);
}
function _sendUpdateMessage(message_packet = { setting_name, setting_value }) {
chat_overlay_window.emitScriptEvent(
JSON.stringify({
setting_name: message_packet.setting_name,
setting_value: message_packet.setting_value,
action: "change_setting",
})
);
}
function _loadSettings() {
console.log("Loading config");
settings = Settings.getValue("ArmoredChat-Config", settings);
console.log("\nSettings follow:");
console.log(JSON.stringify(settings, " ", 4));
// Compact chat
if (settings.compact_chat) {
_sendUpdateMessage({
setting_name: "compact-chat",
setting_value: true,
});
}
// External Window
if (settings.external_window) {
chat_overlay_window.presentationMode = settings.external_window ? Desktop.PresentationMode.NATIVE : Desktop.PresentationMode.VIRTUAL;
_sendUpdateMessage({
setting_name: "external_window",
setting_value: true,
});
}
}
function _saveSettings() {
console.log("Saving config");
Settings.setValue("ArmoredChat-Config", settings);
}
})();

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

@ -60,6 +60,10 @@
<span>Compact Mode</span>
<input id="compact-message-toggle" type="checkbox" />
</div>
<div class="setting setting-toggle">
<span>External Window</span>
<input id="external-window-toggle" type="checkbox" />
</div>
</div>
</div>
@ -78,6 +82,7 @@
const qsa = (target) => document.querySelectorAll(target);
var scroll_distance = 100000; // The scroll distance for the chat window to automatically scroll down with.
var compact_mode = false; // Compact messages
var external_window = false;
// Add event listeners to all nav-buttons
qsa(".header button").forEach((button) => {
@ -114,7 +119,7 @@
JSON.stringify({
app: "ArmoredChat",
action: "change_page",
message: button.dataset.target.replace("-chat", "")
message: button.dataset.target.replace("-chat", ""),
})
);
}
@ -129,7 +134,7 @@
var clickEvent = {
app: "ArmoredChat",
message: qs("#message-entry").value,
action: "send_chat_message"
action: "send_chat_message",
};
EventBridge.emitWebEvent(JSON.stringify(clickEvent));
@ -137,37 +142,55 @@
});
// Start listening for new messages
EventBridge.scriptEventReceived.connect(function (message) {
EventBridge.scriptEventReceived.connect((message) => {
message = JSON.parse(message);
newMessage(message);
switch (message.action) {
case "send_chat_message":
newMessage(message);
break;
case "change_setting":
newSetting(message);
break;
}
});
// Settings
// qs("#vr-safe-mode-toggle").addEventListener("change", function () {
// var clickEvent = {
// app: "ArmoredChat",
// message: { setting: "vr_safe_mode", value: qs("#vr-safe-mode-toggle").value == "on" ? true : false },
// action: "change_setting"
// };
// EventBridge.emitWebEvent(JSON.stringify(clickEvent));
// });
// Settings
qs("#compact-message-toggle").addEventListener("change", function () {
_toggleCompactMode();
_sendSettingUpdate({
setting_name: "compact_chat",
setting_value: compact_mode,
});
});
function _toggleCompactMode() {
compact_mode = !compact_mode;
if (compact_mode) {
// Add the stylesheet to the head
document.head.insertAdjacentHTML(
"beforeend",
'<link id="compact-messages-ss" rel="stylesheet" href="compact-messages.css" />'
);
document.head.insertAdjacentHTML("beforeend", '<link id="compact-messages-ss" rel="stylesheet" href="compact-messages.css" />');
} else {
// Remove the compact messages stylesheet
qs("#compact-messages-ss").remove();
}
}
qs("#external-window-toggle").addEventListener("change", function () {
external_window = !external_window;
_sendSettingUpdate({
setting_name: "external_window",
setting_value: external_window,
});
});
function _sendSettingUpdate(obj = { setting_name, setting_value }) {
var obj_packet = {
app: "ArmoredChat",
message: { setting: obj.setting_name, value: obj.setting_value },
action: "change_setting",
};
EventBridge.emitWebEvent(JSON.stringify(obj_packet));
}
// TODO: Dynamic scrolling: Make it so each message increases the scrollTop value to make sure it continues to work for future messages.
// TODO: Limit embeds to 3.
function newMessage(message) {
@ -179,27 +202,20 @@
let message_clone = message_template.content.cloneNode(true);
// Youtube embeds
let yt_url = message.message.match(
/(https?:\/\/)?(www\.)?(youtube\.com\/watch\?v=|youtu\.be\/)([^& \n<]+)(?:[^ \n<]+)?/g
);
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>`
<iframe class="z-depth-2" width='420' height='236' src='https://www.youtube.com/embed/${yt_url.toString().split("/")[3]}' frameborder='0'></iframe>`
);
}
// 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>`
);
message.message = message.message.replace(image_link, `${image_link}<br><span class='image-container'><img src='${image_link}'></span>`);
}
// Linkify links
@ -216,7 +232,7 @@
message_clone.querySelector(".timestamp").innerText = new Date().toLocaleTimeString(undefined, { hour12: false });
message_clone.querySelector(".timestamp").title = new Date().toLocaleDateString(undefined, {
month: "long",
day: "numeric"
day: "numeric",
});
message_clone.querySelector(".body").innerHTML = message.message;
// Append to the message list
@ -231,6 +247,19 @@
function openExternal(url) {
EventBridge.emitWebEvent(JSON.stringify({ app: "ArmoredChat", action: "open_url", message: url }));
}
function newSetting(message) {
switch (message.setting_name) {
case "compact-chat":
qs("#compact-message-toggle").checked = true;
_toggleCompactMode();
break;
case "external_window":
qs("#external-window-toggle").checked = true;
external_window = true;
break;
}
}
</script>
<template id="message-listing">