mirror of
https://git.sr.ht/~emersion/gamja
synced 2024-12-11 16:51:29 -05:00
424 lines
10 KiB
JavaScript
424 lines
10 KiB
JavaScript
import * as irc from "/lib/irc.js";
|
|
import Client from "/lib/client.js";
|
|
import Buffer from "/components/buffer.js";
|
|
import BufferList from "/components/buffer-list.js";
|
|
import Connect from "/components/connect.js";
|
|
import Composer from "/components/composer.js";
|
|
import { html, Component, createRef } from "/lib/index.js";
|
|
import { SERVER_BUFFER, Status, Unread } from "/state.js";
|
|
|
|
function parseQueryString() {
|
|
var query = window.location.search.substring(1);
|
|
var params = {};
|
|
query.split('&').forEach((s) => {
|
|
if (!s) {
|
|
return;
|
|
}
|
|
var pair = s.split('=');
|
|
params[decodeURIComponent(pair[0])] = decodeURIComponent(pair[1] || "");
|
|
});
|
|
return params;
|
|
}
|
|
|
|
export default class App extends Component {
|
|
client = null;
|
|
state = {
|
|
connectParams: {
|
|
serverURL: null,
|
|
serverPass: null,
|
|
username: null,
|
|
realname: null,
|
|
nick: null,
|
|
saslPlain: null,
|
|
autojoin: [],
|
|
},
|
|
status: Status.DISCONNECTED,
|
|
buffers: new Map(),
|
|
activeBuffer: null,
|
|
};
|
|
composer = createRef();
|
|
|
|
constructor(props) {
|
|
super(props);
|
|
|
|
this.handleConnectSubmit = this.handleConnectSubmit.bind(this);
|
|
this.handleBufferListClick = this.handleBufferListClick.bind(this);
|
|
this.handleComposerSubmit = this.handleComposerSubmit.bind(this);
|
|
}
|
|
|
|
setBufferState(name, updater, callback) {
|
|
this.setState((state) => {
|
|
var buf = state.buffers.get(name);
|
|
if (!buf) {
|
|
return;
|
|
}
|
|
|
|
var updated;
|
|
if (typeof updater === "function") {
|
|
updated = updater(buf, state);
|
|
} else {
|
|
updated = updater;
|
|
}
|
|
if (buf === updated || !updated) {
|
|
return;
|
|
}
|
|
updated = { ...buf, ...updated };
|
|
|
|
var buffers = new Map(state.buffers);
|
|
buffers.set(name, updated);
|
|
return { buffers };
|
|
}, callback);
|
|
}
|
|
|
|
createBuffer(name) {
|
|
this.setState((state) => {
|
|
if (state.buffers.get(name)) {
|
|
return;
|
|
}
|
|
|
|
var buffers = new Map(state.buffers);
|
|
buffers.set(name, {
|
|
name: name,
|
|
topic: null,
|
|
members: new Map(),
|
|
messages: [],
|
|
unread: Unread.NONE,
|
|
});
|
|
return { buffers };
|
|
});
|
|
}
|
|
|
|
switchBuffer(name) {
|
|
this.setBufferState(name, { unread: Unread.NONE });
|
|
this.setState({ activeBuffer: name }, () => {
|
|
if (this.composer.current) {
|
|
this.composer.current.focus();
|
|
}
|
|
});
|
|
}
|
|
|
|
addMessage(bufName, msg) {
|
|
if (!msg.tags) {
|
|
msg.tags = {};
|
|
}
|
|
if (!msg.tags["time"]) {
|
|
// Format the current time according to ISO 8601
|
|
var date = new Date();
|
|
var YYYY = date.getUTCFullYear().toString().padStart(4, "0");
|
|
var MM = (date.getUTCMonth() + 1).toString().padStart(2, "0");
|
|
var DD = date.getUTCDate().toString().padStart(2, "0");
|
|
var hh = date.getUTCHours().toString().padStart(2, "0");
|
|
var mm = date.getUTCMinutes().toString().padStart(2, "0");
|
|
var ss = date.getUTCSeconds().toString().padStart(2, "0");
|
|
var sss = date.getUTCMilliseconds().toString().padStart(3, "0");
|
|
msg.tags["time"] = `${YYYY}-${MM}-${DD}T${hh}:${mm}:${ss}.${sss}Z`;
|
|
}
|
|
|
|
var unread = Unread.NONE;
|
|
if (msg.command == "PRIVMSG" || msg.command == "NOTICE") {
|
|
unread = Unread.MESSAGE;
|
|
}
|
|
|
|
this.createBuffer(bufName);
|
|
this.setBufferState(bufName, (buf, state) => {
|
|
var unread = buf.unread;
|
|
if (state.activeBuffer != buf.name) {
|
|
unread = Unread.union(buf.unread, unread);
|
|
}
|
|
return {
|
|
messages: buf.messages.concat(msg),
|
|
unread,
|
|
};
|
|
});
|
|
}
|
|
|
|
connect(params) {
|
|
this.setState({ status: Status.CONNECTING, connectParams: params });
|
|
|
|
this.client = new Client({
|
|
url: params.serverURL,
|
|
pass: params.serverPass,
|
|
nick: params.nick,
|
|
username: params.username,
|
|
realname: params.realname,
|
|
saslPlain: params.saslPlain,
|
|
});
|
|
|
|
this.client.addEventListener("close", () => {
|
|
this.setState({
|
|
status: Status.DISCONNECTED,
|
|
buffers: new Map(),
|
|
activeBuffer: null,
|
|
});
|
|
});
|
|
|
|
this.client.addEventListener("message", (event) => {
|
|
this.handleMessage(event.detail.message);
|
|
});
|
|
|
|
this.createBuffer(SERVER_BUFFER);
|
|
this.switchBuffer(SERVER_BUFFER);
|
|
}
|
|
|
|
handleMessage(msg) {
|
|
switch (msg.command) {
|
|
case irc.RPL_WELCOME:
|
|
this.setState({ status: Status.REGISTERED });
|
|
|
|
if (this.state.connectParams.autojoin.length > 0) {
|
|
this.client.send({
|
|
command: "JOIN",
|
|
params: [this.state.connectParams.autojoin.join(",")],
|
|
});
|
|
}
|
|
break;
|
|
case irc.RPL_TOPIC:
|
|
var channel = msg.params[1];
|
|
var topic = msg.params[2];
|
|
|
|
this.setBufferState(channel, { topic });
|
|
break;
|
|
case irc.RPL_NAMREPLY:
|
|
var channel = msg.params[2];
|
|
var membersList = msg.params.slice(3);
|
|
|
|
this.setBufferState(channel, (buf) => {
|
|
var members = new Map(buf.members);
|
|
membersList.forEach((s) => {
|
|
var member = irc.parseMembership(s);
|
|
members.set(member.nick, member.prefix);
|
|
});
|
|
|
|
return { members };
|
|
});
|
|
break;
|
|
case irc.RPL_ENDOFNAMES:
|
|
break;
|
|
case "NOTICE":
|
|
case "PRIVMSG":
|
|
var target = msg.params[0];
|
|
if (target == this.client.nick) {
|
|
target = msg.prefix.name;
|
|
}
|
|
this.addMessage(target, msg);
|
|
break;
|
|
case "JOIN":
|
|
var channel = msg.params[0];
|
|
|
|
this.createBuffer(channel);
|
|
this.setBufferState(channel, (buf) => {
|
|
var members = new Map(buf.members);
|
|
members.set(msg.prefix.name, null);
|
|
return { members };
|
|
});
|
|
if (msg.prefix.name != this.client.nick) {
|
|
this.addMessage(channel, msg);
|
|
}
|
|
if (channel == this.state.connectParams.autojoin[0]) {
|
|
// TODO: only switch once right after connect
|
|
this.switchBuffer(channel);
|
|
}
|
|
break;
|
|
case "PART":
|
|
var channel = msg.params[0];
|
|
|
|
this.setBufferState(channel, (buf) => {
|
|
var members = new Map(buf.members);
|
|
members.delete(msg.prefix.name);
|
|
return { members };
|
|
});
|
|
this.addMessage(channel, msg);
|
|
break;
|
|
case "NICK":
|
|
var newNick = msg.params[0];
|
|
|
|
var affectedBuffers = [];
|
|
this.setState((state) => {
|
|
var buffers = new Map(state.buffers);
|
|
state.buffers.forEach((buf) => {
|
|
if (!buf.members.has(msg.prefix.name)) {
|
|
return;
|
|
}
|
|
var members = new Map(buf.members);
|
|
members.set(newNick, members.get(msg.prefix.name));
|
|
members.delete(msg.prefix.name);
|
|
buffers.set(buf.name, { ...buf, members });
|
|
affectedBuffers.push(buf.name);
|
|
});
|
|
return { buffers };
|
|
});
|
|
affectedBuffers.forEach((name) => this.addMessage(name, msg));
|
|
break;
|
|
case "TOPIC":
|
|
var channel = msg.params[0];
|
|
var topic = msg.params[1];
|
|
|
|
this.setBufferState(channel, { topic });
|
|
this.addMessage(channel, msg);
|
|
break;
|
|
default:
|
|
this.addMessage(SERVER_BUFFER, msg);
|
|
}
|
|
}
|
|
|
|
handleConnectSubmit(connectParams) {
|
|
if (localStorage) {
|
|
if (connectParams.rememberMe) {
|
|
localStorage.setItem("autoconnect", JSON.stringify(connectParams));
|
|
} else {
|
|
localStorage.removeItem("autoconnect");
|
|
}
|
|
}
|
|
|
|
this.connect(connectParams);
|
|
}
|
|
|
|
isChannel(name) {
|
|
// TODO: use the ISUPPORT token if available
|
|
return irc.STD_CHANNEL_TYPES.indexOf(name[0]) >= 0;
|
|
}
|
|
|
|
executeCommand(s) {
|
|
var parts = s.split(" ");
|
|
var cmd = parts[0].toLowerCase().slice(1);
|
|
var args = parts.slice(1);
|
|
switch (cmd) {
|
|
case "quit":
|
|
if (localStorage) {
|
|
localStorage.removeItem("autoconnect");
|
|
}
|
|
this.client.close();
|
|
break;
|
|
case "close":
|
|
var target = this.state.activeBuffer;
|
|
if (!target || target == SERVER_BUFFER) {
|
|
console.error("Not in a user or channel buffer");
|
|
return;
|
|
}
|
|
if (this.isChannel(target)) {
|
|
this.client.send({ command: "PART", params: [channel] });
|
|
}
|
|
this.switchBuffer(SERVER_BUFFER);
|
|
this.setState((state) => {
|
|
var buffers = new Map(state.buffers);
|
|
buffers.delete(target);
|
|
return { buffers };
|
|
});
|
|
break;
|
|
case "join":
|
|
var channel = args[0];
|
|
if (!channel) {
|
|
console.error("Missing channel name");
|
|
return;
|
|
}
|
|
this.client.send({ command: "JOIN", params: [channel] });
|
|
break;
|
|
case "part":
|
|
// TODO: part reason
|
|
if (!this.state.activeBuffer || !this.isChannel(this.state.activeBuffer)) {
|
|
console.error("Not in a channel");
|
|
return;
|
|
}
|
|
var channel = this.state.activeBuffer;
|
|
this.client.send({ command: "PART", params: [channel] });
|
|
break;
|
|
case "msg":
|
|
var target = args[0];
|
|
var text = args.slice(1).join(" ");
|
|
this.client.send({ command: "PRIVMSG", params: [target, text] });
|
|
break;
|
|
case "nick":
|
|
var newNick = args[0];
|
|
this.client.send({ command: "NICK", params: [newNick] });
|
|
break;
|
|
default:
|
|
console.error("Unknwon command '" + cmd + "'");
|
|
}
|
|
}
|
|
|
|
handleComposerSubmit(text) {
|
|
if (!text) {
|
|
return;
|
|
}
|
|
|
|
if (text.startsWith("//")) {
|
|
text = text.slice(1);
|
|
} else if (text.startsWith("/")) {
|
|
this.executeCommand(text);
|
|
return;
|
|
}
|
|
|
|
var target = this.state.activeBuffer;
|
|
if (!target || target == SERVER_BUFFER) {
|
|
return;
|
|
}
|
|
|
|
var msg = { command: "PRIVMSG", params: [target, text] };
|
|
this.client.send(msg);
|
|
msg.prefix = { name: this.client.nick };
|
|
this.addMessage(target, msg);
|
|
}
|
|
|
|
handleBufferListClick(name) {
|
|
this.switchBuffer(name);
|
|
}
|
|
|
|
componentDidMount() {
|
|
if (localStorage && localStorage.getItem("autoconnect")) {
|
|
var connectParams = JSON.parse(localStorage.getItem("autoconnect"));
|
|
this.connect(connectParams);
|
|
} else {
|
|
var params = parseQueryString();
|
|
|
|
var serverURL = params.server;
|
|
if (!serverURL) {
|
|
var host = window.location.host || "localhost:8080";
|
|
var proto = "wss:";
|
|
if (window.location.protocol != "https:") {
|
|
proto = "ws:";
|
|
}
|
|
connectParams.serverURL = proto + "//" + host + "/socket";
|
|
}
|
|
|
|
var autojoin = [];
|
|
if (params.channels) {
|
|
autojoin = params.channels.split(",");
|
|
}
|
|
|
|
this.setState((state) => {
|
|
return {
|
|
connectParams: {
|
|
...state.connectParams,
|
|
serverURL,
|
|
autojoin,
|
|
},
|
|
};
|
|
});
|
|
}
|
|
}
|
|
|
|
render() {
|
|
if (this.state.status != Status.REGISTERED) {
|
|
return html`
|
|
<section id="connect">
|
|
<${Connect} params=${this.state.connectParams} disabled=${this.state.status != Status.DISCONNECTED} onSubmit=${this.handleConnectSubmit}/>
|
|
</section>
|
|
`;
|
|
}
|
|
|
|
var activeBuffer = null;
|
|
if (this.state.activeBuffer) {
|
|
activeBuffer = this.state.buffers.get(this.state.activeBuffer);
|
|
}
|
|
|
|
return html`
|
|
<section id="sidebar">
|
|
<${BufferList} buffers=${this.state.buffers} activeBuffer=${this.state.activeBuffer} onBufferClick=${this.handleBufferListClick}/>
|
|
</section>
|
|
<section id="buffer">
|
|
<${Buffer} buffer=${activeBuffer}/>
|
|
</section>
|
|
<${Composer} ref=${this.composer} readOnly=${this.state.activeBuffer == SERVER_BUFFER} onSubmit=${this.handleComposerSubmit}/>
|
|
`;
|
|
}
|
|
}
|