mirror of
https://github.com/chylex/Discord-History-Tracker.git
synced 2025-07-04 19:38:51 +02:00
Compare commits
13 Commits
f23e6bec8c
...
0dc0d6b43b
Author | SHA1 | Date | |
---|---|---|---|
![]() |
0dc0d6b43b | ||
295370a3d4 | |||
![]() |
7e29c7f837 | ||
![]() |
7ba012ef5c | ||
![]() |
c52572b387 | ||
![]() |
5ba80dc12f | ||
![]() |
37a0feddcc | ||
![]() |
47f448dcde | ||
![]() |
0281b49815 | ||
![]() |
648b221bb8 | ||
![]() |
7d8558ae04 | ||
![]() |
41053549ab | ||
![]() |
f279bb4d16 |
24
app/Desktop/Dialogs/Progress/DelayedProgressDialog.cs
Normal file
24
app/Desktop/Dialogs/Progress/DelayedProgressDialog.cs
Normal file
@ -0,0 +1,24 @@
|
||||
using System;
|
||||
using System.Threading.Tasks;
|
||||
using Avalonia.Controls;
|
||||
using Avalonia.Threading;
|
||||
|
||||
namespace DHT.Desktop.Dialogs.Progress;
|
||||
|
||||
static class DelayedProgressDialog {
|
||||
public static async ValueTask Await(Func<Task> taskProvider, TimeSpan delay, Window window, string progressDialogTitle, string progressDialogDescription) {
|
||||
Dispatcher.UIThread.VerifyAccess();
|
||||
|
||||
Task task = Task.Run(taskProvider);
|
||||
if (task.IsCompleted) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Freeze the UI thread for a short while in case the task finishes quickly.
|
||||
_ = Task.WhenAny(Task.Delay(delay), task).GetAwaiter().GetResult();
|
||||
|
||||
if (!task.IsCompleted) {
|
||||
await ProgressDialog.ShowIndeterminate(window, progressDialogTitle, progressDialogDescription, _ => task);
|
||||
}
|
||||
}
|
||||
}
|
@ -2,13 +2,12 @@ using System;
|
||||
using System.Diagnostics.CodeAnalysis;
|
||||
using System.Threading.Tasks;
|
||||
using Avalonia.Controls;
|
||||
using DHT.Utils.Logging;
|
||||
|
||||
namespace DHT.Desktop.Dialogs.Progress;
|
||||
|
||||
[SuppressMessage("ReSharper", "MemberCanBeInternal")]
|
||||
public sealed partial class ProgressDialog : Window {
|
||||
private static readonly Log Log = Log.ForType<ProgressDialog>();
|
||||
private static readonly TimeSpan MinimumShowDuration = TimeSpan.FromMilliseconds(500);
|
||||
|
||||
internal static async Task Show(Window owner, string title, Func<ProgressDialog, IProgressCallback, Task> action) {
|
||||
var dialog = new ProgressDialog();
|
||||
@ -43,6 +42,7 @@ public sealed partial class ProgressDialog : Window {
|
||||
}
|
||||
|
||||
private bool isFinished = false;
|
||||
private DateTime startTime = DateTime.Now;
|
||||
private Task progressTask = Task.CompletedTask;
|
||||
|
||||
public ProgressDialog() {
|
||||
@ -50,6 +50,8 @@ public sealed partial class ProgressDialog : Window {
|
||||
}
|
||||
|
||||
public void OnOpened(object? sender, EventArgs e) {
|
||||
startTime = DateTime.Now;
|
||||
|
||||
if (DataContext is ProgressDialogModel model) {
|
||||
progressTask = Task.Run(model.StartTask);
|
||||
progressTask.ContinueWith(OnFinished, TaskScheduler.FromCurrentSynchronizationContext());
|
||||
@ -60,8 +62,14 @@ public sealed partial class ProgressDialog : Window {
|
||||
e.Cancel = !isFinished;
|
||||
}
|
||||
|
||||
private void OnFinished(Task task) {
|
||||
private async Task OnFinished(Task task) {
|
||||
isFinished = true;
|
||||
|
||||
TimeSpan elapsedTime = DateTime.Now - startTime;
|
||||
if (elapsedTime < MinimumShowDuration) {
|
||||
await Task.Delay(MinimumShowDuration - elapsedTime);
|
||||
}
|
||||
|
||||
Close();
|
||||
}
|
||||
|
||||
|
@ -4,6 +4,7 @@ using System.Runtime.InteropServices;
|
||||
using System.Threading.Tasks;
|
||||
using Avalonia.Controls;
|
||||
using DHT.Desktop.Dialogs.Message;
|
||||
using DHT.Desktop.Dialogs.Progress;
|
||||
using DHT.Desktop.Main.Screens;
|
||||
using DHT.Desktop.Server;
|
||||
using DHT.Server;
|
||||
@ -104,32 +105,33 @@ sealed partial class MainWindowModel : IAsyncDisposable {
|
||||
}
|
||||
|
||||
private async void MainContentScreenModelOnDatabaseClosed(object? sender, EventArgs e) {
|
||||
await DisposeContent();
|
||||
|
||||
Title = DefaultTitle;
|
||||
CurrentScreen = welcomeScreen;
|
||||
|
||||
await DisposeState();
|
||||
|
||||
welcomeScreenModel.DatabaseSelected += OnDatabaseSelected;
|
||||
}
|
||||
|
||||
private async Task DisposeContent() {
|
||||
if (mainContentScreenModel != null) {
|
||||
mainContentScreenModel.DatabaseClosed -= MainContentScreenModelOnDatabaseClosed;
|
||||
await mainContentScreenModel.DisposeAsync();
|
||||
mainContentScreenModel = null;
|
||||
}
|
||||
|
||||
await DisposeState();
|
||||
|
||||
Title = DefaultTitle;
|
||||
CurrentScreen = welcomeScreen;
|
||||
|
||||
welcomeScreenModel.DatabaseSelected += OnDatabaseSelected;
|
||||
}
|
||||
|
||||
private async Task DisposeState() {
|
||||
if (state != null) {
|
||||
await state.DisposeAsync();
|
||||
await DelayedProgressDialog.Await(() => state.DisposeAsync().AsTask(), TimeSpan.FromMilliseconds(200), window, "Close Database", "Please wait for the database to close...");
|
||||
state = null;
|
||||
}
|
||||
}
|
||||
|
||||
public async ValueTask DisposeAsync() {
|
||||
if (mainContentScreenModel != null) {
|
||||
await mainContentScreenModel.DisposeAsync();
|
||||
}
|
||||
|
||||
await DisposeContent();
|
||||
await DisposeState();
|
||||
}
|
||||
}
|
||||
|
@ -10,6 +10,7 @@
|
||||
|
||||
<link rel="stylesheet" href="styles/main.css">
|
||||
<link rel="stylesheet" href="styles/menu.css">
|
||||
<link rel="stylesheet" href="styles/servers.css">
|
||||
<link rel="stylesheet" href="styles/channels.css">
|
||||
<link rel="stylesheet" href="styles/messages.css">
|
||||
<link rel="stylesheet" href="styles/modal.css">
|
||||
@ -75,6 +76,7 @@
|
||||
</div>
|
||||
|
||||
<div id="app">
|
||||
<div id="servers"></div>
|
||||
<div id="channels">
|
||||
<div class="loading"></div>
|
||||
</div>
|
||||
@ -86,4 +88,4 @@
|
||||
<div id="dialog"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
@ -2,6 +2,7 @@ import discord from "./discord.mjs";
|
||||
import gui from "./gui.mjs";
|
||||
import state from "./state.mjs";
|
||||
import "./polyfills.mjs";
|
||||
import servers from "./servers.mjs";
|
||||
|
||||
window.DISCORD = discord;
|
||||
|
||||
@ -25,10 +26,12 @@ document.addEventListener("DOMContentLoaded", () => {
|
||||
|
||||
state.onUsersRefreshed(users => {
|
||||
gui.updateUserList(users);
|
||||
servers.update()
|
||||
});
|
||||
|
||||
state.onChannelsRefreshed((channels, selected) => {
|
||||
gui.updateChannelList(channels, selected, state.selectChannel);
|
||||
servers.update()
|
||||
});
|
||||
|
||||
state.onMessagesRefreshed(messages => {
|
||||
|
@ -113,16 +113,17 @@ export default (function() {
|
||||
return {
|
||||
setup() {
|
||||
templateChannelServer = new template([
|
||||
"<div class='channel' data-channel='{id}'>",
|
||||
"<div class='channel ServerChannel' data-channel='{id}' server-id='{serverId}' server-name='{server.name}' server-type='{server.type}'>",
|
||||
"<div class='info' title='{topic}'><strong class='name'>#{name}</strong>{nsfw}<span class='tag'>{msgcount}</span></div>",
|
||||
"<span class='server'>{server.name} ({server.type})</span>",
|
||||
"<!--<span class='server'>{server.name} ({server.type})</span>-->",
|
||||
"</div>"
|
||||
].join(""));
|
||||
|
||||
templateChannelPrivate = new template([
|
||||
"<div class='channel' data-channel='{id}'>",
|
||||
"<div class='channel UserChannel' data-channel='{id}' server-id='0' server-name='{server.name}' server-type='{server.type}'>",
|
||||
"<div class='avatar'>{icon}</div>",
|
||||
"<div class='info'><strong class='name'>{name}</strong><span class='tag'>{msgcount}</span></div>",
|
||||
"<span class='server'>({server.type})</span>",
|
||||
"<!--<span class='server'>{server.name} ({server.type})</span>-->",
|
||||
"</div>"
|
||||
].join(""));
|
||||
|
||||
@ -166,7 +167,7 @@ export default (function() {
|
||||
|
||||
// noinspection HtmlUnknownTarget
|
||||
templateEmbedImageWithSize = new template([
|
||||
"<a href='{url}' class='embed thumbnail loading'><img src='{src}' width='{width}' height='{height}' alt='' onload='window.DISCORD.handleImageLoad(this)' onerror='window.DISCORD.handleImageLoadError(this)'></a><br>"
|
||||
"<a href='{url}' class='embed thumbnail loading'><img src='{src}' width='{width}' alt='' onload='window.DISCORD.handleImageLoad(this)' onerror='window.DISCORD.handleImageLoadError(this)'></a><br>"
|
||||
].join(""));
|
||||
|
||||
// noinspection HtmlUnknownTarget
|
||||
|
109
app/Resources/Viewer/scripts/servers.mjs
Normal file
109
app/Resources/Viewer/scripts/servers.mjs
Normal file
@ -0,0 +1,109 @@
|
||||
import state from "./state.mjs";
|
||||
|
||||
const servers = (() => {
|
||||
let currentServerId = "0";
|
||||
|
||||
function getIcon(name) {
|
||||
return name.split(" ").map(word => {
|
||||
if (word.startsWith("[") && word.length > 1) return word[1];
|
||||
return word[0] || "";
|
||||
}).join("");
|
||||
}
|
||||
|
||||
function update() {
|
||||
const channels = document.querySelectorAll("#channels .channel");
|
||||
const serversMap = new Map();
|
||||
|
||||
// Check if there are any channels with server-id 0 (DM)
|
||||
const hasDMChannels = Array.from(channels).some(channel => {
|
||||
return channel.getAttribute("server-id") === "0";
|
||||
});
|
||||
|
||||
if (hasDMChannels) {
|
||||
serversMap.set("0", {
|
||||
id: "0",
|
||||
name: "DM",
|
||||
icon: "DM",
|
||||
});
|
||||
}
|
||||
|
||||
channels.forEach(channel => {
|
||||
const serverId = channel.getAttribute("server-id") || "0";
|
||||
const serverType = channel.getAttribute("server-type");
|
||||
const serverName = channel.getAttribute("server-name");
|
||||
|
||||
if (serverType === "server" && !serversMap.has(serverId)) {
|
||||
serversMap.set(serverId, {
|
||||
id: serverId,
|
||||
name: serverName,
|
||||
icon: getIcon(serverName),
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
const serversDiv = document.getElementById("servers");
|
||||
serversDiv.innerHTML = "";
|
||||
|
||||
if (hasDMChannels) {
|
||||
const dmServer = serversMap.get("0");
|
||||
const dmElement = document.createElement("div");
|
||||
dmElement.className = `Server${dmServer.id === currentServerId ? " active" : ""}`;
|
||||
dmElement.id = "DM";
|
||||
dmElement.dataset.serverId = dmServer.id;
|
||||
dmElement.innerHTML = `
|
||||
<div class="icon">DM</div>
|
||||
<div class="name" title="Direct Messages">Direct Messages</div>
|
||||
`;
|
||||
dmElement.addEventListener("click", () => selectServer(dmServer.id));
|
||||
serversDiv.appendChild(dmElement);
|
||||
}
|
||||
|
||||
serversMap.forEach(server => {
|
||||
if (server.id === "0") return; // Skip DM since it's already added
|
||||
|
||||
const serverElement = document.createElement("div");
|
||||
serverElement.className = `Server${server.id === currentServerId ? " active" : ""}`;
|
||||
serverElement.dataset.serverId = server.id;
|
||||
serverElement.innerHTML = `
|
||||
<div class="icon">${server.icon}</div>
|
||||
<div class="name" title="${server.name}">${server.name}</div>
|
||||
`;
|
||||
serverElement.addEventListener("click", () => selectServer(server.id));
|
||||
serversDiv.appendChild(serverElement);
|
||||
});
|
||||
|
||||
if (!serversMap.has(currentServerId)) {
|
||||
currentServerId = "0";
|
||||
}
|
||||
|
||||
updateChannelVisibility();
|
||||
}
|
||||
|
||||
function selectServer(serverId) {
|
||||
// Remove active class from all servers
|
||||
document.querySelectorAll("#servers .Server").forEach(server => {
|
||||
server.classList.remove("active");
|
||||
});
|
||||
|
||||
// Add active class to the selected server
|
||||
const selectedServer = document.querySelector(`#servers .Server[data-server-id="${serverId}"]`);
|
||||
if (selectedServer) {
|
||||
selectedServer.classList.add("active");
|
||||
}
|
||||
|
||||
currentServerId = serverId;
|
||||
updateChannelVisibility();
|
||||
state.selectChannel(null);
|
||||
}
|
||||
|
||||
function updateChannelVisibility() {
|
||||
document.querySelectorAll("#channels .channel").forEach(channel => {
|
||||
const channelServerId = channel.getAttribute("server-id") || "0";
|
||||
channel.classList.toggle("visible", channelServerId === currentServerId);
|
||||
});
|
||||
}
|
||||
|
||||
return { update };
|
||||
})();
|
||||
|
||||
export default servers;
|
@ -2,192 +2,229 @@ import settings from "./settings.mjs";
|
||||
import processor from "./processor.mjs";
|
||||
|
||||
// noinspection FunctionWithInconsistentReturnsJS
|
||||
export default (function() {
|
||||
export default (function () {
|
||||
/**
|
||||
* @type {{}}
|
||||
* @property {{}} users
|
||||
* @property {{}} servers
|
||||
* @property {{}} channels
|
||||
*/
|
||||
|
||||
|
||||
const fileUrlProcessor = function (serverToken) {
|
||||
if (typeof serverToken === "string") {
|
||||
return url => "/get-downloaded-file/" + encodeURIComponent(url) + "?token=" + encodeURIComponent(serverToken);
|
||||
}
|
||||
else {
|
||||
return url => url;
|
||||
}
|
||||
}(window.DHT_SERVER_TOKEN);
|
||||
|
||||
|
||||
let loadedFileMeta;
|
||||
let loadedFileData;
|
||||
|
||||
|
||||
let loadedMessages;
|
||||
|
||||
|
||||
let filterFunction;
|
||||
let selectedChannel;
|
||||
let currentPage;
|
||||
let messagesPerPage;
|
||||
|
||||
const getUser = function(id) {
|
||||
|
||||
const getUser = function (id) {
|
||||
return loadedFileMeta.users[id] || { "name": "<unknown>" };
|
||||
};
|
||||
|
||||
const getUserList = function() {
|
||||
|
||||
const getUserList = function () {
|
||||
return loadedFileMeta ? loadedFileMeta.users : [];
|
||||
};
|
||||
|
||||
const getServer = function(id) {
|
||||
|
||||
const getServer = function (id) {
|
||||
return loadedFileMeta.servers[id] || { "name": "<unknown>", "type": "unknown" };
|
||||
};
|
||||
|
||||
const generateChannelHierarchy = function() {
|
||||
|
||||
const getUserIDByName = function (name) {
|
||||
for (let userId in loadedFileMeta.users) {
|
||||
let user = loadedFileMeta.users[userId];
|
||||
if (user.name === name) {
|
||||
return userId;
|
||||
}
|
||||
}
|
||||
return 0;
|
||||
};
|
||||
|
||||
const getUserByName = function (name) {
|
||||
for (let userId in loadedFileMeta.users) {
|
||||
let user = loadedFileMeta.users[userId];
|
||||
if (user.name === name) {
|
||||
return user;
|
||||
}
|
||||
}
|
||||
return 0;
|
||||
};
|
||||
|
||||
const generateChannelHierarchy = function () {
|
||||
/**
|
||||
* @type {Map<string, Set>}
|
||||
*/
|
||||
const hierarchy = new Map();
|
||||
|
||||
|
||||
if (!loadedFileMeta) {
|
||||
return hierarchy;
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* @returns {Set}
|
||||
*/
|
||||
function getChildren(parentId) {
|
||||
let children = hierarchy.get(parentId);
|
||||
|
||||
|
||||
if (!children) {
|
||||
children = new Set();
|
||||
hierarchy.set(parentId, children);
|
||||
}
|
||||
|
||||
|
||||
return children;
|
||||
}
|
||||
|
||||
for (const [ id, channel ] of Object.entries(loadedFileMeta.channels)) {
|
||||
|
||||
for (const [id, channel] of Object.entries(loadedFileMeta.channels)) {
|
||||
getChildren(channel.parent || "").add(id);
|
||||
}
|
||||
|
||||
|
||||
const unreachableIds = new Set(hierarchy.keys());
|
||||
|
||||
|
||||
function reachIds(parentId) {
|
||||
unreachableIds.delete(parentId);
|
||||
|
||||
|
||||
const children = hierarchy.get(parentId);
|
||||
|
||||
|
||||
if (children) {
|
||||
for (const id of children) {
|
||||
reachIds(id);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
reachIds("");
|
||||
|
||||
|
||||
const rootChildren = getChildren("");
|
||||
|
||||
|
||||
for (const unreachableId of unreachableIds) {
|
||||
for (const id of hierarchy.get(unreachableId)) {
|
||||
rootChildren.add(id);
|
||||
}
|
||||
|
||||
|
||||
hierarchy.delete(unreachableId);
|
||||
}
|
||||
|
||||
|
||||
return hierarchy;
|
||||
};
|
||||
|
||||
const generateChannelOrder = function() {
|
||||
|
||||
const generateChannelOrder = function () {
|
||||
if (!loadedFileMeta) {
|
||||
return {};
|
||||
}
|
||||
|
||||
|
||||
const channels = loadedFileMeta.channels;
|
||||
const hierarchy = generateChannelHierarchy();
|
||||
|
||||
|
||||
function getSortedSubTree(parentId) {
|
||||
const children = hierarchy.get(parentId);
|
||||
if (!children) {
|
||||
return [];
|
||||
}
|
||||
|
||||
|
||||
const sortedChildren = Array.from(children);
|
||||
|
||||
|
||||
sortedChildren.sort((id1, id2) => {
|
||||
const c1 = channels[id1];
|
||||
const c2 = channels[id2];
|
||||
const s1 = getServer(c1.server);
|
||||
const s2 = getServer(c2.server);
|
||||
|
||||
|
||||
return s1.type.localeCompare(s2.type, "en") ||
|
||||
s1.name.toLocaleLowerCase().localeCompare(s2.name.toLocaleLowerCase(), undefined, { numeric: true }) ||
|
||||
(c1.position || -1) - (c2.position || -1) ||
|
||||
c1.name.toLocaleLowerCase().localeCompare(c2.name.toLocaleLowerCase(), undefined, { numeric: true });
|
||||
});
|
||||
|
||||
|
||||
const subTree = [];
|
||||
|
||||
|
||||
for (const id of sortedChildren) {
|
||||
subTree.push(id);
|
||||
subTree.push(...getSortedSubTree(id));
|
||||
}
|
||||
|
||||
|
||||
return subTree;
|
||||
}
|
||||
|
||||
|
||||
const orderArray = getSortedSubTree("");
|
||||
const orderMap = {};
|
||||
|
||||
|
||||
for (let i = 0; i < orderArray.length; i++) {
|
||||
orderMap[orderArray[i]] = i;
|
||||
}
|
||||
|
||||
|
||||
return orderMap;
|
||||
};
|
||||
|
||||
const getChannelList = function() {
|
||||
|
||||
const getChannelList = function () {
|
||||
if (!loadedFileMeta) {
|
||||
return [];
|
||||
}
|
||||
|
||||
|
||||
const channels = loadedFileMeta.channels;
|
||||
const channelOrder = generateChannelOrder();
|
||||
|
||||
|
||||
|
||||
return Object.keys(channels).map(key => ({
|
||||
"id": key,
|
||||
"serverId": channels[key].server,
|
||||
"name": channels[key].name,
|
||||
"server": getServer(channels[key].server),
|
||||
"msgcount": getFilteredMessageKeys(key).length,
|
||||
"topic": channels[key].topic || "",
|
||||
"nsfw": channels[key].nsfw || false,
|
||||
"icon": getServer(channels[key].server).type === "group"
|
||||
? `<!--<span>${channels[key].name.split(" ").map(word => word[0]).join("")}</span>-->` //Discord default naming without a icon
|
||||
: `<img src='${fileUrlProcessor("https://cdn.discordapp.com/avatars/" + getUserIDByName(channels[key].name) + "/" + getUserByName(channels[key].name).avatar+".webp")}'>`
|
||||
})).sort((ac, bc) => {
|
||||
return channelOrder[ac.id] - channelOrder[bc.id];
|
||||
});
|
||||
};
|
||||
|
||||
const getMessages = function(channel) {
|
||||
|
||||
const getMessages = function (channel) {
|
||||
return loadedFileData[channel] || {};
|
||||
};
|
||||
|
||||
const getMessageById = function(id) {
|
||||
|
||||
const getMessageById = function (id) {
|
||||
for (const messages of Object.values(loadedFileData)) {
|
||||
if (id in messages) {
|
||||
return messages[id];
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
return null;
|
||||
};
|
||||
|
||||
const getMessageChannel = function(id) {
|
||||
for (const [ channel, messages ] of Object.entries(loadedFileData)) {
|
||||
|
||||
const getMessageChannel = function (id) {
|
||||
for (const [channel, messages] of Object.entries(loadedFileData)) {
|
||||
if (id in messages) {
|
||||
return channel;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
return null;
|
||||
};
|
||||
|
||||
const getMessageList = function() {
|
||||
|
||||
const getMessageList = function () {
|
||||
if (!loadedMessages) {
|
||||
return [];
|
||||
}
|
||||
|
||||
|
||||
const messages = getMessages(selectedChannel);
|
||||
const startIndex = messagesPerPage * (root.getCurrentPage() - 1);
|
||||
|
||||
|
||||
return loadedMessages.slice(startIndex, !messagesPerPage ? undefined : startIndex + messagesPerPage).map(key => {
|
||||
/**
|
||||
* @type {{}}
|
||||
@ -203,35 +240,35 @@ export default (function() {
|
||||
const message = messages[key];
|
||||
const user = getUser(message.u);
|
||||
const avatar = user.avatar ? { id: message.u, path: user.avatar } : null;
|
||||
|
||||
|
||||
const obj = {
|
||||
user,
|
||||
avatar,
|
||||
"timestamp": message.t,
|
||||
"jump": key,
|
||||
};
|
||||
|
||||
|
||||
if ("m" in message) {
|
||||
obj["contents"] = message.m;
|
||||
}
|
||||
|
||||
|
||||
if ("e" in message) {
|
||||
obj["embeds"] = message.e.map(embed => JSON.parse(embed));
|
||||
}
|
||||
|
||||
|
||||
if ("a" in message) {
|
||||
obj["attachments"] = message.a;
|
||||
}
|
||||
|
||||
|
||||
if ("te" in message) {
|
||||
obj["edit"] = message.te;
|
||||
}
|
||||
|
||||
|
||||
if ("r" in message) {
|
||||
const replyMessage = getMessageById(message.r);
|
||||
const replyUser = replyMessage ? getUser(replyMessage.u) : null;
|
||||
const replyAvatar = replyUser && replyUser.avatar ? { id: replyMessage.u, path: replyUser.avatar } : null;
|
||||
|
||||
|
||||
obj["reply"] = replyMessage ? {
|
||||
"id": message.r,
|
||||
"user": replyUser,
|
||||
@ -239,212 +276,212 @@ export default (function() {
|
||||
"contents": replyMessage.m
|
||||
} : null;
|
||||
}
|
||||
|
||||
|
||||
if ("re" in message) {
|
||||
obj["reactions"] = message.re;
|
||||
}
|
||||
|
||||
|
||||
return obj;
|
||||
});
|
||||
};
|
||||
|
||||
|
||||
let eventOnUsersRefreshed;
|
||||
let eventOnChannelsRefreshed;
|
||||
let eventOnMessagesRefreshed;
|
||||
|
||||
const triggerUsersRefreshed = function() {
|
||||
|
||||
const triggerUsersRefreshed = function () {
|
||||
eventOnUsersRefreshed && eventOnUsersRefreshed(getUserList());
|
||||
};
|
||||
|
||||
const triggerChannelsRefreshed = function(selectedChannel) {
|
||||
|
||||
const triggerChannelsRefreshed = function (selectedChannel) {
|
||||
eventOnChannelsRefreshed && eventOnChannelsRefreshed(getChannelList(), selectedChannel);
|
||||
};
|
||||
|
||||
const triggerMessagesRefreshed = function() {
|
||||
|
||||
const triggerMessagesRefreshed = function () {
|
||||
eventOnMessagesRefreshed && eventOnMessagesRefreshed(getMessageList());
|
||||
};
|
||||
|
||||
const getFilteredMessageKeys = function(channel) {
|
||||
|
||||
const getFilteredMessageKeys = function (channel) {
|
||||
const messages = getMessages(channel);
|
||||
let keys = Object.keys(messages);
|
||||
|
||||
|
||||
if (filterFunction) {
|
||||
keys = keys.filter(key => filterFunction(messages[key]));
|
||||
}
|
||||
|
||||
|
||||
return keys;
|
||||
};
|
||||
|
||||
|
||||
const root = {
|
||||
onChannelsRefreshed(callback) {
|
||||
eventOnChannelsRefreshed = callback;
|
||||
},
|
||||
|
||||
|
||||
onMessagesRefreshed(callback) {
|
||||
eventOnMessagesRefreshed = callback;
|
||||
},
|
||||
|
||||
|
||||
onUsersRefreshed(callback) {
|
||||
eventOnUsersRefreshed = callback;
|
||||
},
|
||||
|
||||
|
||||
uploadFile(meta, data) {
|
||||
if (loadedFileMeta != null) {
|
||||
throw "A file is already loaded!";
|
||||
}
|
||||
|
||||
|
||||
if (typeof meta !== "object" || typeof data !== "object") {
|
||||
throw "Invalid file format!";
|
||||
}
|
||||
|
||||
|
||||
loadedFileMeta = meta;
|
||||
loadedFileData = data;
|
||||
loadedMessages = null;
|
||||
|
||||
|
||||
selectedChannel = null;
|
||||
currentPage = 1;
|
||||
|
||||
|
||||
triggerUsersRefreshed();
|
||||
triggerChannelsRefreshed();
|
||||
triggerMessagesRefreshed();
|
||||
|
||||
|
||||
settings.onSettingsChanged(() => triggerMessagesRefreshed());
|
||||
},
|
||||
|
||||
|
||||
getChannelName(channel) {
|
||||
const channelObj = loadedFileMeta.channels[channel];
|
||||
return (channelObj && channelObj.name) || channel;
|
||||
},
|
||||
|
||||
|
||||
getUserName(user) {
|
||||
const userObj = loadedFileMeta.users[user];
|
||||
return (userObj && userObj.name) || user;
|
||||
},
|
||||
|
||||
|
||||
getUserDisplayName(user) {
|
||||
const userObj = loadedFileMeta.users[user];
|
||||
return (userObj && (userObj.displayName || userObj.name)) || user;
|
||||
},
|
||||
|
||||
|
||||
selectChannel(channel) {
|
||||
currentPage = 1;
|
||||
selectedChannel = channel;
|
||||
|
||||
|
||||
loadedMessages = getFilteredMessageKeys(channel).sort(processor.SORTER.oldestToNewest);
|
||||
triggerMessagesRefreshed();
|
||||
},
|
||||
|
||||
|
||||
setMessagesPerPage(amount) {
|
||||
messagesPerPage = amount;
|
||||
triggerMessagesRefreshed();
|
||||
},
|
||||
|
||||
|
||||
updateCurrentPage(action) {
|
||||
switch (action) {
|
||||
case "first":
|
||||
currentPage = 1;
|
||||
break;
|
||||
|
||||
|
||||
case "prev":
|
||||
currentPage = Math.max(1, currentPage - 1);
|
||||
break;
|
||||
|
||||
|
||||
case "next":
|
||||
currentPage = Math.min(this.getPageCount(), currentPage + 1);
|
||||
break;
|
||||
|
||||
|
||||
case "last":
|
||||
currentPage = this.getPageCount();
|
||||
break;
|
||||
|
||||
|
||||
case "pick":
|
||||
const page = parseInt(prompt("Select page:", currentPage), 10);
|
||||
|
||||
|
||||
if (!page && page !== 0) {
|
||||
return;
|
||||
}
|
||||
|
||||
|
||||
currentPage = Math.max(1, Math.min(this.getPageCount(), page));
|
||||
break;
|
||||
}
|
||||
|
||||
|
||||
triggerMessagesRefreshed();
|
||||
},
|
||||
|
||||
|
||||
getCurrentPage() {
|
||||
const total = this.getPageCount();
|
||||
|
||||
|
||||
if (currentPage > total && total > 0) {
|
||||
currentPage = total;
|
||||
}
|
||||
|
||||
|
||||
return currentPage || 1;
|
||||
},
|
||||
|
||||
|
||||
getPageCount() {
|
||||
return !loadedMessages ? 0 : (!messagesPerPage ? 1 : Math.ceil(loadedMessages.length / messagesPerPage));
|
||||
},
|
||||
|
||||
|
||||
navigateToMessage(id) {
|
||||
if (!loadedMessages) {
|
||||
return -1;
|
||||
}
|
||||
|
||||
|
||||
const channel = getMessageChannel(id);
|
||||
|
||||
|
||||
if (channel !== null && channel !== selectedChannel) {
|
||||
triggerChannelsRefreshed(channel);
|
||||
this.selectChannel(channel);
|
||||
}
|
||||
|
||||
|
||||
const index = loadedMessages.indexOf(id);
|
||||
|
||||
|
||||
if (index === -1) {
|
||||
return -1;
|
||||
}
|
||||
|
||||
|
||||
currentPage = Math.max(1, Math.min(this.getPageCount(), 1 + Math.floor(index / messagesPerPage)));
|
||||
triggerMessagesRefreshed();
|
||||
return index % messagesPerPage;
|
||||
},
|
||||
|
||||
|
||||
setActiveFilter(filter) {
|
||||
switch (filter ? filter.type : "") {
|
||||
case "user":
|
||||
filterFunction = processor.FILTER.byUser(filter.value);
|
||||
break;
|
||||
|
||||
|
||||
case "contents":
|
||||
filterFunction = processor.FILTER.byContents(filter.value);
|
||||
break;
|
||||
|
||||
|
||||
case "withimages":
|
||||
filterFunction = processor.FILTER.withImages();
|
||||
break;
|
||||
|
||||
|
||||
case "withdownloads":
|
||||
filterFunction = processor.FILTER.withDownloads();
|
||||
break;
|
||||
|
||||
|
||||
case "edited":
|
||||
filterFunction = processor.FILTER.isEdited();
|
||||
break;
|
||||
|
||||
|
||||
default:
|
||||
filterFunction = null;
|
||||
break;
|
||||
}
|
||||
|
||||
|
||||
this.hasActiveFilter = filterFunction != null;
|
||||
|
||||
|
||||
triggerChannelsRefreshed(selectedChannel);
|
||||
|
||||
|
||||
if (selectedChannel) {
|
||||
this.selectChannel(selectedChannel); // resets current page and updates messages
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
root.hasActiveFilter = false;
|
||||
return root;
|
||||
})();
|
||||
|
@ -8,15 +8,21 @@ export default class {
|
||||
};
|
||||
|
||||
apply(obj, processor) {
|
||||
|
||||
//Keys to not escape
|
||||
const allowHTMLKeys = new Set(["icon"]); //Example with more: Set(["icon", "description", "content"]);
|
||||
|
||||
return this.contents.replace(TEMPLATE_REGEX, (full, match) => {
|
||||
const value = match.split(".").reduce((o, property) => o[property], obj);
|
||||
|
||||
if (processor) {
|
||||
const updated = processor(match, value);
|
||||
return typeof updated === "undefined" ? dom.escapeHTML(value) : updated;
|
||||
return typeof updated === "undefined" ? (allowHTMLKeys.has(match) ? value : dom.escapeHTML(value)) : updated;
|
||||
}
|
||||
|
||||
return dom.escapeHTML(value);
|
||||
|
||||
|
||||
return allowHTMLKeys.has(match) ? value : dom.escapeHTML(value);
|
||||
});
|
||||
}
|
||||
|
||||
}
|
||||
|
@ -4,8 +4,9 @@
|
||||
max-width: 300px;
|
||||
overflow-y: auto;
|
||||
color: #eee;
|
||||
background-color: #1c1e22;
|
||||
background-color: #2B2D31;
|
||||
font-size: 15px;
|
||||
padding: 2px;
|
||||
}
|
||||
|
||||
#channels > div.loading {
|
||||
@ -14,27 +15,93 @@
|
||||
height: 150px;
|
||||
}
|
||||
|
||||
#channels > div.channel {
|
||||
cursor: pointer;
|
||||
padding: 10px 12px;
|
||||
border-bottom: 1px solid #333333;
|
||||
#channels > div.loading {
|
||||
background-color: rgba(0, 0, 0, 0) !important;
|
||||
}
|
||||
|
||||
#channels > div.channel:hover, #channels > div.channel.active {
|
||||
background-color: #282b30;
|
||||
|
||||
#channels > div.channel.visible {
|
||||
display: flex !important;
|
||||
}
|
||||
|
||||
#channels > div.channel {
|
||||
display: none !important;
|
||||
|
||||
cursor: pointer;
|
||||
padding: 5px 8px;
|
||||
|
||||
color: #eee;
|
||||
font-size: 15px;
|
||||
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: nowrap;
|
||||
align-items: flex-start;
|
||||
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
|
||||
.ServerChannel {
|
||||
padding: 8px 8px !important;
|
||||
}
|
||||
|
||||
#channels > div.channel:hover,
|
||||
#channels > div.channel.active {
|
||||
background-color: rgba(78, 80, 88, 0.6);
|
||||
}
|
||||
|
||||
#channels > div.channel.active > .info > .name {
|
||||
color: oklab(0.999994 0.0000455678 0.0000200868);
|
||||
}
|
||||
|
||||
|
||||
#channels .info {
|
||||
display: flex;
|
||||
height: 16px;
|
||||
margin-bottom: 4px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.ServerChannel > .info {
|
||||
padding: 0px !important;
|
||||
}
|
||||
|
||||
.UserChannel > .info {
|
||||
align-self: center;
|
||||
padding-left: 6px !important;
|
||||
align-items: center;
|
||||
|
||||
width: 150px !important;
|
||||
}
|
||||
|
||||
|
||||
[server-type="group"] > .info {
|
||||
padding: 6px;
|
||||
|
||||
width: 172px !important;
|
||||
}
|
||||
|
||||
.UserChannel > .info > .name {
|
||||
min-height: 18px;
|
||||
}
|
||||
|
||||
#channels .name {
|
||||
flex-grow: 1;
|
||||
overflow-x: hidden;
|
||||
overflow-y: clip;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
color: oklab(0.686636 -0.00407365 -0.0149199);
|
||||
font-weight: 500;
|
||||
font-size: 16px;
|
||||
/* max-width: 200px; */
|
||||
}
|
||||
|
||||
.ServerChannel .name {
|
||||
height: 18px;
|
||||
}
|
||||
|
||||
#channels .tag {
|
||||
@ -46,3 +113,25 @@
|
||||
padding: 2px 5px;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
|
||||
#channels > div:hover,
|
||||
#channels > div.active {
|
||||
background-color: #404249
|
||||
}
|
||||
|
||||
#channels > div > .avatar {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#channels > div > .avatar > * {
|
||||
width: 30px;
|
||||
|
||||
min-width: 30px;
|
||||
min-height: 30px;
|
||||
/*Make not loaded images be 30px*/
|
||||
|
||||
border-radius: 100%;
|
||||
font-size: 1em;
|
||||
}
|
@ -17,6 +17,10 @@ body {
|
||||
--loading-backdrop: rgba(0, 0, 0, 0);
|
||||
}
|
||||
|
||||
.loading:hover {
|
||||
background-color: rgba(0, 0, 0, 0) !important;
|
||||
}
|
||||
|
||||
.loading::after {
|
||||
content: "";
|
||||
background: var(--loading-backdrop)
|
||||
|
@ -4,8 +4,8 @@
|
||||
align-items: stretch;
|
||||
gap: 8px;
|
||||
padding: 8px;
|
||||
background-color: #17181c;
|
||||
border-bottom: 1px dotted #5d626b;
|
||||
background-color: #313338;
|
||||
border-bottom: 2px solid #27292D;
|
||||
}
|
||||
|
||||
#menu .splitter {
|
||||
@ -23,7 +23,9 @@
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
#menu button, #menu select, #menu input[type="text"] {
|
||||
#menu button,
|
||||
#menu select,
|
||||
#menu input[type="text"] {
|
||||
height: 31px;
|
||||
padding: 0 10px;
|
||||
background-color: #7289da;
|
||||
@ -64,11 +66,13 @@
|
||||
padding: 0 8px;
|
||||
}
|
||||
|
||||
#menu .nav > button, #menu .nav > p {
|
||||
#menu .nav > button,
|
||||
#menu .nav > p {
|
||||
margin: 0 1px;
|
||||
}
|
||||
|
||||
#opt-filter-list > select, #opt-filter-list > input {
|
||||
#opt-filter-list > select,
|
||||
#opt-filter-list > input {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@ -78,4 +82,4 @@
|
||||
|
||||
#btn-about {
|
||||
margin-left: auto;
|
||||
}
|
||||
}
|
@ -5,9 +5,14 @@
|
||||
}
|
||||
|
||||
#messages > div {
|
||||
margin: 0 24px;
|
||||
padding: 4px 0 12px;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.04);
|
||||
padding: 0 4px 0 24px;
|
||||
|
||||
margin-bottom: 17px;
|
||||
}
|
||||
|
||||
|
||||
#messages > div:hover {
|
||||
background-color: oklab(0.0846607 0.00000385568 0.00000169128 / 0.06);
|
||||
}
|
||||
|
||||
#messages h2 {
|
||||
@ -23,6 +28,8 @@
|
||||
align-content: flex-start;
|
||||
}
|
||||
|
||||
|
||||
|
||||
#messages .avatar-wrapper > div {
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
@ -50,14 +57,9 @@
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
letter-spacing: 0;
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
#messages .info::before {
|
||||
content: "\2022";
|
||||
text-align: center;
|
||||
display: inline-block;
|
||||
width: 14px;
|
||||
}
|
||||
|
||||
#messages .jump {
|
||||
cursor: pointer;
|
||||
@ -66,20 +68,22 @@
|
||||
}
|
||||
|
||||
.message {
|
||||
margin-top: 6px;
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
font-size: 15px;
|
||||
margin-top: 2px;
|
||||
color: oklab(0.89908 -0.00192907 -0.0048306);
|
||||
font-size: 16px;
|
||||
line-height: 1.1em;
|
||||
white-space: pre-wrap;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
.message .link, .reply-message .link {
|
||||
.message .link,
|
||||
.reply-message .link {
|
||||
color: #7289da;
|
||||
background-color: rgba(115, 139, 215, 0.1);
|
||||
}
|
||||
|
||||
.message a, .reply-message a {
|
||||
.message a,
|
||||
.reply-message a {
|
||||
color: #0096cf;
|
||||
text-decoration: none;
|
||||
}
|
||||
@ -126,7 +130,8 @@
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.message .embed:first-child, .message .download + .download {
|
||||
.message .embed:first-child,
|
||||
.message .download+.download {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
@ -257,4 +262,4 @@
|
||||
.reactions .count {
|
||||
color: rgba(255, 255, 255, 0.45);
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
81
app/Resources/Viewer/styles/servers.css
Normal file
81
app/Resources/Viewer/styles/servers.css
Normal file
@ -0,0 +1,81 @@
|
||||
#servers {
|
||||
width: 76px;
|
||||
background-color: #1e1f22;
|
||||
padding: 0px;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.Server {
|
||||
width: 54px;
|
||||
height: 54px;
|
||||
margin-left: 11px;
|
||||
margin-top: 8px;
|
||||
border-radius: 100%;
|
||||
transition: .15s ease-out;
|
||||
cursor: pointer;
|
||||
background-color: #313338;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.Server:hover {
|
||||
border-radius: 20px;
|
||||
background-color: #5865f2;
|
||||
}
|
||||
|
||||
.Server.active {
|
||||
border-radius: 20px;
|
||||
background-color: #5865f2;
|
||||
}
|
||||
|
||||
.ServerImg {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
svg.ServerImg {
|
||||
width: 100%;
|
||||
height: 70%;
|
||||
/* margin-top: 15%; */
|
||||
color: white;
|
||||
}
|
||||
|
||||
#servers .Server .icon {
|
||||
font-weight: bold;
|
||||
font-size: 1.5em;
|
||||
text-align: center;
|
||||
word-wrap: break-word;
|
||||
word-break: break-all;
|
||||
white-space: normal;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
color: white;
|
||||
}
|
||||
|
||||
#servers .Server .name {
|
||||
display: none;
|
||||
font-weight: bold;
|
||||
white-space: normal;
|
||||
word-wrap: break-word;
|
||||
text-align: center;
|
||||
}
|
||||
#servers .Server .name {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#servers .Server:hover .name {
|
||||
display: block;
|
||||
position: absolute;
|
||||
background: rgba(0, 0, 0, 0.8);
|
||||
color: white;
|
||||
padding: 5px;
|
||||
border-radius: 4px;
|
||||
margin-left: 60px;
|
||||
white-space: nowrap;
|
||||
}
|
Loading…
Reference in New Issue
Block a user